/* Dark Mode Toggle Icons */
#theme-toggle .icon-sun {
  display: none;
}

#theme-toggle .icon-moon {
  display: inline-block;
}

body.dark-mode #theme-toggle .icon-sun {
  display: inline-block;
}

body.dark-mode #theme-toggle .icon-moon {
  display: none;
}

/* Dark Mode — CSS variable overrides (replaces filter: invert hack) */
body.dark-mode {
  color-scheme: dark;

  /* Grey scale */
  --color-grey-500: #0A0C10;
  --color-grey-600: #111318;
  --color-grey-700: #1A1D24;
  --color-grey-800: #252830;
  --color-grey-900: #2E3138;

  /* Text scale */
  --color-text-900: #F0F0F3;
  --color-text-800: #C8CAD0;
  --color-text-700: #8B8FA3;
  --color-text-600: #6B7080;
  --color-text-500: #52566A;

  /* Neutral scale */
  --color-neutral-white: #111318;
  --color-neutral-black: #F0F0F3;
  --color-neutral-50: #1A1D24;
  --color-neutral-100: #1E2129;
  --color-neutral-200: #252830;
  --color-neutral-300: #2E3138;
  --color-neutral-400: #6B7080;
  --color-neutral-500: #8B8FA3;
  --color-neutral-600: #C8CAD0;
  --color-neutral-700: #E0E1E6;
  --color-neutral-800: #F0F0F3;
  --color-neutral-900: #F8F8FA;

  /* Information (blue) — dark tints for backgrounds, lighter for text */
  --color-information-100: #0C1B33;
  --color-information-200: #112B52;
  /* -900: slightly lighter navy so badge bg is distinguishable from page background */
  --color-information-900: #0D2545;
  --color-information-600: #4D8FF5;
  --color-information-700: #7AAEFC;
  --color-information-800: #A3CCFE;

  /* Success (green) — dark tints for backgrounds, lighter for text */
  --color-success-100: #0A1D0C;
  --color-success-200: #102C13;
  /* -900: slightly lighter dark-green so badge bg is distinguishable from page background */
  --color-success-900: #0E2E10;
  --color-success-600: #3DC942;
  --color-success-700: #69D96D;
  --color-success-800: #95E898;

  /* Danger (red) — dark tints for backgrounds, lighter for text */
  --color-danger-100: #1F0909;
  --color-danger-200: #330F0F;
  /* -900: slightly lighter dark-red so badge bg is distinguishable from page background */
  --color-danger-900: #2C0F0F;
  --color-danger-600: #FF5252;
  --color-danger-700: #FF8080;
  --color-danger-800: #FFAAAA;

  /* Warning (orange) — dark tints for backgrounds, lighter for text */
  --color-warning-100: #201408;
  --color-warning-200: #33200C;
  /* -900: slightly lighter dark-amber so badge bg is distinguishable from page background */
  --color-warning-900: #2E1C0A;
  --color-warning-600: #FFB347;
  --color-warning-700: #FFD080;
  --color-warning-800: #FFE3AA;

  /* Accent (purple) — dark tints for backgrounds, lighter for text */
  --color-accent-100: #160A2B;
  --color-accent-200: #221040;
  /* -900: slightly lighter dark-purple so badge bg is distinguishable from page background */
  --color-accent-900: #1E0E38;
  --color-accent-600: #A67DF8;
  --color-accent-700: #C19EFA;
  --color-accent-800: #DBBFFC;

  /* Dark mode shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 20px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.2);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);

  /* Focus ring adapts to dark bg */
  --focus-ring-offset: 0 0 0 2px var(--color-grey-600), 0 0 0 4px var(--color-information-400);

  background-color: var(--color-grey-600);
  color: var(--color-text-900);
}

/* Dark mode icon adaptation — SVG icons loaded as <img> are dark-colored
   and need inversion to be visible on dark backgrounds */
body.dark-mode img[src*="/icons/"] {
  filter: brightness(0) invert(0.85);
}

/* In dark mode the active item token flips to near-white bg (--color-text-900 → #F0F0F3),
   so the icon must be dark — not the white it would be via invert(1). */
body.dark-mode .sidebar-nav-item.active img[src*="/icons/"] {
  filter: brightness(0) invert(0);
}

/* btn-primary in dark mode — --color-text-900 flips to near-white, so override
   with an information-blue background that reads as a clear primary action */
body.dark-mode .btn-primary {
  background-color: #4D8FF5 !important;
  border-color: #4D8FF5 !important;
  color: #ffffff !important;
}
body.dark-mode .btn-primary:hover {
  background-color: #7AAEFC !important;
  border-color: #7AAEFC !important;
}
/* Blue background needs white icons */
body.dark-mode .btn-primary img[src*="/icons/"] {
  filter: brightness(0) invert(1);
}

