/* roster feature styles (loaded on every page after style.css) */
.roster-table td { vertical-align: top; }
.roster-table .roster-tick { width: 40px; }
.roster-val { overflow-wrap: anywhere; max-width: 30ch; }
.roster-bulk { margin-bottom: 6px; }
.roster-officer { padding: 10px 0 14px; border-bottom: 1px solid var(--border); }
.roster-officer:last-child { border-bottom: 0; }
.roster-officer h3 { margin: 0 0 6px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.roster-officer legend { font-size: 14px; margin-bottom: 6px; overflow-wrap: anywhere; }
.roster-officer legend a { text-decoration: underline; text-underline-offset: 2px; }
.roster-choice { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 8px; }
.roster-choice input[type=radio] { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; flex: none; }
fieldset.roster-officer.is-off .table-container { opacity: .6; }
.roster-kpis { margin-bottom: 8px; }
@media (min-width: 720px) {
  .roster-apply-bar { position: sticky; bottom: 8px; z-index: 5; }
}
/* phones: each table row becomes a small card (no sideways scrolling); captions come from data-label */
@media (max-width: 640px) {
  .roster-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .roster-stack, .roster-stack tbody { display: block; width: 100%; }
  .roster-stack tbody tr { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .roster-stack.no-tick tbody tr { grid-template-columns: minmax(0, 1fr); }
  .roster-stack tbody tr:last-child { border-bottom: 0; }
  .roster-stack tbody td { display: block; grid-column: -2; padding: 1px 0; border: 0; white-space: normal; }
  .roster-stack tbody td.roster-tick { grid-column: 1; grid-row: 1 / span 6; width: auto; }
  .roster-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--muted-foreground); }
  .roster-stack .roster-val { max-width: none; }
}
@media (pointer: coarse) {
  .roster-choice input[type=radio] { width: 22px; height: 22px; }
}