/* Player stats tab — filters bar (functional comp picker via
   select-modal), summary card (built on the canonical
   `.player-info-grid` 2x3 primitive), per-match rating chart
   (carousel, 5 matches/page), per-90 toggle, and stat list groups
   with tier-coloured percentil mini-bars beside the rank badge.
   All `.card` chrome comes from the canonical card component — no
   sub-design system here. */

@layer components {
  /* ---------- Filters bar ---------- */
  .player-stats-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  .player-stats-filter-wrap {
    flex: 1;
    position: relative;
  }

  .player-stats-filter {
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
    text-align: left;
    transition:
      background 120ms ease,
      border-color 120ms ease;
  }

  .player-stats-filter:hover,
  .player-stats-filter:focus-visible {
    background: var(--color-surface-hover, rgb(255 255 255 / 4%));
    border-color: var(--color-border-strong, var(--color-border));
  }

  .player-stats-filter[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .player-stats-filter[disabled]:hover {
    background: var(--color-surface);
    border-color: var(--color-border);
  }

  .player-stats-filter__logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-stats-filter__icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .player-stats-filter__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-stats-filter__chevron {
    width: 14px;
    height: 14px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  /* Season selector — a functional select-modal coupled to the competition
     picker (picking a competition repopulates + re-fetches this season).
     Sized to its own (short) label so the competition filter keeps the
     row's flexible space. */
  .player-stats-filter-wrap--season {
    flex: 0 0 auto;
  }

  .player-stats-filter--season {
    width: auto;
  }

  .player-stats-filter__season-icon {
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  /* ---------- Summary card (header + 2x3 player-info-grid) ---------- */
  .player-stats-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
  }

  .player-stats-summary__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    min-width: 0;
  }

  .player-stats-summary__logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .player-stats-summary__record {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-title);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  .player-stats-summary__record[hidden] {
    display: none;
  }

  .player-stats-summary__record-w {
    color: var(--color-accent);
    font-weight: 700;
  }

  .player-stats-summary__record-d {
    color: var(--color-text-muted);
    font-weight: 600;
  }

  .player-stats-summary__record-l {
    color: var(--color-loss);
    font-weight: 700;
  }

  .player-stats-summary__record-sep {
    color: var(--color-border);
  }

  /* ---------- Per-match rating chart (carousel) ---------- */
  .player-stats-rating-chart {
    margin-top: 12px;
  }

  .player-stats-rating-chart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .player-stats-rating-chart__motm-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__motm-count[hidden] {
    display: none;
  }

  .player-stats-rating-chart__motm-star {
    color: #ffd700;
    font-size: 14px;
    line-height: 1;
  }

  .player-stats-rating-chart__body {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: stretch;
    gap: 4px;
    padding: 8px 0;
  }

  .player-stats-rating-chart__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 8px;
    min-height: 44px;
    transition:
      color 120ms ease,
      background 120ms ease;
  }

  .player-stats-rating-chart__arrow svg {
    width: 20px;
    height: 20px;
  }

  .player-stats-rating-chart__arrow--hidden,
  .player-stats-rating-chart__arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
  }

  .player-stats-rating-chart__arrow:hover:not(:disabled),
  .player-stats-rating-chart__arrow:focus-visible:not(:disabled) {
    color: var(--color-text);
    background: rgb(255 255 255 / 4%);
  }

  .player-stats-rating-chart__track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    min-height: 180px;
    user-select: none;
  }

  .player-stats-rating-chart__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    min-width: 0;
  }

  .player-stats-rating-chart__cell--clickable {
    cursor: pointer;
  }

  .player-stats-rating-chart__cell--clickable:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .player-stats-rating-chart__opp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 18px;
    position: relative;
  }

  .player-stats-rating-chart__opp-logo {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  .player-stats-rating-chart__opp-placeholder {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(255 255 255 / 6%);
  }

  .player-stats-rating-chart__score {
    text-align: center;
    font-family: var(--font-title);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }

  .player-stats-rating-chart__score--win {
    color: var(--color-accent);
  }

  .player-stats-rating-chart__score--draw {
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__score--loss {
    color: var(--color-loss);
  }

  .player-stats-rating-chart__bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    background: rgb(255 255 255 / 4%);
    border-radius: 6px;
    padding: 3px;
    min-height: 80px;
  }

  /* Bar fills the wrap fully and `transform: scaleY()` clips it from
     the bottom up. Animating `transform` stays on the GPU compositor
     (60fps); animating `height` triggered layout on every frame and
     thrashed the carousel re-render. The fill ratio comes in via the
     `--bar-fill` custom prop set by the rating chart controller. */
  .player-stats-rating-chart__bar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: var(--color-text-muted);
    transform-origin: bottom;
    transform: scaleY(var(--bar-fill, 0));
    transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  @media (prefers-reduced-motion: reduce) {
    .player-stats-rating-chart__bar {
      transition: none;
    }
  }

  /* Rating value sits OUTSIDE the bar so it always lands on the same
     horizontal line regardless of bar height. Tier-coloured text. */
  .player-stats-rating-chart__bar-value {
    text-align: center;
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--color-text);
  }

  .player-stats-rating-chart__bar-value.tier-elite {
    color: var(--color-rating-elite);
  }

  .player-stats-rating-chart__bar-value.tier-excellent {
    color: var(--color-rating-excellent);
  }

  .player-stats-rating-chart__bar-value.tier-very-good {
    color: var(--color-rating-very-good);
  }

  .player-stats-rating-chart__bar-value.tier-good {
    color: var(--color-rating-good);
  }

  .player-stats-rating-chart__bar-value.tier-above-avg {
    color: var(--color-rating-above-avg);
  }

  .player-stats-rating-chart__bar-value.tier-avg {
    color: var(--color-rating-avg);
  }

  .player-stats-rating-chart__bar-value.tier-below-avg {
    color: var(--color-rating-below-avg);
  }

  .player-stats-rating-chart__bar-value.tier-poor {
    color: var(--color-rating-poor);
  }

  .player-stats-rating-chart__bar-value.tier-none {
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__bar.tier-elite {
    background: var(--color-rating-elite);
  }

  .player-stats-rating-chart__bar.tier-excellent {
    background: var(--color-rating-excellent);
  }

  .player-stats-rating-chart__bar.tier-very-good {
    background: var(--color-rating-very-good);
  }

  .player-stats-rating-chart__bar.tier-good {
    background: var(--color-rating-good);
  }

  .player-stats-rating-chart__bar.tier-above-avg {
    background: var(--color-rating-above-avg);
  }

  .player-stats-rating-chart__bar.tier-avg {
    background: var(--color-rating-avg);
  }

  .player-stats-rating-chart__bar.tier-below-avg {
    background: var(--color-rating-below-avg);
  }

  .player-stats-rating-chart__bar.tier-poor {
    background: var(--color-rating-poor);
  }

  .player-stats-rating-chart__bar.tier-none {
    background: var(--color-text-muted);
  }

  .player-stats-rating-chart__round {
    text-align: center;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
  }

  .player-stats-rating-chart__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
  }

  .player-stats-rating-chart__dots[hidden] {
    display: none;
  }

  .player-stats-rating-chart__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition:
      background 120ms ease,
      transform 120ms ease;
  }

  .player-stats-rating-chart__dot.is-active {
    background: var(--color-text);
    transform: scale(1.2);
  }

  .player-stats-rating-chart__empty {
    text-align: center;
    padding: 40px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .player-stats-rating-chart__empty[hidden] {
    display: none;
  }

  /* ---------- Per-90 toggle (segmented control) ---------- */
  .pst-per90-toggle {
    display: inline-flex;
    align-self: stretch;
    width: 100%;
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 3px;
    margin: 0 0 12px;
    gap: 0;
  }

  .pst-per90-btn {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 7px;

    /* Primary toggle — full WCAG touch target (44px). The sub-pills
       inside `.player-economia__comp-dim-btn` stay at 36px (secondary
       nav, jerarquía visual). */
    min-height: var(--touch-target);
    transition:
      color 120ms ease,
      background 120ms ease;
  }

  .pst-per90-btn:hover:not(.active),
  .pst-per90-btn:focus-visible:not(.active) {
    color: var(--color-text);
  }

  .pst-per90-btn.active {
    background: rgb(0 255 135 / 14%);
    color: var(--color-accent);
  }

  /* ---------- Stats list groups + per-90 visibility toggle ---------- */
  .player-stats-group__header {
    font-family: var(--font-title);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 4px;
  }

  /* Row layout: flexbox with three regions.
       - badge slot: fixed 36px on the left (empty space when unranked)
       - label: flex-grows through the middle (takes all remaining space)
       - right block: pinned to the row's right edge — value + bar
         keep the same horizontal X across every row. */
  .player-stats-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(255 255 255 / 4%);
  }

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

  .player-stats-row__badge-slot {
    flex: 0 0 36px;
    display: flex;
    justify-content: flex-start;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
  }

  /* Interactive variant — slot becomes a button that opens the league
     leaderboard modal for this stat. Subtle hover/focus affordance via
     the badge inside (the slot itself stays invisible). */
  .player-stats-row__badge-slot--interactive {
    cursor: pointer;
  }

  .player-stats-row__badge-slot--interactive:hover .player-rank-badge,
  .player-stats-row__badge-slot--interactive:focus-visible .player-rank-badge {
    transform: scale(1.06);
    transition: transform 120ms ease;
  }

  .player-stats-row__badge-slot--interactive:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .player-stats-row__label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-stats-row__right {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
  }

  .player-stats-row__value {
    font-family: var(--font-title);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
  }

  /* Three-mode toggle: hide all value siblings by default and reveal
     only the one matching the active mode. Default mode `per90` is
     set on the wrapper SSR. */
  .player-stats-row__value-total,
  .player-stats-row__value-per90,
  .player-stats-row__value-percentile {
    display: none;
  }

  .player-stats[data-mode="total"] .player-stats-row__value-total,
  .player-stats[data-mode="per90"] .player-stats-row__value-per90,
  .player-stats[data-mode="percentile"] .player-stats-row__value-percentile {
    display: inline;
  }

  /* Mini progress bar — always rendered (even unranked rows) so the
     right edge stays vertically aligned across the whole stats list.
     Width 60px, height 6px. Fill width = (50 - rankNum) / 50 * 100,
     i.e. the player's position within the league top-50. Traffic-
     light scale shared with the rank badge — green ≥50% / amber
     ≥25% / red <25% — semantic colours via app tokens. */
  .player-stats-row__rank-bar {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background: rgb(255 255 255 / 6%);
    overflow: hidden;
    flex-shrink: 0;
  }

  .player-stats-row__rank-bar-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .player-stats-row__rank-bar--empty {
    background: rgb(255 255 255 / 4%);
  }

  .player-stats-row__rank-bar--high .player-stats-row__rank-bar-fill {
    background: var(--color-accent);
  }

  .player-stats-row__rank-bar--mid .player-stats-row__rank-bar-fill {
    background: var(--color-yellow-card);
  }

  .player-stats-row__rank-bar--low .player-stats-row__rank-bar-fill {
    background: var(--color-loss);
  }

  /* ---------- Matches tab filters (competition + season) ----------
     The competition filter takes the row's flexible width; the season
     filter — present only when a specific competition is picked — sizes
     to its short label, mirroring the stats tab's coupled selectors.
     Same `.select-trigger` chrome the team Stats / Matches tabs use. */
  .player-matches-tab__filters {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 0 0 12px;
  }

  .player-matches-tab__filters .competition-filter {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }

  .player-matches-tab__filters .season-filter {
    position: relative;
    flex: 0 0 auto;
  }

  .player-matches-tab__filters .select-trigger {
    width: 100%;
    justify-content: flex-start;
  }

  .season-filter__icon {
    width: 15px;
    height: 15px;
    color: var(--color-text-muted);
    flex-shrink: 0;
  }
}