/* css/styles.css — the regular account's live tracking page
   (livetracking.html) and the other pages (index, signup, history, report,
   dashboard), each part scoped to its page with :where(html.pg-…) (zero
   specificity: a rule wins or loses exactly as it did when it lived in the
   page; it just no longer matches elsewhere). Live tracking:
   :where(html.pg-livetracking) (was pg-tracking, shared with school /
   service until 2026-10-22).
   school.html and service.html do NOT load this file: their CSS is
   css/school-service.css (owner, 2026-10-22: school and service / support
   have the same new UI, the regular account is planned differently).
   Owner rule: one group's rules never style the other — no school / service
   rule goes here. css/icons.css stays shared. */

/* ══════════════════════════════════════════════════════════════════════
   Live tracking (livetracking.html, pg-livetracking) — the regular account
   ══════════════════════════════════════════════════════════════════════ */
/* App is light-only. Declaring the supported scheme opts out of the browser's
   and the WebView's algorithmic "force dark" (MIUI/Chrome dark mode), which
   otherwise inverted the whole UI on phones set to dark. Pairs with the
   <meta name="color-scheme" content="light"> on every page. */
:root:where(.pg-livetracking){
  color-scheme: light;
  /* One standard corner radius for every toast / snackbar surface, so they read
     as one component family instead of the old 4/6/12px mix. */
  --toast-radius: 10px;
}
html:where(.pg-livetracking), :where(html.pg-livetracking) *{
  font-family: "Poppins", sans-serif;
}
html:where(.pg-livetracking),
:where(html.pg-livetracking) body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
}

:where(html.pg-livetracking) #map{
  width: 100%;
  height: 100%;
}
:where(html.pg-livetracking) .map{
  position: relative;
}

:where(html.pg-livetracking) .maplibregl-ctrl-group{
  border: 2px solid #696cff;
  background-color: #696cff !important;
  border-radius: 6px !important;
}
:where(html.pg-livetracking) .maplibregl-ctrl-group:hover{
  background-color: #20c997 !important;
  border: 2px solid #20c997 !important;
}
:where(html.pg-livetracking) .maplibregl-ctrl-icon{
  color: white !important;
}

:where(html.pg-livetracking) .maplibregl-ctrl-group:not(:empty){
  box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1) !important;
}

/* Draw-geofence (polygon) control turns green while add/edit is active:
   .active = MapboxDraw's own draw-mode class; .geo-active = added by the app
   during an edit session (see showEditBar/resetEditState). */
:where(html.pg-livetracking) .mapbox-gl-draw_polygon.active,
:where(html.pg-livetracking) .mapbox-gl-draw_polygon.geo-active{
  background-color: #20c997 !important;
}
:where(html.pg-livetracking) .maplibregl-popup{
  max-width: 360px;
  font:
    12px/20px Arial,
    sans-serif;
  border-radius: 12px;
  overflow: visible;
}
:where(html.pg-livetracking) .maplibregl-popup-content{
  text-align: center;
  color: #000;
  background-color: white;
  border: 2px solid white;
  border-radius: 4px !important;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;*/
  max-height: 240px !important;
}
:where(html.pg-livetracking) .maplibregl-popup-close-button{
  font-size: 20px;
  color: red;
  outline: none;
  background-color: white;
}
/* ---------------------------------------------------------------------------
   The app's own map buttons sit below maplibre's top-right control stack, and
   that stack changes height: the FullscreenControl is skipped in the app shell
   (no Fullscreen API), the 3D terrain and map-style groups were added later,
   and the draw group (polygon + trash) only exists while a geofence is being
   drawn.

   Each of those used to be compensated with its own hardcoded slot — a shift up
   here, a shift down there — and every one of those numbers was a guess at
   maplibre's geometry. They were wrong more often than right: the buttons
   ended up hidden behind the stack, then spaced too far from it.

   So the stack is MEASURED instead. script.js publishes its rendered height as
   --app-btn-base (plus the 10px gap maplibre keeps between its groups, so the
   column carries one rhythm end to end), and the buttons below are positioned
   relative to that. Nothing here needs to know how tall a control
   group is, and a control added or removed in future fixes itself.

   The value below is the fallback for a page where the measurement cannot run.
--------------------------------------------------------------------------- */
:root:where(.pg-livetracking){
  --app-btn-base: 312px;
}
:where(html.pg-livetracking) .my-geofence-button{
  top: var(--app-btn-base) !important;
}
:where(html.pg-livetracking) .GeofenceBtn{
  top: calc(var(--app-btn-base) + 32px) !important;
}
:where(html.pg-livetracking) .ETAButton{
  top: calc(var(--app-btn-base) + 74px) !important;
}
:where(html.pg-livetracking) .traffic{
  top: calc(var(--app-btn-base) + 116px) !important;
}
:where(html.pg-livetracking) .showAllVehicles{
  top: calc(var(--app-btn-base) + 158px) !important;
}

/* Address on the technician card: the standard two-line clamp with the "…"
   expand button (the base .address-chip rules) — it was unclamped for a while
   (2026-09-26) and went back to two lines on 2026-09-28 (user: "the address
   needs two lines, not three"). */
/* 3D terrain button while terrain is ON. MapLibre's TerrainControl puts
   maplibregl-ctrl-terrain-enabled on its button for the duration; the same
   green the other controls use on hover marks it as active. The button carries
   the colour itself so every browser shows it; :has() additionally recolours
   the group's 2px border where supported (Chrome 105+, Safari 15.4+, FF 121+),
   so the ring matches too. */
:where(html.pg-livetracking) .maplibregl-ctrl-group button.maplibregl-ctrl-terrain-enabled{
  background-color: #20c997 !important;
  border-radius: 4px;
}
/* Compass while the view is turned or tilted away from normal (north-up and
   level — or north-up at the 45° tilt while 3D is on): the same green as the
   3D button's on-state, so the way back to the normal view is obvious. Only
   the compass button itself is coloured — it shares its group with the zoom
   buttons. */
:where(html.pg-livetracking) .maplibregl-ctrl-group button.maplibregl-ctrl-compass.view-needs-reset{
  background-color: #20c997 !important;
  border-radius: 0 0 4px 4px;
}

:where(html.pg-livetracking) .maplibregl-ctrl-group:has(> button.maplibregl-ctrl-terrain-enabled){
  background-color: #20c997 !important;
  border-color: #20c997 !important;
}

/* Adopted into the maplibre control stack at init (AdoptedButtonControl), so it
   sits above the draw polygon/trash group. The group around it supplies the
   purple chrome and the hover colour, exactly like the other controls; the
   button itself is just the icon, and its absolute positioning is dropped. */
:where(html.pg-livetracking) .adopted-ctrl .switchStyle{
  position: static;
  top: auto;
  right: auto;
  /* 29 x 29 with no border or padding is exactly what maplibre's own control
     buttons measure, so this group is the same height as the locate and terrain
     ones and the column keeps its rhythm. */
  width: 29px;
  height: 29px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: transparent;
  /* Icon is 1em (css/icons.css); 19px matches the visual weight of the other
     purple buttons' 18px glyphs and MapLibre's own 22px-box control icons. */
  font-size: 19px;
  line-height: 1;
}
:where(html.pg-livetracking) .adopted-ctrl .switchStyle:hover{
  background-color: transparent;
}

/* Fallback geometry for the case the adoption cannot run (no map / maplibre
   failed to load) — the button then stays where it always was. */
:where(html.pg-livetracking) .switchStyle{
  position: absolute;
  top: 270px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .switchStyle:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}
:where(html.pg-livetracking) .ETAButton{
  position: absolute;
  top: 386px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  cursor: pointer;
  color: white;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .ETAButton:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}
:where(html.pg-livetracking) #ETAButton .ETAStarted{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 6px;
  height: 6px;
  background-color: #20c997;
  color: #20c997;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  25% {
    transform: scale(1.2);
    opacity: 1;
  }
  40% {
    transform: scale(1);
    opacity: 0.9;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}
:where(html.pg-livetracking) .showAllVehicles{
  position: absolute;
  top: 470px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  cursor: pointer;
  color: white;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center;
  /* box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1); */
;
}
:where(html.pg-livetracking) .showAllVehicles:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}
:where(html.pg-livetracking) #showAllVehicles .badge1{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 6px;
  height: 6px;
  background-color: #20c997;
  color: #20c997;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
}
:where(html.pg-livetracking) #showAllVehicles .badge3{
  position: absolute;
  bottom: -8px; /* ⬇️ push to bottom */
  right: -8px; /* ➡️ keep on the right */
  padding: 2px 4px;
  background-color: #20c997;
  color: #fff;
  font-size: 5px;
  border-radius: 6px; /* pill shape */
  border: 1px solid #fff;
  display: flex;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}
:where(html.pg-livetracking) #mapHistoryButton .badge4{
  position: absolute;
  bottom: -8px; /* ⬇️ push to bottom */
  right: -8px; /* ➡️ keep on the right */
  padding: 2px 4px;
  background-color: #20c997;
  color: #fff;
  font-size: 5px;
  border-radius: 6px; /* pill shape */
  border: 1px solid #fff;
  display: flex;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

:where(html.pg-livetracking) #reportButton .badge5{
  position: absolute;
  bottom: -8px; /* ⬇️ push to bottom */
  right: -8px; /* ➡️ keep on the right */
  padding: 2px 4px;
  background-color: #20c997;
  color: #fff;
  font-size: 5px;
  border-radius: 6px; /* pill shape */
  border: 1px solid #fff;
  display: flex;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
}

:where(html.pg-livetracking) .traffic{
  position: absolute;
  top: 428px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  cursor: pointer;
  color: white;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .traffic:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}
