@media screen {
/* Office screens use available width. The Back control stays fixed. */
#admin.officeCompact:not(.officeOnHome)>.top,#admin.officeCompact:not(.officeOnHome)>.officeNotificationGroups{position:relative!important;top:auto!important;inset:auto!important}
#admin.officeCompact:not(.officeOnHome)>.tab{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box;scroll-margin-top:12px!important}
#admin.officeCompact:not(.officeOnHome) .tab :is(.card,.grid,.financeGrid,.table,.field){min-width:0;max-width:100%;box-sizing:border-box}
#admin.officeCompact:not(.officeOnHome) .tab :is(input,select,textarea){min-width:0!important;max-width:100%!important;box-sizing:border-box}
#admin.officeCompact:not(.officeOnHome) .tab :is(.actions,.costViewNav){flex-wrap:wrap}
#admin.officeCompact:not(.officeOnHome) .tab .btn{white-space:normal;overflow-wrap:anywhere}
#admin.officeCompact #fuelGroups504>details>summary{flex-wrap:wrap;gap:6px!important}
#admin.officeCompact #fuelGroups504>details>summary>span{white-space:normal!important;min-width:0;overflow-wrap:anywhere}
#admin.officeCompact #fuelGroups504>details>summary>span:first-child{flex-wrap:wrap}
#admin.officeCompact #fuelGroups504>details>div{max-width:100%;box-sizing:border-box}
/* A record becomes labelled fields when its columns cannot fit. No cells are removed. */
body .officeRecordTable{max-width:100%;box-sizing:border-box}
body table.officeRecordCards{display:block!important;min-width:0!important;width:100%!important;table-layout:auto!important;border-collapse:separate}
body table.officeRecordCards>thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
body table.officeRecordCards>:is(tbody,tfoot){display:block!important;width:100%!important}
body table.officeRecordCards>:is(tbody,tfoot)>tr{display:grid!important;grid-template-columns:repeat(var(--record-columns,2),minmax(0,1fr))!important;width:100%!important;min-width:0!important;box-sizing:border-box;gap:8px!important;margin:8px 0!important;padding:10px!important;border:1px solid #d7e2ee!important;border-radius:10px;background:#fff}
body table.officeRecordCards>:is(tbody,tfoot)>tr>td{display:block!important;min-width:0!important;width:auto!important;max-width:100%!important;padding:4px!important;border:0!important;white-space:normal!important;overflow-wrap:anywhere;box-sizing:border-box;text-align:left!important}
body table.officeRecordCards>:is(tbody,tfoot)>tr>td::before{content:attr(data-office-label)!important;display:block;font-size:11px;font-weight:750;color:#586c84;line-height:1.3;margin-bottom:4px}
body table.officeRecordCards>:is(tbody,tfoot)>tr>td.officeWideCell{grid-column:1/-1!important}
body table.officeRecordCards>:is(tbody,tfoot)>tr>td.officeWideCell::before{display:none}
body table.officeRecordCards :is(input,select,textarea,.btn,button){min-width:0!important;max-width:100%!important;box-sizing:border-box;white-space:normal!important}
body table.officeRecordCards .btn{min-height:40px;margin:2px 2px 2px 0;padding:7px 10px!important}
body table.officeRecordCards>:is(tbody,tfoot)>tr[hidden],body table.officeRecordCards>:is(tbody,tfoot)>tr.hidden{display:none!important}
body table.officeRecordCards[hidden],body table.officeRecordCards.hidden,body table.officeRecordCards[style*="display: none"],body table.officeRecordCards>:is(tbody,tfoot)>tr[style*="display: none"]{display:none!important}
#admin .tab .table:has(>.officeRecordCards){max-height:none!important;overflow:visible!important}
#rotationDialog,#kilometersDialog,#restOverviewDialog,.officeTachoDialog{box-sizing:border-box;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important;scroll-padding-top:80px}
#rotationDialog header,#kilometersDialog>header,#restOverviewDialog>header{position:sticky!important;top:0!important;z-index:15;flex-wrap:wrap;gap:8px!important}
.clbvLeaveModal505{width:100%!important;max-width:100%!important;box-sizing:border-box}
@media(max-width:900px){
 #admin.officeCompact:not(.officeOnHome)>.top{padding:8px!important;gap:5px!important}
 #admin.officeCompact:not(.officeOnHome)>.top .officeWelcome{display:none!important}
 #admin.officeCompact:not(.officeOnHome) .tab :is(.financeGrid,.grid){grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))!important}
 #admin.officeCompact:not(.officeOnHome) .tab>.card{padding:10px!important}
 #admin.officeCompact .costReceiptShortcuts .btn{font-size:14px;padding:10px!important}
 #rotationDialog .rotBody{padding:10px!important}#rotationDialog .rotToolbar>*{min-width:0;max-width:100%}
 #rotationDialog .rotGrid{grid-template-columns:1fr!important}
 body table.officeRecordCards>:is(tbody,tfoot)>tr{gap:6px!important;padding:7px!important}
 #admin .tab input:not([type=checkbox]):not([type=radio]),#admin .tab select,#admin .tab textarea{font-size:16px!important}
}

body[data-office-expenses] .wrap{max-width:none;width:100%;padding:12px}
body[data-office-expenses] dialog{width:calc(100% - 12px);max-width:calc(100% - 12px);max-height:calc(100dvh - 12px);margin:auto}
body[data-office-expenses] .detailHead{position:sticky;top:0;z-index:5;background:#fff;gap:10px;padding:12px}
body[data-office-expenses] .dialogBody{max-height:none;overflow:visible}
body[data-office-expenses] .field{min-width:0}
body[data-office-expenses] :is(input,select){max-width:100%;box-sizing:border-box}
body[data-office-expenses] .importInstructions{padding:8px 0;font-size:12px}
body[data-office-expenses] .importInstructions summary{cursor:pointer;font-weight:700}
@media(max-width:760px){body[data-office-expenses] .filters{display:grid;grid-template-columns:1fr}body[data-office-expenses] .field select{max-width:none;font-size:16px}body[data-office-expenses] .detailHead .btn{flex-shrink:0}body[data-office-expenses] .tableScroll{overflow:visible}body[data-office-expenses] .stats{grid-template-columns:1fr}body[data-office-expenses] .hero{padding:12px}body[data-office-expenses] .toolbar{flex-wrap:wrap}}

}
@media screen {
 #admin .invoiceEditorGrid>div{min-width:0!important;max-width:100%!important;width:100%;box-sizing:border-box}
 #admin .invoiceEditorGrid{grid-template-columns:minmax(0,1.65fr) minmax(0,.6fr)}
 #admin .invoiceEditorGrid :is(.inputAction,.tripQuickAdd){min-width:0;max-width:100%;flex-wrap:wrap}
 #admin .invoiceEditorGrid .inputAction input{flex:1 1 140px;width:100%}
 .officeTachoDialog label{display:flex;flex-direction:column;gap:6px;margin:12px 0}
 .officeTachoDialog :is(input,select){min-width:0;max-width:100%;box-sizing:border-box;min-height:40px}
 @media(max-width:1050px){#admin .invoiceEditorGrid{grid-template-columns:minmax(0,1fr)!important}}
 @media(max-width:650px){
  #rotationDialog header{display:grid!important;grid-template-columns:minmax(0,1fr) auto;padding:10px!important;gap:7px!important}
  #rotationDialog h2{font-size:18px!important}#rotationDialog header small{font-size:10px}
  #rotationDialog .rotActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #rotationDialog .rotActions button{min-width:0;max-width:100%;padding:7px;font-size:12px}
 }
}
@media screen and (max-width:700px){#admin .invoiceEditorGrid .inputAction input{flex:0 0 auto!important;height:44px!important}}

/* Eén verticale schuifbalk voor het rustoverzicht. */
#restOverviewDialog[open]{overflow:hidden!important;max-height:100dvh!important}
#restOverviewDialog .restOverviewContent{flex:1;min-height:0;overflow:auto!important}
#restOverviewDialog #dashWeekRestBody,#restOverviewDialog .trialScroll,#restOverviewDialog #dashWeekRestScroller{max-height:none!important;height:auto!important;overflow:visible!important}
#restOverviewDialog .cardRestTrial table{min-width:0;width:100%}
.messageRecipientList .btn{justify-self:start;min-height:40px}
.inlineExpenseItems article p{overflow-wrap:anywhere}

/* Compact fuel records: use available width, keep actions together. */
@media screen {
 body #fuelRegistrationsCard table.officeRecordCards>:is(tbody,tfoot)>tr{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr))!important;
  gap:6px 10px!important;padding:8px!important;margin:5px 0!important;align-items:start;
 }
 body #fuelRegistrationsCard table.officeRecordCards>:is(tbody,tfoot)>tr>td{
  padding:2px!important;font-size:13px;line-height:1.35;
 }
 body #fuelRegistrationsCard table.officeRecordCards>:is(tbody,tfoot)>tr>td::before{margin-bottom:2px;font-size:11px}
 body #fuelRegistrationsCard table.officeRecordCards td:has(>.actions){grid-column:span 2}
 body #fuelRegistrationsCard table.officeRecordCards .actions{display:flex!important;flex-wrap:nowrap!important;gap:4px!important;margin:0!important}
 body #fuelRegistrationsCard table.officeRecordCards .btn{min-height:32px!important;padding:5px 7px!important;margin:0!important;font-size:12px!important;line-height:1.25;word-break:normal;overflow-wrap:normal}
 body #fuelRegistrationsCard table.officeRecordCards .actions .btn{flex:1 1 0}
}
@media screen and (max-width:380px){body #fuelRegistrationsCard table.officeRecordCards td:has(>.actions){grid-column:1/-1}}