/* League Transfers tab — scope competición. Reusa la base de
   `.squad-row` + `.tab-filter-pill` + `.metrics-banner` + `transfer-badge*`
   (del CSS de team-transfers). Layout:
     - Segmented switch Clubes / Jugadores (reusa `.pst-per90-toggle`)
     - Pills segmentadas (4 clubes / 6 jugadores)
     - Banner compartido
     - Ranking de clubes o lista de jugadores
     - Club filter (select-modal) visible solo en segmento Jugadores

   Pairs with templates/pages/league/transfers/tab.html.twig y
   assets/controllers/league_transfers_filter_controller.js. */

@layer components {
  /* ─── Segmented switch (Clubes / Jugadores) ──────────────────────
     Chrome compartido con `.pst-per90-toggle` (player-stats). El
     modifier local sólo expone el margin bottom para separar del pill
     row sin tocar el componente compartido. */
  .pst-per90-toggle.league-transfers-segment-toggle {
    margin-top: 0;
    margin-bottom: 15px;
  }

  /* ─── Free-text search (visible en ambos segmentos) ───────────────
     Caja con icono lupa + input. Persistente en Clubes y Jugadores
     para evitar el salto visual al cambiar de segmento. Semántica del
     filtro depende del segmento (ver controller): en Clubes matchea
     nombre del club del ranking; en Jugadores matchea jugador + club
     origen + club destino. */
  .league-transfers-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .league-transfers-search:focus-within {
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    background: var(--color-surface-hover);
  }

  .league-transfers-search__icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    margin-left: 12px;
    flex-shrink: 0;
  }

  .league-transfers-search__input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.2;
  }

  .league-transfers-search__input::placeholder {
    color: var(--color-text-muted);
  }

  .league-transfers-search__input:focus {
    outline: none;
  }

  /* ─── Pills scroll-snap (Tron review) ────────────────────────── */
  .league-transfers .tab-filter-pills {
    scroll-snap-type: x proximity;
  }

  /* Global `.tab-filter-pills { display: flex }` en standings.css
     anula el atributo `hidden` → neutraliza el toggle de segment en
     JS. Guard explícito (regla ya vivida 3 veces en pasadas). */
  .league-transfers .tab-filter-pills[hidden] {
    display: none;
  }

  .league-transfers .tab-filter-pill {
    scroll-snap-align: start;
  }

  /* ─── Transfer route meta (dos escudos + arrow inline) ─────────
     `flex-wrap: nowrap` + cada nombre con `flex: 1 1 0` + min-width 0
     obliga a los dos club-names a compartir ancho y truncar con
     ellipsis antes de romper a segunda línea. */
  .transfer-route {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
  }

  .transfer-route__logo {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .transfer-route__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 0;
  }

  .transfer-route__arrow {
    color: var(--color-text-muted);
    margin: 0 2px;
    flex-shrink: 0;
  }

  /* Players rows: stack date (top, small) + fee/badge (bottom) en la
     columna derecha. El route meta ahora ocupa toda la línea inferior
     del body sin competir con la fecha, que se movió arriba-derecha. */
  .squad-row__metric--stacked {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .transfer-row__date {
    font-size: 10px;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .league-transfers .transfer-fee {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  /* Direction-coloured fee chips (compartidos con team-transfers).
     Sobreescritura explícita porque `.league-transfers .transfer-fee`
     (especificidad 0,2,0) gana al modifier global (0,1,0). Arrival =
     gasto (rojo), exit = ingreso (verde). Intra-liga queda sin
     direction → mantiene el color neutro. */
  .league-transfers .transfer-fee--in {
    color: #f87171;
  }

  .league-transfers .transfer-fee--out {
    color: var(--color-accent);
  }

  /* ─── Spend ranking rows (clubes) ────────────────────────────── */
  .league-spend-ranking__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
  }

  .league-spend-ranking__list[hidden] {
    display: none;
  }

  .league-spend-ranking__row {
    position: relative;
    display: grid;
    grid-template-columns: 20px 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    background: var(--bg-card, rgb(255 255 255 / 3%));
    overflow: hidden;
    isolation: isolate;
    transition: background-color 0.15s ease;
  }

  /* `display: grid` neutraliza el atributo `hidden`; guard explícito
     para que el filtro free-text de Clubes (oculta rows que no
     matchean la query) funcione. */
  .league-spend-ranking__row[hidden] {
    display: none;
  }

  .league-spend-ranking__row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--bar-pct, 0%);

    /* Tint con `--team-color-2` del hero. Inicio reforzado con mezcla
       negra (más peso visual) + fade al 30% de intensidad al final —
       así el bar se disuelve con sensación natural hacia el card bg
       pero conserva el escalón en su borde para poder comparar %s
       entre filas. Fallback amber Feeberse fuera de scope de liga. */
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--team-color-2, hsl(45deg 95% 55% / 32%)) 80%, #000 20%) 0%,
      color-mix(in srgb, var(--team-color-2, hsl(45deg 95% 55% / 32%)) 30%, transparent 70%) 100%
    );
    z-index: -1;
    pointer-events: none;
    transition: width 0.3s ease;
  }

  .league-spend-ranking__row:hover {
    background: var(--bg-card-hover, rgb(255 255 255 / 6%));
  }

  .league-spend-ranking__rank {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .league-spend-ranking__logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .league-spend-ranking__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .league-spend-ranking__team {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .league-spend-ranking__meta {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .league-spend-ranking__value {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  /* Signed balance headline (pill `balance` only). Mirror the team-detail
     transfer-fee palette so the colour grammar reads identically across
     both screens: negative saldo (net buyer) red, positive (net seller)
     green, zero muted. */
  .league-spend-ranking__value--neg {
    color: #f87171;
  }

  .league-spend-ranking__value--pos {
    color: var(--color-accent);
  }

  .league-spend-ranking__value--zero {
    color: var(--color-text-muted);
  }
}