/* 🦞 Zoidberg Dashboard System - Theme Variables
 * Shared dark/light theme with CVD-safe colours
 * Extracted from home/index.html for reuse across all pages
 */

/* ═══════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════ */
:root, [data-theme="dark"] {
  /* Backgrounds */
  --th-bg-deep: #0a0a1a;
  --th-bg-card: #12122a;
  --th-bg-card-hover: #1a1a3a;
  --th-bg-card-gradient: linear-gradient(135deg, rgba(18,18,42,0.9) 0%, rgba(10,10,26,0.95) 100%);
  --th-bg-stat: linear-gradient(135deg, #1a1a3a, #151530);
  --th-bg-pipeline: linear-gradient(135deg, #1a1a3a, #222255);
  --th-bg-nav: linear-gradient(180deg, rgba(10,10,26,0.95) 0%, rgba(10,10,26,0.85) 100%);
  --th-bg-nav-scroll: linear-gradient(180deg, rgba(10,10,26,0.98) 0%, rgba(10,10,26,0.95) 100%);

  /* Glass */
  --th-glass-bg: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 100%);
  --th-glass-border: rgba(255,255,255,0.1);
  --th-glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --th-glass-inset: rgba(255,255,255,0.1);

  /* Text */
  --th-text-primary: #ffffff;
  --th-text-secondary: #a0a0b0;
  --th-text-muted: #666680;
  --th-text-on-card: #ffffff;

  /* Accents — colourblind-safe (Okabe-Ito inspired) */
  --th-positive: #33bbee;
  --th-negative: #ee7733;
  --th-neutral: #ccbb44;
  --th-highlight: #aa3377;
  --th-accent-cyan: #00fff2;
  --th-accent-magenta: #cc79a7;

  /* Research branding */
  --th-research-blue: #2563eb;
  --th-research-cyan: #0891b2;
  --th-research-purple: #7c3aed;

  /* Chart colours — CVD-safe */
  --th-chart-line1: #33bbee;
  --th-chart-line2: #cc79a7;
  --th-chart-line3: #888888;
  --th-chart-grid: #222;
  --th-chart-label: #8888aa;
  --th-chart-bg: rgba(255,255,255,0.02);

  /* Borders & misc */
  --th-border-subtle: rgba(255,255,255,0.05);
  --th-border-card: rgba(0,255,242,0.2);
  --th-border-nav: rgba(37,99,235,0.2);
  --th-heatmap-border: #1a1a2a;
  --th-heatmap-header-border: #333;
  --th-table-border: #1a1a2a;
  --th-table-header-border: #333;
  --th-heatmap-null-bg: #1a1a2a;
  --th-heatmap-null-text: #555;
  --th-heatmap-hover: rgba(0,255,242,0.05);
  --th-pipeline-border-muted: var(--th-text-muted);

  /* Ambient */
  --th-orb-opacity: 0.08;
  --th-grid-opacity: 0.6;
  --th-grid-color: rgba(37,99,235,0.03);
  --th-noise-opacity: 0.03;

  /* Scatter plot */
  --th-scatter-positive: #33bbee;
  --th-scatter-negative: #ee7733;
  --th-scatter-neutral: #ccbb44;
  --th-scatter-trend: #00fff2;

  /* Paper card */
  --th-paper-bg: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(124,58,237,0.05) 100%);
  --th-paper-border: rgba(37,99,235,0.3);
  --th-paper-border-hover: rgba(37,99,235,0.6);
  --th-paper-shadow-hover: 0 12px 40px rgba(37,99,235,0.15);

  /* AI note */
  --th-ai-bg: rgba(124,58,237,0.1);
  --th-ai-border: rgba(124,58,237,0.2);

  /* Collab card */
  --th-collab-border: rgba(8,145,178,0.25);
  --th-collab-bg: linear-gradient(135deg, rgba(8,145,178,0.06) 0%, rgba(10,10,26,0.95) 100%);

  /* Nav */
  --th-nav-active-bg: linear-gradient(135deg, rgba(37,99,235,0.2), rgba(8,145,178,0.1));
  --th-nav-active-shadow: 0 0 20px rgba(37,99,235,0.2);
  --th-nav-active-border: rgba(37,99,235,0.3);
  --th-nav-shadow: 0 4px 20px rgba(0,0,0,0.5);
  --th-nav-shadow-scroll: 0 8px 40px rgba(0,0,0,0.6);
  --th-nav-inset: rgba(255,255,255,0.05);
  --th-nav-inset-scroll: rgba(255,255,255,0.08);

  /* Link card */
  --th-link-bg: rgba(37,99,235,0.1);
  --th-link-border: rgba(37,99,235,0.2);
  --th-link-hover-shadow: 0 8px 32px rgba(37,99,235,0.2);

  /* About card */
  --th-about-bg: linear-gradient(135deg, rgba(20,20,40,0.9) 0%, rgba(10,10,26,0.95) 100%);
  --th-about-border: rgba(255,255,255,0.1);

  /* Toggle button */
  --th-toggle-bg: rgba(255,255,255,0.1);
  --th-toggle-hover: rgba(255,255,255,0.2);
  --th-toggle-text: #a0a0b0;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════ */
[data-theme="light"] {
  --th-bg-deep: #f4f5f7;
  --th-bg-card: #ffffff;
  --th-bg-card-hover: #f0f1f3;
  --th-bg-card-gradient: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,241,245,0.98) 100%);
  --th-bg-stat: linear-gradient(135deg, #f0f1f5, #e8e9f0);
  --th-bg-pipeline: linear-gradient(135deg, #f0f1f5, #e4e5f0);
  --th-bg-nav: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,249,252,0.9) 100%);
  --th-bg-nav-scroll: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,252,0.96) 100%);

  --th-glass-bg: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.4) 100%);
  --th-glass-border: rgba(0,0,0,0.08);
  --th-glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --th-glass-inset: rgba(255,255,255,0.8);

  --th-text-primary: #1a1a2e;
  --th-text-secondary: #4a4a5a;
  --th-text-muted: #7a7a8a;
  --th-text-on-card: #1a1a2e;

  --th-positive: #0077bb;
  --th-negative: #cc4400;
  --th-neutral: #997700;
  --th-highlight: #882255;
  --th-accent-cyan: #0077bb;
  --th-accent-magenta: #aa3377;

  --th-research-blue: #2563eb;
  --th-research-cyan: #0891b2;
  --th-research-purple: #7c3aed;

  --th-chart-line1: #0077bb;
  --th-chart-line2: #aa3377;
  --th-chart-line3: #999999;
  --th-chart-grid: #ddd;
  --th-chart-label: #666;
  --th-chart-bg: rgba(0,0,0,0.02);

  --th-border-subtle: rgba(0,0,0,0.06);
  --th-border-card: rgba(0,119,187,0.25);
  --th-border-nav: rgba(37,99,235,0.15);
  --th-heatmap-border: #e8e8f0;
  --th-heatmap-header-border: #ccc;
  --th-table-border: #e8e8f0;
  --th-table-header-border: #ccc;
  --th-heatmap-null-bg: #f0f0f5;
  --th-heatmap-null-text: #999;
  --th-heatmap-hover: rgba(0,119,187,0.06);
  --th-pipeline-border-muted: #999;

  --th-orb-opacity: 0.04;
  --th-grid-opacity: 0.3;
  --th-grid-color: rgba(37,99,235,0.04);
  --th-noise-opacity: 0.015;

  --th-scatter-positive: #0077bb;
  --th-scatter-negative: #cc4400;
  --th-scatter-neutral: #997700;
  --th-scatter-trend: #0077bb;

  --th-paper-bg: linear-gradient(135deg, rgba(37,99,235,0.05) 0%, rgba(124,58,237,0.03) 100%);
  --th-paper-border: rgba(37,99,235,0.2);
  --th-paper-border-hover: rgba(37,99,235,0.5);
  --th-paper-shadow-hover: 0 12px 40px rgba(37,99,235,0.1);

  --th-ai-bg: rgba(124,58,237,0.06);
  --th-ai-border: rgba(124,58,237,0.15);

  --th-collab-border: rgba(8,145,178,0.2);
  --th-collab-bg: linear-gradient(135deg, rgba(8,145,178,0.04) 0%, rgba(255,255,255,0.95) 100%);

  --th-nav-active-bg: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(8,145,178,0.06));
  --th-nav-active-shadow: 0 0 15px rgba(37,99,235,0.1);
  --th-nav-active-border: rgba(37,99,235,0.2);
  --th-nav-shadow: 0 2px 12px rgba(0,0,0,0.08);
  --th-nav-shadow-scroll: 0 4px 20px rgba(0,0,0,0.12);
  --th-nav-inset: rgba(255,255,255,0.8);
  --th-nav-inset-scroll: rgba(255,255,255,0.9);

  --th-link-bg: rgba(37,99,235,0.06);
  --th-link-border: rgba(37,99,235,0.15);
  --th-link-hover-shadow: 0 8px 32px rgba(37,99,235,0.1);

  --th-about-bg: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,250,0.98) 100%);
  --th-about-border: rgba(0,0,0,0.08);

  --th-toggle-bg: rgba(0,0,0,0.06);
  --th-toggle-hover: rgba(0,0,0,0.12);
  --th-toggle-text: #4a4a5a;

  color-scheme: light;
}

