.gb-scroll {
    overflow: auto;
    max-height: 70vh;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #fff;
}

table.gb {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

table.gb th, table.gb td {
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 0;
    white-space: nowrap;
    background-clip: padding-box;
}

/* sticky header row */
table.gb thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f7f7f7;
    padding: 5px 8px;
    text-align: center;
    vertical-align: bottom;
}

/* sticky-left student column */
table.gb .col-student {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    padding: 4px 12px;
    text-align: left;
    min-width: 170px;
    font-weight: 500;
    box-shadow: 1px 0 0 #e0e0e0;
}
table.gb thead .col-student { z-index: 4; background: #f0f0f0; }

/* sticky-right total column */
table.gb .col-total {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    text-align: center;
    min-width: 70px;
    font-weight: 600;
    padding: 4px 8px;
    box-shadow: -1px 0 0 #e0e0e0;
}
table.gb thead .col-total { z-index: 4; background: #f0f0f0; }

/* score cell input */
.gb-cell {
    width: 54px;
    height: 30px;
    border: 1.5px solid transparent;
    text-align: center;
    font-size: 13px;
    background: transparent;
    outline: none;
    border-radius: 3px;
}
.gb-cell:focus {
    border-color: #1976d2;
    background: #e3f2fd;
}
.gb-cell.dirty {
    border-color: #d32f2f;
    background: #ffebee;
}

/* alternating row colors to reduce tracking fatigue. Targets td (specificity 0,2,4) so it also paints
   the sticky Student/Total columns, which otherwise cover the stripe with their own white background. */
table.gb tbody tr:nth-child(even) td { background: #f4f8f3; }
table.gb tbody tr:nth-child(even) .col-student,
table.gb tbody tr:nth-child(even) .col-total { background: #eef4ec; }

/* whole-row hover highlight for cross-tracking (wins over zebra by source order; focus/name rules below
   are more specific and still win on the focused row) */
table.gb tbody tr:hover td { background: #e8f5e9; }
table.gb tbody tr:hover .col-student,
table.gb tbody tr:hover .col-total { background: #dcedda; }

/* highlight the row's student name while any cell in the row is focused */
table.gb tbody tr:focus-within .col-student { background: #d6ead2; }

.gb-studlink { cursor: pointer; }
.gb-studlink:hover { text-decoration: underline; color: #2e7d32; }
/* Discreet "has accommodations" marker: a faint dotted underline under the student's name. Not
   color-coded, so a projected screen never reveals IEP vs 504 — a teacher just notices and clicks. */
.gb-studlink.gb-accom { border-bottom: 1px dotted #9e9e9e; }
.gb-asg-name { font-weight: 600; }
.gb-cat { font-size: 10px; opacity: .75; text-transform: uppercase; letter-spacing: .3px; }
.gb-max { font-size: 11px; opacity: .6; }
.gb-total-good { color: #2e7d32; }
.gb-total-warn { color: #e65100; }
.gb-total-bad  { color: #c62828; }

/* --- Date/time picker pop-up width ---
   A max-width on a MudDatePicker/MudTimePicker (used to keep the INPUT field compact) is also applied
   by MudBlazor to the pop-up panel, which squeezes the ~310px calendar/clock so its right columns are
   clipped (only "half" the picker shows). Pin the pop-up panel to its natural width so the whole month
   grid is always visible, in both the inline popover and the dialog variants. The input keeps its own
   width — these classes are only on the pop-up content, not the field. */
.mud-picker-popover-paper,
.mud-picker-container,
.mud-picker-content {
    min-width: 312px !important;
    max-width: none !important;
}
.mud-picker-popover-paper { overflow-x: visible !important; }