/* tables.css -- Sortable stat tables */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-24) 0;
}

.table-context {
  color: var(--c-text-dim);
  font-size: 0.9375rem;
  line-height: 1.75;
  margin-bottom: var(--s-16);
  max-width: 780px;
}

.table-takeaway {
  color: var(--c-text-dim);
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.75;
  margin-top: var(--s-16);
  max-width: 780px;
}

.stat-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
}

.stat-table thead {
  border-bottom: 2px solid var(--c-accent);
}

.stat-table th {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-text-dim);
  padding: var(--s-8) var(--s-12);
  text-align: left;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.stat-table th[data-sort] {
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.stat-table th[data-sort]:hover {
  color: var(--c-accent);
}

.stat-table th[aria-sort="ascending"]::after {
  content: ' \2191';
  color: var(--c-accent);
}

.stat-table th[aria-sort="descending"]::after {
  content: ' \2193';
  color: var(--c-accent);
}

.stat-table td {
  padding: var(--s-8) var(--s-12);
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}

.stat-table tbody tr {
  transition: background var(--dur) var(--ease);
}

.stat-table tbody tr:hover {
  background: var(--c-surface-2);
}

/* Numeric alignment */
.stat-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Position column */
.stat-table .pos {
  color: var(--c-text-dim);
  font-weight: 600;
  width: 40px;
}

/* Team/player name */
.stat-table .name {
  font-weight: 600;
}

/* Highlight top row */
.stat-table tbody tr:first-child .name {
  color: var(--c-accent);
}