/* Final shared usability rules. Keep page-specific styling in its owning stylesheet. */
html,body,main,.view{max-width:100%}
main,.view,.panel,.table-wrap{min-width:0}
button,input,select,textarea,summary,[tabindex]{scroll-margin:90px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(36,168,198,.3);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.55}
summary{min-height:42px}
.page-heading,.panel-head,.heading-actions,.top-actions{min-width:0}
.page-heading h1,.page-heading p,.panel-head h2,.panel-head h3{overflow-wrap:anywhere}
.table-wrap{max-width:100%;overscroll-behavior-x:contain}
dialog[open]{max-width:calc(100vw - 20px)}
dialog form{max-height:calc(100dvh - 112px);overscroll-behavior:contain}
.modal-actions,dialog footer{position:sticky;bottom:0;z-index:2;padding-top:12px;padding-bottom:max(4px,env(safe-area-inset-bottom));background:#fff}
.customer-account-related-item,.booking-record-document,.finance-document-main{overflow-wrap:anywhere}
.workshop-board,.diary,.table-wrap,.log-table-wrap{scrollbar-width:thin;scrollbar-color:#9bb8c8 #edf3f6}
.workshop-board{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.board-column{scroll-snap-align:start}

@media(max-width:1000px){
 .finance-server-presets article{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .finance-server-presets article>div{grid-column:1/-1}
 .workspace-template-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .workspace-template-row>label:nth-child(4){grid-column:1/-1}
 .tools-grid{grid-template-columns:1fr}
}

@media(max-width:720px){
 .page-heading{display:grid;gap:12px}
 .heading-actions{width:100%;flex-wrap:wrap}
 .heading-actions>button{flex:1 1 auto}
 #customers-view .table-wrap{overflow:visible;border:0;background:transparent;box-shadow:none}
 #customers-view table,#customers-view tbody,#customers-view tr,#customers-view td{display:block;width:100%}
 #customers-view thead{display:none}
 #customer-rows{display:grid;gap:10px}
 #customer-rows tr{overflow:hidden;border:1px solid #dbe5ea;border-left:4px solid #2c8fb8;border-radius:7px;background:#fff;box-shadow:0 4px 14px rgba(20,51,73,.05)}
 #customer-rows td{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;padding:9px 11px;border-top:1px solid #edf1f3}
 #customer-rows td:first-child{padding-top:12px;border-top:0}
 #customer-rows td::before{align-self:start;color:#718695;font-size:9px;font-weight:800;text-transform:uppercase}
 #customer-rows td:nth-child(1)::before{content:"Customer"}
 #customer-rows td:nth-child(2)::before{content:"Contact"}
 #customer-rows td:nth-child(3)::before{content:"Vehicles"}
 #customer-rows td:nth-child(4)::before{content:"Activity"}
 #customer-rows td:nth-child(5)::before{content:"Attention"}
 #customer-rows .customer-directory-empty td{display:block;text-align:center}
 #customer-rows .customer-directory-empty td::before{display:none}
 .customer-vehicle-chips span{max-width:100%}
 .mini-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
 .workshop-board{grid-template-columns:repeat(7,minmax(190px,82vw));margin-right:0;padding-bottom:12px}
 .diary{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 #users-view .table-wrap,.log-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 #users-view table,.log-table{min-width:690px}
}

@media(max-width:520px){
 #bms-topbar{left:67px;right:0;min-height:62px;overflow:visible;padding:7px 8px}
 #bms-topbar .bms-nav-actions,#bms-topbar .bms-workspace-actions{gap:5px}
 #bms-topbar .bms-workspace-actions{flex:0 1 auto;margin-left:auto}
 #bms-topbar .sync-status,#bms-topbar #today-button,#bms-topbar .current-user-pill,#bms-topbar .search{display:none!important}
 #bms-topbar button{min-width:0;padding:8px 7px}
 #bms-topbar-call{width:38px;overflow:hidden;font-size:0}
 #bms-topbar-call::before{content:"Call";font-size:10px}
 #bms-topbar-notifications{font-size:0}
 #bms-topbar-notifications::before{content:"Alerts";font-size:10px}
 #bms-topbar #new-booking{font-size:0}
 #bms-topbar #new-booking::before{content:"+ Booking";font-size:10px}
 #bms-topbar #logout-button{font-size:0}
 #bms-topbar #logout-button::before{content:"Exit";font-size:10px}
 main{padding-top:62px}
 .view{padding-right:10px;padding-left:10px}
 dialog[open]{top:68px;width:calc(100% - 12px);max-height:calc(100dvh - 74px)}
 dialog form{padding:16px;max-height:calc(100dvh - 74px)}
 .modal-actions{display:grid;grid-template-columns:1fr}
 .modal-actions button{width:100%}
 #customer-rows td{grid-template-columns:78px minmax(0,1fr)}
 .finance-filter-bar{grid-template-columns:1fr}
 .finance-document-row{grid-template-columns:1fr}
 .finance-row-actions{justify-content:flex-start}
 .fleet-card dl{grid-template-columns:1fr}
 .booking-record-stage-strip{position:relative;top:auto}
 .mini-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}