/* ═══════════════════════════════════════════════════════════════
   TTR DESK — Light/Dark Theme System
   Include AFTER inline styles. Overrides :root vars for light mode.
   ═══════════════════════════════════════════════════════════════ */

/* ── Light theme overrides ─────────────────────────────────────*/
[data-theme="light"] {
  --bg: #f5f5f8 !important;
  --bg2: #eeeef2 !important;
  --card: #ffffff !important;
  --card-h: #f9f9fc !important;
  --panel: #f0f0f5 !important;
  --border: #d8d8e2 !important;
  --border-l: #c8c8d5 !important;
  --t1: #1a1a2e !important;
  --t2: #4a4a65 !important;
  --t3: #7a7a95 !important;
  --gold: #b8962e !important;
  --gold-d: #a07d22 !important;
  --gold-g: rgba(184,150,46,0.10) !important;
  --green: #16a34a !important;
  --green-d: rgba(22,163,74,0.10) !important;
  --red: #dc2626 !important;
  --red-d: rgba(220,38,38,0.10) !important;
  --blue: #2563eb !important;
  --blue-d: rgba(37,99,235,0.10) !important;
  --purple: #7c3aed !important;
  --purple-d: rgba(124,58,237,0.10) !important;
  /* Dashboard-specific vars */
  --bg-elevated: #f0f0f5 !important;
  --bg-surface: #ffffff !important;
  --bg-input: #f5f5f8 !important;
  --border-subtle: #e0e0ea !important;
  --border-hover: #c0c0d0 !important;
  --text-primary: #1a1a2e !important;
  --text-secondary: #4a4a65 !important;
  --text-muted: #7a7a95 !important;
  --text-dim: #9a9ab0 !important;
  --gold-glow: rgba(184,150,46,0.08) !important;
  --gold-border: rgba(184,150,46,0.20) !important;
  --green-bg: rgba(22,163,74,0.08) !important;
  --red-bg: rgba(220,38,38,0.08) !important;
  --blue-bg: rgba(37,99,235,0.08) !important;
  --purple-bg: rgba(124,58,237,0.08) !important;
  --orange-bg: rgba(234,120,30,0.08) !important;
  --yellow-bg: rgba(200,160,20,0.08) !important;
  --chart-green: #16a34a !important;
  --chart-green-fill: rgba(22,163,74,0.12) !important;
  --chart-red: #dc2626 !important;
}

/* ── Nav override for light ────────────────────────────────────*/
[data-theme="light"] .nav {
  background: rgba(245,245,248,0.92) !important;
  border-bottom-color: var(--border) !important;
}
[data-theme="light"] .nav-logo,
[data-theme="light"] .nav-logo .ico {
  color: var(--t1) !important;
}
[data-theme="light"] .nav-links a,
[data-theme="light"] .back {
  color: var(--t2) !important;
}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .back:hover {
  color: var(--t1) !important;
}

/* ── Hero glow for light ───────────────────────────────────────*/
[data-theme="light"] .hero::before {
  background: radial-gradient(circle, rgba(184,150,46,0.08) 0%, transparent 70%) !important;
}

