/* Team Squad tab — plantilla identidad (rating, valor, edad, altura,
   temporadas). Coach card + metric banner + pills + player list.
   Rating keeps position sections with natural fixture order; the other
   metrics collapse sections into a flat descending list. */

@layer components {
  /* ══════════════════════════════════════════════════════════════════
     COACH CARD (always visible at the top)
     ══════════════════════════════════════════════════════════════════ */

  /* Coach info moved to .team-coach-badge in _hero.html.twig (unified
     with the hero). The squad-coach block + its styles are dead code. */

  /* Metric banner moved to the shared .metrics-banner component
     (assets/styles/components/metrics-banner.css). */

  /* ══════════════════════════════════════════════════════════════════
     POSITION SECTION TITLE (visible only on Rating pill)
     ══════════════════════════════════════════════════════════════════ */

  .squad-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 10px 0 4px;
    margin: 0;
  }

  .squad-section-title[hidden] {
    display: none;
  }

  /* ══════════════════════════════════════════════════════════════════
     FOLLOW STAR (leftmost on every row)
     ══════════════════════════════════════════════════════════════════ */

  .squad-star {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text-muted);
    transition:
      background 0.15s,
      color 0.15s,
      transform 0.1s;
  }

  .squad-star:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
  }

  .squad-star:active {
    transform: scale(0.9);
  }

  .squad-star svg {
    width: 18px;
    height: 18px;
  }

  .squad-star[data-fav="true"] {
    color: var(--color-accent);
  }

  .squad-star[data-fav="true"]:hover {
    color: color-mix(in srgb, var(--color-accent) 80%, #000);
  }

  /* ══════════════════════════════════════════════════════════════════
     PLAYER ROW (shared by all metrics)
     ══════════════════════════════════════════════════════════════════ */

  .squad-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--color-surface);
    border-radius: 10px;
    margin-bottom: 6px;
    text-decoration: none;
    color: inherit;
  }

  /* HTML `hidden` attribute must beat `display: flex`; without this rule,
     filtros del transfers tab (Stimulus toggling [hidden]) dejan las filas
     visibles. Memoria feedback_hidden_attribute_display_override. */
  .squad-row[hidden] {
    display: none;
  }

  .squad-row__interactive {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  .squad-row__photo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }

  .squad-row__photo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-surface-hover);
  }

  .squad-row__photo-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 700;
  }

  .squad-row__flag {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 12px;
    border-radius: 2px;
    border: 1.5px solid var(--color-surface);
    object-fit: cover;
  }

  /* Birthday cake — top corner of the squad photo (the flag owns the
     bottom). Shown only on the player's birthday and when not injured. */
  .squad-row__birthday {
    position: absolute;
    right: -3px;
    top: -3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
  }

  .squad-row__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
  }

  .squad-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  /* Injury block — two stacked lines below the meta:
       1. icon + injury type (headline, accent colour).
       2. start / weeks / return dates (muted suffix line).
     Splitting them keeps the eye on the *type* first and demotes the
     timing to glance-level. */
  .squad-row__injury {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.3;
  }

  .squad-row__injury-head {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-live);
  }

  .squad-row__injury-head svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .squad-row__injury-label {
    font-weight: 600;
  }

  .squad-row__injury-dates {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  /* Birthday line below the player's data — festive gold, mirrors the
     injury line's size so the row height stays consistent. */
  .squad-row__birthday-line {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-gold-2);
  }

  .squad-row__meta {
    font-size: 11px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Team crest used on the meta line when `r.team` is set (league
     overview multi-club list). Keeps the meta chip compact so the row
     height matches the team-context variant. */
  .squad-row__team-logo {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .squad-row__metric {
    flex-shrink: 0;
    font-family: var(--font-display, inherit);
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    min-width: 52px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: transparent;
    color: var(--color-text-secondary);
  }

  /* Dorsal — la celda métrica en la pill por defecto "Plantilla".
     Tipografía Oswald (--font-title) con un cuerpo más grande para
     que el dorsal lea como protagonista en cada fila, en línea con el
     v1. Cuando otra pill métrica activa, el JS sobrescribe el texto y
     la clase modifier desaparece via dataset → la celda vuelve al
     tamaño base. */
  .squad-row[data-active-metric="squad"] .squad-row__metric--dorsal {
    font-family: var(--font-title, var(--font-display, inherit));
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    letter-spacing: -0.01em;
  }

  /* Color the rating badge only when the active metric is rating. Uses the
     canonical URC rating scale (--color-rating-*, same gold→green→red as the
     match lineups / Best XI tier badges) so ratings read identically across the
     app — not a bespoke palette. */
  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-elite {
    background: color-mix(in srgb, var(--color-rating-elite) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-elite) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-excellent {
    background: color-mix(in srgb, var(--color-rating-excellent) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-excellent) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-very-good {
    background: color-mix(in srgb, var(--color-rating-very-good) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-very-good) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-good {
    background: color-mix(in srgb, var(--color-rating-good) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-good) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-above-avg {
    background: color-mix(in srgb, var(--color-rating-above-avg) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-above-avg) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-avg {
    background: color-mix(in srgb, var(--color-rating-avg) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-avg) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-below-avg {
    background: color-mix(in srgb, var(--color-rating-below-avg) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-below-avg) 70%, #fff);
  }

  .squad-row[data-active-metric="rating"] .squad-row__metric.rating-poor {
    background: color-mix(in srgb, var(--color-rating-poor) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-poor) 70%, #fff);
  }

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

  .squad-empty {
    padding: 24px 16px;
    text-align: center;
    background: var(--color-surface);
    border-radius: 12px;
  }

  /* ══════════════════════════════════════════════════════════════════
     SHARED RATING COLOR CLASSES
     Used by team-overview, team-bestxi and team-stats for their own
     badges. Defined here as the single source of truth for the palette.
     ══════════════════════════════════════════════════════════════════ */

  .rating-elite,
  .rating-excellent,
  .rating-very-good,
  .rating-good,
  .rating-above-avg,
  .rating-avg,
  .rating-below-avg,
  .rating-poor {
    font-variant-numeric: tabular-nums;
  }
}