/* System preference fallback when no explicit theme set */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    --th-bg-deep: #f4f5f7;
    --th-bg-card: #ffffff;
    --th-bg-card-hover: #f0f1f3;
    --th-bg-card-gradient: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(240,241,245,0.98) 100%);
    --th-bg-stat: linear-gradient(135deg, #f0f1f5, #e8e9f0);
    --th-bg-pipeline: linear-gradient(135deg, #f0f1f5, #e4e5f0);
    --th-bg-nav: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,249,252,0.9) 100%);
    --th-bg-nav-scroll: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,252,0.96) 100%);
    --th-glass-bg: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.4) 100%);
    --th-glass-border: rgba(0,0,0,0.08);
    --th-glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
    --th-glass-inset: rgba(255,255,255,0.8);
    --th-text-primary: #1a1a2e;
    --th-text-secondary: #4a4a5a;
    --th-text-muted: #7a7a8a;
    --th-text-on-card: #1a1a2e;
    --th-positive: #0077bb;
    --th-negative: #cc4400;
    --th-neutral: #997700;
    --th-highlight: #882255;
    --th-accent-cyan: #0077bb;
    --th-accent-magenta: #aa3377;
    --th-research-blue: #2563eb;
    --th-research-cyan: #0891b2;
    --th-research-purple: #7c3aed;
    --th-chart-line1: #0077bb;
    --th-chart-line2: #aa3377;
    --th-chart-line3: #999999;
    --th-chart-grid: #ddd;
    --th-chart-label: #666;
    --th-chart-bg: rgba(0,0,0,0.02);
    --th-border-subtle: rgba(0,0,0,0.06);
    --th-border-card: rgba(0,119,187,0.25);
    --th-border-nav: rgba(37,99,235,0.15);
    --th-heatmap-border: #e8e8f0;
    --th-heatmap-header-border: #ccc;
    --th-table-border: #e8e8f0;
    --th-table-header-border: #ccc;
    --th-heatmap-null-bg: #f0f0f5;
    --th-heatmap-null-text: #999;
    --th-heatmap-hover: rgba(0,119,187,0.06);
    --th-pipeline-border-muted: #999;
    --th-orb-opacity: 0.04;
    --th-grid-opacity: 0.3;
    --th-grid-color: rgba(37,99,235,0.04);
    --th-noise-opacity: 0.015;
    --th-scatter-positive: #0077bb;
    --th-scatter-negative: #cc4400;
    --th-scatter-neutral: #997700;
    --th-scatter-trend: #0077bb;
    --th-paper-bg: linear-gradient(135deg, rgba(37,99,235,0.05) 0%, rgba(124,58,237,0.03) 100%);
    --th-paper-border: rgba(37,99,235,0.2);
    --th-paper-border-hover: rgba(37,99,235,0.5);
    --th-paper-shadow-hover: 0 12px 40px rgba(37,99,235,0.1);
    --th-ai-bg: rgba(124,58,237,0.06);
    --th-ai-border: rgba(124,58,237,0.15);
    --th-collab-border: rgba(8,145,178,0.2);
    --th-collab-bg: linear-gradient(135deg, rgba(8,145,178,0.04) 0%, rgba(255,255,255,0.95) 100%);
    --th-nav-active-bg: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(8,145,178,0.06));
    --th-nav-active-shadow: 0 0 15px rgba(37,99,235,0.1);
    --th-nav-active-border: rgba(37,99,235,0.2);
    --th-nav-shadow: 0 2px 12px rgba(0,0,0,0.08);
    --th-nav-shadow-scroll: 0 4px 20px rgba(0,0,0,0.12);
    --th-nav-inset: rgba(255,255,255,0.8);
    --th-nav-inset-scroll: rgba(255,255,255,0.9);
    --th-link-bg: rgba(37,99,235,0.06);
    --th-link-border: rgba(37,99,235,0.15);
    --th-link-hover-shadow: 0 8px 32px rgba(37,99,235,0.1);
    --th-about-bg: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,250,0.98) 100%);
    --th-about-border: rgba(0,0,0,0.08);
    --th-toggle-bg: rgba(0,0,0,0.06);
    --th-toggle-hover: rgba(0,0,0,0.12);
    --th-toggle-text: #4a4a5a;
    color-scheme: light;
  }
}

