/* Presentation only. No changes to data, permissions, handlers or visibility. */
@media screen {
 body>.wrap:has(> :is(#admin,#driver,#customer):not(.hidden)){width:100%;max-width:none;box-sizing:border-box;min-height:100dvh}
 :is(#admin,#driver,#customer){min-width:0;max-width:100%;box-sizing:border-box}
 :is(#admin,#driver,#customer) :is(.grid,.row,.card,.panel,.table,.modal-card){min-width:0;box-sizing:border-box;max-width:100%}
 :is(#admin,#driver,#customer) :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
 :is(#admin,#driver,#customer) :is(.row,.actions,.modalHead){flex-wrap:wrap;gap:8px}
 :is(#admin,#driver,#customer) .table{overflow-x:auto;overscroll-behavior-x:contain}
 :is(#admin,#driver,#customer) :is(img,video){max-width:100%;object-fit:contain}
 body .modal{box-sizing:border-box;max-width:100vw;max-height:100dvh;padding:clamp(6px,1.2vw,16px)}
 body .modal>.modal-card{box-sizing:border-box;max-width:100%;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
 body dialog{max-width:100vw!important;max-height:100dvh!important;box-sizing:border-box}
 body dialog :is(.dialogBody,.assignmentBody,.payBody){min-width:0;min-height:0;overflow:auto}
 body dialog :is(.actions,.rotActions,.modalHead){flex-wrap:wrap}
 /* The full leave editor uses the remaining height with its actions pinned inside. */
 #rotationDialog:has(#rotEditor:not([hidden])) #rotOverview,#rotationDialog:has(#rotManager:not([hidden])) #rotOverview{display:none!important}
 #rotationDialog #rotEditor,#rotationDialog #rotManager{flex:1 1 auto;min-height:0;max-height:none;margin:4px 0 0;padding:12px;scroll-padding-bottom:75px}
 #rotationDialog #rotEditor>.rotActions:last-child{position:sticky;bottom:-12px;z-index:5;background:white;padding:10px 0;margin:8px 0 -12px;border-top:1px solid #dbe4ed;box-shadow:0 -5px 10px #ffffff}
 #rotationDialog #rotEditor h3{margin:0 0 6px;font-size:18px}
 #rotationDialog #rotModeHint{font-size:13px;padding:7px;margin:4px 0 8px;line-height:1.3}
 #rotationDialog #rotEditor .rotGrid{gap:8px 12px}
 #rotationDialog #rotEditor :is(input,select){min-height:34px;padding:5px 8px}
 #rotationDialog #rotEditor .rotDateEntry button{min-height:34px;padding:3px 8px}
 #rotationDialog #rotAdvanced{margin:8px 0;padding:8px}
 #rotationDialog #rotAdvanced .rotGrid{margin-top:6px}
 #rotationDialog #rotAdvanced .rotActions{margin:6px 0}
 #rotationDialog #rotEditor textarea{min-height:46px;height:46px;padding:6px}
 #rotationDialog #rotDuration,#rotationDialog .rotFollowUp{margin:5px 0}
 #rotationDialog .rotToolbar{flex-wrap:wrap!important}
}
@media screen and (min-width:1000px){
 #rotationDialog #rotAdvanced[open]{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:6px 12px}
 #rotationDialog #rotAdvanced>summary{grid-column:1/-1}
 #rotationDialog #rotAdvanced>.rotGrid{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}
 #rotationDialog #rotAdvanced>label:not(.rotFollowUp){grid-column:2;grid-row:2/4}
 #rotationDialog #rotAdvanced>.rotActions{grid-column:1}
 #rotationDialog #rotAdvanced>.rotFollowUp{grid-column:1/-1}
}
@media screen and (max-width:650px){
 body .modal>.modal-card{width:100%!important;max-height:calc(100dvh - 12px)}
 :is(#admin,#driver,#customer) :is(.grid,.row)>*{min-width:0;max-width:100%}
 #rotationDialog #rotEditor>.rotActions:last-child{gap:5px;padding:6px 0}
 #rotationDialog #rotEditor>.rotActions:last-child button{font-size:13px;min-height:36px;padding:6px 8px}
}

/* Shared office editor layout: use width before adding vertical space. */
@media screen {
 #rotationDialog #rotLastLeaveHint:not([hidden]){display:block!important;margin:4px 0;padding:6px 10px;background:#e3f3e9;font-weight:650}
 body:has(#admin:not(.hidden)) dialog :is(input,select,textarea){box-sizing:border-box;max-width:100%;min-width:0}
 body:has(#admin:not(.hidden)) dialog :is(.grid,.row,.actions){min-width:0;max-width:100%;flex-wrap:wrap}
}
@media screen and (min-width:1000px){
 #rotationDialog #rotEditor{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.6fr);gap:6px 14px;align-content:start}
 #rotationDialog #rotEditor> :is(h3,#rotModeHint,#rotLastLeaveHint,.rotActions,#rotEditStatus){grid-column:1/-1}
 #rotationDialog #rotEditor>.rotGrid{grid-column:1/-1;gap:6px 12px}
 #rotationDialog #rotEditor>#rotAdvanced{grid-column:1;margin:0;padding:8px}
 #rotationDialog #rotEditor>#rotPreview{grid-column:2;grid-row:auto;margin:0;align-self:stretch;padding:10px;line-height:1.35}
 #rotationDialog #rotEditor>#rotAdvanced[open]{display:block!important}
 #rotationDialog #rotEditor>#rotAdvanced>.rotGrid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:6px}
 #rotationDialog #rotEditor>#rotAdvanced>.rotActions{margin:6px 0}
 #rotationDialog #rotEditor>#rotAdvanced textarea{height:40px;min-height:40px}
 #rotationDialog #rotEditor>#rotAdvanced .rotFollowUp{margin:4px 0}
 #rotationDialog #rotEditor #rotWorkDuration{padding:5px 8px!important;font-size:16px!important}
 #rotationDialog #rotEditor>.rotActions:last-child{grid-column:1/-1;bottom:0;margin:0;padding:6px 0}
 #rotationDialog #rotPreview h3{font-size:15px;margin:0 0 6px}
 #rotationDialog #rotPreview .rotPreviewLine{padding:4px 0}
 #rotationDialog:has(#rotEditor:not([hidden])) .rotToolbar{margin-bottom:4px;gap:6px}
 #rotationDialog:has(#rotEditor:not([hidden])) .rotCounts{margin-bottom:4px}
}
/* Compact payment rows and file-sharing previews, isolated from global dialog layouts. */
body dialog.clbvAllPayments[open],body dialog.clbvFileShare[open]{position:fixed!important;inset:8px!important;margin:0!important;width:calc(100vw - 16px)!important;max-width:none!important;height:calc(100dvh - 16px)!important;max-height:none!important;padding:14px!important;display:block!important;overflow:auto!important;font-size:14px!important}
body dialog.clbvAllPayments :is(h2,p),body dialog.clbvFileShare :is(h2,p){margin:6px 0!important;line-height:1.35!important;min-height:0!important;height:auto!important}
body dialog.clbvAllPayments h2,body dialog.clbvFileShare h2{font-size:21px!important}
body dialog.clbvAllPayments table{display:table!important;width:100%!important;height:auto!important;min-height:0!important;table-layout:auto!important}
body dialog.clbvAllPayments thead{display:table-header-group!important;height:auto!important}
body dialog.clbvAllPayments tbody{display:table-row-group!important;height:auto!important}
body dialog.clbvAllPayments tr{display:table-row!important;height:auto!important;min-height:0!important;max-height:none!important}
body dialog.clbvAllPayments :is(td,th){display:table-cell!important;height:auto!important;min-height:0!important;max-height:none!important;padding:7px 9px!important;vertical-align:top!important;line-height:1.35!important;font-size:13px!important;white-space:normal!important;overflow-wrap:anywhere}
body dialog.clbvAllPayments section{padding:10px!important;min-height:0!important;height:auto!important}
body dialog.clbvAllPayments .btn,body dialog.clbvFileShare .btn{min-height:34px!important;height:auto!important;max-height:40px!important;padding:6px 10px!important;font-size:13px!important;line-height:1.3!important;white-space:nowrap!important;flex:0 0 auto!important}
body dialog.clbvAllPayments :is(input,select){padding:7px 9px!important;min-height:34px!important;height:36px!important;font-size:14px!important}
body dialog.clbvFileShare iframe{display:block!important;width:100%!important;height:calc(100dvh - 230px)!important;min-height:220px!important;border:0!important;margin-top:10px!important}
body dialog.clbvFileShare img{display:block!important;width:auto!important;max-width:100%!important;max-height:calc(100dvh - 230px)!important;object-fit:contain!important;margin:10px auto!important}

/* Compact receipt archive tiles. */
body dialog.clbvAllReceipts{padding:12px!important;font-size:14px!important}
body dialog.clbvAllReceipts .receiptArchiveGrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important;gap:8px!important;align-items:start!important}
body dialog.clbvAllReceipts .receiptArchiveGrid>article{padding:10px!important;border-radius:9px!important;min-height:0!important;height:auto!important;font-size:13px!important;line-height:1.35!important}
body dialog.clbvAllReceipts .receiptArchiveGrid h3{font-size:15px!important;line-height:1.3!important;margin:6px 0!important}
body dialog.clbvAllReceipts .receiptArchiveGrid p{font-size:13px!important;line-height:1.35!important;margin:6px 0 0!important}
body dialog.clbvAllReceipts .receiptArchiveGrid small{font-size:12px!important}
body dialog.clbvAllReceipts>p{margin:10px 0!important}
body dialog.clbvAllReceipts input[type=search]{padding:8px 10px!important;margin:6px 0!important;font-size:14px!important;min-height:38px!important}

/* Shared sizing rules: use available width without shrinking text or hiding actions. */
@media screen {
 :is(#admin,#driver,#customer) :is(.card,.panel,.grid,.field,.row,.actions){min-width:0;box-sizing:border-box}
 #admin>.tab{width:100%!important;max-width:100%!important;min-width:0!important}
 #admin>.tab>.card{box-sizing:border-box;max-width:100%}
 :is(#admin,#customer) :is(.actions,.toolbar,.costViewNav,.invoiceNav){max-width:100%;min-width:0;box-sizing:border-box}
 :is(#admin,#customer) :is(.actions,.toolbar,.costViewNav,.invoiceNav)>.btn{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
 /* Action rows wrap within their container; every control stays visible. */
 #admin .card>.actions:not(:has(input,select,textarea,label)),
 #admin .financeHead>.actions,
 #admin .costViewNav,
 #admin #finance#finance>.invoiceNav{
  display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:stretch!important;
  gap:8px!important;width:100%!important;min-width:0!important;overflow:visible!important;padding-block:4px!important;
  scrollbar-width:thin;scroll-padding-inline:4px;
 }
 #admin .card>.actions:not(:has(input,select,textarea,label))>.btn,
 #admin .financeHead>.actions>.btn,
 #admin .costViewNav>.btn,
 #admin #finance#finance>.invoiceNav>.btn{
  flex:1 1 120px!important;width:auto!important;min-width:0!important;max-width:100%!important;
  height:auto!important;min-height:44px!important;max-height:none!important;margin:0!important;
  padding:9px 10px!important;white-space:normal!important;line-height:1.3!important;text-align:center;justify-content:center;
 }
 #admin #drivers#drivers.driversStack474>.overviewCard .driverOverviewHead{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;width:100%!important;min-width:0!important;
 }
 #admin #drivers#drivers.driversStack474>.overviewCard .driverOverviewHead>.actions{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))!important;grid-auto-rows:1fr!important;align-items:stretch!important;justify-content:stretch!important;
  width:100%!important;min-width:0!important;max-width:100%!important;gap:8px!important;overflow:visible!important;padding:4px 0!important;
 }
 #admin #drivers#drivers.driversStack474>.overviewCard .driverOverviewHead>.actions>.btn{
  width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;
  min-height:46px!important;max-height:none!important;white-space:normal!important;overflow-wrap:anywhere!important;
  padding:9px 10px!important;font-size:14px!important;line-height:1.3!important;margin:0!important;
 }
 /* A tall header must not trap the bottom of a workspace outside its scroll area. */
 #admin #drivers#drivers:has(>.driverEditorClosed)>.overviewCard{overflow:auto!important}
 body dialog :is(.grid,.field,.row,.dialogBody,.payBody,.assignmentBody,.driverReportBody){box-sizing:border-box;min-width:0;max-width:100%}
 body dialog :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
 body dialog .driverReportControls>label{min-width:min(160px,100%)}
 body dialog .driverReportTable{min-width:0;max-width:100%;overflow:auto}
}

/* Weekly costs: responsive controls, no horizontal button scrolling. */
#costWeekToolbar{min-width:0;width:100%;box-sizing:border-box}#costWeekToolbar .actions{display:flex!important;flex-wrap:wrap!important;gap:8px}#costWeekToolbar .actions>*{flex:1 1 150px;min-width:0;box-sizing:border-box}#costWeekToolbar input{max-width:100%;box-sizing:border-box;min-height:44px}#costWeekToolbar button{min-height:44px;white-space:normal}#costWeekCaption{font-weight:700;margin:12px 0 0}#costWeekArchivePanel{margin-top:12px}#costWeekArchivePanel[hidden]{display:none!important}

/* Keep the complete desktop driver action bar on one equal-width row. */
@media screen and (min-width:900px){
 #admin #drivers#drivers.driversStack474>.overviewCard .driverOverviewHead>.actions{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;align-items:stretch!important}
 #admin #drivers#drivers.driversStack474>.overviewCard .driverOverviewHead>.actions>.btn{flex:1 1 0!important;width:0!important;min-width:0!important;min-height:58px!important;padding:8px 4px!important;font-size:clamp(10px,.85vw,14px)!important;line-height:1.25!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:auto!important;border-radius:10px!important}
 #admin #drivers#drivers.driversStack474>.overviewCard .driverOverviewHead>.actions>.btn[hidden]{display:none!important}
}