/* Vidaara — dark theme.
   Activated by data-theme="dark" on <html> (set pre-paint by the inline head
   script, toggled by /js/theme.js). Most chrome is already variable-driven, so
   flipping the palette themes the nav, footer, body and every var()-based
   surface. The blocks below darken the content views whose <style> blocks use
   hardcoded colours — selectors are prefixed with [data-theme=dark] so they
   outrank the per-view rules regardless of source order.
   Note: figure panels and JS-drawn graphs are intentionally kept light, so
   diagrams stay readable on a "paper" card. */

[data-theme="dark"] {
  color-scheme: dark;
  --cream: #0b1424;          /* page background */
  --white: #131d33;          /* card / panel surface */
  --cream-warm: #0f1830;     /* alt panel */
  --deep: #e8edf5;           /* primary text / headings */
  --deep-mid: #c4ccda;
  --text-muted: #99a6ba;
  --border: rgba(255,255,255,.10);
  --border-dark: rgba(255,255,255,.16);
  --saffron-light: rgba(255,122,24,.16);
  --sky: #4ea0ff;
  --sky-light: rgba(78,160,255,.16);
  --emerald: #2ecc9d;
  --emerald-light: rgba(46,204,157,.15);
  --purple: #a78bfa;
  --purple-light: rgba(167,139,250,.16);
}

