/* ════════════════════════════════════════════════════════════
   GLOBAL DARK THEME — extends dark mode to remaining pages.
   Home, Training, and Analysis (#pg-att) are handled in their
   own CSS files. This covers: Games (#pg-sat), Pitch, Squad,
   Assessments, Settings, History.
   ════════════════════════════════════════════════════════════ */

/* ── 0. Games page (#pg-sat) CSS variable overrides ── */
body:has(#pg-sat.on) {
  --bg:      #000;
  --surf:    #1c1c1e;
  --surf2:   #2c2c2e;
  --bdr:     rgba(255,255,255,.09);
  --cream:   #ffffff;
  --muted:   rgba(255,255,255,.50);
  --dim:     rgba(22,163,74,.22);
  --tg-bdg-bg:  rgba(22,163,74,.25);
  --tg-bdg-tx:  #4ade80;
  --tg-bdr:     rgba(74,222,128,.4);
  --tw-bdg-bg:  rgba(71,85,105,.22);
  --tw-bdg-tx:  rgba(255,255,255,.70);
  --tw-bdr:     rgba(148,163,184,.3);
  --tb-bdg-bg:  rgba(59,130,246,.22);
  --tb-bdg-tx:  #93c5fd;
  --tb-bdr:     rgba(147,197,253,.35);
  --off-bg:  #2c2c2e;
  --off-col: rgba(255,255,255,.35);
  --on-bg:   rgba(22,163,74,.15);
  --on-bdr:  rgba(22,163,74,.4);
}
/* White-team player chips use hardcoded dark colour — fix for dark mode */
body:has(#pg-sat.on) .sb-player.team-W,
body:has(#pg-sat.on) .col-W .sb-player.team-Both {
  color: rgba(255,255,255,.75);
}
body:has(#pg-sat.on) .sdl-pill--finished {
  background: #2c2c2e;
  color: rgba(255,255,255,.6);
  border-color: rgba(255,255,255,.1);
}

/* ── 1. Body backgrounds ── */
body:has(#pg-pitch.on),
body:has(#pg-panel.on),
body:has(#pg-assessments.on),
body:has(#pg-settings.on),
body:has(#pg-hist.on) {
  background: #000;
}

/* ── 2. Dark nav — mirrors the pattern in base.css ── */
body:has(#pg-pitch.on) nav,
body:has(#pg-panel.on) nav,
body:has(#pg-assessments.on) nav,
body:has(#pg-settings.on) nav,
body:has(#pg-hist.on) nav {
  background: rgba(18,18,20,0.82);
  border-color: rgba(255,255,255,0.1);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.25);
}
body:has(#pg-pitch.on) .tab,
body:has(#pg-panel.on) .tab,
body:has(#pg-assessments.on) .tab,
body:has(#pg-settings.on) .tab,
body:has(#pg-hist.on) .tab {
  color: rgba(255,255,255,0.45);
}
body:has(#pg-pitch.on) .tab.on,
body:has(#pg-panel.on) .tab.on,
body:has(#pg-assessments.on) .tab.on,
body:has(#pg-settings.on) .tab.on,
body:has(#pg-hist.on) .tab.on {
  color: #4ade80;
  background: rgba(255,255,255,0.13);
  box-shadow:
    0 2px 12px rgba(74,222,128,0.22),
    0 1px 4px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* ── 3. CSS variable overrides ──────────────────────────────
   Anything using var(--surf), var(--cream), etc. will auto-
   switch to the dark palette. No per-class rewrites needed
   for the bulk of card/text/border styles.
   ──────────────────────────────────────────────────────────── */
body:has(#pg-pitch.on),
body:has(#pg-panel.on),
body:has(#pg-assessments.on),
body:has(#pg-settings.on),
body:has(#pg-hist.on) {
  --bg:      #000;
  --surf:    #1c1c1e;
  --surf2:   #2c2c2e;
  --bdr:     rgba(255,255,255,.09);
  --cream:   #ffffff;
  --muted:   rgba(255,255,255,.50);
  --dim:     rgba(22,163,74,.22);
  /* Team designation badge tokens */
  --tg-bdg-bg:  rgba(22,163,74,.25);
  --tg-bdg-tx:  #4ade80;
  --tg-bdr:     rgba(74,222,128,.4);
  --tw-bdg-bg:  rgba(71,85,105,.22);
  --tw-bdg-tx:  rgba(255,255,255,.70);
  --tw-bdr:     rgba(148,163,184,.3);
  --tb-bdg-bg:  rgba(59,130,246,.22);
  --tb-bdg-tx:  #93c5fd;
  --tb-bdr:     rgba(147,197,253,.35);
  /* Toggle on/off tokens */
  --off-bg:  #2c2c2e;
  --off-col: rgba(255,255,255,.35);
  --on-bg:   rgba(22,163,74,.15);
  --on-bdr:  rgba(22,163,74,.4);
}

/* ── 4. Pitch page (#pg-pitch) ─────────────────────────────
   The pitch field itself uses dark greens — already correct.
   Overrides target only the light-surface elements.
   ──────────────────────────────────────────────────────────── */

/* GAA pin markers (substitution view) */
#pg-pitch .gaa-pin--team-g {
  background: rgba(22,163,74,.28);
  border-color: rgba(74,222,128,.65);
}
#pg-pitch .gaa-pin--team-g .gaa-pin-name { color: #4ade80; }
#pg-pitch .gaa-pin--team-g .gaa-pin-pos  { color: rgba(74,222,128,.6); }

#pg-pitch .gaa-pin--team-w {
  background: rgba(71,85,105,.35);
  border-color: rgba(148,163,184,.55);
}
#pg-pitch .gaa-pin--team-w .gaa-pin-name { color: rgba(255,255,255,.85); }
#pg-pitch .gaa-pin--team-w .gaa-pin-pos  { color: rgba(255,255,255,.45); }

/* Bench players — rgba(0,0,0,.06) border is invisible on dark */
#pg-pitch .bench-player {
  border-color: rgba(255,255,255,.1);
}
#pg-pitch .bench-player:hover {
  border-color: rgba(22,163,74,.5);
  background: #2c2c2e;
}

/* Sub-pending banner */
#pg-pitch .sub-pending { color: #fff; }

/* Breadcrumb strip */
#pg-pitch .pitch-breadcrumb {
  background: #1c1c1e;
  border-bottom-color: rgba(255,255,255,.08);
}
#pg-pitch .pbc-date,
#pg-pitch .pbc-team  { color: rgba(255,255,255,.7); }
#pg-pitch .pbc-sep   { color: rgba(255,255,255,.25); }

/* ── 5. Squad page (#pg-panel) ─────────────────────────────
   Nearly all styles use var() tokens.
   Only hardcoded rgba(0,0,0,.06) card borders need fixing.
   ──────────────────────────────────────────────────────────── */
#pg-panel .p-card,
#pg-panel .t-card,
#pg-panel .match-card,
#pg-panel .stat-card,
#pg-panel .settings-section {
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* White team player badge on dark */
#pg-panel .des-W {
  background: rgba(71,85,105,.22);
  color: rgba(255,255,255,.70);
  border-color: rgba(148,163,184,.3);
}

/* Not-played attendance dot */
#pg-panel .wd.n {
  background: #2c2c2e;
  color: rgba(255,255,255,.35);
}

/* ── 6. Assessments page (#pg-assessments) ─────────────────── */

#pg-assessments { background: #000; }

/* Page header bar */
#pg-assessments .pg-hd {
  background: #1c1c1e;
  border-bottom-color: rgba(255,255,255,.08);
}
#pg-assessments .pg-hd-title { color: #fff; }
#pg-assessments .pg-hd-sub   { color: rgba(255,255,255,.45); }

/* Sport selector segmented control */
#pg-assessments .as-sport-bar {
  background: #1c1c1e;
  border-color: rgba(255,255,255,.1);
}
#pg-assessments .as-sport-btn { color: rgba(255,255,255,.45); }
#pg-assessments .as-sport-btn.on {
  background: #2c2c2e;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1);
}

/* Session history cards */
#pg-assessments .as-session-card {
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* Section labels */
#pg-assessments .as-section-hd h3 { color: rgba(255,255,255,.4); }

/* Locked player card (amber highlight) */
#pg-assessments .asr-player-card.locked {
  border-color: rgba(245,158,11,.3);
  background: rgba(245,158,11,.08);
}
#pg-assessments .asr-player-card.locked .asr-jersey {
  background: rgba(245,158,11,.18);
  color: #fbbf24;
}
#pg-assessments .asr-pmeta-locked { color: #fbbf24; }

/* Sync indicator text */
#pg-assessments .as-sync-row { color: rgba(255,255,255,.4); }

/* ── 7. Settings page (#pg-settings) ──────────────────────── */

#pg-settings { background: #000; }
#pg-settings-inner .settings-section {
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}

/* ── 8. History page (#pg-hist) ────────────────────────────── */

#pg-hist { background: #000; }
#pg-hist-inner .settings-section,
#pg-hist-inner .stat-card,
#pg-hist-inner .match-card {
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}