/* Theme transition (applied after initial load to avoid FOUC) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 300ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

/* Forced colours (high-contrast mode) */
@media (forced-colors: active) {
  .ambient-orb, .grid-pattern { display: none; }
  .heatmap td { border: 1px solid CanvasText; }
  .stat-value { color: CanvasText; }
}

/* ═══════════════════════════════════════════
   BRIDGE: Map old core.css vars to theme vars
   Pages using --bg-primary etc. will get theme support
   ═══════════════════════════════════════════ */
:root, [data-theme="dark"], [data-theme="light"] {
  --bg-primary: var(--th-bg-deep);
  --bg-secondary: var(--th-bg-card);
  --bg-tertiary: var(--th-bg-card-hover);
  --bg-glass: var(--th-glass-bg);
  --bg-glass-hover: var(--th-bg-card-hover);
  --text-primary: var(--th-text-primary);
  --text-secondary: var(--th-text-secondary);
  --text-muted: var(--th-text-muted);
  --accent-primary: var(--th-negative);
  --accent-secondary: var(--th-accent-cyan);
  --accent-success: var(--th-positive);
  --accent-warning: var(--th-neutral);
  --glass-border: 1px solid var(--th-glass-border);
  --glass-shadow: var(--th-glass-shadow);
  --border-subtle: var(--th-border-subtle);
}

