/* =========================================================================
   theme.css — Runtime theme switcher overrides
   Default: Spectrum (light, defined inline in each HTML file's :root)
   Alternate: Tech (dark techno) — selectors below
   ========================================================================= */


/* ===== Tech (dark techno) theme ===== */

/* CSS variable overrides — flips every var(--color-*) reference automatically.
   This catches all elements that use CSS variables (TOC, intro card, finding cards,
   .kpi-stack-row, headings, plain table cells, heatmap row labels, etc.) without
   needing per-element overrides. Below this block we add explicit overrides ONLY
   for elements that hardcode light values (e.g. #F1F5F9 backgrounds) and for
   tech-specific visual flair (glow effects, neon borders). */
[data-theme="tech"] {
  --color-topbar: #000000;
  --color-bg: #0A0E1A;
  --color-card: #141B2D;
  --color-border: #1F2937;
  --color-primary: #00D4FF;
  --color-secondary: #7C3AED;
  --color-tertiary: #94A3B8;
  --color-text: #F1F5F9;
  --color-text-muted: #94A3B8;
  --color-text-on-dark: #F1F5F9;
  --color-positive: #7CFF01;
  --color-negative: #FF3366;
  --color-neutral: #64748B;
}

[data-theme="tech"] body {
  background: #0A0E1A !important;
  color: #F1F5F9 !important;
}

