/* ============================================================
   data-list.css — unified div-grid component for all data tables.
   Replaces .premium-table, .premium-data-table, .fs-table, and
   the inline <style> blocks on per-template tables.

   Markup contract:
     <div class="data-list" role="table" style="--data-list-cols: 32px 1fr ...">
       <div class="data-row data-row--header" role="row">
         <span class="data-cell data-cell--head" role="columnheader">…</span>
       </div>
       <div class="data-row" role="row">
         <span class="data-cell …" role="cell">…</span>
       </div>
     </div>

   Tokens: theme.css is the source of truth. No hex values here.
   ============================================================ */

/* ----- Wrapper ----- */
.data-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border-radius: var(--te-radius-md);
  overflow: hidden;
}

.data-list-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ----- Row base (shared with .home-match-row for matches list) ----- */
.data-row,
.home-match-list > .home-match-row {
  position: relative;
}

.data-row {
  display: grid;
  grid-template-columns: var(--data-list-cols, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--on-surface);
  background: var(--surface);
  text-decoration: none;
  transition: background 140ms ease;
}

/* Anchor variant — entire row is a link (parity with .home-match-row) */
.data-row--link { cursor: pointer; }
.data-row--link:hover { color: var(--on-surface); }

/* ----- Row striping (surface ↔ surface-container-lowest) -----
   Applied to matches list as well so all data displays share one rhythm.
   `:not()` exclusions: live/ft match rows carry an explicit gradient — we must
   not blanket-stripe over them. Zone-tinted rows are handled below. */
.data-list > .data-row:nth-child(even),
.home-match-list > .home-match-row:nth-child(even):not(.home-match-row--live):not(.home-match-row--ft) {
  background: var(--surface-container-lowest);
}

.data-row:hover {
  background: var(--surface-container-high);
}

/* ----- Header row ----- */
.data-row--header {
  background: var(--surface-container-low);
  cursor: default;
}
.data-row--header:hover { background: var(--surface-container-low); }
.data-list > .data-row--header:nth-child(even) { background: var(--surface-container-low); }

.data-list--sticky-header .data-row--header {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ----- Compact density ----- */
.data-list--compact .data-row { padding: 8px 12px; gap: 6px; }
.data-list--compact .data-cell { font-size: 0.75rem; }

/* ----- Cell base ----- */
.data-cell {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Header cells — Label-MD / SM scale per DESIGN.md §3 */
.data-cell--head {
  font-size: var(--te-label-size);
  font-weight: var(--te-label-weight);
  letter-spacing: var(--te-label-spacing);
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* Alignment atoms (replace Bootstrap text-center/text-end inside .data-list) */
.data-cell--center { justify-content: center; text-align: center; }
.data-cell--end    { justify-content: flex-end; text-align: right; }

/* Secondary / meta text */
.data-cell--meta { color: var(--on-surface-variant); font-weight: 500; }

/* Inline link inside a cell (keeps the surrounding cell typography) */
.data-cell a,
.data-cell--player.data-row__link,
.data-cell--team.data-row__link { color: inherit; text-decoration: none; }
.data-cell a:hover { color: var(--primary-container); }

/* ----- Stat cell ----- */
.data-cell--stat {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ----- Rank cell + badge ----- */
.data-cell--rank {
  justify-content: center;
}
.data-cell__rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--te-radius-full);
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}

/* Top-3 medal tints — full-row background + badge accent.
   Tokens: gold = --te-caution, silver = --outline, bronze = --te-win.
   (Caution mustard reads more like gold than the live-red --error.) */
.data-row--rank-1 { background: color-mix(in srgb, var(--te-caution) 8%, var(--surface)); }
.data-row--rank-2 { background: color-mix(in srgb, var(--outline) 10%, var(--surface)); }
.data-row--rank-3 { background: color-mix(in srgb, var(--te-win) 7%, var(--surface)); }
.data-list > .data-row--rank-1:nth-child(even) { background: color-mix(in srgb, var(--te-caution) 11%, var(--surface)); }
.data-list > .data-row--rank-2:nth-child(even) { background: color-mix(in srgb, var(--outline) 13%, var(--surface)); }
.data-list > .data-row--rank-3:nth-child(even) { background: color-mix(in srgb, var(--te-win) 10%, var(--surface)); }
.data-row--rank-1 .data-cell__rank-badge { background: var(--te-caution); color: var(--surface-lowest); }
.data-row--rank-2 .data-cell__rank-badge { background: color-mix(in srgb, var(--outline) 70%, var(--on-surface) 30%); color: var(--surface-lowest); }
.data-row--rank-3 .data-cell__rank-badge { background: var(--te-win); color: var(--surface-lowest); }

/* Rank change arrow (up / down / same) — also retained class `.standings-rank-delta`
   for live_standings.js compatibility (queried via `.querySelector('.standings-rank-delta')`) */
.data-cell__rank-change,
.standings-rank-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}
.data-cell__rank-change--up   { color: var(--te-win); }
.data-cell__rank-change--down { color: var(--error); }
.data-cell__rank-change--same { color: var(--on-surface-variant); }
.standings-rank-num { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ----- Team cell ----- */
.data-cell--team {
  gap: 10px;
  font-weight: 700;
}
.data-cell__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  overflow: visible;
}
.data-cell__logo img {
  width: auto;
  height: 28px;
  max-width: 44px;
  object-fit: contain;
}
.data-cell__logo--placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-container-high);
  font-size: 0.5625rem;
  font-weight: 800;
  color: var(--on-surface-variant);
}
.data-cell__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.data-cell__sublabel {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}

