/* Theme CSS Variables for Dark Mode Support */

/* Light mode (default) */
:root,
:root[data-theme="light"] {
  --background-primary: #ffffff;
  --background-secondary: #f5f5f5;
  --background-tertiary: #eeeeee;

  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.6);
  --text-disabled: rgba(0, 0, 0, 0.38);

  --border-color: rgba(0, 0, 0, 0.12);
  --divider-color: rgba(0, 0, 0, 0.12);

  --shadow-color: rgba(0, 0, 0, 0.2);
}

/* Dark mode */
:root[data-theme="dark"] {
  --background-primary: #0d1117;
  --background-secondary: #161b22;
  --background-tertiary: #21262d;

  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-disabled: rgba(255, 255, 255, 0.38);

  --border-color: rgba(255, 255, 255, 0.12);
  --divider-color: rgba(255, 255, 255, 0.12);

  --shadow-color: rgba(0, 0, 0, 0.5);

  /* Darker environment colors for navbar */
  --green: #094d32;
  --purple: #2a134b;
  --blue: #163661;

  /* Lighten dark-blue for dark mode */
  --dark-blue: #4548f2;
  .dim {
      opacity: 0.8 !important;
  }
}

/* Apply theme colors to common elements */
:root[data-theme="dark"] body {
  background-color: var(--background-primary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .main-content {
  background-color: var(--background-primary);
  color: var(--text-primary);
}

/* MUI overrides for dark mode */
:root[data-theme="dark"] .MuiPaper-root {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiAppBar-root {
  background-color: var(--background-tertiary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiDrawer-paper {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiMenu-paper {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiDialog-paper {
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiCard-root {
  background-color: var(--background-secondary);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.072) !important;
}

:root[data-theme="dark"] .MuiTableCell-root {
  color: var(--text-primary);
  border-bottom-color: var(--divider-color);
}

:root[data-theme="dark"] .MuiTableCell-head {
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiDivider-root {
  background-color: var(--divider-color);
}

:root[data-theme="dark"] .MuiInputBase-root {
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiInputLabel-root {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color);
}

:root[data-theme="dark"] .MuiIconButton-root {
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiTypography-root {
  color: var(--text-primary);
}

/* MUI DataGrid overrides for dark mode */
:root[data-theme="dark"] .MuiDataGrid-root {
  color: var(--text-primary);
  background-color: var(--background-secondary);
  border-color: var(--border-color);
}

:root[data-theme="dark"] .MuiDataGrid-columnHeaders {
  background-color: var(--background-tertiary);
  color: var(--text-primary);
  border-bottom-color: var(--divider-color);
}

:root[data-theme="dark"] .MuiDataGrid-columnHeader {
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiDataGrid-columnHeaderTitle {
  color: var(--text-primary);
  font-weight: 500;
}

:root[data-theme="dark"] .MuiDataGrid-row {
  background-color: var(--background-secondary);
  color: var(--text-primary);
  border-bottom-color: var(--divider-color);
}

:root[data-theme="dark"] .MuiDataGrid-row:hover {
  background-color: var(--background-tertiary);
}

:root[data-theme="dark"] .MuiDataGrid-cell {
  color: var(--text-primary);
  border-bottom-color: var(--divider-color);
}

:root[data-theme="dark"] .MuiDataGrid-footerContainer {
  background-color: var(--background-tertiary);
  color: var(--text-primary);
  border-top-color: var(--divider-color);
}

:root[data-theme="dark"] .MuiDataGrid-selectedRowCount {
  color: var(--text-primary);
}

:root[data-theme="dark"] .MuiDataGrid-overlay {
  background-color: var(--background-secondary);
}

:root[data-theme="dark"] .MuiDataGrid-iconSeparator {
  color: var(--border-color);
}

:root[data-theme="dark"] .MuiDataGrid-menuIcon,
:root[data-theme="dark"] .MuiDataGrid-sortIcon {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .MuiDataGrid-columnHeader--sorted .MuiDataGrid-sortIcon {
  color: var(--text-primary);
}

/* Navbar overrides for dark mode */
/* Don't override toolbar background - preserve environment colors (green/purple/blue) */
:root[data-theme="dark"] .tool-bar {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .navbar-item {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .navbar-item-selected {
  color: var(--text-primary) !important;
  background-color: var(--background-secondary) !important;
}

:root[data-theme="dark"] .nav-button {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .nav-button:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

:root[data-theme="dark"] .global-search-container input {
  background-color: var(--background-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .global-search-container .MuiInputBase-root {
  background-color: var(--background-secondary) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .global-search-container .MuiOutlinedInput-root {
  background-color: var(--background-secondary) !important;
}

:root[data-theme="dark"] .global-search-container .MuiOutlinedInput-notchedOutline {
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .global-search-container .MuiInputBase-input {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .global-search-container .MuiIconButton-root {
  color: var(--text-secondary) !important;
}

/* Form control label text (checkbox/radio labels) in dark mode */
:root[data-theme="dark"] .MuiFormControlLabel-label {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .MuiFormControlLabel-label.Mui-disabled {
  color: var(--text-disabled) !important;
}

/* Form label (fieldset legends, button-group labels) in dark mode */
:root[data-theme="dark"] .MuiFormLabel-root {
  color: var(--text-primary) !important;
}


/* Helper text and secondary typography in dark mode */
:root[data-theme="dark"] .MuiFormHelperText-root {
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .MuiTypography-colorTextSecondary {
  color: var(--text-secondary) !important;
}

/* Toggle button group unselected/disabled states in dark mode */
:root[data-theme="dark"] .MuiButton-outlinedPrimary {
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

:root[data-theme="dark"] .MuiButton-outlined.Mui-disabled {
  color: var(--text-disabled) !important;
  border-color: var(--border-color) !important;
}

/* MUI input placeholder text in dark mode */
:root[data-theme="dark"] .MuiInputBase-input::placeholder {
  color: var(--text-disabled) !important;
  opacity: 1 !important;
}

/* Disabled button text visibility in dark mode */
:root[data-theme="dark"] .MuiButton-contained.Mui-disabled {
  color: var(--text-disabled) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

/* MUI Autocomplete/Select dropdown in dark mode */
:root[data-theme="dark"] .MuiAutocomplete-paper {
  background-color: var(--background-secondary) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .MuiAutocomplete-listbox {
  background-color: var(--background-secondary) !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .MuiAutocomplete-option {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .MuiAutocomplete-option:hover,
:root[data-theme="dark"] .MuiAutocomplete-option[data-focus="true"] {
  background-color: var(--background-tertiary) !important;
}

:root[data-theme="dark"] .MuiAutocomplete-noOptions,
:root[data-theme="dark"] .MuiAutocomplete-loading {
  background-color: var(--background-secondary) !important;
  color: var(--text-secondary) !important;
}

:root[data-theme="dark"] .MuiSelect-select {
  color: var(--text-primary) !important;
}

/* Policy info box */
:root[data-theme="dark"] .policy-info-box {
  background-color: #1a2f4a !important;
  border-color: #3a6186 !important;
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] .policy-info-box * {
  color: var(--text-primary) !important;
}

/* Policy import placeholder */
:root[data-theme="dark"] .policy-import-placeholder {
  background-color: var(--background-tertiary) !important;
}

/* Policy section card border */
:root[data-theme="dark"] .policy-section-card {
  border-color: rgba(255, 255, 255, 0.072) !important;
}

:root[data-theme="dark"] .policy-section-card * {
  color: var(--text-primary);
}

/* Google Maps dark mode */
:root[data-theme="dark"] .google-map,
:root[data-theme="dark"] .place-creator-map {
  filter: invert(90%) hue-rotate(180deg);
}

/* Context popover close button */
:root[data-theme="dark"] .close-button-container {
  background-color: var(--background-tertiary) !important;
  color: var(--text-primary) !important;
}

/* Current row highlight */
:root[data-theme="dark"] .current-row-highlight {
  background-color: #2d4a5e !important;
}