/* ==========================================================================
   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;
}

/* ==========================================================================
   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);
  }
}