/* ==========================================================================
   Dark Mode — ELO BALL
   CSS variable overrides for [data-theme="dark"]
   Inspired by the original ESPN/broadcast dark theme, adapted to the
   modern Inter/rounded-corner design system.
   ========================================================================== */

[data-theme="dark"] {
  /* Core surfaces */
  --bg-page:        #0d1117;
  --bg-white:       #161b22;
  --border-line:    #30363d;

  /* Text */
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;

  /* Accent — slightly brighter blue for dark-bg contrast (WCAG AA) */
  --primary:        #3b82f6;
  --primary-hover:  #60a5fa;

  /* Semantic colors — brighter on dark for readability */
  --delta-up:       #3fb950;
  --delta-down:     #f85149;

  /* Shadows — deeper, more diffuse on dark */
  --shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-modern:  0 1px 4px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-lg:      0 10px 20px -3px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4);

  /* Dark-only tokens used below */
  --surface-raised: #1c2333;
  --surface-hover:  #1f2937;
  --glow-accent:    rgba(59, 130, 246, 0.15);
}

/* ==========================================================================
   Component overrides that need more than a variable swap
   ========================================================================== */

/* --- Nav hover --- */
[data-theme="dark"] .nav-link:hover {
  background: var(--surface-hover);
}

/* --- Delta badges --- */
[data-theme="dark"] .data-delta.pos {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}

[data-theme="dark"] .data-delta.neg {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

/* --- Table header bg --- */
[data-theme="dark"] .board-table th {
  background: #1c2128;
}

[data-theme="dark"] .board-table tbody tr:hover {
  background: var(--surface-hover);
}

/* --- Volume / tag chips --- */
[data-theme="dark"] .team-tag {
  background: #1c2128;
  border-color: var(--border-line);
  color: var(--text-primary);
}

[data-theme="dark"] .volume-col.hi .col-label {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}

[data-theme="dark"] .volume-col.lo .col-label {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

[data-theme="dark"] .volume-col .col-label {
  background: var(--surface-raised);
  color: var(--text-secondary);
}

/* --- Availability badges --- */
[data-theme="dark"] .avail-available {
  background: rgba(63, 185, 80, 0.18);
  color: #3fb950;
}

[data-theme="dark"] .avail-risky {
  background: rgba(234, 179, 8, 0.18);
  color: #e3b341;
}

[data-theme="dark"] .avail-unavailable {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}

/* --- Wind badges (launchpad) --- */
[data-theme="dark"] .wind-out {
  background: rgba(63, 185, 80, 0.12);
  color: #3fb950;
}

[data-theme="dark"] .wind-in {
  background: rgba(59, 130, 246, 0.12);
  color: #58a6ff;
}

/* --- Stream board scrollbar (home page) --- */
[data-theme="dark"] .stream-board-scroll::-webkit-scrollbar-track {
  background: #1f2937;
}

[data-theme="dark"] .stream-board-scroll::-webkit-scrollbar-thumb {
  background: #6b7280;
}

/* --- Stream board stat pills (home page) --- */
[data-theme="dark"] .stream-table .stat-pill {
  background: #111827;
  border-color: var(--border-line);
  color: var(--text-primary);
}

/* --- Injury watch scroll panel (home page) --- */
[data-theme="dark"] #injury-watch {
  background: transparent !important;
}

[data-theme="dark"] .injury-section-scroll {
  background: #0b0f16 !important;
  border-color: var(--border-line) !important;
}

[data-theme="dark"] #injury-watch .data-row {
  background: transparent !important;
}

[data-theme="dark"] #injury-watch .data-row:hover {
  background: #111827 !important;
}

[data-theme="dark"] .injury-section-scroll::-webkit-scrollbar-track {
  background: #1f2937 !important;
}

[data-theme="dark"] .injury-section-scroll::-webkit-scrollbar-thumb {
  background: #6b7280 !important;
}

/* --- Edge cards --- */
[data-theme="dark"] .edge-card {
  border-color: var(--border-line);
  background: var(--surface-raised);
}

[data-theme="dark"] .edge-card.win {
  border-color: #3fb950;
  background: rgba(63, 185, 80, 0.06);
}

[data-theme="dark"] .edge-card.loss {
  border-color: #f85149;
  background: rgba(248, 81, 73, 0.06);
}

/* --- Tools tray --- */
[data-theme="dark"] .tray-header {
  background: var(--surface-raised);
}

[data-theme="dark"] .tray-content {
  background: var(--bg-white);
}

