/* Mini-standings card (match overview) — "solo los 2 que juegan".

   Compact 5-column table (# · escudo+nombre · PJ · DG · Pts) that mirrors
   the visual language of the group mini-tables
   (.standings-group-card in pages/league-detail.css) so the overview card
   reads consistent with the full standings tab. Both rendered rows are the
   teams playing the fixture and carry `.is-match-team`.

   Imported from app.js → rules MUST live inside @layer components or they
   land unlayered and outrank the design system. */
@layer components {
  .standings-mini-card .card-title {
    margin-bottom: 10px;
  }

  .standings-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .standings-mini thead th {
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
  }

  .standings-mini__col-pos {
    width: 28px;
    text-align: center;
  }

  .standings-mini__col-team {
    text-align: left !important;
  }

  .standings-mini__col-stat,
  .standings-mini__col-pts {
    width: 40px;
    text-align: center;
  }

  .standings-mini__row {
    border-bottom: 1px solid var(--color-border);
  }

  .standings-mini__row:last-child {
    border-bottom: none;
  }

  /* Both rows are the teams in this match — subtle background highlight so
     the card reads "these two are playing", not a random table slice. The
     left accent is reserved for the qualification zone (below). */
  .standings-mini__row.is-match-team {
    background: var(--color-surface-hover);
  }

  /* Qualification-zone accent — same vocabulary, colours and inset-border
     technique as the full standings table (see standings.css ZONE BORDERS)
     so the mini card paints identical zone markers. Neutral mid-table rows
     carry no zone class and stay flat. */
  .standings-mini__row.zone-champions .standings-mini__pos {
    box-shadow: inset 3px 0 0 #1e88e5;
  }

  .standings-mini__row.zone-europa .standings-mini__pos {
    box-shadow: inset 3px 0 0 #ff9800;
  }

  .standings-mini__row.zone-conference .standings-mini__pos {
    box-shadow: inset 3px 0 0 #26a69a;
  }

  .standings-mini__row.zone-relegation .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-live);
  }

  .standings-mini__row.zone-promotion .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-zone-promotion);
  }

  /* Group-stage zones, derived from the within-group position to mirror the
     full Clasificación groups view: top-2 = champions blue (clasifica), 3rd =
     cl-playoff amber (mejor tercero), 4th = no accent (eliminado). Same
     vocabulary as standings-group-card / standings-groups-legend, so the
     overview mini-card reads identically. */
  .standings-mini__row.is-qualified .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-zone-champions);
  }

  .standings-mini__row.is-thirdspot .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-zone-cl-playoff);
  }

  /* Non-group fallback: a hybrid/league-phase row may still carry a raw `zone`
     of knockout/eliminated (StandingHistoryProjector) and drive the per-zone
     mini-legend. Keep them coherent with the group palette. */
  .standings-mini__row.zone-knockout .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-zone-champions);
  }

  .standings-mini__row.zone-eliminated .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-border);
  }

  .standings-mini__row.zone-promotion-playoff .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-zone-promotion-playoff);
  }

  .standings-mini__row.zone-cl-direct .standings-mini__pos {
    box-shadow: inset 3px 0 0 #1e88e5;
  }

  .standings-mini__row.zone-cl-playoff .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-zone-cl-playoff);
  }

  .standings-mini__row.zone-cl-eliminated .standings-mini__pos {
    box-shadow: inset 3px 0 0 var(--color-live);
  }

  .standings-mini__pos {
    padding: 8px 4px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .standings-mini__team {
    padding: 8px 6px;
    min-width: 0;
  }

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

  .standings-mini__logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .standings-mini__name {
    font-weight: 500;
    color: var(--color-text);
    overflow-wrap: anywhere;
    line-height: 1.15;
    min-width: 0;
  }

  .standings-mini__stat {
    padding: 8px 4px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
  }

  .standings-mini__gd.is-positive {
    color: var(--color-accent, #22c55e);
  }

  .standings-mini__gd.is-negative {
    color: var(--color-danger, #ef4444);
  }

  .standings-mini__pts {
    padding: 8px 6px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  /* Live-projected row — reuses the FULL standings tab vocabulary
     (.st-live-badge, .st-pts--live-*, .st-live-tick, .current-team--live;
     defined in pages/match-detail.css, imported globally) so the mini card
     paints the identical live treatment as the Clasificación tab. Only the
     mini-specific layout glue lives here. The pulsing dot + badge colours +
     projected-points colour all inherit from the shared classes. */
  .standings-mini__row.current-team--live {
    background: var(--color-surface-hover);
  }

  .standings-mini__team .st-team-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  /* The shared badge sits inline after the name; keep it from forcing the
     compact name column to overflow. */
  .standings-mini__team-link .st-live-badge {
    flex-shrink: 0;
  }

  /* Compact legend — only the zones present among the two shown teams.
     Mirrors .standings-legend / .legend-dot from the full table but sized
     down for the two-row card. Same --color-zone-* tokens. */
  .standings-mini__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: 11px;
    color: var(--color-text-secondary);
  }

  .standings-mini__legend[hidden] {
    display: none;
  }

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

  .standings-mini__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
  }

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

  .standings-mini__legend-dot.europa {
    background: #ff9800;
  }

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

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

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

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

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

  .standings-mini__legend-dot.cl-playoff {
    background: var(--color-zone-cl-playoff);
  }

  .standings-mini__legend-dot.cl-eliminated {
    background: var(--color-live);
  }

  .standings-mini__legend-dot.knockout {
    background: var(--color-zone-champions);
  }

  .standings-mini__legend-dot.eliminated {
    background: var(--color-border);
  }
}