/* v18.5 - continuous month, compact read view, lazy row editors. */
#app:has(.roster-month-view) { overflow-x:clip; overflow-y:visible; }
#app:has(.roster-month-view) .topbar { background:#fff; }
.admin-shell:has(> [data-roster-view]) > .admin-tabbar { position:static; }
.roster-month-view { min-width:0; margin:18px 0; scroll-margin-top:calc(var(--roster-topbar,84px) + 12px); }
.roster-month-view *, .roster-month-view *::before, .roster-month-view *::after { box-sizing:border-box; }
.month-view-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.month-eyebrow { color:#0c6683; letter-spacing:.08em; font-size:10px; font-weight:850; margin-bottom:5px; }
.month-view-heading h2 { margin:0; font-size:24px; line-height:1.35; color:#152b44; }
.month-view-heading h2 > span { display:block; color:#536479; font-size:15px; font-weight:600; margin-top:3px; }
.month-view-actions { display:flex; flex-wrap:wrap; gap:8px; }
.month-controls { display:grid; grid-template-columns:minmax(260px,1.5fr) minmax(160px,1fr) minmax(160px,1fr) auto; gap:12px; align-items:end; }
.month-controls .op-field { min-width:0; font-size:12px; }
.month-controls > .btn { min-height:44px; }
.month-switch { display:flex; gap:5px; min-width:0; }
.month-switch .input { flex:1 1 auto; width:0; min-width:0; padding-left:10px; padding-right:6px; }
.month-switch .btn { flex:0 0 38px; min-width:38px; padding:0; min-height:44px; font-size:25px; line-height:1; }
.month-search-row { display:flex; gap:16px; align-items:center; margin:12px 0; }
.month-search { display:block; flex:1; max-width:440px; min-width:0; }
.month-search .input { width:100%; min-height:42px; }
.month-scroll-hint { margin-left:auto; font-size:12px; color:#5e6e80; }
.month-scroll-hint span { margin:0 8px; }
.month-summary { display:flex; gap:8px 20px; flex-wrap:wrap; padding-bottom:12px; font-size:12px; color:#536479; min-height:28px; }
.month-summary b { color:#1e334d; font-variant-numeric:tabular-nums; }
.month-summary .month-filter-active { color:#89510f; font-weight:750; }
.roster-month-scroll { position:relative; isolation:isolate; overflow-y:auto; overflow-x:hidden; height:clamp(340px,58vh,700px); height:clamp(340px,58dvh,700px); scrollbar-gutter:stable; scrollbar-width:auto; scroll-behavior:auto; overflow-anchor:none; border:1px solid #dce4ed; border-radius:16px; background:#f2f5f9; padding:0 10px 10px; }
.roster-month-scroll:focus-visible { outline:3px solid #0a678f; outline-offset:3px; }
.month-day { position:relative; margin:0 0 12px; border:1px solid #dce4ed; border-top:0; background:#fff; border-radius:0 0 12px 12px; min-width:0; }
.month-day:first-child { border-top:0; }
.month-day:last-child { margin-bottom:0; }
.month-day-header { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:12px; min-height:72px; padding:12px 14px; background:#eaf0f6; border-bottom:1px solid #d8e2ec; color:#1c344e; }
.month-date-mark { display:grid; place-items:center; min-width:43px; height:43px; border-radius:11px; background:#fff; color:#233e5c; font-size:24px; font-weight:850; font-variant-numeric:tabular-nums; }
.month-day-header h3 { margin:0; font-size:15px; font-weight:800; line-height:1.4; }
.month-day-header h3 > span { text-transform:capitalize; }
.month-day-header h3 small { display:block; font-size:12px; font-weight:500; color:#55687d; margin-top:2px; }
.month-day-totals { margin-left:auto; text-align:right; line-height:1.6; flex:none; }
.month-day-totals strong { font-size:13px; display:block; }
.month-day-totals small { font-size:11px; color:#53677e; display:block; }
.month-day-totals span { padding:0 5px; opacity:.65; }
.month-day.is-weekend .month-day-header { background:#f0eef7; }
.month-day.is-weekend .month-date-mark { color:#625278; }
.month-day.is-today { border-color:#6abdb4; box-shadow:inset 3px 0 0 #119081; }
.month-day.is-today .month-day-header { background:#dcf3ed; border-bottom-color:#9bd3c8; }
.month-day.is-today .month-date-mark { color:#fff; background:#087d72; }
.month-today-badge { display:inline-block; font-size:10px; line-height:1.6; border-radius:5px; background:#087d72; color:#fff; padding:1px 7px; vertical-align:middle; margin-left:5px; }
.month-column-head,.month-entry-summary { display:grid; grid-template-columns:minmax(170px,1.8fr) minmax(100px,.9fr) minmax(130px,1.2fr) minmax(150px,1.3fr) 108px; gap:16px; align-items:center; }
.month-column-head { padding:9px 16px; background:#f8fafc; font-size:10px; font-weight:750; color:#68788b; border-bottom:1px solid #e6ebf1; }
.month-entry { min-width:0; border-bottom:1px solid #e8edf3; }
.month-entry:last-child { border-bottom:0; }
.month-entry:nth-of-type(even) { background:#fbfcfe; }
.month-entry-summary { padding:13px 16px; min-height:78px; }
.month-entry-summary > div { min-width:0; overflow-wrap:anywhere; }
.month-person strong { display:block; font-size:14px; font-weight:750; line-height:1.4; margin-bottom:5px; color:#1a304b; }
.month-depot { display:inline-block; font-size:10px; font-weight:800; line-height:1.5; padding:2px 7px; border-radius:5px; border:1px solid transparent; }
.depot-one { background:#eaf1ff; color:#255fa6; border-color:#ceddf8; }
.depot-two { background:#f2ebff; color:#694697; border-color:#e0d3f3; }
.month-request { display:inline-block; font-size:10px; font-weight:750; color:#9a580d; margin-left:8px; }
.month-shift strong { display:block; font-size:17px; font-weight:800; line-height:1.35; font-variant-numeric:tabular-nums; color:#253c57; }
.month-shift > span:not(.month-cell-label) { color:#5b6f86; font-size:12px; }
.month-plate { display:block; font-size:14px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-weight:750; letter-spacing:.02em; color:#233a54; }
.month-car small { display:block; color:#64768a; font-size:11px; line-height:1.45; margin-top:4px; }
.month-no-car { display:inline-block; font-size:11px; line-height:1.5; font-weight:650; color:#955712; background:#fff5de; border-radius:6px; padding:5px 8px; }
.month-extras > span:not(.month-cell-label) { display:block; color:#63748a; font-size:11px; line-height:1.5; }
.month-extras b { font-weight:600; color:#354c67; }
.month-extras small { display:block; color:#78869a; font-size:11px; line-height:1.5; margin-top:4px; }
.month-extras small.month-home { color:#07766d; font-weight:700; }
.month-entry-summary .btn.month-edit-button { font-size:12px; min-height:42px; padding:8px 9px; border:1px solid #dce5ee; background:#fff; box-shadow:none; color:#254761; white-space:normal; }
.month-entry-summary .btn.month-edit-button:hover { background:#edf5fa; border-color:#a5c2d5; }
.month-cell-label { display:none; }
.month-entry-note { margin:0 16px 10px; padding:7px 9px; border-left:3px solid #e9c36a; background:#fffaf0; font-size:11px; color:#805a25; line-height:1.5; overflow-wrap:anywhere; }
.month-empty { margin:0; padding:18px 16px; color:#758295; font-size:12px; line-height:1.6; }
.month-entry.is-editing { background:#f5faff; box-shadow:inset 3px 0 0 #578eaf; }
.month-entry-editor[hidden] { display:none!important; }
.month-entry-editor { padding:16px; border-top:1px dashed #bdcfdf; background:#f4f8fc; }
.month-editor-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.month-editor-fields .op-field { min-width:0; }
.month-editor-fields .select { min-width:0; max-width:100%; width:100%; font-size:14px; min-height:44px; text-overflow:ellipsis; }
.month-editor-fields .btn,.month-editor-fields .op-check { min-height:44px; }
.month-editor-footer { display:flex; align-items:center; gap:16px; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid #dce5ee; }
.month-editor-footer small { font-size:11px; color:#62748a; line-height:1.5; }
.month-editor-footer .btn { flex:none; font-size:12px; min-height:44px; }
.month-bottom-note { display:flex; justify-content:space-between; gap:12px; padding-top:10px; font-size:11px; line-height:1.5; color:#6d7c8f; }
.month-bottom-note [data-roster-status] { min-height:0; font-size:11px; text-align:right; flex:none; }
.roster-month-view .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1100px) {
 .month-column-head,.month-entry-summary { grid-template-columns:minmax(155px,1.7fr) minmax(88px,.8fr) minmax(110px,1fr) minmax(135px,1.2fr) 96px; gap:10px; }
 .month-controls { grid-template-columns:minmax(230px,1.4fr) minmax(145px,1fr) minmax(135px,1fr) auto; gap:8px; }
}
@media(max-width:900px) {
 .month-column-head { display:none; }
 .month-entry-summary { grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px 16px; padding:14px; }
 .month-person { grid-column:1/3; }
 .month-edit-button { grid-column:3; grid-row:1; }
 .month-shift { grid-column:1; grid-row:2; }
 .month-car { grid-column:2/4; grid-row:2; }
 .month-extras { grid-column:1/4; display:flex; gap:6px 12px; flex-wrap:wrap; padding-top:8px; border-top:1px solid #e5ebf2; }
 .month-extras small { margin:0; }
 .month-cell-label { display:block; font-size:10px; color:#7b8898; font-weight:650; margin-bottom:3px; }
 .month-extras .month-cell-label { display:none; }
 .month-controls { grid-template-columns:minmax(158px,1fr) minmax(0,1fr) auto; }
 .month-controls > .op-field:first-child { grid-column:1/3; }
 .month-controls > .btn { grid-column:3; grid-row:1; }
 .month-controls > .op-field:nth-child(2) { grid-column:1; }
 .month-controls > .op-field:nth-child(3) { grid-column:2/4; }
 .month-scroll-hint { display:none; }
 .month-search { max-width:none; }
 .month-editor-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .month-editor-footer { flex-wrap:wrap; gap:10px; }
}
@media(max-width:520px) {
 .card.panel.roster-month-view { padding:12px; border-radius:18px; }
 .month-view-heading { gap:10px; margin-bottom:12px; }
 .month-eyebrow { font-size:9px; }
 .month-view-heading h2 { font-size:21px; }
 .month-view-heading h2 > span { font-size:13px; }
 .month-view-actions { width:100%; gap:6px; }
 .month-view-actions .btn { flex:1; min-height:38px; padding:8px; font-size:12px; }
 .month-controls { gap:8px; }
 .month-controls .op-field { font-size:11px; gap:4px; }
 .month-controls .input,.month-controls .select { padding:8px; min-height:44px; }
 .month-controls > .btn { padding:8px 11px; font-size:12px; }
 .month-switch { gap:4px; }
 .month-switch .btn { min-width:30px; flex-basis:30px; }
 .month-search-row { margin:10px 0; }
 .month-search .input { font-size:16px; padding:9px; min-height:44px; }
 .month-summary { gap:4px 12px; font-size:11px; padding-bottom:10px; }
 .roster-month-scroll { padding:0 5px 5px; border-radius:12px; height:clamp(350px,52dvh,600px); scrollbar-gutter:auto; }
 .month-day { margin-bottom:10px; }
 .month-day-header { gap:8px; padding:10px 9px; min-height:66px; }
 .month-date-mark { min-width:34px; width:34px; height:38px; font-size:21px; border-radius:8px; }
 .month-day-header h3 { font-size:13px; }
 .month-day-header h3 small { font-size:10px; }
 .month-day-totals strong { font-size:11px; }
 .month-day-totals small { font-size:10px; }
 .month-day-totals span { padding:0 2px; }
 .month-today-badge { font-size:9px; padding:1px 5px; margin-left:3px; }
 .month-entry-summary { padding:12px 10px; gap:10px; }
 .month-person strong { font-size:13px; }
 .month-entry-summary .btn.month-edit-button { font-size:11px; min-height:44px; max-width:86px; padding:7px; }
 .month-entry-editor { padding:12px 10px; }
 .month-editor-fields { grid-template-columns:minmax(0,1fr); gap:12px; }
 .month-editor-footer .btn { width:100%; }
 .month-bottom-note { font-size:10px; }
 .month-empty { padding:16px 12px; font-size:11px; }
}
@media print {
 .roster-month-scroll { height:auto!important; overflow:visible!important; padding:0; border:0; }
 .month-day-header { position:static; }
 .month-entry { break-inside:avoid; }
 .month-controls,.month-view-actions,.month-search-row,.month-edit-button,.month-entry-editor { display:none!important; }
}

@media(max-width:359px) {
 .month-controls { grid-template-columns:minmax(0,1fr) auto; }
 .month-controls > .op-field:first-child { grid-column:1/-1; grid-row:1; }
 .month-controls > .op-field:nth-child(2) { grid-column:1/-1; grid-row:2; }
 .month-controls > .op-field:nth-child(3) { grid-column:1; grid-row:3; }
 .month-controls > .btn { grid-column:2; grid-row:3; }
 .month-day-header { flex-wrap:wrap; }
 .month-day-totals { width:100%; display:flex; align-items:center; justify-content:space-between; }
}