[data-theme="dark"] .pane-tab:hover {
  color: var(--text-primary);
}

[data-theme="dark"] .pane-tab.active {
  color: #58a6ff;
  border-bottom-color: #58a6ff;
}

/* --- Terminal (already dark, just tweak) --- */
[data-theme="dark"] .terminal-out {
  background: #010409;
  border: 1px solid var(--border-line);
  color: #58a6ff;
}

/* --- Form inputs --- */
[data-theme="dark"] .form-input,
[data-theme="dark"] .dash-input {
  background: #0d1117;
  border-color: var(--border-line);
  color: var(--text-primary);
}

[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .dash-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .dash-input::placeholder {
  color: #484f58;
}

[data-theme="dark"] .team-select {
  background: #0d1117;
  border-color: var(--border-line);
  color: var(--text-primary);
}

/* --- Alert/info/error msgs --- */
[data-theme="dark"] .error-msg {
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
  color: #f85149;
}

[data-theme="dark"] .info-msg {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #58a6ff;
}

[data-theme="dark"] .success-msg {
  background: rgba(63, 185, 80, 0.1);
  border-color: rgba(63, 185, 80, 0.3);
  color: #3fb950;
}

/* --- Account promo banner --- */
[data-theme="dark"] .account-promo {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #58a6ff;
}

/* --- Auth card / legal / account --- */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .legal-card,
[data-theme="dark"] .account-card {
  background: var(--bg-white);
  box-shadow: var(--shadow-lg);
}

/* --- Reset link --- */
[data-theme="dark"] .reset-link {
  background: #0d1117;
  border-color: var(--border-line);
}

/* --- Status dots — add glow in dark mode (old-theme vibe) --- */
[data-theme="dark"] .status-green { box-shadow: 0 0 8px var(--delta-up); }
[data-theme="dark"] .status-yellow { box-shadow: 0 0 8px #e3b341; }
[data-theme="dark"] .status-red   { box-shadow: 0 0 8px var(--delta-down); }

/* --- Beta banner stays high-contrast (same as light essentially) --- */
[data-theme="dark"] .beta-banner {
  background: var(--primary);
}

/* --- Footer --- */
[data-theme="dark"] .site-footer a:hover {
  color: #58a6ff;
}

/* ==========================================================================
   Matchup Analyzer — dark overrides for hardcoded light-theme colors
   ========================================================================== */

/* Control rail (date nav + chips container) */
[data-theme="dark"] .homepage-matchup-control-rail {
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.98) 0%, rgba(13, 17, 23, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-color: var(--homepage-header-border);
}

/* Date nav buttons + input */
[data-theme="dark"] .matchup-date-nav button,
[data-theme="dark"] #matchup-date-input {
  background: var(--bg-white);
  border-color: var(--border-line);
  color: var(--text-primary);
}
[data-theme="dark"] .matchup-date-nav button:hover {
  background: var(--surface-hover);
}

/* Day chips */
[data-theme="dark"] .matchup-chip {
  background: var(--bg-white);
  border-color: var(--border-line);
  color: var(--text-primary);
}
[data-theme="dark"] .matchup-chip:hover {
  background: var(--surface-hover);
}
[data-theme="dark"] .matchup-chip.active {
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary);
  border-color: var(--primary);
}

/* Matchup lineup panel */
[data-theme="dark"] #matchup-lineup-panel {
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.98) 0%, rgba(13, 17, 23, 0.98) 100%);
  border-color: rgba(59, 130, 246, 0.25);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

/* Drilldown panel */
[data-theme="dark"] .matchup-drilldown-panel {
  background: linear-gradient(180deg, rgba(22, 27, 34, 0.98) 0%, rgba(13, 17, 23, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border-color: var(--border-line);
}

/* ELO strip items */
[data-theme="dark"] .matchup-elo-strip-item {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--border-line);
}

/* ELO prob cards */
[data-theme="dark"] .matchup-elo-prob-card {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--border-line);
}

/* HR state panels */
[data-theme="dark"] .matchup-hr-state {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--homepage-header-border);
}
[data-theme="dark"] .matchup-hr-state-error {
  border-color: rgba(248, 81, 73, 0.4);
  background: rgba(248, 81, 73, 0.08);
  color: #f85149;
}

/* HR summary cards and sections */
[data-theme="dark"] .matchup-hr-summary-card,
[data-theme="dark"] .matchup-hr-section {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--border-line);
}