/* base surfaces that use literal white/dark in main.css or inline */
[data-theme="dark"] body { background: var(--cream); color: var(--deep); }
[data-theme="dark"] .btn-log { color: var(--deep); border-color: var(--border-dark); }
[data-theme="dark"] .btn-log:hover { background: var(--deep); color: #0b1424; border-color: var(--deep); }

/* ── Top navigation, dropdowns, search & notifications ───────────────────
   The nav bar, drawer, dropdown menus, search box and panels all use
   hardcoded light colours (rgba cream / #fff / #f4f5f8), so they never
   darkened while their text flipped to light — making the whole bar
   unreadable. Pin them to dark surfaces. */
[data-theme="dark"] body > nav { background: rgba(11,20,36,0.96); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .nav-drawer { background: rgba(11,20,36,0.985); border-bottom-color: rgba(255,255,255,.08); }
[data-theme="dark"] .nav-drawer-search { background: #0f1830; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .nav-drawer-search input { color: var(--deep); }
[data-theme="dark"] .nav-drop-menu,
[data-theme="dark"] .nav-search-panel,
[data-theme="dark"] .notif-panel { background: #111c30; border-color: rgba(255,255,255,.12); box-shadow: 0 16px 44px rgba(0,0,0,.55); }
[data-theme="dark"] .nav-drop-menu::before { background: #111c30; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .nav-drop-menu a { color: #cdd6e4; }
[data-theme="dark"] .nav-drop-menu a:hover { background: rgba(255,255,255,.06); color: var(--saffron); }
[data-theme="dark"] .nav-drop-section,
[data-theme="dark"] .nav-drop-menu a.soon { color: #8b97a9; }
[data-theme="dark"] .nav-drop-menu a.soon::after { background: rgba(255,255,255,.08); color: #8b97a9; }
[data-theme="dark"] .nav-drop-divider { background: rgba(255,255,255,.08); }
[data-theme="dark"] .nav-search { background: #0f1830; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .nav-search:focus-within { background: #0f1830; border-color: var(--saffron); }
[data-theme="dark"] .nav-search input { color: var(--deep); }
[data-theme="dark"] .nav-search input::placeholder,
[data-theme="dark"] .nav-drawer-search input::placeholder { color: #8b97a9; }
[data-theme="dark"] .nav-search-key { background: #0b1424; color: #8b97a9; border-color: rgba(255,255,255,.14); box-shadow: 0 1px 0 rgba(255,255,255,.08); }

/* generic shared cards & inputs */
[data-theme="dark"] .card,
[data-theme="dark"] .panel { background: var(--white); border-color: var(--border); color: var(--deep); }

/* ── "Always-dark" surfaces that use var(--deep) as a BACKGROUND ──────────
   --deep flips to light (it is the text colour), so these would turn light
   with their light text becoming invisible. Pin them back to a dark surface;
   their text is already light, so only the background needs fixing. */
[data-theme="dark"] footer,
[data-theme="dark"] .ai-section,
[data-theme="dark"] .trust-bar,
[data-theme="dark"] .test-hdr,
[data-theme="dark"] #cookie-banner,
[data-theme="dark"] .tt-toast { background: #0c1526; }
[data-theme="dark"] .tools-band { background: linear-gradient(135deg,#0c1526 0%,#10203a 60%,#13283f 100%); }
[data-theme="dark"] .c-hero.deep { background: linear-gradient(135deg,#0c1526 0%,#14243f 100%); }
[data-theme="dark"] .btn-test { background: var(--sky); color: #06122a; }
[data-theme="dark"] .btn-test:hover { background: #76b6ff; }
[data-theme="dark"] .persona-tab.active,
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .filter-btn:hover { background: var(--saffron); border-color: var(--saffron); color: #fff; }
[data-theme="dark"] .btn-ghost2:hover { background: var(--deep); color: #0b1424; border-color: var(--deep); }
/* shared hub components (components.css) that gradient on var(--deep) */
[data-theme="dark"] .vd-hero { background: linear-gradient(135deg,#0c1526,#14243f); }
[data-theme="dark"] .vd-btn--ghost:hover { background: var(--deep); color: #0b1424; border-color: var(--deep); }

/* ── Learn: study & topic reading surfaces ───────────────────────────── */
[data-theme="dark"] .concept-box,
[data-theme="dark"] .example-card,
[data-theme="dark"] .recap-box,
[data-theme="dark"] .topic-section { background: var(--white); border-color: var(--border); color: #dbe2ee; }
[data-theme="dark"] .concept-box, [data-theme="dark"] .topic-section { background: transparent; }
[data-theme="dark"] .example-problem { color: #eef2f8; }
[data-theme="dark"] .recap-box h3, [data-theme="dark"] .study-chapter-header h1, [data-theme="dark"] .tp-head h1 { color: #eef2f8; }
[data-theme="dark"] .example-solution { background: #10241b; border-color: rgba(34,197,94,.26); color: #cfe9d6; }
[data-theme="dark"] .example-solution strong { color: #bbf7d0; }
[data-theme="dark"] .example-solution .sol-label { background: rgba(34,197,94,.18); color: #86efac; }
[data-theme="dark"] .example-solution.sr-on ol.solution-steps > li { background: #0f1830; border-color: rgba(34,197,94,.26); }
[data-theme="dark"] .sr-bar { background: #0f1830; border-color: rgba(34,197,94,.32); }
[data-theme="dark"] .example-solution.sr-on .sr-answer { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.32); }
[data-theme="dark"] .topic-pill,
[data-theme="dark"] .tp-tab { background: var(--white); color: var(--deep-mid); border-color: var(--border); }
[data-theme="dark"] .tp-tab.active { background: var(--sky); color: #06122a; border-color: var(--sky); }
[data-theme="dark"] .qz, [data-theme="dark"] .qi { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .qopt { background: #0f1830; border-color: var(--border); color: #dbe2ee; }

/* ── Formula Library ─────────────────────────────────────────────────── */
[data-theme="dark"] .fx-controls { background: var(--cream); }
[data-theme="dark"] .fx-search input { background: var(--white); border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .fx-chip { background: var(--white); border-color: var(--border-dark); color: var(--deep-mid); }
[data-theme="dark"] .fx-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .fx-name { color: #eef2f8; }
[data-theme="dark"] .fx-tex { color: var(--deep); }
[data-theme="dark"] .fx-desc { color: #aeb8c7; }
[data-theme="dark"] .fx-tag { background: #0f1830; color: #9aa6b8; }
[data-theme="dark"] .fx-topic-name { border-color: var(--border); }
[data-theme="dark"] .fx-copy { background: #0f1830; border-color: var(--border-dark); color: #9aa6b8; }
[data-theme="dark"] .fx-subject-head { color: #eef2f8; }

/* ── Problem of the Day ──────────────────────────────────────────────── */
[data-theme="dark"] .pd-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .pd-q { color: #eef2f8; }
[data-theme="dark"] .pd-btn { background: var(--white); border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .pd-hint { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); color: #fcd9a0; }
[data-theme="dark"] .pd-answer { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.30); color: #a7f3d0; }
[data-theme="dark"] .pd-streak { background: rgba(255,122,24,.14); border-color: rgba(255,122,24,.30); color: #fdba74; }

/* ── Maths Lab (HTML parts; the canvas/SVG graph panels stay light) ───── */
[data-theme="dark"] .mlab-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .mlab-card h2, [data-theme="dark"] .al-out, [data-theme="dark"] .mx-val { color: #eef2f8; }
[data-theme="dark"] .mlab-tab { background: var(--white); border-color: var(--border-dark); color: var(--deep-mid); }
[data-theme="dark"] .mlab-tab.active { background: var(--sky); border-color: var(--sky); color: #06122a; }
[data-theme="dark"] .gr-hint, [data-theme="dark"] .al-result, [data-theme="dark"] .mx-step, [data-theme="dark"] .pt-canvas, [data-theme="dark"] .pt-cols .pt-editor { background: #0f1830; border-color: var(--border); color: #dbe2ee; }
[data-theme="dark"] .al-text, [data-theme="dark"] .mx-out-table td, [data-theme="dark"] .mx-step-desc { color: #cdd6e4; }
[data-theme="dark"] #alExpr, [data-theme="dark"] .al-mini input, [data-theme="dark"] .mx-grid-table td input, [data-theme="dark"] .pt-lab, [data-theme="dark"] .pt-p { background: #0b1424; border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .al-op.al-calc { background: #0f1830; color: #8fb8ff; }
[data-theme="dark"] .al-eg, [data-theme="dark"] .mx-op { background: #0f1830; border-color: var(--border-dark); color: #cdd6e4; }
[data-theme="dark"] .pt-table th { background: #0f1830; color: #c4ccda; }
[data-theme="dark"] .pt-table th, [data-theme="dark"] .pt-table td { border-color: var(--border); }
[data-theme="dark"] .pt-table tfoot td { background: #0f1830; }
[data-theme="dark"] .sg-shape, [data-theme="dark"] .mx-eg { background: #0f1830; border-color: var(--border-dark); color: #cdd6e4; }
[data-theme="dark"] .sg-shape.active { background: var(--sky); border-color: var(--sky); color: #06122a; }
[data-theme="dark"] .sg-slider label { color: #dbe2ee; }
[data-theme="dark"] .sg-m { background: #0f1830; border-color: var(--border); }
[data-theme="dark"] .sg-m-val { color: #eef2f8; }

/* ── Speed Challenge ─────────────────────────────────────────────────── */
[data-theme="dark"] .ch-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .ch-rules li, [data-theme="dark"] .ch-q { color: #dbe2ee; }
[data-theme="dark"] .ch-rules li b, [data-theme="dark"] .ch-timer, [data-theme="dark"] .ch-meta { color: #eef2f8; }
[data-theme="dark"] .ch-name input { background: #0f1830; border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .ch-track { background: rgba(255,255,255,.10); }
[data-theme="dark"] .ch-opt { background: #0f1830; border-color: var(--border-dark); color: #e8edf5; }
[data-theme="dark"] .ch-opt:hover { background: #14233f; border-color: var(--sky); }
[data-theme="dark"] .ch-opt.right { background: rgba(34,197,94,.18); border-color: #16a34a; color: #86efac; }
[data-theme="dark"] .ch-opt.wrong { background: rgba(220,38,38,.16); border-color: #dc2626; color: #fca5a5; }
[data-theme="dark"] .ch-stat { background: #0f1830; border-color: var(--border); }
[data-theme="dark"] .ch-stat b { color: #eef2f8; }
[data-theme="dark"] .ch-rank { background: rgba(29,78,216,.16); border-color: rgba(78,160,255,.3); color: #bcd4ff; }
[data-theme="dark"] .ch-board h2, [data-theme="dark"] .ch-table .ch-sc { color: #eef2f8; }
[data-theme="dark"] .ch-board-tab { background: var(--white); border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .ch-board-tab.active { background: var(--sky); border-color: var(--sky); color: #06122a; }
[data-theme="dark"] .ch-table th, [data-theme="dark"] .ch-table td { border-color: var(--border); }
[data-theme="dark"] .ch-table tr.me { background: rgba(255,122,24,.12); }

/* ── Virtual Labs (physics) + lab hub ────────────────────────────────── */
[data-theme="dark"] .pl-card, [data-theme="dark"] .lh-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .pl-card h2, [data-theme="dark"] .lh-card h2 { color: #eef2f8; }
[data-theme="dark"] .pl-tab { background: var(--white); border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .pl-tab.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
[data-theme="dark"] .pl-field label { color: #dbe2ee; }
[data-theme="dark"] .pl-presets button, [data-theme="dark"] .pl-btn-row button.ghost { background: #0f1830; border-color: var(--border-dark); color: #cdd6e4; }
[data-theme="dark"] .pl-presets button.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
[data-theme="dark"] .pl-stat, [data-theme="dark"] .pl-note { background: #0f1830; border-color: var(--border); color: #cdd6e4; }
[data-theme="dark"] .pl-stat b { color: #eef2f8; }
[data-theme="dark"] .lh-badge.soon { background: rgba(255,255,255,.08); color: #9aa6b8; }

/* ── Chemistry Lab ───────────────────────────────────────────────────── */
[data-theme="dark"] .cl-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .cl-card h2 { color: #eef2f8; }
[data-theme="dark"] .cl-tab { background: var(--white); border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .cl-tab.active { background: #14b8a6; border-color: #14b8a6; color: #042f2e; }
[data-theme="dark"] .pt-search input { background: #0f1830; border-color: var(--border-dark); color: var(--deep); }
[data-theme="dark"] .pt-detail { background: #0f1830; border-color: var(--border); }
[data-theme="dark"] .pt-dinfo h3 { color: #eef2f8; }
[data-theme="dark"] .pt-drows { color: #cdd6e4; }
[data-theme="dark"] .pt-drows b, [data-theme="dark"] .pt-badge .bm, [data-theme="dark"] .pt-badge .bz { color: inherit; }
[data-theme="dark"] .pt-config { background: #0b1424; border-color: var(--border); }
[data-theme="dark"] .pt-leg { color: #aeb8c7; }
[data-theme="dark"] .pt-cell.sel { outline-color: #fff; }
[data-theme="dark"] .ab-canvas-wrap { background: #0f1830; }
[data-theme="dark"] .ab-step { background: #0f1830; border-color: var(--border); }
[data-theme="dark"] .ab-step .lbl { color: #dbe2ee; }
[data-theme="dark"] .ab-step button { background: #0b1424; border-color: var(--border-dark); color: #5eead4; }
[data-theme="dark"] .ab-stat { background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.3); }
[data-theme="dark"] .ab-stat span { color: #99f6e4; }
[data-theme="dark"] .ab-stat b { color: #ccfbf1; }
[data-theme="dark"] .ab-note, [data-theme="dark"] .cl-card .sub { color: #aeb8c7; }
[data-theme="dark"] .ab-note { background: #0f1830; border-color: var(--border); }

/* ── Auth & dashboard generic cards ──────────────────────────────────── */
[data-theme="dark"] .auth-card, [data-theme="dark"] .dash-card, [data-theme="dark"] .stat-card { background: var(--white); border-color: var(--border); color: var(--deep); }

/* soften pure-white code/pre blocks */
[data-theme="dark"] pre, [data-theme="dark"] code { background: #0f1830; color: #dbe2ee; }

/* the theme toggle button itself */
.theme-toggle { background: none; border: 1px solid var(--border-dark); border-radius: 9px; width: 38px; height: 38px; cursor: pointer; color: var(--deep); display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
.theme-toggle:hover { background: var(--saffron-light); border-color: var(--saffron); color: var(--saffron); }
.theme-toggle .ti-sun { display: none; }
.theme-toggle .ti-moon { display: block; }
[data-theme="dark"] .theme-toggle .ti-sun { display: block; }
[data-theme="dark"] .theme-toggle .ti-moon { display: none; }
