/* Data tables (e.g. the team roster, the teams list): striped rows, a hover
   highlight, optional sortable headers. Wrap in .table-scroll. */

/* Lets a wide table scroll sideways on small screens instead of the page.
   position: relative keeps absolutely positioned children (e.g.
   .visually-hidden labels) inside the scroll box, not widening the page. */
.table-scroll {
    position: relative;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.0625rem solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.data-table thead th {
    border-bottom-width: 0.125rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--row-stripe);
}

.data-table tbody tr:hover {
    background-color: color-mix(in oklch, var(--tertiary) 18%, transparent);
}

/* Rows that open their main link when clicked (Stimulus row-link). */
.data-table tbody.is-row-linked tr {
    cursor: pointer;
}

.data-table__number {
    width: 3.5rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.data-table td.data-table__number {
    font-weight: 700;
}

.data-table__name {
    font-weight: 700;
}

.data-table__actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.data-table__note,
.data-table__muted {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Sortable column headers (?sort=...&dir=...). */
.data-table__sortable a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
}

.data-table__sortable a:hover,
.data-table__sortable a:focus-visible {
    text-decoration: underline;
}

.data-table__sortable[aria-sort] a {
    text-decoration: underline;
    text-decoration-thickness: 0.15rem;
}

.data-table__sort-arrow {
    font-size: 0.65rem;
}

.data-table__number.data-table__sortable a {
    justify-content: flex-end;
    width: 100%;
}