/* DriverLog AU V8.9.0 — Light workspace + responsive containment hotfix
   Loaded last. Keeps data/auth/business logic unchanged. */
:root{
 --web-navy:#0B1F4D;--web-navy-2:#163A70;--web-blue:#2563EB;--web-cyan:#3BA4FF;
 --web-green:#16A34A;--web-amber:#F59E0B;--web-ink:#102A43;--web-muted:#5E6B7A;
 --web-bg:#F7FAFC;--web-card:#FFFFFF;--web-line:#DCE5EF;--web-soft-blue:#EAF3FF;
 --web-shadow:0 10px 30px rgba(15,35,70,.08);
}
html,body{width:100%!important;max-width:100%!important;height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;background:var(--web-bg)!important}
body{color:var(--web-ink)!important}
*,*::before,*::after{box-sizing:border-box;min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}
h1,h2,h3,h4,p,label,span,b,strong,button,a,td,th{overflow-wrap:anywhere}
#appShell{height:auto!important;min-height:100dvh!important;overflow:visible!important;background:var(--web-bg)!important}
#appShell>main{overflow:visible!important;min-height:0!important;background:var(--web-bg)!important}
.table-wrap,.grid-report{max-width:100%}
.table-wrap{overflow-x:auto!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
table{max-width:none}
.card,.hero,.page,.settings-subpage{max-width:100%!important}
/* Light professional auth experience */
body.driverlog-pro-web.auth-locked .auth-gate{background:linear-gradient(135deg,#EAF3FF 0%,#F7FAFC 54%,#FFFFFF 100%)!important;color:var(--web-ink)!important;overflow-y:auto!important}
body.driverlog-pro-web .web-auth-showcase{background:
 linear-gradient(135deg,rgba(11,31,77,.96),rgba(22,58,112,.90) 65%,rgba(37,99,235,.78))!important;
 min-height:100dvh!important}
body.driverlog-pro-web .auth-gate>.auth-card{background:#fff!important;color:var(--web-ink)!important}
body.driverlog-pro-web .auth-card>h1{color:var(--web-ink)!important}
/* Desktop workspace */
@media (min-width:900px){
 body.driverlog-web.driverlog-pro-web{background:linear-gradient(180deg,#F8FBFF,#F7FAFC)!important}
 body.driverlog-pro-web #appShell{padding-left:248px!important;display:block!important}
 body.driverlog-pro-web nav{width:248px!important;background:linear-gradient(180deg,#0B1F4D,#102B59)!important;overflow-y:auto!important;overflow-x:hidden!important}
 body.driverlog-pro-web #appShell>header{position:sticky!important;top:0!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid var(--web-line)!important}
 body.driverlog-pro-web #appShell>main{padding:24px 26px 54px!important;max-width:1600px!important;margin:0 auto!important;width:100%!important}
 body.driverlog-pro-web .page.active{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:16px!important;align-items:start!important}
 body.driverlog-pro-web .card,body.driverlog-pro-web .hero{background:#fff!important;border:1px solid var(--web-line)!important;box-shadow:var(--web-shadow)!important}
 body.driverlog-pro-web .web-page-title h2{color:var(--web-ink)!important}
 body.driverlog-pro-web .web-page-title p{color:var(--web-muted)!important}
 body.driverlog-pro-web #home.active>.hero{background:linear-gradient(145deg,#123A70,#2563EB)!important}
 body.driverlog-pro-web .web-kpi{background:#fff!important;border-color:var(--web-line)!important;box-shadow:0 5px 18px rgba(15,35,70,.045)!important}
 body.driverlog-pro-web .compact-stat,body.driverlog-pro-web .work-strip{background:#F8FBFF!important;border-color:#E1E9F2!important}
 body.driverlog-pro-web .web-empty-box{background:linear-gradient(135deg,#F8FBFF,#EAF3FF)!important}
 body.driverlog-pro-web .web-guide-card{box-shadow:var(--web-shadow)!important}
 body.driverlog-pro-web .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.driverlog-pro-web .money-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body.driverlog-pro-web .work-row,body.driverlog-pro-web .platform-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 body.driverlog-pro-web .web-kpi-strip{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 body.driverlog-pro-web .web-benefit-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body.driverlog-pro-web .web-start-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
/* Small laptops / MacBook split view: prioritize fit over density. */
@media (min-width:900px) and (max-width:1180px){
 body.driverlog-pro-web #appShell{padding-left:205px!important}
 body.driverlog-pro-web nav{width:205px!important;padding-left:10px!important;padding-right:10px!important}
 body.driverlog-pro-web #appShell>main{padding:18px 18px 46px!important}
 body.driverlog-pro-web .page.active>.card,body.driverlog-pro-web .page.active>.hero,
 body.driverlog-pro-web #home.active>.hero,body.driverlog-pro-web #home.active>.card:nth-of-type(n),
 body.driverlog-pro-web #income.active>.card,body.driverlog-pro-web #expenses.active>.card,
 body.driverlog-pro-web #shift.active>.card,body.driverlog-pro-web #vehicle.active>.card{grid-column:span 12!important}
 body.driverlog-pro-web .web-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.driverlog-pro-web .web-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.driverlog-pro-web .web-start-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.driverlog-pro-web .money-row,body.driverlog-pro-web .work-row,body.driverlog-pro-web .platform-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body.driverlog-pro-web .formgrid{grid-template-columns:1fr 1fr!important}
 body.driverlog-pro-web .web-page-title{align-items:flex-start!important;flex-direction:column!important}
}
/* iPad / tablet web: scroll the document, keep controls reachable, no clipped panes. */
@media (max-width:899px){
 html,body{height:auto!important;overflow-y:auto!important}
 body{padding-bottom:78px!important;background:#F7FAFC!important}
 #appShell{display:block!important;height:auto!important;min-height:100dvh!important;overflow:visible!important;padding:0!important;background:#F7FAFC!important}
 #appShell>header{position:sticky!important;top:0!important;z-index:80!important;background:#fff!important;color:var(--web-ink)!important;border-bottom:1px solid var(--web-line)!important;box-shadow:0 3px 14px rgba(15,35,70,.05)!important}
 #appShell>header .sub{color:#64748B!important}
 #appShell>main{display:block!important;width:100%!important;max-width:900px!important;margin:0 auto!important;padding:14px 14px 96px!important;overflow:visible!important;background:#F7FAFC!important}
 #appShell>nav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;height:auto!important;z-index:90!important;display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;background:rgba(255,255,255,.97)!important;border-top:1px solid #CBD5E1!important;box-shadow:0 -5px 18px rgba(15,23,42,.10)!important;padding:6px max(3px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(3px,env(safe-area-inset-left))!important}
 #appShell>nav button{width:100%!important;min-width:0!important;padding:7px 2px!important;font-size:9px!important;white-space:normal!important;color:#475569!important;background:transparent!important}
 #appShell>nav button.active{background:#EAF3FF!important;color:#174EA6!important}
 .page.active{display:block!important}
 .page.active>.card,.page.active>.hero{width:100%!important;margin-bottom:12px!important}
 .formgrid,.profile-grid,.security-grid{grid-template-columns:1fr 1fr!important}
 .money-row,.work-row,.platform-row,.daily-grid,.vehicle-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .actions{align-items:stretch!important}.actions button{min-width:0!important}
 .auth-gate{position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;overflow-y:auto!important;padding:18px!important}
 .auth-card{max-height:none!important;width:min(520px,100%)!important;margin:auto!important;overflow:visible!important}
 .shift-start-card,.vehicle-card,.odometer-card,.app-message-card{max-height:calc(100dvh - 30px)!important;overflow-y:auto!important}
}
@media (max-width:680px){
 body{padding-bottom:82px!important}
 #appShell>main{padding:10px 10px 94px!important}
 .formgrid,.profile-grid,.security-grid,.money-row,.work-row,.platform-row,.daily-grid,.vehicle-kpis{grid-template-columns:1fr!important}
 .signup-grid{grid-template-columns:1fr!important}
 .web-example-row{grid-template-columns:1fr 1fr!important}
 .actions{display:grid!important;grid-template-columns:1fr!important}
 .date-nav{width:100%!important}.date-nav input{width:100%!important;min-width:0!important}
 .daily-head{align-items:flex-start!important}
 .header-row{align-items:center!important}
 .header-user{max-width:90px!important}
 #appShell>nav button{font-size:0!important}
 #appShell>nav button::first-line{font-size:18px!important}
}
@media (max-width:430px){
 #appShell>main{padding:8px 8px 92px!important}
 .card{padding:12px!important;border-radius:13px!important}
 .hero.compact{padding:13px!important}
 .web-example-row{grid-template-columns:1fr!important}
 .auth-gate{padding:10px!important}
 .auth-card{padding:17px!important;border-radius:18px!important}
}
/* Modals and internal settings pages must always scroll instead of clipping. */
.vehicle-modal,.shift-start-modal,.odometer-dialog,.app-message{overflow-y:auto!important}
.vehicle-card,.shift-start-card,.odometer-card,.app-message-card,.settings-subpage{max-width:100%!important}
.settings-subpage{overflow:visible!important}