/* Attendance dialog: shared theme tokens, one compact row on every screen. */
:root{--roll-pill-gap:5px;--roll-pill-height:44px;--roll-phone-status:58px;--roll-phone-time:64px;--roll-phone-correction:112px;--roll-phone-cell-padding:3px}
#roll-modal-content{overflow-x:hidden}
.roll-view{min-width:0;max-width:100%}
.roll-table-scroll{overflow-x:hidden;overflow-y:auto}
.roll-table{width:100%;min-width:0;table-layout:fixed;white-space:nowrap}
.roll-table th:nth-child(1){width:25%}.roll-table th:nth-child(2){width:17%}.roll-table th:nth-child(3){width:14%}.roll-table th:nth-child(4){width:15%}.roll-table th:nth-child(5){width:29%}
.roll-table td,.roll-table th{min-width:0;overflow-wrap:normal;word-break:normal;white-space:nowrap;vertical-align:middle}
.roll-table td:last-child{min-width:0}
.roll-student strong,.roll-student-number bdi{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.roll-table .roll-student-number,.roll-table .roll-status,.roll-table .roll-response-time,.roll-table .roll-correction{text-align:center}
.roll-table .roll-student-number bdi,.roll-table .roll-response-time bdi{text-align:center;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.roll-correction form{margin:0;min-width:0}
.roll-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--roll-pill-gap);min-width:0}
.roll-pill{display:inline-flex;justify-content:center;align-items:center;gap:0;min-width:0;width:100%;height:var(--roll-pill-height);padding:0 5px;border:1px solid var(--control-border);border-radius:999px;background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;position:relative;touch-action:manipulation;transition:background var(--duration),color var(--duration),border-color var(--duration)}
.roll-pill:hover:not(:disabled){background:var(--surface-soft);color:var(--text);border-color:var(--accent)}
.roll-pill[aria-pressed=true]{font-weight:800;box-shadow:inset 0 0 0 1px currentColor}
.roll-pill[data-state=present][aria-pressed=true]{color:var(--success);background:var(--success-bg);border-color:var(--success)}
.roll-pill[data-state=absent][aria-pressed=true]{color:var(--danger);background:var(--danger-bg);border-color:var(--danger)}
.roll-pill[data-state=partial][aria-pressed=true]{color:var(--warning);background:var(--warning-bg);border-color:var(--warning)}
.roll-pill:disabled{opacity:1;cursor:wait}
.roll-pill.is-pending{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:-2px;animation:roll-save-pulse .8s ease-in-out infinite}
.roll-pill:focus-visible{outline-offset:2px}
@keyframes roll-save-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(min-width:768px) and (max-width:1000px){.roll-table td,.roll-table th{padding-inline:8px;font-size:11px}.roll-pill{font-size:11px}}
@media(max-width:767px){
  .roll-modal,.roll-modal.is-monitor{width:calc(100vw - 16px)}
  #roll-modal-content{scrollbar-gutter:auto}
  .roll-table-scroll{border:1px solid var(--border);border-radius:var(--radius-sm);scrollbar-gutter:auto}
  /* Keep one native table and its actual headers at every width. */
  .roll-table{display:table;width:100%}
  .roll-table thead{display:table-header-group;position:static;width:auto;height:auto;clip:auto;overflow:visible}
  .roll-table tbody{display:table-row-group;width:auto}
  .roll-table tr{display:table-row;width:auto;padding:0;margin:0;border:0;border-radius:0;background:var(--surface)}
  .roll-table td,.roll-table th{display:table-cell;width:auto;padding:9px 5px;border:0;border-block-end:1px solid var(--border);min-width:0;font-size:11px}
  .roll-table th{font-size:10px;color:var(--muted)}
  .roll-table tbody tr:last-child td{border-block-end:0}
  .roll-table td::before{display:none}
  .roll-table .roll-student strong{font-size:12px;line-height:1.7}
  .roll-table .roll-status .badge{display:inline-block;max-width:100%;padding:4px 2px;font-size:10px;line-height:1.8;white-space:nowrap}
  .roll-table .roll-correction{grid-column:auto;min-width:0}
  .roll-pill{font-size:11px;padding-inline:1px}
  .roll-pill:focus-visible{outline-offset:-2px}
}
@media(max-width:599px){
  /* Only the student-number column is optional on narrow phones. */
  .roll-modal.is-monitor #roll-modal-content{padding-inline:10px}
  .roll-table .roll-student-number{display:none}
  .roll-table th:first-child{width:auto}
  .roll-table th.roll-status{width:var(--roll-phone-status)}
  .roll-table th.roll-response-time{width:var(--roll-phone-time)}
  .roll-table th.roll-correction{width:var(--roll-phone-correction)}
  .roll-table td,.roll-table th{padding-inline:var(--roll-phone-cell-padding)}
  .roll-pills{--roll-pill-gap:4px}
}
@media(max-width:359px){:root{--roll-phone-status:54px;--roll-phone-time:58px;--roll-phone-correction:102px}.roll-pills{--roll-pill-gap:3px}.roll-pill{font-size:10.5px}.roll-table .roll-student strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.roll-pill.is-pending{animation:none;outline:3px dashed var(--accent)}.roll-pill{transition:none}}
@media(forced-colors:active){.roll-pill{border-color:ButtonText}.roll-pill[aria-pressed=true]{border:3px solid Highlight}.roll-pill.is-pending{outline:2px dashed Highlight}}