/* Team Standings tab — 1:1 visual port del v1 (`_standings_table.html.twig`
   + `app.css` ranges 17006-17100, 13360-13385, 13098-13145, 35731-35780,
   35982-36095, 2703-2760, 9045-9060, 36088-36140 for live badges).

   Token translation v1 → v2 (mirror overview):
     --bg-primary/--bg-card   → --color-surface
     --border-color           → --color-border
     --text-muted             → --color-text-muted
     --text-secondary         → --color-text-secondary
     --text-primary           → --color-text
     --accent-primary         → --color-accent
     --win-green              → --color-win
     --draw-gray              → --color-draw
     --lose-red               → --color-loss
     --live-red               → --color-live

   Fidelity: zonas literales v1 (#1e88e5, #ff9800, #26a69a, --color-live),
   data-view="complete|form" no operativo en MVP (toolbar interactivo
   diferido a 3.6.10). */

@layer components {
  /* ══════════════════════════════════════════════════════════════════
     SCROLL WRAPPER + TABLE FRAME
     ══════════════════════════════════════════════════════════════════ */

  .team-standings-wrapper {
    padding: 12px 0 20px;
  }

  .team-standings-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px;
    scrollbar-width: none;
  }

  .team-standings-scroll::-webkit-scrollbar {
    display: none;
  }

  .team-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 360px;
  }

  .team-standings-table thead th {
    padding: 8px 6px;
    color: var(--color-text-muted);
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
  }

  .team-standings-table th.st-team,
  .team-standings-table td.st-team {
    text-align: left;
    padding-left: 8px;
  }

  .team-standings-table tbody tr {
    border-bottom: 1px solid rgb(255 255 255 / 4%);
    transition: background 0.15s;
  }

  .team-standings-table tbody tr:hover {
    background: rgb(255 255 255 / 3%);
  }

  .team-standings-table tbody tr.current-team {
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }

  .team-standings-table tbody tr.current-team:hover {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  }

  .team-standings-table tbody tr.is-playing {
    background: rgb(239 68 68 / 4%);
  }

  .team-standings-table td {
    padding: 10px 6px;
    text-align: center;
    color: var(--color-text-secondary);
  }

  /* ══════════════════════════════════════════════════════════════════
     CELL CLASSES (.st-pos / .st-team / .st-stat / .st-pts / .st-form)
     ══════════════════════════════════════════════════════════════════ */

  .team-standings-table .st-pos {
    width: 36px;
    font-weight: 700;
  }

  .pos-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .current-team .pos-num {
    color: var(--color-accent);
  }

  .team-standings-table .st-team {
    min-width: 140px;
  }

  .st-team-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
  }

  .st-team-logo {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
  }

  .st-team-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .st-team-name {
    font-weight: 500;
    color: var(--color-text);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .current-team .st-team-name {
    color: var(--color-accent);
    font-weight: 700;
  }

  .st-team-link:hover .st-team-name {
    color: var(--color-accent);
  }

  .st-stat {
    font-variant-numeric: tabular-nums;
  }

  .st-stat .positive {
    color: var(--color-accent);
  }

  .st-stat .negative {
    color: var(--color-live);
  }

  .st-pts {
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .current-team .st-pts {
    color: var(--color-accent);
  }

  /* ══════════════════════════════════════════════════════════════════
     ZONE BORDERS (inset box-shadow 3px)
     ══════════════════════════════════════════════════════════════════ */

  .team-standings-table tbody tr.zone-champions td:first-child {
    box-shadow: inset 3px 0 0 #1e88e5;
  }

  .team-standings-table tbody tr.zone-europa td:first-child {
    box-shadow: inset 3px 0 0 #ff9800;
  }

  .team-standings-table tbody tr.zone-conference td:first-child {
    box-shadow: inset 3px 0 0 #26a69a;
  }

  .team-standings-table tbody tr.zone-relegation td:first-child {
    box-shadow: inset 3px 0 0 var(--color-live);
  }

  /* Second-tier domestic leagues (Championship, La Liga 2, 2. Bundesliga,
     Ligue 2 — top of table promotes, mid-top plays promotion playoffs,
     bottom drops). Colour pair: bright green for direct promotion,
     lime for the playoff band; relegation reuses --color-live. */
  .team-standings-table tbody tr.zone-promotion td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-promotion);
  }

  .team-standings-table tbody tr.zone-promotion-playoff td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-promotion-playoff);
  }

  /* European cups zones */
  .team-standings-table tbody tr.zone-cl-direct td:first-child {
    box-shadow: inset 3px 0 0 #1e88e5;
  }

  .team-standings-table tbody tr.zone-cl-playoff td:first-child {
    box-shadow: inset 3px 0 0 #ff9800;
  }

  .team-standings-table tbody tr.zone-cl-eliminated td:first-child {
    box-shadow: inset 3px 0 0 var(--color-text-muted);
  }

  /* Argentine derived-table zones (Tabla Anual): Campeón de Liga (gold) ·
     Libertadores grupos (green) · Libertadores repechaje (lime) ·
     Sudamericana (amber). Relegation reuses the shared red band above. */
  .team-standings-table tbody tr.zone-champion td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-arg-champion);
  }

  .team-standings-table tbody tr.zone-libertadores td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-libertadores);
  }

  .team-standings-table tbody tr.zone-libertadores-playoff td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-libertadores-playoff);
  }

  .team-standings-table tbody tr.zone-sudamericana td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-sudamericana);
  }

  /* Liga MX (Apertura/Clausura) regular phase: Liguilla directa a Cuartos
     (green) + Play-In (amber). No relegation band — descenso suspendido. */
  .team-standings-table tbody tr.zone-liguilla td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-liguilla);
  }

  .team-standings-table tbody tr.zone-play-in td:first-child {
    box-shadow: inset 3px 0 0 var(--color-zone-play-in);
  }

  /* ══════════════════════════════════════════════════════════════════
     DERIVED TABLES (Tabla Anual / Tabla de Promedios) — caption + legend
     ══════════════════════════════════════════════════════════════════ */

  .standings-views-toggle {
    margin-bottom: 12px;
  }

  .derived-table-caption {
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  /* Promedios: the coefficient column is the headline number (bold like Pts);
     the per-year breakdown columns are de-emphasised. */
  .averages-table .st-stat--year {
    color: var(--color-text-secondary);
  }

  .derived-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }

  .derived-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-secondary);
  }

  .derived-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
  }

  .zone-dot-champion {
    background: var(--color-zone-arg-champion);
  }

  .zone-dot-libertadores {
    background: var(--color-zone-libertadores);
  }

  .zone-dot-libertadores-playoff {
    background: var(--color-zone-libertadores-playoff);
  }

  .zone-dot-sudamericana {
    background: var(--color-zone-sudamericana);
  }

  .zone-dot-relegation {
    background: var(--color-zone-relegation);
  }

  /* ══════════════════════════════════════════════════════════════════
     FORM SQUARES (5 colored pills)
     ══════════════════════════════════════════════════════════════════ */

  .st-form {
    text-align: right;
  }

  .form-squares {
    display: inline-flex;
    gap: 3px;
  }

  .form-square {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
  }

  .form-square.win {
    background: var(--color-win);
  }

  .form-square.draw {
    background: var(--color-draw);
  }

  .form-square.lose,
  .form-square.loss {
    background: var(--color-loss);
  }

  /* ══════════════════════════════════════════════════════════════════
     LIVE MATCH BADGE ON ROWS
     ══════════════════════════════════════════════════════════════════ */

  .st-live-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    font-family: var(--font-title);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .st-live-score .live-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: live-pulse 1.5s ease-in-out infinite;
  }

  .st-live-score.win {
    background: color-mix(in srgb, var(--color-win) 18%, transparent);
    color: var(--color-win);
  }

  .st-live-score.win .live-dot {
    background: var(--color-win);
  }

  .st-live-score.draw {
    background: color-mix(in srgb, var(--color-draw) 22%, transparent);
    color: var(--color-text);
  }

  .st-live-score.draw .live-dot {
    background: var(--color-draw);
  }

  .st-live-score.loss {
    background: color-mix(in srgb, var(--color-loss) 18%, transparent);
    color: var(--color-loss);
  }

  .st-live-score.loss .live-dot {
    background: var(--color-loss);
  }

  @keyframes live-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     LEGEND
     ══════════════════════════════════════════════════════════════════ */

  .standings-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 16px 4px;
    font-size: 11px;
    color: var(--color-text-secondary);
  }

  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
  }

  .legend-dot.champions {
    background: #1e88e5;
  }

  .legend-dot.europa {
    background: #ff9800;
  }

  .legend-dot.conference {
    background: #26a69a;
  }

  .legend-dot.relegation {
    background: var(--color-live);
  }

  .legend-dot.promotion {
    background: var(--color-zone-promotion);
  }

  .legend-dot.promotion-playoff {
    background: var(--color-zone-promotion-playoff);
  }

  .legend-dot.cl-direct {
    background: #1e88e5;
  }

  .legend-dot.cl-playoff {
    background: #ff9800;
  }

  .legend-dot.cl-eliminated {
    background: var(--color-text-muted);
  }

  .legend-dot.liguilla {
    background: var(--color-zone-liguilla);
  }

  .legend-dot.play-in {
    background: var(--color-zone-play-in);
  }

  /* ══════════════════════════════════════════════════════════════════
     STANDINGS HEADER (competition selector mock)
     ══════════════════════════════════════════════════════════════════ */

  .team-standings-header {
    padding: 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }

  .team-standings-header__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
  }

  .team-standings-header__title img {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .team-standings-header__meta {
    display: inline-flex;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-secondary);
  }

  .team-standings-header__meta span {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-surface);
  }

  /* Round / stage chip — sits to the right of the competition title.
     One slot per league rendered server-side; only the active league's
     slot is visible (toggled by `team-standings-leagues#onLeagueChange`).
     Empty slots (leagues without round/stage data) just render nothing
     inside the wrapper. */
  .team-standings-header__chip-slot {
    display: inline-flex;
    align-items: center;
  }

  .team-standings-header__chip {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--color-surface);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  /* ══════════════════════════════════════════════════════════════════
     LOGO PLACEHOLDER + EMPTY STATE
     ══════════════════════════════════════════════════════════════════ */

  .logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-secondary);
    background: var(--color-surface);
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--color-text-secondary);
    text-align: center;
  }

  .empty-state-icon svg {
    width: 48px;
    height: 48px;
    stroke: var(--color-text-muted);
    stroke-width: 2;
    fill: none;
  }

  .empty-state-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
  }

  .empty-state-text {
    font-size: 12px;
    color: var(--color-text-secondary);
  }

  /* ══════════════════════════════════════════════════════════════════
     LEAGUE SELECTOR (Team Standings — multi-competition switcher)
     Bulk styles come from .select-trigger (select-modal.css).
     ══════════════════════════════════════════════════════════════════ */

  .standings-league-selector {
    position: relative;
  }

  .standings-league-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .select-modal-option-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-right: 8px;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════════════════
     LEAGUE PANELS (one per league, toggled by Stimulus controller)
     ══════════════════════════════════════════════════════════════════ */

  .team-standings-league-panel.is-hidden {
    display: none;
  }

  /* Inside a team league panel the wrapper doesn't need its own vertical
     padding — the panel itself already adds the top gap and the toolbar
     gives the bottom breathing room. Without this override the league
     table rendered 12px lower than the bracket/journey views. */
  .team-standings-league-panel .team-standings-wrapper {
    padding: 0;
  }

  /* ══════════════════════════════════════════════════════════════════
     TOOLBAR (Total/Home/Away pills + Simple/Complete/Form view switcher)
     ══════════════════════════════════════════════════════════════════ */

  .standings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 10px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .tab-filter-pills {
    display: flex;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tab-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .tab-filter-pill {
    appearance: none;
    border: 0;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    min-height: auto;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .tab-filter-pill:hover {
    background: color-mix(in srgb, var(--color-surface) 80%, var(--color-text) 8%);
  }

  .tab-filter-pill.active {
    background: var(--color-accent);
    color: var(--color-on-accent, #fff);
  }

  .standings-view-wrapper {
    position: relative;
    display: inline-flex;
  }

  /* ══════════════════════════════════════════════════════════════════
     VIEW MODE COLUMN TOGGLING (Simple / Complete / Form)
     ══════════════════════════════════════════════════════════════════ */

  .team-standings-table[data-view="simple"] [data-col="w"],
  .team-standings-table[data-view="simple"] [data-col="d"],
  .team-standings-table[data-view="simple"] [data-col="l"],
  .team-standings-table[data-view="simple"] [data-col="gf"],
  .team-standings-table[data-view="simple"] [data-col="ga"],
  .team-standings-table[data-view="simple"] [data-col="form"] {
    display: none;
  }

  .team-standings-table[data-view="complete"] [data-col="gf"],
  .team-standings-table[data-view="complete"] [data-col="ga"],
  .team-standings-table[data-view="complete"] [data-col="form"] {
    display: none;
  }

  .team-standings-table[data-view="form"] [data-col="mp"],
  .team-standings-table[data-view="form"] [data-col="w"],
  .team-standings-table[data-view="form"] [data-col="d"],
  .team-standings-table[data-view="form"] [data-col="l"],
  .team-standings-table[data-view="form"] [data-col="gf"],
  .team-standings-table[data-view="form"] [data-col="ga"],
  .team-standings-table[data-view="form"] [data-col="gd"],
  .team-standings-table[data-view="form"] .st-pts {
    display: none;
  }

  .team-standings-table[data-view="complete"],
  .team-standings-table[data-view="form"] {
    min-width: 0;
  }

  /* FLIP highlight: rows that moved after a location swap pulse briefly. */
  .team-standings-table tbody tr.standings-row-moved {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }

  /* Nations-League-style division layout: each division (League A/B/C/D) is a
     stacked section (World-Cup view) with its own group tables + zone legend.
     The title separates divisions; the gap pushes each below the previous. */
  .standings-division + .standings-division {
    margin-top: var(--space-6, 1.75rem);
  }

  .standings-division-title {
    margin: 0 0 var(--space-3, 0.75rem);
    font-family: var(--font-title);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-text);
  }
}