/* ========================================
   CHDS THEME - DARK MODE
   Charcoal backgrounds + Light blue accents
   ======================================== */

/* CHDS Theme - Dark Mode Specific Overrides */
[data-theme*="chds"].dark {
  /* CHDS Dark Mode uses charcoal backgrounds with navy accents */
  --color-surface: #1a1a1a;              /* Charcoal base */
  --color-surface-secondary: #242424;     /* Slightly lighter charcoal */
  --color-surface-tertiary: #2e2e2e;      /* Even lighter for cards */

  /* Borders - subtle but visible */
  --color-border: #404040;

  /* Text - good contrast on dark backgrounds */
  --color-text-primary: #e5e5e5;          /* Near white */
  --color-text-secondary: #b3b3b3;        /* Light gray */
  --color-text-tertiary: #808080;         /* Medium gray */
  --color-text-inverse: #1a1a1a;

  /* CHDS Navy stays but we lighten it for readability */
  --color-primary-100: #1e3a5f;           /* Dark navy background for icons */
  --color-primary-400: #3373a7;           /* Lighter navy for text */
  --color-primary-500: #00508f;           /* Medium navy */
  --color-primary-600: #4a9fd8;           /* Light blue for emphasis in dark mode */
  --color-primary-800: #1e293b;           /* Very dark navy for badges */

  /* Success colors for dark mode */
  --color-success-50: #064e3b;            /* Dark green background */
  --color-success-100: #065f46;           /* Slightly lighter dark green */
  --color-success-200: #047857;           /* Dark green border */
  --color-success-600: #6ee7b7;           /* Light green icon */
  --color-success-700: #a7f3d0;           /* Light green text */
  --color-success-800: #d1fae5;           /* Very light green text */

  /* Warning colors for dark mode */
  --color-warning-100: #713f12;           /* Dark amber background */
  --color-warning-600: #fde047;           /* Light yellow icon */

  /* Danger colors for dark mode */
  --color-danger-50: #7f1d1d;             /* Dark red background */
  --color-danger-100: #991b1b;            /* Slightly lighter dark red */
  --color-danger-200: #b91c1c;            /* Dark red border */
  --color-danger-600: #fca5a5;            /* Light red icon */
  --color-danger-800: #fecaca;            /* Very light red text */

  /* Accent colors for dark mode */
  --color-accent-100: #134e4a;            /* Dark teal background */
  --color-accent-500: #f5d000;            /* Slightly darker yellow */
  --color-accent-600: #5eead4;            /* Light teal icon */

  /* Info colors for dark mode */
  --color-info-50: #1e3a8a;               /* Dark blue background */
  --color-info-200: #1e40af;              /* Dark blue border */
  --color-info-600: #93c5fd;              /* Light blue icon */
  --color-info-800: #bfdbfe;              /* Very light blue text */

  /* Interactive elements */
  --color-interactive: #4a9fd8;           /* Lighter blue for links */

  /* Headings use lighter navy */
  --color-heading: #4a9fd8;
  --color-label: #4a9fd8;

  /* Icons - subtle but visible */
  --color-icon: #b3b3b3;

  /* Text colors - additional for dark mode */
  --color-text-muted: #9ca3af;           /* Muted text (lighter gray for dark mode) */
  --color-link: #60b0e8;                 /* Link color (lighter blue for dark mode) */

  /* Callout background/border/text colors for dark mode */
  --color-success-bg: #064e3b;           /* Dark green background */
  --color-success-border: #065f46;       /* Dark green border */
  --color-success-text: #a7f3d0;         /* Light green text */
  --color-warning-bg: #713f12;           /* Dark amber background */
  --color-warning-border: #92400e;       /* Dark amber border */
  --color-warning-text: #fde047;         /* Light yellow text */
  --color-info-bg: #1e3a8a;              /* Dark blue background */
  --color-info-border: #1e40af;          /* Dark blue border */
  --color-info-text: #bfdbfe;            /* Light blue text */
  --color-danger-bg: #7f1d1d;            /* Dark red background */
  --color-danger-border: #991b1b;        /* Dark red border */
  --color-danger-text: #fecaca;          /* Light red text */

  /* Shadows - darker and more prominent */
  --shadow-base: 0 3px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6);
}

/* CHDS Dark Mode - Headings should be readable */
[data-theme*="chds"].dark h1,
[data-theme*="chds"].dark h2,
[data-theme*="chds"].dark h3,
[data-theme*="chds"].dark h4,
[data-theme*="chds"].dark h5,
[data-theme*="chds"].dark h6 {
  color: #4a9fd8 !important; /* Lighter blue instead of navy */
}

