#rotationDialog{border:0;border-radius:18px;padding:0;width:min(1240px,96vw);max-width:96vw;max-height:94vh;color:#17334e;background:#f5f8fc;box-shadow:0 16px 90px #10284055}
#rotationDialog::backdrop{background:#132d49aa}#rotationDialog *{box-sizing:border-box}#rotationDialog header{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;background:#163856;color:white;gap:20px}#rotationDialog h2{margin:0;color:inherit;font-size:24px}#rotationDialog .rotBody{padding:22px 26px}#rotationDialog .rotToolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px}#rotationDialog label{display:flex;flex-direction:column;gap:5px;font-weight:650;font-size:13px}#rotationDialog input,#rotationDialog select{background:white;color:#17334e;border:1px solid #b5c5d6;border-radius:8px;padding:10px;font:inherit;min-height:42px}#rotationDialog button{cursor:pointer;min-height:40px;border:1px solid #b5c5d6;border-radius:8px;padding:8px 14px;background:white;color:#17334e;font:inherit;font-weight:650}#rotationDialog button.primary{background:#1264c3;color:white;border-color:#1264c3}#rotationDialog button:disabled{opacity:.5;cursor:default}#rotationDialog .rotCounts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}#rotationDialog .rotCounts span{padding:10px 14px;background:white;border:1px solid #d2deeb;border-radius:10px}#rotationDialog .rotScroll{overflow:auto}#rotationDialog table{border-collapse:collapse;width:100%;min-width:850px;background:white}#rotationDialog th,#rotationDialog td{text-align:left;padding:12px;border-bottom:1px solid #dbe4ed;vertical-align:top}#rotationDialog th{font-size:12px;background:#eaf0f6}#rotationDialog td{font-size:13px}#rotationDialog .rotTag{display:inline-block;padding:5px 8px;border-radius:6px;font-weight:700}#rotationDialog .rotTag.vehicle{background:#e2f3eb;color:#135e40}#rotationDialog .rotTag.reserve{background:#fff0ce;color:#7b4700}#rotationDialog .rotTag.home{background:#e6ebfa;color:#374c89}#rotationDialog .rotTag.unavailable{background:#e8e8e8;color:#555}#rotationDialog small{display:block;font-size:12px;margin-top:4px;color:#54677c}#rotationDialog .rotEditor{background:white;padding:20px;border:1px solid #c6d6e6;border-radius:12px;margin:20px 0}#rotationDialog .rotGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}#rotationDialog .rotActions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}#rotationDialog .rotFeedback{white-space:pre-line;padding:12px;background:#f0f5fb;border-radius:8px;line-height:1.6}#rotationDialog [hidden]{display:none!important}#rotationDialog .rotHint{font-size:13px;line-height:1.6;color:#506780}#rotationDialog .rotError{color:#a62727;font-weight:650}#rotationDialog .rotPreviewLine{padding:5px 0;border-bottom:1px solid #e6edf4}#rotationDialog .rotPeriod{border-top:1px solid #dbe4ed;padding:10px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}#rotationDialog details{margin-top:16px}#rotationDialog summary{cursor:pointer;font-weight:700}@media(max-width:650px){#rotationDialog .rotGrid{grid-template-columns:1fr}#rotationDialog .rotBody{padding:15px}#rotationDialog header{padding:16px}#rotationDialog h2{font-size:20px}}
/* Central personnel calendar */
#rotationDialog .rotBody{padding:14px 18px}#rotationDialog header{padding:14px 18px}#rotationDialog h2{font-size:22px}#rotationDialog .rotToolbar{gap:8px;margin-bottom:10px}#rotationDialog .rotCounts{margin-bottom:8px}#rotationDialog .rotCounts span{padding:7px 10px}#rotationDialog .rotCalendar{min-width:1080px}#rotationDialog .rotCalendar th,#rotationDialog .rotCalendar td{padding:5px 3px;vertical-align:middle}#rotationDialog .rotCalendar thead th{text-align:center}#rotationDialog .rotCalendar th:first-child{position:sticky;left:0;background:#f3f7fc;min-width:165px;max-width:200px;text-align:left;padding-left:10px;z-index:1}#rotationDialog .rotCalendar th span{font-size:11px}#rotationDialog .rotCalendar th small{font-size:9px;margin:0}#rotationDialog .rotCalendar .rotDay{text-align:center;min-width:23px;width:23px;color:#8093a5}#rotationDialog .rotLeaveDay{padding:0;min-height:27px;width:100%;border:0;border-radius:3px;background:#dbe7fc;color:#1e50a0;font-size:11px}#rotationDialog .rotLeaveDay.rotActiveLeave{background:#1e50a0;color:white}#rotationDialog .rotWeekend{background:#f0f3f7}#rotationDialog .rotTodayColumn{box-shadow:inset 1px 0 #1264c3,inset -1px 0 #1264c3}#rotationDialog .rotCalendar td:nth-last-child(2){white-space:nowrap;font-size:11px;padding:5px 10px}#rotationDialog .rotCalendar td:last-child button{min-height:30px;padding:4px 8px;font-size:12px}#rotationDialog .rotScroll{max-height:59vh;border:1px solid #dbe4ed;border-radius:8px}#rotationDialog .rotCalendar thead th{position:sticky;top:0;z-index:2}#rotationDialog .rotCalendar thead th:first-child{z-index:3}#rotationDialog button:focus-visible,#rotationDialog .rotScroll:focus-visible{outline:3px solid #e09900;outline-offset:2px}#rotationDialog .rotPeriod{padding:8px 0}#rotationDialog .rotPeriod small{color:#334e6a}#rotationDialog .rotHint{margin:8px 0}#rotationDialog h3{margin:16px 0 8px}#rotationDialog #rotScope{max-width:240px}
#planningEditCard [hidden]{display:none!important}

