/* Shared final screen rules. Keep all records and existing actions accessible. */
@media screen{
 #admin#admin#admin.officeHasPageTitle>.top .officeWelcome{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)!important;align-items:center!important;gap:8px!important;width:100%!important}
 #admin#admin#admin #officePageTitle{margin:0!important;padding:0!important;color:#fff!important;text-align:center!important;font-size:clamp(16px,1.4vw,22px)!important;line-height:1.25!important;min-width:0!important;overflow-wrap:break-word}
 #admin#admin#admin .officeWelcome>.officeWeather{text-align:right;min-width:0}
 #admin#admin#admin.officeHasPageTitle>.officeScreenBar,#admin#admin#admin .officeHeadingInHeader{display:none!important}
 #admin#admin#admin #costImportActions{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:8px!important;width:100%!important;align-items:stretch!important}
 #admin#admin#admin #costImportActions>div{display:contents!important}
 #admin#admin#admin #costImportActions button{width:100%!important;min-width:0!important;margin:0!important;min-height:48px!important;height:100%!important;padding:10px 8px!important;box-sizing:border-box!important;white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}
 #admin#admin#admin #costWeekNow{background:#fff!important;color:#111!important;border:1px solid var(--l,#d3dfef)!important;box-shadow:none!important}
 #admin#admin#admin #costs>.financeHead>div:first-child>h3{display:none!important}
 #admin#admin#admin #costs>.financeHead{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
 #admin#admin#admin #costs>.financeHead>div:first-child{flex:1 1 300px!important;min-width:0!important}
 #admin#admin#admin #costs .financePeriodPanel{flex:1 1 300px!important;min-width:0!important;max-width:100%!important}
 #admin#admin#admin #costs .financePeriodModes{display:flex!important;flex:1 1 100%!important;gap:6px!important;min-width:0!important;width:100%!important}
 #admin#admin#admin #costs .financePeriodModes>.btn{flex:1 1 0!important;width:auto!important;min-width:0!important;white-space:nowrap!important;word-break:normal!important;padding:8px!important}
}
@media screen and (max-width:700px){
 #admin#admin#admin #costImportActions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #admin#admin#admin.officeHasPageTitle>.top .officeWelcome{grid-template-columns:minmax(0,1fr)!important;gap:3px!important}
 #admin#admin#admin.officeHasPageTitle>.top .officeWelcome>strong,#admin#admin#admin.officeHasPageTitle>.top .officeWelcome>.officeWeather{display:none!important}
}
@media screen {
 #admin#admin#admin #officeNotes .officeNoteCard{grid-template-columns:minmax(150px,1fr) minmax(0,2fr) minmax(280px,auto)!important}
 #admin#admin#admin #officeNotes .officeNoteCard>*{min-width:0;max-width:100%;box-sizing:border-box}
 #admin#admin#admin #officeNotes .officeNoteCard>.actions{display:flex!important;flex-flow:row nowrap!important;gap:6px!important;width:100%!important;min-width:0!important;overflow:visible!important;align-items:stretch!important}
 #admin#admin#admin #officeNotes .officeNoteCard>.actions>.btn{flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:40px!important;height:auto!important;padding:8px!important;white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;margin:0!important}
}
@media screen and (max-width:1100px){
 #admin#admin#admin #officeNotes .officeNoteCard{grid-template-columns:minmax(0,1fr)!important}
 #admin#admin#admin #officeNotes .officeNoteCard>:is(h3,p,.actions){grid-column:1!important;grid-row:auto!important}
}
@media screen {
 body :is(#admin,#driver,#customer){min-width:0;max-width:100%;box-sizing:border-box}
 body :is(#admin,#driver,#customer) :is(.tab,.card,.field,.grid){min-width:0;box-sizing:border-box}
 body dialog{box-sizing:border-box;max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;scroll-padding-top:72px}
 body dialog .portalBackHeader,body dialog.assignmentCompact>.portalBackHeader{
  position:sticky!important;top:0!important;z-index:40!important;display:flex!important;flex-wrap:wrap!important;
  align-items:center!important;justify-content:flex-start!important;gap:8px!important;background:var(--portal-back-background,#fff);padding:8px!important;
 }
 body dialog .portalBackHeader>.portalBackButton{order:-10!important;align-self:flex-start!important;min-height:42px!important;margin:0!important}
 #driver[data-compact-driver] .compactScreenBar{position:sticky!important;top:0!important;z-index:40;background:#fff}
 /* Back and the blue header share one horizontal row. */
 #admin#admin#admin#admin#admin.mediaFullReview{padding-top:0!important}
 #admin#admin#admin#admin#admin.mediaFullReview #cmr>.mediaReviewBar{justify-content:flex-start!important;gap:10px!important;margin:0 0 6px!important;padding:4px!important}
 #admin.mediaFullReview .mediaReviewBar>.btn{min-height:42px!important;padding:8px 12px!important;margin:0!important}
 /* Compact driver archive; expanded documents keep the full available width. */
 #admin#admin#admin #cmr .mediaTable>table{
  display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;
 }
 #admin#admin#admin #cmr .mediaTable>table>thead{display:none!important}
 #admin#admin#admin #cmr .mediaTable>table:has(.mediaDriverHeader):not(:has(.mediaDriverFileRow:not(.hidden))){height:100%!important}
 #admin#admin#admin #cmr .mediaTable>table:has(.mediaDriverHeader):not(:has(.mediaDriverFileRow:not(.hidden)))>#cmrRows{
  min-height:100%!important;grid-auto-rows:minmax(60px,1fr)!important;align-content:stretch!important;
 }
 #admin#admin#admin #cmr #cmrRows{
  display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr))!important;
  gap:6px!important;align-content:start!important;width:100%!important;
 }
 #admin#admin#admin #cmr #cmrRows:has(>.mediaDriverFileRow:not(.hidden)){grid-template-columns:minmax(0,1fr)!important}
 #admin#admin#admin #cmr #cmrRows>.mediaDriverHeader{
  display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:4px!important;box-sizing:border-box!important;
 }
 #admin#admin#admin #cmr #cmrRows>.mediaDriverHeader>td{display:block!important;padding:0!important;width:100%!important;height:100%!important;box-sizing:border-box!important}
 #admin#admin#admin #cmr .mediaDriverHeaderInner{height:100%!important;box-sizing:border-box!important}
 #admin#admin#admin #cmr .mediaDriverHeaderInner{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:44px!important;padding:5px 8px!important;gap:6px!important}
 #admin#admin#admin #cmr .mediaDriverHeaderInner>div{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:13px!important}
 #admin#admin#admin #cmr .mediaDriverHeaderInner .btn{min-height:36px!important;padding:5px 8px!important;font-size:12px!important;margin:0!important;flex:0 0 auto}
 #admin#admin#admin #cmr .mediaDriverHeader>td::before{display:none!important}
 #admin#admin#admin #cmr #cmrRows>.mediaDriverFileRow{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))!important;gap:8px!important;grid-column:1/-1;min-width:0!important;max-width:100%!important}
 #admin#admin#admin #cmr #cmrRows>.mediaDriverFileRow>td{display:block!important;width:auto!important;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}
 #admin#admin#admin #cmr #cmrRows>.mediaDriverFileRow>td::before{content:attr(data-office-label);display:block;font-size:11px;font-weight:700;color:#586c84;margin-bottom:4px}
 #admin#admin#admin #cmr #cmrRows>.hidden{display:none!important}
 body :is(#admin,dialog) :is(.actions,.costViewNav,.invoiceNav,.driverHubNav){gap:6px;align-items:stretch}
 body :is(#admin,dialog) :is(.actions,.costViewNav,.invoiceNav,.driverHubNav)>.btn{box-sizing:border-box;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:auto;line-height:1.25;margin:0}
}
@media screen and (min-width:900px){
 #admin#admin .officeNoteCard{grid-template-columns:minmax(160px,1fr) minmax(0,2fr) auto!important}
 #admin#admin .officeNoteCard>.actions{width:auto!important;min-width:260px!important;gap:6px!important}
 #admin#admin .officeNoteCard>.actions>.btn{width:auto!important;min-width:80px!important;flex:1 0 auto!important;word-break:normal!important;hyphens:none!important}
 #admin#admin .financeHead>.actions{min-width:250px!important}
 #admin#admin #costImportActions{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;width:100%!important}
 #admin#admin #costImportActions>div{display:flex!important;flex:1 1 0!important;gap:6px!important;min-width:0!important;margin:0!important}
 #admin#admin #costImportActions button{flex:1 1 0!important;width:0!important;min-width:0!important;min-height:44px!important;padding:8px!important;font-size:14px!important;white-space:normal!important}
 #admin#admin .card>.actions:not(:has(input,select,textarea,label)),
 #admin#admin .financeHead>.actions:not(:has(input,select,textarea)),#admin#admin .costViewNav,#admin#admin #finance>.invoiceNav,
 #admin#admin .driverHubNav,#admin#admin .costReceiptShortcuts{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:6px!important;width:100%!important;min-width:0!important;
 }
 #admin#admin .card>.actions:not(:has(input,select,textarea,label))>.btn,
 #admin#admin .financeHead>.actions:not(:has(input,select,textarea))>.btn,#admin#admin .costViewNav>.btn,#admin#admin #finance>.invoiceNav>.btn,
 #admin#admin .driverHubNav>.btn,#admin#admin .costReceiptShortcuts>.btn{
  flex:1 1 0!important;width:0!important;min-width:0!important;min-height:44px!important;height:auto!important;
  padding:8px 5px!important;font-size:clamp(12px,.9vw,15px)!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
 }
}
/* Mixed search controls need room for their labels as well as flexible fields. */
@media screen {
 #admin#admin#admin .invoiceSearchControls481{display:flex!important;flex-wrap:wrap!important;gap:6px!important;width:100%!important;min-width:0!important}
 #admin#admin#admin .invoiceSearchControls481>input{flex:3 1 220px!important;width:auto!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
 #admin#admin#admin .invoiceSearchControls481>select{flex:1 1 160px!important;width:auto!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
 #admin#admin#admin .invoiceSearchControls481>.btn{flex:0 0 auto!important;width:auto!important;min-width:80px!important;min-height:44px!important;padding:8px 12px!important;white-space:nowrap!important}
}
@media screen and (max-width:899px){
 #admin#admin#admin #finance>.invoiceNav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;gap:6px!important}
 #admin#admin#admin #finance>.invoiceNav>.btn{width:100%!important;min-width:0!important;padding:8px!important;white-space:normal!important}
 #admin#admin #cmr #cmrRows{grid-template-columns:minmax(0,1fr)!important}
 #admin#admin .mediaReviewBar{flex-wrap:wrap!important}
 #admin#admin .mediaReviewBar strong{flex:1;min-width:140px}
 body :is(#admin,dialog) :is(.actions,.costViewNav,.invoiceNav,.driverHubNav){flex-wrap:wrap!important;min-width:0;max-width:100%}
 body :is(#admin,dialog) :is(.actions,.costViewNav,.invoiceNav,.driverHubNav)>.btn{flex:1 1 120px;min-width:0;min-height:44px!important}
}