/* CHDS Dark Mode - Navbar brand should be readable */
[data-theme*="chds"].dark .navbar-brand {
  color: #4a9fd8 !important; /* Lighter blue for brand text */
}

/* CHDS Dark Mode - Form labels should be visible */
[data-theme*="chds"].dark label,
[data-theme*="chds"].dark dt {
  color: var(--color-text-secondary) !important;
}

/* CHDS Dark Mode - Strong text should be visible */
[data-theme*="chds"].dark strong {
  color: var(--color-text-primary) !important;
}

/* CHDS Dark Mode - Success callouts (green background) */
[data-theme*="chds"].dark .notification-success,
[data-theme*="chds"].dark [style*="background-color: #f0fdf4"],
[data-theme*="chds"].dark [style*="background-color: #dcfce7"] {
  background-color: #064e3b !important; /* Dark green */
  border-color: #065f46 !important;
  color: #a7f3d0 !important;
}

[data-theme*="chds"].dark .notification-success i,
[data-theme*="chds"].dark [style*="background-color: #f0fdf4"] i,
[data-theme*="chds"].dark [style*="background-color: #dcfce7"] i {
  color: #6ee7b7 !important;
}

/* CHDS Dark Mode - Info callouts (blue background) */
[data-theme*="chds"].dark .notification-info,
[data-theme*="chds"].dark [style*="background-color: #eff6ff"] {
  background-color: #1e3a8a !important; /* Dark blue */
  border-color: #1e40af !important;
  color: #bfdbfe !important;
}

[data-theme*="chds"].dark .notification-info i,
[data-theme*="chds"].dark [style*="background-color: #eff6ff"] i {
  color: #93c5fd !important;
}

/* CHDS Dark Mode - Warning callouts (yellow background) */
[data-theme*="chds"].dark .notification-warning,
[data-theme*="chds"].dark [style*="background-color: #fefce8"],
[data-theme*="chds"].dark [style*="background-color: #fff3cd"] {
  background-color: #713f12 !important; /* Dark amber */
  border-color: #92400e !important;
  color: #fef08a !important;
}

[data-theme*="chds"].dark .notification-warning i,
[data-theme*="chds"].dark [style*="background-color: #fefce8"] i,
[data-theme*="chds"].dark [style*="background-color: #fff3cd"] i {
  color: #fde047 !important;
}

/* CHDS Dark Mode - Error callouts (red background) */
[data-theme*="chds"].dark .notification-error,
[data-theme*="chds"].dark [style*="background-color: #fef2f2"],
[data-theme*="chds"].dark [style*="background-color: #f8d7da"] {
  background-color: #7f1d1d !important; /* Dark red */
  border-color: #991b1b !important;
  color: #fecaca !important;
}

[data-theme*="chds"].dark .notification-error i,
[data-theme*="chds"].dark [style*="background-color: #fef2f2"] i,
[data-theme*="chds"].dark [style*="background-color: #f8d7da"] i {
  color: #fca5a5 !important;
}

/* CHDS Dark Mode - Small text in callouts */
[data-theme*="chds"].dark [style*="background-color: #f0fdf4"] small,
[data-theme*="chds"].dark [style*="background-color: #dcfce7"] small,
[data-theme*="chds"].dark [style*="background-color: #eff6ff"] small,
[data-theme*="chds"].dark [style*="background-color: #fefce8"] small,
[data-theme*="chds"].dark [style*="background-color: #fff3cd"] small,
[data-theme*="chds"].dark [style*="background-color: #fef2f2"] small,
[data-theme*="chds"].dark [style*="background-color: #f8d7da"] small {
  color: inherit !important;
  opacity: 0.8;
}

/* CHDS Dark Mode - Links should be lighter blue */
[data-theme*="chds"].dark a[style*="--color-primary-600"],
[data-theme*="chds"].dark a {
  color: #4a9fd8 !important; /* Lighter blue for readability */
}

[data-theme*="chds"].dark a:hover {
  color: #60b0e8 !important; /* Even lighter on hover */
}

/* Exception: Active button group buttons with background-color should have white text */
[data-theme*="chds"].dark a.text-white,
[data-theme*="chds"].dark a[style*="background-color"] {
  color: white !important;
}

/* CHDS Dark Mode - Fix hardcoded gray-900 text */
[data-theme*="chds"].dark .text-gray-900 {
  color: var(--color-text-primary) !important;
}

