/* Team Overview tab — pairs with templates/pages/team/overview/tab.html.twig. */

@layer components {
  /* .card + .card-header + .card-title live in
     assets/styles/components/card.css (canonical, shared). */

  /* ══════════════════════════════════════════════════════════════════
     NEXT MATCH CARD
     ══════════════════════════════════════════════════════════════════ */

  .next-match-card {
    display: block;
    padding: 16px;
    text-decoration: none;
    color: inherit;
  }

  .next-match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .next-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
  }

  .next-match-team .team-name {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
  }

  .next-match-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .next-match-info .match-time {
    font-family: var(--font-title);
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
  }

  .next-match-info .match-date {
    font-size: 12px;
    color: var(--color-text-secondary);
  }

  /* Competition tag inside .card-header (right-side of .next-match-header).
     Logo + name inline, small + secondary color. */
  .next-match-comp-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 11px;
    color: var(--color-text-secondary);
    font-weight: 600;
  }

  .next-match-comp-tag__logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  .next-match-comp-tag__name {
    text-transform: none;
    letter-spacing: 0;
  }

  .team-logo-md {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  /* World-Cup group card uses the canonical "Últimos 5" mini-card
     (`.last5-card` / `.last5-scroll--group`, see components/last5.css) so it
     is visually identical at every width — no group-specific cell styles. */

  /* ══════════════════════════════════════════════════════════════════
     FIFA RANKING CARD (national teams) — Chart.js line, market-value style
     ══════════════════════════════════════════════════════════════════ */

  .fifa-rank-card {
    padding: 16px;
  }

  .fifa-rank-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
  }

  .fifa-rank-card__title {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text);
    flex-shrink: 0;
  }

  .fifa-rank-card__subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .fifa-rank-card__current-value {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
  }

  /* "Última mejor" sits top-right of the title; wraps under itself when the
     rank·year·points string is long rather than crowding the title. */
  .fifa-rank-card__peak {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    text-align: right;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .fifa-rank-card__peak-dot {
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px color-mix(in oklab, #ffd700 40%, transparent));
  }

  .fifa-rank-card__peak-value {
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-rating-elite, #ffd700);
    font-variant-numeric: tabular-nums;
  }

  .fifa-rank-card__chart-wrapper {
    position: relative;
    height: 150px;
    margin-top: 6px;
  }

  /* External HTML tooltip (mirrors .mv-tooltip from player-overview). */
  .fifa-rank-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 10;
    text-align: center;
  }

  .fifa-rank-tooltip__rank {
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .fifa-rank-tooltip__year {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* ══════════════════════════════════════════════════════════════════
     LAST 5 (FORM) — horizontal scroll
     ══════════════════════════════════════════════════════════════════ */

  /* .last5-* canonical styles live in assets/styles/components/last5.css
     (shared with match H2H form widget). */

  /* ══════════════════════════════════════════════════════════════════
     LINK BUTTON (ver todos los X)
     ══════════════════════════════════════════════════════════════════ */

  .link-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
  }

  .link-button:hover {
    background: var(--color-surface-hover);
  }

  .link-button svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-accent);
  }

  /* ══════════════════════════════════════════════════════════════════
     MINI STANDINGS (inline en overview)
     ══════════════════════════════════════════════════════════════════ */

  .standings-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .standings-title-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  .mini-standings {
    padding: 4px 0 8px;
  }

  .mini-standing-header {
    display: grid;
    grid-template-columns: 28px 1fr 36px 36px 36px;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 10px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
  }

  .mini-pos-h {
    text-align: center;
  }

  .mini-team-h {
    text-align: left;
  }

  .mini-stat-h,
  .mini-pts-h {
    text-align: right;
  }

  .mini-standing-row {
    display: grid;
    grid-template-columns: 28px 1fr 36px 36px 36px;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
  }

  .mini-standing-row:last-child {
    border-bottom: none;
  }

  .mini-standing-row:hover {
    background: var(--color-surface-hover);
  }

  .mini-standing-row.current-team {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }

  .mini-standing-row.current-team:hover {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  }

  .mini-standing-row.zone-champions {
    box-shadow: inset 3px 0 0 #1e88e5;
  }

  .mini-standing-row.zone-europa {
    box-shadow: inset 3px 0 0 #ff9800;
  }

  .mini-standing-row.zone-conference {
    box-shadow: inset 3px 0 0 #26a69a;
  }

  .mini-standing-row.zone-relegation {
    box-shadow: inset 3px 0 0 var(--color-live);
  }

  /* Live row — subtle accent halo behind the row to flag the team is
     playing right now. Pairs with the inline `.st-live-score` badge. */
  .mini-standing-row.is-playing {
    background: color-mix(in srgb, var(--color-live) 6%, transparent);
  }

  .mini-standing-row.is-playing:hover {
    background: color-mix(in srgb, var(--color-live) 12%, transparent);
  }

  .mini-pos {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }

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

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

  .mini-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .mini-team-name {
    font-size: 13px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .current-team .mini-team-name {
    font-weight: 700;
  }

  .mini-stat {
    text-align: right;
    font-size: 12px;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }

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

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

  .mini-pts {
    text-align: right;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

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

  /* ══════════════════════════════════════════════════════════════════
     ST-LIVE-SCORE badge (row inline en mini-standings)
     ══════════════════════════════════════════════════════════════════ */

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

  .st-live-score .live-dot {
    width: 6px;
    height: 6px;
    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;
    }
  }

  /* ══════════════════════════════════════════════════════════════════
     TOP STATS — sub-secciones (Mejor valorados / Goles / Asistencias).
     El row del jugador reusa `.squad-row` del tab Estadísticas vía
     partial `_player_row.html.twig`; aquí solo el subtítulo de cada
     bloque dentro del section-card.
     ══════════════════════════════════════════════════════════════════ */

  .overview-top-subtitle {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    font-weight: 700;
    margin: 12px 16px 4px;
  }

  /* ══════════════════════════════════════════════════════════════════
     INFO LIST (Estadio, Capacidad, Fundado, Entrenador)
     ══════════════════════════════════════════════════════════════════ */

  .info-list {
    padding: 8px 0;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
  }

  .info-row:last-child {
    border-bottom: none;
  }

  .info-label {
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  .info-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-align: right;
  }

  /* ══════════════════════════════════════════════════════════════════
     COMPETITIONS LIST
     ══════════════════════════════════════════════════════════════════ */

  .competitions-list {
    padding: 8px 0;
  }

  /* Fila de competición. Es <a> cuando `league_url` resuelve la ficha de
     liga; si no, degrada a <div> estático (mismo layout). */
  .competition-item-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: inherit;
    text-decoration: none;
    transition: background 0.18s ease;
  }

  a.competition-item-link {
    cursor: pointer;
  }

  a.competition-item-link:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }

  .competition-item-chevron {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
  }

  .competition-item-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .competition-item-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .competition-item-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
  }

  /* ══════════════════════════════════════════════════════════════════
     WIDEN LAYOUTS ON DESKTOP
     ══════════════════════════════════════════════════════════════════ */

  /* ══════════════════════════════════════════════════════════════════
     FALLBACK NOTICES (loader / empty) — preserved from ralph-loop
     ══════════════════════════════════════════════════════════════════ */

  .entity-tab-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--color-text-secondary);
    font-size: 13px;
  }

  .entity-tab-retry {
    background: var(--color-accent);
    color: var(--color-on-accent);
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }

  /* ══════════════════════════════════════════════════════════════════
     LIVE MATCH HERO — reuses the `.match-score-section` block from
     match-detail.css, scoped under `.team-overview-live-hero` so we
     only tweak sizing for the overview context (the full match-detail
     page renders bigger logos + names). Keeps a single visual
     language for live scores across surfaces.
     ══════════════════════════════════════════════════════════════════ */

  /* Live tint on the card chrome — subtle live-color border so the
     card reads "active" without dominating the page. The header
     stays untouched; the live signal lives inside the hero (pulse
     dot + minute badge). */
  .card--live {
    border: 1px solid color-mix(in srgb, var(--color-live, #ef4444) 35%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-live, #ef4444) 12%, transparent);
  }

  .card--live__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .card--live__link:hover .team-overview-live-hero {
    background: color-mix(in srgb, var(--color-surface-hover, transparent) 50%, transparent);
  }

  .team-overview-live-hero {
    border-radius: 8px;
    transition: background 0.18s ease;
  }

  /* Scoped override on the shared `.match-score-section` block from
     match-detail.css. The full match-detail page renders the section
     with its own padding; the overview hero needs a tighter inner
     box plus an `all` transition so the hover background (driven by
     `.card--live__link:hover`) eases in smoothly along with any
     other state changes. */
  .team-overview-live-hero .match-score-section {
    position: relative;
    padding: 0 10px 12px;
    transition: all 0.3s var(--easing-default, ease);
  }

  /* Shrink the team shields a notch — the match-detail full hero
     renders shields larger; the overview keeps the card dense so
     standings + top-stats fit below without scrolling. */
  .team-overview-live-hero .match-detail-team .team-logo {
    width: 44px;
    height: 44px;
  }

  .team-overview-live-hero .team-name {
    font-size: 13px;
    margin-top: 6px;
  }

  .team-overview-live-hero .match-score__side {
    font-size: 26px;
    line-height: 1;
  }

  .team-overview-live-hero .match-score__sep {
    font-size: 22px;
  }

  /* The .match-status-badge--block variant duplicates the live minute
     under the score row on match-detail; the overview only needs the
     inline badge between the score numbers, so hide the block one. */
  .team-overview-live-hero .match-status-badge--block {
    display: none;
  }

  /* Compact the centred-icon event grid for the overview card — no top
     border (the score row + status badge already separate it
     visually). */
  .team-overview-live-hero .hero-events {
    margin-top: 6px;
  }
}