/* Attendance variant 2: zebra rows and actual calendar-week separators. */
.roster-matrix {
  --roster-rule: color-mix(in srgb, var(--line) 72%, var(--text));
  --roster-stripe: color-mix(in srgb, var(--panel) 92%, var(--text));
  border: 1px solid var(--roster-rule);
  border-radius: 6px;
  overflow: clip;
  font-variant-numeric: tabular-nums;
}
.roster-matrix th, .roster-matrix td {
  height: 60px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--roster-rule);
}
.roster-matrix thead th, .roster-matrix thead th:first-child {
  background: var(--sidebar);
  border-bottom: 2px solid var(--roster-rule);
  color: var(--text);
  font-size: 12px;
}
.roster-matrix .lesson-column { min-width: 78px; }
.roster-matrix .lesson-column > a { font-weight: 600; text-underline-offset: 3px; }
.roster-matrix .lesson-column small { margin-top: 4px; }
.roster-matrix .balance-column { min-width: 88px; border-right: 2px solid var(--roster-rule); }
.roster-matrix tbody tr { --roster-base: var(--panel); --roster-row: var(--roster-base); }
.roster-matrix tbody tr:nth-child(even) { --roster-base: var(--roster-stripe); }
.roster-matrix tbody tr > td, .roster-matrix tbody tr > th:first-child { background: var(--roster-row); }
.roster-matrix tbody tr:focus-within { --roster-row: color-mix(in srgb, var(--roster-base) 97%, var(--text)); }
.roster-matrix tbody tr:last-child > * { border-bottom: 0; }
.roster-matrix .week-start { border-left: 1px solid var(--roster-rule); }
.roster-matrix .lesson-canceled > a { text-decoration: line-through; }
.roster-matrix .row-title { display: inline-block; line-height: 1.4; }
.roster-matrix .roster-empty { text-align: left; color: var(--muted); }
.roster-matrix .attendance-label.no_record,
.roster-matrix .attendance-label.unmarked {
  background: color-mix(in srgb, var(--roster-row) 96%, var(--text));
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--muted));
}
@media (hover: hover) {
  .roster-matrix tbody tr:hover { --roster-row: color-mix(in srgb, var(--roster-base) 97%, var(--text)); }
}
@media (max-width: 600px) {
  .roster-matrix th, .roster-matrix td { padding: 10px 7px; }
  .roster-matrix .balance-column { min-width: 74px; }
  .roster-matrix .lesson-column { min-width: 74px; }
}