/* Sticky table headers, project-wide.
 *
 * The scroll box wraps only the <table>, so rows scroll under a pinned header.
 * - A plain `.table-responsive > .table` becomes that box automatically.
 * - Fastables and DataTables put their own controls next to the table, so they
 *   wrap the table in `.table-scroll` instead (see js/fastables.js and
 *   js/sticky-tables.js) and their search/pagination stay outside the box.
 * - Opt out on a single wrapper with `.no-sticky`.
 */
.table-scroll:not(.no-sticky),
.table-responsive:not(.no-sticky):has(> .table) {
    max-height: max(20rem, calc(100vh - 14rem));
    overflow: auto;
}

.table-scroll:not(.no-sticky) > .table > thead > tr > th,
.table-responsive:not(.no-sticky) > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* border-collapse drops the cell border once it sticks; redraw it */
    box-shadow: inset 0 -1px 0 var(--bs-table-border-color, #dee2e6);
}

/* Theme tables have a transparent bg; give plain headers an opaque one.
   Headers with a .table-* colour class already have their own. */
.table-scroll:not(.no-sticky) > .table > thead:not([class*="table-"]) > tr > th,
.table-responsive:not(.no-sticky) > .table > thead:not([class*="table-"]) > tr > th {
    background-color: var(--bs-card-bg, var(--bs-body-bg, #fff));
}