/* The supplied artwork is decorative. It never intercepts map or form input. */
:root{--fleet-backdrop:none}

#app.app{
  background-color:#0b1521;
  background-image:linear-gradient(rgba(7,17,31,.82),rgba(7,17,31,.9)),var(--fleet-backdrop);
  background-position:center;
  background-size:100% 100%,min(70vw,720px) auto;
  background-repeat:no-repeat;
}
#app.app>.right,#app.app>.main{background-color:rgba(7,17,31,.55)}
#app.app>.side{
  background-color:#0b1521;
  background-image:linear-gradient(#0b1521,transparent 18%,transparent 82%,#0b1521),linear-gradient(rgba(7,17,31,.52),rgba(7,17,31,.72)),var(--fleet-backdrop);
  background-position:center 220px,center,center 220px;
  background-size:270px 270px,100% 100%,270px 270px;
  background-repeat:no-repeat;
}
#app.app>.side .small{color:#b8c9dc}
#app.app>.side .tab{color:#f0f5fc;text-shadow:0 1px 3px #000}
#app.app>.side .tab:hover{background-color:#182a43}
#app.app>.side .tab.active{background-color:#153f36;color:#9af0c2}

#driverMode.driver-mode{isolation:isolate;background:#0b1521}
#driverMode.driver-mode::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  --fleet-art-size:min(92vw,680px);
  background-image:linear-gradient(#0b1521,transparent 15%,transparent 85%,#0b1521),linear-gradient(rgba(7,17,31,.36),rgba(7,17,31,.6)),var(--fleet-backdrop);
  background-position:center 140px,center,center 140px;
  background-size:var(--fleet-art-size) var(--fleet-art-size),100% 100%,var(--fleet-art-size) var(--fleet-art-size);
  background-repeat:no-repeat;
}
#driverMode .driver-card{background:rgba(8,19,32,.7);border-color:#415366}
#driverMode .driver-card .small,#driverMode .driver-top .small{color:#bdccdc}
#driverMode .driver-top{background:rgba(8,19,32,.92);border-radius:12px;padding:12px}
#driverMode input,#driverMode select,#driverMode textarea{background-color:#142238}

@media(max-width:560px){
  #app.app>.side{background-size:260px 260px,100% 100%,260px 260px;background-position:right center,center,right center}
}
@media(forced-colors:active){
  #app.app,#app.app>.side,#driverMode.driver-mode::before{background-image:none}
}

/* Phones (and the Fleet Driver app, which fills the whole screen): keep content clear of the notch,
   status bar and home bar. These are 0 on computers and in browsers that don't need them. */
#loginScreen{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#driverMode .driver-shell{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#app{padding-top:env(safe-area-inset-top)}
/* iPhones zoom in on any typing box with text under 16px (and an app can't pinch back out), so on
   phones and tablets the boxes use 16px. */
@media (pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}}

/* Full-screen pages a driver opens (Safety, Accounting, Compliance and Maintenance messages, timesheets):
   keep them clear of the phone's status bar / notch and home bar, and keep Back pinned at the top. */
#safetyChatScreen,#payrollChatScreen,.rc-screen,#timeScreen{padding-top:calc(14px + env(safe-area-inset-top))!important;padding-bottom:calc(14px + env(safe-area-inset-bottom))!important;padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important;box-sizing:border-box;overflow-x:hidden}
#safetyChatScreen .office-header,#payrollChatScreen .office-header,.rc-screen .rc-top{position:sticky;top:0;z-index:3;background:#07111f;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;margin:0 0 6px}
#safetyChatScreen .office-header h1,#payrollChatScreen .office-header h1,.rc-screen .rc-top h1{font-size:clamp(18px,5vw,26px);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
#safetyChatBack,#payrollChatBack,.rc-screen [data-back]{flex:0 0 auto;min-height:44px;min-width:72px}
.rc-driver-view .rc-wrap{height:calc(100dvh - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;min-height:280px!important}
.proof-modal{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
/* Pop-up windows on phones (Maintenance, Monthly Maintenance, and the rest): keep them between the
   status bar / notch and the home bar, and keep the title and Close pinned at the top while scrolling. */
@media (pointer:coarse),(max-width:700px){
 dialog:modal{inset:calc(env(safe-area-inset-top) + 8px) 0 calc(env(safe-area-inset-bottom) + 8px)!important;margin:auto!important;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)!important;overflow:auto;box-sizing:border-box}
 .dm-head,.mm-head{position:sticky;top:-14px;z-index:3;background:#0f2233;padding:8px 0;margin:-6px 0 0}
 .dm-head .btn,.mm-head .btn{min-height:44px;min-width:76px}
}