/* DriverLog AU V8.9.0 — Sober Signature UI refresh
   Presentation only: compact login/signup, darker form boundaries, faint community watermark,
   progressive empty-space messaging and stronger responsive containment. */
:root{
  --signature-ink:#102A43;
  --signature-muted:#607089;
  --signature-line:#7C8CA5;
  --signature-line-hover:#52657A;
  --signature-blue:#2563EB;
  --signature-soft:#F1F6FC;
  --signature-card:#FFFFFF;
}

/* Form boundaries: visible without becoming heavy. */
body.driverlog-pro-web input,
body.driverlog-pro-web select,
body.driverlog-pro-web textarea{
  border:1.5px solid var(--signature-line)!important;
  background:rgba(255,255,255,.97)!important;
  color:var(--signature-ink)!important;
  box-shadow:0 1px 2px rgba(15,35,70,.025)!important;
}
body.driverlog-pro-web input:hover,
body.driverlog-pro-web select:hover,
body.driverlog-pro-web textarea:hover{border-color:var(--signature-line-hover)!important}
body.driverlog-pro-web input:focus,
body.driverlog-pro-web select:focus,
body.driverlog-pro-web textarea:focus{
  outline:none!important;
  border-color:var(--signature-blue)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.12)!important;
}

/* Signature artwork behind working areas. Cards remain nearly opaque for readability. */
body.driverlog-pro-web:not(.auth-locked) #appShell>main{
  background:
    linear-gradient(rgba(247,250,252,.955),rgba(247,250,252,.955)),
    url('community-signature.svg') center 46%/min(1320px,96vw) auto no-repeat!important;
  background-attachment:fixed!important;
}
body.driverlog-pro-web .card,
body.driverlog-pro-web .hero,
body.driverlog-pro-web .web-guide-card,
body.driverlog-pro-web .web-kpi,
body.driverlog-pro-web .web-desktop-note{
  background-color:rgba(255,255,255,.965)!important;
}

/* The desktop nav must remain a true left rail, never drop below content. */
@media (min-width:900px){
  body.driverlog-pro-web #appShell{display:block!important;padding-left:232px!important;min-height:100dvh!important}
  body.driverlog-pro-web #appShell>nav{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:232px!important;height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;
    z-index:75!important;
  }
  body.driverlog-pro-web #appShell>header{z-index:70!important}
  body.driverlog-pro-web #appShell>main{width:100%!important;min-height:calc(100dvh - 72px)!important}
}