/* ----- Player cell (avatar + name + meta) ----- */
.data-cell--player {
  gap: 10px;
}
.data-cell__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-container-high);
  overflow: hidden;
}
.data-cell__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.data-cell__avatar--placeholder {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--on-surface-variant);
}
.data-cell__player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.data-cell__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--on-surface-variant);
  letter-spacing: 0.02em;
}
.data-cell__flag {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  color: var(--on-surface-variant);
  letter-spacing: 0.04em;
}

/* ----- Position pill ----- */
.data-cell__position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 18px;
  padding: 0 6px;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--te-radius-sm);
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
  color: var(--on-surface-variant);
}
.data-cell__position--gk  { background: color-mix(in srgb, var(--te-caution) 18%, transparent); color: var(--te-caution); }
.data-cell__position--def { background: color-mix(in srgb, var(--primary-container) 14%, transparent); color: var(--primary-container); }
.data-cell__position--mid { background: color-mix(in srgb, var(--te-win) 14%, transparent); color: var(--te-win); }
.data-cell__position--fwd { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }

/* ----- Score pill (W/D/L outcome — used by standings live SCR column) -----
   Both vocabularies are styled: `.data-cell__score-pill--*` for new templates,
   and `.standings-mc-score--*` because live_standings.js writes those classes
   into the DOM. Keep the rules unified so there's a single source of truth. */
.data-cell--score { justify-content: center; }
.data-cell__score-pill,
.standings-mc-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 3px 8px;
  border-radius: var(--te-radius-sm);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--surface-container-high);
  color: var(--on-surface);
}
.data-cell__score-pill--win,  .standings-mc-score--win  { background: var(--live-score-pill-win-bg);  color: var(--live-score-pill-win-fg); }
.data-cell__score-pill--lose, .standings-mc-score--lose { background: var(--live-score-pill-lose-bg); color: var(--live-score-pill-lose-fg); }
.data-cell__score-pill--draw, .standings-mc-score--draw { background: var(--live-score-pill-draw-bg); color: var(--live-score-pill-draw-fg); }
.data-cell__score-pill--empty { color: var(--on-surface-variant); background: transparent; font-weight: 500; }

/* Standings score-pill wrappers (JS writes these — no-underline anchor + dash placeholder) */
.standings-mc-score-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}
.standings-mc-score-link:hover { color: inherit; }
.standings-mc-score-empty {
  color: var(--on-surface-variant);
  font-weight: 500;
  opacity: 0.5;
}
.standings-mc-score-sep {
  display: inline-block;
  width: 4px;
}

/* ----- Form cell (W/D/L last-5) — uses existing .form-badge classes ----- */
.data-cell--form { justify-content: center; gap: 3px; }

