/**
 * DosiPlot v5.0 — Simulation Monte Carlo Interactive
 * © 2025 Pr. Yassine OULHOUQ
 * Université Mohammed Premier (UMP) — Oujda, Maroc
 * Module: Theme Dark — Dark Color Scheme
 */

/* ============================================
   DARK THEME (Default)
   Applied via [data-theme="dark"] or :root fallback
   ============================================ */

:root,
[data-theme="dark"] {
  /* --- Background Surfaces --- */
  --bg0: #080c14;
  --bg1: #0e1525;
  --bg2: #141c30;
  --bg3: #1a2540;
  --bg4: #213050;

  /* --- Glass / Overlay --- */
  --bg-glass: rgba(14, 21, 37, 0.85);
  --bg-glass-heavy: rgba(8, 12, 20, 0.92);
  --bg-overlay: rgba(0, 0, 0, 0.65);

  /* --- Borders --- */
  --border: rgba(100, 160, 255, 0.12);
  --border2: rgba(100, 160, 255, 0.2);
  --border3: rgba(100, 160, 255, 0.3);
  --border-glow: rgba(0, 180, 255, 0.15);
  --border-subtle: rgba(100, 160, 255, 0.06);

  /* --- Text Colors --- */
  --t1: #e8ecf4;
  --t2: #a0b0c8;
  --t3: #607090;
  --t4: #405060;
  --t-inverse: #080c14;

  /* --- Primary / Photon Blue --- */
  --blue: #00b4ff;
  --blue-lt: rgba(0, 180, 255, 0.08);
  --blue-bg: rgba(0, 180, 255, 0.04);
  --blue-glow: rgba(0, 180, 255, 0.25);
  --blue-hover: #33c3ff;
  --blue-active: #009de0;

  /* --- Secondary / Cyan --- */
  --cyan: #00e5cc;
  --cyan-lt: rgba(0, 229, 204, 0.08);
  --cyan-bg: rgba(0, 229, 204, 0.04);
  --cyan-glow: rgba(0, 229, 204, 0.25);

  /* --- Electron / Amber --- */
  --amber: #ffb020;
  --amber-lt: rgba(255, 176, 32, 0.08);
  --amber-bg: rgba(255, 176, 32, 0.04);
  --amber-glow: rgba(255, 176, 32, 0.25);
  --amber-hover: #ffbe47;
  --amber-active: #e09a10;

  /* --- Semantic: Success / Green --- */
  --green: #00e676;
  --green-lt: rgba(0, 230, 118, 0.08);
  --green-bg: rgba(0, 230, 118, 0.04);
  --green-glow: rgba(0, 230, 118, 0.3);

  /* --- Semantic: Error / Red --- */
  --red: #ff4455;
  --red-lt: rgba(255, 68, 85, 0.08);
  --red-bg: rgba(255, 68, 85, 0.04);
  --red-glow: rgba(255, 68, 85, 0.25);

  /* --- Semantic: Warning / Orange --- */
  --warning: #f59e0b;
  --warning-lt: rgba(245, 158, 11, 0.08);
  --warning-bg: rgba(245, 158, 11, 0.04);

  /* --- Semantic: Info / Violet --- */
  --purple: #b060ff;
  --purple-lt: rgba(176, 96, 255, 0.08);
  --info: #60a5fa;
  --info-lt: rgba(96, 165, 250, 0.08);

  /* --- Shadows --- */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow2: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);

  /* --- Glows --- */
  --glow-blue: 0 0 20px rgba(0, 180, 255, 0.15), 0 0 60px rgba(0, 180, 255, 0.05);
  --glow-amber: 0 0 20px rgba(255, 176, 32, 0.15), 0 0 60px rgba(255, 176, 32, 0.05);
  --glow-green: 0 0 20px rgba(0, 230, 118, 0.15), 0 0 60px rgba(0, 230, 118, 0.05);
  --glow-red: 0 0 20px rgba(255, 68, 85, 0.15), 0 0 60px rgba(255, 68, 85, 0.05);
  --glow-purple: 0 0 20px rgba(176, 96, 255, 0.15), 0 0 60px rgba(176, 96, 255, 0.05);

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, var(--blue), var(--cyan));
  --gradient-photon: linear-gradient(135deg, #b8860b, #FFB833);
  --gradient-electron: linear-gradient(135deg, #0097a7, #00E5FF);
  --gradient-success: linear-gradient(135deg, #00994d, var(--green));
  --gradient-surface: linear-gradient(180deg, var(--bg1), var(--bg2));
  --gradient-header: linear-gradient(180deg, rgba(14, 21, 37, 0.98), rgba(8, 12, 20, 0.95));
}

/* ============================================
   DARK THEME — Component Overrides
   ============================================ */
[data-theme="dark"] body,
[data-theme="dark"] {
  color-scheme: dark;
}

/* Header */
[data-theme="dark"] .hdr {
  background: var(--gradient-header);
  box-shadow: 0 1px 0 var(--border-glow), 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Logo */
[data-theme="dark"] .logo {
  box-shadow: var(--glow-blue);
}

[data-theme="dark"] .logo::after {
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.15) 50%, transparent 60%);
}

/* App Title */
[data-theme="dark"] .app-t span {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Status Dot */
[data-theme="dark"] .dot {
  box-shadow: 0 0 8px var(--green), 0 0 20px rgba(0, 230, 118, 0.2);
}

/* Tabs */
[data-theme="dark"] .tabs {
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
}

[data-theme="dark"] .tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: rgba(0, 180, 255, 0.06);
  box-shadow: 0 1px 0 var(--blue);
}

/* Sidebar */
[data-theme="dark"] .sb {
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
}

/* Buttons */
[data-theme="dark"] .btn-run.photon {
  background: var(--gradient-photon);
  box-shadow: 0 0 15px rgba(255, 184, 51, 0.25);
}

[data-theme="dark"] .btn-run.electron {
  background: var(--gradient-electron);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.25);
}