:where(html.pg-livetracking) #traffic .badgeStarted{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 6px;
  height: 6px;
  background-color: #20c997;
  color: #20c997;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
}
:where(html.pg-livetracking) #myGeofenceButton .myGeofenceStarted{
  position: absolute;
  top: -6px;
  right: -6px;
  width: 6px;
  height: 6px;
  background-color: #20c997;
  color: #20c997;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: heartbeat 2s infinite;
}
:where(html.pg-livetracking) .sidebar{
  transition: transform 1s;
  z-index: 10;
  width: 30%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* left: 45px !important;*/
  left: 43px !important;
}
:where(html.pg-livetracking) .notification-sidebar{
  transition: transform 1s;
  z-index: 10;
  width: 30%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
:where(html.pg-livetracking) .geofence-sidebar{
  transition: transform 1s;
  z-index: 10;
  width: 30%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
:where(html.pg-livetracking) .account-sidebar{
  transition: transform 1s;
  z-index: 10;
  width: 30%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
:where(html.pg-livetracking) .edit-device-sidebar{
  transition: transform 1s;
  z-index: 10;
  width: 30%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* The edit-vehicle panel (Vehicle settings) scrolls its own .route-list;
   livetracking's scoped rules for it are in "Live tracking: the Vehicle
   settings panel" further down. */
:where(html.pg-livetracking) .edit-device-sidebar .sidebar-content{
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
:where(html.pg-livetracking) .sidebar-content{
  position: absolute;
  width: 97%;
  top: 0px;
  bottom: 0px;
  height: auto;
  color: black;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  /* A centred flex item that OVERFLOWS its scroll container has its top half
     pushed above the scroll origin, where it can never be reached - you scroll
     to the top and still see blank container background. That is what hid the
     account settings on short viewports (iPhone), where the settings list is
     taller than the sidebar. flex-start is the safe fallback; `safe center`
     keeps the old centring on tall viewports where the content does fit. */
  align-items: flex-start;
  align-items: safe center;
  background: white;
  border-radius: 0px;
  border: 1px solid silver;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .left{
  left: 0px;
  transform: translateX(-2px);
}
:where(html.pg-livetracking) .left.collapsed{
  transform: translateX(-200%);
}
:where(html.pg-livetracking) .right{
  right: -4px;
  transform: translateX(2px);
}
:where(html.pg-livetracking) .right.collapsed{
  transform: translateX(200%);
}
:where(html.pg-livetracking) .route-list{
  overflow-y: auto;
  position: relative;
  width: 97%;
  height: 97%;
  padding-left: 15px;
  padding-right: 15px;
}
:where(html.pg-livetracking) .route-list h2{
  font-size: 18px;
  color: black;
  border-bottom: 2px solid #007bff;
  padding: 10px;
}
/* Right-panel header (Notifications, Geofences, Account Settings, the two
   settings pages) pinned to the top of its scroll box. */
:where(html.pg-livetracking) .notif-sticky-head{
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 0 -15px;
  padding: 0 15px 8px;
  background: #fff;
}
:where(html.pg-livetracking) .notif-sticky-head h2{
  margin: 0; /* the h2 default 0.83em top margin left a band above the title */
}
:where(html.pg-livetracking) .toast-update{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background-color: #696cff;
  color: white;
  border-radius: var(--toast-radius);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  /* as wide as its text needs, up to the screen: a narrow box wrapped the
     countdown text into four lines on a small phone */
  width: max-content;
  max-width: 92vw;
  min-width: min(60vw, 30vh);
}
:where(html.pg-livetracking) .toast-update button{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: white;
  color: #696cff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

:where(html.pg-livetracking) .toast-details{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: 10px 14px;
  background-color: #f8f9fa;
  color: #333;
  border-radius: var(--toast-radius);
  z-index: 9998;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* Responsive: never wider than the viewport, capped on large screens. */
  width: min(92vw, 360px);
  max-width: 92vw;
  overflow-wrap: break-word;
  /* Never taller than the screen below the update toast: showUpdateToast
     measures the visible height and sets top / max-height (re-measured on
     rotate / resize); these are the fallbacks (dvh = the visible height on
     phones, vh where dvh is unknown). The heading stays put and the LIST
     scrolls inside the card. */
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.35;
}
/* Desktop: a wider card halves the height of a long note. */
@media (min-width: 700px) {
  :where(html.pg-livetracking) .toast-details{
    width: min(92vw, 640px);
    font-size: 13.5px;
  }
}
/* A phone on its side is short, not narrow: use the width so the note needs
   fewer lines. */
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-livetracking) .toast-details{
    width: min(92vw, 640px);
  }
}

:where(html.pg-livetracking) .toast-details strong{
  display: block;
  flex: 0 0 auto;
  margin-bottom: 4px;
  color: #696cff;
}

:where(html.pg-livetracking) .toast-details ul{
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding-left: 18px;
  padding-right: 4px;
  padding-bottom: 2px; /* emoji glyphs are a hair taller than the line: no 1px scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: thin;
}

/* Full-screen block behind the update toast + What's-New note: the page is
   dimmed and cannot be used until the user taps Update now or the countdown
   installs the update. Sits under the toast (9999) and the note (9998). */
:where(html.pg-livetracking) .toast-update-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(0, 0, 0, 0.55);
}

/* Full-page update loader (shown after clicking Update, while data is cleared). */
:where(html.pg-livetracking) #updateLoader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
:where(html.pg-livetracking) .update-loader-spinner{
  width: 48px;
  height: 48px;
  border: 4px solid rgba(105, 108, 255, 0.25);
  border-top-color: #696cff;
  border-radius: 50%;
  animation: updateLoaderSpin 0.8s linear infinite;
}
:where(html.pg-livetracking) .update-loader-text{
  color: #696cff;
  font-size: 15px;
  font-weight: 600;
}
@keyframes updateLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* The update's progress card (js/update-flow.js): what is happening, step by
   step, with a download bar and — when something goes wrong — what to do. */
:where(html.pg-livetracking) #updateLoader .up-card{
  width: min(92vw, 380px);
  max-height: 92vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px 20px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
  text-align: left;
}
:where(html.pg-livetracking) .up-head{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
:where(html.pg-livetracking) .up-head .update-loader-spinner{
  width: 34px;
  height: 34px;
  border-width: 3px;
  flex-shrink: 0;
}
:where(html.pg-livetracking) .up-title{
  color: #1f2933;
  font-size: 16px;
  font-weight: 700;
}
:where(html.pg-livetracking) .up-sub{
  color: #6b7280;
  font-size: 12px;
  margin-top: 2px;
}
:where(html.pg-livetracking) .up-steps{
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(html.pg-livetracking) .up-steps li{
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: start;
  padding: 7px 0;
  color: #9aa3af;
  font-size: 14px;
  line-height: 1.3;
}
:where(html.pg-livetracking) .up-steps .up-ico{
  grid-row: 1 / span 2;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  box-sizing: border-box;
  border: 2px solid #d4d8e0;
  border-radius: 50%;
}
:where(html.pg-livetracking) .up-steps li[hidden]{ display: none; }
:where(html.pg-livetracking) .up-steps .up-label{ font-weight: 600; }
:where(html.pg-livetracking) .up-steps .up-detail{
  grid-column: 2;
  min-height: 0;
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
}
:where(html.pg-livetracking) .up-steps .up-detail:empty{ display: none; }
:where(html.pg-livetracking) .up-steps li.is-running{ color: #1f2933; }
:where(html.pg-livetracking) .up-steps li.is-running .up-ico{
  border-color: rgba(105, 108, 255, 0.25);
  border-top-color: #696cff;
  animation: updateLoaderSpin 0.8s linear infinite;
}
:where(html.pg-livetracking) .up-steps li.is-done{ color: #1f2933; }
:where(html.pg-livetracking) .up-steps li.is-done .up-ico{ border: 0; color: #28a745; }
:where(html.pg-livetracking) .up-steps li.is-warn{ color: #1f2933; }
:where(html.pg-livetracking) .up-steps li.is-warn .up-ico{ border: 0; color: #e0a800; }
:where(html.pg-livetracking) .up-steps li.is-fail{ color: #1f2933; }
:where(html.pg-livetracking) .up-steps li.is-fail .up-ico{ border: 0; color: #dc3545; }
:where(html.pg-livetracking) .up-bar{
  height: 8px;
  margin: 10px 0 4px;
  background: #e8eaf1;
  border-radius: 4px;
  overflow: hidden;
}
:where(html.pg-livetracking) .up-bar[hidden]{ display: none; }
:where(html.pg-livetracking) .up-bar-fill{
  width: 0;
  height: 100%;
  background: #696cff;
  border-radius: 4px;
  transition: width 0.2s ease;
}
:where(html.pg-livetracking) .up-count{
  min-height: 16px;
  color: #6b7280;
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(html.pg-livetracking) .up-msg{
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  background: #fff7e0;
  color: #7a5a00;
}
:where(html.pg-livetracking) .up-msg[hidden]{ display: none; }
:where(html.pg-livetracking) .up-msg.is-fail{ background: #fdecee; color: #8a1f2b; }
:where(html.pg-livetracking) .up-msg.is-ok{ background: #e8f6ec; color: #17692d; font-weight: 600; }
:where(html.pg-livetracking) .up-card.is-success .update-loader-spinner{
  animation: none;
  border-color: #28a745;
  background: #28a745;
  position: relative;
}
:where(html.pg-livetracking) .up-card.is-success .update-loader-spinner::after{
  content: "";
  position: absolute;
  left: 11px;
  top: 5px;
  width: 7px;
  height: 14px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
:where(html.pg-livetracking) .up-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
:where(html.pg-livetracking) .up-actions:empty{ display: none; }
:where(html.pg-livetracking) .up-btn{
  padding: 8px 16px;
  border: 1px solid #d4d8e0;
  border-radius: 8px;
  background: #fff;
  color: #1f2933;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-livetracking) .up-btn.up-btn-primary{
  border-color: #696cff;
  background: #696cff;
  color: #fff;
}

:where(html.pg-livetracking) .highlight-scroll{
  border: 2px solid #20c997 !important;
}
:where(html.pg-livetracking) .no-match{
  color: red !important;
}
:where(html.pg-livetracking) .vehicle-search-wrapper{
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}
:where(html.pg-livetracking) .clear-search-btn{
  position: absolute;
  right: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: orangered;
  display: none; /* hidden until there is text */
}
:where(html.pg-livetracking) .clear-search-btn:hover{
  color: red;
}
:where(html.pg-livetracking) .vehicleList{
  background-color: #ffffff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  min-height: 60px;
}
:where(html.pg-livetracking) .vehicleList:hover{
  border-color: #d0d5dd;
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.1);
}
:where(html.pg-livetracking) .vehicleList.selected{
  border-color: #2563eb;
  background-color: #f5f9ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}
/* Spinner */
:where(html.pg-livetracking) .spinner{
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
:where(html.pg-livetracking) .vehicle-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
/* Header chip row (status + odometer) under the vehicle name. */
:where(html.pg-livetracking) .header-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
:where(html.pg-livetracking) .header-chips .status-chip{
  font-weight: 600;
}
:where(html.pg-livetracking) .account-header{
  display: flex;
  align-items: center;
}
:where(html.pg-livetracking) .vehicle-logo img{
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
:where(html.pg-livetracking) .account-logo img{
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
:where(html.pg-livetracking) .vehicle-info{
  flex: 1;
  padding: 0 10px;
}
:where(html.pg-livetracking) .vehicle-info strong{
  font-size: 14px;
  align-items: center;
  max-width: 97%;
  color: black;
  word-break: break-word;
  white-space: normal;
  line-height: 1.15;
}
:where(html.pg-livetracking) .account-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
:where(html.pg-livetracking) .account-info strong{
  font-size: 14px;
  color: black;
}
:where(html.pg-livetracking) .ignition-on{
  color: green;
  font-weight: bold;
}
:where(html.pg-livetracking) .ignition-off{
  color: red;
  font-weight: bold;
}
:where(html.pg-livetracking) .vehicle-details{
  display: flex;
  justify-content: space-between;
  margin-top: 1px;
  font-size: 12px;
}
:where(html.pg-livetracking) .detail-item{
  display: flex;
  align-items: center;
  gap: 6px;
}
:where(html.pg-livetracking) .detail-item i{
  color: black;
  font-size: 14px;
}
/* Relay / engine control buttons: chip-sized, outlined by default, fill on hover/click. */
:where(html.pg-livetracking) .relay-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid var(--btn-color, #6c757d);
  border-radius: 10px;
  background: #fff;
  color: var(--btn-color, #6c757d);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.5;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
:where(html.pg-livetracking) .relay-btn i{
  color: currentColor;
  font-size: 12px;
}
:where(html.pg-livetracking) .relay-btn:hover,
:where(html.pg-livetracking) .relay-btn:active{
  background: var(--btn-color, #6c757d);
  color: #fff;
}
/* Disabled (e.g. inactive vehicle — stale data): greyed out, no actions. */
:where(html.pg-livetracking) .relay-btn:disabled{
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #98a2b3;
  cursor: not-allowed;
  opacity: 0.75;
}
:where(html.pg-livetracking) .relay-btn:disabled:hover,
:where(html.pg-livetracking) .relay-btn:disabled:active{
  background: #f2f4f7;
  color: #98a2b3;
}
/* Vehicle-card "Vehicle Control" button: fixed label; the state sits on the
   button's top-right corner as a notification-style dot or "!" badge. */
:where(html.pg-livetracking) .immo-entry{
  position: relative;
  overflow: visible;
  margin-top: 4px; /* room for the corner badge */
  margin-right: 4px;
}
:where(html.pg-livetracking) .immo-dot,
:where(html.pg-livetracking) .immo-badge{
  position: absolute;
  top: -4px;
  right: -4px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
}
:where(html.pg-livetracking) .immo-dot{
  width: 11px;
  height: 11px;
}
:where(html.pg-livetracking) .immo-dot-pulse{
  animation: immo-pulse 1.4s ease-in-out infinite;
}
@keyframes immo-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
:where(html.pg-livetracking) .immo-badge{
  top: -7px;
  right: -7px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #dc3545;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-family: Arial, sans-serif;
}
/* Panel chips: one short line, tap to expand the explanation. */
:where(html.pg-livetracking) .immo-chip{
  margin: 0 0 8px;
}
:where(html.pg-livetracking) .immo-chip > summary{
  list-style: none;
  cursor: pointer;
  display: inline-block;
}
:where(html.pg-livetracking) .immo-chip > summary::-webkit-details-marker{
  display: none;
}
:where(html.pg-livetracking) .immo-chip[open] .immo-chip-caret{
  transform: rotate(180deg);
}
/* Immobiliser panel tiles: the whole card is the button, with the explanation
   inside it, so the two choices read at a glance and are easy to tap. */
:where(html.pg-livetracking) .immo-tile{
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding: 12px 12px 11px;
  border: 1.5px solid var(--btn-color, #6c757d);
  border-radius: 10px;
  background: #fff;
  color: var(--btn-color, #6c757d);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
:where(html.pg-livetracking) .immo-tile .immo-tile-title{
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}
:where(html.pg-livetracking) .immo-tile .immo-tile-title i{
  font-size: 16px;
  color: currentColor;
}
:where(html.pg-livetracking) .immo-tile .immo-tile-desc{
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: #555;
}
:where(html.pg-livetracking) .immo-tile:hover,
:where(html.pg-livetracking) .immo-tile:active{
  background: var(--btn-color, #6c757d);
  color: #fff;
}
:where(html.pg-livetracking) .immo-tile:hover .immo-tile-desc,
:where(html.pg-livetracking) .immo-tile:active .immo-tile-desc{
  color: rgba(255, 255, 255, 0.9);
}
:where(html.pg-livetracking) .immo-tile:disabled{
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #98a2b3;
  cursor: not-allowed;
  opacity: 0.75;
}
:where(html.pg-livetracking) .immo-tile:disabled .immo-tile-desc,
:where(html.pg-livetracking) .immo-tile:disabled:hover .immo-tile-desc{
  color: #98a2b3;
}
:where(html.pg-livetracking) .immo-tile:disabled:hover,
:where(html.pg-livetracking) .immo-tile:disabled:active{
  background: #f2f4f7;
  color: #98a2b3;
}
/* Fixed button / tile colours (the relay-btn and immo-tile rules read
   --btn-color). Doubled class: beats any single-class rule, as the old inline
   style did. */
:where(html.pg-livetracking) .btnc-blue.btnc-blue{ --btn-color: #0d6efd; }
:where(html.pg-livetracking) .btnc-red.btnc-red{ --btn-color: #dc3545; }
:where(html.pg-livetracking) .btnc-green.btnc-green{ --btn-color: #28a745; }
:where(html.pg-livetracking) .btnc-amber.btnc-amber{ --btn-color: #e0a800; }
:where(html.pg-livetracking) .btnc-grey.btnc-grey{ --btn-color: #6c757d; }
:where(html.pg-livetracking) .btnc-teal.btnc-teal{ --btn-color: #138496; }
:where(html.pg-livetracking) .btnc-crimson.btnc-crimson{ --btn-color: #c81e2b; }
/* Card "Vehicle Control" state dot. */
:where(html.pg-livetracking) .immo-dot.immo-dot-grey{ background: #adb5bd; }
:where(html.pg-livetracking) .immo-dot.immo-dot-red{ background: #dc3545; }
:where(html.pg-livetracking) .immo-dot.immo-dot-green{ background: #28a745; }
:where(html.pg-livetracking) .immo-dot.immo-dot-amber{ background: #e0a800; }
/* Vehicle Control panel (#tpl-immo-panel / #tpl-immo-body and friends). */
:where(html.pg-livetracking) .immo-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
:where(html.pg-livetracking) .immo-overlay > .immo-box{
  background: #fff;
  border-radius: 12px;
  max-width: 400px;
  width: 100%;
  padding: 18px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  font-family: Arial, sans-serif;
  max-height: 92vh;
  overflow: auto;
}
:where(html.pg-livetracking) .immo-box .immo-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
:where(html.pg-livetracking) .immo-box .immo-title{
  font-size: 16px;
  font-weight: 700;
  color: #222;
}
:where(html.pg-livetracking) .immo-box .immo-busy{ color: #6c757d; }
:where(html.pg-livetracking) .immo-box .immo-device{
  font-size: 13px;
  color: #666;
  margin-bottom: 14px;
}
:where(html.pg-livetracking) .immo-box .immo-state{
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -6px 0 12px;
  font-size: 12.5px;
  line-height: 1.4;
}
:where(html.pg-livetracking) .immo-box .immo-state-icon{ font-size: 14px; }
:where(html.pg-livetracking) .immo-box .immo-state-src{ color: #777; }
:where(html.pg-livetracking) .immo-box .immo-metrics{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: 12px;
  color: #555;
  margin: -4px 0 10px;
}
/* State / speed / ignition colours. */
:where(html.pg-livetracking) .immo-box .immo-c-amber{ color: #e0a800; }
:where(html.pg-livetracking) .immo-box .immo-c-grey{ color: #6c757d; }
:where(html.pg-livetracking) .immo-box .immo-c-red{ color: #dc3545; }
:where(html.pg-livetracking) .immo-box .immo-c-green{ color: #28a745; }
:where(html.pg-livetracking) .immo-box .immo-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
:where(html.pg-livetracking) .immo-box .immo-flip{
  flex-basis: 100%;
  font-size: 11.5px;
  color: #6c757d;
  line-height: 1.5;
}
:where(html.pg-livetracking) .immo-box .immo-link{ color: inherit; }
:where(html.pg-livetracking) .immo-box .immo-link-strong{ font-weight: 700; }
:where(html.pg-livetracking) .immo-box .immo-meta{
  font-size: 11px;
  color: #8a94a6;
  margin: -2px 0 8px;
}
:where(html.pg-livetracking) .immo-box .immo-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}
:where(html.pg-livetracking) .immo-box .immo-tone-warn{ background: #f8d7da; border-color: #f1aeb5; color: #842029; }
:where(html.pg-livetracking) .immo-box .immo-tone-note{ background: #fff3cd; border-color: #ffe069; color: #7a5b00; }
:where(html.pg-livetracking) .immo-box .immo-tone-info{ background: #e7f1ff; border-color: #b6d4fe; color: #084298; }
:where(html.pg-livetracking) .immo-box .immo-chip-caret{
  font-size: 9px;
  opacity: 0.7;
  transition: transform 0.15s;
}
:where(html.pg-livetracking) .immo-box .immo-chip-detail{
  margin: 6px 0 2px 4px;
  font-size: 12px;
  color: #555;
  line-height: 1.5;
}
:where(html.pg-livetracking) .immo-box .immo-log-wrap{
  margin-top: 14px;
  border-top: 1px solid #e6e9ee;
  padding-top: 10px;
}
:where(html.pg-livetracking) .immo-box .immo-log-title{
  font-size: 11px;
  font-weight: 700;
  color: #6c757d;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
:where(html.pg-livetracking) .immo-box .immo-log{
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
}
:where(html.pg-livetracking) .immo-box .immo-log-row{
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 4px;
  color: #444;
}
:where(html.pg-livetracking) .immo-box .immo-log-row.is-bad{ color: #842029; }
:where(html.pg-livetracking) .immo-box .immo-log-row.is-ok{ color: #0f5132; }
:where(html.pg-livetracking) .immo-box .immo-log-time{
  color: #999;
  white-space: nowrap;
}
:where(html.pg-livetracking) .immo-box .immo-foot{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
:where(html.pg-livetracking) .immo-box .immo-close-btn{
  padding: 8px 16px;
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  color: #444;
}
:where(html.pg-livetracking) .divider{
  border-top: 1px solid silver;
  margin: 4px 0;
}

/* Compact disclosure chip for a notice that belongs to one row of a settings
   card. A paragraph of red body text reads as an unclearable error and, at five
   lines, pushes everything under it out of view; a chip states the one thing
   that matters, sits on the row it is about, and keeps the explanation a tap
   away. Built on <details>, so open/closed needs no JS.

   The chip is inline (never position:relative) and its panel is absolute
   against .account-nick-row, so the explanation spans the whole row rather than
   the width of the pill. */
:where(html.pg-livetracking) .account-nick-row{
  position: relative;
}
:where(html.pg-livetracking) .info-chip{
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}
:where(html.pg-livetracking) .info-chip > summary{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid #ffdf9e;
  border-radius: 999px;
  background: #fff8e8;
  color: #8a6100;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  /* Both are needed to drop the disclosure triangle across engines. */
  list-style: none;
}
:where(html.pg-livetracking) .info-chip > summary::-webkit-details-marker{
  display: none;
}
:where(html.pg-livetracking) .info-chip > summary:hover{
  background: #fff1cf;
}
:where(html.pg-livetracking) .info-chip > summary i{
  font-size: 11.5px;
}
:where(html.pg-livetracking) .info-chip > p{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #ffdf9e;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.45;
  color: #5a5f6a;
}
:where(html.pg-livetracking) .info-chip > p i{
  color: green;
}
:where(html.pg-livetracking) #retrieveMessage.success{
  color: green;
}

:where(html.pg-livetracking) #retrieveMessage.error{
  color: red;
}
:where(html.pg-livetracking) button#deleteAccountBtn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
:where(html.pg-livetracking) button#retriveBtn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
:where(html.pg-livetracking) button#retriveBtn{
  cursor: pointer;
  background: none;
  color: green;
  border: 1px solid green;
  padding: 6px 12px;
  border-radius: 4px;
}
:where(html.pg-livetracking) button#editNickIcon{
  cursor: pointer;
  background: none;
  color: green;
  border: none;
  padding: 2px 4px;
  /*border-radius: 4px;
  border: 1px solid green;*/
}
:where(html.pg-livetracking) button#deleteAccountBtn{
  background: none;
  color: red;
  border: 1px solid red;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

:where(html.pg-livetracking) button#deleteAccountBtn:hover{
  background-color: rgba(255, 0, 0, 0.05);
}
:where(html.pg-livetracking) .status{
  margin-left: 0px;
  right: 0;
}
:where(html.pg-livetracking) .statusButton{
  position: fixed;
  bottom: 42px;
  right: 10px;
  background-color: white;
  border: 2px solid white;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
  font-size: 12px;
  border-radius: 45px;
  display: flex;
  display: none;
  z-index: 1;
  width: auto;
  height: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 0px 10px;
}
:where(html.pg-livetracking) .branding{
  display: flex;
  border-radius: 10px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  max-height: 15%;
  background-color: white;
  border: 1px solid silver;
  padding: 10px;
  box-sizing: border-box;
  /*box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);*/
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .signOut{
  bottom: 52px;
}

:where(html.pg-livetracking) .toggleIcon{
  top: 10px;
  position: absolute;
  left: 60px;
  z-index: 1;
  background-color: white;
  border: 2px solid white;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .toggleIcon:hover{
  color: white;
  background-color: whitesmoke;
}
:where(html.pg-livetracking) .reloadPage{
  bottom: 10px;
}

:where(html.pg-livetracking) .androidScanQRCode{
  top: 10px;
  border-radius: 6px 6px 0 0 !important;
}



:where(html.pg-livetracking) .deviceButton{
  top: 116px;
}

:where(html.pg-livetracking) .serviceEditVehicleButton{
  top: 348px;
}

:where(html.pg-livetracking) .createAccountButton{
  top: 390px;
  border-radius: 6px 6px 0 0 !important;
  border-bottom: 1px solid #ddd !important;
}

:where(html.pg-livetracking) .serviceCreateAccountButton{
  top: 422px;
  border-radius: 0 0 6px 6px !important;
}
/* Support-only OCR tool, a standalone button below the create-account group. */
:where(html.pg-livetracking) .checkSimButton{
  top: 506px; /* service rail; packServiceRail stacks it with the rest */
}
:where(html.pg-livetracking) .scanListButton{
  top: 548px;
}

:where(html.pg-livetracking) .editVehicleButton{
  bottom: 136px;
}

:where(html.pg-livetracking) .mapHistoryButton{
  bottom: 136px;
}

:where(html.pg-livetracking) .reportButton{
  bottom: 178px;
}
:where(html.pg-livetracking) .dashboardButton{
  display: none !important;
}
:where(html.pg-livetracking) .settingButton{
  bottom: 94px;
}

:where(html.pg-livetracking) .h2i{
  margin-right: 10px;
}
:where(html.pg-livetracking) .brandName{
  text-align: center;
  word-wrap: break-word;
  margin: 0;
  font-size: 16px;
  color: black;
}
:where(html.pg-livetracking) .route-list-div{
  width: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where(html.pg-livetracking) .logoLink{
  height: 100%;
  width: 40%;
}
:where(html.pg-livetracking) .logo{
  width: 80%;
  height: 80%;
  object-fit: contain;
}
:where(html.pg-livetracking) .reloadPage-i{
  transition: transform 1s;
}
:where(html.pg-livetracking) .vehicleMarkerEL{
  display: block;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: visible;
}
:where(html.pg-livetracking) .vehicleMarkerEL1{
  display: block;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: visible;
}
/* Inner icon: holds the background image and is the ONLY rotating part
   (CSS transform), so the device-id label below stays upright. */
:where(html.pg-livetracking) .vehicleMarkerIcon{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform-origin: center center;
  /* children's translateZ acts inside this element's rotateX(pitch) */
  transform-style: preserve-3d;
}
/* 2.5D body while the map is tilted (built on demand by setIconExtrusion):
   copies of the icon raised along the ground normal — darkened "walls" and a
   full-bright top — so the vehicle stands on the terrain instead of lying on
   it as a decal. Flat map: no layers, the plain icon as before. */
:where(html.pg-livetracking) .vehicleMarkerIcon.extruded{
  background-image: none !important;
}
:where(html.pg-livetracking) .vehicleMarkerIcon .vehicleMarkerLayer{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: inherit;
  pointer-events: none;
}
:where(html.pg-livetracking) .vehicleMarkerIcon .vehicleMarkerLayer.wall{
  filter: brightness(0.55);
}
/* Device-id label below the marker icon — child of the container so it moves
   in lock-step with the icon (zero lag) and never desyncs. */
:where(html.pg-livetracking) .marker-label{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 2px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  color: #222;
  background: rgba(255, 255, 255, 0.82);
  padding: 0 3px;
  border-radius: 3px;
  pointer-events: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
/* Steady glow halo around the live marker (static filter, not animated). */
:where(html.pg-livetracking) .vehicleMarkerEL.marker-ripple-modern{
  filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.55));
}
:where(html.pg-livetracking) .vehicleMarkerEL.marker-ripple-modern::before,
:where(html.pg-livetracking) .vehicleMarkerEL.marker-ripple-modern::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(0, 170, 255, 0.35);
  background: radial-gradient(
    circle,
    rgba(0, 170, 255, 0.18) 0%,
    rgba(0, 170, 255, 0.04) 45%,
    rgba(0, 170, 255, 0) 70%
  );
  z-index: -1;
  pointer-events: none;
  animation: marker-ripple-wave 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
:where(html.pg-livetracking) .vehicleMarkerEL.marker-ripple-modern::after{
  animation-delay: 1.3s;
}
/* Fade in and out smoothly (no hard pop-in) for a premium live-location feel. */
@keyframes marker-ripple-wave {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  18% {
    opacity: 0.9;
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}
:where(html.pg-livetracking) .selectedVehicleInfo{
  display: none;
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background: white;
  width: 25%;
  color: black;
  text-align: left;
  line-height: 1.5;
  z-index: 1;
  border-radius: 6px;
  border: 2px solid #696cff;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) #deviceId{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 65%;
  display: inline-block;
}
:where(html.pg-livetracking) .status{
  display: inline;
  word-wrap: break-word;
  white-space: normal;
  overflow-wrap: break-word;
  align-items: center;
  gap: 4px;
}



:where(html.pg-livetracking) .toast{
  position: fixed;
  top: 10px;
  right: 50px;
  max-width: 30%;
  background: #fff;
  border: 1px solid #eef0f2;
  border-radius: var(--toast-radius);
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.16);
  z-index: 9999;
  display: none;
  overflow: hidden;
}

:where(html.pg-livetracking) .toast.active{
  display: block;
}

:where(html.pg-livetracking) .toast .toast-content{
  display: flex;
  align-items: center;
}

:where(html.pg-livetracking) .toast .icon{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  font-size: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

:where(html.pg-livetracking) .toast .message{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 12px;
  flex: 1;
  overflow-wrap: break-word;
}

:where(html.pg-livetracking) .toast .text-1{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

:where(html.pg-livetracking) .toast .text-2{
  font-size: 13px;
  font-weight: 400;
  color: #333;
}

:where(html.pg-livetracking) .toast .close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #98a2b3;
  font-size: 14px !important;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
:where(html.pg-livetracking) .toast .close:hover{
  background: #fdecec;
  color: #d92d20;
}

:where(html.pg-livetracking) .toast .progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
}
:where(html.pg-livetracking) .toast .progress:before{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #007bff;
}
:where(html.pg-livetracking) .toast.success .progress:before{
  background-color: green;
}
:where(html.pg-livetracking) .toast.error .progress:before{
  background-color: red;
}
:where(html.pg-livetracking) .toast.warning .progress:before{
  background-color: orange;
}
:where(html.pg-livetracking) .toast.info .progress:before{
  background-color: #007bff;
}
:where(html.pg-livetracking) .toast.overSpeed .progress:before{
  background-color: orangered;
}
:where(html.pg-livetracking) .toast.ignitionOn .progress:before{
  background-color: green;
}
:where(html.pg-livetracking) .toast.ignitionOff .progress:before{
  background-color: red;
}
:where(html.pg-livetracking) .toast.status-running .progress:before{
  background-color: #008000;
}
:where(html.pg-livetracking) .toast.status-idle .progress:before{
  background-color: #ff4500;
}
:where(html.pg-livetracking) .toast.status-waiting .progress:before{
  background-color: #6f42c1;
}
:where(html.pg-livetracking) .toast.status-stopped .progress:before{
  background-color: #ff0000;
}
:where(html.pg-livetracking) .toast.status-moving .progress:before{
  background-color: #dc143c;
}
:where(html.pg-livetracking) .toast.status-parked .progress:before{
  background-color: #800080;
}
:where(html.pg-livetracking) .toast.status-inactive .progress:before{
  background-color: #a9a9a9;
}
:where(html.pg-livetracking) .toast.geofence-entry .progress:before{
  background-color: green;
}
:where(html.pg-livetracking) .toast.geofence-exit .progress:before{
  background-color: red;
}

:where(html.pg-livetracking) .toast.sos-alert .progress:before{
  background-color: red;
}
:where(html.pg-livetracking) .toast.power-cut .progress:before{
  background-color: #ffa500;
}
:where(html.pg-livetracking) .toast.no-gps .progress:before{
  background-color: #808080;
}

:where(html.pg-livetracking) .toast .icon.success{
  color: green;
}
:where(html.pg-livetracking) .toast .icon.error{
  color: red;
}
:where(html.pg-livetracking) .toast .icon.warning{
  color: orange;
}
:where(html.pg-livetracking) .toast .icon.info{
  color: #007bff;
}
:where(html.pg-livetracking) .toast .icon.overSpeed{
  color: #ff4500;
}
:where(html.pg-livetracking) .toast .icon.ignitionOn{
  color: #008000;
}
:where(html.pg-livetracking) .toast .icon.ignitionOff{
  color: #ff0000;
}
:where(html.pg-livetracking) .toast .icon.status-running{
  color: #008000;
}
:where(html.pg-livetracking) .toast .icon.status-idle{
  color: #ff4500;
}
:where(html.pg-livetracking) .toast .icon.status-waiting{
  color: #6f42c1;
}
:where(html.pg-livetracking) .toast .icon.status-stopped{
  color: #ff0000;
}
:where(html.pg-livetracking) .toast .icon.status-moving{
  color: #dc143c;
}
:where(html.pg-livetracking) .toast .icon.status-parked{
  color: #800080;
}
:where(html.pg-livetracking) .toast .icon.status-inactive{
  color: #a9a9a9;
}
:where(html.pg-livetracking) .toast .icon.geofence-entry{
  color: green;
}
:where(html.pg-livetracking) .toast .icon.geofence-exit{
  color: red;
}

:where(html.pg-livetracking) .toast .icon.sos-alert{
  color: red;
}
:where(html.pg-livetracking) .toast .icon.power-cut{
  color: #ffa500;
}
:where(html.pg-livetracking) .toast .icon.no-gps{
  color: #808080;
}

:where(html.pg-livetracking) .progress.active:before{
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

:where(html.pg-livetracking) .toggleAudioBtn{
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}

/* keep your existing .toggleAudioBtn but add enabled/disabled styles */
:where(html.pg-livetracking) .toggleAudioBtn.audio-btn-enabled{
  background-color: #696cff;
  border-color: #696cff;
  color: white;
}

:where(html.pg-livetracking) .toggleAudioBtn.audio-btn-disabled{
  background-color: red;
  border-color: red;
  color: white;
}

/* white icon on both the enabled and the disabled background */
:where(html.pg-livetracking) .toggleAudioBtn.audio-btn-disabled i,
:where(html.pg-livetracking) .toggleAudioBtn.audio-btn-enabled i{
  color: white;
  font-size: 16px;
}

:where(html.pg-livetracking) .my-geofence-button{
  position: absolute;
  top: 312px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  border-bottom: 1px solid #ddd !important;
  color: white;
  cursor: pointer;
  border-radius: 6px 6px 0 0 !important;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .my-geofence-button:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}
:where(html.pg-livetracking) .notification-sidebar-button{
  position: absolute;
  bottom: 52px;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .notification-sidebar-button:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}
/* Per-alert-type icon badge on a Device Alerts card (color set inline). */
:where(html.pg-livetracking) .da-alert-icon{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 17px;
  flex-shrink: 0;
}
:where(html.pg-livetracking) .da-alert-icon img{
  display: none;
}
/* Numbered pager under the notification / device-alert list. */
:where(html.pg-livetracking) .notif-pager{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 4px;
}
:where(html.pg-livetracking) .notif-pager .notif-page-btn{
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #d7d9e3;
  border-radius: 6px;
  background: #fff;
  color: #333a45;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-livetracking) .notif-pager .notif-page-btn:hover:not(:disabled){
  border-color: #696cff;
  color: #696cff;
}
:where(html.pg-livetracking) .notif-pager .notif-page-btn.active{
  background: #696cff;
  border-color: #696cff;
  color: #fff;
}
:where(html.pg-livetracking) .notif-pager .notif-page-btn:disabled{
  opacity: 0.45;
  cursor: default;
}
:where(html.pg-livetracking) .notif-pager .ellipsis{
  padding: 0 2px;
  color: #8a8f98;
}
/* Date-range bar for the server-side feeds (status text + Load + refresh). */
:where(html.pg-livetracking) .device-alerts-bar{
  margin-bottom: 8px;
}
:where(html.pg-livetracking) .device-alerts-bar .da-row{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
/* Room for the floating labels, which sit half above the input's top edge. */
:where(html.pg-livetracking) .device-alerts-bar .da-date-row{
  margin-top: 8px;
}
:where(html.pg-livetracking) .device-alerts-bar .da-field{
  flex: 1 1 0;
  min-width: 0; /* equal halves that never overflow the row */
  position: relative;
}
/* Outlined style (History / Reports): the label is cut into the top border
   rather than stacked above, so the row is one input tall. */
:where(html.pg-livetracking) .device-alerts-bar .da-field label{
  position: absolute;
  top: -7px;
  left: 8px;
  padding: 0 4px;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a8f98;
  pointer-events: none;
}
:where(html.pg-livetracking) .device-alerts-bar .da-field:focus-within label{
  color: #696cff;
}
:where(html.pg-livetracking) .device-alerts-bar input[type="date"],
:where(html.pg-livetracking) .device-alerts-bar select{
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 6px 8px;
  border: 1px solid #d7d9e3;
  border-radius: 6px;
  font-size: 13px;
  color: #333a45;
  background: #fff;
}
/* Keep the native calendar picker tight against the right edge instead of
   floating with a big gap, and tint it to the brand. */
:where(html.pg-livetracking) .device-alerts-bar input[type="date"]{
  padding-right: 6px;
  appearance: none;
  -webkit-appearance: none;
}
:where(html.pg-livetracking) .device-alerts-bar input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left: 0;
  cursor: pointer;
  opacity: 0.6;
}
:where(html.pg-livetracking) .device-alerts-bar input[type="date"]:focus,
:where(html.pg-livetracking) .device-alerts-bar select:focus{
  outline: none;
  border-color: #696cff;
  box-shadow: 0 0 0 3px #eceffd;
}
/* Status text shares the row with Load / refresh: it takes the slack and
   truncates rather than wrapping under the buttons. */
:where(html.pg-livetracking) .device-alerts-bar .da-action-row .da-status{
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(html.pg-livetracking) .device-alerts-bar .da-btn{
  padding: 6px 14px;
  border: 1px solid #696cff;
  background: #696cff;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
:where(html.pg-livetracking) .device-alerts-bar .da-btn:hover{
  background: #5a5de6;
}
:where(html.pg-livetracking) .device-alerts-bar .da-btn[disabled]{
  opacity: 0.6;
  cursor: not-allowed;
}
/* Load button in Stop mode while a range is loading. */
:where(html.pg-livetracking) .device-alerts-bar .da-btn.da-btn-stop{
  background: #ef4444;
  border-color: #ef4444;
}
:where(html.pg-livetracking) .device-alerts-bar .da-btn.da-btn-stop:hover{
  background: #dc2626;
}
:where(html.pg-livetracking) .device-alerts-bar .icon-button[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
}
/* Loading row inside the alert list: spinner + message + its own Stop, so a
   long range can be cancelled without scrolling back up to the date bar. */
:where(html.pg-livetracking) .da-loading{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 6px;
  font-size: 13px;
  color: #6b7280;
}
:where(html.pg-livetracking) .da-loading .da-spinner{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: #696cff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
:where(html.pg-livetracking) .da-loading .da-stop{
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid #ef4444;
  border-radius: 6px;
  background: #fff;
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-livetracking) .da-loading .da-stop:hover{
  background: #fef2f2;
}

:where(html.pg-livetracking) .device-alerts-bar .da-status{
  font-size: 12px;
  color: #8a8f98;
}
/* Live event-type filter row — same control look as the Device Alerts type
   filter, full width under the vehicle search. */
/* Type filter icon on the date bar's action row. The <select> is stretched
   over the icon at zero opacity: clicks land on it and open the native
   picker, while the icon is what the user sees. */
:where(html.pg-livetracking) .notif-type-btn{
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d7d9e3;
  border-radius: 6px;
  background: #fff;
  color: #696cff;
  font-size: 14px;
}
:where(html.pg-livetracking) .notif-type-btn[hidden]{
  display: none !important;
}
:where(html.pg-livetracking) .notif-type-btn.active{
  background: #696cff;
  border-color: #696cff;
  color: #fff;
}
:where(html.pg-livetracking) .device-alerts-bar .notif-type-btn select{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

:where(html.pg-livetracking) .notification-list{
  background-color: white;
  border: 1px solid silver;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  /*box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);*/
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
  cursor: pointer;
  transition: border 0.3s ease;
}
:where(html.pg-livetracking) .geofence-list{
  background-color: white;
  border: 1px solid silver;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  /*box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);*/
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
  cursor: pointer;
  transition: border 0.3s ease;
}
:where(html.pg-livetracking) .account-details{
  background-color: white;
  border: 1px solid silver;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  /*box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);*/
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
  cursor: pointer;
  transition: border 0.3s ease;
}

:where(html.pg-livetracking) .notification-controls-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 0;
  min-height: 40px;
}

:where(html.pg-livetracking) .checkbox-label{
  display: flex;
  align-items: center;
  font-size: 13.5px;
  gap: 8px;
  cursor: pointer;
}

:where(html.pg-livetracking) .checkbox-label input[type="checkbox"]{
  width: 17px;
  height: 17px;
  accent-color: #696cff;
  cursor: pointer;
  flex-shrink: 0;
}

/* Compact on/off switch for the settings panels. The hidden checkbox stays the
   control (label/for, keyboard, :checked) — the track and thumb are painted
   siblings, so no JS is involved in the visual state. */
:where(html.pg-livetracking) .switch-label{
  display: flex;
  align-items: center;
  font-size: 13.5px;
  gap: 6px;
  cursor: pointer;
}

:where(html.pg-livetracking) .switch{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

:where(html.pg-livetracking) .switch input[type="checkbox"]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

:where(html.pg-livetracking) .switch-track{
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  border-radius: 11px;
  background: #c7ccd6;
  transition: background 0.2s ease;
}

:where(html.pg-livetracking) .switch-thumb{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

:where(html.pg-livetracking) .switch input:checked + .switch-track{
  background: #696cff;
}

:where(html.pg-livetracking) .switch input:checked + .switch-track .switch-thumb{
  transform: translateX(16px);
}

:where(html.pg-livetracking) .switch input:focus-visible + .switch-track{
  outline: 2px solid #696cff;
  outline-offset: 2px;
}

:where(html.pg-livetracking) .switch input:disabled + .switch-track{
  opacity: 0.5;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  :where(html.pg-livetracking) .switch-track,
  :where(html.pg-livetracking) .switch-thumb{
    transition: none;
  }
}

:where(html.pg-livetracking) .icon-button{
  background: none;
  border: none;
  color: red;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

:where(html.pg-livetracking) .icon-button:hover{
  color: crimson;
}

:where(html.pg-livetracking) .notification-filter-row{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* Search + vehicle multiselect as one bordered component. */
:where(html.pg-livetracking) .veh-filter-combo{
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  border: 1px solid #d7d9e3;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
:where(html.pg-livetracking) .veh-filter-combo:focus-within{
  border-color: #696cff;
  box-shadow: 0 0 0 3px #eceffd;
}
:where(html.pg-livetracking) #notificationSearch{
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
}
:where(html.pg-livetracking) #vehicleFilter{
  flex-shrink: 0;
  max-width: 118px;
  border: none;
  border-left: 1px solid #e6e8f0;
  border-radius: 0;
  font-size: 12px;
  background: transparent;
  outline: none;
}

:where(html.pg-livetracking) .notification-item{
  background-color: #fff;
  border: 1px solid #e6e8eb;
  border-left: 4px solid #007bff; /* event color set inline in JS */
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
:where(html.pg-livetracking) .notification-item:hover{
  box-shadow: 0 3px 10px rgba(16, 24, 40, 0.1);
}

/* Seen / unseen state. A card is unseen until it has actually been on screen
   for a moment (IntersectionObserver + dwell, see observeNotifSeen) or clicked;
   the badges count the unseen ones. Unseen gets a faint tint so a screenful of
   new alerts reads at a glance; seen cards fall back to plain white. */
:where(html.pg-livetracking) .notification-item.notif-unseen{
  background-color: #fffaf3;
}
:where(html.pg-livetracking) .notif-seen-tag{
  flex: 0 0 auto;
  align-self: flex-start;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.6;
  white-space: nowrap;
}
:where(html.pg-livetracking) .notif-seen-tag.is-new{
  background-color: orangered;
  color: #fff;
}
:where(html.pg-livetracking) .notif-seen-tag.is-seen{
  background-color: #eef0f2;
  color: #8a9099;
  font-weight: 600;
}
:where(html.pg-livetracking) .notif-seen-tag.is-seen i{
  font-size: 8px;
}

/* Highlight for the clicked notification card — soft ring + tint. */
/* Selected card: exactly the selected vehicle card's look — blue border,
   soft blue ring, light tint. The event-colour left accent (inline) stays. */
:where(html.pg-livetracking) .notification-item.active{
  border-color: #2563eb;
  background-color: #f5f9ff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}

/* Notification-location popup (clicked notification card → map pin). */
:where(html.pg-livetracking) .notif-popup{
  font-size: 11px;
  line-height: 1.3;
  min-width: 160px;
  max-width: 230px;
}
:where(html.pg-livetracking) .notif-popup .np-head{
  padding: 0 0 5px 7px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eef0f2;
}
:where(html.pg-livetracking) .notif-popup .np-vehicle{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #111827;
}
:where(html.pg-livetracking) .notif-popup .np-event{
  display: block;
  font-size: 10.5px;
  font-weight: 600;
}
:where(html.pg-livetracking) .notif-popup .np-body{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* Rounder, softer map popups + tidy close button. */
:where(html.pg-livetracking) .maplibregl-popup-content{
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
  padding: 9px 11px;
}
:where(html.pg-livetracking) .maplibregl-popup-close-button{
  font-size: 16px;
  color: #98a2b3;
  padding: 0 5px;
}
:where(html.pg-livetracking) .maplibregl-popup-close-button:hover{
  color: #475467;
  background: transparent;
}

/* GPS vs LBS location-source badge (shown in the address row, all account types). */
:where(html.pg-livetracking) .loc-source{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: 10px;
  white-space: nowrap;
  vertical-align: middle;
}
:where(html.pg-livetracking) .loc-source.loc-gps{
  color: #1a7f37;
  background: rgba(32, 201, 151, 0.15);
}
:where(html.pg-livetracking) .loc-source.loc-lbs{
  color: #b35900;
  background: rgba(255, 140, 0, 0.16);
}

/* Address chip: full-width text-only chip (wraps to show the full address). */
:where(html.pg-livetracking) .detail-item.address-chip{
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  background: #f1f3f5;
  border-radius: 10px;
  padding: 4px 10px;
  font-size: 11px;
  line-height: 1.25;
  text-align: left; /* popup content is centered — keep the address left-aligned */
}
/* Clamp long addresses to 2 lines; expand button (below) reveals the rest. */
:where(html.pg-livetracking) .address-chip .address-text{
  font-size: 11px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Break long unbroken strings (e.g. a geofence name with no spaces) so they
     wrap to 2 lines / clamp instead of overflowing sideways. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
:where(html.pg-livetracking) .address-chip.addr-expanded .address-text{
  -webkit-line-clamp: unset;
  overflow: visible;
}
:where(html.pg-livetracking) .addr-expand-btn{
  display: none;
  position: absolute;
  top: 3px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #667085;
  font-size: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
:where(html.pg-livetracking) .address-chip.addr-overflow{
  padding-right: 28px;
}
:where(html.pg-livetracking) .address-chip.addr-overflow .addr-expand-btn{
  display: inline-flex;
}

/* Compact chip strip for list-card metrics (saves vertical space). */
:where(html.pg-livetracking) .chip-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* left-aligned; chips auto-size to content and wrap */
  gap: 5px;
  margin-top: 6px;
}
:where(html.pg-livetracking) .chip-row .loc-source{
  margin-left: 0; /* gap handles spacing inside the chip strip */
  flex: 0 0 auto; /* content width, no stretch */
}
:where(html.pg-livetracking) .chip{
  /* width fits the content (no stretching to fill the row); left-aligned and
     wraps responsively to the card / screen width. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 10px;
  background: #f1f3f5;
  color: #333;
  white-space: nowrap;
}
:where(html.pg-livetracking) .chip i{
  font-size: 12px;
  color: #555;
}
/* Notification-card chips: allow long values (e.g. address) to wrap to multiple
   lines (height grows) instead of overflowing the card width. */
:where(html.pg-livetracking) .notif-chip{
  white-space: normal;
  align-items: flex-start;
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}
:where(html.pg-livetracking) .notif-chip i{
  margin-top: 2px;
  flex: 0 0 auto;
}
:where(html.pg-livetracking) .chip.chip-alert{
  background: rgba(255, 62, 29, 0.12);
  color: #dc3545;
  font-weight: 600;
}
:where(html.pg-livetracking) .chip.chip-alert i{
  color: #dc3545;
}
/* Ignition chip: green when ON, red when OFF. */
:where(html.pg-livetracking) .chip.chip-on{
  background: rgba(40, 167, 69, 0.14);
  color: #1a7f37;
}
:where(html.pg-livetracking) .chip.chip-on i{
  color: #1a7f37;
}
:where(html.pg-livetracking) .chip.chip-off{
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
:where(html.pg-livetracking) .chip.chip-off i{
  color: #dc3545;
}
/* Battery chip tone: <30% red, 30–70% orange, >70% green. */
:where(html.pg-livetracking) .chip.chip-batt-low{
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}
:where(html.pg-livetracking) .chip.chip-batt-low i{
  color: #dc3545;
}
:where(html.pg-livetracking) .chip.chip-batt-mid{
  background: rgba(255, 140, 0, 0.16);
  color: #b35900;
}
:where(html.pg-livetracking) .chip.chip-batt-mid i{
  color: #b35900;
}
:where(html.pg-livetracking) .chip.chip-batt-high{
  background: rgba(40, 167, 69, 0.14);
  color: #1a7f37;
}
:where(html.pg-livetracking) .chip.chip-batt-high i{
  color: #1a7f37;
}

:where(html.pg-livetracking) .notification-title{
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  display: block;
}

:where(html.pg-livetracking) .notification-body P{
  margin: 2px 0;
  font-size: 0.72rem;
  line-height: 1.3;
}

:where(html.pg-livetracking) .side-menu{
  transition: width 1s ease;
  width: 46px;
  height: auto;
  left: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  /* Rail floats transparent over the map; it only gets its white panel look
     while the left vehicle sidebar is open (rule below). */
  background-color: transparent;
  border-radius: 0px;
  border-right: none;
  box-shadow: none;
  z-index: 2;
  display: flex;
}

/* #side-menu is the next sibling of #sidebar-left, so the rail regains its
   opaque background whenever that sidebar is open (not .collapsed). */
:where(html.pg-livetracking) .sidebar.left:not(.collapsed) ~ .side-menu{
  background-color: white;
  border-right: 1px solid silver;
  box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15);
}

:where(html.pg-livetracking) .filter-button i{
  font-size: 18px;
  flex-shrink: 0;
}
/*i {
 color: #697a8d; 
}*/
:where(html.pg-livetracking) .label{
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  display: none;
  transition: opacity 0.3s ease;
}
:where(html.pg-livetracking) .notification-sidebar-close-button,
:where(html.pg-livetracking) .geofence-sidebar-close-button,
:where(html.pg-livetracking) .account-sidebar-close-button{
  position: absolute;
  top: 4px; /* level with the title text (was 8px: sat a touch low) */
  right: 12px;
  z-index: 20;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fdecec;
  color: #dc3545;
  font-size: 15px !important;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

:where(html.pg-livetracking) .notification-sidebar-close-button:hover,
:where(html.pg-livetracking) .geofence-sidebar-close-button:hover,
:where(html.pg-livetracking) .account-sidebar-close-button:hover{
  background: #dc3545;
  color: #fff;
}

/* Gear (notifications header) and Back (settings header). Same shape as the
   close button, sat just left of it so the header reads as one control group. */
:where(html.pg-livetracking) .notification-settings-button,
:where(html.pg-livetracking) .notification-settings-back-button{
  position: absolute;
  top: 4px; /* level with the title text (was 8px) */
  z-index: 20;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eceffd;
  color: #696cff;
  font-size: 15px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

:where(html.pg-livetracking) .notification-settings-button{
  right: 50px;
}

:where(html.pg-livetracking) .notification-settings-back-button{
  left: 12px;
}

:where(html.pg-livetracking) .notification-settings-button:hover,
:where(html.pg-livetracking) .notification-settings-back-button:hover{
  background: #696cff;
  color: #fff;
}

/* The settings headers carry a Back button on the left, so their titles have
   to clear both controls. */
:where(html.pg-livetracking) #notification-settings-sidebar .route-list h2,
:where(html.pg-livetracking) #location-settings-sidebar .route-list h2{
  padding-left: 50px;
}

:where(html.pg-livetracking) .sos-sound-row select{
  flex: 1;
  min-width: 0;
  margin: 0 8px;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #d7d9e3;
  border-radius: 6px;
  background: #fff;
  color: #333;
  cursor: pointer;
}

:where(html.pg-livetracking) .sos-sound-row .icon-button{
  color: #696cff;
}

:where(html.pg-livetracking) .sos-sound-row .icon-button:hover{
  color: #4b4ecc;
}

:where(html.pg-livetracking) .filter-button{
  position: absolute;
  left: 7px;
  z-index: 10;
  color: white;
  background-color: #696cff;
  border: 1px solid #696cff;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .filter-button.active{
  background-color: #20c997 !important;
  border: 1px solid #20c997;
  color: white;
  transform: scale(1.05);
}
:where(html.pg-livetracking) .filter-button:hover{
  background-color: #20c997 !important;
  border: 1px solid #20c997;
  color: white;
  transform: scale(1.05);
  border: none;
}

:where(html.pg-livetracking) .filter-button .badge{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  background-color: white;
  color: #4f3ff0;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:where(html.pg-livetracking) .ALL{
  top: 10px;
}
:where(html.pg-livetracking) .SELECTED{
  top: 0px;
}
:where(html.pg-livetracking) .RUNNING{
  top: 52px;
}
:where(html.pg-livetracking) .IDLE{
  top: 94px;
}
:where(html.pg-livetracking) .WAITING{
  top: 136px;
}
:where(html.pg-livetracking) .STOPPED{
  top: 178px;
}
:where(html.pg-livetracking) .PARKED{
  top: 220px;
}
:where(html.pg-livetracking) .MOVING{
  top: 262px;
}
:where(html.pg-livetracking) .IN-ACTIVE{
  top: 304px;
}
/*.ALL:hover {
  color: #007bff;
}
.SELECTED:hover {
  color: #007bff;
}
.RUNNING:hover {
  color: #008000;
}
.IDLE:hover {
  color: #ff4500;
}
.WAITING:hover {
  color: #6f42c1;
}
.STOPPED:hover {
  color: #ff0000;
}
.MOVING:hover {
  color: #dc143c;
}
.PARKED:hover {
  color: #800080;
}
.IN-ACTIVE:hover {
  color: #a9a9a9;
} */

:where(html.pg-livetracking) .left-button{
  transition: width 1s ease;
  position: absolute;
  left: 7px;
  z-index: 10;
  color: white;
  background-color: #696cff;
  border: 1px solid #696cff;
  cursor: pointer;
  border-radius: 6px;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .left-button.active{
  background-color: #20c997 !important;
  border: 1px solid #20c997;
  color: white;
  transform: scale(1.05);
}
:where(html.pg-livetracking) .left-button:hover{
  background-color: #20c997 !important;
  border: 1px solid #20c997;
  color: white;
  transform: scale(1.05);
  border: none;
}

:where(html.pg-livetracking) .left-button .badge{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 14px;
  height: 14px;
  background-color: white;
  color: #4f3ff0;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

:where(html.pg-livetracking) .no-vehicles-message{
  border: 1px dashed #ccc;
  border-radius: 6px;
  background-color: #f9f9f9;
  margin: 10px;
  font-size: 14px;
  text-align: center;
  padding: 10px;
}

:where(html.pg-livetracking) .notification-alert{
  color: white !important;
  background-color: #20c997 !important;
  border: 1px solid #20c997 !important;
}

/* Unseen-notifications marker on the bell: a static red dot, no count (the
   exact number lives in the Live tab badge and this dot's tooltip). */
:where(html.pg-livetracking) .notification-count{
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  background-color: #e5231b;
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-sizing: content-box;
  pointer-events: none;
}

:where(html.pg-livetracking) .GeofenceBtn{
  top: 344px;
  position: absolute;
  right: 10px;
  z-index: 10;
  background-color: #696cff;
  border: 2px solid #696cff;
  color: white;
  cursor: pointer;
  border-radius: 0 0 6px 6px !important;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);*/
}
:where(html.pg-livetracking) .GeofenceBtn:hover{
  color: white;
  background-color: #20c997;
  border: 2px solid #20c997;
}

:where(html.pg-livetracking) .geofence-item{
  border-left: 4px solid transparent;
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  transition:
    background-color 0.2s ease-in-out,
    border-left-color 0.2s ease-in-out; /* Smooth transitions */
}

:where(html.pg-livetracking) .geofence-item.active{
  border-left-color: #007bff;
  background-color: #f0f8ff;
}

/* Synced (server) geofences: gray accent + muted name so they read as
   "shared / on the server", distinct from private local ones. */
:where(html.pg-livetracking) .geofence-item.synced{
  border-left-color: #9e9e9e;
  background-color: #f6f7f8;
}
:where(html.pg-livetracking) .geofence-item.synced .geofence-name{
  color: #616161;
}
/* Small badge next to the name: gray cloud for synced, blue lock for private. */
:where(html.pg-livetracking) .geo-badge{
  font-size: 10px;
  font-weight: 600;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
:where(html.pg-livetracking) .geo-badge.synced{
  color: #616161;
  background: #eceff1;
}
:where(html.pg-livetracking) .geo-badge.private{
  color: #1565c0;
  background: #e3f2fd;
}
:where(html.pg-livetracking) .geo-badge i{
  margin-right: 3px;
}

/* Sync checkbox + note inside the save/rename popups. */
:where(html.pg-livetracking) .geofence-sync-row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  margin: 4px 0 12px;
  cursor: pointer;
}
:where(html.pg-livetracking) .geofence-sync-row input[type="checkbox"]{
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  flex: 0 0 auto;
  cursor: pointer;
}
:where(html.pg-livetracking) .geofence-sync-text{
  display: flex;
  flex-direction: column;
}
:where(html.pg-livetracking) .geofence-sync-title{
  font-weight: 600;
  font-size: 13px;
  color: #1f2937;
}
:where(html.pg-livetracking) .geofence-sync-note{
  font-size: 11px;
  line-height: 1.35;
  color: #6b7280;
}

/* Floating "Done editing" bar shown while reshaping a geofence — anchored top. */
:where(html.pg-livetracking) .geofence-edit-bar{
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e6e8eb;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  max-width: 94vw;
  flex-wrap: wrap;
  justify-content: center;
}
:where(html.pg-livetracking) .geofence-edit-bar .geofence-edit-label{
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
:where(html.pg-livetracking) .geofence-edit-bar .geofence-edit-label i{
  margin-right: 4px;
  color: #2563eb;
}
:where(html.pg-livetracking) .geofence-edit-bar .modal-btn{
  margin: 0;
}
/* The Done / Cancel icons in the edit bar's markup stay hidden (they were
   shown only for service / support, whose page has no edit bar now). */
:where(html.pg-livetracking) .geofence-edit-bar .modal-btn i{
  display: none;
}
/* "Sync to server" checkbox inside the edit bar. */
:where(html.pg-livetracking) .geofence-edit-sync{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
}
:where(html.pg-livetracking) .geofence-edit-sync input[type="checkbox"]{
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  cursor: pointer;
}

/* Row of geofence-list controls (Show all / Private only). */
:where(html.pg-livetracking) .geofence-list-controls{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 6px 0 4px 6px;
}

/* Per-geofence eye (map visibility) toggle button. */
:where(html.pg-livetracking) .geofence-vis-btn{
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 14px;
  line-height: 1;
}
/* A geofence hidden from the map reads muted in the list. */
:where(html.pg-livetracking) .geofence-item.hidden-on-map .geofence-name{
  opacity: 0.55;
}

/* "Private only" list filter toggle. */
:where(html.pg-livetracking) .geofence-filter-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 4px 6px;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
}
:where(html.pg-livetracking) .geofence-filter-toggle input[type="checkbox"]{
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  cursor: pointer;
}

:where(html.pg-livetracking) .geofence-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:where(html.pg-livetracking) .geofence-name{
  font-weight: 500;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 10px;
}

:where(html.pg-livetracking) .geofence-button-group{
  display: flex;
  align-items: center;
  gap: 6px;
}

:where(html.pg-livetracking) .edit-geofence-btn,
:where(html.pg-livetracking) .delete-geofence-btn{
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease-in-out;
}

:where(html.pg-livetracking) .edit-geofence-btn{
  color: #007bff;
}
:where(html.pg-livetracking) .edit-geofence-btn:hover{
  color: blue;
}

:where(html.pg-livetracking) .delete-geofence-btn{
  color: red;
}
:where(html.pg-livetracking) .delete-geofence-btn:hover{
  color: crimson;
}

:where(html.pg-livetracking) .edit-geofence-btn i,
:where(html.pg-livetracking) .delete-geofence-btn i{
  display: inline-block;
}

:where(html.pg-livetracking) .geofence-button-group{
  display: "flex";
  align-items: "center";
}

:where(html.pg-livetracking) .geofence-row{
  display: "flex";
  align-items: "center";
  justify-content: "space-between";
}


:where(html.pg-livetracking) .colors{
  color: #008000;
  color: #ff0000;
  color: #ffa500;
  color: #ff4500;
  color: #dc143c;
  color: #007bff;
  color: #a9a9a9;
  color: #ffffff;
  color: #f5f5f5;
  color: #c0c0c0;
  color: #8b0000;
  color: #006400;
  color: #800080;
}

:where(html.pg-livetracking) .combo{
  position: relative;
}
:where(html.pg-livetracking) .combo-input{
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
:where(html.pg-livetracking) .combo-list{
  position: relative;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  max-height: 150px;
  overflow: auto;
  border-radius: 0 0 6px 6px;
}
:where(html.pg-livetracking) .combo-item{
  padding: 8px;
  cursor: pointer;
  border-top: 1px solid #eee;
}
:where(html.pg-livetracking) .combo-item:hover,
:where(html.pg-livetracking) .combo-item.active{
  background: #f5f5f5;
}
:where(html.pg-livetracking) .combo-item.empty{
  color: #888;
  cursor: default;
}

:where(html.pg-livetracking) .vehicle-list{
  list-style: none;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: none;
}

:where(html.pg-livetracking) .vehicle-list li{
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #ddd;
}

:where(html.pg-livetracking) .vehicle-list li:last-child{
  border-bottom: none;
}

:where(html.pg-livetracking) .vehicle-list li:hover{
  background-color: #f0f0f0;
}




:where(html.pg-livetracking) .editNickIcon{
  cursor: pointer;
  margin-left: 10px;
  font-size: 14px;
  color: blue;
}
:where(html.pg-livetracking) .editNickIcon:hover{
  color: #007bff;
}
:where(html.pg-livetracking) .modal-popup{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

:where(html.pg-livetracking) #renameModal{
  display: none;
}
:where(html.pg-livetracking) #deleteModal{
  display: none;
}
:where(html.pg-livetracking) #saveGeofenceModal{
  display: none;
}
:where(html.pg-livetracking) #signOutModal{
  display: none;
}
:where(html.pg-livetracking) #fcmTokenModal{
  display: none;
}

:where(html.pg-livetracking) .modal-popup-content{
  background-color: #fff;
  border-radius: 16px;
  margin: 0 auto;
  padding: 24px 22px;
  width: 90%;
  max-width: 340px;
  text-align: center;
  border: none;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.22);
  max-height: 90vh;
  overflow-y: auto;
}

:where(html.pg-livetracking) .modal-popup-content h3{
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #111827;
  line-height: 1.35;
}

:where(html.pg-livetracking) .input-field{
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

:where(html.pg-livetracking) .modal-btn{
  background-color: #2563eb;
  color: #fff;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: auto;
  min-width: 110px;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.15s ease;
}

:where(html.pg-livetracking) .modal-btn:hover{
  background-color: #1d4ed8;
}

/* Secondary (Cancel) — neutral, not alarming. */
:where(html.pg-livetracking) .cancel-btn{
  background-color: #eef1f4;
  color: #344054;
  margin-left: 10px;
}

:where(html.pg-livetracking) .cancel-btn:hover{
  background-color: #e2e6ea;
}

/* Button row at the foot of a modal: every button on one line, equal widths,
   so three of them (Copy / Share / Close) never wrap Close onto its own line
   inside the 340px card. */
:where(html.pg-livetracking) .modal-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
:where(html.pg-livetracking) .modal-actions .modal-btn{
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0;
  padding: 10px 12px;
  /* icon + label, centred as a pair */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
:where(html.pg-livetracking) .modal-actions .modal-btn i{
  font-size: 15px;
}

/* Centred in the room left of the map's control column (the top-right
   buttons, ~50px): a long row used to run under the fullscreen button
   (owner, 2026-10-15). Longer than the room → the chips shrink with an
   ellipsis rather than overflow. */
:where(html.pg-livetracking) .ETA{
  position: absolute;
  top: 10px;
  left: 12px;
  right: 60px;
  width: max-content;
  max-width: calc(100% - 72px);
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  border-radius: 999px;
  border: 1px solid #e6e8eb;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
  padding: 5px 10px;
  z-index: 1;
  display: none;
}
:where(html.pg-livetracking) .ETA-header > .chip{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html.pg-livetracking) .ETA-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap; /* one row (owner, 2026-10-15); the texts are compact */
}
:where(html.pg-livetracking) .ETA .chip{
  flex: 0 1 auto; /* may shrink: the ellipsis rule below takes over */
  white-space: nowrap;
}

:where(html.pg-livetracking) .ETA-label{
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
}
/* ETA direction flip (car · arrow · person), all accounts. The arrow is a
   real glyph either way (fa-arrow-right / fa-arrow-left, swapped in
   script.js updateEtaDirLabel). */
:where(html.pg-livetracking) .eta-flip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef1ff;
  color: #2563eb;
  font-size: 12px;
  cursor: pointer;
}
:where(html.pg-livetracking) .eta-flip:hover{
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
:where(html.pg-livetracking) .eta-flip .eta-arrow{
  transition: transform 0.15s;
}
/* .right: the glyph is swapped in script.js (updateEtaDirLabel) — no mirror
   transform (a WebView did not render it on the masked icon). */

:where(html.pg-livetracking) .account{
  bottom: 94px;
}

/* Attention badges on the map buttons (no geofence yet / no nickname yet).
   Was a 16px white disc with a red warning triangle — too big for a 32px
   button. Now a small static red dot (the span keeps the title tooltip). */
:where(html.pg-livetracking) #accountbtn .nickNameBadge,
:where(html.pg-livetracking) #myGeofenceButton .geofenceBadge{
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  padding: 0;
  background-color: #e5231b;
  border: 1.5px solid #fff;
  border-radius: 50%;
  box-sizing: content-box;
  pointer-events: none;
}

:where(html.pg-livetracking) .sidebar-close-btn{
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: 10;
  width: 30px;
  height: 30px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 50%;
  background: #fdecec;
  color: #dc3545;
  cursor: pointer;
  font-size: 15px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
:where(html.pg-livetracking) .sidebar-close-btn:hover{
  background: #dc3545;
  color: #fff;
}

:where(html.pg-livetracking) input[type="checkbox"],
:where(html.pg-livetracking) input[type="radio"]{
  transform: scale(1.2);
  cursor: pointer;
  accent-color: #007bff;
}

/* Follow / center-on-vehicle toggle (info bars, every account): a switch (off
   grey-blue, on brand with the knob to the right) with a small FOLLOW label under
   it. The hidden radio underneath is unchanged: script.js sets its checked state
   for "following" and clears it when the map is dragged. */
:where(html.pg-livetracking) .follow-toggle{
  display: flex;
  flex-direction: column; /* switch at the corner, caption centred underneath it */
  align-items: center;
  gap: 5px;
}
:where(html.pg-livetracking) .follow-radio{
  display: none;
}
:where(html.pg-livetracking) .follow-btn{
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  background: #c7d2fe;
  border: 1px solid #c7d2fe;
  font-size: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
:where(html.pg-livetracking) .follow-btn i{
  display: none;
}
:where(html.pg-livetracking) .follow-btn::after{
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s;
}
:where(html.pg-livetracking) .follow-radio:checked + .follow-btn{
  background: #696cff;
  border-color: #696cff;
  box-shadow: 0 2px 6px rgba(105, 108, 255, 0.45);
}
:where(html.pg-livetracking) .follow-radio:checked + .follow-btn::after{
  left: 17px;
}
:where(html.pg-livetracking) .follow-hint,
:where(html.pg-livetracking) .follow-radio:checked ~ .follow-hint{
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a7acb2;
  white-space: nowrap;
}
/* Show/hide details chevron toggle (info bar). */
:where(html.pg-livetracking) .details-toggle-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #c7d2fe;
  background: #eef1ff;
  color: #2563eb;
  font-size: 12px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
:where(html.pg-livetracking) .details-toggle-btn:hover{
  background: #2563eb;
  color: #fff;
}
:where(html.pg-livetracking) .simpleToast{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 25vw;
  background: #696cff;
  color: white;
  padding: 10px 16px;
  border-radius: var(--toast-radius);
  opacity: 0.9;
  font-size: 14px;
  text-align: center;
  z-index: 9999;
  word-wrap: break-word;
  animation:
    fadein 0.5s,
    fadeout 0.5s 2.5s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}
@keyframes fadeout {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
:where(html.pg-livetracking) #nickNameModal{
  display: none;
}

:where(html.pg-livetracking) .singleVehicleNew{
  z-index: 1;
  display: none;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  background-color: white;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 2px solid #696cff;
  cursor: pointer;
  transition: border 0.3s ease;
}
/* The live feed (owner, 2026-10-16 — from the Live Tracking URL page; every
   tracking page). js/script.js syncVehicleCardLoading. (The map's Offline
   pill was removed — owner, 2026-10-16.) */
@keyframes ec-feed-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* livetracking.html's "Save geofence" dialog after Done editing (owner,
   2026-10-16): the rename dialog's look, a hint, labelled fields. */
:where(html.pg-livetracking) .geofence-save-content .geofence-save-hint{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #4b5160;
}
:where(html.pg-livetracking) .geofence-save-content .geofence-save-label{
  display: block;
  margin: 6px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #7a8191;
}
:where(html.pg-livetracking) .geofence-save-content .geofence-save-radius[hidden]{
  display: none;
}
/* Permission help (owner, 2026-10-16 — from the Live Tracking URL page;
   browser only): shown inside a Settings panel, in place of its content
   (.route-list.perm-help-on), with its own ← — not a popup. */
:where(html.pg-livetracking) .route-list.perm-help-on > :not(.notif-sticky-head):not(.perm-help){
  display: none !important;
}
:where(html.pg-livetracking) .perm-help{
  margin: 10px 14px 18px;
  font-family: "Poppins", sans-serif;
  color: #2b2c40;
}
:where(html.pg-livetracking) .perm-help[hidden]{
  display: none;
}
/* In the panel's top bar while open: ← then the title; the panel's own
   title and back arrow wait hidden. */
:where(html.pg-livetracking) .notif-sticky-head.perm-help-head-on > h2,
:where(html.pg-livetracking) .notif-sticky-head.perm-help-head-on > .notification-settings-back-button{
  display: none !important;
}
:where(html.pg-livetracking) .perm-help > .perm-help-topbar{
  display: none; /* only shown in the top bar */
}
:where(html.pg-livetracking) .notif-sticky-head.perm-help-head-on{
  padding-left: 52px; /* room for the ← — the bar keeps its usual height */
}
:where(html.pg-livetracking) .notif-sticky-head .perm-help-topbar{
  display: block;
  min-width: 0;
}
/* ← pinned at the left like service's back arrow (out of the text flow, so
   the bar is no taller than the other panels' and the × stays level with
   the title — owner, 2026-10-16) */
:where(html.pg-livetracking) .perm-help-back{
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #4b5160;
  font-size: 18px;
  cursor: pointer;
}
:where(html.pg-livetracking) .perm-help-back:hover{
  background: #f1f2f7;
}
/* the panel's own title size (its .notif-sticky-head h2 rule), one line */
:where(html.pg-livetracking) .notif-sticky-head .perm-help-topbar h2{
  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(html.pg-livetracking) .perm-help-sub{
  margin: 0 0 10px;
  font-size: 12px;
  color: #7a8191;
}
:where(html.pg-livetracking) .perm-help-tabs{
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #f1f2f7;
}
:where(html.pg-livetracking) .perm-help-tab{
  flex: 1 1 auto; /* each as wide as its label needs — fits a narrow panel */
  min-width: 0;
  min-height: 34px;
  padding: 0 4px;
  white-space: nowrap; /* "iPhone / iPad" on one line */
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4b5160;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-livetracking) .perm-help-tab i{
  margin-right: 4px;
  font-size: 12px;
}
:where(html.pg-livetracking) .perm-help-tab.active{
  background: #fff;
  color: #696cff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}
:where(html.pg-livetracking) .perm-help-body{
  margin-top: 12px;
  padding: 12px 14px 4px;
  border: 1px solid #e6e8ef;
  border-radius: 16px;
  background: #fff;
}
:where(html.pg-livetracking) .perm-help-lead{
  margin: 0 0 6px;
  font-size: 12px;
  color: #7a8191;
}
:where(html.pg-livetracking) .perm-help-steps{
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(html.pg-livetracking) .perm-help-steps li{
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e6e8ef;
  font-size: 13px;
  line-height: 1.45;
}
:where(html.pg-livetracking) .perm-help-steps li:first-child{
  border-top: 0;
}
:where(html.pg-livetracking) .perm-help-steps li > span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #696cff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
:where(html.pg-livetracking) .perm-help-steps strong{
  font-weight: 600;
}
:where(html.pg-livetracking) .perm-help-note{
  display: flex;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #ececff;
  font-size: 12px;
  line-height: 1.45;
  color: #4b5160;
}
:where(html.pg-livetracking) .perm-help-note i{
  margin-top: 2px;
  color: #696cff;
}
/* Vehicle list cards while the list loads: grey placeholder bars in place of
   the little spinners (owner, 2026-10-16: "skeleton loading in the vehicle
   list cards"); the picture and the number are already known. */
:where(html.pg-livetracking) .vehicleList.vehicle-card-loading .field-spinner{
  display: inline-block;
  width: 64px;
  height: 12px;
  border: 0;
  border-radius: 6px;
  background: #eceef3;
  vertical-align: middle;
  animation: ec-feed-pulse 1.4s ease-in-out infinite;
}
:where(html.pg-livetracking) .vehicleList.vehicle-card-loading .status .field-spinner{
  width: 76px;
  height: 18px;
  border-radius: 9px;
}
:where(html.pg-livetracking) .vehicleList.vehicle-card-loading .detail-item i{
  visibility: hidden;
  width: 0;
  margin: 0;
}
:where(html.pg-livetracking) .vehicleList.vehicle-card-loading .vehicle-details:first-of-type .field-spinner{
  width: 100%;
}
/* The vehicle card while the chosen vehicle's first position is on the way:
   the content hidden (it keeps its height), grey placeholder bars — picture,
   name, status, address, chips — and the reason under them. */
:where(html.pg-livetracking) .singleVehicleNew.ec-card-loading{
  min-height: 132px;
}
:where(html.pg-livetracking) .singleVehicleNew.ec-card-loading > *{
  visibility: hidden;
}
:where(html.pg-livetracking) .singleVehicleNew.ec-card-loading::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 16px;
  height: 86px;
  background:
    radial-gradient(circle at 20px 20px, #eceef3 19px, transparent 20px) 0 0 / 40px 40px no-repeat,
    linear-gradient(#eceef3, #eceef3) 52px 4px / 45% 13px no-repeat,
    linear-gradient(#eceef3, #eceef3) 52px 25px / 28% 11px no-repeat,
    linear-gradient(#eceef3, #eceef3) 0 54px / 100% 12px no-repeat,
    linear-gradient(#eceef3, #eceef3) 0 74px / 70% 12px no-repeat;
  animation: ec-feed-pulse 1.4s ease-in-out infinite;
}
:where(html.pg-livetracking) .singleVehicleNew.ec-card-loading::after{
  content: attr(data-loading-text);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #7a8191;
}
@media (prefers-reduced-motion: reduce) {
  :where(html.pg-livetracking) .singleVehicleNew.ec-card-loading::before,
  :where(html.pg-livetracking) .vehicleList.vehicle-card-loading .field-spinner{
    animation: none;
  }
}
/* Tighten the info-bar header so the top doesn't waste vertical space. */
:where(html.pg-livetracking) .singleVehicleNew .vehicle-header{
  align-items: center;
}
:where(html.pg-livetracking) .singleVehicleNew .vehicle-info strong{
  line-height: 1.1;
}
:where(html.pg-livetracking) .singleVehicleNew .header-chips{
  margin-top: 0;
}
:where(html.pg-livetracking) .singleVehicleNew .divider{
  margin: 6px 0;
}




@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 450px) {
  :where(html.pg-livetracking) .sidebar{
    width: calc(100vw - 36px) !important;
  }
  :where(html.pg-livetracking) .notification-sidebar{
    width: calc(100vw - 36px) !important;
  }
  :where(html.pg-livetracking) .geofence-sidebar{
    width: calc(100vw - 36px) !important;
  }
  :where(html.pg-livetracking) .account-sidebar{
    width: calc(100vw - 36px) !important;
  }
  :where(html.pg-livetracking) .edit-device-sidebar{
    width: calc(100vw - 36px) !important;
  }
  :where(html.pg-livetracking) .toast{
    top: 10px;
    right: 50px;
    left: 50px;
    z-index: 10;
  }
}

@media (orientation: portrait) {

  :where(html.pg-livetracking) .modal-popup-content{
    width: 75%;
    padding: 20px;
    max-height: 90vh;
    overflow-y: auto;
  }

  :where(html.pg-livetracking) .input-field{
    font-size: 14px;
    padding: 8px;
  }

  :where(html.pg-livetracking) .modal-btn{
    font-size: 14px;
    padding: 9px 18px;
  }
  :where(html.pg-livetracking) .singleVehicleNew{
    width: 65%;
  }
  :where(html.pg-livetracking) .ETA{
    padding: 5px 8px !important;
  }
  :where(html.pg-livetracking) .ETA-header{
    gap: 4px !important;
  }
  :where(html.pg-livetracking) .selectedVehicleInfo{
    width: min(70vw, 30vh) !important;
  }
  :where(html.pg-livetracking) .sidebar{
    width: min(70vw, 30vh);
  }
  :where(html.pg-livetracking) .left{
    left: 4px;
    transform: translateX(-2px);
  }
  :where(html.pg-livetracking) .left.collapsed{
    transform: translateX(-200%);
  }
  :where(html.pg-livetracking) .right{
    right: -4px;
    transform: translateX(2px);
  }
  :where(html.pg-livetracking) .right.collapsed{
    transform: translateX(200%);
  }
  :where(html.pg-livetracking) .notification-sidebar{
    width: min(70vw, 30vh);
  }
  :where(html.pg-livetracking) .geofence-sidebar{
    width: min(70vw, 30vh);
  }
  :where(html.pg-livetracking) .account-sidebar{
    width: min(70vw, 30vh);
  }
  :where(html.pg-livetracking) .edit-device-sidebar{
    width: min(70vw, 30vh);
  }
  :where(html.pg-livetracking) .route-list h2{
    font-size: 16px;
  }
  :where(html.pg-livetracking) .vehicle-logo img{
    width: 32px;
    height: 32px;
  }
  :where(html.pg-livetracking) .account-logo img{
    width: 32px;
    height: 32px;
  }
  :where(html.pg-livetracking) .vehicle-info strong{
    font-size: 12px;
  }
  :where(html.pg-livetracking) .account-info strong{
    font-size: 12px;
  }
  :where(html.pg-livetracking) .vehicle-details{
    font-size: 10px;
  }
  :where(html.pg-livetracking) .toast{
    top: 10px;
    right: 50px;
    width: auto;
    max-width: none;
    padding: 14px 20px;
  }

  :where(html.pg-livetracking) .toast .icon{
    font-size: 18px;
    min-width: 30px;
    height: 30px;
  }

  :where(html.pg-livetracking) .toast .text-2{
    font-size: 10px;
  }

  :where(html.pg-livetracking) .toast .text-1{
    font-size: 12px;
  }

  :where(html.pg-livetracking) .toast .close{
    font-size: 14px;
    top: 8px;
    right: 10px;
  }
  :where(html.pg-livetracking) .brandName{
    font-size: 12px;
    margin-top: 10px;
  }
  :where(html.pg-livetracking) .simpleToast{
    width: 65vw;
  }
  :where(html.pg-livetracking) .dashboardButton{
    display: block !important;
    top: 10px;
  }
  :where(html.pg-livetracking) #dashboardButton .badge6{
    position: absolute;
    bottom: -8px; /* ⬇️ push to bottom */
    right: -8px; /* ➡️ keep on the right */
    padding: 2px 4px;
    background-color: #20c997;
    color: #fff;
    font-size: 5px;
    border-radius: 6px; /* pill shape */
    border: 1px solid #fff;
    display: flex;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    animation: heartbeat 2s infinite;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
  }
  :where(html.pg-livetracking) .ALL{
    top: 52px;
  }
  :where(html.pg-livetracking) .SELECTED{
    top: 0px;
  }
  :where(html.pg-livetracking) .RUNNING{
    top: 94px;
  }
  :where(html.pg-livetracking) .IDLE{
    top: 136px;
  }
  :where(html.pg-livetracking) .WAITING{
    top: 178px;
  }
  :where(html.pg-livetracking) .STOPPED{
    top: 220px;
  }
  :where(html.pg-livetracking) .PARKED{
    top: 262px;
  }
  :where(html.pg-livetracking) .MOVING{
    top: 304px;
  }
  :where(html.pg-livetracking) .IN-ACTIVE{
    top: 346px;
  }
}

:where(html.pg-livetracking) .dp-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

:where(html.pg-livetracking) .dp-overlay iframe{
  flex: 1;
  width: 100%;
  border: none;
  background-color: white;
}
/* Shared modal bits: the buttons' icons and the sign-out artwork stay hidden
   on livetracking; the service page shows its own (see #signOutModal). */
:where(html.pg-livetracking) .modal-popup-content .modal-btn i{
  display: none;
}
:where(html.pg-livetracking) .modal-popup-content .modal-illustration{
  display: none;
}

/* Pulsating circle animation */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.8); /* gray start */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(128, 128, 128, 0); /* gray fade out */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(128, 128, 128, 0); /* reset */
  }
}



/* Container for positioning the tooltip relative to the button */
:where(html.pg-livetracking) .tooltip-container{
  position: relative;
  display: inline-block;
}

/* Tooltip styling */
:where(html.pg-livetracking) .custom-tooltip{
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 100%; /* Position to the right of the button */
  transform: translate(15px, -50%); /* Adjust position for spacing */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 1;
  white-space: nowrap;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  pointer-events: none; /* Prevents the tooltip from blocking clicks */
}

/* Arrow for the tooltip */
:where(html.pg-livetracking) .custom-tooltip::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 100%; /* Point the arrow to the left */
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #333 transparent transparent;
}

/* Class to make the tooltip visible */
:where(html.pg-livetracking) .custom-tooltip.show{
  visibility: visible;
  opacity: 1;
  transform: translate(
    5px,
    -50%
  ); /* Adjust final position for a smooth slide-in */
}

/* Enabled state */
:where(html.pg-livetracking) .audio-btn-enabled{
  background-color: #20c997 !important;
  border-color: #20c997 !important;
}
:where(html.pg-livetracking) .audio-btn-enabled:hover{
  background-color: #20c997 !important;
  border-color: #20c997 !important;
}

/* Disabled state */
:where(html.pg-livetracking) .audio-btn-disabled{
  background-color: red !important;
  border-color: red !important;
}
:where(html.pg-livetracking) .audio-btn-disabled:hover{
  background-color: red !important;
  border-color: red !important;
}

:where(html.pg-livetracking) .geofence-pagination{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  flex-wrap: wrap;
  text-align: center;
  margin-top: 10px;
}
:where(html.pg-livetracking) .geofence-pagination .geo-page-info{
  margin: 0 6px;
}
/* Geofence row icons (eye: shown / hidden on the map; bell: on / off).
   Doubled class: beats any single-class rule, as the old inline colour did. */
:where(html.pg-livetracking) .geo-ic-blue.geo-ic-blue{ color: #2563eb; }
:where(html.pg-livetracking) .geo-ic-muted.geo-ic-muted{ color: #9ca3af; }
:where(html.pg-livetracking) .geo-ic-green.geo-ic-green{ color: green; }
:where(html.pg-livetracking) .geo-ic-gray.geo-ic-gray{ color: gray; }
:where(html.pg-livetracking) .geofence-pagination button{
  border: 1px solid #ddd;
  background: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
:where(html.pg-livetracking) .geofence-pagination button:hover{
  background: #008000;
  color: #fff;
  border-color: #006400;
}
:where(html.pg-livetracking) .geofence-pagination button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

:where(html.pg-livetracking) .pagination{
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  flex-wrap: wrap;
}
:where(html.pg-livetracking) .pagination button{
  border: 1px solid #ddd;
  background: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
:where(html.pg-livetracking) .pagination button:hover{
  background: #008000;
  color: #fff;
  border-color: #006400;
}
:where(html.pg-livetracking) .pagination button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

:where(html.pg-livetracking) .geofences-search-wrapper{
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 10;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

:where(html.pg-livetracking) .geofence-notif-btn{
  border: none !important;
  background: transparent !important;
  padding: 4px;
  cursor: pointer;
}

:where(html.pg-livetracking) .geofence-notif-btn i{
  font-size: 18px;
}

:where(html.pg-livetracking) .badge-spinner,
:where(html.pg-livetracking) .field-spinner{
  width: 12px;
  height: 12px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tiny source mark after the vehicle number — chip = raised by the device
   itself, server = the server's text notification, bolt = detected live by
   the app from the vehicle feed. A row can carry more than one. */
:where(html.pg-livetracking) .notif-source{
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: #98a2b3;
  vertical-align: 1px;
}
:where(html.pg-livetracking) .notif-source.is-server{
  color: #8b5cf6;
}
:where(html.pg-livetracking) .notif-source.is-live{
  color: #20c997;
}

/* ══════════════════════════════════════════════════════════════════════
   Tracking pages — classes for the js/script.js templates (fixed styling
   that used to be inline in the script's markup / style.cssText)
   ══════════════════════════════════════════════════════════════════════ */
:where(html.pg-livetracking) .di-on{
  color: #28a745;
}
:where(html.pg-livetracking) .di-off{
  color: #dc3545;
}
/* status icons (getStatusIcon) — !important, as the inline style was: the
   chips' own icon rules would otherwise win (no script styles these icons) */
:where(html.pg-livetracking) .si{
  font-size: 14px !important;
}
:where(html.pg-livetracking) .si-running{
  color: #008000 !important;
}
:where(html.pg-livetracking) .si-idle{
  color: #ff4500 !important;
}
:where(html.pg-livetracking) .si-waiting{
  color: #6f42c1 !important;
}
:where(html.pg-livetracking) .si-stopped{
  color: #ff0000 !important;
}
:where(html.pg-livetracking) .si-moving{
  color: #dc143c !important;
}
:where(html.pg-livetracking) .si-parked{
  color: #800080 !important;
}
:where(html.pg-livetracking) .si-inactive{
  color: #a9a9a9 !important;
}
:where(html.pg-livetracking) .si-unknown{
  color: #000 !important;
}
/* status chip colours (statusChipClass) */
:where(html.pg-livetracking) .status-chip.st-running,
:where(html.pg-livetracking) .status-chip.st-moving{
  color: #1a7f37;
  background: rgba(40,167,69,0.14);
}
:where(html.pg-livetracking) .status-chip.st-idle{
  color: #b35900;
  background: rgba(255,140,0,0.16);
}
:where(html.pg-livetracking) .status-chip.st-waiting,
:where(html.pg-livetracking) .status-chip.st-parked{
  color: #6f42c1;
  background: rgba(111,66,193,0.14);
}
:where(html.pg-livetracking) .status-chip.st-stopped{
  color: #dc3545;
  background: rgba(220,53,69,0.12);
}
:where(html.pg-livetracking) .status-chip.st-inactive{
  color: #6c757d;
  background: rgba(108,117,125,0.16);
}
:where(html.pg-livetracking) .status-chip.st-other{
  color: #495057;
  background: #f1f3f5;
}
/* vehicle list paging */
:where(html.pg-livetracking) .vl-pagination{
  text-align: center;
  margin: 10px 0;
}
/* confirm dialog (showConfirmDialog) */
:where(html.pg-livetracking) .cd-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
:where(html.pg-livetracking) .cd-box{
  background: #fff;
  border-radius: 12px;
  max-width: 360px;
  width: 90%;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
  font-family: Arial,sans-serif;
}
:where(html.pg-livetracking) .cd-title{
  font-size: 16px;
  font-weight: 700;
  color: #222;
  margin-bottom: 8px;
}
:where(html.pg-livetracking) .cd-message{
  font-size: 14px;
  color: #444;
  line-height: 1.5;
  margin-bottom: 14px;
}
:where(html.pg-livetracking) .cd-note{
  margin: 0 0 14px;
  padding: 9px 11px;
  background: #fff3cd;
  border: 1px solid #ffe069;
  border-radius: 7px;
  color: #7a5b00;
  font-size: 12px;
  line-height: 1.5;
}
:where(html.pg-livetracking) .cd-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
:where(html.pg-livetracking) .cd-cancel{
  padding: 8px 16px;
  border: 1px solid #d0d5dd;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  color: #444;
}
:where(html.pg-livetracking) .cd-ok{
  padding: 8px 16px;
  border: none;
  color: #fff;
  border-radius: 7px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
/* rtStrong() colours (confirm-dialog emphasis). Doubled class: beats any
   single-class rule, as the old inline colour did. */
:where(html.pg-livetracking) .rt-c-red.rt-c-red{ color: #dc3545; }
:where(html.pg-livetracking) .rt-c-green.rt-c-green{ color: #28a745; }
/* The map could not start (#tpl-map-failed). */
:where(html.pg-livetracking) .map-failed-msg{
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════
   Tracking pages — Notification Settings status card (was inline)
   ══════════════════════════════════════════════════════════════════════ */

              /* Shared by the Notification Settings AND Location Settings
                 status panels — a card list: rows separated by hairlines,
                 brand-indigo icons, pill values, pill-shaped Fix buttons. */
              :where(html.pg-livetracking) .notification-status{
                margin-top: 16px;
              }
              :where(html.pg-livetracking) .notif-status-heading{
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: #8a8f98;
                margin: 0 2px 8px;
              }
              :where(html.pg-livetracking) .notif-status-card{
                border: 1px solid #e6e8f0;
                border-radius: 12px;
                background: #fff;
                overflow: hidden;
              }
              /* flex-wrap is load-bearing. The widest state of a permission row
                 is the "Blocked — open settings" pill PLUS a visible "Open
                 settings" button — together ~270px, more than the panel can
                 give them next to a label. Without wrapping, the label (the
                 only shrinkable item) was crushed to nothing and the button
                 spilled into the card's overflow:hidden, so the row read as a
                 red pill sitting on top of its own title with a half-cut button
                 beside it. With wrapping the right-hand group drops to its own
                 line instead, and the label keeps its natural width. */
              :where(html.pg-livetracking) .notif-status-row{
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 10px;
                min-height: 44px;
                padding: 8px 12px;
                font-size: 13.5px;
              }
              :where(html.pg-livetracking) .notif-status-row + .notif-status-row{
                border-top: 1px solid #eef0f5;
              }
              :where(html.pg-livetracking) .notif-status-label{
                color: #333a45;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                /* NO min-width:0 here. That let the label shrink past its own
                   text, which is what the row did instead of wrapping. Leaving
                   min-width at its auto (min-content) default means the label
                   can wrap its words but never collapse, so the overflow has to
                   resolve by wrapping the row. */
                flex: 1 1 auto;
              }
              :where(html.pg-livetracking) .notif-status-label i{
                width: 18px;
                text-align: center;
                color: #696cff;
                font-size: 13px;
                flex-shrink: 0;
              }
              :where(html.pg-livetracking) .notif-status-right{
                display: inline-flex;
                align-items: center;
                justify-content: flex-end;
                /* wraps internally too, so on a 320px screen the button can
                   drop below the pill rather than overflow the card */
                flex-wrap: wrap;
                gap: 8px;
                /* keeps the group hard right once it is alone on line 2 */
                margin-left: auto;
                flex-shrink: 0;
              }
              :where(html.pg-livetracking) .notif-status-value{
                font-weight: 600;
                font-size: 12.5px;
                line-height: 1;
                padding: 5px 10px;
                border-radius: 999px;
                background: #eef0f4;
                color: #555c68;
                white-space: nowrap;
              }
              :where(html.pg-livetracking) .notif-status-value[data-state="ok"]{
                background: #e3f5ea;
                color: #17803d;
              }
              :where(html.pg-livetracking) .notif-status-value[data-state="warn"]{
                background: #fdeae7;
                color: #c53929;
              }
              :where(html.pg-livetracking) .notif-status-row.stacked{
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                gap: 6px;
              }
              :where(html.pg-livetracking) .notif-status-row.stacked .notif-status-value{
                /* aligns under the label text, clear of the icon column */
                margin-left: 22px;
                white-space: normal;
                word-break: break-word;
                max-width: calc(100% - 22px);
                line-height: 1.35;
              }
              :where(html.pg-livetracking) .notif-status-fix{
                border: none;
                cursor: pointer;
                font-size: 12px;
                font-weight: 600;
                line-height: 1;
                padding: 6px 14px;
                border-radius: 999px;
                background: #696cff;
                color: #fff;
                box-shadow: 0 1px 2px rgba(105, 108, 255, 0.35);
                transition: background 0.15s ease;
              }
              :where(html.pg-livetracking) .notif-status-fix:hover{
                background: #4b4ecc;
              }
              :where(html.pg-livetracking) .notif-status-fix:active{
                transform: translateY(1px);
              }
              /* Dark styling for the status cards REMOVED — the app is
                 light-only. Combined with <meta name="color-scheme"
                 content="light">, a phone in system dark mode no longer
                 dark-styles these cards (which used to leave them dark on an
                 otherwise-light page). Reinstate a full dark theme here if the
                 app ever adopts one. */
            

/* ══ Live tracking (livetracking.html): the sign-out confirmation in the new
   dialog look (owner, 2026-10-15: "regular users also need the new sign-out
   design with the svg") — as on school / service: a 320px white card centred
   on the dimmed map, the question left-aligned at 16px, the sign-out artwork,
   Cancel (grey) | Sign out (red). #signOutModal outranks the shared
   .modal-popup rules; script.js shows the modal with display:block, so that
   is turned into the centring flex. ══ */
:where(html.pg-livetracking) #signOutModal[style*="display: block"]{
  display: flex !important;
}
:where(html.pg-livetracking) #signOutModal{
  padding: 0;
  align-items: center;
  justify-content: center;
  background: rgba(16, 18, 32, 0.45);
}
:where(html.pg-livetracking) #signOutModal .modal-popup-content{
  width: calc(100% - 40px);
  max-width: 320px;
  margin: 0;
  padding: 22px 18px 18px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.25);
  box-sizing: border-box;
  text-align: left;
}
:where(html.pg-livetracking) #signOutModal h3{
  margin: 0 0 12px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #2b2c40;
  text-align: left;
}
:where(html.pg-livetracking) #signOutModal .modal-illustration{
  display: block;
  width: 100%;
  height: 130px;
  object-fit: contain;
  margin: 0 0 14px;
}
:where(html.pg-livetracking) #signOutModal .modal-actions{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
}
:where(html.pg-livetracking) #signOutModal .modal-btn{
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background-color: #d64545;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-livetracking) #signOutModal .modal-btn:hover{
  background-color: #c23b3b;
}
:where(html.pg-livetracking) #signOutModal .modal-btn.cancel-btn,
:where(html.pg-livetracking) #signOutModal .modal-btn.cancel-btn:hover{
  background-color: #f1f2f7;
  color: #4b5160;
}

/* ══ Live tracking (livetracking.html): the Vehicle settings panel — the
   original editDeviceModal.html design, unchanged (owner, 2026-10-15: "the
   old design is good, I only asked to move the code"). The page's rules,
   scoped from the page to the panel (#edit-device-sidebar); "body" is the
   panel's .sidebar-content, which scrolls. The page's own toast rules are not
   carried over: the panel uses the app's toast. ══ */

      :where(html.pg-livetracking) #edit-device-sidebar, :where(html.pg-livetracking) #edit-device-sidebar *:not(.ec-dd){
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
        text-decoration: none;
        list-style: none;
      }
      /* This page is no longer a card floating on an overlay - it IS the body
         of the Edit Vehicle sidebar, mounted next to Geofences and Notification
         Settings. So: no centring, no card chrome, no animated tile background
         (that only made sense behind a full-screen modal), and the panel
         scrolls itself. */
      :where(html.pg-livetracking) #edit-device-sidebar,
      :where(html.pg-livetracking) #edit-device-sidebar .sidebar-content{
        height: 100%;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .sidebar-content{
        background-color: #fff;
        overflow-y: auto;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-container{
        position: relative;
        width: 100%;
        min-height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        padding: 0;
      }
      :where(html.pg-livetracking) #edit-device-sidebar form{
        width: 100%;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-form-box{
        padding: 0 15px 20px;
        color: #333;
        text-align: left;
      }
      /* Same shape as .route-list h2 in styles.css, so this panel's title sits
         at the same height and weight as the other sidebars'. The right padding
         keeps the text clear of the close button. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-form-box h2{
        font-size: 18px;
        font-weight: 600;
        color: #000;
        border-bottom: 2px solid #007bff;
        /* Pinned to the top while the panel scrolls (the panel's scroll box
           is <body>), like the other right-panel headers. The negative side
           margins let its white background span the box's side padding, so
           nothing peeks past it while content slides underneath. */
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        padding: 10px 59px 10px 25px;
        margin: 0 -15px 4px;
      }
      /* .h2i in styles.css is only a 10px right margin - the icon inherits the
         title's colour, so this one does too rather than going brand-indigo. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-form-box h2 i{
        margin-right: 10px;
        vertical-align: -2px;
      }
      /* Mirrors .notification-sidebar-close-button so every panel closes with
         the same control in the same place - this one just lives inside an
         iframe, so the rule has to be restated here. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-sidebar-close{
        position: fixed; /* stays put while the panel scrolls (iframe viewport) */
        top: 8px;
        right: 12px;
        z-index: 20;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #fdecec;
        color: #dc3545;
        font-size: 20px;
        cursor: pointer;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-sidebar-close:hover{
        background: #dc3545;
        color: #fff;
      }
      /* Fields. Lifted from the status card the Notification and Location
         Settings panels use ("Notification Settings status card" section of
         this file): an
         11px uppercase caption over a 1px #e6e8f0 / 12px-radius card whose rows
         are separated by #eef0f5 hairlines, each labelled at 13.5px with a
         brand-indigo icon in an 18px slot. These were free-floating 8px boxes
         with the icon inside them on the right, a shape used nowhere else. */
      /* The card's own name, so it sits inside the card as its first row
         rather than floating above it as a caption. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-card-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 9px 12px;
        /* Brand band: the near-white strip with grey text read as an empty
           row rather than a section title. Theme indigo, as the buttons. */
        background: #696cff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #fff;
      }
      /* Cloud marker on the right of the title for a virtual device. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-virtual-badge{
        display: inline-flex;
        align-items: center;
        color: #fff; /* on the indigo title band */
        font-size: 16px;
        line-height: 1;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-card{
        border: 1px solid #e6e8f0;
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 14px;
      }
      /* One 44px row per setting, label left / control right, exactly like
         .notif-status-row and .notification-controls-row. Stacking the label
         above a full-width field made every setting ~90px tall, which does not
         scale to a panel that has more device settings to come. flex-wrap is
         the escape hatch: on a very narrow panel the control drops to its own
         line instead of crushing the label. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-row{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 8px;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 13.5px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-row + .dp-row{
        border-top: 1px solid #eef0f5;
      }
      /* The label takes only the width of its own text - giving it flex-grow
         parked the control against the right edge and left a band of dead
         space in the middle of every row. The control grows instead, so the
         field starts right after the label whatever the panel is doing. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-label{
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13.5px;
        color: #333a45;
        cursor: pointer;
        /* No min-width:0 - the label may wrap its words but must never
           collapse, so an overflow resolves by wrapping the row instead. */
        flex: 0 1 auto;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-label i{
        width: 16px;
        text-align: center;
        color: #696cff;
        font-size: 14px;
        flex-shrink: 0;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-control{
        display: flex;
        align-items: center;
        gap: 8px;
        /* basis 0, not auto: an <input>'s intrinsic width is ~20 characters,
           and letting that be the basis made rows wrap on panels wide enough
           to hold them. The control is leftover space with a 132px floor. */
        flex: 1 1 0;
        min-width: 132px;
        margin-left: auto;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box{
        position: relative;
        margin: 0;
        flex: 1;
        min-width: 0;
      }
      /* Sized off .sos-sound-row select in styles.css - the app's own in-panel
         control: 13px type, 6px padding, #d7d9e3 hairline, 6px radius. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box input:not(.ec-dd),
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box select:not(.ec-dd){
        width: 100%;
        padding: 6px 10px;
        border-radius: 6px;
        border: 1px solid #d7d9e3;
        outline: none;
        font-size: 13px;
        color: #333a45;
        font-weight: 400;
        background: #fff;
        appearance: none;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box select:not(.ec-dd){
        padding-right: 26px;
        cursor: pointer;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box input:not(.ec-dd):hover,
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box select:not(.ec-dd):hover{
        border-color: #c9cee0;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box input:not(.ec-dd):focus,
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box select:not(.ec-dd):focus{
        border-color: #696cff;
        box-shadow: 0 0 0 3px #eceffd;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box input:not(.ec-dd)::placeholder{
        color: #98a2b3;
      }
      /* IMEI and SIM arrive from the server and are not editable here, so they
         read as values rather than empty fields waiting for input. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box input[readonly]{
        background: #f7f8fb;
        color: #667085;
        cursor: default;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box input[readonly]:hover{
        border-color: #e6e8f0;
      }
      /* appearance:none drops the native arrow; this is the replacement. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-caret{
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        color: #8a8f98;
        pointer-events: none;
      }
      /* A chooser, not a value: it keeps the white ground of an editable field
         so it does not read as disabled the way the IMEI and SIM rows
         deliberately do, and the chosen icon sits in it as a thumbnail. It was
         a 120px-tall box with an 84px preview - three rows' worth of height for
         a single value. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box.dp-icon input{
        cursor: pointer;
        padding-right: 26px;
        background: #fff;
        color: #333a45;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box.dp-icon input:hover{
        border-color: #c9cee0;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-input-box.dp-icon.dp-has-image input{
        padding-left: 34px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-preview{
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        object-fit: contain;
        border-radius: 4px;
        background: #f6f7ff;
        border: 1px solid #e1e4ff;
        display: none;
      }
      /* Buttons: exactly #retriveBtn / #deleteAccountBtn from the Account
         panel - transparent, 1px coloured outline, 4px radius, fill on hover.
         Filled 16px blocks were the modal's own thing. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn{
        padding: 6px 12px;
        text-align: center;
        background: none;
        border: 1px solid;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13.5px;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn-primary{
        border-color: green;
        color: green;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn-primary:hover{
        background: green;
        color: #fff;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn-danger{
        border-color: red;
        color: red;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn-danger:hover{
        background: red;
        color: #fff;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn[disabled]{
        opacity: 0.4;
        cursor: not-allowed;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn[disabled]:hover{
        background: none;
        color: green;
      }
      /* Also a .dp-row, so it keeps the card's padding and hairline; these two
         override the row's space-between for a pair of equal-width actions. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn-row{
        gap: 10px;
        justify-content: center;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-btn-row .dp-btn{
        flex: 1;
      }
      :where(html.pg-livetracking) #edit-device-sidebar #dpFileInput{
        display: none;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-modal-bg{
        position: fixed;
        inset: 0;
        display: none;
        place-items: center;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
      }
      /* The picker keeps the panel's card vocabulary: same 12px radius and
         #e6e8f0 hairline, and its title reads at the panel's row size rather
         than as a second page heading. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-modal-box{
        background: #fff;
        border: 1px solid #e6e8f0;
        border-radius: 12px;
        padding: 14px;
        /* % of the panel (the box's containing block: the panel is
           transformed) — in the iframe vw / vh were the panel's size. */
        width: min(780px, 92%);
        max-height: 85%;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-modal-box h2{
        margin: 0 0 10px;
        font-size: 15px;
        font-weight: 600;
        color: #333a45;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-grid{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 14px;
        overflow-y: auto;
        flex: 1;
        margin-bottom: 14px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-item{
        position: relative;
        border: 1px solid #e6e8f0;
        border-radius: 10px;
        padding: 10px 8px 12px;
        text-align: center;
        background: #fafafa;
        transition:
          border-color 0.15s,
          box-shadow 0.15s,
          background 0.15s;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-item:hover{
        border-color: #696cff;
        background: #fff;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-img{
        width: 64px;
        height: 64px;
        object-fit: contain;
        display: block;
        margin: 0 auto 8px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-name{
        font-size: 12px;
        color: #333a45;
        line-height: 1.2;
        word-break: break-word;
        min-height: 2.4em;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-radio{
        position: absolute;
        top: 8px;
        right: 8px;
        appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #c9c9c9;
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
      }
      /* appearance:none takes the native tick away with the native box, so the
         checked state has to draw its own. It was a solid indigo square with an
         inset ring, which read as a broken control rather than "chosen". */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-radio:checked{
        border-color: #696cff;
        background-color: #696cff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 12px 12px;
        box-shadow: none;
}
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-item.dp-selected{
        border-color: #696cff;
        background: #f7f7ff;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-modal-actions{
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-shrink: 0;
        border-top: 1px solid #eef0f5;
        padding-top: 12px;
        background: #fff;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-masked-blur{
        filter: blur(2px);
      }
      /* Same round control as the gear and back buttons in the settings headers
         (.notification-settings-button): tinted disc, brand-indigo glyph, fills
         on hover. It was a filled square with a 24px "+" in it. 26px rather
         than their 30px so it sits inside a 44px row next to the select. */
      :where(html.pg-livetracking) #edit-device-sidebar .plus-btn{
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eceffd;
        color: #696cff;
        border: none;
        border-radius: 50%;
        font-size: 16px;
        cursor: pointer;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }

      :where(html.pg-livetracking) #edit-device-sidebar .plus-btn:hover{
        background: #696cff;
        color: #fff;
      }

      /* The old breakpoint re-added modal margins below 650px. A sidebar is
         narrow by design, so the narrow rules now tighten the form instead. */
      /* Portrait phones give the sidebar min(70vw, 30vh) - around 224px - so
         the rows tighten rather than the type shrinking. Input font-size is
         deliberately absent here: it must stay at 16px (see above). */
      /* Saved tracking links. Each is a stacked block rather than a .dp-row,
         because a URL is not a value that sits beside a label - it needs the
         full width of the card and its own action strip. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link{
        padding: 10px 12px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link + .dp-link{
        border-top: 1px solid #eef0f5;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-head{
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        font-size: 13px;
        color: #333a45;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-name{
        font-weight: 600;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-meta{
        color: #8a8f98;
        font-size: 11.5px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-badge{
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.02em;
        border: 1px solid #bdf5c9;
        background: #e6ffec;
        color: #146c2e;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link.dp-expired .dp-link-badge{
        border-color: #f5c2c7;
        background: #fdecec;
        color: #b02a37;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link.dp-expired .dp-link-url{
        text-decoration: line-through;
      }
      /* The URL is long and unbreakable; it wraps rather than widening the
         card, and is capped so one link cannot fill the panel. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-url{
        display: block;
        margin: 4px 0 8px;
        font-size: 11.5px;
        line-height: 1.4;
        color: #696cff;
        word-break: break-all;
        max-height: 3.9em;
        overflow: hidden;
      }
      /* The description (why the link was made), its own line under the vehicle
         headline. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-desc{
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 4px 0 0;
        font-size: 12px;
        color: #5a5f6a;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-desc i{
        color: #696cff;
        font-size: 13px;
        flex-shrink: 0;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-actions{
        display: flex;
        gap: 6px;
      }
      /* Same tinted-disc language as .plus-btn and the settings-header gear. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-btn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border: none;
        border-radius: 50%;
        background: #eceffd;
        color: #696cff;
        font-size: 15px;
        cursor: pointer;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-btn:hover{
        background: #696cff;
        color: #fff;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-btn.dp-danger{
        background: #fdecec;
        color: #dc3545;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-btn.dp-danger:hover{
        background: #dc3545;
        color: #fff;
      }
      /* .dp-row is display:flex, which would beat the hidden attribute's UA
         display:none; make the attribute win for the rows and boxes we toggle. */
      :where(html.pg-livetracking) #edit-device-sidebar [hidden]{
        display: none !important;
      }
      /* The amount input is a small number; the unit select takes the rest. */
      :where(html.pg-livetracking) #edit-device-sidebar #ltuAmountBox{
        flex: 0 0 62px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-empty{
        padding: 12px;
        text-align: center;
        font-size: 12px;
        color: #8a8f98;
      }
      @media (max-width: 420px) {
        :where(html.pg-livetracking) #edit-device-sidebar .dp-form-box{
          padding: 0 10px 16px;
        }
        :where(html.pg-livetracking) #edit-device-sidebar .dp-form-box h2{
          padding: 10px 54px 10px 20px;
          margin: 0 -10px 4px;
        }
        :where(html.pg-livetracking) #edit-device-sidebar .dp-row{
          padding: 8px 10px;
        }
        :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-grid{
          grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
          gap: 10px;
        }
        :where(html.pg-livetracking) #edit-device-sidebar .dp-icon-img{
          width: 48px;
          height: 48px;
        }
      }
      /* Portrait phones give the sidebar min(70vw, 30vh) - around 224px - and
         below roughly this a label plus a 132px control no longer fit on one
         line, so the control takes its own wrapped line rather than both being
         squeezed. Above it the rows stay single-line. */
      @media (max-width: 280px) {
        :where(html.pg-livetracking) #edit-device-sidebar .dp-control{
          flex-basis: 100%;
          min-width: 0;
        }
      }
    

      /* The panel's scroll box (the iframe used to scroll itself). */
      :where(html.pg-livetracking) #edit-device-sidebar .sidebar-content{
        display: block;
        overflow-y: auto;
        border: 0;
      }
      /* Vehicle icon picker: "Loading…" / "Failed to load icons." / "Network error." */
      :where(html.pg-livetracking) #edit-device-sidebar .icon-grid-note{
        text-align: center !important;
        margin: 12px 0 !important;
      }

/* ══ Sign-up page (signup.html, pg-signup): a customer's own account with its
   first vehicle, from the login page (owner, 2026-10-15: one new page in the
   new UI; was cameraPopupModal.html + createAccountModal.html). The service
   page's components — section captions, white 16px cards, labelled 46px
   fields, brand buttons, the amber confirm card, label / value rows — on a
   phone-width column (centred on a wide screen). The markup (nc… ids) is the
   same as service.html's New account + vehicle. ══ */
:root:where(.pg-signup){
  --fs-title: 18px;
  --fs-dialog: 16px;
  --fs-name: 14px;
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-chip: 11px;
  --lh-tight: 1.3;
  --lh-text: 1.45;
  --c-title: #2b2c40;
  --c-text: #4b5160;
  --c-muted: #7a8191;
  --c-brand: #696cff;
  --c-brand-tint: #ececff;
  --c-danger: #d64545;
  --c-danger-tint: #fdecec;
  --c-line: #e6e8ef;
  --ls-caps: 0.04em;
}
:where(html.pg-signup) body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* audit NG-X2: no jump with the phone's URL bar */
  background: #eef0f6;
  font-family: "Poppins", sans-serif;
  color: var(--c-text);
  -webkit-tap-highlight-color: transparent;
}
:where(html.pg-signup) *,
:where(html.pg-signup) *::before,
:where(html.pg-signup) *::after{
  box-sizing: border-box;
}
:where(html.pg-signup) [hidden]{
  display: none !important;
}
:where(html.pg-signup) .su-app{
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: #f4f5fa;
}
@media (min-width: 560px){
  :where(html.pg-signup) .su-app{
    box-shadow: 0 0 0 1px var(--c-line), 0 10px 40px rgba(16, 24, 40, 0.08);
  }
}
:where(html.pg-signup) .su-head{
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px 10px 8px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
:where(html.pg-signup) .su-head h1{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-title);
}
:where(html.pg-signup) .su-head h1 i{
  color: var(--c-brand);
  font-size: 18px;
}
:where(html.pg-signup) .su-head-btn{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-title);
  font-size: 18px;
  cursor: pointer;
}
:where(html.pg-signup) .su-head-btn:hover{
  background: #f1f2f7;
}
:where(html.pg-signup) .su-main{
  padding: 4px 15px calc(24px + env(safe-area-inset-bottom));
}
:where(html.pg-signup) .su-toast{
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 12px;
  background: #2b2c40;
  color: #fff;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  text-align: center;
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
:where(html.pg-signup) .su-toast.show{
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Captions, cards, rows. */
:where(html.pg-signup) .st-sect{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 4px 6px;
  font-size: var(--fs-chip);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
}
:where(html.pg-signup) .st-card{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 0 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
:where(html.pg-signup) .st-card.sl-fields{
  padding: 4px 14px 12px;
}
:where(html.pg-signup) .st-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  margin-bottom: -1px;
  border-bottom: 1px solid var(--c-line);
}
/* Notes and the "tracker found" line. */
:where(html.pg-signup) .sl-note{
  margin: 12px 4px 4px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-text);
}
:where(html.pg-signup) .nc-found{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 2px 4px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
}
:where(html.pg-signup) .nc-found i{
  margin-top: 2px;
  color: #14916f;
}
:where(html.pg-signup) .sl-empty{
  padding: 14px;
  font-size: var(--fs-body);
  color: var(--c-muted);
  text-align: center;
}
/* Fields: label above, 46px, 12px corners, 16px text (no zoom on an iPhone);
   a button inside at the right (Check, the eye, the SIM pen + scan). */
:where(html.pg-signup) .sl-field{
  padding-top: 10px;
}
:where(html.pg-signup) .sl-label{
  display: block;
  margin: 0 0 6px 2px;
  font-size: var(--fs-chip);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
}
:where(html.pg-signup) .vt-lock{
  margin-left: 4px;
  font-size: 10px;
}
:where(html.pg-signup) .sl-input{
  position: relative;
}
:where(html.pg-signup) .sl-input input{
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-family: inherit;
  font-size: var(--fs-dialog);
  color: var(--c-title);
  outline: none;
}
:where(html.pg-signup) .sl-input input:focus{
  border-color: var(--c-brand);
  background: #fff;
}
:where(html.pg-signup) .sl-input input.vt-readonly,
:where(html.pg-signup) .vt-input-2btn input[readonly]{
  background: #f1f2f7;
  color: var(--c-text);
}
:where(html.pg-signup) .na-id-input input{
  padding-right: 104px;
}
:where(html.pg-signup) .na-pass-input input{
  padding-right: 52px;
}
:where(html.pg-signup) .vt-input-2btn input{
  padding-right: 92px;
}
:where(html.pg-signup) .sl-scan-btn{
  position: absolute;
  top: 5px;
  right: 5px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--c-brand);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
:where(html.pg-signup) .vt-input-2btn .vt-btn-2{
  right: 46px;
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
:where(html.pg-signup) .vt-input-2btn .vt-btn-2.on{
  background: var(--c-brand);
  color: #fff;
}
:where(html.pg-signup) .na-eye-btn{
  background: transparent;
  color: var(--c-muted);
}
:where(html.pg-signup) .na-check-btn{
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 90px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--c-brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-signup) .na-check-btn.ok{
  background: #14916f;
}
:where(html.pg-signup) .na-check-btn.taken{
  background: var(--c-danger);
}
:where(html.pg-signup) .na-check-btn:disabled{
  opacity: 0.7;
  cursor: progress;
}
:where(html.pg-signup) .sl-hint{
  margin: 6px 2px 0;
  font-size: var(--fs-small);
  line-height: var(--lh-text);
  color: var(--c-muted);
}
/* Buttons: brand primary, light secondary — 44px, 12px corners. */
:where(html.pg-signup) .sl-actions{
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
}
:where(html.pg-signup) .sl-btn{
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: var(--c-brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-name);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
:where(html.pg-signup) .sl-btn:active{
  background: #5f62f2;
}
:where(html.pg-signup) .sl-btn:disabled{
  opacity: 0.6;
  cursor: progress;
}
:where(html.pg-signup) .sl-btn-light{
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
:where(html.pg-signup) .sl-btn-light:active{
  background: #dfe0ff;
}
:where(html.pg-signup) .sl-wide{
  display: flex;
  width: 100%;
  margin: 10px 0 4px;
}
/* The browser camera (the app uses its own scanner). */
:where(html.pg-signup) .sl-cam{
  display: none;
  margin-top: 10px;
}
:where(html.pg-signup) .sl-cam.active{
  display: block;
}
:where(html.pg-signup) .sl-cam video{
  display: block;
  width: 100%;
  max-height: 40vh;
  border-radius: 16px;
  background: #111;
  object-fit: cover;
}
:where(html.pg-signup) .sl-cam .sl-btn{
  display: flex;
  width: 100%;
  margin-top: 8px;
}
/* The vehicle icon: the box, and the picker in place. */
:where(html.pg-signup) .vt-icon-box{
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-family: inherit;
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
  text-align: left;
  cursor: pointer;
}
:where(html.pg-signup) .vt-icon-box img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
:where(html.pg-signup) .vt-icon-box span:first-of-type{
  flex: 1;
  min-width: 0;
  text-transform: capitalize;
}
:where(html.pg-signup) .vt-icon-change{
  color: var(--c-brand);
  font-size: var(--fs-small);
}
:where(html.pg-signup) .st-card.vt-icon-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  padding: 12px;
  max-height: 40vh;
  overflow-y: auto;
}
:where(html.pg-signup) .vt-icon-grid .sl-empty{
  grid-column: 1 / -1;
}
:where(html.pg-signup) .vt-icon-item{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  text-transform: capitalize;
  color: var(--c-text);
  cursor: pointer;
}
:where(html.pg-signup) .vt-icon-item img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}
:where(html.pg-signup) .vt-icon-item.on{
  border-color: var(--c-brand);
  background: #f6f6ff;
  color: var(--c-brand);
}
/* "Create this account?": the amber card; the summary and the login
   details as label / value rows; the Done pill. */
:where(html.pg-signup) .svc-confirm{
  margin-top: 12px;
  padding: 12px 14px 2px;
  border: 1px solid #f6d9b0;
  border-radius: 16px;
  background: #fff8ee;
}
:where(html.pg-signup) .svc-confirm-title{
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-name);
  color: var(--c-title);
}
:where(html.pg-signup) .svc-confirm .vt-kv-card{
  margin: 0 0 4px;
}
:where(html.pg-signup) .vt-kv{
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
}
:where(html.pg-signup) .vt-kv-card .vt-kv:last-child{
  border-bottom: 0;
}
:where(html.pg-signup) .vt-k{
  flex: 0 0 110px;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-text);
  color: var(--c-muted);
}
:where(html.pg-signup) .vt-v{
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-title);
  overflow-wrap: anywhere;
  user-select: text;
  -webkit-user-select: text;
}
:where(html.pg-signup) .vt-pill{
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: var(--fs-chip);
  letter-spacing: 0;
  text-transform: none;
}
:where(html.pg-signup) .vt-pill.ok{
  background: #dff7ef;
  color: #14916f;
}
:where(html.pg-signup) #ncDone .sl-note{
  margin: 0 2px 8px;
}

/* ══ Live tracking (livetracking.html): the Add vehicle panel (owner,
   2026-10-15: "put the new UI and move this UI code, then remove the file").
   Was createDeviceModal.html in the scanner popup; now in-page
   (js/add-vehicle.js) in the service page's components — header with ← and ×,
   section captions, white cards, labelled 46px fields, brand buttons, the
   amber "Add this vehicle?" card. The panel shares .edit-device-sidebar's
   geometry (width, slide, phone widths); every rule here is scoped to
   #add-vehicle-sidebar on pg-livetracking — nothing else on the page moves. ══ */
:where(html.pg-livetracking) #add-vehicle-sidebar{
  --fs-title: 18px;
  --fs-dialog: 16px;
  --fs-name: 14px;
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-chip: 11px;
  --lh-tight: 1.3;
  --lh-text: 1.45;
  --c-title: #2b2c40;
  --c-text: #4b5160;
  --c-muted: #7a8191;
  --c-brand: #696cff;
  --c-brand-tint: #ececff;
  --c-danger: #d64545;
  --c-danger-tint: #fdecec;
  --c-line: #e6e8ef;
  --ls-caps: 0.04em;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sidebar-content{
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  background: #f4f5fa;
  color: var(--c-text);
  font-family: "Poppins", sans-serif;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 15px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .notif-sticky-head{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -15px 6px;
  padding: 10px 52px 10px 8px;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .notif-sticky-head h2{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-title);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .notif-sticky-head h2 i{
  color: var(--c-brand);
  font-size: 18px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-head-btn{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-title);
  font-size: 18px;
  cursor: pointer;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-head-btn:hover{
  background: #f1f2f7;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-close-btn{
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  color: var(--c-danger);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-close-btn:hover{
  background: var(--c-danger-tint);
}
:where(html.pg-livetracking) #add-vehicle-sidebar [hidden]{
  display: none !important;
}
/* The "tracker found" line above the form. */
:where(html.pg-livetracking) #add-vehicle-sidebar .av-note{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 2px 10px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-text);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-note i{
  margin-top: 2px;
  color: #14916f;
}
/* Step 1, the scan: the note, Scan QR code, the browser camera, the IMEI
   typed (shown off the app). */
:where(html.pg-livetracking) #add-vehicle-sidebar .av-note-plain{
  display: block;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-note{
  margin: 10px 4px 4px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-text);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-cam{
  display: none;
  margin-top: 10px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-cam.active{
  display: block;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-cam video{
  display: block;
  width: 100%;
  max-height: 40vh;
  border-radius: 16px;
  background: #111;
  object-fit: cover;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-cam .sl-btn{
  display: flex;
  width: 100%;
  margin-top: 8px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar #avScan > .sl-wide,
:where(html.pg-livetracking) #add-vehicle-sidebar #avManual .sl-wide{
  margin-top: 10px;
}
/* Section captions, cards, fields, buttons (the service page's). */
:where(html.pg-livetracking) #add-vehicle-sidebar .st-sect{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 4px 6px;
  font-size: var(--fs-chip);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .st-card{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 4px 14px 12px;
  margin-bottom: 10px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-field{
  padding-top: 10px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-label{
  display: block;
  margin: 0 0 6px 2px;
  font-size: var(--fs-chip);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input{
  position: relative;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input{
  width: 100%;
  box-sizing: border-box;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-family: inherit;
  font-size: var(--fs-dialog); /* 16px: no zoom on an iPhone */
  color: var(--c-title);
  outline: none;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input:focus{
  border-color: var(--c-brand);
  background: #fff;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input.av-readonly{
  background: #f1f2f7;
  color: var(--c-text);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-lock{
  margin-left: 4px;
  font-size: 10px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-actions{
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-btn{
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: var(--c-brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-name);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-btn:disabled{
  opacity: 0.6;
  cursor: progress;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-btn-light{
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-wide{
  display: flex;
  width: 100%;
  margin: 4px 0;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-empty{
  margin: 0;
  padding: 14px;
  font-size: var(--fs-body);
  color: var(--c-muted);
  text-align: center;
}
/* The vehicle icon: the box, and the picker in place. */
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box{
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  box-sizing: border-box;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-family: inherit;
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
  text-align: left;
  cursor: pointer;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box img{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box span:first-of-type{
  flex: 1;
  min-width: 0;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-change{
  color: var(--c-brand);
  font-size: var(--fs-small);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  padding: 12px;
  max-height: 40vh;
  overflow-y: auto;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-grid .sl-empty{
  grid-column: 1 / -1;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-item{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--c-text);
  cursor: pointer;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-item img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-item.on{
  border-color: var(--c-brand);
  background: #f6f6ff;
  color: var(--c-brand);
}
/* "Add this vehicle?": an amber card with the summary (label / value rows). */
:where(html.pg-livetracking) #add-vehicle-sidebar .av-confirm{
  margin-top: 12px;
  padding: 12px 14px 2px;
  border: 1px solid #f6d9b0;
  border-radius: 16px;
  background: #fff8ee;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-confirm-title{
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-name);
  color: var(--c-title);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .st-card.av-kv-card{
  padding: 0 14px;
  margin: 0;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-kv{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--c-line);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-kv:first-child{
  border-top: 0;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-k{
  flex: 0 0 110px; /* audit NG-C7 */
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: var(--lh-text);
  color: var(--c-muted);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .av-v{
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-title);
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════════
   index.html (pg-index)
   ══════════════════════════════════════════════════════════════════════ */

      :root:where(.pg-index){
        --bg-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC");
        --bg-width: 50px;
        --bg-height: 50px;
      }
      @keyframes bg-scrolling-reverse {
        100% {
          background-position: var(--bg-width) var(--bg-height);
        }
      }
      html:where(.pg-index), :where(html.pg-index) *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      html:where(.pg-index),
      :where(html.pg-index) body{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        overflow: hidden;
        background-color: whitesmoke;
        background-image: var(--bg-url);
        background-repeat: repeat;
        background-position: 0 0;
        animation: bg-scrolling-reverse 10s infinite linear;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
      }
      :where(html.pg-index) .container{
        position: relative;
        height: 90%;
        width: 80%;
        background: white;
        border-radius: 2vw;
        box-shadow: 0 0 2vw lightgray;
        overflow: hidden;
      }
      :where(html.pg-index) .container h1{
        font-size: 6vh;
      }
      :where(html.pg-index) .form-box{
        position: absolute;
        right: 0;
        width: 50%;
        height: 100%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        padding: 5%;
        z-index: 1;
      }
      :where(html.pg-index) .input-box{
        position: relative;
        margin: 7% 0;
      }
      :where(html.pg-index) .input-box input{
        width: 100%;
        padding: 3% 15% 3% 7%;
        background: whitesmoke;
        border-radius: 0.75vw;
        border: none;
        outline: none;
        font-size: 3vh;
        color: #333;
        font-weight: 500;
      }
      :where(html.pg-index) .input-box input::placeholder{
        color: #555;
        font-weight: 400;
      }
      :where(html.pg-index) .input-box i{
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 4vh;
      }
      :where(html.pg-index) .input-box i:hover{
        color: #3d52a0;
      }
      :where(html.pg-index) .btn{
        width: 100%;
        background: #7494ec;
        border-radius: 0.75vw;
        box-shadow: 0 0 0.75vw lightgray;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3vh;
        color: white;
        font-weight: 600;
        padding: 2%;
      }
      :where(html.pg-index) .btn:hover{
        background: #3d52a0;
      }
      /* Deliberately the SAME shell as the app-update loader (#updateLoader,
         tracking-pages section of this file): light wash, bare spinner, one purple line, no card —
         so the app's two "hold on" screens read as one thing. Sizes, colours
         and the spin duration are copied from it; keep them in step if that
         one is restyled. The padlock inside the ring is the only addition,
         because this hold is a security moment rather than a progress one. */
      :where(html.pg-index) #secureLoginOverlay{
        position: fixed;
        inset: 0;
        /* Below .simpleToast (9999) on purpose — unlike #updateLoader, which
           sits above everything: the login toasts must stay readable over this
           curtain, since the login result is exactly what they carry. */
        z-index: 9990;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
      }
      :where(html.pg-index) #secureLoginOverlay.active{
        display: flex;
      }
      :where(html.pg-index) .secure-login-ring{
        position: relative;
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
      }
      /* The ring spins, the lock does not — a rotating padlock reads as an
         error state rather than as progress. */
      :where(html.pg-index) .secure-login-ring::before{
        content: "";
        position: absolute;
        inset: 0;
        border: 4px solid rgba(105, 108, 255, 0.25);
        border-top-color: #696cff;
        border-radius: 50%;
        animation: secureLoginSpin 0.8s linear infinite;
      }
      :where(html.pg-index) .secure-login-ring i{
        font-size: 20px;
        color: #696cff;
      }
      :where(html.pg-index) .secure-login-text{
        margin: 0;
        padding: 0 24px;
        text-align: center;
        color: #696cff;
        font-size: 15px;
        font-weight: 600;
      }
      @keyframes secureLoginSpin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        :where(html.pg-index) .secure-login-ring::before{
          animation: none;
        }
      }
      :where(html.pg-index) .btn-biometric-retry{
        margin-top: 2%;
        background: transparent;
        color: #3d52a0;
        border: 1px solid #7494ec;
        box-shadow: none;
      }
      :where(html.pg-index) .btn-biometric-retry:hover{
        background: #eef2ff;
      }
      :where(html.pg-index) .btn-biometric-retry[disabled]{
        opacity: 0.6;
        cursor: default;
      }
      :where(html.pg-index) .btn:active{
        transform: scale(1.01);
      }
      :where(html.pg-index) .toggle-panel{
        position: absolute;
        width: 50%;
        height: 100%;
        background: #3d52a0;
      }
      :where(html.pg-index) .logo-container{
        width: 100%;
        height: 100%;
        padding: 2%;
      }
      :where(html.pg-index) .logo-container img{
        width: 50%;
        height: auto;
        object-fit: contain;
      }
      :where(html.pg-index) .img-container{
        width: 100%;
        height: 100%;
        padding: 2%;
      }
      :where(html.pg-index) .img-container img{
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      :where(html.pg-index) .simpleToast{
        position: fixed;
        top: 7%;
        left: 50%;
        transform: translateX(-50%);
        width: 30vw;
        background: #696cff;
        color: white;
        padding: 10px 16px;
        border-radius: 10px;
        opacity: 0.9;
        font-size: 3vh;
        z-index: 9999;
        word-wrap: break-word;
        animation:
          fadein 0.5s,
          fadeout 0.5s 2.5s;
      }
      :where(html.pg-index) .signup{
        font-size: 2.5vh;
        margin-top: 12px;
      }
      @keyframes fadein {
        from {
          opacity: 0;
        }
        to {
          opacity: 0.9;
        }
      }
      @keyframes fadeout {
        from {
          opacity: 0.9;
        }
        to {
          opacity: 0;
        }
      }
      @media (orientation: portrait) {
        :where(html.pg-index) .container{
          height: 90%;
          width: 90%;
          border-radius: 2vh;
          box-shadow: 0 0 2vh lightgray;
        }
        :where(html.pg-index) .container h1{
          font-size: 5vh;
        }
        :where(html.pg-index) .simpleToast{
          font-size: 2vh;
          width: 80vw;
          border-radius: 10px;
        }
        :where(html.pg-index) .form-box{
          top: 0;
          width: 100%;
          height: 75%;
        }
        :where(html.pg-index) .toggle-panel{
          bottom: 0;
          width: 100%;
          height: 25%;
        }
        :where(html.pg-index) .logo-container img{
          width: 60%;
        }
        :where(html.pg-index) .btn{
          font-size: 3vh;
          border-radius: 1vh;
        }
        :where(html.pg-index) .input-box input{
          border-radius: 1vh;
        }
        :where(html.pg-index) .signup{
          font-size: 2vh !important;
        }
      }
    

/* ══════════════════════════════════════════════════════════════════════
   dashboard.html (pg-dashboard)
   ══════════════════════════════════════════════════════════════════════ */

      :root:where(.pg-dashboard){
        --bg: #f3f4f8;
        --card-bg: #ffffff;
        --card-radius: 14px;
        --shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.08);
        --text-main: #1f2933;
        --text-muted: #6b7280;
      }

      html:where(.pg-dashboard), :where(html.pg-dashboard) *{
        box-sizing: border-box;
      }

      html:where(.pg-dashboard),
      :where(html.pg-dashboard) body{
        margin: 0;
        padding: 0;
        font-family:
          "Public Sans",
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          sans-serif;
        background: radial-gradient(
          circle at top left,
          #eef2ff 0,
          var(--bg) 55%
        );
        color: var(--text-main);
      }

      :where(html.pg-dashboard) body{
        padding: 24px;
      }

      :where(html.pg-dashboard) .row{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 24px;
      }

      :where(html.pg-dashboard) .card{
        background: var(--card-bg);
        border-radius: var(--card-radius);
        padding: 20px 18px 60px;
        box-shadow: var(--shadow-soft);
        position: relative;
        overflow: hidden;
        min-height: 140px;
      }
      :where(html.pg-dashboard) .card.active{
        border: 2px solid #2563eb; /* blue */
      }

      :where(html.pg-dashboard) .avatar{
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: #fff;
        position: absolute;
        left: 14px;
        bottom: 10px;
      }

      :where(html.pg-dashboard) .title{
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text-main);
      }

      :where(html.pg-dashboard) .value{
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 12px;
      }

      :where(html.pg-dashboard) .img-right{
        position: absolute;
        right: 14px;
        bottom: 10px;
        max-width: 60%;
        max-height: 80%;
        object-fit: contain;
        opacity: 0.9;
        pointer-events: none;
      }

      /* Avatar Background Colors */
      :where(html.pg-dashboard) .bg-primary{
        background: #6366f1;
      }
      :where(html.pg-dashboard) .bg-success{
        background: #22c55e;
      }
      :where(html.pg-dashboard) .bg-warning{
        background: #f59e0b;
      }
      :where(html.pg-dashboard) .bg-danger{
        background: #ef4444;
      }
      :where(html.pg-dashboard) .bg-info{
        background: #06b6d4;
      }
      :where(html.pg-dashboard) .bg-dark{
        background: #111827;
      }

      /* ---------- MOBILE (portrait) : 2×4 grid, fit exactly 1 screen ---------- */
      @media (orientation: portrait) {
        html:where(.pg-dashboard),
        :where(html.pg-dashboard) body{
          height: auto;
          overflow-y: auto; /* enable scrolling */
        }

        :where(html.pg-dashboard) body{
          padding: 10px;
          background: var(--bg);
        }

        :where(html.pg-dashboard) .row{
          display: grid;
          grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
          grid-auto-rows: auto; /* allow natural height */
          gap: 10px;
        }

        :where(html.pg-dashboard) .card{
          padding: 14px 12px 50px;
          border-radius: 12px;
          box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          min-height: 120px;
        }

        :where(html.pg-dashboard) .avatar{
          width: 36px;
          height: 36px;
          font-size: 24px;
          border-radius: 10px;
          left: 8px;
          bottom: 6px;
        }

        :where(html.pg-dashboard) .title{
          font-size: 15px;
          margin-bottom: 6px;
          color: var(--text-main);
          font-weight: 600;
        }

        :where(html.pg-dashboard) .value{
          font-size: 24px;
          margin-bottom: 8px;
          font-weight: 700;
        }

        :where(html.pg-dashboard) .img-right{
          right: 8px;
          bottom: 6px;
          max-width: 60%;
          max-height: 70%;
          opacity: 0.9;
        }
      }

      /* TABLET/LANDSCAPE */
      @media (min-width: 768px) {
        :where(html.pg-dashboard) .row{
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
      }

      :where(html.pg-dashboard) .badge-spinner{
        width: 15px;
        height: 15px;
        border: 2px solid #ccc;
        border-top-color: #333;
        border-radius: 50%;
        display: inline-block;
        animation: spin 0.7s linear infinite;
        margin: 0 auto;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Highlight effect for settings cards */
      :where(html.pg-dashboard) .card.highlight{
        background: linear-gradient(135deg, #ffffff 0%, #fffacd 100%);
        border: 2px solid #ffd700;
        box-shadow:
          var(--shadow-soft),
          0 0 15px rgba(255, 215, 0, 0.4);
      }
    

/* ══════════════════════════════════════════════════════════════════════
   history.html (pg-history)
   ══════════════════════════════════════════════════════════════════════ */

      :where(html.pg-history) body,
      html:where(.pg-history){
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-family: "Poppins", sans-serif;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
      }
      :where(html.pg-history) #map{
        width: 100%;
        height: 100%;
      }
      :where(html.pg-history) .replay-panel{
        position: absolute;
        top: 10px;
        left: 10px;
        width: 320px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        z-index: 999;
        display: flex;
        flex-direction: column;
      }
      :where(html.pg-history) .replay-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
      }
      :where(html.pg-history) .replay-header button{
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
      }
      :where(html.pg-history) .replay-body{
        padding: 12px;
        flex: 1;
        overflow-x: auto;
        background: #fff;
        z-index: 9999;
      }
      :where(html.pg-history) .form-group{
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
      }
      :where(html.pg-history) .form-group label{
        font-size: 12px;
        color: #555;
        font-weight: 500;
        display: block;
        margin-bottom: 4px;
      }
      :where(html.pg-history) .form-group select,
      :where(html.pg-history) .form-group input{
        width: 100%;
        padding: 8px 10px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #111;
        outline: none;
      }
      :where(html.pg-history) .form-group input:focus,
      :where(html.pg-history) .form-group select:focus{
        border-color: #111;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
      }
      :where(html.pg-history) .form-group.outlined{
        position: relative;
        margin-bottom: 16px;
        font-family: sans-serif;
      }
      :where(html.pg-history) .form-group.outlined input,
      :where(html.pg-history) .form-group.outlined select{
        width: 100%;
        border-radius: 6px;
        border: 1px solid #111;
        outline: none;
        /* background-color, not the shorthand: the chevron is in icons.css
           (loaded first) and the shorthand would reset its background-image. */
        background-color: transparent;
        appearance: none;
      }
      :where(html.pg-history) .form-group.outlined label{
        position: absolute;
        top: -10px;
        left: 12px;
        color: #111;
        font-weight: 600;
        background: white;
        padding: 0 4px;
        pointer-events: none;
      }
      :where(html.pg-history) .form-group.outlined select{
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
}
      :where(html.pg-history) .show-btn{
        width: 25%;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #111;
        color: #28a745;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-history) .show-btn:hover{
        background: #ddd;
      }
      :where(html.pg-history) .clear-btn{
        width: 25%;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #111;
        color: orangered;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-history) .clear-btn:hover{
        background: #ddd;
      }
      :where(html.pg-history) .stop-btn{
        width: 25%;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #111;
        color: #d32f2f;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-history) .stop-btn:hover{
        background: #ddd;
      }
      :where(html.pg-history) .stop-btn[disabled]{
        opacity: 0.6;
        cursor: default;
      }
      :where(html.pg-history) .player-bar{
        position: fixed;
        left: 10px;
        width: 300px;
        bottom: 10px;
        background: #fff;
        border-top: 1px solid #ddd;
        padding: 10px;
        text-align: center;
        justify-content: center;
        z-index: 2000;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }
      :where(html.pg-history) .player-bar input[type="range"]{
        width: 100%;
      }
      :where(html.pg-history) .player-meta{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        font-size: 13px;
        color: #555;
      }
      :where(html.pg-history) .player-controls{
        margin-top: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
      }
      :where(html.pg-history) .player-buttons button{
        background: none;
        border: none;
        cursor: pointer;
        font-size: 36px;
        padding: 0;
        margin: 0 8px;
      }
      :where(html.pg-history) .player-buttons button i{
        pointer-events: none;
      }
      :where(html.pg-history) .speed-indicator{
        font-size: 12px;
        color: #333;
        text-align: right;
        min-width: 50px;
      }
      /* Snackbar, the same look as the live page's .simpleToast (a separate
         copy: the tracking-page rules are scoped to pg-tracking). Duration is
         set per message in JS. */
      :where(html.pg-history) .historyToast{
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: min(560px, 80vw);
        background: #696cff;
        color: #fff;
        padding: 10px 16px;
        border-radius: 8px;
        opacity: 0.94;
        font-size: 14px;
        line-height: 1.4;
        text-align: center;
        z-index: 99999;
        word-wrap: break-word;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
        animation: historyToastIn 0.4s;
      }
      :where(html.pg-history) .historyToast.warn{
        background: #e67e22;
      }
      @keyframes historyToastIn {
        from { opacity: 0; transform: translate(-50%, -8px); }
        to { opacity: 0.94; transform: translate(-50%, 0); }
      }
      /* Replay vehicle: a stack of the same icon raised along the ground
         normal — see initMarker(). preserve-3d lets the children's translateZ
         act inside MapLibre's rotateX(pitch) on this element. */
      :where(html.pg-history) .replay-vehicle{
        position: relative;
        transform-style: preserve-3d;
        width: 40px !important; /* was inline; beats the marker's own rules */
        height: 40px !important;
        transform-origin: center center !important;
      }
      /* Event / geofence toggle switched off (layer there but hidden). */
      :where(html.pg-history) .h-btn-off.h-btn-off{
        background-color: #ddd !important;
      }
      /* Map popup value colours (ignition, event, trip status). */
      :where(html.pg-history) .h-c-green.h-c-green{ color: green; }
      :where(html.pg-history) .h-c-red.h-c-red{ color: red; }
      :where(html.pg-history) .h-c-black.h-c-black{ color: black; }
      /* Between two alerts in one replay popup. */
      :where(html.pg-history) hr.alert-sep{
        margin: 6px 0;
        border: 0;
        border-top: 1px solid #eee;
      }
      :where(html.pg-history) .replay-vehicle img{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        user-select: none;
      }
      :where(html.pg-history) .replay-vehicle img.wall{
        filter: brightness(0.55);
      }
      /* One device alert on the map: a coloured disc (colour = alert type, the
         same palette as the live page's Device Alerts) with a Boxicons glyph
         (css/icons.css). */
      :where(html.pg-history) .alert-marker{
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        cursor: pointer;
      }
      :where(html.pg-history) .alert-marker svg{
        width: 58%;
        height: 58%;
        display: block;
      }
      /* System-calculated events (idle, parked, stopped, waiting, harsh
         driving, overspeed runs, GPS gaps): same disc, a size down, so the
         device / server / live alerts stay the louder mark. */
      :where(html.pg-history) .alert-marker.is-system{
        width: 20px;
        height: 20px;
        font-size: 12px;
        border-width: 2px;
        opacity: 0.92;
      }
      /* The 3-second popup the replay pauses on when the vehicle reaches an
         alert. No close button — it goes away by itself. */
      :where(html.pg-history) .alert-replay-popup .maplibregl-popup-content{
        padding: 8px 12px;
        border-left: 4px solid var(--alert-color, #ff4500);
        font-size: 12px;
        line-height: 1.5;
        min-width: 170px;
      }
      :where(html.pg-history) .alert-replay-popup .alert-title{
        font-weight: 700;
        color: var(--alert-color, #ff4500);
      }
      :where(html.pg-history) .alert-replay-popup .alert-meta{
        color: #555;
      }

      /* Button glyphs for this column live in css/icons.css (section 6);
         #toggleTerrainBtn uses MapLibre's own terrain icon via its
         maplibregl-ctrl-terrain classes. */
      :where(html.pg-history) input[type="datetime-local"]{
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
      }
      :where(html.pg-history) .overspeedThreshold{
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
      }
      :where(html.pg-history) .tripDuration{
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
      }
      :where(html.pg-history) .tripDistance{
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
      }
      :where(html.pg-history) #timeSlider{
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 4px;
        background: #007bff;
        outline: none;
        margin: 8px 0;
      }
      :where(html.pg-history) #timeSlider::-webkit-slider-thumb{
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #0056b3;
        cursor: pointer;
      }
      :where(html.pg-history) #timeSlider::-moz-range-thumb{
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #111;
        cursor: pointer;
      }
      :where(html.pg-history) #timeSlider::-moz-range-track{
        background: #333;
        height: 6px;
        border-radius: 4px;
      }
      :where(html.pg-history) .popup-content{
        font-size: 12px;
        font-family: Poppins, sans-serif;
        max-width: 200px;
        position: relative;
        padding-top: 5px;
      }
      :where(html.pg-history) .maplibregl-popup-content{
        border-radius: 8px !important;
        font-family: "Poppins", sans-serif;
        padding: 10px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
      }
      :where(html.pg-history) .maplibregl-popup-tip{
        border-radius: 4px;
      }
      :where(html.pg-history) .maplibregl-popup-close-button{
        font-size: 24px !important;
      }
      :where(html.pg-history) .filterBadge{
        position: absolute;
        bottom: 6px;
        right: 6px;
        width: 6px;
        height: 6px;
        background: green;
        border-radius: 50%;
        display: none;
        animation: heartbeat-history 2s infinite;
      }
      :where(html.pg-history) #vehicleSelect{
        width: 100%;
        box-sizing: border-box; /* so padding doesn’t shrink width */
      }
      @keyframes heartbeat-history {
        0% {
          transform: scale(1);
          opacity: 0.9;
        }
        25% {
          transform: scale(1.2);
          opacity: 1;
        }
        40% {
          transform: scale(1);
          opacity: 0.9;
        }
        60% {
          transform: scale(1.2);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0.9;
        }
      }

      :where(html.pg-history) .info-bar{
        display: none;
        background: #ffffff;
        border-top: 1px solid #ddd;
        padding: 8px;
        font-size: 12px;
        color: #333;
        font-family: "Poppins", sans-serif;
        flex-wrap: wrap;
        gap: 4px;
      }

      :where(html.pg-history) .info-item{
        flex: 1 1 45%;
        min-width: 80px;
      }
      :where(html.pg-history) .info-item.full-width{
        flex: 1 1 100%;
        min-width: 100%;
      }

      :where(html.pg-history) .info-item strong{
        color: #007bff;
      }
      :where(html.pg-history) .accordion{
        margin-top: -6px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 4px 8px;
      }

      :where(html.pg-history) .accordion summary{
        font-weight: 500;
        list-style: none;
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      :where(html.pg-history) .accordion summary::-webkit-details-marker{
        display: none;
      }

      :where(html.pg-history) .accordion summary::after{
        content: "▼";
        font-size: 10px;
        transition: transform 0.3s ease;
      }

      :where(html.pg-history) .accordion[open] summary::after{
        transform: rotate(180deg);
      }

      :where(html.pg-history) .accordion[open]{
        background-color: #f9f9f9;
      }

      /* Green "live" dot on any front-column toggle whose feature is currently
         on. One rule for every button; JS puts .active on the button (the
         arrows toggle via bindToggle, the feature's own code for measure,
         trips, terrain, alerts & events, curves, geofences). */
      :where(html.pg-history) .front-col button{
        position: relative;
      }
      :where(html.pg-history) .front-col button .active-badge{
        position: absolute;
        top: -4px;
        right: -4px;
        width: 10px;
        height: 10px;
        background-color: #20c997;
        border: 2px solid #fff;
        border-radius: 50%;
        display: none;
        pointer-events: none;
        animation: heartbeat-history 1.5s infinite;
      }
      :where(html.pg-history) .front-col button.active .active-badge{
        display: block;
      }
      /* Pressed with nothing to show (no route yet, no events of that kind in
         the range, no saved geofences, no alerts): the dot flashes RED for a
         moment instead of going green. Set by flashNoData(). */
      :where(html.pg-history) .front-col button.no-data .active-badge{
        display: block;
        background-color: #d32f2f;
        animation: heartbeat-history 0.5s 3;
      }

      @keyframes heartbeat-history {
        0% {
          transform: scale(1);
          opacity: 0.9;
        }
        25% {
          transform: scale(1.1);
          opacity: 1;
        }
        40% {
          transform: scale(1);
          opacity: 0.9;
        }
        60% {
          transform: scale(1.1);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0.9;
        }
      }

      @media (orientation: portrait) {
        :where(html.pg-history) .replay-panel{
          width: calc(100vw - 60px);
        }
        :where(html.pg-history) .player-bar{
          position: fixed;
          left: 10px;
          right: 10px;
          bottom: 10px;
          width: unset;
          background: #fff;
          border-top: 1px solid #ddd;
          padding: 10px;
          text-align: center;
          z-index: 2000;
        }
      }
    

/* ══════════════════════════════════════════════════════════════════════
   report.html (pg-report)
   ══════════════════════════════════════════════════════════════════════ */

      html:where(.pg-report),
      :where(html.pg-report) body{
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        font-family: "Poppins", sans-serif;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        user-select: none;
      }
      /* Script-built parts of the report (were inline styles; !important keeps
         their old precedence over every other rule). */
      /* Report tables restyled to the fleet-sample look (GPSReports/
         style.css, Bootstrap-3 reports): soft horizontal lines only, zebra
         rows, hover, a 2px header underline — no black cell grid. */
      :where(html.pg-report) .rpt-table{
        width: 100% !important;
        border-collapse: collapse !important;
        font-family: Arial, sans-serif !important;
        font-size: 13px !important;
        color: #444 !important;
        background: #fff !important;
        border: 1px solid #e3e6ea !important;
      }
      :where(html.pg-report) .rpt-table th{
        border: none !important;
        border-bottom: 2px solid #d7dbe0 !important;
        padding: 9px 10px !important;
        background: #f6f8fa !important;
        color: #51575e !important;
        font-weight: 600 !important;
        text-align: left !important;
        white-space: nowrap !important;
      }
      :where(html.pg-report) .rpt-table td{
        border: none !important;
        border-top: 1px solid #e9ecef !important;
        padding: 8px 10px !important;
        vertical-align: top !important;
      }
      :where(html.pg-report) .rpt-table tbody tr:nth-child(even) td{
        background: #f9fafb !important;
      }
      :where(html.pg-report) .rpt-table tbody tr:hover td{
        background: #eef4fb !important;
      }
      /* Totals rows (Total / FLEET / Days) stand out like the samples' */
      :where(html.pg-report) .rpt-table tr.rpt-total-row td{
        background: #eef3f8 !important;
        border-top: 2px solid #c9d4e0 !important;
        font-weight: 600 !important;
        color: #334155 !important;
      }
      /* RAG verdicts as coloured pills */
      :where(html.pg-report) .rpt-table td.rpt-rag{
        font-weight: 600 !important;
        text-align: center !important;
      }
      :where(html.pg-report) .rpt-table td.rpt-rag-green{ color: #1a7f37 !important; background: #e6f4ea !important; }
      :where(html.pg-report) .rpt-table td.rpt-rag-amber{ color: #9a6700 !important; background: #fff8e1 !important; }
      :where(html.pg-report) .rpt-table td.rpt-rag-red{ color: #c62828 !important; background: #fdecea !important; }
      /* Data Health cells ("Problem . 120 readings . reads a constant ...")
         keep the pill colour but read left-aligned like prose. */
      :where(html.pg-report) .rpt-table td.rpt-rag.rpt-health{
        text-align: left !important;
        font-weight: 500 !important;
      }
      /* Short cells stay on one line (the samples never wrap a date or a
         number); long prose columns (address, detail, hints) keep wrapping. */
      :where(html.pg-report) .rpt-table td.rpt-nw{
        white-space: nowrap !important;
      }
      /* A "vehicle - could not load ..." row spans the table, like the
         samples' "Nothing has been found on your request." */
      :where(html.pg-report) .rpt-table td.rpt-note-cell{
        color: #6b7280 !important;
        font-style: italic !important;
        text-align: left !important;
      }
      /* Wide tables scroll sideways inside the page, like .table-responsive */
      :where(html.pg-report) #reportBody,
      :where(html.pg-report) #reportBody1{
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      /* Fuel theft / refill location row under its data row. */
      :where(html.pg-report) .rpt-table td.rpt-fuel-event-cell{
        color: #2f6fbf !important;
        font-size: 12px !important;
        background: #f7fbff !important;
      }
      :where(html.pg-report) .rpt-title-row{
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin-bottom: 8px !important;
      }
      /* "Time period: from - to" under the title, as every fleet-report
         sample carries (GPSReports/). Hidden when no range is loaded. */
      :where(html.pg-report) .rpt-period{
        margin: 0 !important;
        font-size: 12px !important;
        color: #666 !important;
      }
      :where(html.pg-report) .rpt-view-bar{
        display: flex !important;
        gap: 10px !important;
        margin: 10px 0 !important;
        padding: 10px !important;
        background: #f5f5f5 !important;
        border-radius: 5px !important;
      }
      :where(html.pg-report) .rpt-view-btn{
        padding: 8px 16px !important;
        border: none !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        font-size: 14px !important;
        background: white !important;
        color: #333 !important;
      }
      :where(html.pg-report) .rpt-view-btn.is-active{ color: white !important; }
      :where(html.pg-report) .rpt-view-btn.rpt-mode-table{ background: #4CAF50 !important; }
      :where(html.pg-report) .rpt-view-btn.rpt-mode-line{ background: #2196F3 !important; }
      :where(html.pg-report) .rpt-view-btn.rpt-mode-bar{ background: #FF9800 !important; }
      :where(html.pg-report) .rpt-chart-card{
        margin-top: 20px !important;
        background: white !important;
        padding: 15px !important;
        border-radius: 5px !important;
      }
      :where(html.pg-report) .rpt-chart-box{
        position: relative !important;
        height: 400px !important;
        width: 100% !important;
      }
      :where(html.pg-report) .rpt-msg-loading,
      :where(html.pg-report) .rpt-msg-empty{
        text-align: center !important;
        padding: 40px !important;
        color: #666 !important;
      }
      :where(html.pg-report) .rpt-msg-empty{ color: #999 !important; }
      :where(html.pg-report) .rpt-msg-addr{
        text-align: center !important;
        padding: 20px !important;
        color: #666 !important;
      }
      :where(html.pg-report) .rpt-msg-error{ color: #a00 !important; }
      :where(html.pg-report) .rpt-msg-info{ color: #444 !important; }
      :where(html.pg-report) .rpt-msg-nodata{
        color: #444 !important;
        padding: 6px 0 !important;
      }
      :where(html.pg-report) .rpt-summary-box{
        margin-bottom: 10px !important;
        padding: 8px 10px !important;
        border: 1px solid #d7deea !important;
        background: #f8fbff !important;
        border-radius: 6px !important;
      }
      :where(html.pg-report) .rpt-section-title{
        margin: 12px 0 6px !important;
        font-weight: 700 !important;
      }
      :where(html.pg-report) .rpt-fuel-summary{
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px 6px !important;
        margin: 6px 0 10px !important;
        padding: 6px 8px !important;
        border: 1px solid #d7deea !important;
        background: #f8fbff !important;
        border-radius: 6px !important;
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: #2c3e50 !important;
      }
      :where(html.pg-report) .rpt-fuel-summary > span{
        background: #eef4fb !important;
        border-radius: 4px !important;
        padding: 2px 8px !important;
        white-space: nowrap !important;
      }
      /* Excel / PDF buttons: dimmed until the addresses have loaded. */
      :where(html.pg-report) .rpt-dl-ready{
        opacity: 1 !important;
        cursor: pointer !important;
      }
      :where(html.pg-report) .rpt-dl-wait{
        opacity: 0.55 !important;
        cursor: not-allowed !important;
      }
      :where(html.pg-report) .search-panel{
        position: absolute;
        top: 10px;
        left: 10px;
        width: 25vw;
        height: calc(100vh - 20px);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        z-index: 999;
        display: flex;
        flex-direction: column;
      }
      :where(html.pg-report) .report-panel{
        position: absolute;
        top: 10px;
        right: 10px;
        width: calc(75vw - 30px);
        height: calc(100vh - 20px);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        background-color: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }
      :where(html.pg-report) .replay-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px;
        background: #f5f5f5;
        border-bottom: 1px solid #ddd;
      }
      :where(html.pg-report) .replay-header button{
        background: none;
        border: none;
        cursor: pointer;
        font-size: 16px;
      }
      :where(html.pg-report) .replay-body{
        padding: 10px;
        background: #fff;
        z-index: 9999;
      }
      :where(html.pg-report) .form-group{
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
      }
      :where(html.pg-report) .form-group label{
        font-size: 12px;
        color: #555;
        font-weight: 500;
        display: block;
        margin-bottom: 4px;
      }
      :where(html.pg-report) .form-group select,
      :where(html.pg-report) .form-group input{
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #111;
        outline: none;
      }
      :where(html.pg-report) .form-group input:focus,
      :where(html.pg-report) .form-group select:focus{
        border-color: #111;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
      }
      :where(html.pg-report) .form-group.outlined{
        position: relative;
        margin-bottom: 16px;
        font-family: sans-serif;
      }
      :where(html.pg-report) .form-group.outlined input,
      :where(html.pg-report) .form-group.outlined select{
        width: 100%;
        box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #111;
        outline: none;
        /* background-color, not the shorthand: the chevron is in icons.css
           (loaded first) and the shorthand would reset its background-image. */
        background-color: transparent;
        appearance: none;
      }
      :where(html.pg-report) #overspeedThresholdGroup input[type="number"]{
        -moz-appearance: textfield;
        appearance: textfield;
      }
      :where(html.pg-report) #overspeedThresholdGroup input[type="number"]::-webkit-outer-spin-button,
      :where(html.pg-report) #overspeedThresholdGroup input[type="number"]::-webkit-inner-spin-button{
        -webkit-appearance: none;
        margin: 0;
      }
      :where(html.pg-report) .form-group.outlined label{
        position: absolute;
        top: -10px;
        left: 12px;
        color: #111;
        font-weight: 600;
        background: white;
        padding: 0 4px;
        pointer-events: none;
      }
      :where(html.pg-report) .form-group.outlined select{
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
      }
      :where(html.pg-report) .show-btn{
        width: unset;
        padding: 5px 10px;
        background: #ffffff;
        border: 1px solid #111;
        color: #28a745;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-report) .show-btn:hover{
        background: #ddd;
      }
      :where(html.pg-report) .clear-btn{
        width: unset;
        padding: 5px 10px;
        background: #ffffff;
        border: 1px solid #111;
        color: orangered;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-report) .clear-btn:hover{
        background: #ddd;
      }

      :where(html.pg-report) body.page-loading{
        overflow: hidden;
      }
      :where(html.pg-report) body.page-loading .main-container{
        filter: blur(2px);
        transition: filter 0.15s ease;
        pointer-events: none;
      }
      :where(html.pg-report) #globalLoadingOverlay{
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.45);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 20000;
      }
      :where(html.pg-report) #globalLoadingOverlay.active{
        display: flex;
      }
      :where(html.pg-report) .loading-overlay-card{
        min-width: min(460px, calc(100vw - 40px));
        max-width: 560px;
        border-radius: 14px;
        border: 1px solid rgba(15, 23, 42, 0.14);
        background: linear-gradient(135deg, #ffffff, #f8fbff);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
        color: #0f172a;
        padding: 16px 18px;
      }
      :where(html.pg-report) .loading-overlay-top{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
      }
      :where(html.pg-report) .loading-overlay-status{
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
      }
      :where(html.pg-report) .loading-overlay-meta{
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 7px 10px;
        font-size: 12px;
        line-height: 1.35;
        padding: 10px;
        background: #f1f5f9;
        border: 1px solid #d9e2ec;
        border-radius: 9px;
      }
      :where(html.pg-report) .loading-meta-label{
        font-weight: 700;
        color: #475569;
      }
      :where(html.pg-report) .loading-meta-value{
        font-weight: 600;
        color: #1f2937;
        word-break: break-word;
      }
      :where(html.pg-report) .loading-overlay-cancel{
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 8px 10px;
        font-size: 13px;
        font-weight: 700;
        color: #b3261e;
        background: #ffffff;
        border: 1px solid #e5b4b0;
        border-radius: 9px;
        cursor: pointer;
      }
      :where(html.pg-report) .loading-overlay-cancel:hover{
        background: #fdeceb;
      }
      :where(html.pg-report) .loading-overlay-cancel[disabled]{
        opacity: 0.6;
        cursor: default;
      }
      :where(html.pg-report) .loading-overlay-spinner{
        width: 18px;
        height: 18px;
        border: 3px solid #c5d3f7;
        border-top-color: #1d4ed8;
        border-radius: 50%;
        animation: reportSpin 0.8s linear infinite;
        flex-shrink: 0;
      }
      @keyframes reportSpin {
        to {
          transform: rotate(360deg);
        }
      }
      /* Error state for form fields */
      :where(html.pg-report) .form-error input,
      :where(html.pg-report) .form-error select{
        border-color: #d32f2f !important;
        background-color: #ffebee !important;
      }

      /* Error message display */
      :where(html.pg-report) .error-message{
        background-color: #ffebee;
        color: #d32f2f;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 12px;
        border-left: 4px solid #d32f2f;
        font-size: 13px;
        line-height: 1.5;
      }

      /* No data warning */
      :where(html.pg-report) .no-data-warning{
        background-color: #fff3cd;
        color: #856404;
        padding: 12px;
        border-radius: 6px;
        margin: 12px 0;
        border-left: 4px solid #ffc107;
        font-size: 14px;
      }

      :where(html.pg-report) input[type="datetime-local"]{
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
      }

      :where(html.pg-report) .filterBadge{
        position: absolute;
        bottom: 6px;
        right: 6px;
        width: 6px;
        height: 6px;
        background: green;
        border-radius: 50%;
        display: none;
        animation: heartbeat-report 2s infinite;
      }
      :where(html.pg-report) #vehicleSelect{
        width: 100%;
        box-sizing: border-box; /* so padding doesn’t shrink width */
      }
      @keyframes heartbeat-report {
        0% {
          transform: scale(1);
          opacity: 0.9;
        }
        25% {
          transform: scale(1.2);
          opacity: 1;
        }
        40% {
          transform: scale(1);
          opacity: 0.9;
        }
        60% {
          transform: scale(1.2);
          opacity: 1;
        }
        100% {
          transform: scale(1);
          opacity: 0.9;
        }
      }

      :where(html.pg-report) .info-item{
        flex: 1 1 45%;
        min-width: 80px;
      }
      :where(html.pg-report) .info-item.full-width{
        flex: 1 1 100%;
        min-width: 100%;
      }

      :where(html.pg-report) .info-item strong{
        color: #007bff;
      }

      @media (orientation: portrait) {
        :where(html.pg-report) .main-container{
          display: flex;
          flex-direction: column;
          width: 100vw;
          height: 100vh;
          gap: 10px;
        }
        :where(html.pg-report) .search-panel{
          width: calc(100vw - 20px);
          position: relative;
          overflow: hidden;
          display: flex;
          flex-direction: column;
        }
        :where(html.pg-report) .report-panel{
          width: calc(100vw - 20px);
        }
      }

      :where(html.pg-report) .download-xlsx-btn{
        width: unset;
        padding: 5px 10px;
        background: #ffffff;
        border: 1px solid #111;
        color: #28a745;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-report) .download-xlsx-btn:hover{
        background: #ddd;
      }
      :where(html.pg-report) .download-pdf-btn{
        width: unset;
        padding: 5px 10px;
        background: #ffffff;
        border: 1px solid #111;
        color: orangered;
        font-weight: bold;
        cursor: pointer;
        border-radius: 6px;
      }
      :where(html.pg-report) .download-pdf-btn:hover{
        background: #ddd;
      }
    

/* ══════════════════════════════════════════════════════════════════════
   Dropdowns — ONE look on every page, phone and browser (owner, 2026-10-15:
   "like the report and history dropdown", "the same look everywhere";
   "font size, colours and border colours must match the new UI" — so the
   History shape in the new UI's palette: white fields (owner: "the grey
   background is too bad") with #d4d8e2 outlines, #e6e8ef row lines,
   #2b2c40 text, #7a8191 muted, #696cff brand, Poppins —
   Android, iOS and each browser draw a native picker differently). Every
   dropdown is js/ec-dropdown.js: the History / Reports field (white, 1px
   #111 border, 6px corners, 14px, 8px 32px 8px 10px, the navy chevron in
   icons.css) and one white list (.ec-dd-pop, floating on the page). The
   <select> stays hidden (.ec-dd-src) as the value. Service's search fields
   keep their own code and take the same field + list (.ec-dd-list). The
   class is tripled so it outranks each page's own field rules ((0,2,1) at
   most); ID-scoped ones skip .ec-dd at their rule. display / width / margin
   stay the page's.
   ══════════════════════════════════════════════════════════════════════ */
select.ec-dd-src.ec-dd-src {
  display: none !important;
}
select.ec-dd.ec-dd.ec-dd,
input.ec-dd.ec-dd.ec-dd {
  box-sizing: border-box;
  width: 100%;
  height: 34px; /* Reports' field, whatever the page's font */
  min-height: 0;
  padding: 0 32px 0 10px;
  font-family: "Poppins", sans-serif; /* the new UI's font, on every page */
  font-size: 16px; /* every field value 16px (the new UI's input size) */
  font-weight: 400;
  line-height: normal;
  color: #2b2c40;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background-color: #fff; /* not the shorthand: the chevron is in icons.css */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
input.ec-dd.ec-dd.ec-dd {
  cursor: text;
}
input.ec-dd.ec-dd.ec-dd::placeholder {
  font-size: 16px;
  color: #7a8191;
  opacity: 1;
}
select.ec-dd.ec-dd.ec-dd:focus,
input.ec-dd.ec-dd.ec-dd:focus {
  border-color: #696cff;
  background-color: #fff;
  /* a page's own focus rule may use the background shorthand: the chevron
     (icons.css, :focus too) keeps its place */
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  box-shadow: 0 0 0 3px #ececff;
}
select.ec-dd.ec-dd.ec-dd:disabled,
input.ec-dd.ec-dd.ec-dd:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
input.ec-dd.ec-dd.ec-dd[readonly] {
  cursor: pointer;
  caret-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* The list: under the field (or above it near the bottom of the screen),
   the field's width, the field's font — a search box at the top (every list
   can be searched), the rows scrolling under it. */
.ec-dd-pop {
  position: fixed;
  z-index: 100000;
  font-family: "Poppins", sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  color: #2b2c40;
  text-align: left;
}
.ec-dd-pop[hidden] {
  display: none;
}
.ec-dd-pop input.ec-dd-q {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 34px;
  margin: 6px 6px 4px;
  padding: 0 10px;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 16px; /* typed: no iPhone zoom */
  color: #2b2c40;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.ec-dd-pop input.ec-dd-q::placeholder {
  color: #7a8191;
  opacity: 1;
}
.ec-dd-pop input.ec-dd-q:focus {
  box-shadow: 0 0 0 3px #ececff;
}
.ec-dd-pop input.ec-dd-q::-webkit-search-cancel-button,
.ec-dd-pop input.ec-dd-q::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}
.ec-dd-rows {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border-top: 1px solid #e6e8ef; /* under the search box */
}
/* A hairline between rows (owner, 2026-10-15: "line separator"), the same in
   service's search lists below. */
.ec-dd-item + .ec-dd-item {
  border-top: 1px solid #e6e8ef;
}
/* The list's own font, whatever the page sets on its elements; a slim
   scrollbar without arrows (Windows draws a wide one with arrows). */
.ec-dd-pop.ec-dd-pop,
.ec-dd-pop.ec-dd-pop * {
  font-family: "Poppins", sans-serif; /* the field's font in the list too */
}
/* Firefox only: in Chrome the standard properties would switch the
   ::-webkit-scrollbar styling below off (and Windows draws arrow buttons). */
@supports not selector(::-webkit-scrollbar) {
  .ec-dd-rows {
    scrollbar-width: thin;
    scrollbar-color: #c3c7d1 transparent;
  }
}
.ec-dd-rows::-webkit-scrollbar {
  width: 6px;
}
.ec-dd-rows::-webkit-scrollbar-button {
  display: none;
  height: 0;
}
.ec-dd-rows::-webkit-scrollbar-track {
  background: transparent;
}
.ec-dd-rows::-webkit-scrollbar-thumb {
  background: #c3c7d1;
  border-radius: 3px;
}
.ec-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  font-size: 16px;
  line-height: 1.35;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.ec-dd-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ec-dd-item:hover,
.ec-dd-item.active {
  background: #f6f6ff;
}
.ec-dd-item.selected {
  font-weight: 600;
  color: #696cff;
}
/* Multi-select rows: a tick box. */
.ec-dd-check {
  position: relative;
  flex: 0 0 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid #c3c7d1;
  border-radius: 3px;
  background: #fff;
}
.ec-dd-check.on {
  border-color: #696cff;
  background: #696cff;
}
.ec-dd-check.on::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ec-dd-empty {
  padding: 9px 10px;
  font-size: 13px;
  color: #7a8191;
}
/* Live tracking's alert filter: the vehicle search box and the vehicle
   multi-select field are one control — the control is the field (1px #111,
   6px, 14px), the multi-select its chevron end. */
:where(html.pg-livetracking) .veh-filter-combo.veh-filter-combo {
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background: #fff;
}
:where(html.pg-livetracking) .veh-filter-combo.veh-filter-combo:focus-within {
  border-color: #696cff;
  box-shadow: 0 0 0 3px #ececff;
}
:where(html.pg-livetracking) .veh-filter-combo #notificationSearch {
  padding: 8px 10px;
  font-size: 16px;
  color: #2b2c40;
}
:where(html.pg-livetracking) .veh-filter-combo #notificationSearch::placeholder {
  color: #2b2c40;
  opacity: 1;
}
.veh-filter-combo input.ec-dd.ec-dd.ec-dd.ec-dd-field {
  flex: 0 0 132px;
  width: 132px;
  height: auto;
  border: 0;
  border-left: 1px solid #d4d8e2;
  border-radius: 0;
  box-shadow: none;
}
/* The alerts' type filter: the icon is the trigger (its list is the same). */
.notif-type-btn.ec-dd-host {
  cursor: pointer;
}
.notif-type-btn.ec-dd-host:focus-visible {
  outline: 2px solid #696cff;
  outline-offset: 1px;
}


/* ══════════════════════════════════════════════════════════════════════
   Outlined fields — the new UI's fields in the History / Reports format
   (owner, 2026-10-15: "this format for our new UI components too — it saves
   space"): the label sits ON the field's top border (12px / 600, the field's
   white behind it), the field is 34px, white, 1px #111 border, 6px corners,
   sans-serif — like the dropdowns (section above). Typed text stays 16px: an
   iPhone zooms into a field whose text is smaller. Service (pg-service),
   signup.html (pg-signup), school's Buses field (pg-school) and
   livetracking's Add vehicle panel; the buttons
   inside a field (scan, pen, Check, the eye) shrink to fit.
   ══════════════════════════════════════════════════════════════════════ */
:where(html.pg-signup) .sl-field,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-field {
  padding-top: 12px;
}
:where(html.pg-signup) .sl-label,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-label {
  position: relative;
  z-index: 1;
  display: table; /* block-level, as wide as its text */
  margin: 0 0 -8px 10px;
  padding: 0 4px;
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a8191;
  /* the border shows through above the line, the field's fill below it */
  background: linear-gradient(to bottom, transparent 50%, #fff 50%);
}
:where(html.pg-signup) .sl-input input,
:where(html.pg-signup) .svc-tool .sl-input-plain input,
:where(html.pg-signup) .sl-name,
:where(html.pg-signup) .svc-tool .svc-static,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input,
:where(html.pg-livetracking) #add-vehicle-sidebar .svc-tool .sl-input-plain input,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-name,
:where(html.pg-livetracking) #add-vehicle-sidebar .svc-tool .svc-static {
  box-sizing: border-box;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #2b2c40;
  box-shadow: none;
}
:where(html.pg-signup) .sl-input input:focus,
:where(html.pg-signup) .svc-tool .sl-input-plain input:focus,
:where(html.pg-signup) .sl-name:focus,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input:focus,
:where(html.pg-livetracking) #add-vehicle-sidebar .svc-tool .sl-input-plain input:focus,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-name:focus {
  border-color: #696cff;
  background: #fff;
  box-shadow: 0 0 0 3px #ececff;
}
:where(html.pg-signup) .sl-input input::placeholder,
:where(html.pg-signup) .sl-name::placeholder,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input::placeholder,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-name::placeholder {
  color: #7a8191;
}
/* Read-only values (IMEI, a SIM from the tracker): white, grey text — the
   label's white must not sit on a grey field. */
:where(html.pg-signup) .sl-input input[readonly],
:where(html.pg-signup) .svc-tool .sl-input-plain input.vt-readonly,
:where(html.pg-signup) .sl-input input.vt-readonly,
:where(html.pg-signup) .sl-input input.av-readonly,
:where(html.pg-signup) .vt-input-2btn input[readonly],
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input[readonly],
:where(html.pg-livetracking) #add-vehicle-sidebar .svc-tool .sl-input-plain input.vt-readonly,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input.vt-readonly,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input.av-readonly,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-input-2btn input[readonly] {
  background: #fff;
  color: #4b5160;
}
/* Buttons inside a field: 28px, 3px in. */
:where(html.pg-signup) .sl-input .sl-scan-btn,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input .sl-scan-btn {
  top: 3px;
  right: 3px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 14px;
}
:where(html.pg-signup) .sl-input input,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input {
  padding-right: 38px;
}
:where(html.pg-signup) .sl-input-plain input,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input-plain input {
  padding-right: 10px;
}
:where(html.pg-signup) .vt-input-2btn .vt-btn-2,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-input-2btn .vt-btn-2 {
  right: 34px;
}
:where(html.pg-signup) .vt-input-2btn input,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-input-2btn input {
  padding-right: 68px;
}
:where(html.pg-signup) .na-id-input input,
:where(html.pg-livetracking) #add-vehicle-sidebar .na-id-input input {
  padding-right: 96px;
}
:where(html.pg-signup) .na-pass-input input,
:where(html.pg-livetracking) #add-vehicle-sidebar .na-pass-input input {
  padding-right: 38px;
}
:where(html.pg-signup) .na-check-btn,
:where(html.pg-livetracking) #add-vehicle-sidebar .na-check-btn {
  top: 3px;
  right: 3px;
  min-width: 86px;
  height: 28px;
  border-radius: 6px;
}
/* The vehicle-icon chooser: the same outline. */
:where(html.pg-signup) .vt-icon-box,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box {
  min-height: 34px;
  padding: 3px 10px;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #2b2c40;
}
:where(html.pg-signup) .vt-icon-box img,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box img {
  width: 28px;
  height: 28px;
}


/* History / Reports forms: the labels on the border and the date / number
   fields beside the dropdowns, in the same new-UI palette. */
:where(html.pg-history, html.pg-report) .form-group.outlined label {
  font-family: "Poppins", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7a8191;
  background: linear-gradient(to bottom, transparent 50%, #fff 50%);
  top: -8px;
}
:where(html.pg-history, html.pg-report) .form-group.outlined input:not(.ec-dd) {
  height: 34px;
  padding: 0 10px;
  border: 1px solid #d4d8e2;
  background-color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  color: #2b2c40;
}
:where(html.pg-history, html.pg-report) .form-group.outlined input:not(.ec-dd):focus {
  border-color: #696cff;
  background-color: #fff;
  box-shadow: 0 0 0 3px #ececff;
}


/* The vehicle-icon box reads like the other fields (owner, 2026-10-15,
   Edit vehicle): the name starts where every value starts, the small picture
   sits before "Change" (a 13px brand link), and the name is in sentence case —
   the server sends "SCHOOL BUS", "Tow Truck", "car". */
:where(html.pg-signup) .vt-icon-box,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box {
  gap: 8px;
  padding: 3px 10px;
}
:where(html.pg-signup) .vt-icon-box span:first-of-type,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box span:first-of-type {
  order: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 400;
  text-transform: lowercase;
}
:where(html.pg-signup) .vt-icon-box span:first-of-type::first-letter,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box span:first-of-type::first-letter {
  text-transform: uppercase;
}
:where(html.pg-signup) .vt-icon-box img,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box img {
  order: 2;
  width: 26px;
  height: 26px;
}
:where(html.pg-signup) .vt-icon-box .vt-icon-change,
:where(html.pg-livetracking) #add-vehicle-sidebar .vt-icon-box .vt-icon-change {
  order: 3;
  font-size: 12px; /* audit NG-C3: the Settings' small button, 12 / 600 */
  font-weight: 600;
  color: #696cff;
}
/* The icon grid's names in the same case. */
.vt-icon-item.vt-icon-item span {
  text-transform: lowercase;
}
.vt-icon-item.vt-icon-item span::first-letter {
  text-transform: uppercase;
}


/* Placeholders and hints (owner, 2026-10-15: "the placeholder / hint must
   have a proper font size", then "why some text has a totally different
   size"): every text in a field or a list — value, placeholder, search box,
   row — is 16px, the new UI's input size; the hint under a field is the new
   UI's 12px grey line. */
:where(html.pg-signup) .sl-input input::placeholder,
:where(html.pg-signup) .sl-name::placeholder,
:where(html.pg-signup) .svc-tool .sl-input-plain input::placeholder,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-input input::placeholder,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-name::placeholder,
:where(html.pg-livetracking) #add-vehicle-sidebar .svc-tool .sl-input-plain input::placeholder,
.ec-dd-pop.ec-dd-pop input.ec-dd-q::placeholder {
  font-size: 16px;
  color: #7a8191;
}
/* Service / support: the field placeholders at 13px (owner, 2026-10-16:
   "reduce the font size of these placeholders") and the values at 14px,
   the bus-name / row-title size ("these also reduce size"). An iPhone
   zooms into an input whose text is under 16px; service.html's viewport
   has maximum-scale=1, which stops that zoom on this page. The public
   Create account page (signup.html) the same since 2026-10-18 (owner:
   "reduce placeholder and input text font size") — its viewport got
   maximum-scale=1 too. */
:where(html.pg-signup) .sl-input input::placeholder,
:where(html.pg-signup) .sl-name::placeholder,
:where(html.pg-signup) .svc-tool .sl-input-plain input::placeholder {
  font-size: 13px;
}
:where(html.pg-signup) .sl-input input,
:where(html.pg-signup) .svc-tool .sl-input-plain input,
:where(html.pg-signup) .sl-name,
:where(html.pg-signup) .svc-tool .svc-static,
:where(html.pg-signup) .vt-icon-box {
  font-size: 14px;
}
/* A row's bold leading part (an option's data-lead — js/ec-dropdown.js):
   the SMS command before its description (owner, 2026-10-16). */
.ec-dd-pop .ec-dd-lead {
  font-weight: 600;
  color: #2b2c40;
}
.ec-dd-pop .ec-dd-item.selected .ec-dd-lead {
  color: inherit;
}
:where(html.pg-signup) .sl-hint,
:where(html.pg-livetracking) #add-vehicle-sidebar .sl-hint {
  margin: 4px 2px 0;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #7a8191;
}


/* ══════════════════════════════════════════════════════════════════════
   Next-gen UI audit 2026-10-15 (the audit file is gone: git show
   c0460d4:plans/audit-nextgen-ui-2026-10-15.md) —
   the items shared by school, service and support.
   ══════════════════════════════════════════════════════════════════════ */
/* audit NG-X5: no sliding panels or fading toasts for people who turned
   motion off. */
@media (prefers-reduced-motion: reduce) {
  .notification-sidebar,
  .geofence-sidebar,
  .account-sidebar,
  .edit-device-sidebar,
  .sidebar,
  .simpleToast,
  .ec-dd-pop,
  .follow-btn,
  .follow-btn::after,
  .switch-track,
  .switch-thumb {
    transition: none !important;
    animation: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   Icon tiles — a tick box on every vehicle-icon tile (owner, 2026-10-15:
   "each icon box must have a checkbox that tells the user the icon is
   selected … like before"). The new-UI pickers (.vt-icon-item: service Edit
   vehicle and New account + vehicle, signup.html, livetracking Add vehicle)
   get the box of the old Vehicle settings picker (.dp-icon-radio): 18px, 2px
   grey edge, 4px corners at the top right; chosen (.on) = brand fill with a
   white tick (the tick image is in icons.css).
   ══════════════════════════════════════════════════════════════════════ */
.vt-icon-item.vt-icon-item {
  position: relative;
}
.vt-icon-item.vt-icon-item::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: 2px solid #c9c9c9;
  border-radius: 4px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  pointer-events: none;
}
.vt-icon-item.vt-icon-item.on::before {
  border-color: #696cff;
  background-color: #696cff;
}


/* ══════════════════════════════════════════════════════════════════════
   Utilities — the pages' former static style="" attributes, one
   declaration per class (u-<property>-<value>). Unscoped: the names are
   unique. display stays inline in the markup (JS show / hide state).
   The few marked !important beat a more specific page rule on their element,
   exactly as the inline attribute did (no script sets those properties on
   those elements).
   ══════════════════════════════════════════════════════════════════════ */
.u-ai-center {
  align-items: center;
}
.u-ai-flex-start {
  align-items: flex-start;
}
.u-bd-1-solid-red {
  border: 1px solid red !important;
}
.u-c-007bff {
  color: #007bff;
}
.u-c-696cff {
  color: #696cff;
}
.u-c-9aa0a6 {
  color: #9aa0a6;
}
.u-c-green {
  color: green !important;
}
.u-c-red {
  color: red !important;
}
.u-cur-pointer {
  cursor: pointer;
}
.u-flex-0-0-auto {
  flex: 0 0 auto;
}
.u-flex-1 {
  flex: 1;
}
.u-fs-12 {
  font-size: 12px;
}
.u-fs-15 {
  font-size: 15px;
}
.u-fs-1_6vh {
  font-size: 1.6vh;
}
.u-fs-24 {
  font-size: 24px !important;
}
.u-fs-29 {
  font-size: 29px !important;
}
.u-fs-xx-large {
  font-size: xx-large;
}
.u-fw-wrap {
  flex-wrap: wrap;
}
.u-gap-10 {
  gap: 10px;
}
.u-gap-6 {
  gap: 6px;
}
.u-gap-8 {
  gap: 8px;
}
.u-jc-flex-start {
  justify-content: flex-start;
}
.u-left-10 {
  left: 10px;
}
.u-mb-0 {
  margin-bottom: 0;
}
.u-mb-15 {
  margin-bottom: 15px;
}
.u-mb-17 {
  margin-bottom: 17px;
}
.u-minw-0 {
  min-width: 0;
}
.u-ml-10 {
  margin-left: 10px;
}
.u-ml-5 {
  margin-left: 5px;
}
.u-mr-10 {
  margin-right: 10px;
}
.u-offscreen {
  position: fixed;
  left: -9999px;
}
.u-mt-10 {
  margin-top: 10px;
}
.u-mt-4 {
  margin-top: 4px;
}
.u-mt-6 {
  margin-top: 6px;
}
.u-mt-8 {
  margin-top: 8px;
}
.u-ox-auto {
  overflow-x: auto;
}
.u-oy-auto {
  overflow-y: auto;
}
.u-p-10 {
  padding: 10px;
}
.u-pl-6 {
  padding-left: 6px;
}
.u-pos-absolute {
  position: absolute;
}
.u-pos-relative {
  position: relative;
}
.u-pr-30 {
  padding-right: 30px;
}
.u-right-6 {
  right: 6px;
}
.u-ta-center {
  text-align: center;
}
.u-td-none {
  text-decoration: none;
}
.u-top-175 {
  top: 175px;
}
.u-top-215 {
  top: 215px;
}
.u-top-255 {
  top: 255px;
}
.u-top-295 {
  top: 295px;
}
.u-top-335 {
  top: 335px;
}
.u-top-375 {
  top: 375px;
}
.u-top-415 {
  top: 415px;
}
.u-top-455 {
  top: 455px;
}
.u-top-495 {
  top: 495px;
}
.u-top-6 {
  top: 6px;
}
.u-w-97pct {
  width: 97%;
}
.u-w-auto {
  width: auto !important;
}