/* Topbar — pure black with neon cyan accent line */
[data-theme="tech"] .topbar {
  background: #000000 !important;
  border-bottom: 3px solid #00D4FF !important;
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.15) !important;
}
[data-theme="tech"] .topbar-title,
[data-theme="tech"] .topbar-title a {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .topbar-subtitle {
  color: #64748B !important;
}

/* Logo — x in cyan, F on dark chip with electric purple text */
[data-theme="tech"] .logo .logo-x {
  color: #00D4FF !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.6) !important;
}
[data-theme="tech"] .logo .logo-f {
  color: #7C3AED !important;
  background: #1F2937 !important;
  text-shadow: 0 0 8px rgba(124, 58, 237, 0.4) !important;
}

/* Filter bar — dark elevated card */
[data-theme="tech"] .filter-bar {
  background: #0F1626 !important;
  border-bottom: 1px solid #1F2937 !important;
}
[data-theme="tech"] .filter-group label {
  color: #64748B !important;
}
[data-theme="tech"] .filter-group select {
  background: #141B2D !important;
  color: #F1F5F9 !important;
  border-color: #1F2937 !important;
}
[data-theme="tech"] .filter-group select:focus {
  border-color: #00D4FF !important;
  outline: none !important;
}

/* Section titles */
[data-theme="tech"] .section-title {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .section-title::before {
  background: #00D4FF !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6) !important;
}

/* KPI cards — dark elevated with neon left border */
[data-theme="tech"] .kpi-card {
  background: #141B2D !important;
  border: 1px solid #1F2937 !important;
  border-left: 4px solid #00D4FF !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="tech"] .kpi-label {
  color: #64748B !important;
}
[data-theme="tech"] .kpi-value {
  color: #00D4FF !important;
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.4) !important;
}
[data-theme="tech"] .kpi-delta.positive { color: #7CFF01 !important; }
[data-theme="tech"] .kpi-delta.negative { color: #FF3366 !important; }
[data-theme="tech"] .kpi-delta.neutral  { color: #64748B !important; }

/* Chart cards */
[data-theme="tech"] .chart-card {
  background: #141B2D !important;
  border: 1px solid #1F2937 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="tech"] .chart-title {
  color: #00D4FF !important;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
}

/* Dashboard directory cards */
[data-theme="tech"] .dashboard-card {
  background: #141B2D !important;
  border: 1px solid #1F2937 !important;
  border-left: 4px solid #00D4FF !important;
  color: #F1F5F9 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="tech"] .dashboard-card:hover {
  box-shadow: 0 0 0 1px #00D4FF, 0 8px 24px rgba(0, 212, 255, 0.25) !important;
  transform: translateY(-3px) !important;
}
[data-theme="tech"] .dashboard-card.teal { border-left-color: #7C3AED !important; }
[data-theme="tech"] .dashboard-card.gray { border-left-color: #94A3B8 !important; }
[data-theme="tech"] .dashboard-card-number { color: #00D4FF !important; }
[data-theme="tech"] .dashboard-card.teal .dashboard-card-number { color: #7C3AED !important; }
[data-theme="tech"] .dashboard-card.gray .dashboard-card-number { color: #94A3B8 !important; }
[data-theme="tech"] .dashboard-card-title { color: #F1F5F9 !important; }
[data-theme="tech"] .dashboard-card-desc { color: #94A3B8 !important; }

/* Detail tables */
[data-theme="tech"] .detail-table {
  background: #141B2D !important;
  border: 1px solid #1F2937 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="tech"] .detail-table th {
  background: #000000 !important;
  color: #00D4FF !important;
  border-bottom: 1px solid #00D4FF !important;
}
[data-theme="tech"] .detail-table td {
  color: #F1F5F9 !important;
  border-top-color: #1F2937 !important;
}
[data-theme="tech"] .detail-table tr:hover td {
  background: #1F2937 !important;
}

/* Back link in dashboards (set by inline style, override here) */
[data-theme="tech"] .back-link {
  color: #00D4FF !important;
  text-shadow: 0 0 6px rgba(0, 212, 255, 0.4) !important;
}

/* Disclaimer */
[data-theme="tech"] .disclaimer {
  background: #141B2D !important;
  border: 1px dashed #1F2937 !important;
  color: #94A3B8 !important;
}
[data-theme="tech"] .disclaimer strong {
  color: #00D4FF !important;
}

/* Toggle switches (Compare Years, etc.) */
[data-theme="tech"] .toggle-group {
  background: #141B2D !important;
  border-color: #1F2937 !important;
}
[data-theme="tech"] .toggle-group:hover {
  border-color: #00D4FF !important;
}
[data-theme="tech"] .toggle-label {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .toggle-switch {
  background: #1F2937 !important;
}
[data-theme="tech"] .toggle-switch.active {
  background: #00D4FF !important;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.6) !important;
}

/* ===== Long-form content overrides (memo, autoexplore-dashboard, etc.) ===== */

/* Headings — make h1-h4 readable and tech-themed */
[data-theme="tech"] h1,
[data-theme="tech"] h2,
[data-theme="tech"] h3 {
  color: #F1F5F9 !important;
}
[data-theme="tech"] h2 {
  border-bottom-color: #00D4FF !important;
}
[data-theme="tech"] h4 {
  color: #00D4FF !important;
}

/* TOC card */
[data-theme="tech"] .toc {
  background: #141B2D !important;
  border-color: #1F2937 !important;
}
[data-theme="tech"] .toc h3 {
  color: #94A3B8 !important;
}
[data-theme="tech"] .toc a {
  color: #00D4FF !important;
}

/* Subtitle below page title */
[data-theme="tech"] .subtitle {
  color: #94A3B8 !important;
}

/* Evidence blocks (hardcoded #F8FAFC bg in light) */
[data-theme="tech"] .evidence-block {
  background: #1F2937 !important;
  border-left-color: #00D4FF !important;
  color: #F1F5F9 !important;
}
[data-theme="tech"] .evidence-block strong {
  color: #00D4FF !important;
}

/* So-what callouts (hardcoded #FFF7ED bg in light) */
[data-theme="tech"] .so-what {
  background: rgba(255, 0, 200, 0.08) !important;
  border: 1px solid rgba(255, 0, 200, 0.4) !important;
  border-left: 4px solid #FF00C8 !important;
  color: #F1F5F9 !important;
}
[data-theme="tech"] .so-what strong {
  color: #FF00C8 !important;
  text-shadow: 0 0 8px rgba(255, 0, 200, 0.4) !important;
}

/* Intro card (autoexplore-dashboard) */
[data-theme="tech"] .intro {
  background: #141B2D !important;
  border-color: #1F2937 !important;
  border-left-color: #00D4FF !important;
}
[data-theme="tech"] .intro h1 {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .intro p {
  color: #94A3B8 !important;
}
[data-theme="tech"] .intro a {
  color: #00D4FF !important;
}

/* Finding cards (autoexplore-dashboard) */
[data-theme="tech"] .finding-card {
  background: #141B2D !important;
  border-color: #1F2937 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
[data-theme="tech"] .finding-card h3 {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .finding-headline {
  color: #94A3B8 !important;
}
[data-theme="tech"] .finding-num {
  background: #00D4FF !important;
  color: #0A0E1A !important;
}
[data-theme="tech"] .finding-num.null {
  background: #94A3B8 !important;
  color: #0A0E1A !important;
}

/* KPI pills (memo + autoexplore-dashboard, hardcoded #F1F5F9 bg in light) */
[data-theme="tech"] .kpi-pill {
  background: #1F2937 !important;
}
[data-theme="tech"] .kpi-pill .lbl {
  color: #94A3B8 !important;
}
[data-theme="tech"] .kpi-pill .val {
  color: #00D4FF !important;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

/* KPI stack-row inside kpi-card (Compare Years stacked values) */
[data-theme="tech"] .kpi-stack-row {
  color: #94A3B8 !important;
}
[data-theme="tech"] .kpi-stack-row .v {
  color: #F1F5F9 !important;
}

/* Memo plain tables (NOT .detail-table) */
[data-theme="tech"] table th {
  background: #000000 !important;
  color: #00D4FF !important;
  border-bottom: 1px solid #00D4FF !important;
}
[data-theme="tech"] table td {
  color: #F1F5F9 !important;
  border-bottom-color: #1F2937 !important;
}

/* code elements */
[data-theme="tech"] code {
  background: #1F2937 !important;
  color: #00D4FF !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
}

/* Tags - keep their own bg+fg, but bump contrast for tech */
[data-theme="tech"] .tag {
  background: #1F2937 !important;
  color: #00D4FF !important;
}
[data-theme="tech"] .tag.confirmed {
  background: rgba(124, 255, 1, 0.15) !important;
  color: #7CFF01 !important;
}
[data-theme="tech"] .tag.disproven,
[data-theme="tech"] .tag.null-finding {
  background: rgba(255, 0, 200, 0.12) !important;
  color: #FF00C8 !important;
}
[data-theme="tech"] .tag.cross-domain {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00D4FF !important;
}
[data-theme="tech"] .tag.cat,
[data-theme="tech"] .tag.unit {
  background: rgba(0, 212, 255, 0.12) !important;
  color: #00D4FF !important;
}
[data-theme="tech"] .tag.dir-up {
  background: rgba(124, 255, 1, 0.15) !important;
  color: #7CFF01 !important;
}
[data-theme="tech"] .tag.dir-down {
  background: rgba(255, 51, 102, 0.15) !important;
  color: #FF3366 !important;
}

/* Page header (metrics-definitions) */
[data-theme="tech"] .page-header {
  background: #141B2D !important;
  border-color: #1F2937 !important;
  border-left-color: #00D4FF !important;
}
[data-theme="tech"] .page-header h1 {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .page-header p {
  color: #94A3B8 !important;
}

/* Search input + chip bar (metrics-definitions) */
[data-theme="tech"] .search-input {
  background: #141B2D !important;
  border-color: #1F2937 !important;
  color: #F1F5F9 !important;
}
[data-theme="tech"] .search-input:focus {
  border-color: #00D4FF !important;
}
[data-theme="tech"] .search-input::placeholder {
  color: #64748B !important;
}
[data-theme="tech"] .chip {
  background: #141B2D !important;
  border-color: #1F2937 !important;
  color: #F1F5F9 !important;
}
[data-theme="tech"] .chip.active {
  background: #00D4FF !important;
  color: #0A0E1A !important;
  border-color: #00D4FF !important;
}
[data-theme="tech"] .chip:hover {
  border-color: #00D4FF !important;
}

/* Metric cards (metrics-definitions) */
[data-theme="tech"] .metric-card {
  background: #141B2D !important;
  border-color: #1F2937 !important;
  border-left-color: #00D4FF !important;
}
[data-theme="tech"] .metric-card .name {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .metric-card .definition {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .metric-card .formula {
  background: #0A0E1A !important;
  border-left-color: #00D4FF !important;
  color: #00D4FF !important;
}
[data-theme="tech"] .metric-card .tags .tag {
  background: #1F2937 !important;
}
[data-theme="tech"] .empty-state {
  color: #94A3B8 !important;
}

/* Heatmap row labels (dashboard 7) */
[data-theme="tech"] .hm-row-label {
  color: #F1F5F9 !important;
}
[data-theme="tech"] .hm-col-label {
  color: #94A3B8 !important;
}

/* Heatmap cell text — light text on dark cells, dark text on bright cells. The JS
   adds .dark-text class based on theme-aware bucket logic. Just ensure the dark text
   actually IS dark on tech (variable override would make it light). */
[data-theme="tech"] .hm-cell.dark-text {
  color: #0A0E1A !important;
}

/* Portal map meta */
[data-theme="tech"] .map-meta-stat {
  color: #94A3B8 !important;
}
[data-theme="tech"] .map-meta-stat strong {
  color: #F1F5F9 !important;
}

/* Portal map tooltip — make it pop on dark theme */
[data-theme="tech"] #mapTooltip {
  background: #00D4FF !important;
  color: #0A0E1A !important;
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4) !important;
}

/* Map card meta header on portal */
[data-theme="tech"] .map-card .chart-title {
  color: #00D4FF !important;
}

/* Generic links inside content */
[data-theme="tech"] a {
  color: #00D4FF;
}

/* Highlight rows in memo COVID table — re-theme for dark mode using neon-on-dark
   palette consistent with .kpi-delta semantics */
[data-theme="tech"] .hl-amber {
  background: rgba(245, 158, 11, 0.12) !important;
  border-left: 3px solid #FCD34D;
}
[data-theme="tech"] .hl-amber td {
  color: #FCD34D !important;
}
[data-theme="tech"] .hl-amber td strong {
  color: #FDE68A !important;
}
[data-theme="tech"] .hl-red {
  background: rgba(255, 51, 102, 0.12) !important;
  border-left: 3px solid #FF3366;
}
[data-theme="tech"] .hl-red td {
  color: #FF3366 !important;
}
[data-theme="tech"] .hl-red td strong {
  color: #FF6B8A !important;
}
[data-theme="tech"] .hl-green {
  background: rgba(124, 255, 1, 0.10) !important;
  border-left: 3px solid #7CFF01;
}
[data-theme="tech"] .hl-green td {
  color: #7CFF01 !important;
}
[data-theme="tech"] .hl-green td strong {
  color: #BEFF66 !important;
}