/* Input fields — hardcoded values so color-scheme:dark and token cascading cannot interfere */
body.dark-mode .input-text-sm,
body.dark-mode .input-text-md,
body.dark-mode .input-text-lg {
  background-color: #1E2129 !important;
  color: #F0F0F3 !important;
  border-color: #252830 !important;
}
body.dark-mode .input-text-sm::placeholder,
body.dark-mode .input-text-md::placeholder,
body.dark-mode .input-text-lg::placeholder {
  color: #6B7080 !important;
}

/* Toggle pill — dark background + blue accent so it's visible and pill label stays readable */
body.dark-mode .toggle-container .toggle-pill {
  background: #4D8FF5;
}
/* Active toggle button text — must be white so it reads on the blue pill */
body.dark-mode .toggle-container .toggle-btn.active {
  background: transparent !important;
  color: #ffffff !important;
}
/* Fallback (before JS inits the pill) */
body.dark-mode .toggle-container:not(.has-pill) .toggle-btn.active {
  background: #4D8FF5 !important;
  color: #ffffff !important;
}

/* Toggle button icons (dashboard toggle bar) */
body.dark-mode .toggle-btn .btn-icon,
body.dark-mode .btn-icon[src*="/icons/"] {
  filter: brightness(0) invert(0.85);
}

/* Mobile bottom nav icons */
body.dark-mode .mobile-bottom-nav img {
  filter: brightness(0) invert(0.85);
}
body.dark-mode .mobile-bottom-nav .active img {
  filter: brightness(0) invert(1);
}

