/* Road HQ shared presentation. No workflow or data rules. */
:root{--rh-ink:#172033;--rh-muted:#617184;--rh-line:#d5dfe9;--rh-grey:#f3f5f7;--rh-blue:#2f80c9;--rh-orange:#ff7900;--rh-red:#b42318}
html[data-rh-ui] body{font-family:Arial,sans-serif;color:var(--rh-ink)}
html[data-rh-ui] body :is(button,a.btn,a.action,.csv-template-download):where(:not(.tabbtn)):where(:not(.linkbtn)):where(:not(.fallback-link)):where(:not(.dashboard-kpi)):where(:not(.dashboard-load)):where(:not(.dashboard-alert)):where(:not(.dashboard-task)){background:var(--rh-grey)!important;background-image:none!important;color:var(--rh-ink)!important;border:1px solid var(--rh-blue)!important;border-radius:8px!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;font-family:Arial,sans-serif!important;font-size:13px!important;font-weight:700!important;line-height:1.35!important;min-height:38px;padding:9px 14px;cursor:pointer;transition:background-color .15s,border-color .15s;transform:none!important;text-decoration:none}
html[data-rh-ui] body :is(button,a.btn,a.action,.csv-template-download):where(:not(.tabbtn)):where(:not(.linkbtn)):where(:not(.fallback-link)):hover{background:#eaf0f5!important;border-color:var(--rh-orange)!important;transform:none!important;box-shadow:none!important}
html[data-rh-ui] body :is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--rh-orange)!important;outline-offset:3px;box-shadow:none!important}
html[data-rh-ui] body :is(button,a.btn,a.action)[data-rh-primary]{border:2px solid #28547b!important;font-weight:800!important}
html[data-rh-ui] body button[data-rh-danger]{border-color:var(--rh-red)!important;color:var(--rh-red)!important}
html[data-rh-ui] body button:disabled{opacity:.55!important;cursor:not-allowed!important;transform:none!important}
html[data-rh-ui] body :is(button.active-view,button.selected,button.tab.active){border-color:var(--rh-orange)!important;box-shadow:inset 0 -2px var(--rh-orange)!important}
html[data-rh-ui] body :is(.portal-sheet-action,.csv-template-download) small{color:var(--rh-muted)!important}
html[data-rh-ui] body :is(.tabpage,.card,.rh-csv-dialog) h2{font-size:21px!important;line-height:1.3;margin:0 0 12px;font-weight:700!important}
html[data-rh-ui] body :is(.tabpage,.card,.rh-csv-dialog) h3{font-size:17px!important;line-height:1.35;margin-top:18px;margin-bottom:10px}
html[data-rh-ui] body label{font-size:13px;line-height:1.35;margin-bottom:6px}
html[data-rh-ui] body .small{font-size:12px;line-height:1.5}
html[data-rh-ui] body :is(input,select,textarea):where(:not([type=checkbox])):where(:not([type=radio])):where(:not([type=range])):where(:not([type=hidden])){border:1px solid var(--rh-line);border-radius:8px;font-family:Arial,sans-serif;font-size:14px;line-height:1.4;padding:10px 12px;min-height:40px;max-width:100%}
html[data-rh-ui] body textarea{min-height:90px}
html[data-rh-ui] body :is(.fields,.form-grid){gap:12px}
html[data-rh-ui] body :is(.card,.dashboard-panel){border:1px solid var(--rh-line);border-radius:12px;padding:18px;box-shadow:0 5px 18px #1028400d}
html[data-rh-ui] body :is(.toolbar,.actions,.planner-actions,.rh-page-actions,.entry-choice){gap:8px}
html[data-rh-ui] body :is(th,td){border-bottom-color:var(--rh-line)}
html[data-rh-ui] body .item:hover{transform:none!important;box-shadow:none!important;border-color:var(--rh-line)!important}
/* Dense office tables keep a deliberate compact button size. */
html[data-rh-ui=office] body :is(.planner-actions,.fleet-flow-row,.employee-file-actions-v110) button{min-height:32px!important;font-size:12px!important;padding:6px 10px!important}
html[data-rh-ui=office] body :is(.fleet-head,.planner-head){gap:12px}
html[data-rh-ui=office] body #customersTab .fleet-head{flex-direction:column;align-items:stretch}
html[data-rh-ui=office] body :is(.fleet-head>.toolbar,.rh-page-actions){display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;margin:8px 0!important}
html[data-rh-ui=office] body :is(.fleet-head>.toolbar,.rh-page-actions) button{flex:0 0 auto!important;width:auto!important;min-height:38px!important;height:auto!important;padding:9px 12px!important;font-size:13px!important}
html[data-rh-ui=office] body .planner-load-form-toggle{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
html[data-rh-ui=office] body .planner-load-form-toggle .csv-template-download{display:flex;align-items:center;gap:8px;margin:0}
html[data-rh-ui=office] body .rh-sheet-icon{width:26px;height:26px;flex-shrink:0;vertical-align:middle;margin-right:7px}
html[data-rh-ui=office] body .fleet-flow-row{padding:9px 12px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--rh-line)!important;border-radius:0!important;align-items:center!important;gap:10px!important}
html[data-rh-ui=office] body .fleet-flow-actions .planner-actions{flex-direction:row!important;align-items:center}
html[data-rh-ui=office] body .fleet-flow-documents[hidden]{display:none!important}
html[data-rh-ui=office] body .fleet-flow-date{padding:3px 5px}
html[data-rh-ui=office] body .fleet-flow-groups{gap:8px}
html[data-rh-ui=office] body .fleet-flow-group>summary{padding:8px 10px}
@media(min-width:1151px){
 html[data-rh-ui=office] body #fleetTrailerPanel .fleet-flow-row{grid-template-columns:minmax(160px,1.5fr) repeat(4,minmax(85px,1fr)) minmax(170px,1.3fr)!important}
 html[data-rh-ui=office] body #fleetTrailerPanel .fleet-flow-table>thead{display:block!important}
 html[data-rh-ui=office] body #fleetTrailerPanel .fleet-flow-table>thead>tr{display:grid!important;grid-template-columns:minmax(160px,1.5fr) repeat(4,minmax(85px,1fr)) minmax(170px,1.3fr);gap:10px;padding:8px 12px;border-bottom:1px solid var(--rh-line)}
 html[data-rh-ui=office] body #fleetTrailerPanel .fleet-flow-table>thead th{display:block!important;text-align:left;font-size:12px;padding:0!important}
 html[data-rh-ui=office] body #fleetTrailerPanel .fleet-flow-table>thead th:nth-child(6){display:none!important}
 html[data-rh-ui=office] body #fleetTrailerPanel .fleet-flow-row>td::before{display:none!important}
}
/* Consistent status colours; the underlying status is untouched. */
html[data-rh-ui] body :is(.badge.completed,.badge.accepted,.status-completed,.rh-status-completed){background:#dcfae6!important;color:#08704f!important}
html[data-rh-ui] body :is(.badge.planned,.badge.sent,.rh-status-planned){background:#e8f1ff!important;color:#1459b4!important}
html[data-rh-ui] body :is(.badge.pending,.rh-status-pending,.status-held-delayed){background:#fff1d6!important;color:#805100!important}
html[data-rh-ui] body :is(.badge.cancelled,.badge.rejected,.rh-status-cancelled,.status-cancelled){background:#fee4e2!important;color:#b42318!important}
html[data-rh-ui] body :is(.planner-job-completed>td,.planner-week-item.planner-job-completed,.planner-month-item.planner-job-completed,.dashboard-load.planner-job-completed){background:#dcfae6!important}
/* Portals share their shell, summary cards and action alignment. */
html[data-rh-ui=customer] body :is(.shell,.head),html[data-rh-ui=subcontractor] body :is(.wrap,.portal-head-inner){max-width:1180px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px}
html[data-rh-ui=customer] body .card,html[data-rh-ui=subcontractor] body .card{padding:20px;margin-bottom:16px}
html[data-rh-ui=subcontractor] body #portal>.card>.grid{margin-top:16px;gap:12px}
html[data-rh-ui=subcontractor] body #portal>.card>.grid>div{background:#f2f7fb;border:1px solid var(--rh-line);padding:16px;border-radius:12px}
html[data-rh-ui=subcontractor] body #portal>.card>.grid>div>b{font-size:12px;color:var(--rh-muted);font-weight:400}
html[data-rh-ui=subcontractor] body #portal>.card>.grid>div>div{font-size:24px;font-weight:700;margin-top:8px}
html[data-rh-ui] body .rh-job-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
html[data-rh-ui] body .rh-job-actions :is(button,a){margin:0!important}
html[data-rh-ui=subcontractor] body .item{padding:16px;background:#fff;border-color:var(--rh-line);border-radius:12px}
html[data-rh-ui=subcontractor] body .item>div:first-child{margin-bottom:8px}
html[data-rh-ui=subcontractor] body .item .status{display:inline-block;border-radius:999px;padding:4px 8px;font-size:12px;margin-left:8px}
html[data-rh-ui=subcontractor] body .item>.small{margin-top:4px}
html[data-rh-ui] body .portal-footer{font-size:12px;color:var(--rh-muted);border-top:1px solid var(--rh-line);padding:18px;text-align:center}
html[data-rh-ui=customer] body .auth-card,html[data-rh-ui=subcontractor] body .access-card{width:min(470px,94vw);padding:28px}
html[data-rh-ui] body .auth-card h2,html[data-rh-ui] body .access-card h2{font-size:24px!important}
html[data-rh-ui=office] body :is(.tabpage,.wrap,.planner-card,.fleet-card,.planner-month-view){min-width:0}
html[data-rh-ui=office] body :is(.planner-table-wrap,.planner-month-grid,.planner-month-weekdays,.planner-week-grid){max-width:100%;overflow-x:auto}
@media(max-width:700px){
 html[data-rh-ui] body :is(button,a.btn,a.action,.csv-template-download):where(:not(.tabbtn)):where(:not(.linkbtn)):where(:not(.fallback-link)){min-height:44px!important;white-space:normal!important}
 html[data-rh-ui] body :is(.card,.dashboard-panel){padding:14px}
 html[data-rh-ui] body :is(.portal-toolbar,.toolbar,.row){flex-wrap:wrap}
 html[data-rh-ui=office] body .tabbar{max-width:100vw;overflow-x:auto}
 html[data-rh-ui=office] body .tabbar>.wrap{max-width:100%;overflow-x:auto}
 html[data-rh-ui=office] body :is(.planner-wrap,.fleet-wrap,.settings-wrap){padding-left:12px;padding-right:12px}
 html[data-rh-ui=office] body #fleetSubcontractorPanel{max-width:100%;overflow-x:auto}
 html[data-rh-ui=office] body .planner-month-grid{grid-template-columns:repeat(7,minmax(110px,1fr))}
 html[data-rh-ui=office] body .fleet-flow-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html[data-rh-ui=office] body .fleet-flow-actions{grid-column:1/-1!important}
 html[data-rh-ui=customer] body .shell,html[data-rh-ui=subcontractor] body .wrap{padding:14px}
 html[data-rh-ui] body .rh-job-actions>*{flex:1 1 140px}
 html[data-rh-ui] body :is(.portal-sheet-action,.csv-template-download) strong{overflow-wrap:anywhere}
}
@media print{html[data-rh-ui] body .card{box-shadow:none}}
html[data-rh-ui=office] body #fleetTab>.fleet-wrap>.fleet-card>.fleet-head>.toolbar button{min-height:38px!important;padding:9px 12px!important}
html[data-rh-ui=office] body #fleetTab :is(#fleetVehiclePanel,#fleetTrailerPanel) .fleet-flow-row{padding:9px 12px!important;margin:0!important;border:0!important;border-bottom:1px solid var(--rh-line)!important;align-items:center!important;gap:10px!important}
html[data-rh-ui] body.portal-auth-mode :is(.auth-card,.access-card){color:#edf5ff!important}
html[data-rh-ui] body.portal-auth-mode :is(.auth-card,.access-card) :is(h2,label,.small){color:#edf5ff!important}
html[data-rh-ui=customer] body .head,html[data-rh-ui=subcontractor] body .portal-head-inner{display:grid;grid-template-columns:150px minmax(0,1fr) 150px;gap:16px;align-items:center;padding-top:18px;padding-bottom:18px}
html[data-rh-ui=customer] body .head h1,html[data-rh-ui=subcontractor] body .portal-head h1{font-size:24px;line-height:1.3}
@media(max-width:700px){
 html[data-rh-ui=office] body #settingsUnlockV110{min-width:0;max-width:100%}
 html[data-rh-ui=office] body #settingsUnlockV110 .settings-lock-card{min-width:0;width:100%;max-width:100%;overflow-wrap:anywhere}
 html[data-rh-ui=office] body :is(.planner-month-grid,.planner-month-weekdays){grid-template-columns:repeat(7,minmax(110px,1fr))!important;gap:6px}
 html[data-rh-ui=office] body.road-hq-hybrid header .appbrand{grid-template-columns:72px minmax(0,1fr) 88px!important;gap:8px!important}
 html[data-rh-ui=office] body.road-hq-hybrid header .road-hq-account-actions{grid-column:1/-1;grid-row:2;justify-content:flex-end!important}
 html[data-rh-ui=office] body.road-hq-hybrid header .road-hq-header-frame{grid-column:3;grid-row:1;width:88px!important;height:50px!important}
 html[data-rh-ui=office] body.road-hq-hybrid header .road-hq-header-frame .road-hq-header-logo{width:88px!important;height:88px!important;top:-20px!important}
 html[data-rh-ui=office] body #fleetTab>.fleet-wrap>.fleet-card>.fleet-head>.toolbar button{min-height:44px!important}
 html[data-rh-ui=customer] body .head,html[data-rh-ui=subcontractor] body .portal-head-inner{grid-template-columns:80px minmax(0,1fr) 80px;gap:8px;padding:14px}
 html[data-rh-ui=customer] body .head h1,html[data-rh-ui=subcontractor] body .portal-head h1{font-size:18px}
 html[data-rh-ui=customer] body .head img,html[data-rh-ui=subcontractor] body .portal-head-inner img{max-width:80px}
}