/* FMT public result tables — precision & restraint.
   Scoped to opt-in classes so Bootstrap defaults are untouched elsewhere. */

/* --- Numeric cells: monospaced tabular figures, right aligned --- */
.fmt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;
}
.fmt-num--rank {
    text-align: left;
}

/* Points cells render the value inside .points-popover__trigger — give it the
   same tabular mono treatment without touching every cell's markup. */
.points-popover__trigger {
    font-variant-numeric: tabular-nums;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, "Liberation Mono", monospace;
}

/* --- Zebra striping ---
   Bootstrap .table paints the background on CELLS (--bs-table-bg / box-shadow
   on `> *`), not on <tr>. So target the cells, never the row. */
.fmt-zebra tbody tr:nth-child(even) > * {
    background-color: #fafbfc;
}

/* --- Top-3 subtle metallic rail ---
   border-left (not box-shadow) so it never fights Bootstrap's inset cell
   box-shadow. :is(td,th) covers both <td>-first and <th scope=row>-first. */
.fmt-rank tbody tr:nth-child(1) > :is(td, th):first-child {
    border-left: 3px solid #b8860b;
}
.fmt-rank tbody tr:nth-child(2) > :is(td, th):first-child {
    border-left: 3px solid #8a8d91;
}
.fmt-rank tbody tr:nth-child(3) > :is(td, th):first-child {
    border-left: 3px solid #a9712e;
}

/* Current-user highlight always wins over zebra/top-3 (cells, later in source).
   Two mechanisms exist in the codebase: .fmt-table-row-highlight and
   Bootstrap's .table-primary (category leaderboard). */
.fmt-zebra tbody tr.fmt-table-row-highlight > *,
tr.fmt-table-row-highlight > * {
    background-color: #f1f5f9 !important;
}
.fmt-zebra tbody tr.table-primary > * {
    background-color: #cfe2ff !important;
}

/* --- Mobile: sticky first column (rank) ---
   Explicit solid backgrounds per row state (no `inherit`: with Bootstrap the
   cell would otherwise read transparent / off-tone). */
@media (max-width: 767.98px) {
    .table-responsive table.fmt-sticky-1 > :is(thead, tbody) > tr > :is(td, th):first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #fff;
    }
    .table-responsive table.fmt-sticky-1 > thead > tr > th:first-child {
        z-index: 3;
    }
    .fmt-sticky-1.fmt-zebra tbody tr:nth-child(even) > :is(td, th):first-child {
        background-color: #fafbfc;
    }
    .fmt-sticky-1 tbody tr.fmt-table-row-highlight > :is(td, th):first-child {
        background-color: #f1f5f9;
    }
}