/* CHDS Dark Mode - Paragraphs should inherit parent color or use text-primary */
[data-theme*="chds"].dark p {
  color: inherit;
}

/* If paragraph has no parent color, default to text-primary */
[data-theme*="chds"].dark p:not([style*="color"]) {
  color: var(--color-text-primary);
}

/* CHDS Dark Mode - Icons should be visible */
[data-theme*="chds"].dark i.fa-solid,
[data-theme*="chds"].dark i.fa-regular,
[data-theme*="chds"].dark i.fa-light,
[data-theme*="chds"].dark i.fa-brands,
[data-theme*="chds"].dark i.fa-duotone {
  color: var(--color-icon);
}

/* Icons that already have inline color styles should keep them */
[data-theme*="chds"].dark i[style*="color"] {
  /* Inline styles take precedence */
}

/* CHDS Dark Mode - Dropdown menu items */
[data-theme*="chds"].dark [id*="dropdown"] button:hover,
[data-theme*="chds"].dark [data-dropdown-menu] button:hover {
  background-color: var(--color-surface-tertiary) !important;
}

/* CHDS Dark Mode - Trix Editor Styling */
[data-theme*="chds"].dark trix-toolbar {
  background-color: var(--color-surface-secondary) !important;
  border-color: var(--color-border) !important;
}

[data-theme*="chds"].dark trix-toolbar .trix-button-group {
  background-color: var(--color-surface-tertiary) !important;
  border-color: var(--color-border) !important;
}

[data-theme*="chds"].dark trix-toolbar .trix-button {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[data-theme*="chds"].dark trix-toolbar .trix-button:hover {
  background-color: var(--color-surface) !important;
}

[data-theme*="chds"].dark trix-toolbar .trix-button.trix-active {
  background-color: var(--color-primary-600) !important;
  color: white !important;
}

[data-theme*="chds"].dark trix-toolbar .trix-button:disabled {
  opacity: 0.5;
}

[data-theme*="chds"].dark trix-editor {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

/* ========================================
   THEME DROPDOWN ACTIVE STATE (Dark Mode)
   ======================================== */

[data-theme*="chds"].dark #theme-dropdown button.theme-active {
  background-color: #4a9fd8 !important; /* Lighter blue for dark mode */
  color: #ffffff !important;
}

/* Active state hover - slightly darker */
[data-theme*="chds"].dark #theme-dropdown button.theme-active:hover {
  background-color: #3a8fc8 !important;
}

/* ========================================
   SIDEBAR NAVIGATION (Dark Mode)
   ======================================== */

/* Dark mode adjustments for sidebar (when using CHDS theme in dark mode) */
[data-theme*="chds"].dark aside[id="drawer-navigation"] {
  background-color: #1f2937 !important; /* Dark gray-800 instead of navy */
  border-right-color: #374151 !important;
}

[data-theme*="chds"].dark aside[id="drawer-navigation"] > div {
  background-color: #1f2937 !important;
}

/* Dark mode sidebar links */
[data-theme*="chds"].dark aside[id="drawer-navigation"] a,
[data-theme*="chds"].dark aside[id="drawer-navigation"] button {
  color: #e5e5e5 !important;
}

/* Dark mode sidebar hover - use muted yellow */
[data-theme*="chds"].dark aside[id="drawer-navigation"] a:hover,
[data-theme*="chds"].dark aside[id="drawer-navigation"] button:hover {
  background-color: rgba(245, 208, 0, 0.1) !important;
  border-left: 4px solid #f5d000 !important;
  padding-left: calc(0.5rem - 4px) !important;
}

/* Dark mode sidebar active */
[data-theme*="chds"].dark aside[id="drawer-navigation"] a.active,
[data-theme*="chds"].dark aside[id="drawer-navigation"] a[aria-current="page"] {
  background-color: rgba(245, 208, 0, 0.15) !important;
  border-left: 4px solid #f5d000 !important;
  padding-left: calc(0.5rem - 4px) !important;
  font-weight: 600 !important;
}

/* Dark mode icons */
[data-theme*="chds"].dark aside[id="drawer-navigation"] i {
  color: #b3b3b3 !important;
}

[data-theme*="chds"].dark aside[id="drawer-navigation"] a:hover i,
[data-theme*="chds"].dark aside[id="drawer-navigation"] a.active i {
  color: #f5d000 !important;
}

/* Dark mode section dividers */
[data-theme*="chds"].dark aside[id="drawer-navigation"] .border-t {
  border-color: #374151 !important;
}