/*
    Sticky layout for VStudentList's student x assessment grid (.vsl-table).

    These rules live in a plain stylesheet rather than a VStudentList.razor.css because
    index.html does not link the Blazor scoped-CSS bundle, and because they have to reach
    MudBlazor's own .mud-table-container element, which scoped CSS cannot target.

    Selector specificity matters here: MudBlazor's own FixedHeader rules are written as
    `.mud-simple-table.mud-table-sticky-header ...`, so the overrides below deliberately
    include .mud-table-sticky-header to match or beat them.
*/

.vsl-table {
    /* Row 1 of the header is pinned at top:0 and row 2 is pinned just below it, so row 1's
       height has to be pinned down exactly: 6px + 20px line + 6px + 1px border. */
    --vsl-head1-h: 33px;
    --vsl-student-w: 200px;
    --vsl-grade-w: 64px;
}

/* The scroll container. MudBlazor sets max-height:100% here, which resolves to none
   because the parent's height is auto - so cap it explicitly at equal specificity. */
.vsl-table.mud-table-sticky-header .mud-table-container {
    max-height: var(--vsl-max-h, 70vh);
    overflow: auto;
}

/* Two header rows: MudBlazor pins both at top:0, stacking them on top of each other.
   Give row 1 a deterministic height and push row 2 down by exactly that. */
.vsl-table.mud-table-sticky-header table thead tr:first-child th {
    height: var(--vsl-head1-h);
    box-sizing: border-box;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 20px;
    top: 0;
    z-index: 3;
}

.vsl-table.mud-table-sticky-header table thead tr:nth-child(2) th {
    top: var(--vsl-head1-h);
    z-index: 3;
}

/* Frozen left columns. Targeted by class, not :nth-child, because the Grade column is
   only rendered when the class spans more than one grade. */
.vsl-table .vsl-col-student,
.vsl-table .vsl-col-grade {
    position: sticky;
    box-sizing: border-box;
    background-color: var(--mud-palette-surface);
    z-index: 2;
}

.vsl-table .vsl-col-student {
    left: 0;
    width: var(--vsl-student-w);
    min-width: var(--vsl-student-w);
    max-width: var(--vsl-student-w);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid var(--mud-palette-table-lines);
}

.vsl-table .vsl-col-student > * {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vsl-table .vsl-col-grade {
    left: var(--vsl-student-w);
    width: var(--vsl-grade-w);
    min-width: var(--vsl-grade-w);
    max-width: var(--vsl-grade-w);
    text-align: center;
    border-right: 2px solid var(--mud-palette-table-lines);
}

/* Whichever frozen column is last carries the seam. */
.vsl-table:not(.vsl-has-grade) .vsl-col-student {
    border-right-width: 2px;
}

/* The top-left corner cells overlap both the pinned header and the frozen column, so they
   have to sit above both. Declared after the header rules to win the specificity tie. */
.vsl-table.mud-table-sticky-header table thead tr th.vsl-col-student,
.vsl-table.mud-table-sticky-header table thead tr th.vsl-col-grade {
    z-index: 4;
}

/* Header row 1's spacer sits above the frozen columns, so pin it too - otherwise the
   year labels slide across the corner as the table scrolls right. */
.vsl-table.mud-table-sticky-header table thead tr th.vsl-corner {
    position: sticky;
    left: 0;
    z-index: 4;
    background-color: var(--mud-palette-surface);
    border-right: 2px solid var(--mud-palette-table-lines);
}

/* Score cells are short - trim MudBlazor's 16px side padding so more columns fit before
   the table needs scrolling at all. Beats `.mud-simple-table.mud-table-dense * tr td`. */
.vsl-table.mud-table-dense table tr .vsl-cell-score {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 56px;
    text-align: center;
}

.vsl-table .vsl-empty {
    color: var(--mud-palette-text-disabled);
}