/* Result Cards */
[data-theme="dark"] .pc-v {
  color: var(--blue);
  text-shadow: 0 0 10px rgba(0, 180, 255, 0.2);
}

[data-theme="dark"] .pc-v.elec {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 176, 32, 0.2);
}

/* Phantom Box */
[data-theme="dark"] .phantom-box {
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Chart Box */
[data-theme="dark"] .chart-box {
  background: linear-gradient(180deg, var(--bg1), rgba(14, 21, 37, 0.6));
}

[data-theme="dark"] .chart-box::before {
  background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.3), transparent);
}

/* MC Progress Bar */
[data-theme="dark"] .mc-bar.photon {
  background: linear-gradient(90deg, #0066cc, var(--blue), var(--cyan));
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.3);
}

[data-theme="dark"] .mc-bar.electron {
  background: linear-gradient(90deg, #cc7700, var(--amber), #ffcc00);
  box-shadow: 0 0 10px rgba(255, 176, 32, 0.3);
}

/* TRS-398 */
[data-theme="dark"] .trs-chart {
  background: linear-gradient(180deg, var(--bg1), rgba(14, 21, 37, 0.6));
}

[data-theme="dark"] .trs-steps {
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}

[data-theme="dark"] .step.active {
  border-color: rgba(0, 180, 255, 0.3);
  background: rgba(0, 180, 255, 0.06);
  box-shadow: 0 0 15px rgba(0, 180, 255, 0.08);
}

[data-theme="dark"] .step.done {
  border-color: rgba(0, 230, 118, 0.3);
  background: rgba(0, 230, 118, 0.06);
}

[data-theme="dark"] .step.elec-active {
  border-color: rgba(255, 176, 32, 0.3);
  background: rgba(255, 176, 32, 0.06);
  box-shadow: 0 0 15px rgba(255, 176, 32, 0.08);
}

[data-theme="dark"] .step.elec-done {
  border-color: rgba(0, 230, 118, 0.3);
  background: rgba(0, 230, 118, 0.06);
}

[data-theme="dark"] .step-formula {
  color: var(--blue);
  text-shadow: 0 0 10px rgba(0, 180, 255, 0.15);
}

[data-theme="dark"] .step-val {
  text-shadow: 0 0 8px rgba(0, 180, 255, 0.2);
}

[data-theme="dark"] .trs-result {
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.08);
}

[data-theme="dark"] .trs-result-val {
  text-shadow: 0 0 15px rgba(0, 230, 118, 0.3);
}

/* Modal */
[data-theme="dark"] .pw-box {
  box-shadow: var(--shadow2), var(--glow-blue);
}

/* Toast */
[data-theme="dark"] .toast {
  box-shadow: var(--shadow2), var(--glow-blue);
}

/* Cursor info */
[data-theme="dark"] .cursor-info {
  background: rgba(0, 0, 0, 0.85);
  color: #e0e8f0;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* LINAC Tree */
[data-theme="dark"] .branch-ph {
  background: rgba(255, 184, 51, 0.12);
  color: #FFB833;
  border-color: rgba(255, 184, 51, 0.35);
  -webkit-text-fill-color: #FFB833;
}

[data-theme="dark"] .branch-el {
  background: rgba(0, 229, 255, 0.12);
  color: #00E5FF;
  border-color: rgba(0, 229, 255, 0.35);
  -webkit-text-fill-color: #00E5FF;
}

/* Mode toggle */
[data-theme="dark"] .mode-toggle.on .mode-switch {
  background: rgba(0, 230, 118, 0.15);
  border-color: rgba(0, 230, 118, 0.3);
}

[data-theme="dark"] .mode-toggle.on .mode-switch::after {
  background: var(--green);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}