/* Team Matches tab — reuses the shared `.match-row` card defined in
   `components/matches/_match_row.html.twig`. Base `.match-row*`
   styles live in `match-detail.css` (imported globally). This file
   only carries the layout chrome (section titles + empty state box)
   and the single-team result modifiers that paint a coloured left
   border on the tracked team's finished matches. */

@layer components {
  .team-matches {
    padding: 0 0 24px;
  }

  /* ══════════════════════════════════════════════════════════════════
     SINGLE-TEAM RESULT MODIFIERS
     Only applied when the row partial receives a `selfId` (team-detail
     context). The H2H tab omits the modifier so head-to-head rows stay
     neutral — both sides are relevant.
     ══════════════════════════════════════════════════════════════════ */

  .match-row--win {
    border-left: 3px solid var(--color-win);
  }

  .match-row--draw {
    border-left: 3px solid var(--color-draw);
  }

  .match-row--loss {
    border-left: 3px solid var(--color-loss);
  }

  /* Upcoming rows (no goals) — the score column becomes a single time
     pill, so collapse the grid slot to keep the layout balanced. */
  .match-row-score--time {
    justify-content: center;
  }

  /* Penalty shootout suffix on FT_PEN rows — small "(3–0 p.)" chip
     under the FT score so the user sees who advanced. The base
     `.match-row-score` already stacks vertically; the modifier just
     tightens the gap and styles the third span. */
  .match-row-score--with-pens {
    gap: 1px;
    line-height: 1.05;
  }

  .match-row-score__pens {
    margin-top: 1px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.2px;
    white-space: nowrap;
  }

  /* ── Tie loser — applied to teams + their score when the card shows
     a vuelta and `m.tie.winnerId` resolved against this team. Strong
     enough (line-through + opacity) to override `.winner`. */
  .match-row-team--tie-loser span:not(.match-row-logo) {
    text-decoration: line-through;
    text-decoration-color: color-mix(in oklab, var(--color-text) 80%, transparent);
    text-decoration-thickness: 2px;
    opacity: 0.5;
  }

  .match-row-team--tie-loser .match-row-logo {
    opacity: 0.45;
  }

  .match-row-score--tie-loser {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    opacity: 0.4;
  }

  /* ══════════════════════════════════════════════════════════════════
     HEADER — competition filter row
     ══════════════════════════════════════════════════════════════════ */

  .team-matches-header {
    display: flex;
    align-items: center;
    padding: 0 0 15px;
  }

  .competition-filter {
    position: relative;
  }

  .competition-filter .select-trigger img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  .competition-filter-chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-left: 4px;
  }

  /* Rows hidden by the team-matches-filter controller when the chosen
     competition doesn't match. Uses display:none so the grid collapses. */
  [data-team-matches-filter-target="row"].is-hidden {
    display: none;
  }

  /* ══════════════════════════════════════════════════════════════════
     MATCHES SECTION FRAME
     ══════════════════════════════════════════════════════════════════ */

  .matches-section {
    margin-bottom: 20px;
  }

  .matches-section:last-child {
    margin-bottom: 0;
  }

  .matches-section-title {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    font-weight: 700;
  }

  .matches-section-title--live {
    color: var(--color-live);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .matches-section-title--live .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-live);
    animation: live-pulse 1.5s ease-in-out infinite;
  }

  /* ══════════════════════════════════════════════════════════════════
     EMPTY STATE
     ══════════════════════════════════════════════════════════════════ */

  .matches-section .empty-state {
    padding: 20px 16px;
    margin: 0 16px;
    background: var(--color-surface);
    border-radius: 12px;
  }
}