/* ----- Tier pill (Power Rankings: Elite / Strong / Average / Below) ----- */
.data-cell__tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--te-radius-full);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: color-mix(in srgb, var(--on-surface) 7%, transparent);
  color: var(--on-surface-variant);
}
.data-cell__tier-pill--elite   { background: color-mix(in srgb, var(--te-win) 16%, transparent);          color: var(--te-win); }
.data-cell__tier-pill--strong  { background: color-mix(in srgb, var(--primary-container) 14%, transparent); color: var(--primary-container); }
.data-cell__tier-pill--average { background: color-mix(in srgb, var(--on-surface) 8%, transparent);         color: var(--on-surface-variant); }
.data-cell__tier-pill--below   { background: color-mix(in srgb, var(--error) 14%, transparent);             color: var(--error); }

/* ----- Momentum (Power Rankings: 🔥 / ❄️) ----- */
.data-cell__momentum {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1;
}
.data-cell__momentum--hot  { color: var(--error); }
.data-cell__momentum--cold { color: var(--primary-container); }

/* ----- Confidence dot ----- */
.data-cell__confidence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--on-surface) 20%, transparent);
}
.data-cell__confidence-dot--high { background: var(--te-win); }
.data-cell__confidence-dot--med  { background: var(--te-caution); }
.data-cell__confidence-dot--low  { background: color-mix(in srgb, var(--on-surface) 22%, transparent); }
.data-cell__confidence-label {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-surface-variant);
}

/* ----- Sortable header ----- */
.data-cell--sortable {
  cursor: pointer;
  user-select: none;
  transition: color 140ms ease;
}
.data-cell--sortable:hover { color: var(--on-surface); }
.data-cell--sortable.is-sorted { color: var(--primary-container); }
.data-cell__sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.6875rem;
  opacity: 0.5;
  transition: opacity 140ms ease;
}
.data-cell--sortable.is-sorted .data-cell__sort-arrow { opacity: 1; }

/* ----- Champion trophy ----- */
.data-cell__champion-trophy {
  color: var(--te-caution);
  font-size: 0.875rem;
  margin-right: 4px;
}

/* ----- Section divider row (standings transition between qualification zones) ----- */
.data-row--divider {
  padding: 4px 14px;
  background: transparent;
  cursor: default;
}
.data-row--divider:hover { background: transparent; }
.data-list > .data-row--divider:nth-child(even) { background: transparent; }
.data-row--divider .data-cell {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--on-surface-variant);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
}

/* ----- Empty row ----- */
.data-row--empty { padding: 24px 14px; background: transparent; }
.data-row--empty:hover { background: transparent; }
.data-list > .data-row--empty:nth-child(even) { background: transparent; }
.data-cell--empty {
  grid-column: 1 / -1;
  justify-content: center;
  color: var(--on-surface-variant);
  font-weight: 500;
  font-size: 0.8125rem;
}
.data-cell__empty {
  color: var(--on-surface-variant);
  font-weight: 500;
  opacity: 0.5;
}

/* ----- Qualification zone tints (standings) — left-edge accent via inset box-shadow,
   per the "No-Line" rule. Tokens live in theme.css:177-220. ----- */
.data-row--zone-cl                 { background: var(--standings-zone-cl-bg);                box-shadow: inset 3px 0 0 var(--standings-zone-cl-bar); }
.data-row--zone-cl-playoff         { background: var(--standings-zone-cl-playoff-bg);        box-shadow: inset 3px 0 0 var(--standings-zone-cl-playoff-bar); }
.data-row--zone-cl-eliminated      { background: var(--standings-zone-cl-eliminated-bg);     box-shadow: inset 3px 0 0 var(--standings-zone-cl-eliminated-bar); }
.data-row--zone-el                 { background: var(--standings-zone-el-bg);                box-shadow: inset 3px 0 0 var(--standings-zone-el-bar); }
.data-row--zone-ecl                { background: var(--standings-zone-ecl-bg);               box-shadow: inset 3px 0 0 var(--standings-zone-ecl-bar); }
.data-row--zone-relegation         { background: var(--standings-zone-relegation-bg);        box-shadow: inset 3px 0 0 var(--standings-zone-relegation-bar); }
.data-row--zone-playoff            { background: var(--standings-zone-playoff-bg);           box-shadow: inset 3px 0 0 var(--standings-zone-playoff-bar); }
.data-row--zone-promoted           { background: var(--standings-zone-promoted-bg);          box-shadow: inset 3px 0 0 var(--standings-zone-promoted-bar); }
.data-row--zone-promoted-playoff   { background: var(--standings-zone-promoted-playoff-bg);  box-shadow: inset 3px 0 0 var(--standings-zone-promoted-playoff-bar); }

