/*
  Dark mode only retints the main content surface.
  Sidebar tokens stay on the light-mode values from base.css.
*/
html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #16181c;
  --panel-soft: #1c1f24;
  --surface-inset: #101214;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --muted-soft: #6b7280;
  --line: #2a2e35;
  --line-soft: #1f2227;
  --dark: #f3f4f6;
  --accent: #e5e7eb;
  --accent-dark: #ffffff;
  --blue: #60a5fa;
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --red: #f87171;
  --tooltip-bg: #f3f4f6;
  --tooltip-text: #0b0d10;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  --backdrop: rgba(0, 0, 0, 0.6);
  --hover: #1c2026;
  --select-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

html[data-theme='dark'] .content input,
html[data-theme='dark'] .content select,
html[data-theme='dark'] .modal input,
html[data-theme='dark'] .modal select {
  background-color: #101214;
  color: var(--text);
}

html[data-theme='dark'] .content button:hover,
html[data-theme='dark'] .modal button:hover {
  border-color: #3a3f48;
  background: var(--panel-soft);
}

html[data-theme='dark'] .content button.primary,
html[data-theme='dark'] .modal button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #0b0d10;
}

html[data-theme='dark'] .content button.primary:hover,
html[data-theme='dark'] .modal button.primary:hover {
  border-color: #ffffff;
  background: #ffffff;
}

html[data-theme='dark'] .content button.ghost:hover,
html[data-theme='dark'] .modal button.ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme='dark'] .table-tabs button.active,
html[data-theme='dark'] thead,
html[data-theme='dark'] .summary-grid,
html[data-theme='dark'] .pagination,
html[data-theme='dark'] .resolver-summary,
html[data-theme='dark'] .resolver-section-header,
html[data-theme='dark'] .archive-detail-row,
html[data-theme='dark'] .modal-footer,
html[data-theme='dark'] .baseline-table thead,
html[data-theme='dark'] .expand-inner thead th {
  background: var(--panel-soft);
}

html[data-theme='dark'] tbody tr:hover td,
html[data-theme='dark'] .row-clickable .row-toggle:hover td,
html[data-theme='dark'] .delivery-table .delivery-expandable-row:hover td {
  background: #1c2026;
}

html[data-theme='dark'] .row-clickable .row-toggle.is-open td,
html[data-theme='dark'] .delivery-table .delivery-expandable-row.is-striped td {
  background: #101214;
}

html[data-theme='dark'] .expand-inner tbody tr:nth-child(even) td,
html[data-theme='dark'] .delivery-table .delivery-detail-row td,
html[data-theme='dark'] .delivery-table .delivery-detail-row:hover td {
  background: var(--panel-soft);
}

html[data-theme='dark'] tbody td,
html[data-theme='dark'] .delivery-status,
html[data-theme='dark'] .delivery-meta-cell strong,
html[data-theme='dark'] .delivery-window-chip {
  color: #c8cdd5;
}

html[data-theme='dark'] .table-wrap,
html[data-theme='dark'] .match-preview-section,
html[data-theme='dark'] .coverage-detail,
html[data-theme='dark'] .resolver-market-detail,
html[data-theme='dark'] .archive-json,
html[data-theme='dark'] .replay-id {
  background: #101214;
}

html[data-theme='dark'] .table-tabs button:hover {
  background: #1c2026;
  color: var(--text);
}

html[data-theme='dark'] .live-tabs {
  background: var(--surface-inset);
}

html[data-theme='dark'] .content .opta-id-chip:hover {
  border-color: #4b5563;
  background: var(--panel);
}

html[data-theme='dark'] .content button.opta-match-id:hover {
  border-color: transparent;
  background: transparent;
}

html[data-theme='dark'] .stats-perform-logo {
  filter: brightness(0) invert(0.9);
}

html[data-theme='dark'] .live-tabs button:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

html[data-theme='dark'] .live-tabs button.active,
html[data-theme='dark'] .live-tabs button.active:hover {
  background: var(--dark);
  color: var(--panel);
}


html[data-theme='dark'] .status-pill,
html[data-theme='dark'] .coverage-pill {
  border-color: #3a3f48;
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

html[data-theme='dark'] .state-pill {
  background: rgba(156, 163, 175, 0.12);
  color: #d1d5db;
}

html[data-theme='dark'] .state-pill-live {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
}

html[data-theme='dark'] .state-pill-ok {
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
}

html[data-theme='dark'] .state-pill-warn {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

html[data-theme='dark'] .state-pill-quiet {
  background: transparent;
  color: #9ca3af;
}

html[data-theme='dark'] .replay-status-queued {
  --status-dot: #fbbf24;
}

html[data-theme='dark'] .replay-status-running {
  --status-dot: var(--lime);
  --status-pulse: rgba(225, 255, 131, 0.45);
  --status-pulse-soft: rgba(225, 255, 131, 0.15);
}

html[data-theme='dark'] .form-error,
html[data-theme='dark'] .replay-error,
html[data-theme='dark'] .preview-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
}

html[data-theme='dark'] .content .notice {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
  color: var(--red);
}

html[data-theme='dark'] .toast {
  background: #e5e7eb;
  color: #0b0d10;
}

html[data-theme='dark'] .login-panel button.primary,
html[data-theme='dark'] .sidebar-user-card .user-avatar {
  color: #0b0d10;
}