/* accounting-tab-btn active — same text-900 flip problem as btn-primary */
body.dark-mode .accounting-tab-btn.active {
  background: #4D8FF5 !important;
  border-color: #4D8FF5 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* bank-subtab-btn active (bank-logs.html) */
body.dark-mode .bank-subtab-btn.active {
  background: #4D8FF5 !important;
  border-color: #4D8FF5 !important;
  color: #ffffff !important;
}

/* ML Dashboard alert items — use hardcoded dark-red values to bypass any
   variable resolution issues with --color-danger-100 in this context */
body.dark-mode .alert-item {
  background: #1F0909 !important;
  border-color: #330F0F !important;
  border-left-color: #FF5252 !important;
}
body.dark-mode .alert-title {
  color: #FFAAAA !important;
}
body.dark-mode .alert-action {
  color: #FF5252 !important;
}

/* ML Dashboard burn-rate-alert (uses --color-danger-100 which can resolve light in dark mode) */
body.dark-mode .burn-rate-alert {
  background: #1F0909 !important;
  border-color: #330F0F !important;
  border-left-color: #FF5252 !important;
}
body.dark-mode .burn-rate-alert .alert-content,
body.dark-mode .burn-rate-alert .alert-content strong {
  color: #FFAAAA !important;
}

/* CashFlow alert cards */
body.dark-mode .alert-card.alert-critical {
  background: #1F0909 !important;
  border-left-color: #FF5252 !important;
}
body.dark-mode .alert-card.alert-warning {
  background: #201408 !important;
  border-left-color: #FFB347 !important;
}
body.dark-mode .alert-card.alert-caution {
  background: #0C1B33 !important;
  border-left-color: #4D8FF5 !important;
}

/* Form inputs, selects, textareas — use neutral-100 bg so they stand out from page bg (#111318) */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .inv-form-field input,
body.dark-mode .inv-form-field select,
body.dark-mode .inv-form-field textarea,
body.dark-mode .sheet-selector select,
body.dark-mode .currency-selector select,
body.dark-mode .inventory-search,
body.dark-mode .inventory-filter-select {
  background-color: #1E2129 !important;
  color: #F0F0F3 !important;
  border-color: #2E3138 !important;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .inv-form-field input::placeholder,
body.dark-mode .inv-form-field textarea::placeholder,
body.dark-mode .inventory-search::placeholder {
  color: #6B7080 !important;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .inv-form-field input:focus,
body.dark-mode .inv-form-field select:focus,
body.dark-mode .inv-form-field textarea:focus,
body.dark-mode .inventory-search:focus,
body.dark-mode .inventory-filter-select:focus {
  border-color: #4D8FF5 !important;
  box-shadow: 0 0 0 2px rgba(77, 143, 245, 0.25) !important;
}

/* ============================================================
   LOGIN PAGE — .btn-login and .login-logo use --color-text-900
   as background, which flips to near-white (#F0F0F3) in dark
   mode. Override to use the same blue as .btn-primary.
   ============================================================ */

body.dark-mode .btn-login {
  background-color: #4D8FF5 !important;
  border-color: #4D8FF5 !important;
  color: #ffffff !important;
  box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .btn-login:hover {
  background: #7AAEFC !important;
  border-color: #7AAEFC !important;
  animation: none !important;
}

/* Login logo: keep it dark rather than inverting to near-white */
body.dark-mode .login-logo {
  background: var(--color-grey-800) !important;
  box-shadow: none !important;
}

/* Sidebar brand "K" icon: same inversion problem — keep it dark */
body.dark-mode .sidebar-brand-icon {
  background: var(--color-grey-800) !important;
}

/* ============================================================
   GRADIENT CARDS — gradients using --color-neutral-white as
   one stop collapse to near-black → near-black in dark mode
   (--color-neutral-white flips to #111318). Replace with flat
   dark semantic backgrounds.
   ============================================================ */

/* cashflow-alerts.css: .runway-card status variants */
body.dark-mode .runway-card.status-critical {
  background: var(--color-danger-100) !important;
}
body.dark-mode .runway-card.status-warning {
  background: var(--color-warning-100) !important;
}
body.dark-mode .runway-card.status-caution {
  background: var(--color-information-100) !important;
}

/* enhanced-analytics.css: .stat-card variants */
body.dark-mode .stat-card.positive {
  background: var(--color-success-100) !important;
}
body.dark-mode .stat-card.negative {
  background: var(--color-danger-100) !important;
}
body.dark-mode .burn-rate-section .stat-card.warning {
  background: var(--color-warning-100) !important;
}
body.dark-mode .burn-rate-section .stat-card.alert {
  background: var(--color-danger-100) !important;
}

/* ai.css: .anomaly-card severity variants */
body.dark-mode .anomaly-card.severity-critical {
  background: var(--color-danger-100) !important;
}
body.dark-mode .anomaly-card.severity-high {
  background: var(--color-warning-100) !important;
}

/* ============================================================
   STANDALONE TOGGLE-BTN.ACTIVE — outside .toggle-container
   (e.g. trend-toggle in analytics, table header toggles)
   --color-text-900 flips to near-white → override to blue.
   Then cancel it back to transparent inside .toggle-container
   where the sliding pill provides the bg.
   ============================================================ */

body.dark-mode .toggle-btn.active {
  background: #4D8FF5 !important;
  border-color: #4D8FF5 !important;
  color: #ffffff !important;
}

/* Inside toggle-container the pill provides the bg — keep btn transparent */
body.dark-mode .toggle-container .toggle-btn.active {
  background: transparent !important;
}

/* Analytics trend-toggle pill + fallback */
body.dark-mode .trend-toggle .toggle-pill {
  background: #4D8FF5 !important;
}
body.dark-mode .trend-toggle .toggle-btn.active {
  color: #ffffff !important;
}
body.dark-mode .trend-toggle:not(.has-pill) .toggle-btn.active {
  background: #4D8FF5 !important;
  color: #ffffff !important;
}

/* ============================================================
   CHART TOOLTIPS — .chart-tooltip and .cashflow-bar .tooltip
   Used in cashflow-alerts.css and ai.css. background uses
   --color-text-900 which flips to near-white in dark mode.
   ============================================================ */

body.dark-mode .chart-tooltip,
body.dark-mode .cashflow-bar .tooltip,
body.dark-mode .bar-tooltip {
  background: #252830 !important;
  color: #F0F0F3 !important;
}

/* ============================================================
   RECOMMENDATION PRIORITY BADGE (cashflow-alerts.css)
   background: --color-text-900 → near-white in dark mode
   ============================================================ */

body.dark-mode .recommendation-priority {
  background: #252830 !important;
  color: #F0F0F3 !important;
}

/* ============================================================
   COLLAPSED SIDEBAR ITEM TOOLTIP (::after pseudo-element)
   background: --color-text-900 → near-white bubble in dark mode
   ============================================================ */

body.dark-mode .app-sidebar.collapsed .sidebar-nav-item::after {
  background: #252830 !important;
  color: #F0F0F3 !important;
}

/* ============================================================
   METRIC CARD HOVER ACCENT BAR (::before pseudo-element)
   Used in main.css and analytics.css. background: --color-text-900
   → near-white bar on hover in dark mode.
   ============================================================ */

body.dark-mode .metric-card::before {
  background: #4D8FF5 !important;
}

/* Smooth transition on toggle */
body {
  color-scheme: light;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}