/* ═══════════════════════════════════════════
   SHARED COMPONENT STYLES
   ═══════════════════════════════════════════ */

body {
  background: var(--th-bg-deep);
  color: var(--th-text-primary);
}

/* Text size control */
html[data-text-size="normal"] { font-size: 14px; }
html[data-text-size="large"]  { font-size: 18px; }
html[data-text-size="xlarge"] { font-size: 22px; }

/* Glass card */
.glass-card {
  background: var(--th-glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--th-glass-border);
  box-shadow: var(--th-glass-shadow), inset 0 1px 0 var(--th-glass-inset);
  border-radius: var(--radius-lg, 1rem);
}

/* Stat card */
.stat-card {
  background: var(--th-bg-stat);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--th-glass-border);
}
.stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-value.positive { color: var(--th-positive); }
.stat-value.negative { color: var(--th-negative); }
.stat-value.neutral { color: var(--th-neutral); }
.stat-label {
  font-size: 0.7rem;
  color: var(--th-text-muted);
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Nav (themed version) */
.nav-unified {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg, 1.5rem);
  padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem);
  background: var(--th-bg-nav);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--th-border-nav);
  box-shadow: var(--th-nav-shadow), inset 0 1px 0 var(--th-nav-inset);
}
.nav-unified.scrolled {
  background: var(--th-bg-nav-scroll);
  box-shadow: var(--th-nav-shadow-scroll), inset 0 1px 0 var(--th-nav-inset-scroll);
}
.nav-unified a {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  color: var(--th-text-secondary);
  text-decoration: none;
  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
  border-radius: var(--radius-lg, 1rem);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 200ms ease;
}
.nav-unified a:hover {
  color: var(--th-research-blue);
  text-shadow: 0 0 10px rgba(37,99,235,0.3);
}
.nav-unified a.active {
  background: var(--th-nav-active-bg);
  color: var(--th-research-blue);
  padding: var(--space-sm, 0.5rem) var(--space-lg, 1.5rem);
  border-radius: var(--radius-xl, 1.5rem);
  box-shadow: var(--th-nav-active-shadow);
  border: 1px solid var(--th-nav-active-border);
}
.nav-emoji { font-family: system-ui; }

/* Theme toggle button */
.theme-toggle {
  background: var(--th-toggle-bg);
  border: 1px solid var(--th-glass-border);
  border-radius: var(--radius-lg, 1rem);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--th-toggle-text);
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
}
.theme-toggle:hover { background: var(--th-toggle-hover); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--th-research-blue);
  outline-offset: 2px;
}

/* Text size toggle */
.text-size-toggle {
  background: var(--th-toggle-bg);
  border: 1px solid var(--th-glass-border);
  border-radius: var(--radius-lg, 1rem);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  color: var(--th-toggle-text);
  transition: all 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
}
.text-size-toggle:hover { background: var(--th-toggle-hover); }

/* Controls group (theme + text size in nav) */
.nav-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

/* Ambient effects */
.ambient-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  opacity: var(--th-orb-opacity);
  filter: blur(60px);
  z-index: 0;
}
.ambient-orb:nth-child(1) {
  width: 400px; height: 400px;
  background: var(--th-research-blue);
  top: 5%; left: 10%;
}
.ambient-orb:nth-child(2) {
  width: 300px; height: 300px;
  background: var(--th-research-cyan);
  top: 50%; right: 10%;
}
.ambient-orb:nth-child(3) {
  width: 250px; height: 250px;
  background: var(--th-research-purple);
  bottom: 10%; left: 25%;
}

.grid-pattern {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(var(--th-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--th-grid-color) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
  opacity: var(--th-grid-opacity);
}

/* Responsive nav */
@media (max-width: 768px) {
  .nav-unified {
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    flex-wrap: wrap;
  }
  .nav-unified a {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  .nav-controls { margin-left: 0; }
}