/* Injected into Traccar's UI via a <link> added by nginx sub_filter.
   Kept as a file: nginx caps one directive parameter at ~4KB, and a real file
   is cacheable and editable without touching the server config.

   SCOPING. Traccar reuses "-sidebar" for BOTH the login panel and the
   signed-in device list. Styling both put a large logo over the device list
   and centre-aligned it so the list collapsed and no devices appeared.

   Everything below is gated on the presence of Traccar's wordmark
   (svg[viewBox="0 0 240 64"]) as a direct child of the side panel or the form
   container - true only on the login screen, and true at every width (the
   wordmark moves between those two places responsively). If :has() is ever
   unsupported the rules simply do not apply and login reverts to Traccar's own
   look, which is the safe direction to fail in.

   Nothing here may affect layout outside the login screen. */

/* --- login side panel --- */
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) [class*="-sidebar"]{background:linear-gradient(180deg,#f8f6f0 0%,#eaf8fc 100%)!important;border-right:1px solid #c2dde8;display:flex!important;align-items:center!important;justify-content:center!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) [class*="-sidebar"]>svg{display:none!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) [class*="-sidebar"]::before{content:'';display:block;width:76%;max-width:330px;height:230px;background:url('https://fleet.icsd26.com/icsd26-logo.svg') center/contain no-repeat}

/* --- logo above the form on narrow screens, where the panel is hidden --- */
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) [class*="-container"]>svg[viewBox="0 0 240 64"]{display:none!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) [class*="-container"]::before{content:'';display:block;width:100%;height:120px;margin:4px 0 16px;background:url('https://fleet.icsd26.com/icsd26-logo.svg') center/contain no-repeat}
@media (min-width:1200px){main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) [class*="-container"]::before{display:none!important}}

/* --- fields and button --- */
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .MuiOutlinedInput-root{border-radius:12px!important;background:#f8f6f0!important;font-family:'Barlow',sans-serif!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .MuiOutlinedInput-notchedOutline{border-color:#c2dde8!important;border-width:1.5px!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#44bade!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .MuiInputLabel-root{font-family:'Barlow Condensed',sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#5a8aa0!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .MuiButton-contained{background:#074560!important;color:#f6c22a!important;font-family:'Barlow Condensed',sans-serif!important;font-weight:800!important;font-size:17px!important;letter-spacing:.16em!important;border-radius:12px!important;padding:13px!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .MuiButton-contained:hover{background:#0a5678!important}
main:has([class*="-sidebar"]>svg[viewBox="0 0 240 64"],[class*="-container"]>svg[viewBox="0 0 240 64"]) .MuiButton-contained.Mui-disabled{background:#c2dde8!important;color:#fff!important}

/* --- app switcher: top-centre, collapsed to one chip. The bottom-left corner
       holds Traccar's own nav icons and scale bar; the right edge holds its map
       controls. Never gated - it must work signed in too. --- */
#icsd26-switch{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:2147483000;display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(7,69,96,.24);border:1px solid #c2dde8;font-family:'Barlow Condensed',-apple-system,sans-serif;max-width:calc(100vw - 24px)}
#icsd26-switch a,#icsd26-switch span.cur{padding:5px 10px;border-radius:7px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:#3292b8;white-space:nowrap;line-height:1}
#icsd26-switch a:hover{background:#eaf8fc;color:#074560}
#icsd26-switch span.cur{background:#074560;color:#f6c22a;cursor:pointer}
#icsd26-switch.collapsed a,#icsd26-switch.collapsed .hide{display:none}
#icsd26-switch .hide{padding:4px 7px;cursor:pointer;color:#9ab;font-size:13px;line-height:1;background:none;border:0}
/* Phones: measured against the live signed-in UI - the search bar occupies the
   top, Traccar's 56px bottom navigation the bottom, and the device list fills
   everything between edge to edge. There is no empty map to sit over, so the
   chip tucks into the bottom-right corner just above the tab bar, where it
   covers only the battery-icon column of a single row. */
@media (max-width:760px){
  #icsd26-switch{top:auto;bottom:64px;left:auto;right:8px;transform:none;flex-direction:column;align-items:stretch}
  #icsd26-switch a,#icsd26-switch span.cur{padding:6px 9px;font-size:11px;letter-spacing:.04em;text-align:center}
}