/* Report pages: the table scrolls inside its own box and the header row stays fixed at the top.
   Add "report-table-scroll" next to "table-responsive" on a report table's wrapper. */
.report-table-scroll {
    max-height: 65vh;
    overflow-y: auto;
}

    /* The header is either a <thead>, or the first row of <th> cells when the page has no <thead>.
       Nested tables are left alone. */
    .report-table-scroll table:not(table table) > thead,
    .report-table-scroll table:not(table table) > tbody:first-child > tr:first-child:has(> th),
    .report-table-scroll table:not(table table) > tr:first-child:has(> th) {
        position: sticky;
        top: 0;
        z-index: 2;
        /* Same as the card behind it, so the header keeps its normal colour */
        background-color: #fff;
    }

.dark-mode .report-table-scroll table:not(table table) > thead,
.dark-mode .report-table-scroll table:not(table table) > tbody:first-child > tr:first-child:has(> th),
.dark-mode .report-table-scroll table:not(table table) > tr:first-child:has(> th) {
    background-color: #2a2a4a;
}

.transparent-mode .report-table-scroll table:not(table table) > thead,
.transparent-mode .report-table-scroll table:not(table table) > tbody:first-child > tr:first-child:has(> th),
.transparent-mode .report-table-scroll table:not(table table) > tr:first-child:has(> th) {
    background-color: var(--transparent-body);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

/* A checkbox column (e.g. Closed Project Report "verified"). The theme makes .form-check-input absolute with a
   negative left margin, which pushes it out of the cell; put it back in the flow, centred in its column. */
.report-check-cell {
    width: 50px;
    text-align: center;
    vertical-align: middle !important;
}

    .report-check-cell .form-check-input {
        position: static;
        float: none;
        margin: 0;
        width: 1.15rem;
        height: 1.15rem;
        vertical-align: middle;
        cursor: pointer;
    }

/* Printing shows the whole table, not just the scrolled part */
@media print {
    .report-table-scroll {
        max-height: none;
        overflow: visible;
    }
}