/* ── Buttons for light ─────────────────────────────────────────*/
[data-theme="light"] .btn-g {
  background: var(--gold) !important;
  color: #fff !important;
}
[data-theme="light"] .btn-g:hover {
  background: #a07d22 !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--gold-g) !important;
}
[data-theme="light"] .btn-s {
  background: var(--card) !important;
  color: var(--t1) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .btn-s:hover {
  background: var(--card-h) !important;
  border-color: var(--border-l) !important;
}

/* ── Cards, panels for light ───────────────────────────────────*/
[data-theme="light"] .pc,
[data-theme="light"] .fc,
[data-theme="light"] .tc,
[data-theme="light"] .pri,
[data-theme="light"] .step,
[data-theme="light"] .release,
[data-theme="light"] .pg-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .pc:hover,
[data-theme="light"] .fc:hover,
[data-theme="light"] .release:hover,
[data-theme="light"] .pg-card:hover {
  border-color: var(--border-l) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .pri.feat {
  border-color: var(--gold) !important;
  box-shadow: 0 0 40px var(--gold-g) !important;
}
[data-theme="light"] .release.latest {
  border-color: rgba(184,150,46,0.35) !important;
  box-shadow: 0 0 30px var(--gold-g) !important;
}

/* ── Stat boxes, sub-panels ────────────────────────────────────*/
[data-theme="light"] .sb,
[data-theme="light"] .ar,
[data-theme="light"] .fi,
[data-theme="light"] .calc-input {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

/* ── Pricing tags ──────────────────────────────────────────────*/
[data-theme="light"] .plat-tag {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--t2) !important;
}

/* ── Tables ────────────────────────────────────────────────────*/
[data-theme="light"] .cmp th,
[data-theme="light"] .keys th,
[data-theme="light"] .legal th {
  background: var(--bg2) !important;
  color: var(--t3) !important;
}
[data-theme="light"] .cmp td,
[data-theme="light"] .cmp th,
[data-theme="light"] .keys td,
[data-theme="light"] .keys th,
[data-theme="light"] .legal td,
[data-theme="light"] .legal th {
  border-color: var(--border) !important;
}
[data-theme="light"] .cmp th.col-hl {
  background: rgba(184,150,46,0.06) !important;
  color: var(--gold) !important;
}
[data-theme="light"] .cmp .col-hl {
  background: rgba(184,150,46,0.03) !important;
}

/* ── FAQ ───────────────────────────────────────────────────────*/
[data-theme="light"] .faq-q {
  background: var(--card) !important;
  color: var(--t1) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .faq-a-in {
  color: var(--t2) !important;
}

/* ── Footer ────────────────────────────────────────────────────*/
[data-theme="light"] .footer,
[data-theme="light"] .footer-legal {
  border-color: var(--border) !important;
}

/* ── Callout boxes ─────────────────────────────────────────────*/
[data-theme="light"] .tip {
  background: rgba(184,150,46,0.06) !important;
  border-color: rgba(184,150,46,0.18) !important;
}
[data-theme="light"] .warn,
[data-theme="light"] .warning {
  background: rgba(220,38,38,0.05) !important;
  border-color: rgba(220,38,38,0.15) !important;
}
[data-theme="light"] .info {
  background: rgba(37,99,235,0.05) !important;
  border-color: rgba(37,99,235,0.15) !important;
}
[data-theme="light"] .legal .info {
  background: rgba(184,150,46,0.04) !important;
  border-color: rgba(184,150,46,0.12) !important;
}

/* ── Calc result ───────────────────────────────────────────────*/
[data-theme="light"] .calc-result {
  background: rgba(184,150,46,0.06) !important;
  border-color: rgba(184,150,46,0.18) !important;
}

/* ── Code blocks ───────────────────────────────────────────────*/
[data-theme="light"] code,
[data-theme="light"] .keys code {
  background: var(--bg2) !important;
  color: var(--t1) !important;
}

/* ── Download section ──────────────────────────────────────────*/
[data-theme="light"] .dl-btn {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="light"] .dl-btn:hover {
  border-color: var(--gold) !important;
}

/* ── Selection ─────────────────────────────────────────────────*/
[data-theme="light"] ::selection {
  background: var(--gold) !important;
  color: #fff !important;
}

/* ── Dashboard-specific overrides ──────────────────────────────*/
[data-theme="light"] .dock {
  background: rgba(245,245,248,0.95) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .dock-btn {
  color: var(--t2) !important;
}
[data-theme="light"] .dock-btn:hover,
[data-theme="light"] .dock-btn.active {
  background: var(--card) !important;
  color: var(--t1) !important;
}
[data-theme="light"] .panel {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .panel .head {
  border-color: var(--border) !important;
}
[data-theme="light"] .panel .inp {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}
[data-theme="light"] .demo-bar {
  background: rgba(245,245,248,0.95) !important;
  border-color: var(--border) !important;
}

/* ── Timeline (changelog) ──────────────────────────────────────*/
[data-theme="light"] .timeline::before {
  background: var(--border) !important;
}
[data-theme="light"] .timeline .release::before {
  background: var(--border) !important;
  border-color: var(--bg) !important;
}
[data-theme="light"] .timeline .release.latest::before {
  background: var(--gold) !important;
}

/* ── TOC sidebar (guide) ───────────────────────────────────────*/
[data-theme="light"] .content {
  border-left-color: var(--border) !important;
}
[data-theme="light"] .toc a:hover {
  border-color: var(--border-l) !important;
}
[data-theme="light"] .toc a.active {
  color: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* ── Theme toggle button ───────────────────────────────────────*/
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
  flex-shrink: 0;
  line-height: 1;
  padding: 0;
}
.theme-toggle:hover {
  background: var(--card-h, var(--card));
  border-color: var(--border-l, var(--border));
}
[data-theme="dark"] .theme-toggle .sun { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }
[data-theme="light"] .theme-toggle .sun { display: none; }
[data-theme="light"] .theme-toggle .moon { display: inline; }