/* Use the available screen; long lists scroll inside the planner. */
#rotationDialog{width:98vw;max-width:98vw;height:96dvh;max-height:96dvh;overflow:hidden}
#rotationDialog[open]{display:flex;flex-direction:column}
#rotationDialog header{flex:none}#rotationDialog .rotBody{flex:1;min-height:0;overflow:auto}
#rotationDialog .rotEditor textarea{width:100%;min-height:65px;font:inherit;padding:10px;border:1px solid #b5c5d6;border-radius:8px}
#rotationDialog .rotFollowUp{display:flex;flex-direction:row;align-items:center;margin:10px 0}
#rotationDialog .rotFollowUp input{min-height:0}

/* Desktop overview: 15 drivers and all 28 date columns fit at 1614 x 764. */
@media(min-width:1000px){
 #rotationDialog{width:99vw;max-width:99vw;height:98dvh;max-height:98dvh;margin:auto}
 #rotationDialog header{padding:8px 14px;min-height:54px;position:relative;z-index:4}
 #rotationDialog h2{font-size:19px;line-height:1.15}
 #rotationDialog header small{font-size:11px;margin-top:2px}
 #rotationDialog .rotBody{padding:6px 12px 12px;overflow-x:hidden;scrollbar-gutter:stable}
 #rotationDialog #rotStatus{margin:3px 0 6px;font-size:12px;line-height:16px}
 #rotationDialog .rotToolbar{gap:6px;margin-bottom:6px;flex-wrap:nowrap}
 #rotationDialog .rotToolbar label{font-size:11px;gap:2px}
 #rotationDialog .rotToolbar input,#rotationDialog .rotToolbar select{min-height:32px;height:32px;padding:4px 8px;font-size:12px}
 #rotationDialog .rotToolbar select{width:200px;max-width:22vw}
 #rotationDialog .rotToolbar button,#rotationDialog #rotClose{min-height:32px;padding:5px 10px;font-size:12px;white-space:nowrap}
 #rotationDialog .rotCounts{gap:6px;margin-bottom:4px;font-size:12px;line-height:16px}
 #rotationDialog .rotCounts span{padding:4px 8px;border-radius:6px}
 #rotationDialog .rotHint{font-size:11px;line-height:15px;margin:4px 0}
 #rotationDialog .rotScroll{max-height:none;overflow:visible;border-radius:6px}
 #rotationDialog table.rotCalendar{table-layout:fixed;width:100%;min-width:0;max-width:100%}
 #rotationDialog .rotCalendar th,#rotationDialog .rotCalendar td{padding:2px 1px;line-height:12px;font-size:11px;height:29px}
 #rotationDialog .rotCalendar th:first-child{width:170px;min-width:0;max-width:none;padding-left:7px;white-space:normal;overflow-wrap:break-word}
 #rotationDialog .rotCalendar .rotDay{width:auto;min-width:0}
 #rotationDialog .rotCalendar thead th:nth-last-child(2){width:124px}
 #rotationDialog .rotCalendar thead th:last-child{width:70px}
 #rotationDialog .rotCalendar td:nth-last-child(2){padding:1px 5px;font-size:10px;line-height:11px;white-space:normal}
 #rotationDialog .rotCalendar .rotLeaveDay{min-height:24px;height:24px;padding:0;font-size:10px}
 #rotationDialog .rotCalendar td:last-child button{min-height:24px;height:24px;padding:2px 5px;font-size:11px;width:100%}
 #rotationDialog .rotCalendar th span{font-size:10px}
 #rotationDialog .rotCalendar th small{font-size:9px;line-height:10px}
}

