/* Dark theme. Loaded after feature styles and before the shared page header.

   Every page fixes data-theme="dark" on its root element. These rules are
   always active. Three parts, in order:

   1. The dark rules that used to be scattered through styles.css, panels.css
      and team-page.css, moved here unchanged and in their original order.
   2. Design tokens: one scale for type, radius and spacing, and the colours
      every component draws from.
   3. Shared components: panels, headings, tables, badges and controls, styled
      once so every page matches.

   Chart palettes (--ta-*, --dist-*, --statistics-plot-*) stay beside their
   charts in lib/ and features/, which define both themes for them. */

/* ---- moved from styles/styles.css ---- */
:root[data-theme="dark"] .fixtures-view #workspace { background: var(--surface); }
:root[data-theme="dark"] .fixture-matchweek-row td,
:root[data-theme="dark"] .fixture-matchweek-row:hover td { border-color: var(--matchweek-border); background: var(--matchweek-bg); color: var(--matchweek-text); }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5f1f8;
  --muted: #a99cb3;
  --paper: #0d0914;
  --line: #3a2c49;
  --accent: #b785f5;
  --white: #171020;
  --rail: #120a1d;
  --surface: #171020;
  --surface-raised: #21172d;
  --surface-soft: #21172d;
  --surface-hover: #281c35;
  --field: #130d1b;
  --focus: #cba7fa;
  --zebra-purple: #281a35;
  --zebra-light: #1d1427;
  --zebra-hover: #342246;
  --matchweek-bg: #3a2450;
  --matchweek-border: #563770;
  --matchweek-text: #dbc1f3;
  /* Win, draw, loss: one palette for chips, charts and the live table. */
  --result-win: #3fd89a;
  --result-draw: #f2cb4c;
  --result-loss: #ff7a73;
}
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] select:focus-visible,
:root[data-theme="dark"] [tabindex]:focus-visible { outline-color: var(--focus); }
:root[data-theme="dark"] .badge,
:root[data-theme="dark"] .stats,
:root[data-theme="dark"] .tier-method,
:root[data-theme="dark"] .detail-summary > div,
:root[data-theme="dark"] .home-panel,
:root[data-theme="dark"] .detailed-standings,
:root[data-theme="dark"] .tier-lane,
:root[data-theme="dark"] .team-panel,
:root[data-theme="dark"] .builder-pitch-panel,
:root[data-theme="dark"] .builder-pool { background: var(--surface); }
:root[data-theme="dark"] .filters,
:root[data-theme="dark"] .builder-toolbar { background: var(--surface-soft); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select { border-color: var(--line); background: var(--field); color: var(--ink); }
:root[data-theme="dark"] .table-container,
:root[data-theme="dark"] .table-container table,
:root[data-theme="dark"] .history-table,
:root[data-theme="dark"] .builder-table-wrap { background: var(--surface); }
:root[data-theme="dark"] th,
:root[data-theme="dark"] .tier-columns,
:root[data-theme="dark"] .tier-lane-heading { background: var(--surface-raised); }
:root[data-theme="dark"] td,
:root[data-theme="dark"] .player-row,
:root[data-theme="dark"] .team-game-row,
:root[data-theme="dark"] .team-best-player { border-bottom-color: var(--line); }
:root[data-theme="dark"] tbody tr:hover,
:root[data-theme="dark"] .player-row:hover,
:root[data-theme="dark"] .player-row:focus-visible,
:root[data-theme="dark"] .team-game-row:hover,
:root[data-theme="dark"] .team-logo-link:hover { background: var(--surface-hover); }
:root[data-theme="dark"] .player-row,
:root[data-theme="dark"] .builder-player-button,
:root[data-theme="dark"] .player-name-button { color: var(--ink); }
:root[data-theme="dark"] .player-row { background: var(--surface); }
:root[data-theme="dark"] .eyebrow { color: #c29af4; }
:root[data-theme="dark"] a.team-link:hover { color: #cba7fa; }
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .sidebar-toggle { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
:root[data-theme="dark"] .secondary:hover,
:root[data-theme="dark"] .sidebar-toggle:hover { background: #30213f; }
:root[data-theme="dark"] .primary { background: var(--accent); color: #160d20; }
:root[data-theme="dark"] .primary:hover { background: #cba7fa; }
:root[data-theme="dark"] .primary span { color: #160d20; }
:root[data-theme="dark"] .page-number[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: #160d20; }
:root[data-theme="dark"] .empty-state { border-color: #524160; background: var(--surface); }
:root[data-theme="dark"] .empty-state .file-symbol,
:root[data-theme="dark"] .file-list code,
:root[data-theme="dark"] .context-note { border-color: var(--line); background: var(--surface-raised); }
:root[data-theme="dark"] .club-logo-fallback { background: var(--surface-raised); }
:root[data-theme="dark"] dialog { box-shadow: 0 30px 90px #0009; }
:root[data-theme="dark"] dialog::backdrop { background: #08040bcf; }
:root[data-theme="dark"] .rail.is-open { box-shadow: 12px 0 40px #0008; }
:root[data-theme="dark"] .rail.is-pinned { box-shadow: 12px 0 40px #000a; }
:root[data-theme="dark"] .rail-label,
:root[data-theme="dark"] .nav-button { color: #c7bbd0; }
:root[data-theme="dark"] .nav-button.active { background: #352348; color: #d9baff; }
:root[data-theme="dark"] .brand-mark { border-color: #70538a; }
:root[data-theme="dark"] .matchweek-controls select,
:root[data-theme="dark"] .fixture-status { background: var(--surface-raised); }
:root[data-theme="dark"] .home-match { background: #130d1b; }
:root[data-theme="dark"] .detailed-points { background: transparent; }
:root[data-theme="dark"] .tier-toolbar { background: var(--surface-soft); }
:root[data-theme="dark"] .tier-search-control { border-color: var(--line); background: var(--field); }
:root[data-theme="dark"] .tier-page-number[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: #160d20; }

/* ---- moved from styles/panels.css ---- */
:root[data-theme="dark"] .builder-recommendation-best { color: #7fd6a2; }
:root[data-theme="dark"] .builder-player-selected { background: #281c35; }
:root[data-theme="dark"] .builder-player-button:hover { color: #cba7fa; }
:root[data-theme="dark"] .builder-player-add { background: transparent; }
:root[data-theme="dark"] .builder-player-add:hover { background: #402b51; }
:root[data-theme="dark"] .builder-player-details-row > td { background: #150d20; }
:root[data-theme="dark"] .builder-player-details { background: #1b1126; }
:root[data-theme="dark"] .builder-fantasy-breakdown thead th { background: #24172f; }
:root[data-theme="dark"] .builder-fantasy-breakdown tbody th { background: transparent; }
:root[data-theme="dark"] .builder-availability-caution { background: #3d2730; color: #ffc395; border-color: #6b4446; }
:root[data-theme="dark"] .builder-detail-add { background: var(--accent); border-color: var(--accent); color: #120b1a; }
:root[data-theme="dark"] .builder-remove { background: #21172d; color: #ff9b91; }
:root[data-theme="dark"] .builder-remove:hover { background: #40233a; }
:root[data-theme="dark"] .statistics-card-scorers { --statistics-accent: #a97bd0; }
:root[data-theme="dark"] .statistics-card-assists { --statistics-accent: #7b8cff; }
:root[data-theme="dark"] .statistics-card-fantasy { --statistics-accent: #8fb6e0; }
:root[data-theme="dark"] .statistics-players { border-top-color: #e8c33a; }
:root[data-theme="dark"] .statistics-reserved { border-top-color: #c9c4e6; }
:root[data-theme="dark"] .statistics-player-button:hover { color: #cba7fa; }
:root[data-theme="dark"] { --statistics-plot-line: #9c8bf0; --statistics-plot-fill: #9c8bf03d;
  --statistics-plot-compare: #60c6ff; --statistics-plot-compare-fill: #60c6ff33;
  --statistics-plot-compare-faded: #60c6ff17; }
:root[data-theme="dark"] .statistics-profile { border-top-color: #c9c4e6; }
:root[data-theme="dark"] .statistics-facts { border-top-color: #ff7b73; }
:root[data-theme="dark"] .statistics-timeline { border-top-color: #e6d5a8; }
:root[data-theme="dark"] .statistics-ratings { border-top-color: #a9cfe6; }

/* ---- moved from features/team-page/team-page.css ---- */
:root[data-theme="dark"] .team-matchday { border-color: #3c3154; background: #21172d; }
:root[data-theme="dark"] .team-matchday label { color: #b9a4d0; }
:root[data-theme="dark"] .team-game-row.selected { background: #312041; box-shadow: inset 3px 0 var(--accent); }
:root[data-theme="dark"] .team-score { border-color: #4a334f; background: #25182c; }
:root[data-theme="dark"] .match-best { border-color: #4a334f; }
:root[data-theme="dark"] .overall-players .team-best-player { border-color: var(--line); background: #1c1326; }
:root[data-theme="dark"] .team-rating { background: #342348; color: #d6b8fa; }


/* ======================================================================
   2. Design tokens
   One scale for every page. Components below read these instead of
   carrying their own numbers, which is what lets every page match.
   ====================================================================== */
:root[data-theme="dark"] {
  /* Type */
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 18px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  /* Shape and spacing */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Panels: one accent rule on top-level panels, a plain line on blocks nested inside them. */
  --panel-bg: var(--surface);
  --panel-rule: #8b5ad3;
  --block-bg: var(--surface-raised);

  /* Tables, all taken from Puan Durumu, the reference table. */
  --table-head-bg: var(--surface-raised);
  --table-head-ink: var(--muted);
  --row-odd: var(--zebra-purple);
  --row-even: var(--zebra-light);
  --row-hover: var(--zebra-hover);
  --row-selected: #3b2654;
  --row-selected-rule: var(--accent);
  --cell-pad: 13px 15px;
  --cell-pad-compact: 9px 12px;
}


/* ======================================================================
   3. Shared components
   ====================================================================== */

/* Panels ----------------------------------------------------------------
   Every top-level card on every page: same surface, same corner, the same
   accent rule on top. The colour used to vary per card with no meaning. */
:root[data-theme="dark"] .home-panel,
:root[data-theme="dark"] .detailed-standings,
:root[data-theme="dark"] .fixtures-view #workspace,
:root[data-theme="dark"] .matchweek-standings,
:root[data-theme="dark"] .matchweek-fixtures-panel,
:root[data-theme="dark"] .builder-pitch-panel,
:root[data-theme="dark"] .builder-pool,
:root[data-theme="dark"] .builder-summary,
:root[data-theme="dark"] .statistics-card,
:root[data-theme="dark"] .statistics-players,
:root[data-theme="dark"] .statistics-reserved,
:root[data-theme="dark"] .statistics-profile,
:root[data-theme="dark"] .team-analysis,
:root[data-theme="dark"] .team-panel {
  border: 1px solid var(--line);
  border-top: 3px solid var(--panel-rule);
  border-radius: var(--radius-lg);
  background: var(--panel-bg);
}

/* Blocks nested inside a panel: raised surface, no second accent. */
:root[data-theme="dark"] .statistics-radar,
:root[data-theme="dark"] .statistics-radar-detailed,
:root[data-theme="dark"] .statistics-facts,
:root[data-theme="dark"] .statistics-distribution,
:root[data-theme="dark"] .statistics-timeline,
:root[data-theme="dark"] .statistics-ratings,
:root[data-theme="dark"] .builder-recommendations,
:root[data-theme="dark"] .ta-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--block-bg);
}

/* Headings --------------------------------------------------------------
   Seven heading patterns grew up across the pages; in dark they all read as
   one: panel titles at one size, block titles as small muted labels. */
:root[data-theme="dark"] .home-panel-heading h2,
:root[data-theme="dark"] .panel-heading h2,
:root[data-theme="dark"] .builder-heading h2,
:root[data-theme="dark"] .builder-pitch-heading h3,
:root[data-theme="dark"] .builder-pool-heading h3,
:root[data-theme="dark"] .matchweek-analysis > h2,
:root[data-theme="dark"] #matchweek-workspace h2,
:root[data-theme="dark"] .team-panel-title h2 {
  color: var(--ink);
  font-size: var(--text-lg);
  font-weight: var(--weight-strong);
  letter-spacing: -0.2px;
  line-height: 1.3;
}
:root[data-theme="dark"] .statistics-profile h4,
:root[data-theme="dark"] .ta-block h4,
:root[data-theme="dark"] .statistics-detailed-heading h4 {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  letter-spacing: 0.3px;
}
:root[data-theme="dark"] .eyebrow {
  font-size: var(--text-2xs);
  letter-spacing: 2px;
}

/* Badges ------------------------------------------------------------------ */
:root[data-theme="dark"] .badge {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--text-xs);
}

/* Tables ------------------------------------------------------------------
   Every table reads like Puan Durumu: a raised header row, 1px row lines,
   and rows alternating purple and dark purple. */
:root[data-theme="dark"] main thead th,
:root[data-theme="dark"] dialog thead th {
  border-bottom: 1px solid var(--line);
  background: var(--table-head-bg);
  color: var(--table-head-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
:root[data-theme="dark"] main tbody td,
:root[data-theme="dark"] dialog tbody td {
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}

/* Zebra rows. The background sits on the cells, so no cell rule elsewhere
   can paint over it. Every row-state rule below repeats the same :is(main,
   dialog) scope, so it outranks position and wins by coming later. */
:root[data-theme="dark"] main tbody > tr:nth-child(odd) > td,
:root[data-theme="dark"] dialog tbody > tr:nth-child(odd) > td { background: var(--row-odd); }
:root[data-theme="dark"] main tbody > tr:nth-child(even) > td,
:root[data-theme="dark"] dialog tbody > tr:nth-child(even) > td { background: var(--row-even); }
:root[data-theme="dark"] main tbody > tr:hover > td,
:root[data-theme="dark"] dialog tbody > tr:hover > td { background: var(--row-hover); }

/* Tables whose rows are interrupted by group headings (fixtures, the tier
   list) number their stripes in JavaScript; those classes win over position. */
:root[data-theme="dark"] :is(main, dialog) tbody > tr.zebra-purple > td { background: var(--row-odd); }
:root[data-theme="dark"] :is(main, dialog) tbody > tr.zebra-light > td { background: var(--row-even); }
:root[data-theme="dark"] :is(main, dialog) tbody > tr.zebra-purple:hover > td,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.zebra-light:hover > td { background: var(--row-hover); }
:root[data-theme="dark"] :is(main, dialog) tbody > tr.fixture-matchweek-row > td,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.fixture-matchweek-row:hover > td {
  border-color: var(--matchweek-border);
  background: var(--matchweek-bg);
  color: var(--matchweek-text);
}

/* Row states stay visible on top of the stripes. */
:root[data-theme="dark"] :is(main, dialog) tbody > tr.statistics-row-selected > td,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.builder-player-selected > td,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.matchweek-selected > td {
  background: var(--row-selected);
}
:root[data-theme="dark"] :is(main, dialog) tbody > tr.statistics-row-selected > td:first-child,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.builder-player-selected > td:first-child {
  box-shadow: inset 3px 0 var(--row-selected-rule);
}
:root[data-theme="dark"] :is(main, dialog) tbody > tr.builder-player-details-row > td,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.builder-player-details-row:hover > td {
  background: var(--block-bg);
}
:root[data-theme="dark"] :is(main, dialog) tbody td.no-results { background: var(--panel-bg); }

/* Cell spacing: full-width tables use Puan Durumu's spacing, tables inside
   cards and side columns a compact version of it. Cells with a spacing of
   their own (the European-place marker, the builder's detail row, the
   no-results message, Maç Haftası's fixtures, which share their width with
   the standings column) keep it. */
:root[data-theme="dark"] :is(.home-panel, .detailed-standings, .fixtures-view #workspace, .tier-ranking-table, .history-table) :is(th, td):not(.no-results) {
  padding: var(--cell-pad);
}
:root[data-theme="dark"] :is(.statistics-table, .statistics-metric-table, .builder-table, .builder-recommendations table, .matchweek-standings table) :is(th, td):not(.no-results) {
  padding: var(--cell-pad-compact);
}
/* The three ranking tables on both statistics pages share one spacing scheme. */
:root[data-theme="dark"] .statistics-leaders .statistics-table :is(th, td):not(.no-results) {
  padding: 12px 10px;
}
:root[data-theme="dark"] .statistics-leaders .statistics-table :is(th, td):first-child {
  width: 36px;
  padding-right: 4px;
  text-align: center;
}
:root[data-theme="dark"] .statistics-leaders .statistics-table td:nth-child(2) {
  padding-left: 12px;
  text-align: left;
}
:root[data-theme="dark"] .statistics-leaders .statistics-table th:nth-child(2) {
  padding-left: 54px;
  text-align: left;
}
:root[data-theme="dark"] :is(#statistics-workspace, #team-statistics-workspace) .statistics-player-list-table :is(th, td):not(.no-results) {
  height: 42px;
  padding: 5px 7px;
  border-inline: 0;
  font-size: 11px;
  white-space: nowrap;
}
:root[data-theme="dark"] #statistics-workspace .statistics-player-list-table tbody > tr.statistics-row-selected > td {
  box-shadow: none;
}
/* Compared players: a rule in each player's colour marks which row is which. */
:root[data-theme="dark"] #statistics-workspace .statistics-player-list-table tbody > tr.statistics-row-selected > td:first-child {
  box-shadow: inset 3px 0 var(--statistics-plot-line);
}
:root[data-theme="dark"] #statistics-workspace .statistics-player-list-table tbody > tr.statistics-row-compare > td:first-child {
  box-shadow: inset 3px 0 var(--statistics-plot-compare);
}
:root[data-theme="dark"] #team-statistics-workspace .statistics-team-list-table :is(th, td):not(.no-results) {
  height: 42px;
  padding: 5px 7px;
  border-inline: 0;
  font-size: 11px;
  white-space: nowrap;
}
:root[data-theme="dark"] #team-statistics-workspace .statistics-team-list-table tbody > tr.statistics-row-selected > td {
  box-shadow: none;
}
:root[data-theme="dark"] .builder-table tbody > tr.builder-player-details-row > td {
  padding: 0 var(--space-3) var(--space-3);
}

/* Maç Haftası: the analysis opens as a row under its match. It is part of the
   selected match rather than another stripe, and a compact block inside it. */
:root[data-theme="dark"] :is(main, dialog) tbody > tr.matchweek-details-row > td,
:root[data-theme="dark"] :is(main, dialog) tbody > tr.matchweek-details-row:hover > td { background: var(--block-bg); }
:root[data-theme="dark"] #matchweek-workspace .matchweek-analysis {
  border-left: 3px solid var(--row-selected-rule);
  background: var(--block-bg);
}
:root[data-theme="dark"] #matchweek-workspace .matchweek-analysis > h2 {
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 0.3px;
}