/* Pitcher overview */
[data-theme="dark"] .matchup-sp-strip,
[data-theme="dark"] .matchup-pitcher-splits,
[data-theme="dark"] .matchup-last-starts,
[data-theme="dark"] .matchup-surface-panel {
  background: linear-gradient(180deg, rgba(28, 35, 51, 0.88) 0%, rgba(22, 27, 34, 0.9) 100%);
  border-color: var(--border-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .matchup-overview-card-badge,
[data-theme="dark"] .matchup-ls-trend,
[data-theme="dark"] .matchup-tab-bar {
  background: rgba(13, 17, 23, 0.6);
  border-color: var(--border-line);
}
[data-theme="dark"] .matchup-sp-table th,
[data-theme="dark"] .matchup-sp-table td,
[data-theme="dark"] .matchup-splits-table th,
[data-theme="dark"] .matchup-splits-table td,
[data-theme="dark"] .matchup-ls-table th,
[data-theme="dark"] .matchup-ls-table td {
  border-color: var(--border-line);
}

/* HR context list rows */
[data-theme="dark"] .matchup-drilldown-context-sections .matchup-hr-list-row {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--border-line);
}

/* HR meta items */
[data-theme="dark"] .matchup-hr-meta-item {
  border-bottom-color: var(--border-line);
}

/* HR list rows */
[data-theme="dark"] .matchup-hr-list-row {
  border-bottom-color: var(--border-line);
}

/* Legend items */
[data-theme="dark"] .matchup-legend-item {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--border-line);
}

/* Arsenal */
[data-theme="dark"] .matchup-pitch-card,
[data-theme="dark"] .matchup-ps {
  background: rgba(22, 27, 34, 0.9);
  border-color: var(--border-line);
}

/* Pitch breakdown card */
[data-theme="dark"] .matchup-pitch-breakdown-card {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, rgba(22, 27, 34, 0.96) 100%);
}

/* Fantasy note */
[data-theme="dark"] .matchup-fantasy-note {
  background: rgba(28, 35, 51, 0.8);
  border-color: var(--border-line);
}

/* Table shell */
[data-theme="dark"] .matchup-table-shell {
  background: rgba(22, 27, 34, 0.9);
  border-color: var(--border-line);
}

/* Sort chips */
[data-theme="dark"] .matchup-sort-chip {
  background: linear-gradient(180deg, rgba(28, 35, 51, 0.98) 0%, rgba(22, 27, 34, 0.98) 100%);
  border-color: var(--border-line);
  color: var(--text-secondary);
}
[data-theme="dark"] .matchup-sort-chip:hover {
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--primary);
}
[data-theme="dark"] .matchup-sort-chip.active,
[data-theme="dark"] .matchup-sort-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(31, 77, 122, 0.96) 0%, rgba(59, 130, 246, 0.5) 100%);
  border-color: rgba(59, 130, 246, 0.5);
  color: #f0f7ff;
}

