/*
 * KU Alumni design system — dark theme. Loaded last.
 *
 * Pages are light by default. Setting data-theme="dark" on <html> (the toggle
 * beside the refresh button, remembered in localStorage as `ku-theme`) swaps
 * the tokens below, so everything built from the design tokens follows.
 * Hard-coded colours that tokens cannot reach are repaired in the @layer dk
 * block at the end; that layer is declared first in index.html so its
 * !important rules outrank the !important rules in the design layers.
 */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --page: #0a0e16;
  --page-deep: #070a11;
  --surface: #121824;
  --surface-2: #171f2d;
  --surface-3: #1e2838;
  --track: #232e40;
  --glass: rgba(18, 24, 36, .78);
  --glass-strong: rgba(18, 24, 36, .9);
  --glass-edge: rgba(255, 255, 255, .08);

  /* Ink. `--on-dark` is the ink drawn on an `--ink` fill, which is light here. */
  --ink: #eef1f6;
  --ink-2: #b9c1cf;
  --ink-3: #8993a5;
  --ink-4: #5f6a7d;
  --ink-hover: #ffffff;
  --on-dark: #0b0f17;
  --on-dark-2: rgba(11, 15, 23, .66);

  /* Lines */
  --hairline: rgba(255, 255, 255, .08);
  --line: #263044;
  --line-strong: #3a4760;

  /* Brand */
  --brand: #4d8ff5;
  --brand-strong: #7db0ff;
  --brand-soft: rgba(77, 143, 245, .17);
  --brand-wash: rgba(77, 143, 245, .08);

  /* Data: the categorical order, lifted so marks hold up on a dark surface */
  --series-1: #4f93ea;
  --series-2: #f07d4d;
  --series-3: #2fc08b;
  --series-4: #f0b021;
  --series-5: #ee8fb2;
  --series-6: #3fae3f;
  --series-7: #8b7de0;
  --series-8: #ee6463;

  --seq-100: #1c3558;
  --seq-200: #214a7f;
  --seq-300: #2b64a8;
  --seq-400: #3987e5;
  --seq-500: #6da7ec;
  --seq-600: #9ec5f4;
  --seq-700: #cde2fb;

  --heat-100: #3b2418;
  --heat-200: #5c3320;
  --heat-300: #8a4a2a;
  --heat-400: #ec7f50;
  --heat-500: #f4a27b;
  --heat-600: #f9c6aa;
  --heat-700: #fde4d6;

  /* Status */
  --good: #2cc04a;
  --good-ink: #5fd07c;
  --good-soft: rgba(44, 192, 74, .14);
  --warning: #fab219;
  --warning-ink: #f5c04a;
  --warning-soft: rgba(250, 178, 25, .14);
  --serious: #ef8f69;
  --critical: #ee5a5a;
  --critical-ink: #ff8a8a;
  --critical-soft: rgba(238, 90, 90, .14);

  /* Depth */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -14px rgba(0, 0, 0, .7);
  --shadow-3: 0 18px 44px -18px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-glass: 0 24px 60px -24px rgba(0, 0, 0, .75), 0 2px 10px rgba(0, 0, 0, .35);

  --chart-focus-muted: #2a3547;

  /* Chart tokens declared in the viz, charts and analytics layers */
  --viz-track: #232e40;
  --viz-grid: rgba(255, 255, 255, .08);
  --viz-good-ink: #5fd07c;
  --viz-bad-ink: #ff8a8a;
  --hue-mix: #8b7de0;
  --hue-rose: #5a9be8;
  --hue-4: #9b86ff;
  --hue-6: #ee7fb0;
  --funnel-track: #232e40;
}

:root[data-theme="dark"] ::selection {
  color: var(--ink);
  background: rgba(77, 143, 245, .38);
}

:root[data-theme="dark"] * {
  scrollbar-color: rgba(255, 255, 255, .24) transparent !important;
}

:root[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .2) !important;
  background-clip: padding-box !important;
}

:root[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .34) !important;
  background-clip: padding-box !important;
}

/* The theme toggle shows the theme it will switch to. */
.theme-toggle .icon-sun { display: none !important; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none !important; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block !important; }

/* ------------------------------------------------------- repairs
   Legacy rules that paint colours the tokens cannot reach. */

@layer dk {
  :root[data-theme="dark"] main,
  :root[data-theme="dark"] .app-shell {
    background: var(--page) !important;
  }

  :root[data-theme="dark"] .display-card {
    border-color: var(--hairline) !important;
  }

  /* Tables: styles.css ends with hard-coded light th/td rules (#fff, #333) that
     win on even rows, selected rows and headers. Restore the tokens. */
  :root[data-theme="dark"] table {
    color: var(--ink-2) !important;
  }

  :root[data-theme="dark"] table th,
  :root[data-theme="dark"] .worksheet-table-wrap td:first-child {
    border-color: var(--line) !important;
    color: var(--ink-3) !important;
    background: var(--surface-2) !important;
  }

  :root[data-theme="dark"] table td,
  :root[data-theme="dark"] table tr:nth-child(even) td {
    border-color: var(--surface-3) !important;
    color: var(--ink-2) !important;
    background: transparent !important;
  }

  :root[data-theme="dark"] table tbody tr:hover td {
    color: var(--ink) !important;
    background: var(--brand-wash) !important;
  }

  :root[data-theme="dark"] table tr.selected-row td,
  :root[data-theme="dark"] table tbody tr.selected-row:hover td {
    color: var(--ink) !important;
    background: var(--brand-soft) !important;
  }

  :root[data-theme="dark"] .record-detail-toggle {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Tooltip primary action: the generated overrides pin it to #161616, which
     disappears on the dark card. Light fill, dark ink, like the light theme. */
  :root[data-theme="dark"] .chart-tooltip .chart-tooltip-forecast-button.is-primary {
    border-color: var(--ink) !important;
    color: var(--on-dark) !important;
    background: var(--ink) !important;
  }

  :root[data-theme="dark"] .chart-tooltip .chart-tooltip-forecast-button.is-primary:hover {
    background: var(--ink-2) !important;
  }

  /* Hover on the filter band / panels: styles.css paints a white wash and a
     light-blue border on :hover that nothing in the dark theme replaced. */
  :root[data-theme="dark"] .filter-band:hover,
  :root[data-theme="dark"] .panel:hover {
    border-color: var(--hairline) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
  }

  /* Page-section wrappers are transparent, borderless layouts rather than
     cards, so hovering anywhere inside them must not paint a surface. */
  :root[data-theme="dark"] :is(.field-tab-panel, #employment-detail, #quality, #quality-missing, #admin, #ai-runs, #alumni-runs) > .panel:hover {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Primary button (Run / Update Analysis): the fill is --ink, which is light
     in dark mode, but the label is hard-coded white. Use the on-ink colour. */
  :root[data-theme="dark"] .aia-btn-primary,
  :root[data-theme="dark"] .aia-btn-primary:hover:not(:disabled),
  :root[data-theme="dark"] .aia-btn-primary:disabled {
    color: var(--on-dark) !important;
  }

  :root[data-theme="dark"] .aia-btn-primary:hover:not(:disabled) {
    background: var(--ink-2) !important;
  }

  :root[data-theme="dark"] .aia-btn-primary:disabled {
    background: var(--ink-3) !important;
  }
}