/* DriverLog AU V8.9.0 — Visual Layout Refinement Hotfix 4
   UI-only: centered scroll workspace, Melbourne greeting banner, stronger entry fields,
   lighter landmark navigation rail, sky-to-purple Driver Brief, warm sandstone header. */
:root{
  --dl-h4-header:66px;
  --dl-h4-field-bg:#e7edf4;
  --dl-h4-field-border:#172638;
  --dl-h4-left-top:#1b467c;
  --dl-h4-left-bottom:#285f98;
  --dl-h4-sand-1:#f7f1e9;
  --dl-h4-sand-2:#eee2d2;
  --dl-h4-lilac:#d7ccf4;
}

/* 1) Stronger, slightly darker entry/value fields. */
body.driverlog-pro-web input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
body.driverlog-pro-web select,
body.driverlog-pro-web textarea,
body.driverlog-pro-web .odometer-card input:not([type="checkbox"]):not([type="radio"]),
body.driverlog-pro-web .vehicle-card input:not([type="checkbox"]):not([type="radio"]){
  background:var(--dl-h4-field-bg)!important;
  border:2.5px solid var(--dl-h4-field-border)!important;
  color:#0d2033!important;
  box-shadow:inset 0 1px 2px rgba(20,34,51,.07),0 1px 0 rgba(255,255,255,.8)!important;
}
body.driverlog-pro-web input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
body.driverlog-pro-web select:hover,
body.driverlog-pro-web textarea:hover{background:#dde6ef!important;border-color:#07111e!important}
body.driverlog-pro-web input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
body.driverlog-pro-web select:focus,
body.driverlog-pro-web textarea:focus{
  background:#f5f8fb!important;
  border-color:#0b1f35!important;
  outline:3px solid rgba(37,99,235,.23)!important;
  outline-offset:1px!important;
}

/* Make shaded AppSigns genuinely visible on entry cards and auth forms. */
body.driverlog-pro-web .dl-entry-card::after{
  inset:0!important;width:auto!important;height:auto!important;right:0!important;bottom:0!important;border-radius:inherit!important;
  background-image:url('driverlog-appsign.png'),url('driverlog-appsign.png'),url('driverlog-appsign.png')!important;
  background-repeat:no-repeat!important;
  background-size:82px,56px,68px!important;
  background-position:95% 15%,72% 88%,25% 94%!important;
  opacity:.095!important;
  filter:saturate(.7) grayscale(.12)!important;
}
body.driverlog-pro-web.auth-locked .auth-card::before{
  background-size:132px,76px,98px!important;
  background-position:91% 15%,66% 83%,20% 93%!important;
  opacity:.065!important;
}

/* 2) Lighter left rail with softly embedded world-landmark silhouettes and AppSign marks. */
@media (min-width:900px){
  body.driverlog-pro-web:not(.auth-locked) nav{
    background:linear-gradient(180deg,var(--dl-h4-left-top) 0%,#214f86 46%,var(--dl-h4-left-bottom) 100%)!important;
    border-right:1px solid rgba(132,181,228,.34)!important;
    box-shadow:7px 0 28px rgba(27,58,94,.12)!important;
    overflow:hidden!important;
  }
  body.driverlog-pro-web:not(.auth-locked) nav::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;
    background-image:url('world-landmarks.svg'),url('driverlog-appsign.png'),url('driverlog-appsign.png'),url('driverlog-appsign.png')!important;
    background-repeat:no-repeat!important;
    background-size:100% 100%,94px,64px,72px!important;
    background-position:center center,107% 22%,-13% 49%,102% 74%!important;
    opacity:.15!important;
    filter:saturate(.65)!important;
  }
  body.driverlog-pro-web:not(.auth-locked) nav>*{position:relative!important;z-index:1!important}
  body.driverlog-pro-web .dl-left-brand{background:rgba(7,31,63,.20)!important;border-color:rgba(196,224,248,.24)!important}
  body.driverlog-pro-web .dl-left-pulse{
    background:linear-gradient(145deg,rgba(31,89,154,.62),rgba(104,83,173,.46))!important;
    border-color:rgba(202,224,250,.34)!important;
    backdrop-filter:blur(5px)!important;
  }
}

/* 3) Driver Brief has a deliberate sky-blue top and richer lilac/purple bottom. */
body.driverlog-pro-web .driver-brief{
  background:
    radial-gradient(circle at 86% 9%,rgba(119,119,231,.15),transparent 31%),
    radial-gradient(circle at 8% 29%,rgba(72,181,236,.17),transparent 34%),
    linear-gradient(180deg,#e7f5ff 0%,#e2f1ff 34%,#e7e7fb 67%,var(--dl-h4-lilac) 100%)!important;
  border-left:1px solid #aebcdf!important;
}
body.driverlog-pro-web .driver-brief::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(0deg,rgba(123,93,189,.15),rgba(157,129,215,.06) 60%,transparent);
  z-index:0;
}
body.driverlog-pro-web .driver-brief>*{position:relative;z-index:1}
body.driverlog-pro-web .dl-brief-card{background:rgba(255,255,255,.76)!important;border-color:#b6c4dc!important}

/* 4) Warm light-sandstone upper header with an embedded AppSign, rather than plain white. */
@media (min-width:900px){
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{
    height:var(--dl-h4-header)!important;
    min-height:var(--dl-h4-header)!important;
    background:
      linear-gradient(90deg,rgba(247,241,233,.97),rgba(238,226,210,.96) 55%,rgba(248,244,238,.97)),
      url('driverlog-appsign.png') 78% center/52px 52px no-repeat!important;
    border-bottom:1px solid #c7b49d!important;
    box-shadow:0 4px 15px rgba(70,55,40,.07)!important;
    backdrop-filter:blur(8px)!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>header::after{
    content:"DRIVE • RECORD • UNDERSTAND • GROW";position:absolute;right:24px;bottom:4px;
    color:rgba(79,59,40,.16);font-size:8px;font-weight:900;letter-spacing:.18em;pointer-events:none;
  }
}

/* 5) Desktop: only the middle workspace scrolls. Scrollbar sits immediately before the right rail. */
@media (min-width:1380px){
  html:has(body.driverlog-pro-web:not(.auth-locked)),
  body.driverlog-pro-web:not(.auth-locked){height:100%!important;overflow:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;padding:0!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{
    position:fixed!important;top:0!important;left:var(--dl-left-rail)!important;right:var(--dl-right-rail)!important;width:auto!important;z-index:84!important;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{
    position:fixed!important;left:var(--dl-left-rail)!important;right:var(--dl-right-rail)!important;top:var(--dl-h4-header)!important;bottom:0!important;
    width:auto!important;max-width:none!important;height:auto!important;margin:0!important;padding:20px 24px 50px!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
    scrollbar-width:thin;scrollbar-color:#8198b0 #edf2f7;
  }
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::-webkit-scrollbar{width:11px}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::-webkit-scrollbar-track{background:#edf2f7;border-left:1px solid #d7e0e9}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main::-webkit-scrollbar-thumb{background:#8198b0;border-radius:999px;border:2px solid #edf2f7}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main>#desktopPortalBanner,
  body.driverlog-pro-web:not(.auth-locked) #appShell>main>.page{width:min(100%,1160px)!important;margin-left:auto!important;margin-right:auto!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header .header-row{width:min(100%,1160px)!important;max-width:1160px!important;margin:0 auto!important}
}
@media (min-width:900px) and (max-width:1379px){
  html:has(body.driverlog-pro-web:not(.auth-locked)),body.driverlog-pro-web:not(.auth-locked){height:100%!important;overflow:hidden!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell{height:100dvh!important;overflow:hidden!important;padding:0!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>header{position:fixed!important;top:0!important;left:210px!important;right:0!important;width:auto!important;z-index:84!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main{position:fixed!important;left:210px!important;right:0!important;top:var(--dl-h4-header)!important;bottom:0!important;width:auto!important;max-width:none!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important;padding:18px 20px 46px!important}
  body.driverlog-pro-web:not(.auth-locked) #appShell>main>.page,body.driverlog-pro-web:not(.auth-locked) #appShell>main>#desktopPortalBanner{width:min(100%,1120px)!important;margin-left:auto!important;margin-right:auto!important}
}

/* 6) Welcome/good-day box becomes a full-width Melbourne banner rather than a small blue tile. */
@media (min-width:900px){
  body.driverlog-pro-web #home.active>.hero.compact,
  body.driverlog-pro-web #home.active>.hero{
    grid-column:1/-1!important;width:100%!important;max-width:none!important;min-height:176px!important;
    padding:24px 30px!important;border-radius:17px!important;
    background-image:
      linear-gradient(90deg,rgba(247,251,255,.98) 0%,rgba(241,248,255,.94) 38%,rgba(235,244,253,.68) 62%,rgba(239,235,251,.50) 100%),
      url('melbourne-welcome.svg')!important;
    background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
    border:1px solid #b9c9da!important;box-shadow:0 9px 28px rgba(15,45,75,.08)!important;color:#102a43!important;
    overflow:hidden!important;
  }
  body.driverlog-pro-web #home.active>.hero #greeting{color:#12314f!important;font-size:27px!important;line-height:1.15!important;text-shadow:0 1px 0 rgba(255,255,255,.7)!important}
  body.driverlog-pro-web #home.active>.hero .datetime,
  body.driverlog-pro-web #home.active>.hero .small,
  body.driverlog-pro-web #home.active>.hero .hero-live-line{color:#385873!important;font-weight:650!important}
  body.driverlog-pro-web #home.active>.hero .hero-shift{max-width:620px!important;margin-top:14px!important}
}

/* 7) Page signatures remain visible but quieter under practical content. */
body.driverlog-pro-web #appShell>main::before{opacity:.06!important}
body.driverlog-pro-web #appShell>main::after{opacity:.13!important}

/* Tablet/mobile returns to normal document scrolling and retains the existing responsive design. */
@media (max-width:899px){
  html,body.driverlog-pro-web{height:auto!important;overflow-y:auto!important}
  body.driverlog-pro-web #appShell{height:auto!important;min-height:100dvh!important;overflow:visible!important}
  body.driverlog-pro-web #appShell>header{position:sticky!important;left:auto!important;right:auto!important;height:auto!important;min-height:0!important}
  body.driverlog-pro-web #appShell>main{position:static!important;height:auto!important;overflow:visible!important}
  body.driverlog-pro-web #home.active>.hero.compact{
    background-image:linear-gradient(rgba(245,250,255,.94),rgba(245,250,255,.90)),url('melbourne-welcome.svg')!important;
    background-size:auto,cover!important;background-position:center!important;color:#102a43!important;
  }
}