/* Team Stats tab — mismo lenguaje visual que Plantilla.

   Header con dos selects (competición + métrica) + banner agregado +
   pills por posición + cards por métrica ("Ver todos" abre
   `team-stats-modal`). Reusa `.squad-row*`, `.squad-star` y
   `.rating-*` del bundle global. Este file solo carga el chrome
   específico de Stats. */

@layer components {
  .team-stats {
    padding: 0;
  }

  /* Competition switch — the picker re-fetches the fragment and swaps
     its inner HTML; while the request is in flight we dim the controller
     root so the user sees their click translated into "loading…" without
     a layout reflow. The root stays mounted so scroll position holds. */
  [data-controller~="team-stats-picker"][aria-busy="true"] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
  }

  /* ══════════════════════════════════════════════════════════════════
     HEADER · competition + metric selectors
     ══════════════════════════════════════════════════════════════════ */

  .team-stats-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px;
  }

  .team-stats-header > * {
    flex: 1;
    min-width: 0;
  }

  .team-stats-header .select-trigger {
    width: 100%;
    overflow: hidden;
  }

  .team-stats-header .select-trigger > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
  }

  /* Metric banner moved to the shared .metrics-banner component
     (assets/styles/components/metrics-banner.css). Controller still
     targets bannerLabel/bannerValue + toggles `hidden` on the wrapper. */

  /* ══════════════════════════════════════════════════════════════════
     POSITION PILLS · reusing the shared toolbar + tab-filter-pill
     ══════════════════════════════════════════════════════════════════ */

  .team-stats-toolbar {
    padding: 0 0 12px;
  }

  /* ══════════════════════════════════════════════════════════════════
     METRIC CARD · one per metric in General mode
     ══════════════════════════════════════════════════════════════════ */

  .stats-card {
    background: var(--color-surface);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    /* Browser saltea layout+paint de las cards off-screen hasta que
       entran al viewport — clave en team/stats con 39 cards montadas
       en modo General. `contain-intrinsic-size` reserva el alto
       aproximado para evitar layout shift al scrollear. */
    content-visibility: auto;
    contain-intrinsic-size: 0 360px;
    contain: layout style paint;
  }

  .stats-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--color-border);
  }

  .stats-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
  }

  /* Same width / padding shape as `.squad-row__metric` so the header
     aggregate sits visually above the column of per-player values
     instead of floating in the middle of the right rail. */
  .stats-card__aggregate {
    display: inline-block;
    flex-shrink: 0;
    min-width: 52px;
    padding: 4px 10px;
    border-radius: 6px;
    text-align: center;
    font-family: var(--font-display, inherit);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
  }

  /* Rating banner — canonical URC rating scale (--color-rating-*, same as the
     match lineups / Best XI tier badges and the row badges), without the
     active-metric scope since the aggregate always pictures rating regardless
     of which pill is current. */
  .stats-card__aggregate.rating-elite {
    background: color-mix(in srgb, var(--color-rating-elite) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-elite) 70%, #fff);
  }
  .stats-card__aggregate.rating-excellent {
    background: color-mix(in srgb, var(--color-rating-excellent) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-excellent) 70%, #fff);
  }
  .stats-card__aggregate.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);
  }
  .stats-card__aggregate.rating-good {
    background: color-mix(in srgb, var(--color-rating-good) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-good) 70%, #fff);
  }
  .stats-card__aggregate.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);
  }
  .stats-card__aggregate.rating-avg {
    background: color-mix(in srgb, var(--color-rating-avg) 25%, transparent);
    color: color-mix(in srgb, var(--color-rating-avg) 70%, #fff);
  }
  .stats-card__aggregate.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);
  }
  .stats-card__aggregate.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 copy when an emitted metric has zero rows for this
     team (e.g. Arsenal with `red_cards: []`). The card stays in the
     general-mode grid + select so the user knows the stat exists, the
     body just explains "no data". */
  .stats-card__empty {
    padding: 18px 16px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
  }

  .stats-card__rows {
    padding: 6px;
  }

  .stats-card .link-button {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--color-border);
    background: transparent;
    cursor: pointer;
  }

  /* ══════════════════════════════════════════════════════════════════
     SINGLE-METRIC PANEL · flat sorted list
     ══════════════════════════════════════════════════════════════════ */

  .team-stats-single {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Native `hidden` attribute must win over `display: flex` — same pattern
     that fixed .empty-state. Without this, every singleMode panel renders
     stacked and rows of all metrics leak into each other visually. */
  .team-stats-single[hidden],
  .stats-card[hidden] {
    display: none;
  }

  /* Hide rows that don't match the active position filter. */
  .team-stats .squad-row.is-hidden {
    display: none;
  }

  /* Same, but scoped to the "Ver todos" modal body so the client-side name
     search hides rows even when the host carries no `.team-stats` ancestor
     (the league Players block reuses this modal chrome without it). */
  .team-stats-modal__body .squad-row.is-hidden {
    display: none;
  }

  /* ══════════════════════════════════════════════════════════════════
     "VER TODOS" MODAL · bottom sheet
     ══════════════════════════════════════════════════════════════════ */

  .team-stats-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0.3s;
    /* Above the bottom-nav (200), the sticky header (100), and any
       page chrome under 9000. Mirrors `.select-modal-backdrop` so both
       bottom-sheet families layer the same way. */
    z-index: 9998;
  }

  .team-stats-modal-backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .team-stats-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    background: var(--color-surface);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s;
    /* One above the backdrop, well clear of the bottom-nav / sticky
       header. Same band as select-modal (9999). */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .team-stats-modal.open {
    transform: translateY(0);
  }

  .team-stats-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 10px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .team-stats-modal__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
  }

  .team-stats-modal__close {
    background: rgb(255 255 255 / 6%);
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
  }

  .team-stats-modal__close:hover {
    background: rgb(255 255 255 / 10%);
  }

  /* Lock height when the modal carries the search row so filtering
     the player list doesn't collapse the bottom-sheet under the
     user's finger. Same trick as `.select-modal:has(...)`. */
  .team-stats-modal:has(.team-stats-modal__search) {
    height: 80vh;
  }

  /* Quick text-search row pinned just below the modal header. Filters
     the rendered list by name (case-insensitive substring), stacking
     on top of the inherited position filter. Cleared on every modal
     open / close so each "Ver todos" launches with a fresh slate. */
  .team-stats-modal__search {
    position: relative;
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--color-border);
  }

  .team-stats-modal__search-icon {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
  }

  .team-stats-modal__search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.2;
    outline: none;
  }

  .team-stats-modal__search-input::placeholder {
    color: var(--color-text-muted);
  }

  .team-stats-modal__search-input:focus {
    border-color: var(--color-accent);
  }

  /* Hide the native clear button on Webkit search inputs so the icon
     row stays clean (we don't expose a clear UI yet — opening / closing
     the modal already resets the value). */
  .team-stats-modal__search-input::-webkit-search-cancel-button {
    appearance: none;
    -webkit-appearance: none;
  }

  .team-stats-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    scrollbar-width: none;
  }

  .team-stats-modal__body::-webkit-scrollbar {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .team-stats-modal,
    .team-stats-modal-backdrop {
      transition: none;
    }
  }
}