/* DriverLog AU V8.9.0 — Tablet Responsive Architecture Hotfix 5
   Repairs iPad/small-touch-screen overlap without changing auth, Supabase or business logic. */
:root{
  --dl-tab-rail:92px;
  --dl-tab-header:60px;
  --dl-tab-gap:12px;
}

/* Keep tap targets readable and prevent content from forcing horizontal overflow. */
body.driverlog-pro-web #appShell,
body.driverlog-pro-web #appShell>main,
body.driverlog-pro-web .page,
body.driverlog-pro-web .card,
body.driverlog-pro-web .hero{min-width:0!important;max-width:100%!important}
body.driverlog-pro-web .table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
body.driverlog-pro-web table{width:max-content;min-width:100%}

/* iPad landscape / small touch laptop shell.
   Width rule covers normal 1024/1180/1194 tablet widths; pointer rule also catches 12.9-inch iPad landscape. */
@media (min-width:900px) and (max-width:1279px),
       (min-width:900px) and (max-width:1366px) and (pointer:coarse){
  html:has(body.driverlog-pro-web:not(.auth-locked)),
  body.driverlog-pro-web:not(.auth-locked){
    width:100%!important;height:100%!important;overflow:hidden!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell{
    position:relative!important;display:block!important;width:100%!important;height:100dvh!important;min-height:100dvh!important;
    padding:0 0 0 var(--dl-tab-rail)!important;overflow:hidden!important;background:#f4f7fb!important;
  }

  /* Slim, dedicated navigation rail: never overlays the workspace. */
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{
    position:fixed!important;z-index:92!important;left:0!important;top:0!important;bottom:0!important;right:auto!important;
    width:var(--dl-tab-rail)!important;height:100dvh!important;margin:0!important;
    padding:74px 7px 14px!important;display:flex!important;flex-direction:column!important;gap:6px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    background:linear-gradient(180deg,#23598e 0%,#28649a 54%,#2b6ca5 100%)!important;
    border-right:1px solid rgba(117,166,211,.55)!important;box-shadow:7px 0 24px rgba(19,53,88,.11)!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav::before{
    opacity:.08!important;background-size:190% 100%,66px,46px,52px!important;background-position:center,112% 25%,-18% 55%,115% 79%!important;
  }
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand{
    left:10px!important;right:10px!important;top:10px!important;min-height:54px!important;padding:5px!important;
    justify-content:center!important;border-radius:13px!important;background:rgba(8,43,79,.20)!important;
  }
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand img{width:42px!important;height:42px!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-brand>div{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button{
    width:100%!important;min-width:0!important;min-height:48px!important;height:auto!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:2px!important;
    padding:7px 2px!important;margin:0!important;border-radius:11px!important;text-align:center!important;
    font-size:10.5px!important;line-height:1.12!important;white-space:normal!important;overflow:visible!important;
    transform:none!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button:hover{transform:none!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-left-pulse{display:none!important}

  /* Compact tablet header. */
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{
    position:fixed!important;z-index:91!important;left:var(--dl-tab-rail)!important;right:0!important;top:0!important;
    width:auto!important;height:var(--dl-tab-header)!important;min-height:var(--dl-tab-header)!important;margin:0!important;
    overflow:hidden!important;
    background:linear-gradient(100deg,#eaf5ff 0%,#dfefff 42%,#ede8ff 72%,#f4ecfb 100%)!important;
    border-bottom:1px solid #b7c8db!important;box-shadow:0 3px 12px rgba(25,61,96,.08)!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>header::after{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-row{
    width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0 10px!important;gap:8px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-row>div:first-child{min-width:0!important;gap:7px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-row>div:first-child img{width:34px!important;height:34px!important;border-radius:9px!important;flex:0 0 auto!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .brand{font-size:15px!important;line-height:1.1!important;white-space:nowrap!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .sub{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-actions{
    flex:0 1 auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:5px!important;min-width:0!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-actions button{
    min-height:38px!important;padding:7px 9px!important;font-size:11px!important;white-space:nowrap!important;border-radius:10px!important;
  }

  /* Workspace owns scrolling. No hidden desktop canvas and no sidebar overlap. */
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{
    position:fixed!important;z-index:1!important;left:var(--dl-tab-rail)!important;right:0!important;top:var(--dl-tab-header)!important;bottom:0!important;
    width:auto!important;height:auto!important;max-width:none!important;margin:0!important;
    padding:14px 14px 34px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;background:rgba(244,247,251,.97)!important;
    scrollbar-width:thin!important;scrollbar-color:#7f98b1 #edf2f7!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::-webkit-scrollbar{width:9px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::-webkit-scrollbar-track{background:#edf2f7!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::-webkit-scrollbar-thumb{background:#7f98b1!important;border-radius:99px!important;border:2px solid #edf2f7!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::before,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::after{left:var(--dl-tab-rail)!important;right:0!important}
  body.driverlog-pro-web:not(.auth-locked) #desktopPortalBanner{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main>.page{
    width:100%!important;max-width:100%!important;margin:0 auto!important;padding:0!important;
  }
  body.driverlog-pro-web:not(.auth-locked) .page.active{
    display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:12px!important;align-items:start!important;
  }
  body.driverlog-pro-web:not(.auth-locked) .page.active>.card,
  body.driverlog-pro-web:not(.auth-locked) .page.active>.hero,
  body.driverlog-pro-web:not(.auth-locked) .page.active>.web-getting-started,
  body.driverlog-pro-web:not(.auth-locked) .page.active>.web-empty-guide,
  body.driverlog-pro-web:not(.auth-locked) .page.active>.web-page-title{grid-column:1/-1!important;width:100%!important}

  /* Tablet density: reflow instead of shrinking the entire desktop UI. */
  body.driverlog-pro-web:not(.auth-locked) .card{padding:14px!important;border-radius:14px!important}
  body.driverlog-pro-web:not(.auth-locked) .section-title{font-size:15px!important}
  body.driverlog-pro-web:not(.auth-locked) .soft-note,
  body.driverlog-pro-web:not(.auth-locked) .card p,
  body.driverlog-pro-web:not(.auth-locked) .card label{font-size:12.5px!important;line-height:1.4!important}
  body.driverlog-pro-web:not(.auth-locked) button{touch-action:manipulation}
  body.driverlog-pro-web:not(.auth-locked) .formgrid,
  body.driverlog-pro-web:not(.auth-locked) .profile-grid,
  body.driverlog-pro-web:not(.auth-locked) .security-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.driverlog-pro-web:not(.auth-locked) .money-row,
  body.driverlog-pro-web:not(.auth-locked) .work-row,
  body.driverlog-pro-web:not(.auth-locked) .platform-row,
  body.driverlog-pro-web:not(.auth-locked) .daily-grid,
  body.driverlog-pro-web:not(.auth-locked) .vehicle-kpis,
  body.driverlog-pro-web:not(.auth-locked) .web-kpi-strip,
  body.driverlog-pro-web:not(.auth-locked) .web-benefit-grid,
  body.driverlog-pro-web:not(.auth-locked) .web-start-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.driverlog-pro-web:not(.auth-locked) .web-start-step{min-height:0!important;padding:12px!important}
  body.driverlog-pro-web:not(.auth-locked) .web-start-step span{min-height:0!important}
  body.driverlog-pro-web:not(.auth-locked) .web-guide-card{padding:14px!important;border-radius:15px!important}
  body.driverlog-pro-web:not(.auth-locked) .web-guide-head h3{font-size:16px!important}

  /* Greeting banner remains readable instead of being squeezed. */
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero.compact{
    min-height:142px!important;padding:18px 20px!important;background-position:center!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting{font-size:22px!important;line-height:1.12!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-shift{max-width:520px!important;margin-top:10px!important}

  /* Inputs stay comfortable for touch, never compressed into unreadable controls. */
  body.driverlog-pro-web:not(.auth-locked) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  body.driverlog-pro-web:not(.auth-locked) select,
  body.driverlog-pro-web:not(.auth-locked) textarea{min-height:42px!important;font-size:14px!important;padding:8px 10px!important}
  body.driverlog-pro-web:not(.auth-locked) .actions button,
  body.driverlog-pro-web:not(.auth-locked) .home-actions button,
  body.driverlog-pro-web:not(.auth-locked) .web-guide-actions button{min-height:42px!important}

  /* Driver Brief becomes a deliberate drawer instead of disappearing or squeezing the page. */
  body.driverlog-pro-web:not(.auth-locked) .driver-brief{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.drawer-open{
    display:block!important;width:min(330px,82vw)!important;top:0!important;bottom:0!important;z-index:120!important;
    box-shadow:-20px 0 60px rgba(8,28,52,.28)!important;
  }
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.drawer-open .dl-brief-close{display:block!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-brief-toggle{
    display:block!important;position:fixed!important;right:14px!important;bottom:16px!important;top:auto!important;z-index:115!important;
    min-height:42px!important;padding:9px 14px!important;font-size:11.5px!important;
  }
}

/* iPad portrait / narrow tablet: use bottom navigation and one-or-two-column content; never inherit desktop rails. */
@media (min-width:681px) and (max-width:899px){
  body.driverlog-pro-web:not(.auth-locked){overflow-x:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell{padding:0!important;width:100%!important;max-width:100%!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{min-height:58px!important;background:linear-gradient(100deg,#eaf5ff,#e8efff 58%,#f2eafb)!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-row{padding:7px 10px!important;gap:8px!important;flex-wrap:nowrap!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .sub{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{width:100%!important;max-width:none!important;padding:12px 12px 92px!important;overflow-x:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{grid-template-columns:repeat(7,minmax(0,1fr))!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button{min-height:48px!important;font-size:10px!important;line-height:1.08!important}
  body.driverlog-pro-web:not(.auth-locked) .money-row,
  body.driverlog-pro-web:not(.auth-locked) .work-row,
  body.driverlog-pro-web:not(.auth-locked) .platform-row,
  body.driverlog-pro-web:not(.auth-locked) .daily-grid,
  body.driverlog-pro-web:not(.auth-locked) .vehicle-kpis,
  body.driverlog-pro-web:not(.auth-locked) .web-kpi-strip,
  body.driverlog-pro-web:not(.auth-locked) .web-start-grid,
  body.driverlog-pro-web:not(.auth-locked) .web-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero.compact{min-height:132px!important;padding:16px!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting{font-size:21px!important}
  body.driverlog-pro-web:not(.auth-locked) .dl-brief-toggle{display:block!important;right:12px!important;bottom:78px!important;z-index:96!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.drawer-open{display:block!important;width:min(340px,86vw)!important;z-index:120!important}
  body.driverlog-pro-web:not(.auth-locked) .driver-brief.drawer-open .dl-brief-close{display:block!important}
}

/* Phones stay single-column and touch-friendly. */
@media (max-width:680px){
  body.driverlog-pro-web:not(.auth-locked) .web-start-grid,
  body.driverlog-pro-web:not(.auth-locked) .web-benefit-grid,
  body.driverlog-pro-web:not(.auth-locked) .web-kpi-strip{grid-template-columns:1fr!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting{font-size:20px!important}
}