#rotationDialog .rotDateEntry{display:flex;gap:6px;min-width:0}
#rotationDialog .rotDateEntry input{flex:1;min-width:0;width:0}
#rotationDialog .rotDateEntry button{flex:none;min-width:44px;font-size:20px}
#rotDateCalendar{width:min(360px,92vw);box-sizing:border-box;padding:16px;border:1px solid #b5c5d6;border-radius:14px;color:#17334e;background:white;max-height:90dvh;overflow:auto}
#rotDateCalendar::backdrop{background:#132d4977}
#rotDateCalendar .rotCalendarTop,#rotDateCalendar .rotCalendarBottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
#rotDateCalendar h3{margin:8px 0;font-size:19px;text-align:center}
#rotDateCalendar button{border:1px solid #c6d6e6;border-radius:6px;background:#fff;color:#17334e;font:inherit;min-height:40px;cursor:pointer;padding:6px}
#rotDateCalendar .rotCalendarWeek,#rotDateCalendar .rotCalendarDates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center;margin:12px 0}
#rotDateCalendar .rotCalendarDates button[aria-pressed=true]{background:#1264c3;color:white}
#rotDateCalendar button[aria-current=date]{border:2px solid #1264c3}
#rotDateCalendar button:focus-visible{outline:3px solid #e09900;outline-offset:1px}

#rotationDialog .rotDanger,#rotDeleteConfirm .rotDanger{color:#a41e22;background:#fff3f3;border:1px solid #d5a3a3}
#rotationDialog .rotPeriod{flex-wrap:wrap}#rotationDialog .rotPeriod>div{flex:1;min-width:180px}
#rotDeleteConfirm{box-sizing:border-box;width:min(560px,calc(100vw - 24px));border:1px solid #d1dfed;border-radius:16px;padding:24px;color:#19364f;font:inherit}
#rotDeleteConfirm::backdrop{background:#102d4a99}#rotDeleteConfirm p{line-height:1.5}#rotDeleteConfirm button{padding:12px;border-radius:10px;font:inherit;background:white;border:1px solid #b7c9db;cursor:pointer}#rotDeleteConfirm .rotActions{display:flex;gap:10px;flex-wrap:wrap}#rotDeleteError{color:#a41e22}

#rotManager select{width:100%;max-width:600px}#rotManager .rotPeriod{background:white;padding:14px;border:1px solid #ccdaeb;border-radius:12px;margin:10px 0}#rotAdvanced{margin:14px 0;padding:12px;border:1px solid #d1dfec;border-radius:10px}#rotAdvanced summary{cursor:pointer;font-weight:700}#rotAdvanced .rotGrid{margin-top:12px}#rotationDialog #rotModeHint{padding:12px;background:#eaf3ff;font-size:16px;color:#163a60}#rotEditor> .rotHint:not(#rotModeHint){display:none}

