/* DriverLog AU V8.9.0 — Responsive Navigation + Welcome Hero Hotfix 7
   Prevents the bottom navigation from compressing in split-screen/narrow browsers
   and restores the colourful people/Opera House welcome imagery. */

/* Stable navigation anatomy across desktop, tablet and phone. */
body.driverlog-pro-web #appShell>nav button .nav-icon,
body.driverlog-pro-web #appShell>nav button .nav-label{display:block;pointer-events:none}
body.driverlog-pro-web #appShell>nav button .nav-icon{font-size:16px;line-height:1.05}
body.driverlog-pro-web #appShell>nav button .nav-label{font-size:inherit;line-height:1.12;margin-top:2px}

/* Restore an engaging welcome panel without sacrificing legibility. */
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero.compact{
  min-height:188px!important;
  background-image:
    linear-gradient(90deg,rgba(238,247,255,.99) 0%,rgba(238,247,255,.97) 34%,rgba(238,247,255,.70) 49%,rgba(238,247,255,.14) 67%,rgba(244,237,255,.08) 100%),
    url('cheering-crowd-opera-house.png')!important;
  background-repeat:no-repeat!important;
  background-position:center,right center!important;
  background-size:cover,58% 100%!important;
  border:1px solid #9ebee0!important;
  box-shadow:0 10px 28px rgba(35,83,131,.10)!important;
  overflow:hidden!important;
}
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero::after{opacity:.20!important}
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .datetime,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .small,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-live-line,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-shift{position:relative;z-index:3;max-width:47%!important}
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting{color:#102f50!important;text-shadow:0 1px 0 rgba(255,255,255,.95)!important}
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .datetime,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .small,
body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-live-line{color:#345b79!important}

/* Narrow/split-screen layout: use a stable, horizontally scrollable bottom rail.
   Items NEVER squeeze below the minimum touch width. */
@media (max-width:899px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  body.driverlog-pro-web:not(.auth-locked){
    padding-bottom:calc(72px + env(safe-area-inset-bottom))!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{
    padding-bottom:calc(94px + env(safe-area-inset-bottom))!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(78px,1fr)!important;
    align-items:stretch!important;
    gap:2px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    scroll-snap-type:x proximity!important;
    padding:5px max(5px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav::-webkit-scrollbar{display:none!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button{
    width:auto!important;
    min-width:78px!important;
    min-height:54px!important;
    margin:0!important;
    padding:5px 6px!important;
    flex:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    border-radius:11px!important;
    scroll-snap-align:center!important;
    touch-action:manipulation!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button .nav-icon{font-size:19px!important;line-height:1!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button .nav-label{display:block!important;font-size:10.5px!important;font-weight:750!important;line-height:1.1!important;margin-top:4px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button.active{
    box-shadow:inset 0 0 0 1px #b9d5f2!important;
  }

  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero.compact{
    min-height:166px!important;
    background-size:cover,64% 100%!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .datetime,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .small,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-live-line,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-shift{max-width:54%!important}
}

@media (max-width:680px){
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{
    grid-auto-columns:76px!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button{
    min-width:76px!important;
    min-height:56px!important;
    font-size:10px!important;
  }
  /* Override the old mobile rule that zeroed button text and caused odd shrinking. */
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button,
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button .nav-label{font-size:10px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button .nav-icon{font-size:19px!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero.compact{
    min-height:184px!important;
    padding:16px!important;
    background-image:
      linear-gradient(90deg,rgba(239,248,255,.99) 0%,rgba(239,248,255,.96) 46%,rgba(239,248,255,.58) 70%,rgba(241,235,255,.18) 100%),
      url('cheering-crowd-opera-house.png')!important;
    background-size:cover,76% 100%!important;
    background-position:center,right center!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .datetime,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .small,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-live-line,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-shift{max-width:64%!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting{font-size:20px!important}
}

@media (max-width:430px){
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav{grid-auto-columns:72px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button{min-width:72px!important;padding-inline:4px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>nav button .nav-label{font-size:9.5px!important}
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero #greeting,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .datetime,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .small,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-live-line,
  body.driverlog-pro-web:not(.auth-locked) #home.active>.hero .hero-shift{max-width:72%!important}
}