/* High-density data tables: sticky headers, thin horizontal borders, no row stripes. */
.data-table-wrap {
    overflow-x: auto;
}

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

.data-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface-container-low);
    font: var(--text-label-md);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--on-surface-variant);
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--outline-variant);
    white-space: nowrap;
}

.data-table tbody td {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--outline-variant);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background: var(--surface-container-low);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.cell-strong { font-weight: 700; color: var(--on-surface); }
.cell-muted { color: var(--on-surface-variant); font-size: var(--text-body-sm-size); }
.cell-right { text-align: right; }
.cell-center { text-align: center; }

/* A cell whose pieces stack vertically — e.g. a liberation point with its CLUB/FEDERATION badge on the
   line below. Inline, the wide FEDERATION badge wrapped under long names while CLUB stayed beside short
   ones, so no two rows lined up; stacking every row the same way is what keeps the column tidy at any
   screen width. */
.cell-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

/* Row action buttons sitting inline at the end (or centre) of a table row. */
.inline-actions { display: flex; align-items: center; gap: var(--space-sm); justify-content: flex-end; }

/* A slim stacked list of entities outside a full table (e.g. the amalgamation's waiting/excluded clubs):
   name and badge read from the left, the row's one action sits at the far right, rows hairline-separated. */
.row-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-top: 1px solid var(--outline-variant);
}
.row-list__item:first-of-type { border-top: 0; }
.row-list__item > form:last-child { margin-left: auto; }

/* An action column: right-aligned buttons that never wrap (replaces per-row inline text-align/white-space). */
.cell-actions {
    text-align: right;
    white-space: nowrap;
}
.cell-actions > * + * { margin-left: var(--space-sm); }

/* A row's management doors (Clubs / Races / People / Manage roster) on the platform setup tables. Laid out
   as equal grid tracks rather than inline buttons so every door in the column is the width of the widest —
   inline they wrapped into a ragged two-then-one line whose buttons were all different sizes. Below the
   breakpoint where the portal chrome itself goes mobile they stack into one full-width column (Ian, 3 Sep 2026). */
.cell-manage {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-sm);
}

/* A door label never wraps: a two-line "Manage roster" beside single-line neighbours made the stacked
   column ragged in height even though the tracks were equal in width. */
.cell-manage > .btn { white-space: nowrap; }

@media (max-width: 860px) {
    .cell-manage {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }
}

/* Centred variant: every column's header and cell content is centred — except the first (name) column,
   which stays left-aligned so the row reads from a clean edge. Higher specificity than the base rules so it
   also overrides .cell-right, and action-cell forms become inline-block so text-align can centre them. */
.data-table--center thead th,
.data-table--center tbody td { text-align: center; }
.data-table--center thead th:first-child,
.data-table--center tbody td:first-child { text-align: left; }
.data-table--center tbody td form { display: inline-block; }
.data-table--center .inline-actions { justify-content: center; }

/* Opt a centered table's FIRST column back into centring (it defaults left, above). The club race
   programme centres its liberation point + badge stack with the rest of the row; result sheets keep the
   left edge. The selectors repeat the first-child chain so they outrank the left default. */
.data-table--center thead th:first-child.cell-center,
.data-table--center tbody td:first-child.cell-center { text-align: center; }
td.cell-center > .cell-stack { align-items: center; }
td.cell-right > .cell-stack { align-items: flex-end; }

/* Velocity emphasis for podium finishers. */
.cell-velocity {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cell-velocity--lead {
    color: var(--secondary);
    font-weight: 800;
}

/* Position ranking chips. */
.rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: var(--radius-full);
    font: var(--text-label-md);
    border: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
    background: var(--surface-container-lowest);
}

.rank--1 { background: var(--podium-gold); color: #3a2600; border-color: transparent; }
.rank--2 { background: var(--podium-silver); color: #1f2937; border-color: transparent; }
.rank--3 { background: var(--podium-bronze); color: #fff; border-color: transparent; }