#rotationDialog:has(#rotManager:not([hidden])) #rotOverview,#rotationDialog:has(#rotEditor:not([hidden])) #rotOverview{display:none}
/* Continuous work/leave blocks, with horizontal navigation for longer ranges. */
#rotationDialog .rotScroll{overflow:auto;max-height:60vh}
#rotationDialog table.rotCalendar{table-layout:fixed;min-width:max-content;width:auto;max-width:none}
#rotationDialog .rotCalendar thead th[data-date]{width:25px;min-width:25px;max-width:25px}
#rotationDialog .rotCalendar th:first-child{width:180px;min-width:180px}
#rotationDialog .rotCalendar .rotBlockCell{padding:3px 0!important;overflow:hidden}
#rotationDialog .rotCalendar button.rotBlock{display:block;width:100%;min-height:34px;height:34px;border-radius:5px;padding:3px 6px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;touch-action:none;border:1px solid #fff;user-select:none}
#rotationDialog .rotCalendar .rotWorkBlock{background:#d8efe3;color:#175736}
#rotationDialog .rotCalendar .rotLeaveBlock{background:#dbe7fc;color:#1e50a0}
#rotationDialog .rotCalendar .rotDragging{opacity:.65;outline:3px solid #1565c0;cursor:grabbing}
#rotMoveDialog{position:fixed;inset:0;margin:auto;width:min(570px,calc(100vw - 24px));height:auto;max-height:90dvh;overflow:auto;box-sizing:border-box;border:1px solid #cbd8e6;border-radius:15px;padding:22px;background:white;color:#17334e;font:16px Arial,sans-serif}
#rotMoveDialog::backdrop{background:#102d4a99}
#rotMoveDialog h3{margin:0 0 12px}#rotMoveDialog p{line-height:1.5}
#rotMoveDialog label{display:flex;flex-direction:column;gap:6px}
#rotMoveDialog input,#rotMoveDialog button{font:inherit;padding:10px;border:1px solid #b5c5d6;border-radius:8px;background:white;color:#17334e;min-height:44px}
#rotMoveDialog .rotActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#rotMoveDialog button{cursor:pointer}#rotMoveDialog .primary{background:#1264c3;color:white}#rotMoveDialog :disabled{opacity:.5;cursor:default}#rotMoveDialog .rotError{color:#a62727;font-weight:700}
@media(max-width:700px){#rotationDialog .rotToolbar{flex-wrap:wrap}#rotationDialog .rotCalendar th:first-child{width:135px;min-width:135px}}
/* Keep timeline columns intact on mobile; the table itself scrolls horizontally. */
#rotationDialog .rotCalendar thead th[data-date]{display:table-cell!important}
#rotationDialog .rotCalendar .rotDay,#rotationDialog .rotCalendar .rotBlockCell{display:table-cell!important}
#rotationDialog table.rotCalendar{min-width:2100px}
@media(max-width:999px){
 #rotationDialog .rotScroll{display:block!important;width:100%!important;max-width:100%!important;overflow:auto!important}
 #rotationDialog table.rotCalendar{display:table!important;table-layout:fixed!important;width:2100px!important;min-width:2100px!important;max-width:none!important}
 #rotationDialog .rotCalendar thead{display:table-header-group!important}
 #rotationDialog .rotCalendar tbody{display:table-row-group!important}
 #rotationDialog .rotCalendar tr{display:table-row!important}
 #rotationDialog .rotCalendar th,#rotationDialog .rotCalendar td{display:table-cell!important;float:none!important;height:40px!important;max-height:none!important;position:static!important;padding:3px!important}
 #rotationDialog .rotCalendar th:first-child{position:sticky!important;left:0!important;z-index:3;width:135px!important;min-width:135px!important;max-width:135px!important;white-space:normal!important}
 #rotationDialog .rotCalendar td::before{display:none!important}
 #rotationDialog .rotCalendar thead th[data-date]{width:25px!important;min-width:25px!important}
 #rotationDialog .rotCalendar th:nth-last-child(2){width:124px!important}
 #rotationDialog .rotCalendar th:last-child{width:90px!important}
}

#rotationDialog .rotCalendar button.rotBlock{text-align:left}
#rotationDialog .rotBlockLabel{position:sticky;left:185px;display:inline-block;max-width:calc(100vw - 220px);overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
@media(max-width:999px){#rotationDialog .rotBlockLabel{left:140px}}
#rotYearDialog{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(900px,calc(100vw - 24px));height:auto;max-height:90dvh;overflow:auto;padding:22px;border:1px solid #cbd8e6;border-radius:15px;background:white;color:#17334e;font:15px Arial,sans-serif}
#rotYearDialog::backdrop{background:#102d4a99}#rotYearDialog h3{margin-top:0}#rotYearDialog p{line-height:1.5}
#rotYearDialog .rotActions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}#rotYearDialog button{font:inherit;border:1px solid #b5c5d6;border-radius:8px;padding:10px;background:white;color:#17334e;min-height:44px;cursor:pointer}#rotYearDialog button.primary{background:#1264c3;color:white}#rotYearDialog button:disabled{opacity:.5;cursor:default}
#rotYearRows{overflow:auto}#rotYearDialog table{width:100%;border-collapse:collapse;display:table}#rotYearDialog tr{display:table-row}#rotYearDialog th,#rotYearDialog td{display:table-cell;padding:10px;border-bottom:1px solid #dbe4ed;text-align:left;font-size:14px;line-height:1.4}#rotYearDialog th{background:#edf3fa}#rotYearDialog .rotError{color:#a62727;font-weight:700}
#rotationDialog .rotDragGhost{position:fixed;z-index:100;pointer-events:none;box-sizing:border-box;width:280px;max-width:calc(100vw - 24px);padding:10px 12px;border-radius:9px;background:#1264c3;color:white;box-shadow:0 4px 18px #1236;font:600 14px/1.4 Arial,sans-serif}
#rotationDialog .rotCalendar .rotDropDate{background:#1264c3!important;color:white!important;outline:2px solid #1264c3}
#rotationDialog .rotCalendar .rotDragging{position:relative;z-index:5;opacity:.6;transition:none!important}
/* Keep the calendar above the edit panel, inside the same planning screen. */
#rotationDialog.rotSplit>.rotBody{flex:1;min-height:180px;display:flex;flex-direction:column;overflow:hidden}
#rotationDialog.rotSplit #rotBackOffice,#rotationDialog.rotSplit #rotStatus{display:none}
#rotationDialog.rotSplit .rotToolbar{flex:none}
#rotationDialog.rotSplit #rotOverview{display:flex!important;flex-direction:column;flex:1;min-height:0}
#rotationDialog.rotSplit #rotOverview>h3,#rotationDialog.rotSplit #rotOverview>.rotActions,#rotationDialog.rotSplit #rotOverview>label,#rotationDialog.rotSplit #rotPeriods{display:none}
#rotationDialog.rotSplit #rotOverview>.rotScroll{flex:1;min-height:70px;max-height:none;overflow:auto}
#rotationDialog>#rotMoveDialog{position:relative!important;inset:auto!important;display:block;width:100%!important;max-width:none!important;height:auto!important;max-height:43%!important;flex:none;box-sizing:border-box;overflow:auto!important;margin:0!important;padding:12px 18px!important;border:0;border-top:2px solid #1264c3;border-radius:0;background:white;font:14px/1.35 Arial,sans-serif}
#rotationDialog>#rotMoveDialog[hidden]{display:none!important}
#rotationDialog #rotMoveTitle{font-size:17px!important;margin:0 0 4px!important}
#rotationDialog #rotMoveDialog p{font-size:13px!important;line-height:1.35!important;margin:5px 0!important}
#rotationDialog #rotMoveDialog label{display:inline-flex;vertical-align:bottom;min-width:210px;max-width:100%;font-size:12px}
#rotationDialog #rotMoveDialog input{padding:5px 8px;min-height:34px;font-size:14px}
#rotationDialog #rotMoveDialog .rotActions{display:flex;gap:6px;margin:6px 0 0;flex-wrap:wrap}
#rotationDialog #rotMoveDialog button{padding:6px 10px;min-height:34px;font-size:13px}
#rotationDialog .rotCalendar .rotPreviewBlock{outline:2px solid #1264c3;outline-offset:-2px}
@media(max-width:650px){#rotationDialog.rotSplit .rotToolbar{max-height:110px;overflow:auto}#rotationDialog.rotSplit>#rotMoveDialog{max-height:46%!important;padding:10px!important}#rotationDialog.rotSplit #rotOverview>.rotHint{display:none}}
/* Use the entire browser viewport for the calendar and its lower edit panel. */
dialog#rotationDialog{position:fixed!important;inset:0!important;margin:0!important;width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border:0!important;border-radius:0!important;box-sizing:border-box!important}
dialog#rotationDialog[open]{display:flex!important;flex-direction:column!important}

#rotationDialog .rotMoveHeading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}#rotationDialog #rotMoveCollapse{margin-left:auto;white-space:nowrap}

/* Screen-filling calendar, separate period list, and permanently reachable actions. */
#rotationDialog>.rotBody{display:flex;flex-direction:column;flex:1;min-height:0!important;overflow:hidden!important}
#rotationDialog #rotOverview{display:flex;flex-direction:column;flex:1;min-height:0}
#rotationDialog #rotOverview>.rotScroll{flex:1;min-height:60px;max-height:none!important;overflow:auto!important}
#rotationDialog .rotToolbar,#rotationDialog #rotPending,#rotationDialog #rotCounts{flex-shrink:0}
#rotationDialog #rotStatus{margin:2px 0;font-size:12px}
#rotationDialog #rotBackOffice{align-self:flex-start;padding:3px 8px;min-height:28px}
#rotationDialog #rotOverview>.rotHint{margin:4px 0;font-size:12px}
#rotationDialog.rotPeriodsView #rotOverview{display:none!important}
#rotationDialog #rotPeriodView{flex:1;min-height:0;overflow:auto}
#rotationDialog #rotPeriodView[hidden]{display:none!important}
#rotationDialog #rotManager,#rotationDialog #rotEditor{min-height:0;overflow:auto}
#rotationDialog>#rotMoveDialog{display:flex;flex-direction:column;overflow:hidden!important;min-height:0;flex-shrink:0;max-height:43dvh!important}
#rotationDialog .rotMoveContent{min-height:0;overflow:auto}
#rotationDialog .rotMoveHeading,#rotationDialog .rotMoveFooter{flex-shrink:0}
#rotationDialog .rotMoveFooter{background:white;padding-top:4px;border-top:1px solid #dbe4ed}
#rotationDialog .rotToolbar{gap:6px}
#rotationDialog .rotToolbar button,#rotationDialog .rotToolbar input,#rotationDialog .rotToolbar select{min-height:34px;padding:5px 8px;font-size:13px}
#rotationDialog #rotPending{margin:4px 0;font-size:13px}
#rotationDialog #rotPending button{min-height:32px;padding:5px 10px;font-size:13px}
@media(min-width:1000px){#rotationDialog .rotCalendar td,#rotationDialog .rotCalendar th{padding:2px!important;height:30px!important}#rotationDialog .rotCalendar button.rotBlock{height:28px!important;min-height:28px!important;font-size:12px!important}#rotationDialog .rotCalendar td>button[data-manage]{min-height:26px;padding:2px;font-size:11px}}
@media(max-width:650px){#rotationDialog .rotToolbar{max-height:145px;overflow:auto;flex-shrink:1}#rotationDialog.rotSplit .rotToolbar{max-height:90px}#rotationDialog #rotOverview>.rotHint{display:none}#rotationDialog>#rotMoveDialog{max-height:46dvh!important}#rotationDialog .rotMoveFooter button{font-size:11px;padding:4px 6px;min-height:30px}}

/* Pending changes and calendar totals share one consistently sized row. */
#rotationDialog #rotSummaryRow{display:flex;align-items:center;gap:8px;flex:none;max-width:100%;overflow-x:auto;padding:2px 0 5px;margin:0 0 4px;white-space:nowrap}
#rotationDialog #rotSummaryRow #rotPending,#rotationDialog #rotSummaryRow #rotCounts{display:flex;align-items:center;flex-wrap:nowrap;gap:8px;margin:0!important;flex:none}
#rotationDialog #rotSummaryRow #rotPendingCount,#rotationDialog #rotSummaryRow #rotSaveAll,#rotationDialog #rotSummaryRow #rotCounts>span{display:inline-flex;align-items:center;gap:4px;height:34px!important;min-height:34px!important;box-sizing:border-box;line-height:18px;font-size:13px!important;margin:0}
#rotationDialog #rotSummaryRow #rotSaveAll,#rotationDialog #rotSummaryRow #rotCounts>span{padding:6px 10px!important}
#rotationDialog #rotSummaryRow #rotPending[hidden]{display:none!important}

/* Render the moving block above table cells so cell clipping cannot hide it. */
#rotationDialog .rotDragPreview{position:fixed;z-index:99;pointer-events:none;display:flex;align-items:center;box-sizing:border-box;padding:3px 8px;border:2px solid #1264c3;border-radius:5px;box-shadow:0 2px 8px #17334e33;font:700 12px/1.2 Arial,sans-serif;white-space:nowrap;overflow:hidden}
#rotationDialog .rotDragPreview.rotDragWork{background:#d7f0e3;color:#135e40}
#rotationDialog .rotDragPreview.rotDragLeave{background:#dbe7fc;color:#1e50a0}
#rotationDialog .rotCalendar .rotDragging{opacity:.2}

#rotClearConfirm{position:fixed;inset:0;margin:auto;width:min(580px,calc(100vw - 24px));max-height:85dvh;height:auto;overflow:auto;box-sizing:border-box;padding:22px;border:1px solid #cbd8e6;border-radius:12px;background:white;color:#17334e;font:15px/1.5 Arial,sans-serif}
#rotClearConfirm::backdrop{background:#102d4a99}#rotClearConfirm h3{margin-top:0}#rotClearConfirm .rotActions{display:flex;flex-wrap:wrap;gap:8px}#rotClearConfirm button{padding:10px;border:1px solid #b5c5d6;border-radius:8px;background:white;font:inherit;cursor:pointer}#rotClearConfirm .rotDanger,#rotationDialog #rotClearPlanning{color:#b4232b}#rotClearConfirm button:disabled{opacity:.5}

@media(min-width:1000px){
 #rotationDialog .rotCalendar thead th[data-date]{width:auto!important;max-width:none!important}
 #rotationDialog .rotCalendar tbody tr,#rotationDialog .rotCalendar tbody th,#rotationDialog .rotCalendar tbody td{height:var(--rot-fit-row,30px)!important}
 #rotationDialog .rotCalendar button.rotBlock{height:calc(var(--rot-fit-row,30px) - 6px)!important;min-height:24px!important}
}

#rotationDialog .rotCalendar button.rotExtraBlock{background:#fee2e2!important;color:#a51425!important;border:2px solid #c9283e!important}
#rotExtraDialog{padding:20px;box-sizing:border-box;width:min(620px,95vw)!important;height:auto!important;max-height:90dvh!important;overflow:auto;border:1px solid #b5c5d6;border-radius:12px;background:white;color:#17334e;font:15px/1.4 Arial,sans-serif}
#rotExtraDialog::backdrop{background:#102d4a99}#rotExtraDialog label{display:flex;flex-direction:column;gap:5px;margin:12px 0}#rotExtraDialog input,#rotExtraDialog select,#rotExtraDialog button{font:inherit;min-height:40px;padding:8px;border:1px solid #b5c5d6;border-radius:6px}#rotExtraDialog .rotActions{display:flex;flex-wrap:wrap;gap:8px}#rotExtraSave{background:#1264c3;color:white}#rotExtraDelete{color:#a51425}#rotExtraDialog [hidden]{display:none!important}

/* Keep scrollbar dimensions constant while fitting calendar rows and columns. */
#rotationDialog #rotOverview>.rotScroll{overflow:auto!important;scrollbar-gutter:stable;overflow-anchor:none}
#rotationDialog .rotCalendar{overflow-anchor:none}

@media(min-width:1000px){#rotationDialog .rotCalendar.rotDense tbody :is(td,th){padding:1px!important;font-size:10px!important;line-height:1.1!important}#rotationDialog .rotCalendar.rotDense tbody button{box-sizing:border-box;height:calc(var(--rot-fit-row) - 3px)!important;min-height:0!important;padding:0 2px!important;font-size:10px!important;line-height:1.1!important}}
@media(min-width:1000px){#rotationDialog .rotCalendar.rotDense tbody small{margin:0!important;font-size:9px!important;line-height:9px!important}#rotationDialog .rotCalendar.rotDense tbody td:nth-last-child(2){font-size:9px!important;line-height:9px!important}}
@media(min-width:1000px) and (max-height:750px){#rotationDialog #rotOverview>.rotHint{display:none}#rotationDialog #leaveCapacityPanel details{margin-top:0}#rotationDialog #leaveCapacityPanel summary{padding:5px 8px}}

#rotationDialog .rotDriverOnLeave>th{background:#e5e7eb!important;color:#687381!important}.rotDriverPlate{display:inline-block;color:#174f86;font-weight:700}.rotDriverLeaveLabel{font-size:.85em}

.rotDriverClient{font-weight:500;overflow-wrap:anywhere;white-space:normal}

/* Fit all calendar controls in one full-width row. */
#rotationDialog .rotToolbar{display:flex!important;flex-wrap:nowrap!important;align-items:flex-end!important;gap:6px!important;width:100%!important;min-width:0!important}
#rotationDialog .rotToolbar>label,#rotationDialog .rotToolbar>button{flex:1 1 0!important;min-width:0!important;width:auto!important;margin:0!important}
#rotationDialog .rotToolbar>label{font-size:12px!important}
#rotationDialog .rotToolbar>label:has(#rotDate){flex-grow:1.3!important}
#rotationDialog .rotToolbar>label:has(#rotFilter),#rotationDialog .rotToolbar>#rotPeriodToggle{flex-grow:1.7!important}
#rotationDialog .rotToolbar>label :is(input,select),#rotationDialog .rotToolbar>button{width:100%!important;min-width:0!important;max-width:100%!important;height:44px!important;min-height:44px!important;box-sizing:border-box!important;padding:6px!important;font-size:clamp(11px,.85vw,14px)!important;line-height:1.2!important;white-space:normal!important}
@media(max-width:850px){#rotationDialog .rotToolbar{overflow-x:auto!important;padding-bottom:4px}#rotationDialog .rotToolbar>label,#rotationDialog .rotToolbar>button{flex:0 0 120px!important}#rotationDialog .rotToolbar>#rotPeriodToggle{flex-basis:160px!important}}

.rotRemarkDialog{width:min(600px,calc(100vw - 24px));max-height:90dvh;box-sizing:border-box;padding:20px;border:1px solid #c5d5eb;border-radius:14px}.rotRemarkDialog textarea{display:block;width:100%;box-sizing:border-box;min-height:140px;padding:10px;font:inherit}.rotRemarkActions{display:flex;gap:8px;overflow-x:auto}.rotRemarkActions button{flex:1;min-height:40px;background:#1462e8;color:white;border:0;border-radius:8px;padding:8px 12px}.rotRemarkActions button[hidden]{display:none}

#rotationDialog #rotHeaderNavigation{position:static!important;inset:auto!important;transform:none!important;display:flex!important;align-items:center;gap:8px;flex:0 0 auto!important;margin:0 0 0 auto!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;width:auto!important}#rotationDialog #rotHeaderNavigation button{position:static!important;inset:auto!important;transform:none!important;flex:0 0 52px!important;width:52px!important;min-width:44px!important;height:42px!important;min-height:42px!important;padding:6px!important;margin:0!important;background:#1462e8!important;color:white!important;border:0!important;border-radius:10px!important}#rotationDialog>header{flex-wrap:nowrap!important}#rotationDialog>header>div:first-child{min-width:0}@media(max-width:600px){#rotationDialog #rotHeaderNavigation{gap:4px}#rotationDialog #rotHeaderNavigation button{flex-basis:44px!important;width:44px!important}}
#rotationDialog .rotToolbar button{background:#1264c3!important;color:#fff!important;border-color:#1264c3!important}
#rotationDialog .rotToolbar button:hover:not(:disabled){background:#0d53a6!important;border-color:#0d53a6!important}
#rotationDialog .rotToolbar button:focus-visible{outline:3px solid #7fb6ff;outline-offset:2px}