/* Tab buttons */
[data-theme="dark"] .matchup-tab-btn {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
[data-theme="dark"] .matchup-tab-btn:hover {
  background: rgba(28, 35, 51, 0.9);
  color: var(--text-primary);
}
[data-theme="dark"] .matchup-tab-btn.active {
  background: var(--text-primary);
  color: var(--bg-page);
  border-color: var(--text-primary);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

/* Whiff badges */
[data-theme="dark"] .matchup-wh-elite { background: rgba(248, 81, 73, 0.15); color: #f85149; }
[data-theme="dark"] .matchup-wh-high  { background: rgba(234, 179, 8, 0.15); color: #e3b341; }
[data-theme="dark"] .matchup-wh-avg   { background: rgba(59, 130, 246, 0.15); color: #58a6ff; }
[data-theme="dark"] .matchup-wh-low   { background: rgba(63, 185, 80, 0.15); color: #3fb950; }

/* Hand badges */
[data-theme="dark"] .matchup-hand-L { background: rgba(59, 130, 246, 0.15); color: #58a6ff; }
[data-theme="dark"] .matchup-hand-R { background: rgba(234, 179, 8, 0.15); color: #e3b341; }
[data-theme="dark"] .matchup-hand-S { background: rgba(63, 185, 80, 0.15); color: #3fb950; }

/* Advantage badges */
[data-theme="dark"] .matchup-adv-yes { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
[data-theme="dark"] .matchup-adv-no  { background: rgba(248, 81, 73, 0.15); color: #f85149; }
[data-theme="dark"] .matchup-adv-neu { background: var(--surface-raised); color: var(--text-secondary); }

/* Delta badges */
[data-theme="dark"] .matchup-delta-up { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
[data-theme="dark"] .matchup-delta-dn { background: rgba(248, 81, 73, 0.15); color: #f85149; }
[data-theme="dark"] .matchup-delta-fl { background: var(--surface-raised); color: var(--text-secondary); }

/* HR pills */
[data-theme="dark"] .matchup-hr-pill {
  background: rgba(59, 130, 246, 0.15);
  color: #58a6ff;
}
[data-theme="dark"] .matchup-hr-pill.low {
  background: var(--surface-raised);
  color: var(--text-secondary);
}
[data-theme="dark"] .matchup-hr-pill.moderate {
  background: rgba(59, 130, 246, 0.15);
  color: #58a6ff;
}
[data-theme="dark"] .matchup-hr-pill.high,
[data-theme="dark"] .matchup-hr-pill.elite {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}
[data-theme="dark"] .matchup-hr-pill.batter-edge {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}
[data-theme="dark"] .matchup-hr-pill.pitcher-edge {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
}
[data-theme="dark"] .matchup-hr-pill.neutral-edge {
  background: var(--surface-raised);
  color: var(--text-secondary);
}
[data-theme="dark"] .matchup-hr-pill.unavailable {
  background: var(--surface-raised);
  color: var(--text-secondary);
}

/* Pill tags */
[data-theme="dark"] .matchup-pill-power  { background: rgba(234, 179, 8, 0.15); color: #e3b341; }
[data-theme="dark"] .matchup-pill-speed  { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
[data-theme="dark"] .matchup-pill-chase  { background: rgba(248, 81, 73, 0.15); color: #f85149; }
[data-theme="dark"] .matchup-pill-xwoba  { background: rgba(59, 130, 246, 0.15); color: #58a6ff; }

/* Regression badges */
[data-theme="dark"] .matchup-reg-improve { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
[data-theme="dark"] .matchup-reg-regress { background: rgba(248, 81, 73, 0.15); color: #f85149; }

/* Error block */
[data-theme="dark"] .matchup-error {
  background: rgba(248, 81, 73, 0.1);
  border-color: rgba(248, 81, 73, 0.3);
  color: #f85149;
}

/* Banner */
[data-theme="dark"] .matchup-banner {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}

/* ELO edge colors */
[data-theme="dark"] .matchup-elo-strip-value.batter-edge {
  color: #3fb950;
}
[data-theme="dark"] .matchup-elo-strip-value.pitcher-edge {
  color: #f85149;
}
[data-theme="dark"] .matchup-elo-strip-value.neutral-edge {
  color: var(--text-secondary);
}

/* ELO contrib up/down */
[data-theme="dark"] .matchup-elo-contrib-row strong.up {
  color: #3fb950;
}
[data-theme="dark"] .matchup-elo-contrib-row strong.down {
  color: #f85149;
}

/* 2026 season highlight */
[data-theme="dark"] .matchup-table th.matchup-season-2026-col {
  background: rgba(234, 179, 8, 0.15);
  color: #e3b341;
}
[data-theme="dark"] .matchup-table td.matchup-season-2026-cell {
  background: rgba(234, 179, 8, 0.08);
}
[data-theme="dark"] .matchup-table tr:hover td.matchup-season-2026-cell {
  background: rgba(234, 179, 8, 0.15);
}

/* ==========================================================================
   Theme Toggle Switch
   ========================================================================== */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: #f1f5f9;
  color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle:hover {
  background: var(--surface-hover);
}

.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
}

/* Light mode: show sun, hide moon */
.theme-toggle .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* Dark mode: show moon, hide sun */
[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ==========================================================================
   prefers-color-scheme: auto-dark when no explicit choice
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-page:        #0d1117;
    --bg-white:       #161b22;
    --border-line:    #30363d;
    --text-primary:   #e6edf3;
    --text-secondary: #8b949e;
    --primary:        #3b82f6;
    --primary-hover:  #60a5fa;
    --delta-up:       #3fb950;
    --delta-down:     #f85149;
    --shadow-sm:      0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-modern:  0 1px 4px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --shadow-lg:      0 10px 20px -3px rgb(0 0 0 / 0.5), 0 4px 8px -4px rgb(0 0 0 / 0.4);
    --surface-raised: #1c2333;
    --surface-hover:  #1f2937;
    --glow-accent:    rgba(59, 130, 246, 0.15);
  }
}