/* ═══════════════════════════════════════════
   DARK THEME — variable overrides + fixes
   Loaded after styles.css. All rules scoped
   to [data-theme="dark"] so the light theme
   is completely untouched.
   ═══════════════════════════════════════════ */

[data-theme="dark"] {
  /* Surface & background */
  --bg-page: #0F1117;
  --bg-card: #1A1D27;
  --bg-card-alt: #22252F;

  /* Borders */
  --border: #2E3340;
  --border-light: #252833;

  /* Text */
  --text-primary: #E8EAED;
  --text-secondary: #B0B5BF;
  --text-muted: #7A8194;

  /* Brand — lightened for dark-bg legibility */
  --brand-deep: #4A7CC9;
  --brand-mid: #5B93D4;
  --brand-dark-teal: #1BB5CC;
  --brand-teal: #1DC5B7;
  --brand-green-teal: #1ED9A3;

  /* Status */
  --improved: #3DA8E0;
  --improved-bg: #162A3D;
  --worsened: #E6A817;
  --worsened-bg: #332A10;
  --warning: #E07830;
  --neutral: #8B92A0;
  --neutral-bg: #252833;

  /* Chart palette — bumped brightness */
  --chart-1: #3DA8E0; --chart-2: #F0B020; --chart-3: #20C08A;
  --chart-4: #E090C0; --chart-5: #70CCF5; --chart-6: #F07020; --chart-7: #F5EE60;

  /* Shadows — darker base */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,.35), 0 2px 4px -1px rgba(0,0,0,.25);
  --shadow-lg: 0 4px 8px -2px rgba(0,0,0,.3), 0 12px 24px -4px rgba(0,0,0,.4);
  --shadow-hover: 0 8px 16px -4px rgba(0,0,0,.45), 0 4px 6px -2px rgba(0,0,0,.3);

  color-scheme: dark;
}

/* ── Loading Overlay ── */
[data-theme="dark"] .loading-overlay {
  background: rgba(15,17,23,.97);
}

/* ── Header ── */
[data-theme="dark"] .header {
  background: linear-gradient(135deg, #06101E 0%, #1A3360 60%, #2A5090 100%);
}

/* ── Tab Nav ── */
[data-theme="dark"] .tab-btn.on {
  color: var(--brand-teal);
  background: rgba(29,197,183,.08);
}

/* ── Filter Select (hardcoded #fff + SVG) ── */
[data-theme="dark"] .filter-select {
  background: var(--bg-card-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237A8194'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text-primary);
}

/* ── Filter Radio active ── */
[data-theme="dark"] .filter-radio label.on {
  background: var(--brand-deep);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* ── Special Sections (PH / SO) ── */
[data-theme="dark"] .special-section__header--ph {
  background: linear-gradient(135deg, #0E2A3A, #12302E);
  color: var(--brand-dark-teal);
}
[data-theme="dark"] .special-section__header--so {
  background: linear-gradient(135deg, #12302E, #153025);
  color: var(--brand-green-teal);
}

/* ── Trend Event Markers ── */
[data-theme="dark"] .trend-event-marker::before {
  border-color: var(--bg-card);
}
[data-theme="dark"] .trend-event-label {
  background: rgba(26,29,39,.95);
  color: var(--warning);
}

/* ── .rate-bad (WCAG-adjusted) ── */
[data-theme="dark"] .rate-bad {
  color: #E6A817;
}

/* ── Footer ── */
[data-theme="dark"] .dashboard-footer__brand-item {
  color: var(--text-muted);
}
[data-theme="dark"] .dashboard-footer__version {
  color: var(--text-muted);
}

/* ── Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3A3F4E;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #5A6070;
}

/* ── Heatmap null-cell inline color override ── */
[data-theme="dark"] .heatmap td[style*="color:#D0D5DD"],
[data-theme="dark"] .heatmap td[style*="color: #D0D5DD"] {
  color: #3A3F4E !important;
}

/* ── SPM Chapter header gradient ── */
[data-theme="dark"] .spm-chapter__head {
  background: linear-gradient(90deg, var(--bg-card-alt), transparent);
}

/* ── SPM Completeness badges ── */
[data-theme="dark"] .mc-complete--partial {
  color: #FBBF24;
  background: rgba(251,191,36,.15);
}
[data-theme="dark"] .mc-complete--insufficient {
  color: #F87171;
  background: rgba(248,113,113,.15);
}

/* ── Disambiguation badge ── */
[data-theme="dark"] .disambig-badge {
  background: var(--worsened-bg);
  color: var(--warning);
  border-color: var(--worsened);
}

/* ── Header logo brightness ── */
[data-theme="dark"] .header-logo {
  filter: brightness(1.1);
}

/* ── Footer logos ── */
[data-theme="dark"] .dashboard-footer__brand-item img {
  filter: brightness(.85) contrast(1.1);
}

/* ── Trend event marker line ── */
[data-theme="dark"] .trend-event-marker {
  background: rgba(122,129,148,.35);
  border-left-color: rgba(122,129,148,.5);
}

/* ══════════════════════════════════
   Theme Toggle Button
   ══════════════════════════════════ */
.theme-toggle {
  margin-left: auto;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-full);
  color: #fff;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1;
  transition: background var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
}
/* Icon swap */
.theme-toggle__icon--sun { display: none; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun { display: inline; }