/* ═══════════════════════════════════════════════════════════════════════════
   PHYSICSFORUM — DARK MODE (v5.0, rebuilt)

   WHAT CHANGED
   ------------
   The old file was 265 lines and 158 override rules. It worked by naming
   every element that had a hardcoded light colour and flipping it one at a
   time — a list that could never be finished, because each new component
   arrived broken until somebody noticed.

   Dark mode is now driven almost entirely by the semantic tokens in
   tokens.css (--surface, --text, --border, …). 317 hardcoded declarations
   across 14 stylesheets were converted to those tokens, so components are
   correct in both themes by construction.

   What remains here is only the genuinely theme-specific work that tokens
   cannot express: media that needs dimming, syntax colours, third-party
   widgets (KaTeX, Chart.js), and form-control chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body,
:root:not([data-theme="light"]) body {
  background: var(--surface-page);
  color: var(--text);
}

/* Smooth the switch, but never fight reduced-motion. */
body { transition: background-color .2s ease, color .2s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* ── Scrollbars ───────────────────────────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--surface-sunken); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 6px;
  border: 3px solid var(--surface-sunken);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #47607e; }
[data-theme="dark"] { scrollbar-color: var(--border-strong) var(--surface-sunken); }

/* ── Selection ────────────────────────────────────────────────────────── */
[data-theme="dark"] ::selection { background: #2C4A78; color: #F1F5F9; }

/* ── Form controls ────────────────────────────────────────────────────────
   Inputs are the most common thing to be missed — a white input on a dark
   card is jarring and it happens on every new form. Covered globally here. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--surface-sunken);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-faint); }
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(96,165,250,.22);
  outline: none;
}
/* Native dropdown options (Windows/Linux render these from the page). */
[data-theme="dark"] option { background: var(--surface-raised); color: var(--text); }

/* Autofill — Chrome forces its own yellow/white unless overridden this way. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-sunken) inset;
  caret-color: var(--text);
}

/* ── Media: dim, don't invert ─────────────────────────────────────────────
   Bright photos glare against a dark page. A slight dim that lifts on hover
   keeps them comfortable while preserving colour fidelity. Diagrams and
   equations are excluded — dimming a figure makes it harder to read. */
[data-theme="dark"] img:not(.no-dim):not(.katex img),
[data-theme="dark"] video:not(.no-dim) {
  filter: brightness(.88) contrast(1.02);
  transition: filter .2s ease;
}
[data-theme="dark"] img:hover:not(.no-dim) { filter: none; }

/* Transparent-PNG diagrams that assume a white backdrop get one. */
[data-theme="dark"] .diagram-invert,
[data-theme="dark"] img[src$=".svg"].needs-light-bg {
  background: #F8FAFC;
  border-radius: 6px;
  padding: 6px;
}

/* ── KaTeX ────────────────────────────────────────────────────────────────
   KaTeX inherits colour, but rules/fraction bars are drawn with borders and
   need explicit help, and .katex-error is hardcoded red on white. */
[data-theme="dark"] .katex { color: var(--text); }
[data-theme="dark"] .katex .frac-line,
[data-theme="dark"] .katex .overline .overline-line,
[data-theme="dark"] .katex .underline .underline-line,
[data-theme="dark"] .katex .hline,
[data-theme="dark"] .katex .rule { border-color: var(--text); background: var(--text); }
[data-theme="dark"] .katex-display > .katex { color: var(--text); }
[data-theme="dark"] .katex-error { color: #FCA5A5 !important; }
/* Display equations often sit in a tinted well. */
[data-theme="dark"] .pf-katex-wrap,
[data-theme="dark"] .equation-block { background: var(--surface-sunken); border-color: var(--border); }

/* ── Code ─────────────────────────────────────────────────────────────── */
[data-theme="dark"] pre,
[data-theme="dark"] code,
[data-theme="dark"] .wp-block-code {
  background: var(--code-bg);
  color: var(--code-fg);
  border-color: var(--border);
}
[data-theme="dark"] :not(pre) > code { background: var(--surface-sunken); color: #E9A8B0; }

/* ── Tables ───────────────────────────────────────────────────────────── */
[data-theme="dark"] table { border-color: var(--border); }
[data-theme="dark"] th { background: var(--surface-sunken); color: var(--text); }
[data-theme="dark"] td { border-color: var(--border); }
[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
[data-theme="dark"] tbody tr:hover { background: var(--surface-hover); }

/* ── Charts (Chart.js draws to canvas; it can't read CSS) ─────────────────
   js/community.js reads these custom properties when building a chart, so
   graphs follow the theme instead of staying light. */
[data-theme="dark"] .pf-graph-wrap {
  --chart-grid: #24344F;
  --chart-text: #94A3B8;
  --chart-line: #60A5FA;
  background: var(--surface-sunken);
  border-color: var(--border);
}
:root .pf-graph-wrap {
  --chart-grid: #E2E8F0;
  --chart-text: #64748B;
  --chart-line: #2563EB;
}

/* ── Simulations ──────────────────────────────────────────────────────────
   Lab canvases are self-rendering; only their chrome needs theming. */
[data-theme="dark"] .sim-canvas-container,
[data-theme="dark"] .sim-info-panel,
[data-theme="dark"] .sim-sidebar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #fps-display { background: rgba(0,0,0,.55); color: var(--text-secondary); }

/* ── Elevated layers ──────────────────────────────────────────────────────
   Modals/dropdowns must be lighter than the page or they lose separation
   once shadows stop being visible on dark backgrounds. */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .modal,
[data-theme="dark"] .pfc-modal,
[data-theme="dark"] .confirm-modal,
[data-theme="dark"] .pfc-reaction-picker,
[data-theme="dark"] .tooltip {
  background: var(--surface-raised);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .pfc-modal-backdrop { background: rgba(0,0,0,.72); }

/* ── Skeleton loaders ─────────────────────────────────────────────────── */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .loading-placeholder {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-hover) 50%, var(--surface-sunken) 75%);
}

/* ── Focus visibility ─────────────────────────────────────────────────── */
[data-theme="dark"] :focus-visible { outline-color: var(--border-focus); }

/* ── Print: always light ──────────────────────────────────────────────── */
@media print {
  [data-theme="dark"] {
    --surface-page:#fff; --surface:#fff; --surface-raised:#fff; --surface-sunken:#fff;
    --text:#000; --text-secondary:#222; --text-muted:#444; --border:#ccc;
  }
  [data-theme="dark"] img { filter: none; }
}