/* Sober compact login/signup composition. */
@media (min-width:900px){
  body.driverlog-pro-web.auth-locked .auth-gate{
    display:grid!important;
    grid-template-columns:minmax(350px,.82fr) minmax(520px,1.18fr)!important;
    align-items:stretch!important;
    background:#F6F9FD!important;
    color:var(--signature-ink)!important;
    overflow-y:auto!important;
  }
  body.driverlog-pro-web .web-auth-showcase{
    min-height:100dvh!important;
    padding:32px 36px 30px!important;
    color:var(--signature-ink)!important;
    justify-content:flex-start!important;
    gap:28px!important;
    background:
      linear-gradient(rgba(241,246,252,.925),rgba(241,246,252,.925)),
      url('community-signature.svg') 48% 58%/1180px auto no-repeat!important;
    border-right:1px solid #DCE5EF!important;
  }
  body.driverlog-pro-web .web-auth-showcase::before,
  body.driverlog-pro-web .web-auth-showcase::after{display:none!important}
  body.driverlog-pro-web .web-showcase-brand{gap:12px!important}
  body.driverlog-pro-web .web-showcase-brand img{
    width:56px!important;height:56px!important;border-radius:16px!important;
    box-shadow:0 7px 20px rgba(15,35,70,.10)!important;border:1px solid #CEDAE8!important;
  }
  body.driverlog-pro-web .web-showcase-brand strong{font-size:21px!important;color:#102A43!important;letter-spacing:-.3px!important}
  body.driverlog-pro-web .web-showcase-brand span{font-size:9px!important;color:#526A86!important;letter-spacing:.11em!important;margin-top:2px!important}
  body.driverlog-pro-web .web-showcase-main{max-width:620px!important;margin:4px 0 0!important}
  body.driverlog-pro-web .web-eyebrow{
    padding:5px 9px!important;border-radius:999px!important;background:#E6EFFA!important;
    border:1px solid #CDDAEA!important;color:#355677!important;font-size:9px!important;letter-spacing:.07em!important;
  }
  body.driverlog-pro-web .web-showcase-main h2{
    color:#102A43!important;font-size:clamp(31px,3.1vw,43px)!important;line-height:1.08!important;
    letter-spacing:-1.25px!important;margin:16px 0 11px!important;max-width:560px!important;
  }
  body.driverlog-pro-web .web-showcase-main p{
    max-width:585px!important;font-size:13px!important;line-height:1.6!important;color:#60738A!important;margin:0!important;
  }
  body.driverlog-pro-web .web-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-top:17px!important;max-width:610px!important;
  }
  body.driverlog-pro-web .web-feature-chip{
    gap:8px!important;padding:9px 10px!important;border-radius:12px!important;
    background:rgba(255,255,255,.74)!important;border:1px solid #D7E2EE!important;backdrop-filter:none!important;
  }
  body.driverlog-pro-web .web-feature-chip i{font-size:16px!important}
  body.driverlog-pro-web .web-feature-chip b{font-size:10.5px!important;color:#183656!important;margin-bottom:2px!important}
  body.driverlog-pro-web .web-feature-chip span{font-size:9px!important;line-height:1.35!important;color:#6E8095!important}
  body.driverlog-pro-web .web-showcase-bottom{
    margin-top:auto!important;padding-top:14px!important;border-top:1px solid #D9E3EE!important;
    color:#60738A!important;font-size:9.5px!important;gap:10px!important;
  }
  body.driverlog-pro-web .web-dot{width:7px!important;height:7px!important;box-shadow:0 0 0 4px rgba(34,197,94,.10)!important}

  body.driverlog-pro-web .auth-gate>.auth-card{
    min-height:100dvh!important;justify-content:center!important;
    padding:34px clamp(38px,5vw,68px)!important;
    background:
      linear-gradient(rgba(255,255,255,.975),rgba(255,255,255,.975)),
      url('community-signature.svg') 62% 58%/1220px auto no-repeat!important;
    color:var(--signature-ink)!important;
  }
  body.driverlog-pro-web .auth-gate>.auth-card::before{
    content:'Secure cloud workspace'!important;top:20px!important;right:28px!important;
    font-size:9px!important;color:#748399!important;letter-spacing:.07em!important;
  }
  body.driverlog-pro-web .auth-card>div[data-app-version]{
    font-size:9px!important;padding:4px 7px!important;margin-bottom:9px!important;
  }
  body.driverlog-pro-web .auth-card>h1{
    font-size:27px!important;letter-spacing:-.65px!important;margin:0 0 7px!important;line-height:1.12!important;
  }
  body.driverlog-pro-web .auth-panel .welcome-sub{font-size:12px!important;line-height:1.45!important;margin-bottom:15px!important;color:#68788E!important}
  body.driverlog-pro-web .auth-panel label{font-size:10.5px!important;margin:9px 0 5px!important;color:#35445C!important}
  body.driverlog-pro-web .auth-panel input,
  body.driverlog-pro-web .auth-panel select,
  body.driverlog-pro-web .auth-panel textarea{
    min-height:43px!important;border-radius:10px!important;padding:9px 11px!important;font-size:12px!important;
  }
  body.driverlog-pro-web .auth-panel .primary,
  body.driverlog-pro-web .auth-panel .success,
  body.driverlog-pro-web .auth-panel .outline{
    min-height:43px!important;border-radius:10px!important;font-size:12px!important;
  }
  body.driverlog-pro-web .auth-link{font-size:11px!important;margin-top:7px!important;padding:5px!important}
  body.driverlog-pro-web .auth-msg{font-size:10.5px!important;line-height:1.4!important;margin-top:10px!important;padding:8px 10px!important;min-height:32px!important}
  body.driverlog-pro-web .signup-grid{gap:7px 9px!important}
  body.driverlog-pro-web .agreement-box{padding:9px 10px!important;margin-top:9px!important;font-size:9.5px!important;line-height:1.35!important;border-radius:10px!important}
  body.driverlog-pro-web .legal-links{font-size:9.5px!important;margin-top:5px!important}
  body.driverlog-pro-web .username-status{font-size:9.5px!important;margin-top:2px!important}
}

/* Progressive signature message. */
.web-progressive-slogan{
  grid-column:1/-1!important;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:6px;padding:14px 17px;border:1px solid #DCE6F1;border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(234,243,255,.74));
  box-shadow:0 7px 22px rgba(15,35,70,.045);
}
.web-progressive-slogan strong{font-size:13px;color:#183656;letter-spacing:-.1px}
.web-progressive-slogan span{font-size:10.5px;color:#708198;line-height:1.45;text-align:right;max-width:520px}
.web-auth-slogan{
  margin-top:17px;padding:13px 14px;border-left:3px solid #6EA8E8;border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.62);max-width:570px;
}
.web-auth-slogan strong{display:block;color:#17385F;font-size:14px;letter-spacing:-.15px}
.web-auth-slogan span{display:block;margin-top:3px;color:#667B91;font-size:10.5px;line-height:1.45}

/* Slightly more compact page typography. */
@media (min-width:900px){
  body.driverlog-pro-web .web-page-title h2{font-size:23px!important;letter-spacing:-.55px!important}
  body.driverlog-pro-web .web-page-title p{font-size:11.5px!important}
  body.driverlog-pro-web .section-title{font-size:14px!important}
  body.driverlog-pro-web #appShell>main{padding-top:20px!important}
}

@media (min-width:900px) and (max-height:760px){
  body.driverlog-pro-web .web-auth-showcase{padding:22px 28px!important;gap:18px!important}
  body.driverlog-pro-web .web-showcase-brand img{width:48px!important;height:48px!important}
  body.driverlog-pro-web .web-showcase-main h2{font-size:31px!important;margin:11px 0 8px!important}
  body.driverlog-pro-web .web-showcase-main p{font-size:11.5px!important;line-height:1.45!important}
  body.driverlog-pro-web .web-feature-grid{margin-top:11px!important}
  body.driverlog-pro-web .web-feature-chip{padding:7px 8px!important}
  body.driverlog-pro-web .web-auth-slogan{margin-top:10px!important;padding:9px 11px!important}
  body.driverlog-pro-web .auth-gate>.auth-card{padding-top:26px!important;padding-bottom:24px!important}
}

@media (max-width:899px){
  body.driverlog-pro-web.auth-locked .auth-gate{
    background:
      linear-gradient(rgba(247,250,252,.96),rgba(247,250,252,.96)),
      url('community-signature.svg') center 44%/1000px auto no-repeat!important;
  }
  body.driverlog-pro-web .auth-card{background:rgba(255,255,255,.96)!important}
  .web-progressive-slogan{display:none!important}
}

/* V8.9.0 Compact Proportion Hotfix 2
   User-requested refinement: wider sober showcase rail, shorter/narrower value fields,
   and better use of desktop whitespace without changing auth or data logic. */
@media (min-width:900px){
  /* Give the left showcase more visual presence and prevent the account form from stretching edge-to-edge. */
  body.driverlog-pro-web.auth-locked .auth-gate{
    grid-template-columns:minmax(430px,38%) minmax(0,62%)!important;
  }

  body.driverlog-pro-web .web-auth-showcase{
    padding-left:clamp(34px,3.1vw,52px)!important;
    padding-right:clamp(30px,2.8vw,46px)!important;
  }

  /* Keep the account workspace compact on large laptop and desktop screens. */
  body.driverlog-pro-web .auth-gate>.auth-card{
    align-items:flex-start!important;
    padding-left:clamp(42px,5vw,84px)!important;
    padding-right:clamp(42px,5vw,84px)!important;
  }
  body.driverlog-pro-web .auth-gate>.auth-card>div[data-app-version],
  body.driverlog-pro-web .auth-gate>.auth-card>h1,
  body.driverlog-pro-web .auth-gate>.auth-card>.auth-panel{
    width:min(100%,720px)!important;
  }
  body.driverlog-pro-web .auth-gate>.auth-card>div[data-app-version]{margin-top:auto!important}
  body.driverlog-pro-web .auth-gate>.auth-card>.auth-panel:last-of-type{margin-bottom:auto!important}

  /* Inputs and value controls are intentionally shorter and no longer run across the full right pane. */
  body.driverlog-pro-web .auth-panel input,
  body.driverlog-pro-web .auth-panel select,
  body.driverlog-pro-web .auth-panel textarea{
    min-height:39px!important;
    height:39px!important;
    padding:7px 10px!important;
    font-size:11.5px!important;
    border-radius:9px!important;
  }
  body.driverlog-pro-web .auth-panel textarea{height:auto!important;min-height:62px!important}
  body.driverlog-pro-web .auth-panel .primary,
  body.driverlog-pro-web .auth-panel .success,
  body.driverlog-pro-web .auth-panel .outline{
    min-height:39px!important;
    padding:8px 12px!important;
    font-size:11.5px!important;
    border-radius:9px!important;
  }
  body.driverlog-pro-web .auth-panel label{margin:7px 0 4px!important;font-size:10px!important}
  body.driverlog-pro-web .auth-panel .welcome-sub{margin-bottom:12px!important}
  body.driverlog-pro-web .auth-msg{min-height:30px!important;margin-top:8px!important;padding:7px 9px!important}
}

/* Slightly narrower account column on very wide displays while keeping it left-aligned and purposeful. */
@media (min-width:1500px){
  body.driverlog-pro-web .auth-gate>.auth-card>div[data-app-version],
  body.driverlog-pro-web .auth-gate>.auth-card>h1,
  body.driverlog-pro-web .auth-gate>.auth-card>.auth-panel{
    width:min(100%,760px)!important;
  }
}

/* Short-height laptop safeguard: retain the wider rail but keep everything above the fold. */
@media (min-width:900px) and (max-height:760px){
  body.driverlog-pro-web.auth-locked .auth-gate{
    grid-template-columns:minmax(405px,36%) minmax(0,64%)!important;
  }
  body.driverlog-pro-web .auth-panel input,
  body.driverlog-pro-web .auth-panel select{min-height:37px!important;height:37px!important}
  body.driverlog-pro-web .auth-panel .primary,
  body.driverlog-pro-web .auth-panel .success,
  body.driverlog-pro-web .auth-panel .outline{min-height:37px!important}
}