/* Zone rows keep their tint even on even-stripe and hover */
.data-list > .data-row--zone-cl:nth-child(even),
.data-list > .data-row--zone-cl:hover                { background: var(--standings-zone-cl-bg); }
.data-list > .data-row--zone-cl-playoff:nth-child(even),
.data-list > .data-row--zone-cl-playoff:hover        { background: var(--standings-zone-cl-playoff-bg); }
.data-list > .data-row--zone-cl-eliminated:nth-child(even),
.data-list > .data-row--zone-cl-eliminated:hover     { background: var(--standings-zone-cl-eliminated-bg); }
.data-list > .data-row--zone-el:nth-child(even),
.data-list > .data-row--zone-el:hover                { background: var(--standings-zone-el-bg); }
.data-list > .data-row--zone-ecl:nth-child(even),
.data-list > .data-row--zone-ecl:hover               { background: var(--standings-zone-ecl-bg); }
.data-list > .data-row--zone-relegation:nth-child(even),
.data-list > .data-row--zone-relegation:hover        { background: var(--standings-zone-relegation-bg); }
.data-list > .data-row--zone-playoff:nth-child(even),
.data-list > .data-row--zone-playoff:hover           { background: var(--standings-zone-playoff-bg); }
.data-list > .data-row--zone-promoted:nth-child(even),
.data-list > .data-row--zone-promoted:hover          { background: var(--standings-zone-promoted-bg); }
.data-list > .data-row--zone-promoted-playoff:nth-child(even),
.data-list > .data-row--zone-promoted-playoff:hover  { background: var(--standings-zone-promoted-playoff-bg); }

/* ----- Live provisional pulse (standings while a match is in progress) -----
   Both classes styled: `.data-row--live-provisional` for new templates and
   `.standings-row--live-provisional` is set on rows server-side when a team
   has a live provisional rank. */
.data-row--live-provisional,
.standings-row--live-provisional {
  animation: data-row-live-pulse 2.2s ease-in-out infinite;
}
@keyframes data-row-live-pulse {
  0%, 100% { background: var(--te-live-provisional-bg); }
  50%      { background: var(--te-live-provisional-bg-strong); }
}

/* ----- Sticky-left first cell (match player stats) ----- */
.data-row .data-cell.is-sticky-left {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
.data-row--header .data-cell.is-sticky-left { z-index: 3; }

/* ----- Variant: "rankings" (Power Rankings) — visual parity helpers ----- */
.data-list--rankings .data-row { padding: 14px 14px; }

/* ----- Variant: "standings" — denser rows for full league table ----- */
.data-list--standings .data-row { padding: 10px 12px; }

/* ----- Variant: "stats" — for narrow stat cells, center alignment ----- */
.data-list--stats .data-cell--stat { justify-content: center; }

/* ----- Pagination (moved from .fs-pagination / .fs-page-btn) ----- */
.data-list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-container-low);
  border-radius: 0 0 var(--te-radius-md) var(--te-radius-md);
}
.data-list-pagination__info {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.data-list-pagination__controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.data-list-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: var(--te-radius-sm);
  background: transparent;
  border: none;
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.data-list-page-btn:hover { background: var(--surface-container-high); color: var(--on-surface); }
.data-list-page-btn.is-active { background: var(--primary-container); color: var(--surface-lowest); }
.data-list-page-btn:disabled { opacity: 0.4; cursor: default; }
.data-list-page-ellipsis {
  padding: 0 4px;
  color: var(--on-surface-variant);
  font-weight: 700;
}

/* ----- Responsive helpers: drop optional columns via grid-template swap ----- */
@media (max-width: 768px) {
  .data-row {
    grid-template-columns: var(--data-list-cols-md, var(--data-list-cols, 1fr));
    padding: 10px 12px;
    gap: 6px;
  }
  .data-cell {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .data-row {
    grid-template-columns: var(--data-list-cols-sm, var(--data-list-cols-md, var(--data-list-cols, 1fr)));
  }
}