/* ==========================================================================
   StatsTable — shared sortable stats table (research-stats foundation)
   Sticky header row + sticky first (player) column. Table-only styling —
   host pages own filter bars, pagination, and the modal chrome around it.
   ========================================================================== */

.stats-table__scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hidden-scrollbar idiom used elsewhere (e.g. standings.css scoreboard strip) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
  background: var(--bg-card);
  border-radius: var(--border-radius-default);
}

.stats-table__scroll::-webkit-scrollbar {
  display: none;
}

/* Keyboard users tab into the scroll region and arrow-scroll it — needs a
   visible focus ring since the region itself has no default browser chrome. */
.stats-table__scroll:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: 2px;
}

/* Same clip pattern as .lot-sr-only (lottery.css) / .draft-status-header__live-region. */
.stats-table__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.stats-table {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-variant-numeric: tabular-nums;
}

/* Sticky header row.
   Local z-index ladder (highest -> lowest), scoped to this component:
     corner  (.stats-table__th--corner)   z-index 3
     header  (.stats-table__th)           z-index 2
     sticky player column (body)          z-index 1
   Corner must beat both the header row and the sticky body column at their
   shared (0,0) intersection during scroll. Header row must beat the sticky
   body column so it stays on top during vertical scroll. */
.stats-table__thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.stats-table__th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-structure-deep);
  color: var(--text-inverse);
  padding: 0;
  border-bottom: 1px solid var(--border-dark);
  white-space: nowrap;
}

.stats-table__th--corner {
  left: 0;
  z-index: 3;
  min-width: 140px;
  width: 140px;
}

/* Tap-to-sort header button fills the th so the whole cell is the target,
   not just the label text. min-height enforces the 44px touch target. */
.stats-table__sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
}

/* Active-sort state reads via weight/underline, not a color swap — every
   color option distinct enough from --text-inverse to be visible against
   --color-structure-deep at 10.4px small-text sizing failed the 4.5:1 AA
   floor (--color-action-light measured 3.23:1). */
.stats-table__th--active .stats-table__sort-btn {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.stats-table__td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  white-space: nowrap;
}

.stats-table__td--numeric {
  font-family: var(--font-mono);
  text-align: right;
  min-width: 56px;
}

.stats-table__td--active {
  background: var(--color-structure-bg);
}

/* Sticky player-identity column — see StatsTable.js codenote for why this
   is safe next to the matrix's reverted sticky-left EXPERIMENT (that
   reversion pinned a wide TEAM HEADER, not a narrow row-identity gutter
   like this one). */
.stats-table__td--sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-card);
  min-width: 140px;
  width: 140px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--border-default);
}

.stats-table__row:nth-child(even) .stats-table__td--sticky {
  background: var(--color-structure-bg);
}

.stats-table__row:nth-child(even) .stats-table__td {
  background: var(--color-structure-bg);
}

/* Skeleton loading state */
.stats-table__row--skeleton .stats-table__skeleton-cell {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--color-structure-lightest) 25%,
    var(--color-structure-lighter) 37%,
    var(--color-structure-lightest) 63%
  );
  background-size: 400% 100%;
  animation: stats-table-skeleton-pulse 1.4s ease infinite;
  border-radius: var(--border-radius-sm);
}

@keyframes stats-table-skeleton-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-table__row--skeleton .stats-table__skeleton-cell {
    animation: none;
  }
}

/* Mobile: narrow sticky player column further to leave more room for stat
   columns on small viewports. */
@media (max-width: 480px) {
  .stats-table__th--corner,
  .stats-table__td--sticky {
    min-width: 110px;
    width: 110px;
    max-width: 110px;
  }
}