/* Shared dashboard theme. The original styles.css remains the light theme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b111b;
  --bg-2: #111b29;
  --ink: #e7edf5;
  --muted: #a5b4c6;
  --accent: #6dd8cf;
  --accent-2: #ffc078;
  --card: rgba(21, 32, 48, 0.97);
  --card-border: #374a60;
  --ok: #56dfaf;
  --warn: #ffc36e;
  --down: #ff8793;
  --shadow: 0 12px 25px rgba(0, 0, 0, 0.34);
  --text-primary: var(--ink);
}

:root[data-theme="dark"] .bg {
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2b40 0%, transparent 64%),
    radial-gradient(900px 500px at 110% 10%, #172c31 0%, transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
}

:root[data-theme="dark"] :is(button, .nav-link-btn, .pill, select, input, textarea) {
  background: #1e3043;
  color: var(--ink);
  border-color: var(--card-border);
}
:root[data-theme="dark"] :is(button, .nav-link-btn):hover {
  background: #294159;
  border-color: #64839b;
}
:root[data-theme="dark"] :is(input, textarea)::placeholder { color: #9db0c4; }
:root[data-theme="dark"] :is(button, .nav-link-btn, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root[data-theme="dark"] :is(.table, table) :is(th, td) {
  border-color: #34465a;
}
:root[data-theme="dark"] .kv__row,
:root[data-theme="dark"] .tools-shell-inline,
:root[data-theme="dark"] .trade-detail-sub,
:root[data-theme="dark"] .paper-bot-detail {
  border-color: var(--card-border);
}
:root[data-theme="dark"] .paper-bot-detail,
:root[data-theme="dark"] .trade-detail-sub summary,
:root[data-theme="dark"] .exit-snapshot-value { color: var(--ink); }
:root[data-theme="dark"] .chart-neutral {
  color: var(--ink);
  stroke: var(--ink);
}
:root[data-theme="dark"] .chart-area.chart-neutral { fill: var(--ink); }
:root[data-theme="dark"] .chart-dot { fill: #152437; }
:root[data-theme="dark"] .chart-zero { stroke: #5a6e81; }
:root[data-theme="dark"] .chart-line-overlay { stroke: #b2c6d9; }

/* Override the light, hardcoded surfaces not yet expressed as CSS variables. */
:root[data-theme="dark"] :is(
  .auth-panel, .adaptive-grace-card, .adaptive-grace-empty,
  .paper-stat, .mini-stat, .lane-summary-card, .symbol-chart-card,
  .chart-shell, .chart-overlay-card, .trade-row-detail, .exit-snapshot-item,
  .audit-summary-card, .audit-overview-row, .baseline-pill-card,
  .tools-group, .tools-card, .tools-target, .tools-run-card, .tools-target-run,
  .tb-compare-card, .tb-analysis-panel
) {
  background: #1a293b;
  border-color: var(--card-border);
  color: var(--ink);
}
:root[data-theme="dark"] :is(.chart-shell, .chart-overlay-card) {
  background: #162537;
}
:root[data-theme="dark"] .lane-summary-card--excluded {
  background: #1b2634;
}
:root[data-theme="dark"] :is(.audit-summary-card--ok, .metric-validity--ok) {
  background: #15392f;
  color: #a0efcb;
}
:root[data-theme="dark"] :is(.audit-summary-card--warn, .metric-validity--warn) {
  background: #3c2c1b;
  color: #ffdc96;
}
:root[data-theme="dark"] :is(.audit-summary-card--error, .metric-validity--error) {
  background: #422532;
  color: #ffbdc4;
}
:root[data-theme="dark"] :is(.status-live, .era-current, .era-rebased, .pnl-trend--up, .audit-pill--ok) {
  background: #183e31;
  color: #9aeac6;
  border-color: #286950;
}
:root[data-theme="dark"] :is(.status-stale, .status-error, .era-excluded, .pnl-trend--down, .audit-pill--error) {
  background: #422630;
  color: #ffb3be;
  border-color: #8c4857;
}
:root[data-theme="dark"] :is(.status-paused, .era-mixed, .pnl-trend--flat, .audit-pill--na) {
  background: #29394b;
  color: #dae4ee;
  border-color: var(--card-border);
}
:root[data-theme="dark"] :is(.status-ready, .audit-pill--warn) {
  background: #3b3421;
  color: #ffe0a1;
  border-color: #826d3c;
}
:root[data-theme="dark"] .range-toggle button.is-active {
  background: #204b4b;
  color: #baf5ed;
  border-color: var(--accent);
}
:root[data-theme="dark"] button.danger {
  background: #482b34;
  color: #ffbdc4;
  border-color: #a45565;
}
:root[data-theme="dark"] .per-symbol-totals-row td { background: #26374b; }
:root[data-theme="dark"] .audit-summary-card--na { border-style: dashed; }
:root[data-theme="dark"] .audit-pill--watch { background: #41331d; color: #ffd68a; }
:root[data-theme="dark"] .tb-selected-row td,
:root[data-theme="dark"] .table-row-link:hover td,
:root[data-theme="dark"] .table-row-link:focus-visible td {
  background: #263e50;
}
:root[data-theme="dark"] .tools-options > summary { color: var(--accent); }
:root[data-theme="dark"] .log { background: #090f18; }

/* The toggle lives at the far right of every dashboard's existing header. */
.theme-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 92px;
  font-weight: 700;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}
:root[data-theme="light"] .theme-toggle { background: #e7ecf2; color: #17212b; }
:root[data-theme="dark"] .theme-toggle { background: #1f4851; color: #dbfff6; border-color: #468688; }
:root[data-theme="dark"] .theme-toggle:hover { background: #285b64; }

/* Browser/OS selection controls and charts should be native dark too. */
:root[data-theme="dark"] :is(.table, .card, .pipeline-detail) { color: var(--ink); }