/* Team Transfers tab — v2 grammar (Plantilla-style). Banner Saldo, 6
   pills (Todos/Llegadas/Salidas/Cesiones/Libres/Cantera), lista plana
   con `.squad-row`. Pills filtran rows + cambian banner via
   `team-transfers-filter` Stimulus controller.

   Solo definimos lo específico de transfers: banner, escudo inline al
   lado del nombre, flecha de dirección, fee coloreado y type badges.
   El layout de la fila reusa `.squad-row*` (squad/tab.html.twig).

   Pairs with templates/pages/team/transfers/tab.html.twig. */

@layer components {
  /* Saldo banner moved to the shared .metrics-banner component
     (assets/styles/components/metrics-banner.css). */

  /* Player name + inline source/destination club crest. */
  .transfer-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

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

  /* Direction arrow inline in the meta line. */
  .transfer-meta-arrow {
    font-weight: 700;
    margin-right: 2px;
  }

  .transfer-meta-arrow--in {
    color: var(--color-accent);
  }

  .transfer-meta-arrow--out {
    color: #f87171;
  }

  /* Fee cell — colour-coded by direction (red for spend, green for revenue). */
  .transfer-fee {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .transfer-fee--in {
    color: #f87171;
  }

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

  /* Pill badges for non-monetary movements. */
  .transfer-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .transfer-badge--loan {
    background: rgb(251 191 36 / 18%);
    color: #fbbf24;
  }

  .transfer-badge--free {
    background: rgb(34 197 94 / 18%);
    color: #4ade80;
  }

  .transfer-badge--academy {
    background: rgb(139 92 246 / 18%);
    color: #a78bfa;
  }

  .transfer-badge--released {
    background: rgb(248 113 113 / 18%);
    color: #f87171;
  }

  /* Player career-only modifiers (loan_end, promoted, extended). They
     live in this file so the badge palette stays in one place. */
  .transfer-badge--loan_end {
    background: rgb(251 191 36 / 18%);
    color: #fbbf24;
  }

  .transfer-badge--promoted {
    background: rgb(56 189 248 / 18%);
    color: #38bdf8;
  }

  .transfer-badge--extended {
    background: rgb(0 255 135 / 16%);
    color: var(--color-accent);
  }

  /* Active filter empty state — shown when zero rows match the active pill. */
  .empty-state--filter {
    padding: 24px 16px;
    text-align: center;
  }

  .empty-state--filter .empty-state-title {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
  }
}