/* 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 "Poppins",
    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: 14px;
  }
}
/* 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: 700;
  line-height: 1;
  font-family: "Poppins", 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: 14px;
  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: 12px;
  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: "Poppins", 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: 13px;
  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: 12px;
  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: 12px;
  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: 12px;
  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: 12px;
}
: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: 11px;
  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;
}

/* Alerts per vehicle (owner, 2026-11-06): the "Choose vehicles" row under
   "All vehicles" and its tick list (js/script.js initAlertVehicles). */
:where(html.pg-livetracking) .alert-vehicles-row[hidden],
:where(html.pg-livetracking) .alert-vehicles-panel[hidden]{
  display: none;
}
:where(html.pg-livetracking) .alert-vehicles-btn{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  background: #fff;
  color: #384551;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
:where(html.pg-livetracking) .alert-vehicles-btn #alertVehiclesSummary{
  flex: 1;
}
:where(html.pg-livetracking) .alert-vehicles-btn.open .alert-vehicles-caret{
  transform: rotate(180deg);
}
:where(html.pg-livetracking) .alert-vehicles-panel{
  margin: 4px 0 8px;
  padding: 8px;
  border: 1px solid #e4e6e8;
  border-radius: 8px;
  background: #fafbfc;
}
:where(html.pg-livetracking) .alert-vehicles-search{
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #d9dee3;
  border-radius: 6px;
  font-size: 13px;
}
:where(html.pg-livetracking) .alert-vehicles-actions{
  display: flex;
  gap: 8px;
  margin: 6px 0;
}
:where(html.pg-livetracking) .alert-vehicles-actions button{
  flex: 1;
  min-height: 30px;
  border: 1px solid #d9dee3;
  border-radius: 6px;
  background: #fff;
  color: #696cff;
  font-size: 13px;
  cursor: pointer;
}
:where(html.pg-livetracking) .alert-vehicles-list{
  max-height: 240px;
  overflow-y: auto;
}
:where(html.pg-livetracking) .alert-vehicle{
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 4px;
  font-size: 13px;
  cursor: pointer;
}
:where(html.pg-livetracking) .alert-vehicle input{
  width: 17px;
  height: 17px;
  accent-color: #696cff;
  flex-shrink: 0;
}
:where(html.pg-livetracking) .alert-vehicle-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-livetracking) .alert-vehicles-note,
:where(html.pg-livetracking) .alert-vehicles-empty{
  margin: 6px 0 0;
  color: #8592a3;
  font-size: 12px;
  line-height: 1.4;
}

:where(html.pg-livetracking) .checkbox-label{
  display: flex;
  align-items: center;
  font-size: 14px;
  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: 14px;
  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: 13px;
  font-weight: 700;
  color: #111827;
}
:where(html.pg-livetracking) .notif-popup .np-event{
  display: block;
  font-size: 11px;
  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: "Poppins", 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: 14px;
              }
              :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: 13px;
                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. Sticky inside the panel's scroll
         box, beside the title (2026-11-11: it was position:fixed from the
         iframe days, so in-page it sat at the window's top right over the
         map). The negative bottom margin takes it out of the flow. */
      :where(html.pg-livetracking) #edit-device-sidebar .dp-sidebar-close{
        position: sticky;
        top: 10px;
        align-self: flex-end;
        flex-shrink: 0;
        margin: 10px 12px -40px 0;
        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;
      }
      /* One panel, two Settings screens (owner, 2026-11-11): Vehicle settings
         (data-dp-mode="vehicle") and Live tracking link ("link"), set by
         script.js openEditDeviceModal. No mode = everything, as before. */
      :where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode="vehicle"] .dp-link-only,
      :where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode="link"] .dp-vehicle-only{
        display: none;
      }
      :where(html.pg-livetracking) #edit-device-sidebar:not([data-dp-mode="link"]) h2.dp-link-only{
        display: none;
      }
      /* 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: 14px;
      }
      :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: 14px;
        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: 14px;
        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: 12px;
      }
      :where(html.pg-livetracking) #edit-device-sidebar .dp-link-badge{
        padding: 1px 7px;
        border-radius: 999px;
        font-size: 11px;
        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: 12px;
        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: "Poppins", 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-535 {
  top: 535px;
}
.u-top-575 {
  top: 575px;
}
.u-top-615 {
  top: 615px;
}
.u-top-655 {
  top: 655px;
}
.u-top-695 {
  top: 695px;
}
.u-top-735 {
  top: 735px;
}
.u-top-775 {
  top: 775px;
}
.u-top-815 {
  top: 815px;
}
.u-top-855 {
  top: 855px;
}
.u-top-6 {
  top: 6px;
}
.u-w-97pct {
  width: 97%;
}
.u-w-auto {
  width: auto !important;
}


/* ═══════════════════════ Regular new UI (owner, 2026-11-07) ═══════════════════════
   The school / service design (css/school-service.css: the shared and school rules),
   copied for the regular pages and scoped to html.pg-livetracking — the same look,
   its own copy (owner: school-service.css stays school / service only; no rule here
   reaches school.html or service.html, which do not load this file). Left out: the
   phone frame (desktop / landscape), the after-hours card, the school tab bar.
   Then the shell: five tabs, bottom bar / Sneat left menu, full-screen map. */

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 "Poppins",
    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;
}

: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;
}

: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;
}

: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;
}

/* 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;
}

: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;
}

: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: 700;
  line-height: 1;
  font-family: "Poppins", 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: 14px;
  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: 12px;
  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: "Poppins", 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: 13px;
  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: 12px;
  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: 12px;
  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: 12px;
  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: 12px;
}

: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;
}

/* audit SSU-14: the old technician rail's rules (.findVehicleButton,
   .smsButton, .scanListButton … .settingButton) were removed 2026-10-22 — the
   tools are rows in the tab panels and those classes are on no element. */
:where(html.pg-livetracking) .reloadPage{
  bottom: 10px;
}

/* Red "Alert" card (showAlertToast) — same look as the popup pages' toast */
:where(html.pg-livetracking) #alertToastHost{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(350px, calc(100vw - 32px));
}

:where(html.pg-livetracking) .alert-toast{
  position: relative;
  background: #ff3e1d;
  color: #fff;
  padding: 12px 40px 12px 16px;
  border-radius: 10px;
  min-width: 250px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  font-size: 15px;
  line-height: 1.4;
}

:where(html.pg-livetracking) .alert-toast strong{
  display: block;
  margin-bottom: 4px;
}

:where(html.pg-livetracking) .alert-toast .x{
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
}

/* Find Vehicle: inline browser camera scanner */
:where(html.pg-livetracking) .fv-scan-wrap{
  display: none;
  margin: 0 0 12px;
}

:where(html.pg-livetracking) .fv-scan-wrap.active{
  display: block;
}

:where(html.pg-livetracking) #fvScanVideo{
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 40vh;
  object-fit: cover;
  background: #000;
  border: 2px solid #8592a3;
  border-radius: 10px;
}

:where(html.pg-livetracking) .fv-scan-hint{
  font-size: 13px;
  color: #6b7280;
  margin: 8px 0 10px;
}

: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: 11px;
  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;
}

: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;
}

: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: 14px;
  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: 14px;
  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: 13px;
  font-weight: 700;
  color: #111827;
}

:where(html.pg-livetracking) .notif-popup .np-event{
  display: block;
  font-size: 11px;
  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;
}

/* Quiet state (service card "Power / GPS / SOS: No Alert"): grey. */
:where(html.pg-livetracking) .chip.chip-quiet{
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}

:where(html.pg-livetracking) .chip.chip-quiet i{
  color: #6b7280;
}

: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) .static-field{
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 14px;
  color: #555;
  cursor: default;
  -webkit-user-select: text;
  user-select: text;
  text-align: start;
}

: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;
}

/* Find Vehicle: section heading rows ("IMEI", "Vehicle number") — the
   separator between the two result groups; not a pick. */
:where(html.pg-livetracking) .vehicle-list li.fv-head{
  cursor: default;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #696cff;
  background: #eef1ff;
  border-top: 2px solid #c7d2fe;
  border-bottom: 1px solid #ddd;
}

:where(html.pg-livetracking) .vehicle-list li.fv-head:first-child{
  border-top: none;
}

:where(html.pg-livetracking) .vehicle-list li.fv-head:hover{
  background: #eef1ff;
}

:where(html.pg-livetracking) .vehicle-error{
  font-size: 14px;
  display: none;
  color: red;
  text-align: center;
  margin-top: 5px;
}

:where(html.pg-livetracking) .sms-chatbox{
  list-style: none;
  padding: 10px;
  max-height: 150px;
  overflow-y: auto;
}

:where(html.pg-livetracking) .sms-message{
  max-width: 70%;
  padding: 8px;
  margin: 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  word-break: break-word;
}

:where(html.pg-livetracking) .sms-sent{
  background-color: #d4f7d4;
  margin-left: auto;
  text-align: left;
}

:where(html.pg-livetracking) .sms-received{
  background-color: lightcyan;
  margin-right: auto;
  text-align: left;
}

:where(html.pg-livetracking) .sms-message span.sms-meta{
  font-size: 8px;
  color: #555;
  margin-top: 4px;
  align-self: flex-start;
}

: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;
}

: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;
}

/* My account (owner, 2026-10-16): a letter avatar beside the name.
   audit SU-6: sizes and colours from the --fs-* / --c-* tokens. */
:where(html.pg-livetracking) .my-account-head .st-tx > span{
  font-size: var(--fs-dialog);
  font-weight: 700;
  color: var(--c-title);
}

:where(html.pg-livetracking) .my-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: var(--fs-title);
  font-weight: 700;
}

:where(html.pg-livetracking) #myAccountId{
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-small);
  color: var(--c-text);
  user-select: text;
  -webkit-user-select: text;
}

/* More Settings rows (owner, 2026-10-16 — from the Live Tracking URL page):
   the device id in a mono face, the storage bar, the value badges. */
:where(html.pg-livetracking) .st-tx small.dev-id{
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: var(--fs-small);
  color: var(--c-text);
  word-break: break-all;
  user-select: text;
  -webkit-user-select: text;
}

:where(html.pg-livetracking) .dev-bar{
  display: block;
  width: 100%;
  max-width: 180px;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--c-line);
  overflow: hidden;
}

:where(html.pg-livetracking) .dev-bar[hidden]{
  display: none;
}

:where(html.pg-livetracking) .dev-bar > span{
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-brand);
}

:where(html.pg-livetracking) .dev-badge{
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--c-fill);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 600;
  white-space: nowrap;
}

/* 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;
}

: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;
}

@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) .sms-chatbox{
    max-height: 300px;
  }
  :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;
}

/* 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;
}

/* 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: "Poppins", 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: 14px;
              }

: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: 13px;
                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);
              }

/* ══ School page (school.html) ══ audit S-U0: this block used to sit in the
   middle of the tracking-page rules, so the generic :where(html.pg-tracking)
   rules after it — the portrait block, the pager, the geofence icon colours —
   won at equal specificity: on a real phone the school look was partly undone
   (panel titles 16px, the modal scrim, toasts …) while the desktop phone frame
   showed it. It is now the LAST tracking-page section, so the school look is
   the same at every size. Keep it last. */
/* School: bottom tab bar (owner design, 2026-10-08) — five tabs, icon over
   label, the active one in brand purple with a short bar above it. The map
   (and everything positioned inside it: rail, sidebars, bus card) gives up the
   bar's height so nothing sits under it.
   No env(safe-area-inset-bottom) here, as on livetracking: the Android and iOS
   apps already keep the WebView clear of the nav bar / home indicator, so
   adding the inset again left a blank strip under the tabs. */
:root:where(.pg-livetracking){
  --school-tabbar-h: 56px; /* NG-X1 (the inset) reverted 2026-10-15: the note above */
  /* Type scale (typography audit 2026-10-13; the audit file is gone, see
     git c0460d4): six sizes, two line heights, three text colours. */
  --fs-title: 18px;   /* panel titles, status-guide title */
  --fs-dialog: 16px;  /* dialog titles; inputs (16px: no iPhone zoom) */
  --fs-name: 14px;    /* bus name, row / item titles, primary buttons */
  --fs-body: 13px;    /* messages, empty states, toasts */
  --fs-small: 12px;   /* captions, counts, addresses, times, small buttons */
  --fs-chip: 11px;    /* chips, tags, tab labels, section captions */
  --lh-tight: 1.3;    /* titles, chips */
  --lh-text: 1.45;    /* sentences and captions */
  --c-title: #2b2c40;
  --c-text: #4b5160;
  --c-muted: #7a8191;
  /* audit SU-6: the palette as tokens (same values as service's). */
  --c-brand: #696cff;
  --c-brand-tint: #ececff;
  --c-danger: #d64545;
  --c-danger-tint: #fdecec;
  --c-line: #e6e8ef;
  --c-fill: #f1f2f7; /* grey fill: chips, badges */
  --ls-caps: 0.04em;  /* upper-case labels only */
}

:where(html.pg-livetracking) #map{
  height: calc(100% - var(--lt-tabbar-h));
}

/* School: the rail shell that script.js still binds to (see school.html) is
   never shown, and the 3D-terrain control (added by script.js at map init) is
   not offered — js/school.js also keeps terrain off. */
:where(html.pg-livetracking) #side-menu,
:where(html.pg-livetracking) .maplibregl-ctrl-group:has(.maplibregl-ctrl-terrain),
:where(html.pg-livetracking) .maplibregl-ctrl-group:has(.maplibregl-ctrl-terrain-enabled),
:where(html.pg-livetracking) .maplibregl-ctrl-terrain,
:where(html.pg-livetracking) .maplibregl-ctrl-terrain-enabled{
  display: none;
}

/* School: My Geofence sits ON TOP of the draw control (house → polygon →
   delete, one block like the zoom group); ETA and Traffic are separate buttons
   below the stack. The draw control is the stack's last group: on school it
   gets room above it (its 10px gap + 32px) and the house, which is positioned
   from --app-btn-base (= the stack's bottom + 10px, measured by script.js), is
   placed at the top of that room: draw group 62px tall, so its top is
   base - 72 and the house goes at base - 104. When the draw control is absent
   (it comes and goes with the geofence list) the house stands alone at base. */
:where(html.pg-livetracking) .maplibregl-ctrl-group:has(.mapbox-gl-draw_polygon){
  margin-top: 42px !important;
  border-radius: 0 0 6px 6px !important;
}

:where(html.pg-livetracking) #map:has(.mapbox-gl-draw_polygon) .my-geofence-button{
  top: calc(var(--app-btn-base) - 104px) !important;
  /* The line under the house like the one between polygon and delete (owner,
     2026-10-17: "why do my geofence buttons look odd"): the shared rule's 1px
     #ddd bottom border met the 2px brand sides in slanted corners, edge to
     edge; drawn inside the border instead, it is straight and inset like the
     draw group's own divider. */
  border-bottom: 0 !important;
  box-shadow: inset 0 -1px 0 #ddd;
}

:where(html.pg-livetracking) #map:not(:has(.mapbox-gl-draw_polygon)) .my-geofence-button{
  top: var(--app-btn-base) !important;
  border-bottom: 2px solid var(--c-brand) !important;
  border-radius: 6px !important;
}

/* The maplibre groups are 33px wide (29px button + 2px border each side):
   the three app buttons match, so the column shares one left edge. */
:where(html.pg-livetracking) .my-geofence-button,
:where(html.pg-livetracking) .ETAButton,
:where(html.pg-livetracking) .traffic{
  width: 33px;
}

:where(html.pg-livetracking) #map:has(.mapbox-gl-draw_polygon) .ETAButton{
  top: var(--app-btn-base) !important;
}

:where(html.pg-livetracking) #map:has(.mapbox-gl-draw_polygon) .traffic{
  top: calc(var(--app-btn-base) + 42px) !important;
}

:where(html.pg-livetracking) #map:not(:has(.mapbox-gl-draw_polygon)) .ETAButton{
  top: calc(var(--app-btn-base) + 42px) !important;
}

:where(html.pg-livetracking) #map:not(:has(.mapbox-gl-draw_polygon)) .traffic{
  top: calc(var(--app-btn-base) + 84px) !important;
}

/* ── School panels: one standard header, close button, search field and
   pager across Vehicles / Geofences / Notifications / Settings (owner,
   2026-10-09). Layout only: the elements, ids and handlers are the app's. ── */
:root:where(.pg-livetracking){
  --school-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M416 208c0 45.9-14.9 88.3-40 122.7l126.6 126.7c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208M208 352a144 144 0 1 0 0-288a144 144 0 1 0 0 288'/%3E%3C/svg%3E");
}

/* Header: 18px bold title with its glyph, a hairline under the head instead of
   the blue underline — the same sticky head on all four panels (Vehicles'
   title and buttons moved into one on 2026-10-13). */
:where(html.pg-livetracking) .notif-sticky-head{
  padding: 14px 48px 10px 0;
  margin: 0 -15px 6px;
  padding-left: 15px;
  border-bottom: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .notif-sticky-head h2{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--c-title);
  border-bottom: 0;
}

:where(html.pg-livetracking) .notif-sticky-head h2 i{
  color: var(--c-brand);
  font-size: var(--fs-title);
  margin: 0;
}

/* Close: just the cross, no circle (owner), level with the title. The search
   button beside it (Vehicles, Geofences) is the same kind of plain glyph. */
:where(html.pg-livetracking) .notification-sidebar-close-button,
:where(html.pg-livetracking) .geofence-sidebar-close-button,
:where(html.pg-livetracking) #sidebar-left .sidebar-close-btn{
  top: 2px; /* centred on the title's letters, not its line box (owner, 2026-10-13) */
  right: 6px;
  width: 40px; /* a thumb-sized target (audit S-U18) */
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--c-danger); /* close is red (owner, 2026-10-12) */
  font-size: var(--fs-title) !important;
  border: 0;
  border-radius: 8px;
}

:where(html.pg-livetracking) .school-search-btn,
:where(html.pg-livetracking) #sidebar-left .school-search-btn{
  right: 46px !important;
  font-size: var(--fs-dialog) !important; /* the id rule above made the Vehicles one 18px (audit S-U19) */
}

:where(html.pg-livetracking) .notification-sidebar-close-button:hover,
:where(html.pg-livetracking) .geofence-sidebar-close-button:hover,
:where(html.pg-livetracking) #sidebar-left .sidebar-close-btn:hover{
  background: var(--c-danger-tint);
  color: var(--c-danger);
}

/* …but the search buttons sharing those classes stay neutral (brand while
   the search field is open). */
:where(html.pg-livetracking) .school-search-btn,
:where(html.pg-livetracking) .school-search-btn:hover,
:where(html.pg-livetracking) #sidebar-left .school-search-btn,
:where(html.pg-livetracking) #sidebar-left .school-search-btn:hover{
  background: transparent;
  color: var(--c-text);
}

:where(html.pg-livetracking) .school-search-btn.is-on,
:where(html.pg-livetracking) #sidebar-left .school-search-btn.is-on{
  color: var(--c-brand);
}

/* The search field shows only while its button is on (or a search is typed). */
:where(html.pg-livetracking) .vehicle-search-wrapper:not(.is-open),
:where(html.pg-livetracking) .geofences-search-wrapper:not(.is-open){
  display: none;
}

/* The panels scroll like a phone: no visible scrollbar (the close button used
   to sit over it on a desktop). */
:where(html.pg-livetracking) .route-list{
  scrollbar-width: none;
}

:where(html.pg-livetracking) .route-list::-webkit-scrollbar{
  display: none;
}

/* Search: a rounded field with the search glyph on the left and the clear
   button on the right. */
:where(html.pg-livetracking) .vehicle-search-wrapper,
:where(html.pg-livetracking) .geofences-search-wrapper{
  position: relative;
  padding: 4px 0 12px;
}

:where(html.pg-livetracking) .vehicle-search-wrapper::before,
:where(html.pg-livetracking) .geofences-search-wrapper::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 15px;
  width: 15px;
  height: 15px;
  background: #9aa3af;
  -webkit-mask: var(--school-search-icon) center / contain no-repeat;
  mask: var(--school-search-icon) center / contain no-repeat;
  pointer-events: none;
}

:where(html.pg-livetracking) #vehicleSearch,
:where(html.pg-livetracking) #geofenceSearch{
  width: 100% !important;
  box-sizing: border-box;
  padding: 10px 40px 10px 38px !important;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-size: var(--fs-dialog);
  color: var(--c-title);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

:where(html.pg-livetracking) #vehicleSearch:focus,
:where(html.pg-livetracking) #geofenceSearch:focus{
  border-color: var(--c-brand);
  background: #fff;
}

:where(html.pg-livetracking) .clear-search-btn{
  right: 12px;
  top: 12px;
  color: #9aa3af;
  font-size: 15px;
}

/* Cards on the other panels look like the Settings cards (owner): white,
   1px #e6e8ef border, 16px corners, no shadow; the parent's chosen bus and
   the tapped notification get the brand border and tint. */
:where(html.pg-livetracking) .vehicleList{
  border: 1px solid #e6e8ef;
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: none;
}

:where(html.pg-livetracking) .vehicleList:hover{
  border-color: #d4d8e2;
  box-shadow: none;
}

/* The picked bus wears a "Selected" ribbon on its top-right corner. */
:where(html.pg-livetracking) #showVehicleList .vehicleList{
  position: relative;
  overflow: hidden;
}

:where(html.pg-livetracking) #showVehicleList .vehicleList.school-my-bus::before{
  content: "Selected";
  position: absolute;
  top: 0;
  right: 14px;
  padding: 3px 10px 4px;
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-chip);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: var(--lh-tight); /* audit SU-6: was 1.2 */
  border-radius: 0 0 8px 8px;
  pointer-events: none;
}

/* "Show on map" chip across the bottom of every bus card (js/school.js). */
:where(html.pg-livetracking) #showVehicleList .vehicleList{
  cursor: default;
}

/* …a chip in the card's chip row (owner: the full-width button made the cards
   too big), on bus cards and notification cards alike. */
:where(html.pg-livetracking) .school-show-map{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: auto;
  height: 28px; /* one size on bus, alert and geofence cards (audit S-U16) */
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--c-fill);
  color: var(--c-brand);
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

:where(html.pg-livetracking) .school-show-map i{
  font-size: var(--fs-small);
}

:where(html.pg-livetracking) #showVehicleList .vehicleList{
  padding: 10px 12px;
}

:where(html.pg-livetracking) .school-show-map:active{
  background: #e4e6ee;
}

/* The notification card tapped last: brand border and tint (the ticks mark
   the selection for "Clear selected"). */
:where(html.pg-livetracking) #notificationList .notification-item.school-hl{
  border-color: var(--c-brand);
  background-color: #f6f6ff;
  box-shadow: none; /* like the chosen bus / geofence card (audit S-U31) */
}

/* The card tint follows the parent's chosen bus, not script.js's internal
   selection (always set, defaults to the first bus). */
:where(html.pg-livetracking) #showVehicleList .vehicleList.selected{
  border-color: var(--c-line);
  background-color: #fff;
  box-shadow: none;
}

:where(html.pg-livetracking) #showVehicleList .vehicleList.school-my-bus{
  border-color: var(--c-brand);
  background-color: #f6f6ff;
}

/* Notification list: the action row under the count line (Mark all seen /
   Clear selected / Clear all) in the chip family; each card carries a tick
   box (for Clear selected) and a "Show on map" chip. */
:where(html.pg-livetracking) .school-notif-actions{
  display: flex;
  flex-wrap: wrap; /* four buttons once a card is selected: they take two rows */
  gap: 5px;
  margin: 0 0 10px;
}

:where(html.pg-livetracking) .school-notif-actions[hidden],
:where(html.pg-livetracking) .school-notif-actions button[hidden]{
  display: none;
}

:where(html.pg-livetracking) .school-notif-actions button{
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: var(--c-fill);
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

:where(html.pg-livetracking) .school-notif-actions button i{
  font-size: var(--fs-chip);
}

:where(html.pg-livetracking) #schoolNotifClearSel,
:where(html.pg-livetracking) #schoolNotifClearAll{
  color: var(--c-danger);
}

:where(html.pg-livetracking) #schoolNotifUncheck{
  color: var(--c-brand);
}

/* Notification cards stay short: tighter padding, and "Show on map" is a
   chip in the chip row, not a full-width button. */
:where(html.pg-livetracking) #notificationList .notification-item{
  cursor: default;
  padding: 9px 12px 10px;
  margin-bottom: 10px;
  border-color: var(--c-line);
  border-radius: 16px; /* the card shell of every other list (audit S-U11) */
  box-shadow: none;
  /* No coloured left edge (owner): script.js sets it inline per event, so
     !important; the event's colour stays on the icon disc and the title. */
  border-left: 1px solid var(--c-line) !important;
}

:where(html.pg-livetracking) #notificationList .notification-item.school-hl{
  border-left-color: var(--c-brand) !important;
}

:where(html.pg-livetracking) #notificationList .notification-item .vehicle-header{
  min-height: 0;
  padding-right: 96px; /* room for the pinned Seen / NEW pill (11 px now) and the tick */
  gap: 8px;
}

/* Compact card (owner: "reduce the notification card size"): smaller icon
   disc, 13 / 12 px head text, tighter divider and chip row, 11 px chips. */
:where(html.pg-livetracking) #notificationList .notification-item .vehicle-logo,
:where(html.pg-livetracking) #notificationList .notification-item .da-alert-icon{
  width: 30px;
  height: 30px;
  font-size: var(--fs-body);
}

:where(html.pg-livetracking) #notificationList .notification-item .vehicle-info strong{
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
}

:where(html.pg-livetracking) #notificationList .notification-item .notification-title{
  font-size: var(--fs-small);
}

:where(html.pg-livetracking) #notificationList .notification-item .notification-body{
  gap: 4px;
  margin-top: 4px;
}

:where(html.pg-livetracking) #notificationList .notification-item .notif-chip{
  font-size: var(--fs-chip);
  padding: 2px 7px;
}

/* A geofence stands in for the address (owner): when the card has a
   geofence-place chip (📌 name), the street-address chip is not shown. The
   info bar already does the same ("At <geofence>", script.js). */
:where(html.pg-livetracking) #notificationList .notification-body:has(.address-chip .fa-thumbtack) .address-chip:not(:has(.fa-thumbtack)){
  display: none;
}

/* The address is one line with the "…" expand button the info card has; a
   geofence chip takes its own width, the address grows; an expanded address
   takes the full row. */
:where(html.pg-livetracking) #notificationList .notification-item .detail-item.address-chip{
  width: auto;
  flex: 1 1 120px;
  min-width: 0;
  padding: 3px 9px;
}

:where(html.pg-livetracking) #notificationList .notification-item .detail-item.address-chip:has(.fa-thumbtack){
  flex: 0 1 auto;
}

:where(html.pg-livetracking) #notificationList .notification-item .address-chip .address-text{
  -webkit-line-clamp: 1;
}

:where(html.pg-livetracking) #notificationList .notification-item .address-chip.addr-expanded{
  flex: 1 1 100%;
}

:where(html.pg-livetracking) #notificationList .notification-item .address-chip.addr-expanded .address-text{
  -webkit-line-clamp: unset;
}

:where(html.pg-livetracking) #notificationList .notification-item .address-chip.addr-overflow{
  padding-right: 26px;
}

:where(html.pg-livetracking) #notificationList .notification-item .addr-expand-btn{
  top: 2px;
  right: 3px;
  width: 18px;
  height: 18px;
}

/* Seen / NEW pill and the tick box: small, pinned to the card's top-right
   (owner); the text underneath never runs under them. */
:where(html.pg-livetracking) #notificationList .notification-item{
  position: relative;
}

:where(html.pg-livetracking) #notificationList .notification-item .notif-seen-tag{
  position: absolute;
  top: 10px;
  right: 36px;
  margin: 0;
  padding: 2px 6px;
  font-size: var(--fs-chip);
  line-height: var(--lh-tight); /* audit SU-6: was 1.2 */
  border-radius: 6px;
  letter-spacing: normal;
}

:where(html.pg-livetracking) #notificationList .notification-item .school-pick{
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 0;
  padding: 0;
}

:where(html.pg-livetracking) #notificationList .notification-item .school-pick .school-fav-box{
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

:where(html.pg-livetracking) #notificationList .notification-item .school-pick input:checked + .school-fav-box::after{
  left: 5.5px;
  top: 2.5px;
  width: 4px;
  height: 8px;
}

:where(html.pg-livetracking) #notificationList .notification-item .divider{
  margin: 6px 0;
}

:where(html.pg-livetracking) #notificationList .notification-item .school-fav{
  padding: 0 0 0 8px;
}

/* Tick box (js/school.js adds it to each notification card's head; bus
   cards have none — a tap chooses the bus). */
:where(html.pg-livetracking) .vehicle-header{
  align-items: center;
}

:where(html.pg-livetracking) .school-fav{
  margin: 0 0 0 auto;
  padding: 6px 0 6px 8px;
  display: flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  cursor: pointer;
}

:where(html.pg-livetracking) .school-fav input{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* A light square tick (owner: "square, not round"): 22 px, 6 px corners,
   1.5 px grey ring, brand fill with a white check when on. */
:where(html.pg-livetracking) .school-fav-box{
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 1.5px solid #c9cdd8;
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}

:where(html.pg-livetracking) .school-fav:hover .school-fav-box{
  border-color: var(--c-brand);
}

:where(html.pg-livetracking) .school-fav input:checked + .school-fav-box{
  background: var(--c-brand);
  border-color: var(--c-brand);
}

:where(html.pg-livetracking) .school-fav input:checked + .school-fav-box::after{
  content: "";
  position: absolute;
  left: 7px;
  top: 3.5px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The chosen card's ribbon gets its own strip above the head. */
:where(html.pg-livetracking) #showVehicleList .vehicleList.school-my-bus{
  padding-top: 24px;
}

/* No outer card around the lists (owner): the vehicle, geofence and
   notification cards sit straight on the panel. #showVehicleList carries the
   .vehicleList class itself, so it is reset here before the per-card rule. */
:where(html.pg-livetracking) #showVehicleList,
:where(html.pg-livetracking) .geofence-list,
:where(html.pg-livetracking) .notification-list{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  cursor: default;
  min-height: 0;
}

:where(html.pg-livetracking) #showVehicleList:hover,
:where(html.pg-livetracking) .geofence-list:hover,
:where(html.pg-livetracking) .notification-list:hover{
  border: 0;
  box-shadow: none;
}

:where(html.pg-livetracking) #geofenceList .geofence-item{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

:where(html.pg-livetracking) #geofenceList .geofence-item.active{
  background: #f6f6ff;
  border-color: var(--c-brand);
}

/* Empty states (audit S-U21): a plain card with secondary text, like the
   cards around them — not the old grey dashed box. */
:where(html.pg-livetracking) .no-vehicles-message{
  margin: 0 0 10px;
  padding: 16px 14px;
  border: 1px dashed #d4d8e2;
  border-radius: 16px;
  background: #fff;
  color: var(--c-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  text-align: center;
}

/* …and the rest of each panel follows the Settings pattern too (owner: "all
   UI must follow the same pattern"): section captions, white cards with
   hairline rows, icon tiles, switches. */
/* Geofences: the "Show all on map" switch is a row of the Settings → Location
   card (school.html); the panel is the list card plus a plain-text empty
   state. */
/* Each geofence: its name on one line, then its five actions as labelled
   chips (the vehicle card's chip row, sized for a thumb). The labels come from
   CSS so script.js's builder is untouched; the two toggles read their state
   from the item class (.hidden-on-map) and the bell icon. */
/* The card is a row: the map snap (72 px, rounded) on the left, the name and
   the chips on the right — like the trip cards (owner, 2026-10-09). */
:where(html.pg-livetracking) #geofenceList .geofence-item{
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(html.pg-livetracking) .geofence-item .geo-thumb{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #e9ecf2;
  border: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .geofence-item .geo-thumb canvas{
  display: block;
  width: 72px;
  height: 72px;
}

:where(html.pg-livetracking) .geofence-item .geofence-row{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

:where(html.pg-livetracking) .geofence-item .geofence-name{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
  margin: 0;
}

/* Count line over the list: the notification panel's "n notifications · today". */
:where(html.pg-livetracking) .school-geo-status{
  font-size: var(--fs-small);
  color: var(--c-muted);
  margin: 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html.pg-livetracking) .geofence-item .geofence-button-group{
  display: flex;
  flex-wrap: wrap; /* five chips beside the snap: two rows (owner) */
  gap: 5px;
  margin: 0;
}

/* The chips stay small and share the rows (they grow to fill each row). */
:where(html.pg-livetracking) .geofence-item .geofence-button-group button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px;
  background: var(--c-fill) !important;
  color: var(--c-text);
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex: 1 1 auto; /* content width first, spare room shared — no clipped label */
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
}

:where(html.pg-livetracking) .geofence-item .geofence-button-group button i{
  font-size: var(--fs-chip);
}

/* "1. Name" — the serial number js/school.js stamps on the item. */
:where(html.pg-livetracking) .geofence-item .geofence-name[data-sr]::before{
  content: attr(data-sr) ".";
  color: var(--c-muted);
  font-weight: 600;
  flex-shrink: 0;
}

:where(html.pg-livetracking) .geofence-item .geofence-name[data-sr]{
  gap: 6px;
}

/* Every school geofence is private by design, so the badge says nothing. */
:where(html.pg-livetracking) .geofence-item .geo-badge{
  display: none;
}

:where(html.pg-livetracking) .geofence-item .geofence-vis-btn::after{ content: "Hide"; }

:where(html.pg-livetracking) .geofence-item.hidden-on-map .geofence-vis-btn::after{ content: "Show"; }

:where(html.pg-livetracking) .geofence-item .edit-geofence-btn::after{ content: "Rename"; }

:where(html.pg-livetracking) .geofence-item .delete-geofence-btn::after{ content: "Delete"; }

:where(html.pg-livetracking) .geofence-item .geofence-notif-btn::after{ content: "Alerts"; }

:where(html.pg-livetracking) .geofence-item .geofence-notif-btn:has(.fa-bell-slash)::after{ content: "Muted"; }

:where(html.pg-livetracking) .geofence-item .geofence-button-group .school-show-map{
  color: var(--c-brand);
}

/* Delete reads red (owner); the chip rule above would otherwise win. */
:where(html.pg-livetracking) .geofence-item .geofence-button-group .delete-geofence-btn,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .delete-geofence-btn:hover,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .delete-geofence-btn i{
  color: #d64545;
}

/* Bus status guide viewer (Settings → Help → View): full screen inside #map
   (so it stays in the phone frame on a desktop), over the panels; the header
   follows the panel heads; the image scrolls and zooms (js/school.js). */
:where(html.pg-livetracking) .school-viewer{
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: #fff;
}

:where(html.pg-livetracking) .school-viewer[hidden]{
  display: none;
}

:where(html.pg-livetracking) .school-viewer-bar{
  display: flex;
  align-items: center;
  gap: 6px;
  /* the panel headers' measure (owner, 2026-10-16: "a little vertically
     big"): 14px above, a 45px bar — the title and × level with Settings' */
  height: 45px;
  padding: 14px 6px 0 15px;
  box-sizing: content-box;
  border-bottom: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .school-viewer-bar b{
  flex: 1;
  min-width: 0;
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--c-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(html.pg-livetracking) .school-viewer-zoom{
  /* plain glyphs, a little smaller (owner, 2026-10-16: "remove the grey
     background from plus and minus, a little smaller") — 32px, the tap area
     still comfortable */
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-size: var(--fs-title); /* audit SU-6: was 17px, off the scale */
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

:where(html.pg-livetracking) .school-viewer-zoom:hover{
  background: var(--c-fill);
}

:where(html.pg-livetracking) .school-viewer-level{
  min-width: 40px;
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

:where(html.pg-livetracking) .school-viewer-close{
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-danger); /* close is red (owner, 2026-10-12) */
  font-size: var(--fs-title);
  cursor: pointer;
}

:where(html.pg-livetracking) .school-viewer-body{
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y; /* one finger pans; the pinch is ours (js) */
  background: #f7f8fb;
}

:where(html.pg-livetracking) .school-viewer-body img{
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Popups (owner: "correct all popups"): one look for the in-page modals
   (#deleteModal, #mapDeleteModal, #renameModal, #saveGeofenceModal,
   #signOutModal), the confirm dialog (showConfirmDialog) and
   the toasts — centred on the screen, the Settings-card look, brand buttons
   with Cancel on the left. script.js shows a modal with display:block, so the
   card centres itself instead of relying on the overlay's flex. ── */
:where(html.pg-livetracking) .modal-popup{
  padding: 0;
  background: rgba(16, 18, 32, 0.45);
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 320px;
  max-height: calc(100% - 40px);
  margin: 0;
  padding: 22px 18px 18px;
  box-sizing: border-box;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  text-align: left;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content > *{
  flex: 1 1 100%;
  min-width: 0;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content h3{
  margin: 0 0 4px;
  font-size: var(--fs-dialog);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-title);
  text-align: left;
}

/* Sign out: the sign-out artwork, centred between the question and the
   buttons (owner, 2026-10-15). The shared rule hides .modal-illustration
   everywhere but service; this one shows it here. */
:where(html.pg-livetracking) #signOutModal .modal-illustration{
  display: block;
  flex: 1 1 100%; /* its own row: the buttons stay on the line below */
  width: 100%;
  height: 130px;
  object-fit: contain;
  margin: 2px 0 8px;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content .input-field{
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-size: var(--fs-dialog);
  color: var(--c-title);
  outline: none;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content .input-field:focus{
  border-color: var(--c-brand);
  background: #fff;
}

/* The buttons share one row (a .modal-actions wrapper joins the same row). */
:where(html.pg-livetracking) .modal-popup .modal-popup-content .modal-actions{
  display: contents;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content .modal-btn{
  order: 2; /* the buttons close the card, Cancel (order 1) on the left */
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  margin: 6px 0 0;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-name);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content .modal-btn:hover{
  background: #5f62f2;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content .cancel-btn,
:where(html.pg-livetracking) .modal-popup .modal-popup-content .cancel-btn:hover{
  order: 1;
  background: var(--c-fill);
  color: var(--c-text);
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content #confirmDeleteBtn,
:where(html.pg-livetracking) .modal-popup .modal-popup-content #confirmMapDeleteBtn,
:where(html.pg-livetracking) .modal-popup .modal-popup-content #confirmSignOutBtn{
  background: var(--c-danger);
}

/* showConfirmDialog's box: the same card and button row. */
:where(html.pg-livetracking) body > .cd-overlay{
  background: rgba(16, 18, 32, 0.45);
}

:where(html.pg-livetracking) .cd-overlay .cd-box{
  width: calc(100% - 40px);
  max-width: 320px;
  box-sizing: border-box;
  padding: 22px 18px 18px;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.25);
  font-family: inherit;
}

:where(html.pg-livetracking) .cd-overlay .cd-title{
  font-size: var(--fs-dialog);
  color: var(--c-title);
  margin-bottom: 6px;
  line-height: var(--lh-tight);
}

:where(html.pg-livetracking) .cd-overlay .cd-message{
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: var(--lh-text);
}

:where(html.pg-livetracking) .cd-overlay .cd-actions{
  gap: 10px;
}

:where(html.pg-livetracking) .cd-overlay .cd-cancel,
:where(html.pg-livetracking) .cd-overlay .cd-ok{
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: var(--fs-name);
  font-weight: 600;
}

:where(html.pg-livetracking) .cd-overlay .cd-cancel{
  border: 0;
  background: var(--c-fill);
  color: var(--c-text);
}

/* Toasts: as wide as their text, never wider than the screen. */
:where(html.pg-livetracking) .simpleToast{
  width: auto;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  border-radius: 12px;
  font-size: var(--fs-body);
  text-align: center;
  line-height: var(--lh-text);
}

/* Pagers: pill buttons, muted "Page n of m"; js/school.js hides a geofence
   pager with a single page (the notification pager already omits itself). */
:where(html.pg-livetracking) .geofence-pagination,
:where(html.pg-livetracking) .notif-pager{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}

:where(html.pg-livetracking) .geofence-pagination button,
:where(html.pg-livetracking) .notif-pager .notif-page-btn{
  min-width: 34px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: 10px; /* the small-button radius (audit S-U17) */
  background: #fff;
  color: var(--c-text);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

:where(html.pg-livetracking) .geofence-pagination button:hover:not(:disabled),
:where(html.pg-livetracking) .notif-pager .notif-page-btn:hover:not(:disabled){
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: #fff;
}

:where(html.pg-livetracking) .notif-pager .notif-page-btn.active{
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

:where(html.pg-livetracking) .geofence-pagination button:disabled{
  opacity: 0.4;
  cursor: default;
}

:where(html.pg-livetracking) .geofence-pagination .geo-page-info{
  font-size: var(--fs-small);
  color: var(--c-muted);
}

:where(html.pg-livetracking) .geofence-pagination.is-single{
  display: none;
}

/* Settings tab content (layout from plans/school-ui-example): section
   captions, white cards, one row per setting — icon tile, text + caption, and
   the control on the right. The controls themselves are the app's own
   (.switch, .icon-button, .notif-status-value, .notif-status-fix). */
:where(html.pg-livetracking) #settingsContent{
  padding-bottom: 10px;
}

:where(html.pg-livetracking) .st-sect{
  font-size: var(--fs-chip);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--c-muted);
  margin: 14px 4px 6px;
}

:where(html.pg-livetracking) .st-card{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 2px 14px;
  margin-bottom: 10px;
}

:where(html.pg-livetracking) .st-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .st-row:last-child,
:where(html.pg-livetracking) .st-row:not(:has(~ .st-row:not([style*="display: none"]))){
  border-bottom: 0; /* the second: the last row still showing (browser-only
                       rows hidden in the app, School rows with no value) */
}

:where(html.pg-livetracking) .st-ic{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
  font-size: var(--fs-dialog);
  flex-shrink: 0;
}

:where(html.pg-livetracking) .st-tx{
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: var(--fs-name);
  color: var(--c-title);
}

:where(html.pg-livetracking) .st-tx small{
  display: block;
  font-weight: 400;
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-text);
}

/* The shared .notif-status-row padding (8px 12px) put the Permission pill 12px
   short of the switches above it; the row follows .st-row here. The page's own
   Allow button replaces script.js's Fix button on this row. */
:where(html.pg-livetracking) #settingsContent .notif-status-row{
  padding: 11px 0;
  justify-content: normal;
  flex-wrap: nowrap;
  min-height: 0;
}

:where(html.pg-livetracking) #statusNotifPermissionFix,
:where(html.pg-livetracking) #statusLocPermissionFix,
:where(html.pg-livetracking) #locationStatus .st-hidden{
  display: none !important;
}

:where(html.pg-livetracking) #settingsContent .notif-status-right{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%; /* the pill inside wraps within this, never past the card */
}

:where(html.pg-livetracking) #settingsContent .notif-status-right .notif-status-value{
  max-width: 100%;
}

:where(html.pg-livetracking) #settingsContent .notif-status-value{
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: var(--lh-tight);
  border-radius: 12px;
  padding: 3px 10px;
  max-width: 55%; /* a long value ("Blocked — allow in browser settings") wraps instead of covering its label */
  text-align: right;
  background: #eceef3;
  color: var(--c-text); /* was #566, a green-grey (audit S-U35) */
}

:where(html.pg-livetracking) #settingsContent .notif-status-value[data-state="ok"]{
  background: #dff7ef;
  color: #14916f;
}

:where(html.pg-livetracking) #settingsContent .notif-status-value[data-state="warn"]{
  background: #fff1dc;
  color: #c97400;
}

:where(html.pg-livetracking) #settingsContent .notif-status-fix{
  border: 0;
  background: var(--c-brand);
  color: #fff;
  border-radius: 10px;
  min-height: 28px; /* was 20px tall (audit S-U18) */
  padding: 4px 12px;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}

:where(html.pg-livetracking) .switch input:disabled + .switch-track{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Every switch looks like the map card's Follow switch (owner): a 34 × 18
   track, lavender off / brand on with a soft glow, 14 px white knob. */
:where(html.pg-livetracking) .switch-track{
  box-sizing: border-box;
  width: 34px;
  height: 18px;
  padding: 1px;
  border: 1px solid #c7d2fe;
  border-radius: 9px;
  background: #c7d2fe;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

:where(html.pg-livetracking) .switch-thumb{
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}

:where(html.pg-livetracking) .switch input:checked + .switch-track{
  background: var(--c-brand);
  border-color: var(--c-brand);
  box-shadow: 0 2px 6px rgba(105, 108, 255, 0.45);
}

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

:where(html.pg-livetracking) .st-link{
  text-decoration: none;
  color: inherit;
}

:where(html.pg-livetracking) .st-chev{
  color: #c3c7d1;
  font-size: var(--fs-small);
}

/* audit SU-12: .st-link-off removed — a row with nothing to open is hidden. */
:where(html.pg-livetracking) .st-powered{
  display: block;
  padding: 10px 0 4px;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-decoration: none;
  border-top: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .st-powered[hidden]{
  display: none; /* display:block above beat [hidden]: "Powered by" with no name (audit S-X29) */
}

:where(html.pg-livetracking) .st-powered b{
  color: var(--c-title);
  font-weight: 600;
}

:where(html.pg-livetracking) .st-btn{
  border: 0;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border-radius: 10px; /* the small-button radius (audit S-U17) */
  min-height: 32px;
  padding: 7px 13px;
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
}

:where(html.pg-livetracking) .st-brand{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .st-brand:not(:has(~ .st-row:not([style*="display: none"]))){
  border-bottom: 0; /* the school gave no phone, email or website */
}

:where(html.pg-livetracking) .st-logo{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--c-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
  overflow: hidden;
}

:where(html.pg-livetracking) .st-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

:where(html.pg-livetracking) .st-signout{
  width: 100%;
  margin-top: 6px;
  border: 1.5px solid var(--c-danger); /* the page's one danger red (audit S-U8) */
  background: #fff;
  color: var(--c-danger);
  border-radius: 12px; /* the primary-button radius (audit S-U17) */
  padding: 11px;
  font-weight: 600;
  font-size: var(--fs-name);
  cursor: pointer;
}

/* The Settings panel: the geofence list's right-panel shell, reused as is. */
:where(html.pg-livetracking) .settings-sidebar{
  transition: transform 1s;
  z-index: 10;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

:where(html.pg-livetracking) #sidebar-left,
:where(html.pg-livetracking) #geofence-sidebar,
:where(html.pg-livetracking) #settings-sidebar,
:where(html.pg-livetracking) #notification-sidebar{
  z-index: 12;
}

/* ── Consistency (audit 2026-10-12, S-U…): one name size on the bus cards,
   one hairline, neutral chip icons, one red, the brand instead of the blue,
   and toasts above the tab bar, clear of the panel heads. ── */
:where(html.pg-livetracking) #showVehicleList .vehicle-info strong,
:where(html.pg-livetracking) #showSingleVehicle .vehicle-info strong{
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
}

:where(html.pg-livetracking) .divider{
  border-top-color: var(--c-line); /* was silver, darker than every other hairline (S-U12) */
}

:where(html.pg-livetracking) .geofence-item .geofence-button-group button i,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .geo-ic-blue.geo-ic-blue,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .geo-ic-green.geo-ic-green,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .geo-ic-gray.geo-ic-gray,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .geo-ic-muted.geo-ic-muted{
  color: inherit; /* one colour per chip: neutral, Delete red, Show on map brand (S-U15) */
}

:where(html.pg-livetracking) .notif-seen-tag.is-new{
  background-color: var(--c-danger); /* was orangered (S-U36) */
}

:where(html.pg-livetracking) .notif-seen-tag.is-seen{
  color: var(--c-muted); /* audit SU-6: was the tracking pages' #8a9099 */
}

:where(html.pg-livetracking) .notif-source{
  display: none; /* every school row is live: the bolt mark said nothing (S-U33) */
}

:where(html.pg-livetracking) .ETA-label{
  color: var(--c-brand); /* brand, not the fleet blue (S-U9) */
}

:where(html.pg-livetracking) .eta-flip{
  border-color: #d4d5fb;
  background: var(--c-brand-tint);
  color: var(--c-brand);
}

:where(html.pg-livetracking) .eta-flip:hover{
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}

/* Toasts sit just above the tab bar (S-U2, S-U3, S-U23): at the top they
   covered the panel title and its close button, and the alert toast slid
   under an open panel on a phone. */
:where(html.pg-livetracking) .simpleToast,
:where(html.pg-livetracking) .toast{
  top: auto;
  bottom: calc(var(--lt-tabbar-h) + 12px);
  z-index: 45; /* over the panels (10-25) and the tab bar (30) */
}

/* The message toast is full width, lined up with the bus card / closed
   card under it (8px each side; owner, 2026-10-15: "toast full width with
   proper margin"); the phone-frame column has its own rule further down. */
:where(html.pg-livetracking) .simpleToast{
  left: 8px;
  right: 8px;
  width: auto;
  max-width: none;
  transform: none;
}

:where(html.pg-livetracking) .toast{
  left: 12px;
  right: 12px;
  width: auto;
  max-width: none;
  border-radius: 16px;
}

:where(html.pg-livetracking) .toast .text-1{
  font-size: var(--fs-name); /* was 12px / 10px on a phone (S-U39) */
  font-weight: 600;
  color: var(--c-title);
}

:where(html.pg-livetracking) .toast .text-2{
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-text);
}

/* The alert popup in the school look (owner, 2026-10-12): a Settings-style
   card, the event in an icon tile (like the Settings rows) in the bus card's
   status colours, the panels' red close, a thin colour bar. */
:where(html.pg-livetracking) .toast{
  padding: 12px 44px 14px 12px;
  border: 1px solid var(--c-line);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.22);
}

:where(html.pg-livetracking) .toast .text-1{
  line-height: 1.35;
  margin-bottom: 2px;
}

:where(html.pg-livetracking) .toast .icon{
  min-width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 17px;
  color: var(--c-brand);
  background: var(--c-brand-tint);
}

:where(html.pg-livetracking) .toast .icon.status-running,
:where(html.pg-livetracking) .toast .icon.status-moving,
:where(html.pg-livetracking) .toast .icon.geofence-entry{
  color: #1a7f37;
  background: rgba(26, 127, 55, 0.12);
}

:where(html.pg-livetracking) .toast .icon.status-idle{
  color: #b35900;
  background: rgba(179, 89, 0, 0.12);
}

:where(html.pg-livetracking) .toast .icon.status-stopped,
:where(html.pg-livetracking) .toast .icon.geofence-exit{
  color: var(--c-danger);
  background: rgba(214, 69, 69, 0.12);
}

:where(html.pg-livetracking) .toast .icon.status-parked,
:where(html.pg-livetracking) .toast .icon.status-waiting{
  color: #6f42c1;
  background: rgba(111, 66, 193, 0.12);
}

:where(html.pg-livetracking) .toast .close,
:where(html.pg-livetracking) .toast .close:hover{
  /* audit SU-10: a <button> now (keyboard, "Close" label) holding the ×
     glyph; the glyph is a mask over its own box (icons.css), so the button
     is only its 16px box, no button chrome. */
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--c-danger);
}

:where(html.pg-livetracking) .toast .close i{
  width: 16px;
  height: 16px;
  font-size: var(--fs-dialog);
  vertical-align: top;
}

:where(html.pg-livetracking) .toast .close:focus-visible{
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* audit SU-10: the Follow switch (a role="switch" check box on school) can
   be reached and switched with a keyboard — the box itself is hidden only
   visually, and the drawn switch shows the focus. */
:where(html.pg-livetracking) .follow-toggle .follow-radio{
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

:where(html.pg-livetracking) .follow-radio:focus-visible + .follow-btn{
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

:where(html.pg-livetracking) .toast .progress{
  left: 14px;
  right: 14px;
  bottom: 6px;
  width: auto;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
}

:where(html.pg-livetracking) .toast .progress:before{
  border-radius: 3px;
  background-color: var(--c-brand);
}

:where(html.pg-livetracking) .toast.status-running .progress:before,
:where(html.pg-livetracking) .toast.status-moving .progress:before,
:where(html.pg-livetracking) .toast.geofence-entry .progress:before{
  background-color: #1a7f37;
}

:where(html.pg-livetracking) .toast.status-idle .progress:before{
  background-color: #b35900;
}

:where(html.pg-livetracking) .toast.status-stopped .progress:before,
:where(html.pg-livetracking) .toast.geofence-exit .progress:before{
  background-color: var(--c-danger);
}

:where(html.pg-livetracking) .toast.status-parked .progress:before,
:where(html.pg-livetracking) .toast.status-waiting .progress:before{
  background-color: #6f42c1;
}

/* Over the bus card (js/school.js sets left / width / bottom / min-height /
   corners from the card): the card is fully covered, so it needs no blur
   (owner, 2026-10-12). The content sits in the middle of the card's height. */
:where(html.pg-livetracking) .toast.on-card{
  right: auto;
  transform: none;
  box-sizing: border-box;
  max-width: none;
  border: 2px solid var(--c-brand); /* the bus card's own edge */
}

:where(html.pg-livetracking) .toast.on-card.active{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Its head, like the bus card (js/school.js): the bus picture on a white tile,
   the bus name, the alert as the card's coloured status chip. */
:where(html.pg-livetracking) .toast .icon.toast-veh-pic{
  background: #fff;
  border: 1px solid var(--c-line);
}

:where(html.pg-livetracking) .toast .icon.toast-veh-pic img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

:where(html.pg-livetracking) .toast .text-1 .toast-veh{
  display: block;
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
}

:where(html.pg-livetracking) .toast .text-1 .toast-type{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 2px;
  font-size: var(--fs-chip);
  font-weight: 600;
  text-transform: uppercase;
}

/* The "Editing shape" bar: inside the map box like the other dialogs (it was
   fixed to the window, 94vw wide — past the phone frame on a desktop), in the
   brand and the dialogs' button shapes, not the fleet blue (owner, 2026-10-12). */
:where(html.pg-livetracking) .geofence-edit-bar{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  transform: none;
  max-width: none;
  z-index: 40;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 8px 10px;
  border-color: var(--c-line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
}

:where(html.pg-livetracking) .geofence-edit-bar .geofence-edit-label{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-title);
  font-size: var(--fs-name);
}

:where(html.pg-livetracking) .geofence-edit-bar .geofence-edit-label i{
  color: var(--c-brand);
}

:where(html.pg-livetracking) .geofence-edit-bar .modal-btn{
  flex: 0 0 auto;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--c-brand);
  color: #fff;
  font-size: var(--fs-name);
  font-weight: 600;
}

:where(html.pg-livetracking) .geofence-edit-bar .modal-btn:hover{
  background: #5f62f2;
}

:where(html.pg-livetracking) .geofence-edit-bar .cancel-btn,
:where(html.pg-livetracking) .geofence-edit-bar .cancel-btn:hover{
  background: var(--c-fill);
  color: var(--c-text);
}

/* An alert's map popup (Show on map): compact — the bus, the alert, the place
   and the time (owner, 2026-10-12); the panels' red close. */
:where(html.pg-livetracking) .maplibregl-popup-content:has(.notif-popup){
  padding: 10px 26px 10px 11px;
  border-radius: 14px;
}

:where(html.pg-livetracking) .maplibregl-popup-content:has(.notif-popup) .maplibregl-popup-close-button{
  top: 4px;
  right: 4px;
  color: var(--c-danger);
  font-size: var(--fs-dialog);
}

:where(html.pg-livetracking) .notif-popup{
  min-width: 0;
  max-width: 240px;
  font-size: var(--fs-small);
  text-align: left; /* the map popups are centred for everyone else */
}

/* The alert and its time share one row: "Arrived at geofence · 06:04 pm". */
:where(html.pg-livetracking) .notif-popup .np-meta{
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  column-gap: 8px;
  white-space: nowrap;
}

:where(html.pg-livetracking) .notif-popup .np-time{
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-muted);
  white-space: nowrap;
}

:where(html.pg-livetracking) .notif-popup .np-time i{
  font-size: var(--fs-chip); /* audit SU-6: was 10.5px */
}

:where(html.pg-livetracking) .notif-popup .np-head{
  padding: 0 0 6px 8px;
  margin-bottom: 6px;
  border-bottom-color: var(--c-line);
}

:where(html.pg-livetracking) .notif-popup .np-vehicle{
  font-size: var(--fs-name);
  color: var(--c-title);
}

:where(html.pg-livetracking) .notif-popup .np-event{
  font-size: var(--fs-small);
}

:where(html.pg-livetracking) .notif-popup .np-body{
  gap: 4px;
}

:where(html.pg-livetracking) .notif-popup .chip,
:where(html.pg-livetracking) .notif-popup .detail-item.address-chip{
  font-size: var(--fs-chip);
  padding: 3px 8px;
  margin: 0;
}

:where(html.pg-livetracking) .notif-popup .address-chip .address-text{
  -webkit-line-clamp: 2;
}

/* ── Type scale on the shared components (typography audit 2026-10-13):
   every chip 11 / 600 (the colour classes keep their colours), the GPS / LBS
   badge and FOLLOW 11 px (were 10), addresses 11 px in the text colour (were
   pure black), the alert count line in the muted grey. ── */
:where(html.pg-livetracking) .chip,
:where(html.pg-livetracking) .loc-source{
  font-size: var(--fs-chip);
  font-weight: 600;
  line-height: var(--lh-tight);
}

:where(html.pg-livetracking) .chip{
  color: var(--c-text);
}

:where(html.pg-livetracking) .follow-hint{
  font-size: var(--fs-chip);
  letter-spacing: var(--ls-caps);
  color: var(--c-muted); /* was #a7acb2 (new-UI audit 2026-10-15, row 4) */
}

/* The bus card's chips in the new UI's status colours (new-UI audit
   2026-10-15, row 2 — they were the old Bootstrap shades): ok #14916f on
   #dff7ef, warn #c97400 on #fff1dc, bad #d64545 on #fdecec, brand #696cff on
   #ececff, neutral #7a8191 on #f1f2f7. The Follow switch itself stays: the
   school's switches are drawn after it (owner). */
:where(html.pg-livetracking) .chip,
:where(html.pg-livetracking) .detail-item.address-chip{
  background: var(--c-fill);
}

:where(html.pg-livetracking) .chip i{
  color: var(--c-muted);
}

:where(html.pg-livetracking) .status-chip.st-running,
:where(html.pg-livetracking) .status-chip.st-moving,
:where(html.pg-livetracking) .chip.chip-on,
:where(html.pg-livetracking) .loc-source.loc-gps{
  color: #14916f;
  background: #dff7ef;
}

:where(html.pg-livetracking) .status-chip.st-idle,
:where(html.pg-livetracking) .loc-source.loc-lbs{
  color: #c97400;
  background: #fff1dc;
}

:where(html.pg-livetracking) .status-chip.st-waiting,
:where(html.pg-livetracking) .status-chip.st-parked{
  color: var(--c-brand);
  background: var(--c-brand-tint);
}

:where(html.pg-livetracking) .status-chip.st-stopped,
:where(html.pg-livetracking) .chip.chip-off,
:where(html.pg-livetracking) .chip.chip-alert{
  color: var(--c-danger);
  background: var(--c-danger-tint);
}

:where(html.pg-livetracking) .status-chip.st-inactive,
:where(html.pg-livetracking) .status-chip.st-other,
:where(html.pg-livetracking) .chip.chip-quiet{
  color: var(--c-muted);
  background: var(--c-fill);
}

:where(html.pg-livetracking) .chip.chip-on i,
:where(html.pg-livetracking) .chip.chip-off i,
:where(html.pg-livetracking) .chip.chip-alert i,
:where(html.pg-livetracking) .chip.chip-quiet i{
  color: inherit;
}

/* audit SU-12: the .chip-batt-* selectors (school shows no battery chip)
   and .chip.chip-param (produced nowhere) removed; chip-quiet stays. */
:where(html.pg-livetracking) .detail-item.address-chip,
:where(html.pg-livetracking) .address-chip .address-text{
  font-size: var(--fs-chip); /* 12 read too big in the cards (owner, 2026-10-13): the chips' 11 */
  line-height: var(--lh-tight);
  color: var(--c-text);
}

:where(html.pg-livetracking) #daStatus{
  font-size: var(--fs-small);
  color: var(--c-muted);
}

/* The house button's "Save this place" dialog (js/school.js): a note, field
   labels, the size slider beside its number box; size-only mode (the card's
   size chip) hides the name. */
:where(html.pg-livetracking) .modal-popup .modal-popup-content .school-geo-details-note{
  margin: -4px 0 2px;
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  color: var(--c-muted);
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content .school-field-label{
  margin: 4px 0 -4px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-title);
}

:where(html.pg-livetracking) .school-radius-row{
  display: flex;
  align-items: center;
  gap: 10px;
}

:where(html.pg-livetracking) .school-radius-row input[type="range"]{
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  margin: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
}

:where(html.pg-livetracking) .school-radius-box{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-text);
}

:where(html.pg-livetracking) .school-radius-box input{
  width: 84px;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #f7f8fb;
  font-size: var(--fs-dialog); /* 16px: no iPhone zoom */
  color: var(--c-title);
  text-align: right;
  outline: none;
}

:where(html.pg-livetracking) .school-radius-box input:focus{
  border-color: var(--c-brand);
  background: #fff;
}

:where(html.pg-livetracking) .school-radius-box input.is-invalid{
  border-color: var(--c-danger);
}

:where(html.pg-livetracking) #schoolGeoDetailsModal.is-size-only .school-name-part{
  display: none;
}

:where(html.pg-livetracking) .modal-popup .modal-popup-content #schoolGeoDetailsSave:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Bus card minimise (js/school.js): a grab bar on top of the card, like the
   Live Tracking URL page; minimised = picture, name, status and Follow only. */
:where(html.pg-livetracking) .singleVehicleNew .sheet-handle{
  display: block;
  width: 96px;
  height: 14px;
  margin: -4px auto 2px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none; /* the swipe is ours, not a page scroll */
  -webkit-tap-highlight-color: transparent;
}

:where(html.pg-livetracking) .singleVehicleNew .sheet-handle::before{
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: 0 auto;
  border-radius: 2px;
  background: #d4d8e2;
  transition: background-color 0.15s ease, width 0.15s ease;
}

:where(html.pg-livetracking) .singleVehicleNew .sheet-handle:hover::before,
:where(html.pg-livetracking) .singleVehicleNew .sheet-handle:focus-visible::before{
  background: var(--c-muted);
  width: 56px;
}

:where(html.pg-livetracking) .singleVehicleNew.is-collapsed .sheet-handle::before{
  width: 60px;
}

:where(html.pg-livetracking) .singleVehicleNew.is-collapsed .divider,
:where(html.pg-livetracking) .singleVehicleNew.is-collapsed .vehicle-details,
:where(html.pg-livetracking) .singleVehicleNew.is-collapsed #vehicleDetailsContent{
  display: none !important; /* school.js shows #vehicleDetailsContent inline */
}

/* The Alerts type filter: the chip family's 10px grey button, not a bordered
   6px box (S-U19). */
:where(html.pg-livetracking) .notif-type-btn{
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--c-fill);
}

/* School: a phone layout at every size. Every panel — vehicle list, geofences,
   notifications, settings — takes the full width of the map box, edge to edge,
   and so does the bus card (8px in). On a phone the map box is the screen; on
   a desktop it is the 30%-wide phone column below. Declared AFTER the portrait
   block above (whose .left / .right rules would otherwise re-apply the 4px /
   -4px resting offsets) and with !important against the 450px block's widths.
   The open / closed slide (.left.collapsed / .right.collapsed) is untouched. */
:where(html.pg-livetracking) .sidebar,
:where(html.pg-livetracking) .notification-sidebar,
:where(html.pg-livetracking) .geofence-sidebar,
:where(html.pg-livetracking) .settings-sidebar{
  width: 100% !important;
  max-width: none !important;
}

:where(html.pg-livetracking) .left{
  left: 0 !important;
  transform: none !important;
}

:where(html.pg-livetracking) .left.collapsed{
  transform: translateX(-200%) !important;
}

:where(html.pg-livetracking) .right{
  right: 0 !important;
  transform: none !important;
}

:where(html.pg-livetracking) .right.collapsed{
  transform: translateX(200%) !important;
}

/* The panels themselves are transparent; the white box inside is 97% wide
   and centred, which left a strip of map down each edge. Edge to edge too. */
:where(html.pg-livetracking) .sidebar .sidebar-content,
:where(html.pg-livetracking) .notification-sidebar .sidebar-content,
:where(html.pg-livetracking) .geofence-sidebar .sidebar-content,
:where(html.pg-livetracking) .settings-sidebar .sidebar-content{
  width: 100%;
  left: 0;
  right: 0;
  border-left: 0;
  border-right: 0;
}

:where(html.pg-livetracking) .singleVehicleNew{
  width: calc(100% - 16px) !important;
  max-width: none;
  box-sizing: border-box;
}

:where(html.pg-livetracking) .no-vehicles-message .fa-moon{
  margin-right: 4px;
  color: var(--c-brand);
}

/* 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;
}

/* ══════════════════════════════════════════════════════════════════════
   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-C5: one switch tone — off = the line grey, on = brand (the map
   card's Follow and every Settings switch; was lavender #c7d2fe off).
   audit SU-4: school and service / support only — unscoped, these also
   restyled Live Tracking's switches (regular accounts). :where() keeps the
   (0,2,0) weight, so school and service look exactly as before. */
:where(html.pg-livetracking) .follow-btn.follow-btn,
:where(html.pg-livetracking) .switch-track.switch-track {
  background: #d4d8e2;
  border-color: #d4d8e2;
}

:where(html.pg-livetracking) .follow-radio:checked + .follow-btn.follow-btn,
:where(html.pg-livetracking) .switch input:checked + .switch-track.switch-track {
  background: var(--c-brand);
  border-color: var(--c-brand);
}

/* audit NG-C6: school's header buttons on the tiles' corner. audit SU-4:
   page-scoped — unscoped, it turned Live Tracking's round close button
   (livetracking.html #sidebarCloseBtn) into a rounded square. */
:where(html.pg-livetracking) .sidebar-close-btn.sidebar-close-btn,
:where(html.pg-livetracking) #schoolVehSearchBtn,
:where(html.pg-livetracking) #schoolGeoSearchBtn {
  border-radius: 10px;
}

@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* audit NG-U4: a permission state is a status, not a button — plain toned
   text; the Allow buttons stay buttons. */
:where(html.pg-livetracking) .notif-status-value {
  padding: 0 !important; /* the pages' own ID-scoped pill rules */
  background: none !important;
  border-radius: 0;
  font-size: 12px !important;
  font-weight: 600;
}

/* audit NG-U9: ONE alert card on school, service and support — a white
   16px card (no coloured left edge: the tone is the icon tile and the
   title), the event first (14 / 600, toned), the vehicle under it (12 / 400
   muted), the details as plain 12px text, "Show on map" a small brand
   button, the tick box the icon tiles' box. script.js builds the markup
   unchanged. */
:where(html.pg-livetracking) #notificationList .notification-item {
  position: relative;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--c-line) !important; /* the inline left edge colour */
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

:where(html.pg-livetracking) #notificationList .notification-item.notif-unseen {
  background: #f9f9ff;
}

:where(html.pg-livetracking) #notificationList .vehicle-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 32px; /* the tick box */
}

:where(html.pg-livetracking) #notificationList .da-alert-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 15px;
}

:where(html.pg-livetracking) #notificationList .vehicle-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 6px;
}

:where(html.pg-livetracking) #notificationList .vehicle-info br {
  display: none;
}

/* The event first on its own line (14 / 600, toned); the vehicle and its
   source mark together under it (12 / 400 muted). */
:where(html.pg-livetracking) #notificationList .notification-title {
  order: 1;
  flex: 1 1 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

:where(html.pg-livetracking) #notificationList .vehicle-info strong {
  order: 2;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-muted);
}

:where(html.pg-livetracking) #notificationList .vehicle-info .notif-source {
  order: 3;
  margin-left: 0;
}

:where(html.pg-livetracking) #notificationList .notif-seen-tag {
  margin-left: auto;
  flex: 0 0 auto;
}

:where(html.pg-livetracking) #notificationList .divider {
  display: none;
}

:where(html.pg-livetracking) #notificationList .notification-body.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 8px;
}

:where(html.pg-livetracking) #notificationList .notification-body .chip.notif-chip,
:where(html.pg-livetracking) #notificationList .notification-body .detail-item.address-chip {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-text);
  color: var(--c-text);
}

:where(html.pg-livetracking) #notificationList .notification-body .chip.notif-chip i {
  font-size: var(--fs-chip);
  color: var(--c-muted);
}

:where(html.pg-livetracking) #notificationList .notification-body .detail-item.address-chip {
  flex: 1 1 100%;
}

/* School: the tick is the icon tiles' check (icons.css), centred in the box —
   the border-drawn tick sat low-right inside the 2px border — and the box is
   centred on the Seen chip beside it (owner, 2026-10-15: "checkbox need
   correct"). */
:where(html.pg-livetracking) #notificationList .notification-item .school-pick {
  top: 10px;
}

:where(html.pg-livetracking) #notificationList .notification-item .school-pick input:checked + .school-fav-box::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  transform: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}

/* School's only dropdown (the Alerts type filter): its list rows at the
   alert card's text size, 13px, not the shared 16px (owner, 2026-10-15:
   "they look bigger"). The search box's typed text stays 16px (no iPhone
   zoom); its placeholder follows the rows. */
:where(html.pg-livetracking) .ec-dd-pop .ec-dd-item {
  padding: 8px 10px;
  font-size: 13px;
}

:where(html.pg-livetracking) .ec-dd-pop .ec-dd-empty,
:where(html.pg-livetracking) .ec-dd-pop input.ec-dd-q::placeholder {
  font-size: var(--fs-body);
}

/* The Alerts panel's Buses field (owner, 2026-10-15: buses first, then
   types): the outlined field over the count line, shown only when another
   bus has alerts today. */
:where(html.pg-livetracking) .school-bus-field{
  margin: 0 0 6px;
}

:where(html.pg-livetracking) .school-bus-field[hidden]{
  display: none;
}

/* its value at the inputs' 16px, like every field value (audit SU-7; was
   14px) */
:where(html.pg-livetracking) input.ec-dd.ec-dd.ec-dd.ec-dd-field,
:where(html.pg-livetracking) input.ec-dd.ec-dd.ec-dd.ec-dd-field::placeholder{
  font-size: var(--fs-dialog);
}

/* ── Regular new UI: the shell (owner, 2026-11-07) ─────────────────────────
   Five tabs (js/livetracking-ui.js). A phone held upright: the school-style
   bottom bar. A desktop or a phone on its side: a Sneat-style left menu
   (logo, icon + label rows, folds to icons — html.lt-nav-folded) and the map
   on the rest of the screen — full screen, never the school / service phone
   frame. The old icon rail (#side-menu) stays in the page for script.js, never
   shown. */
:root:where(.pg-livetracking){
  --lt-tabbar-h: 56px;
  --lt-menu-w: 232px;
  --lt-menu-folded-w: 72px;
  --lt-menu-x: 0px;           /* the map's left edge (the menu's width when shown) */
  --lt-bottom: var(--lt-tabbar-h); /* what the bottom bar takes */
}
:where(html.pg-livetracking) #side-menu{
  display: none !important;
}
:where(html.pg-livetracking) #map{
  position: fixed;
  top: 0;
  left: var(--lt-menu-x);
  right: 0;
  bottom: var(--lt-bottom);
  width: auto;
  height: auto;
}
/* the screens that open over the map fill it (Dashboard, History, Reports) */
:where(html.pg-livetracking) #dashboardModal,
:where(html.pg-livetracking) #mapHistoryModal,
:where(html.pg-livetracking) #ReportModal{
  position: absolute;
  inset: 0;
  z-index: 25;
  background: #f5f5f9;
}
:where(html.pg-livetracking) #dashboardModal iframe,
:where(html.pg-livetracking) #mapHistoryModal iframe,
:where(html.pg-livetracking) #ReportModal iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* bottom bar (phone, upright): the school tab bar, five tabs */
:where(html.pg-livetracking) .lt-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  box-sizing: border-box;
  height: var(--lt-tabbar-h);
  padding: 0 4px;
  background: #fff;
  border-top: 1px solid var(--c-line, #e6e8ef);
  box-shadow: 0 -2px 10px rgba(34, 48, 62, 0.06);
}
:where(html.pg-livetracking) .lt-nav-brand{
  display: none;
}
:where(html.pg-livetracking) .lt-nav > button{
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  border: 0;
  background: none;
  padding: 8px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--c-muted, #7a8191);
  font-size: var(--fs-chip, 11px);
  font-weight: 600;
  line-height: var(--lh-tight, 1.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:where(html.pg-livetracking) .lt-nav > button span:not(.tab-badge){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
:where(html.pg-livetracking) .lt-nav > button i{
  font-size: var(--fs-title, 18px);
}
:where(html.pg-livetracking) .lt-nav > button.active{
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) .lt-nav > button.active::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 44px;
  height: 3px;
  margin-left: -22px;
  border-radius: 0 0 3px 3px;
  background: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) .lt-nav .tab-badge,
:where(html.pg-livetracking) .lt-row-badge{
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--c-danger, #d64545);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
:where(html.pg-livetracking) .lt-nav .tab-badge{
  position: absolute;
  top: 4px;
  left: calc(50% + 2px);
}
:where(html.pg-livetracking) .lt-nav .tab-badge[hidden],
:where(html.pg-livetracking) .lt-row-badge[hidden],
:where(html.pg-livetracking) .lt-row-dot[hidden]{
  display: none;
}
:where(html.pg-livetracking) .lt-row-badge{
  margin-left: auto;
  margin-right: 6px;
}
:where(html.pg-livetracking) .lt-row-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-danger, #d64545);
  margin-left: auto;
  margin-right: 6px;
}
/* Settings rows are buttons here (school's are links / divs) */
:where(html.pg-livetracking) button.st-row{
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
:where(html.pg-livetracking) .st-row .st-tx small{
  display: block;
}

/* left menu (desktop, or a phone on its side): Sneat's vertical menu */
@media (orientation: landscape), (min-width: 900px) {
  :root:where(.pg-livetracking){
    --lt-menu-x: var(--lt-menu-w);
    --lt-bottom: 0px;
  }
  :root:where(.pg-livetracking.lt-nav-folded){
    --lt-menu-x: var(--lt-menu-folded-w);
  }
  :where(html.pg-livetracking) .lt-nav{
    top: 0;
    right: auto;
    width: var(--lt-menu-x);
    height: auto;
    flex-direction: column;
    gap: 2px;
    padding: 12px 12px 16px;
    border-top: 0;
    border-right: 1px solid var(--c-line, #e6e8ef);
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.12);
    overflow-y: auto;
    transition: width 0.2s ease;
  }
  :where(html.pg-livetracking) #map{
    transition: left 0.2s ease;
  }
  :where(html.pg-livetracking) .lt-nav-brand{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 52px;
    padding: 0 4px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--c-line, #e6e8ef);
  }
  :where(html.pg-livetracking) .lt-nav-logo{
    max-width: 150px;
    max-height: 44px;
    object-fit: contain;
  }
  :where(html.pg-livetracking) .lt-nav-collapse{
    flex: none;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--c-brand, #696cff);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 0 0 4px #f5f5f9;
  }
  :where(html.pg-livetracking) .lt-nav-collapse i{
    font-size: 18px;
    transition: transform 0.2s ease;
  }
  :where(html.pg-livetracking) .lt-nav > button{
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: var(--fs-name, 14px);
    font-weight: 500;
    color: var(--c-text, #4b5160);
  }
  :where(html.pg-livetracking) .lt-nav > button i{
    font-size: 20px;
    flex: none;
  }
  :where(html.pg-livetracking) .lt-nav > button:hover{
    background: var(--c-fill, #f1f2f7);
  }
  :where(html.pg-livetracking) .lt-nav > button.active{
    background: var(--c-brand-tint, #ececff);
    color: var(--c-brand, #696cff);
    font-weight: 600;
  }
  :where(html.pg-livetracking) .lt-nav > button.active::before{
    top: 50%;
    left: auto;
    right: -12px;
    width: 4px;
    height: 32px;
    margin: -16px 0 0;
    border-radius: 4px 0 0 4px;
  }
  :where(html.pg-livetracking) .lt-nav .tab-badge{
    position: static;
    margin-left: auto;
  }
  /* folded: icons only */
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav{
    padding: 12px 10px 16px;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-brand{
    flex-direction: column;
    justify-content: center;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-logo{
    max-width: 44px;
    max-height: 32px;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-collapse i{
    transform: rotate(180deg);
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav > button{
    justify-content: center;
    padding: 10px 0;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav > button span:not(.tab-badge){
    display: none;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav .tab-badge{
    position: absolute;
    top: 4px;
    left: calc(50% + 4px);
  }
}
/* left menu: more items under the five tabs (2026-11-08) — vehicles by
   status, the Settings screens, geofence tools — in groups that fold from
   their heading (localStorage ltNavGroups); Notifications and Geofences sit
   with the tabs in the tabs' own style (.lt-nav-x). The phone's bottom bar
   keeps the five tabs only. */
:where(html.pg-livetracking) .lt-nav-group,
:where(html.pg-livetracking) .lt-nav > .lt-nav-x,
:where(html.pg-livetracking) .lt-nav > .lt-nav-sub{
  display: none;
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-nav > .lt-nav-x{
    display: flex;
  }
  :where(html.pg-livetracking) .lt-nav-group{
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 2px;
  }
  :where(html.pg-livetracking) .lt-nav-head{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 2px;
    padding: 4px 14px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--c-muted, #7a8191);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
    cursor: pointer;
  }
  :where(html.pg-livetracking) .lt-nav-head:hover{
    color: var(--c-text, #4b5160);
  }
  :where(html.pg-livetracking) .lt-nav-chev{
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s ease;
  }
  :where(html.pg-livetracking) .lt-nav-group.is-folded .lt-nav-chev{
    transform: rotate(-90deg);
  }
  :where(html.pg-livetracking) .lt-nav-group.is-folded .lt-nav-sub{
    display: none;
  }
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub{
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--c-text, #4b5160);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub[hidden]{
    display: none;
  }
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub > span:not(.tab-badge){
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub > i:first-child{
    flex: none;
    width: 20px;
    font-size: 15px;
    text-align: center;
  }
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub:hover{
    background: var(--c-fill, #f1f2f7);
  }
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub.active,
  :where(html.pg-livetracking) .lt-nav .lt-nav-sub.on{
    background: var(--c-brand-tint, #ececff);
    color: var(--c-brand, #696cff);
    font-weight: 600;
  }
  /* status items: the vehicle cards' status icons (script.js status icon map)
     in the status colours (script.js status colours) + the count */
  :where(html.pg-livetracking) .lt-nav .lt-nav-sti{
    color: var(--lt-dot, #8a8fa0);
  }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="ALL"]{ --lt-dot: var(--c-brand, #696cff); }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="RUNNING"]{ --lt-dot: #20c997; }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="MOVING"]{ --lt-dot: #dc143c; }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="IDLE"]{ --lt-dot: #ff4500; }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="WAITING"]{ --lt-dot: #6f42c1; }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="STOPPED"]{ --lt-dot: #ff0000; }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="PARKED"]{ --lt-dot: #800080; }
  :where(html.pg-livetracking) .lt-nav [data-lt-status="IN-ACTIVE"]{ --lt-dot: #a9a9a9; }
  :where(html.pg-livetracking) .lt-nav .lt-nav-count{
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--c-fill, #f1f2f7);
    color: var(--c-text, #4b5160);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
  }
  /* Refresh + Sign out sit at the foot of the menu; their solid icons a size
     down, to sit with the tabs' line icons */
  :where(html.pg-livetracking) .lt-nav > .lt-nav-x > i.fa-solid{
    width: 20px;
    font-size: 16px;
    text-align: center;
  }
  :where(html.pg-livetracking) .lt-nav > .lt-nav-foot{
    margin-top: auto;
  }
  :where(html.pg-livetracking) .lt-nav > .lt-nav-out{
    color: var(--c-danger, #d64545);
  }
  :where(html.pg-livetracking) .lt-nav > .lt-nav-out:hover{
    background: #fdecec;
  }
  /* a Settings screen open: its own item is marked, not Settings */
  :where(html.pg-livetracking[data-lt-sub]) .lt-nav > button[data-tab="settings"].active{
    background: none;
    color: var(--c-text, #4b5160);
    font-weight: 500;
  }
  :where(html.pg-livetracking[data-lt-sub]) .lt-nav > button[data-tab="settings"].active::before{
    display: none;
  }
  /* folded menu: icons only; every group open, a thin line per heading */
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-head{
    height: 1px;
    margin: 10px 6px 4px;
    padding: 0;
    background: var(--c-line, #e6e8ef);
    pointer-events: none;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-head > *,
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav .lt-nav-sub > :not(:first-child){
    display: none;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-group.is-folded .lt-nav-sub:not([hidden]){
    display: flex;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav .lt-nav-sub{
    justify-content: center;
    padding: 8px 0;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav .lt-nav-sub > .tab-badge:not([hidden]){
    display: block;
    position: absolute;
    top: 2px;
    left: calc(50% + 4px);
  }
}
/* Live tracking's submenu (vehicles by status, 2026-11-08): Sneat's
   sub-menu — indented under its parent, the parent row carries the chevron
   (.lt-nav-caret, laid over the Live tracking row's right end — a sign
   only; a click on the row opens / closes the submenu). */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-nav-tree{
    position: relative;
    margin-bottom: 4px;
  }
  :where(html.pg-livetracking) .lt-nav-tree > .lt-nav-caret{
    position: absolute;
    right: 6px;
    top: -7px; /* the 2px gap + half of (row 40px - 30px) */
    transform: translateY(-100%);
    z-index: 1;
    width: 30px;
    height: 30px;
    margin: 0 0 6px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
    color: inherit;
    /* only a sign: the whole Live tracking row opens / closes the submenu */
    pointer-events: none;
  }
  :where(html.pg-livetracking) .lt-nav-tree > .lt-nav-caret .lt-nav-chev{
    margin: 0;
    font-size: 11px;
  }
  :where(html.pg-livetracking) .lt-nav-tree .lt-nav-sub{
    padding: 6px 14px 6px 30px;
    font-size: 13px;
  }
  :where(html.pg-livetracking) .lt-nav-tree .lt-nav-sub > i:first-child{
    width: 14px;
  }
  /* folded menu: no chevron; the dots stay as the icons */
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-tree > .lt-nav-caret{
    display: none;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-tree .lt-nav-sub{
    padding: 7px 0;
  }
}
/* a phone on its side is short: a slimmer menu */
@media (orientation: landscape) and (max-height: 500px) {
  /* the Live tracking row is 34px here: the 2px gap + (34 - 30) / 2 */
  :where(html.pg-livetracking) .lt-nav-tree > .lt-nav-caret{
    top: -4px;
  }
  :where(html.pg-livetracking) .lt-nav-head{
    margin-top: 8px;
  }
  :root:where(.pg-livetracking){
    --lt-menu-w: 200px;
  }
  :where(html.pg-livetracking) .lt-nav-brand{
    min-height: 40px;
  }
  :where(html.pg-livetracking) .lt-nav > button{
    padding: 7px 12px;
  }
}

/* New UI: the Vehicles button on the map (opens / closes #sidebar-left) */
:where(html.pg-livetracking) .lt-vehicles-btn{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: var(--c-title, #2b2c40);
  font: 600 var(--fs-name, 14px) / 1 "Poppins", sans-serif;
  box-shadow: 0 2px 10px rgba(34, 48, 62, 0.18);
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-vehicles-btn i{
  font-size: 20px;
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) .lt-vehicles-btn b{
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 11px;
  background: var(--c-brand, #696cff);
  color: #fff;
  font-size: var(--fs-small, 12px);
  line-height: 22px;
  text-align: center;
}
:where(html.pg-livetracking) .lt-vehicles-btn b:empty{
  display: none;
}
:where(html.pg-livetracking) .lt-vehicles-btn.is-open{
  background: var(--c-brand, #696cff);
  color: #fff;
}
:where(html.pg-livetracking) .lt-vehicles-btn.is-open i{
  color: #fff;
}
/* every panel of the regular page in the school panel style: one layer, the
   later-opened one on top (DOM order) */
:where(html.pg-livetracking) #lt-settings-sidebar,
:where(html.pg-livetracking) #account-sidebar,
:where(html.pg-livetracking) #edit-device-sidebar,
:where(html.pg-livetracking) #add-vehicle-sidebar,
:where(html.pg-livetracking) #location-settings-sidebar,
:where(html.pg-livetracking) #notification-settings-sidebar{
  z-index: 12;
}
:where(html.pg-livetracking) .account-sidebar,
:where(html.pg-livetracking) .edit-device-sidebar{
  width: 100% !important;
  max-width: none !important;
}
/* phone upright: the list is a full panel, so the button hides under it */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-livetracking) .lt-vehicles-btn.is-open{
    display: none;
  }
}
/* desktop / a phone on its side: the panels are drawers beside the map */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .sidebar,
  :where(html.pg-livetracking) .notification-sidebar,
  :where(html.pg-livetracking) .geofence-sidebar,
  :where(html.pg-livetracking) .settings-sidebar,
  :where(html.pg-livetracking) .account-sidebar,
  :where(html.pg-livetracking) .edit-device-sidebar{
    width: min(420px, 100%) !important;
    box-shadow: 0 0 18px rgba(34, 48, 62, 0.16);
  }
  :where(html.pg-livetracking) .lt-vehicles-btn.is-open{
    left: calc(min(420px, 100%) + 12px);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-livetracking) .sidebar,
  :where(html.pg-livetracking) .notification-sidebar,
  :where(html.pg-livetracking) .geofence-sidebar,
  :where(html.pg-livetracking) .settings-sidebar,
  :where(html.pg-livetracking) .account-sidebar,
  :where(html.pg-livetracking) .edit-device-sidebar{
    width: min(360px, 100%) !important;
  }
  :where(html.pg-livetracking) .lt-vehicles-btn.is-open{
    left: calc(min(360px, 100%) + 12px);
  }
}

/* New UI: the vehicle list — status chips with counts, no logo row (the logo
   is in the menu; #branding stays in the page, #logo feeds the menu logo) */
:where(html.pg-livetracking) #sidebar-left #branding{
  display: none;
}
:where(html.pg-livetracking) .lt-status-chips{
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 10px;
  margin-bottom: 4px;
}
:where(html.pg-livetracking) .lt-status-chips::-webkit-scrollbar{
  display: none;
}
:where(html.pg-livetracking) .lt-chip{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c-line, #e6e8ef);
  border-radius: 15px;
  background: #fff;
  color: var(--c-text, #4b5160);
  font: 600 var(--fs-small, 12px) / 1 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-chip[hidden]{
  display: none;
}
:where(html.pg-livetracking) .lt-chip b{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
:where(html.pg-livetracking) .lt-chip b:empty{
  display: none;
}
:where(html.pg-livetracking) .lt-chip.on{
  background: var(--c-brand, #696cff);
  border-color: var(--c-brand, #696cff);
  color: #fff;
}
:where(html.pg-livetracking) .lt-chip:focus-visible,
:where(html.pg-livetracking) .lt-nav > button:focus-visible,
:where(html.pg-livetracking) .lt-vehicles-btn:focus-visible{
  outline: 2px solid var(--c-brand, #696cff);
  outline-offset: 2px;
}
/* desktop / a phone on its side: the vehicle card floats bottom-right, the
   same 10px from the map's edges as the map buttons (owner, 2026-11-08); the
   buttons end well above it there */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .singleVehicleNew{
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    transform: none !important;
    width: 400px !important;
    max-width: calc(100% - 20px) !important;
    margin: 0 !important;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(34, 48, 62, 0.2);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* a phone on its side is short: the button column reaches the bottom, so
     the card keeps clear of it */
  :where(html.pg-livetracking) .singleVehicleNew{
    width: 340px !important;
    right: 64px !important;
    bottom: 8px !important;
    max-height: calc(100% - 16px);
    overflow-y: auto;
  }
}

/* New UI: Notifications and the sound switch are in Settings; their map
   buttons stay in the page (script.js), not on the map */
:where(html.pg-livetracking) #notificationSidebarButton,
:where(html.pg-livetracking) #toggleAudioBtn{
  display: none !important;
}

/* ═══ Regular new UI: the Dashboard tab (dashboard.html, owner 2026-11-07) ═══
   The school / service tokens; one column on a phone, a 12-column grid on a
   desktop or a phone on its side. The old cards' rules above (.card, .row) do
   not reach this markup (db-* classes). */
:root:where(.pg-dashboard){
  --c-brand: #696cff; --c-brand-tint: #ececff; --c-danger: #d64545; --c-danger-tint: #fdecec;
  --c-line: #e6e8ef; --c-fill: #f1f2f7; --c-title: #2b2c40; --c-text: #4b5160; --c-muted: #7a8191;
  --c-run: #14916f; --c-run-tint: #dff7ef; --c-idle: #c97400; --c-idle-tint: #fff1dc; --c-off: #b9bdc9;
  --fs-title: 18px; --fs-dialog: 16px; --fs-name: 14px; --fs-body: 13px; --fs-small: 12px; --fs-chip: 11px;
}
:where(html.pg-dashboard) body{
  margin: 0;
  background: #f5f5f9;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--c-text);
  font-size: var(--fs-body);
}
:where(html.pg-dashboard) .db{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 14px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
:where(html.pg-dashboard) .db-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
:where(html.pg-dashboard) .db-hello,
:where(html.pg-dashboard) .db-updated,
:where(html.pg-dashboard) .db-muted{
  font-size: var(--fs-small);
  color: var(--c-muted);
}
:where(html.pg-dashboard) .db-title{
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--c-title);
  text-wrap: balance;
  word-break: break-word;
}
:where(html.pg-dashboard) .db-card{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 12px;
  min-width: 0;
}
:where(html.pg-dashboard) button.db-card,
:where(html.pg-dashboard) .db-row,
:where(html.pg-dashboard) .db-st,
:where(html.pg-dashboard) .db-link{
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
:where(html.pg-dashboard) .db-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
:where(html.pg-dashboard) .db-card-head h2{
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
}
:where(html.pg-dashboard) .db-link{
  border: 0;
  background: none;
  padding: 0;
  color: var(--c-brand);
  font-weight: 600;
  font-size: var(--fs-small);
}
:where(html.pg-dashboard) .db-count{
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--c-danger-tint);
  color: var(--c-danger);
  font-size: var(--fs-chip);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
:where(html.pg-dashboard) .db-count:empty{
  display: none;
}
/* top tiles */
:where(html.pg-dashboard) .db-kpis{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
:where(html.pg-dashboard) .db-kpi{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:where(html.pg-dashboard) .db-kpi-label{
  font-size: var(--fs-small);
  color: var(--c-muted);
}
:where(html.pg-dashboard) .db-kpi-value{
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--c-title);
  font-variant-numeric: tabular-nums;
  min-height: 28px;
}
:where(html.pg-dashboard) .db-kpi-sub{
  font-size: var(--fs-chip);
  color: var(--c-muted);
  line-height: 1.35;
}
:where(html.pg-dashboard) .db-split{
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--c-fill);
  margin: 2px 0;
}
:where(html.pg-dashboard) .db-split i{
  display: block;
  height: 100%;
}
/* status colours: one per status, the left menu's dots (owner, 2026-11-12:
   Moving / Waiting were drawn in Running's / Parked's colour) */
:where(html.pg-dashboard) .db-split .db-run, :where(html.pg-dashboard) .db-dot.db-run{ background: #20c997; }
:where(html.pg-dashboard) .db-split .db-move, :where(html.pg-dashboard) .db-dot.db-move{ background: #dc143c; }
:where(html.pg-dashboard) .db-split .db-idle, :where(html.pg-dashboard) .db-dot.db-idle{ background: #ff4500; }
:where(html.pg-dashboard) .db-split .db-wait, :where(html.pg-dashboard) .db-dot.db-wait{ background: #6f42c1; }
:where(html.pg-dashboard) .db-split .db-park, :where(html.pg-dashboard) .db-dot.db-park{ background: #800080; }
:where(html.pg-dashboard) .db-split .db-stop, :where(html.pg-dashboard) .db-dot.db-stop{ background: #ff0000; }
:where(html.pg-dashboard) .db-split .db-off, :where(html.pg-dashboard) .db-dot.db-off{ background: #a9a9a9; }
:where(html.pg-dashboard) .db-chip{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: var(--fs-chip);
  font-weight: 600;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-chip.db-run, :where(html.pg-dashboard) .db-ic.db-run{ color: var(--c-run); background: var(--c-run-tint); }
:where(html.pg-dashboard) .db-chip.db-idle, :where(html.pg-dashboard) .db-ic.db-idle{ color: var(--c-idle); background: var(--c-idle-tint); }
:where(html.pg-dashboard) .db-chip.db-park, :where(html.pg-dashboard) .db-ic.db-park{ color: var(--c-brand); background: var(--c-brand-tint); }
:where(html.pg-dashboard) .db-chip.db-move, :where(html.pg-dashboard) .db-ic.db-move{ color: #dc143c; background: #fbe7ea; }
:where(html.pg-dashboard) .db-chip.db-wait, :where(html.pg-dashboard) .db-ic.db-wait{ color: #6f42c1; background: #efe9f8; }
:where(html.pg-dashboard) .db-chip.db-stop, :where(html.pg-dashboard) .db-ic.db-stop{ color: var(--c-danger); background: var(--c-danger-tint); }
:where(html.pg-dashboard) .db-chip.db-off, :where(html.pg-dashboard) .db-ic.db-off{ color: var(--c-muted); background: var(--c-fill); }
/* status ring and legend */
:where(html.pg-dashboard) .db-status-body{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items: center;
}
:where(html.pg-dashboard) .db-donut{
  width: 120px;
  height: 120px;
}
:where(html.pg-dashboard) .db-donut-n{
  font: 700 8px "Poppins", sans-serif;
  fill: var(--c-title);
}
:where(html.pg-dashboard) .db-legend{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
:where(html.pg-dashboard) .db-st{
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 5px 6px;
  border-radius: 8px;
  font-size: var(--fs-small);
}
:where(html.pg-dashboard) .db-st:hover,
:where(html.pg-dashboard) .db-st.active{
  background: var(--c-fill);
}
:where(html.pg-dashboard) .db-st b{
  margin-left: auto;
  color: var(--c-title);
  font-variant-numeric: tabular-nums;
}
:where(html.pg-dashboard) .db-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
/* rows */
:where(html.pg-dashboard) .db-list{
  display: flex;
  flex-direction: column;
}
:where(html.pg-dashboard) .db-row{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--c-line);
  background: none;
}
:where(html.pg-dashboard) .db-row:first-child{
  border-top: 0;
}
:where(html.pg-dashboard) .db-row-main{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
:where(html.pg-dashboard) .db-row-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}
:where(html.pg-dashboard) .db-row-title{
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-row-sub{
  font-size: var(--fs-small);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-ic{
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex: none;
}
:where(html.pg-dashboard) .db-empty{
  margin: 6px 0;
  color: var(--c-muted);
  font-size: var(--fs-body);
}
:where(html.pg-dashboard) .db-bar-row{
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: var(--fs-small);
}
:where(html.pg-dashboard) .db-bar-name{
  color: var(--c-title);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-bar{
  height: 10px;
  border-radius: 5px;
  background: var(--c-fill);
  overflow: hidden;
}
:where(html.pg-dashboard) .db-bar i{
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--c-brand);
}
:where(html.pg-dashboard) .db-bar-val{
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}
:where(html.pg-dashboard) button:focus-visible{
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
/* desktop or a phone on its side: the 12-column grid */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-dashboard) .db{
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    padding: 20px;
  }
  :where(html.pg-dashboard) .db-head,
  :where(html.pg-dashboard) .db-kpis{
    grid-column: 1 / -1;
  }
  :where(html.pg-dashboard) .db-kpis{
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  /* 2 × 2 under the tiles (the Vehicles card removed, owner 2026-11-08):
     Status | Latest notifications, Needs attention | Top vehicles */
  :where(html.pg-dashboard) .db-status{ grid-column: span 6; }
  :where(html.pg-dashboard) .db-vehicles{ grid-column: span 7; }
  :where(html.pg-dashboard) .db-alerts{ grid-column: span 6; }
  :where(html.pg-dashboard) .db-attention{ grid-column: span 6; }
  :where(html.pg-dashboard) .db-top{ grid-column: span 6; }
}
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-dashboard) .db-status,
  :where(html.pg-dashboard) .db-vehicles,
  :where(html.pg-dashboard) .db-alerts,
  :where(html.pg-dashboard) .db-attention,
  :where(html.pg-dashboard) .db-top{ grid-column: span 6; }
}

:where(html.pg-dashboard){
  background: #f5f5f9;
  min-height: 100%;
}
:where(html.pg-dashboard) .db-legend{
  max-width: 360px;
}

/* ═══ Regular new UI: the History tab (history.html, owner 2026-11-07) ═══
   The school / service look over the existing page: the search card, the
   buttons, the player and the map buttons; plus the new summary tiles, the
   numbered timeline, the day bar and the day buttons (js/page-history.js). */
:root:where(.pg-history){
  --c-brand: #696cff; --c-brand-tint: #ececff; --c-danger: #d64545; --c-danger-tint: #fdecec;
  --c-line: #e6e8ef; --c-fill: #f1f2f7; --c-title: #2b2c40; --c-text: #4b5160; --c-muted: #7a8191;
  --c-run: #14916f; --c-run-tint: #dff7ef; --c-idle: #c97400; --c-idle-tint: #fff1dc;
  --fs-title: 18px; --fs-name: 14px; --fs-body: 13px; --fs-small: 12px; --fs-chip: 11px;
}
:where(html.pg-history) .replay-panel,
:where(html.pg-history) .player-bar{
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(34, 48, 62, 0.14);
  background: #fff;
  font-family: "Poppins", system-ui, sans-serif;
}
:where(html.pg-history) .replay-header b{
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--c-title);
}
:where(html.pg-history) .replay-header button{
  color: var(--c-title);
}
:where(html.pg-history) .form-group.outlined label{
  color: var(--c-muted);
  letter-spacing: 0.04em;
}
:where(html.pg-history) .form-group.outlined input,
:where(html.pg-history) .form-group.outlined select{
  border-color: var(--c-line);
  border-radius: 10px;
  color: var(--c-title);
}
:where(html.pg-history) .form-group.outlined input:focus,
:where(html.pg-history) .form-group.outlined select:focus{
  border-color: var(--c-brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}
:where(html.pg-history) .show-btn,
:where(html.pg-history) .clear-btn,
:where(html.pg-history) .stop-btn{
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  border: 0;
  font: 600 var(--fs-small) / 1 "Poppins", sans-serif;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
}
:where(html.pg-history) .show-btn{
  flex: 1;
  background: var(--c-brand);
  color: #fff;
}
:where(html.pg-history) .clear-btn{
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
:where(html.pg-history) .stop-btn{
  background: var(--c-danger-tint);
  color: var(--c-danger);
}
/* the day buttons */
:where(html.pg-history) .h-daystep{
  display: flex;
  gap: 8px;
  margin: 2px 0 10px;
}
:where(html.pg-history) .h-daystep button{
  flex: 1;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #fff;
  color: var(--c-text);
  font: 600 var(--fs-small) / 1 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-history) .h-daystep button i{
  font-size: 18px;
}
/* the summary */
:where(html.pg-history) .info-bar{
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  font-family: "Poppins", sans-serif;
}
:where(html.pg-history) .hs-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
:where(html.pg-history) .hs-veh{
  font-size: var(--fs-name);
  font-weight: 600;
  color: var(--c-title);
}
:where(html.pg-history) .hs-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
:where(html.pg-history) .hs-chip{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--c-fill);
  color: var(--c-text);
  font-size: var(--fs-chip);
  font-weight: 600;
  white-space: nowrap;
}
:where(html.pg-history) .hs-chip.hs-warn{
  background: var(--c-danger-tint);
  color: var(--c-danger);
}
:where(html.pg-history) .hs-tiles{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
:where(html.pg-history) .hs-tile{
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
:where(html.pg-history) .hs-tile b{
  font-size: var(--fs-name);
  font-variant-numeric: tabular-nums;
}
:where(html.pg-history) .hs-tile span{
  font-size: var(--fs-chip);
  color: var(--c-muted);
}
:where(html.pg-history) .hs-run b{ color: var(--c-run); }
:where(html.pg-history) .hs-stop b{ color: var(--c-danger); }
:where(html.pg-history) .hs-idle b{ color: var(--c-idle); }
/* the timeline */
:where(html.pg-history) .h-timeline{
  display: flex;
  flex-direction: column;
  max-height: 34vh;
  overflow-y: auto;
  padding: 0 12px 10px;
  border-top: 1px solid var(--c-line);
  font-family: "Poppins", sans-serif;
}
:where(html.pg-history) .h-timeline[hidden]{
  display: none;
}
:where(html.pg-history) .h-tl-row{
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  padding: 9px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
:where(html.pg-history) .h-tl-row:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 18px;
  top: 34px;
  bottom: -8px;
  width: 2px;
  background: var(--c-line);
}
:where(html.pg-history) .h-tl-row:hover,
:where(html.pg-history) .h-tl-row.is-on{
  background: var(--c-fill);
}
:where(html.pg-history) .h-tl-n{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--fs-chip);
  font-weight: 700;
  position: relative;
  z-index: 1;
}
:where(html.pg-history) .is-trip .h-tl-n{ background: var(--c-run); }
:where(html.pg-history) .is-stop .h-tl-n{ background: var(--c-danger); }
:where(html.pg-history) .h-tl-main{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
:where(html.pg-history) .h-tl-title{
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-title);
}
:where(html.pg-history) .h-tl-sub{
  font-size: var(--fs-small);
  color: var(--c-muted);
}
/* the day bar, on top of the player */
:where(html.pg-history) .h-daybar{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
:where(html.pg-history) .h-daybar[hidden]{
  display: none;
}
:where(html.pg-history) .h-day-track{
  position: relative;
  height: 18px;
  border-radius: 6px;
  background: var(--c-danger-tint);
  overflow: hidden;
}
:where(html.pg-history) .h-day-block{
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background: var(--c-run);
  cursor: pointer;
}
:where(html.pg-history) .h-day-block:hover{
  background: var(--c-brand);
}
:where(html.pg-history) .h-day-ticks{
  display: flex;
  justify-content: space-between;
  font: 500 var(--fs-chip) / 1.2 "Poppins", sans-serif;
  color: var(--c-muted);
}
/* the player */
:where(html.pg-history) #timeSlider{
  accent-color: var(--c-brand);
}
:where(html.pg-history) .player-meta{
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
:where(html.pg-history) .player-buttons button{
  color: var(--c-title);
}
:where(html.pg-history) #playBtn{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-brand);
  color: #fff;
}
/* the map buttons: the school rail look (brand purple) */
:where(html.pg-history) .maplibregl-ctrl-group{
  background: var(--c-brand) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(34, 48, 62, 0.18) !important;
}
:where(html.pg-history) .maplibregl-ctrl-group button .maplibregl-ctrl-icon{
  filter: brightness(0) invert(1);
}
:where(html.pg-history) .maplibregl-ctrl-group button + button{
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}
:where(html.pg-history) button:focus-visible{
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}

/* ═══ Regular new UI: the Reports tab (report.html, owner 2026-11-07) ═══
   The school / service look over the existing page: the search card, the
   period and report chips (js/page-report.js reportChips), the buttons, the
   results panel and its tables. */
:root:where(.pg-report){
  --c-brand: #696cff; --c-brand-tint: #ececff; --c-danger: #d64545; --c-danger-tint: #fdecec;
  --c-line: #e6e8ef; --c-fill: #f1f2f7; --c-title: #2b2c40; --c-text: #4b5160; --c-muted: #7a8191;
  --c-run: #14916f; --c-run-tint: #dff7ef;
  --fs-title: 18px; --fs-name: 14px; --fs-body: 13px; --fs-small: 12px; --fs-chip: 11px;
}
:where(html.pg-report) body{
  background: #f5f5f9;
  font-family: "Poppins", system-ui, sans-serif;
}
:where(html.pg-report) .search-panel,
:where(html.pg-report) .report-panel{
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(34, 48, 62, 0.08);
}
:where(html.pg-report) .replay-header{
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}
:where(html.pg-report) .replay-header b{
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--c-title);
}
:where(html.pg-report) .form-group.outlined label{
  color: var(--c-muted);
  letter-spacing: 0.04em;
}
:where(html.pg-report) .form-group.outlined input,
:where(html.pg-report) .form-group.outlined select{
  border-color: var(--c-line);
  border-radius: 10px;
  color: var(--c-title);
}
:where(html.pg-report) .form-group.outlined input:focus,
:where(html.pg-report) .form-group.outlined select:focus{
  border-color: var(--c-brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--c-brand-tint);
}
/* chips */
:where(html.pg-report) .rpt-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px;
}
:where(html.pg-report) .rpt-chips button{
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: 15px;
  background: #fff;
  color: var(--c-text);
  font: 600 var(--fs-small) / 1 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-report) .rpt-chips button[hidden]{
  display: none;
}
:where(html.pg-report) .rpt-chips button.on{
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
}
:where(html.pg-report) .rpt-chips button:focus-visible,
:where(html.pg-report) button:focus-visible{
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
/* buttons */
:where(html.pg-report) .show-btn,
:where(html.pg-report) .clear-btn,
:where(html.pg-report) .download-xlsx-btn,
:where(html.pg-report) .download-pdf-btn{
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0;
  font: 600 var(--fs-small) / 1 "Poppins", sans-serif;
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
:where(html.pg-report) .show-btn{
  flex: 1;
  background: var(--c-brand);
  color: #fff;
}
:where(html.pg-report) .clear-btn{
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
:where(html.pg-report) .download-xlsx-btn,
:where(html.pg-report) .download-pdf-btn{
  flex: 1;
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-title);
}
:where(html.pg-report) .download-xlsx-btn i{ color: var(--c-run); }
:where(html.pg-report) .download-pdf-btn i{ color: var(--c-danger); }
/* the empty results panel */
:where(html.pg-report) .rpt-empty{
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--c-muted);
  font-size: var(--fs-body);
  padding: 24px;
}
:where(html.pg-report) .rpt-empty i{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  display: grid;
  place-items: center;
  font-size: 32px;
}
:where(html.pg-report) .rpt-empty b{
  font-size: var(--fs-name);
  color: var(--c-title);
}
:where(html.pg-report) .rpt-empty span{
  max-width: 42ch;
  line-height: 1.5;
}
/* results tables: the console look (muted caps headers, hairlines) */
:where(html.pg-report) #reportBody table,
:where(html.pg-report) #reportBody1 table{
  border-collapse: collapse;
  font-size: var(--fs-small);
  color: var(--c-text);
}
:where(html.pg-report) #reportBody th,
:where(html.pg-report) #reportBody1 th{
  background: var(--c-fill);
  color: var(--c-muted);
  font-size: var(--fs-chip);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-color: var(--c-line);
}
:where(html.pg-report) #reportBody td,
:where(html.pg-report) #reportBody1 td{
  border-color: var(--c-line);
  font-variant-numeric: tabular-nums;
}

:where(html.pg-report) .rpt-tool-btn{
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: 15px;
  background: #fff;
  color: var(--c-text);
  font: 600 var(--fs-small) / 1 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-report) .rpt-tool-btn.is-active{
  background: var(--c-brand-tint);
  border-color: var(--c-brand);
  color: var(--c-brand);
}

/* History on a phone on its side: the card scrolls inside the screen and the
   player sits on the right, clear of it */
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-history) .replay-panel{
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
  }
  :where(html.pg-history) .player-bar{
    left: auto !important;
    right: 60px !important;
    width: min(360px, 45vw) !important;
    bottom: 8px !important;
  }
}

/* ═══ Regular new UI: the Settings screens (owner, 2026-11-07) ═══
   Notification settings, Vehicle settings, Account, Geofences in the school /
   service look: white cards with hairlines, brand-tint icons, purple primary
   buttons, a red tint for the destructive ones. */
:where(html.pg-livetracking) input[type="checkbox"]{
  accent-color: var(--c-brand, #696cff);
}
/* Notification settings: each control row as a card row */
:where(html.pg-livetracking) #notification-settings-sidebar .notification-controls-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--c-line, #e6e8ef);
  border-radius: 12px;
  box-sizing: border-box;
}
:where(html.pg-livetracking) #notification-settings-sidebar .notification-controls-row[hidden]{
  display: none;
}
:where(html.pg-livetracking) #notification-settings-sidebar .notification-controls-row > label:first-child{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-name, 14px);
  font-weight: 600;
  color: var(--c-title, #2b2c40);
  white-space: nowrap;
}
:where(html.pg-livetracking) #notification-settings-sidebar .notification-controls-row > label:first-child i{
  width: 20px;
  flex: none;
  font-size: 15px !important;
  color: var(--c-brand, #696cff) !important;
  opacity: 1 !important;
  text-align: center;
}
:where(html.pg-livetracking) #notification-settings-sidebar .sos-sound-row{
  flex-wrap: wrap;
}
:where(html.pg-livetracking) #notification-settings-sidebar .sos-sound-row > label:first-child{
  flex-basis: 100%;
}
:where(html.pg-livetracking) #notification-settings-sidebar .sos-sound-row > :not(label):not(button){
  flex: 1 1 0;
  min-width: 0;
}
:where(html.pg-livetracking) #notification-settings-sidebar .sos-sound-row > button{
  flex: none;
  margin: 0 !important;
}
:where(html.pg-livetracking) .dp-btn-primary:disabled{
  color: var(--c-brand, #696cff) !important;
  opacity: 0.55;
}
/* buttons: purple primary, red tint destructive */
:where(html.pg-livetracking) .dp-btn{
  height: 40px;
  border-radius: 8px !important;
  font: 600 var(--fs-body, 13px) / 1 "Poppins", sans-serif !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
:where(html.pg-livetracking) .dp-btn-primary{
  background: var(--c-brand, #696cff) !important;
  border: 0 !important;
  color: #fff !important;
}
:where(html.pg-livetracking) .dp-btn-primary:disabled{
  background: var(--c-brand-tint, #ececff) !important;
  color: #a5a7f2 !important;
  cursor: default;
}
:where(html.pg-livetracking) .dp-btn-danger{
  background: var(--c-danger-tint, #fdecec) !important;
  border: 0 !important;
  color: var(--c-danger, #d64545) !important;
}
/* Account */
:where(html.pg-livetracking) #account-sidebar #retriveBtn,
:where(html.pg-livetracking) #account-sidebar #deleteAccountBtn{
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  font: 600 var(--fs-body, 13px) / 1 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-livetracking) #account-sidebar #retriveBtn{
  background: var(--c-brand, #696cff);
  border: 0;
  color: #fff;
}
:where(html.pg-livetracking) #account-sidebar #deleteAccountBtn{
  background: var(--c-danger-tint, #fdecec);
  border: 0 !important;
  color: var(--c-danger, #d64545) !important;
}
:where(html.pg-livetracking) #account-sidebar #retriveBtn:disabled,
:where(html.pg-livetracking) #account-sidebar #deleteAccountBtn:disabled{
  opacity: 0.5;
  cursor: default;
}
/* name / email / phone / website rows: shown only when they have a value */
:where(html.pg-livetracking) #account-sidebar .vehicle-details:has(> .detail-item > .status:empty){
  display: none;
}
:where(html.pg-livetracking) #account-sidebar .detail-item > i{
  color: var(--c-brand, #696cff);
}

/* History map buttons whose icon is the button's own background image
   (css/icons.css): the icon is drawn again, white, on a layer of its own so the
   green "on" dot keeps its colour */
:where(html.pg-history) .front-col .maplibregl-ctrl-group button:not(.maplibregl-ctrl-terrain){
  background-size: 0 0 !important;
}
:where(html.pg-history) .front-col .maplibregl-ctrl-group button:not(.maplibregl-ctrl-terrain)::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: 17px 17px;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

/* ── Regular new UI: the Settings tab is one page (owner, 2026-11-08) — My
   account (nickname; Retrieve my settings and Delete my account folded into
   its card), Alerts (the old Notification settings panel), Location & GPS (the
   old Location settings panel), Vehicles, Geofences, App, This device. The
   school / service Settings look; these rules are only for the rows the
   regular page adds (livetracking.html #ltSettingsContent). ── */
:where(html.pg-livetracking) #ltSettingsContent .st-row > .st-tx{
  flex: 1 1 auto;
  min-width: 0;
}
/* a value / button at a row's right end */
:where(html.pg-livetracking) #ltSettingsContent .st-row > .notif-status-value,
:where(html.pg-livetracking) #ltSettingsContent .st-row > .notif-status-right,
:where(html.pg-livetracking) #ltSettingsContent .st-row > .st-btn{
  flex: none;
  margin-left: auto;
}
:where(html.pg-livetracking) #ltSettingsContent .st-tx small .notif-status-value{
  font-weight: 500;
  color: inherit;
}
/* the website row only with a value */
:where(html.pg-livetracking) #ltSettingsContent .lt-website-row:has(#websiteDisplay:empty){
  display: none;
}
/* nickname: the "required" chip sits after the (empty) name */
:where(html.pg-livetracking) #ltSettingsContent .lt-nick-row .info-chip{
  display: inline-block;
  margin-top: 4px;
  vertical-align: middle;
}
/* Retrieve / Delete: rows of the My account card that open in place */
/* one divider: the row above carries its own bottom line */
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-fold + .lt-acc-fold{
  border-top: 1px solid var(--c-line);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-fold > summary{
  list-style: none;
  cursor: pointer;
  border-bottom: 0;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-fold > summary::-webkit-details-marker{
  display: none;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-fold > summary .st-chev{
  transition: transform 0.2s ease;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-fold[open] > summary .st-chev{
  transform: rotate(180deg);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 12px;
  font-size: var(--fs-small);
  color: var(--c-muted);
  line-height: var(--lh-body, 1.45);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-body p{
  margin: 0;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-check{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--c-text);
  cursor: pointer;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-check input{
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-msg{
  color: var(--c-text);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-btn{
  min-height: 34px;
  padding: 7px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--c-brand, #696cff);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-btn-danger{
  background: #fdecec;
  color: var(--c-danger, #d64545);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-btn-danger:not(:disabled):hover{
  background: var(--c-danger, #d64545);
  color: #fff;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-btn-plain{
  background: var(--c-fill, #f1f2f7);
  color: var(--c-text);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-danger > summary .st-ic{
  color: var(--c-danger, #d64545);
  background: #fdecec;
}
/* the sound pickers: the dropdown + its play button under the row's title */
:where(html.pg-livetracking) #ltSettingsContent .lt-sound-pick{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-sound-pick > :first-child{
  flex: 1 1 auto;
  min-width: 0;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-sound-pick .icon-button{
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--c-brand-tint, #ececff);
  color: var(--c-brand, #696cff);
  cursor: pointer;
}
/* alerts per vehicle: the row's button fills the row; the list under it */
:where(html.pg-livetracking) #ltSettingsContent .alert-vehicles-row .alert-vehicles-btn{
  flex: 1 1 auto;
  min-width: 0;
}
:where(html.pg-livetracking) #ltSettingsContent .alert-vehicles-panel{
  margin: 0 0 12px 48px;
}
/* a card reached from the left menu flashes once */
@keyframes lt-sect-flash{
  0%{ box-shadow: 0 0 0 0 rgba(105, 108, 255, 0.55); }
  35%{ box-shadow: 0 0 0 4px rgba(105, 108, 255, 0.35); }
  100%{ box-shadow: 0 0 0 0 rgba(105, 108, 255, 0); }
}
:where(html.pg-livetracking) #ltSettingsContent .st-card.lt-sect-flash{
  animation: lt-sect-flash 1.5s ease-out;
}
/* one row a menu item points at (Live tracking link, 2026-11-11): a tint
   that holds, then fades */
@keyframes lt-row-flash{
  0%, 55%{ background-color: rgba(105, 108, 255, 0.16); }
  100%{ background-color: transparent; }
}
:where(html.pg-livetracking) #ltSettingsContent .st-row.lt-row-flash{
  animation: lt-row-flash 2.5s ease-out;
}
/* the nickname's Edit is a card button here (the old panel's green pencil
   link rule is for button#editNickIcon) */
:where(html.pg-livetracking) #ltSettingsContent button#editNickIcon{
  flex: none;
  margin-left: auto;
  padding: 7px 13px;
  border-radius: 10px;
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
/* a long status value (for example "Blocked — allow in browser settings")
   wraps at the right instead of squeezing the title of the row */
:where(html.pg-livetracking) #ltSettingsContent .st-row > .notif-status-right,
:where(html.pg-livetracking) #ltSettingsContent .st-row > .notif-status-value{
  max-width: 45%;
  text-align: right;
}
:where(html.pg-livetracking) #ltSettingsContent .st-row > .notif-status-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
:where(html.pg-livetracking) #ltSettingsContent .st-row .notif-status-value{
  white-space: normal;
}
/* Retrieve / Delete: the explanation waits behind a small info button next to
   the action, so the card stays short (owner, 2026-11-08) */
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-actions{
  align-items: center;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-info{
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--c-fill, #f1f2f7);
  color: var(--c-muted);
  cursor: pointer;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-info[aria-expanded="true"]{
  background: var(--c-brand-tint);
  color: var(--c-brand);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-info-text{
  order: 9;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--c-fill, #f1f2f7);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-acc-danger .lt-acc-info-text{
  background: #fdecec;
  color: var(--c-danger, #d64545);
}
/* room under the last button of the Settings page (owner, 2026-11-08) */
:where(html.pg-livetracking) #ltSettingsContent .st-signout{
  margin-bottom: 24px;
}

/* ── Left menu: no collapse button any more (owner, 2026-11-08 "no
   minimise"), so the logo sits alone in the header — centred ── */
:where(html.pg-livetracking) .lt-nav-brand{
  justify-content: center;
}

/* ── Phone capsule (owner, 2026-11-08): one pill, two joined halves — Menu
   (opens the phone's side menu) and Vehicles (the list). Desktop / landscape:
   the Vehicles half only (the left menu is on screen there). ── */
:where(html.pg-livetracking) .lt-capsule{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9;
  display: flex;
  align-items: stretch;
  height: 40px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(34, 48, 62, 0.18);
  overflow: hidden;
}
:where(html.pg-livetracking) .lt-capsule .lt-vehicles-btn{
  position: static;
  height: 40px;
  border-radius: 0;
  box-shadow: none;
}
:where(html.pg-livetracking) .lt-cap-menu{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 16px;
  border: 0;
  border-right: 1px solid var(--c-line, #e6e8ef);
  background: #fff;
  color: var(--c-title, #2b2c40);
  font: 600 var(--fs-name, 14px) / 1 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-cap-menu i{
  font-size: 17px;
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) .lt-cap-menu[aria-expanded="true"]{
  background: var(--c-brand-tint, #ececff);
}
:where(html.pg-livetracking) .lt-cap-menu:focus-visible{
  outline: 2px solid var(--c-brand, #696cff);
  outline-offset: -2px;
}
/* phone upright: the list is a full panel — the whole capsule hides under it */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-livetracking) .lt-capsule:has(.lt-vehicles-btn.is-open){
    display: none;
  }
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-cap-menu{
    display: none;
  }
  :where(html.pg-livetracking) .lt-capsule:has(.lt-vehicles-btn.is-open){
    left: calc(min(420px, 100%) + 12px);
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-livetracking) .lt-capsule:has(.lt-vehicles-btn.is-open){
    left: calc(min(360px, 100%) + 12px);
  }
}

/* ── The phone's side menu (#ltDrawer): the left menu's items, copied in when
   it opens (js/livetracking-ui.js setupDrawer) ── */
:where(html.pg-livetracking) .lt-drawer-back{
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 24, 40, 0.38);
  opacity: 0;
  transition: opacity 0.2s ease;
}
:where(html.pg-livetracking) .lt-drawer{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(300px, 86vw);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  box-shadow: 4px 0 24px rgba(34, 48, 62, 0.22);
  transform: translateX(-102%);
  transition: transform 0.22s ease;
}
:where(html.pg-livetracking) .lt-drawer[hidden],
:where(html.pg-livetracking) .lt-drawer-back[hidden]{
  display: none;
}
:where(html.pg-livetracking.lt-drawer-open) .lt-drawer{
  transform: none;
}
:where(html.pg-livetracking.lt-drawer-open) .lt-drawer-back{
  opacity: 1;
}
/* the logo centred, the close button on the right */
:where(html.pg-livetracking) .lt-drawer-head{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 10px 52px;
  border-bottom: 1px solid var(--c-line, #e6e8ef);
}
:where(html.pg-livetracking) .lt-drawer-logo{
  max-width: 160px;
  max-height: 46px;
  object-fit: contain;
}
:where(html.pg-livetracking) .lt-drawer-logo:not([src]){
  visibility: hidden;
}
:where(html.pg-livetracking) .lt-drawer-close{
  position: absolute;
  right: 12px;
  top: 50%;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border: 0;
  border-radius: 50%;
  background: var(--c-fill, #f1f2f7);
  color: var(--c-muted, #7a8191);
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-drawer-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* the tabs and the main items */
:where(html.pg-livetracking) .lt-drawer-body > button{
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-text, #4b5160);
  font: 500 var(--fs-name, 14px) / 1.3 "Poppins", sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:where(html.pg-livetracking) .lt-drawer-body > button > i{
  flex: none;
  width: 22px;
  font-size: 19px;
  text-align: center;
}
:where(html.pg-livetracking) .lt-drawer-body > button > i.fa-solid{
  font-size: 16px;
}
:where(html.pg-livetracking) .lt-drawer-body button > span:not(.tab-badge){
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-livetracking) .lt-drawer-body button.active,
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-sub.on{
  background: var(--c-brand-tint, #ececff);
  color: var(--c-brand, #696cff);
  font-weight: 600;
}
:where(html.pg-livetracking) .lt-drawer-body .tab-badge{
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--c-danger, #d64545);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
:where(html.pg-livetracking) .lt-drawer-body .tab-badge[hidden]{
  display: none;
}
/* the submenus: always open here, indented under their tab */
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-group{
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-sub{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 30px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--c-text, #4b5160);
  font: 500 14px / 1.3 "Poppins", sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-sub[hidden]{
  display: none;
}
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-sub > i:first-child{
  flex: none;
  width: 16px;
  font-size: 14px;
  text-align: center;
}
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-sti{
  color: var(--lt-dot, #8a8fa0);
}
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="ALL"]{ --lt-dot: var(--c-brand, #696cff); }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="RUNNING"]{ --lt-dot: #20c997; }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="MOVING"]{ --lt-dot: #dc143c; }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="IDLE"]{ --lt-dot: #ff4500; }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="WAITING"]{ --lt-dot: #6f42c1; }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="STOPPED"]{ --lt-dot: #ff0000; }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="PARKED"]{ --lt-dot: #800080; }
:where(html.pg-livetracking) .lt-drawer-body [data-lt-status="IN-ACTIVE"]{ --lt-dot: #a9a9a9; }
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-count{
  flex: none;
  min-width: 22px;
  padding: 1px 7px;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--c-fill, #f1f2f7);
  color: var(--c-text, #4b5160);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
/* Refresh + Sign out at the end, after a line */
:where(html.pg-livetracking) .lt-drawer-body > .lt-nav-foot{
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line, #e6e8ef);
  border-radius: 0;
}
:where(html.pg-livetracking) .lt-drawer-body > .lt-nav-out{
  color: var(--c-danger, #d64545);
}

/* ── The brand in the menu header (owner, 2026-11-08): the logo (a link to
   the brand's site) with the brand's name under it — "powered by" ── */
:where(html.pg-livetracking) .lt-nav-brand,
:where(html.pg-livetracking) .lt-drawer-brand{
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
:where(html.pg-livetracking) .lt-drawer-brand{
  display: flex;
  min-width: 0;
}
:where(html.pg-livetracking) .lt-brand-link{
  display: block;
  line-height: 0;
}
:where(html.pg-livetracking) .lt-brand-name{
  max-width: 100%;
  overflow: hidden;
  color: var(--c-muted, #7a8191);
  font: 600 12px / 1.3 "Poppins", sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-livetracking) .lt-brand-name[hidden]{
  display: none;
}

/* ── The phone capsule: words only — "Menu | Vehicles" — two equal halves,
   so the dividing line sits in the centre; no icons, no count (owner,
   2026-11-08). Desktop / landscape keep the single Vehicles button. ── */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-livetracking) .lt-capsule > button{
    flex: 1 1 0;
    justify-content: center;
    min-width: 96px;
    padding: 0 18px;
  }
  :where(html.pg-livetracking) .lt-capsule > button > i,
  :where(html.pg-livetracking) .lt-capsule .lt-vehicles-btn > b{
    display: none;
  }
}
/* the header keeps its height when the menu is taller than the screen */
:where(html.pg-livetracking) .lt-nav-brand{
  flex: none;
}
/* desktop / a phone on its side: no capsule at all — the left menu is always
   on screen and its Live tracking submenu opens the list (owner, 2026-11-08) */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-capsule{
    display: none;
  }
}
/* the phone capsule, compact (owner, 2026-11-08): shorter, tighter (the
   dividing line stays the thin grey one — a blue line was tried and dropped) */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-livetracking) .lt-capsule{
    height: 34px;
    border-radius: 17px;
  }
  :where(html.pg-livetracking) .lt-capsule > button,
  :where(html.pg-livetracking) .lt-capsule .lt-vehicles-btn{
    height: 34px;
    min-width: 0;
    padding: 0 14px;
    font-size: 13px;
  }
}
/* the phone side menu: × in the top-right corner; a submenu's arrow on its
   tab's row (tap = fold / unfold); a folded submenu hides its items */
:where(html.pg-livetracking) .lt-drawer-close{
  top: 10px;
  margin-top: 0;
}
:where(html.pg-livetracking) .lt-drawer-chev{
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -6px -6px -6px auto;
  border-radius: 50%;
  color: var(--c-muted, #7a8191);
}
:where(html.pg-livetracking) .lt-drawer-chev i{
  font-size: 12px;
  transition: transform 0.2s ease;
}
:where(html.pg-livetracking) .lt-drawer-chev.is-folded i{
  transform: rotate(-90deg);
}
:where(html.pg-livetracking) .lt-drawer-body .lt-nav-tree.is-folded{
  display: none;
}
/* the side menu's ×: outside the menu, at the top just past its edge (on the
   dimmed map), a white rounded square (owner, 2026-11-08) */
:where(html.pg-livetracking) .lt-drawer-close{
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: -50px;
  width: 38px;
  height: 38px;
  margin-top: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--c-title, #2b2c40);
  font-size: 16px;
  box-shadow: 0 2px 10px rgba(34, 48, 62, 0.25);
}
:where(html.pg-livetracking) .lt-drawer-head{
  position: static;
  padding: 10px 16px;
}
/* the side menu's close, Sneat-style (owner, 2026-11-08): a round brand
   button with ‹ sitting half over the menu's right edge, a light ring round it */
:where(html.pg-livetracking) .lt-drawer-close{
  top: calc(env(safe-area-inset-top, 0px) + 24px);
  right: -17px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-brand, #696cff);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 0 0 7px rgba(245, 245, 249, 0.92);
}

/* ── Scrollbars on the regular pages are brand blue, not grey (owner,
   2026-11-08): the live map page, the dashboard, history and reports.
   scrollbar-color is inherited, so every scrolling box takes it (the
   dropdown lists' grey Firefox rule included); the ::-webkit-scrollbar rules
   are for older Android WebViews without scrollbar-color. Panels that hide
   their scrollbar on purpose (.route-list, the status chips) still do. ── */
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report),
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) .ec-dd-rows{
  scrollbar-color: var(--c-brand, #696cff) transparent;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar-track{
  background: transparent;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar-thumb{
  background: var(--c-brand, #696cff);
  border-radius: 4px;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar-button{
  display: none;
  height: 0;
}
/* the panels' lists (Settings, Notifications, Geofences, …) show their
   scrollbar again, thin and blue (owner, 2026-11-08: "in settings you missed
   scrollbar") — they had it hidden (the .route-list rules above) */
:where(html.pg-livetracking) .route-list{
  scrollbar-width: thin;
}
:where(html.pg-livetracking) .route-list.route-list::-webkit-scrollbar{
  display: block;
  width: 6px;
}
/* auto-hide (owner, 2026-11-08): the blue scrollbar shows only while the
   pointer is over the scrolling box or it is being scrolled (.lt-scrolling,
   set for a moment by js/livetracking-ui.js on the main page); otherwise it
   is invisible. Phones' own overlay scrollbars hide by themselves. */
/* each box its own value (scrollbar-color is inherited: a hovered parent must
   not light its children's bars); the page itself only while it scrolls */
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report),
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) *{
  scrollbar-color: transparent transparent;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) :is(:hover, .lt-scrolling),
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report).lt-scrolling{
  scrollbar-color: var(--c-brand, #696cff) transparent;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar-thumb{
  background: transparent;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) :is(:hover, .lt-scrolling)::-webkit-scrollbar-thumb{
  background: var(--c-brand, #696cff);
}

/* ── The vehicle list's top bar, like school / service (owner, 2026-11-08):
   icon + title, the search button and the red × in one sticky strip with a
   hairline under it; the search field only while search is on ── */
:where(html.pg-livetracking) #sidebar-left .lt-veh-head{
  position: sticky;
  top: 0;
  z-index: 25;
  margin: 0 -15px 6px;
  padding: 14px 96px 10px 15px;
  background: #fff;
  border-bottom: 1px solid var(--c-line, #e6e8ef);
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head h2{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--c-title, #2b2c40);
  font-size: var(--fs-title, 18px);
  font-weight: 700;
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head h2 i{
  margin: 0;
  color: var(--c-brand, #696cff);
  font-size: var(--fs-title, 18px);
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head .sidebar-close-btn{
  position: absolute;
  top: 4px; /* centred on the title (measured) */
  right: 6px;
  left: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-danger, #d64545);
  font-size: var(--fs-title, 18px);
  box-shadow: none;
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head .sidebar-close-btn:hover{
  background: #fdecec;
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head .lt-search-btn{
  right: 46px;
  color: var(--c-text, #4b5160);
  font-size: 17px;
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head .lt-search-btn:hover{
  background: transparent;
}
:where(html.pg-livetracking) #sidebar-left .lt-veh-head .lt-search-btn.is-on{
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #sidebar-left .vehicle-search-wrapper:not(.is-open){
  display: none;
}
/* Geofences top bar (owner, 2026-11-08): the filter button where the gear was
   (neutral; blue while the filter row is open or "Private only" is on); the
   filter row shows only after a tap */
:where(html.pg-livetracking) #geofence-sidebar .lt-filter-btn{
  position: absolute;
  top: 2px; /* level with the × (measured) */
  right: 46px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text, #4b5160);
  font-size: 20px;
  cursor: pointer;
}
:where(html.pg-livetracking) #geofence-sidebar .lt-filter-btn.is-on{
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #geofence-sidebar .geofence-list-controls:not(.is-open){
  display: none;
}
:where(html.pg-livetracking) #geofence-sidebar .geofence-filter-toggle[hidden]{
  display: none;
}
/* Notifications top bar (owner, 2026-11-08 — as Geofences): the filter
   button by the ×; the search + vehicle row and the dates show only after a
   tap (the count, type, Load and refresh stay) */
:where(html.pg-livetracking) #notification-sidebar .lt-filter-btn{
  position: absolute;
  top: 2px;
  right: 46px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text, #4b5160);
  font-size: 20px;
  cursor: pointer;
}
:where(html.pg-livetracking) #notification-sidebar .lt-filter-btn.is-on{
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #notification-sidebar:not(.lt-filters-open) .notification-filter-row,
:where(html.pg-livetracking) #notification-sidebar:not(.lt-filters-open) .da-date-row{
  display: none;
}

/* ── The vehicle list's status chips: an arrow on each side when there is
   more to scroll that way (owner, 2026-11-08), over a soft white fade ── */
:where(html.pg-livetracking) .lt-chips-wrap{
  position: relative;
}
:where(html.pg-livetracking) .lt-chips-arrow{
  position: absolute;
  top: 2px;
  z-index: 2;
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--c-brand, #696cff);
  font-size: 22px;
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-chips-arrow[hidden]{
  display: none;
}
:where(html.pg-livetracking) .lt-chips-prev{
  left: -4px;
  justify-content: start;
  background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0));
}
:where(html.pg-livetracking) .lt-chips-next{
  right: -4px;
  justify-content: end;
  background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0));
}

/* ── The map's attribution, as on the Live Tracking URL page (owner,
   2026-11-08): a small blurred pill at the bottom centre of the map, desktop /
   landscape only (a phone has no room for it). ── */
:where(html.pg-livetracking) .lt-map-attrib{
  display: none;
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-map-attrib{
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 8;
    display: block;
    max-width: min(40vw, 520px);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 6px rgba(34, 48, 62, 0.14);
    color: var(--c-muted, #7a8191);
    font: 400 10px / 1.2 "Poppins", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    pointer-events: none;
  }
}
/* the vehicle card slid left, 10px clear of the map buttons it would cover
   (js/livetracking-ui.js — a short window) */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking.lt-card-shift) .singleVehicleNew{
    right: var(--lt-card-right, 10px) !important;
  }
}
/* the attribution pill stays BEHIND the vehicle card (owner, 2026-11-08: it
   must never hide the card), just above the map itself */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-map-attrib{
    z-index: 1;
  }
}
/* the map credits on demand (owner, 2026-11-08): a round ⓘ in the map's
   bottom-right corner; the line shows on hover / tap, just left of the ⓘ and
   over everything (the card included) — otherwise hidden */
:where(html.pg-livetracking) .lt-attrib-btn{
  display: none;
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-attrib-btn{
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--c-muted, #7a8191);
    font-size: 15px;
    box-shadow: 0 1px 6px rgba(34, 48, 62, 0.22);
    cursor: pointer;
  }
  :where(html.pg-livetracking) .lt-attrib-btn:hover,
  :where(html.pg-livetracking) .lt-attrib-btn[aria-expanded="true"]{
    color: var(--c-brand, #696cff);
  }
  :where(html.pg-livetracking) .lt-map-attrib{
    display: none;
    left: auto;
    right: 46px;
    bottom: 13px;
    z-index: 20;
    max-width: min(60vw, 520px);
    transform: none;
  }
  :where(html.pg-livetracking) .lt-attrib-btn:hover + .lt-map-attrib,
  :where(html.pg-livetracking) .lt-map-attrib.is-open{
    display: block;
  }
}

/* ── Map button column (owner, 2026-11-08: "remove the geofences button and
   arrange the all-vehicles button properly"): the Geofences map button goes
   (Geofences is in the menu; it also sat 32px under ETA, over the traffic
   button); the column then runs ETA · traffic · show all vehicles, each 32px
   button 10px apart (the column's rhythm) from the measured --app-btn-base. ── */
:where(html.pg-livetracking) #GeofenceBtn{
  display: none !important;
}
:where(html.pg-livetracking) .traffic{
  top: calc(var(--app-btn-base) + 42px) !important;
}
:where(html.pg-livetracking) .showAllVehicles{
  top: calc(var(--app-btn-base) + 84px) !important;
}
/* no red dot on the my-geofence (house) button (owner, 2026-11-08) — script.js
   still sets it when no geofence is saved; it just does not show here */
:where(html.pg-livetracking) #geofenceBadge{
  display: none !important;
}

/* ── Desktop / a phone on its side: every panel opens on the LEFT, beside the
   menu, like the vehicle list (owner, 2026-11-08) — Settings, Notifications,
   Geofences, Vehicle settings, Add vehicle; they slide out to the left. A
   phone held upright keeps full-screen panels. ── */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .right{
    left: 0 !important;
    right: auto !important;
  }
  :where(html.pg-livetracking) .right.collapsed{
    transform: translateX(-200%) !important;
  }
}

/* ── Settings: every section folds from its heading (owner, 2026-11-08) — an
   arrow on the right; a folded section hides its card ── */
:where(html.pg-livetracking) #ltSettingsContent .lt-sect-fold{
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-sect-chev{
  margin-left: auto;
  padding: 0 4px;
  font-size: 11px;
  transition: transform 0.2s ease;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-sect-fold.is-folded .lt-sect-chev{
  transform: rotate(-90deg);
}
:where(html.pg-livetracking) #ltSettingsContent .lt-sect-fold.is-folded + .st-card{
  display: none;
}
:where(html.pg-livetracking) #ltSettingsContent .lt-sect-fold:focus-visible{
  outline: 2px solid var(--c-brand, #696cff);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Dashboard: the Maps API cards (owner, 2026-11-08 — js/dashboard.js
   dashboardMaps): weather + air at the vehicles, the next 3 days, help near a
   vehicle, the nearest vehicle to a place ── */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-dashboard) .db-wx,
  :where(html.pg-dashboard) .db-fc,
  :where(html.pg-dashboard) .db-help,
  :where(html.pg-dashboard) .db-find{
    grid-column: span 6;
  }
}
:where(html.pg-dashboard) .db-wx-side{
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
:where(html.pg-dashboard) .db-wx-temp{
  color: var(--c-title);
  font-size: 18px;
  line-height: 1;
}
:where(html.pg-dashboard) .db-wx-flag,
:where(html.pg-dashboard) .db-aqi{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: var(--fs-chip);
  font-weight: 600;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-wx-fair,
:where(html.pg-dashboard) .db-aqi-fair{ color: var(--c-idle); background: var(--c-idle-tint); }
:where(html.pg-dashboard) .db-wx-bad,
:where(html.pg-dashboard) .db-aqi-poor,
:where(html.pg-dashboard) .db-aqi-bad{ color: var(--c-stop, #d64545); background: var(--c-stop-tint, #fdecec); }
:where(html.pg-dashboard) .db-aqi-good{ color: var(--c-run); background: var(--c-run-tint); }
:where(html.pg-dashboard) .db-credit{
  margin: 8px 0 0;
  color: var(--c-muted);
  font-size: 11px;
}
/* the 3 days side by side */
:where(html.pg-dashboard) .db-fc-days{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
:where(html.pg-dashboard) .db-fc-day{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  background: var(--c-fill, #f5f5f9);
  font-size: 12px;
  color: var(--c-text);
}
:where(html.pg-dashboard) .db-fc-name{
  color: var(--c-title);
  font-size: 13px;
}
:where(html.pg-dashboard) .db-fc-cond{
  color: var(--c-muted);
  min-height: 2.6em;
}
:where(html.pg-dashboard) .db-fc-temp{
  color: var(--c-title);
  font-size: 16px;
  font-weight: 700;
}
:where(html.pg-dashboard) .db-fc-rain.is-high,
:where(html.pg-dashboard) .db-fc-uv.is-high{
  color: var(--c-stop, #d64545);
  font-weight: 600;
}
:where(html.pg-dashboard) .db-sun{
  margin: 10px 0 0;
  color: var(--c-muted);
  font-size: 12px;
}
/* vehicle / type pickers: chip buttons in a row */
:where(html.pg-dashboard) .db-pick{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
:where(html.pg-dashboard) .db-pick button{
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c-line, #e6e8ef);
  border-radius: 15px;
  background: #fff;
  color: var(--c-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-dashboard) .db-pick button.is-on{
  border-color: var(--c-brand);
  background: var(--c-brand);
  color: #fff;
}
:where(html.pg-dashboard) .db-help-dist{
  color: var(--c-title);
  font-size: 13px;
  white-space: nowrap;
}
/* the place search */
:where(html.pg-dashboard) .db-find-form{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
:where(html.pg-dashboard) .db-find-form input{
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-line, #e6e8ef);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
}
:where(html.pg-dashboard) .db-find-btn{
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--c-brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
:where(html.pg-dashboard) .db-find-place{
  margin: 0 0 6px;
  color: var(--c-muted);
  font-size: 12px;
}
/* the fleet area's weather in the dashboard header (owner, 2026-11-08): now
   (temperature, sky, area, air quality) and the next 3 days, by the greeting;
   on a phone it sits under the greeting, full width */
:where(html.pg-dashboard) .db-head{
  flex-wrap: wrap;
}
:where(html.pg-dashboard) .db-head-side{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}
:where(html.pg-dashboard) .db-wxbar{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--c-line, #e6e8ef);
  border-radius: 14px;
  background: #fff;
}
:where(html.pg-dashboard) .db-wxbar[hidden]{
  display: none;
}
:where(html.pg-dashboard) .db-wx-now{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
:where(html.pg-dashboard) .db-wx-t{
  color: var(--c-title);
  font-size: 24px;
  line-height: 1;
}
:where(html.pg-dashboard) .db-wx-what{
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--c-text);
  font-size: 12px;
  line-height: 1.35;
}
:where(html.pg-dashboard) .db-wx-where{
  color: var(--c-muted);
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-aqi[hidden]{
  display: none;
}
:where(html.pg-dashboard) .db-wx-days{
  display: flex;
  gap: 6px;
  padding-left: 16px;
  border-left: 1px solid var(--c-line, #e6e8ef);
}
:where(html.pg-dashboard) .db-wx-day{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 68px;
  padding: 4px 6px;
  border-radius: 10px;
  background: var(--c-fill, #f5f5f9);
  font-size: 11px;
  color: var(--c-muted);
}
:where(html.pg-dashboard) .db-wx-dtemp{
  color: var(--c-title);
  font-size: 13px;
}
:where(html.pg-dashboard) .db-wx-drain.is-high{
  color: var(--c-stop, #d64545);
  font-weight: 600;
}
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-dashboard) .db-head-side{
    align-items: stretch;
    width: 100%;
  }
  :where(html.pg-dashboard) .db-wxbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  :where(html.pg-dashboard) .db-wx-days{
    padding-left: 0;
    border-left: 0;
  }
  :where(html.pg-dashboard) .db-wx-day{
    flex: 1 1 0;
    min-width: 0;
  }
  :where(html.pg-dashboard) .db-updated{
    align-self: flex-end;
  }
}

/* the notification pop-up on desktop / a phone on its side: a compact card
   in the top-right corner, not a bar across the whole screen (owner,
   2026-11-08: "see notification size error"); phones keep it full width */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .toast{
    left: auto !important;
    right: 12px !important;
    top: 12px !important;
    bottom: auto !important;
    width: min(440px, calc(100% - 24px)) !important;
    max-width: 440px !important;
  }
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .toast{
    box-sizing: border-box; /* the 440px includes its padding */
  }
}
/* the header in ONE row on desktop (owner, 2026-11-08: "not to waste space —
   single, fit properly in the top bar"): greeting · weather · Updated, all
   centred on one line; the weather bar a size more compact */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-dashboard) .db-head{
    flex-wrap: nowrap;
    align-items: center;
  }
  :where(html.pg-dashboard) .db-head-side{
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }
  :where(html.pg-dashboard) .db-updated{
    white-space: nowrap;
  }
  :where(html.pg-dashboard) .db-wxbar{
    gap: 12px;
    padding: 6px 10px;
    border-radius: 12px;
  }
  :where(html.pg-dashboard) .db-wx-t{
    font-size: 20px;
  }
  :where(html.pg-dashboard) .db-wx-days{
    padding-left: 12px;
  }
  :where(html.pg-dashboard) .db-wx-day{
    min-width: 0;
    padding: 2px 8px;
    flex-direction: row;
    gap: 6px;
    background: transparent;
  }
}
/* the header, tidied (owner, 2026-11-08): "Good evening, <account>" on ONE
   line; the Updated time small in the top-right corner; the weather bar's
   days each on one line, the area text cut with "…" (it ran under the AQI) */
:where(html.pg-dashboard) .db-head{
  position: relative;
  padding-top: 18px;
}
:where(html.pg-dashboard) .db-head > div:first-child{
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-head .db-hello::after{
  content: ",";
}
:where(html.pg-dashboard) .db-head .db-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-head .db-updated{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 11px;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-wx-what{
  max-width: 230px;
}
:where(html.pg-dashboard) .db-wx-what > span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-wx-day,
:where(html.pg-dashboard) .db-wx-day > *{
  white-space: nowrap;
}
:where(html.pg-dashboard) .db-wx-day{
  align-items: baseline;
}
/* the header, final (owner, 2026-11-08: "so much space on top; greeting and
   account name above the forecast"): row 1 — "Good evening, <account>" left,
   Updated right; row 2 — the weather bar, full width. Every screen size. */
:where(html.pg-dashboard) .db-head{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hello updated" "wx wx";
  align-items: center;
  gap: 8px 12px;
  padding-top: 0;
}
:where(html.pg-dashboard) .db-head > div:first-child{
  grid-area: hello;
}
:where(html.pg-dashboard) .db-head-side{
  display: contents;
}
:where(html.pg-dashboard) .db-head .db-updated{
  grid-area: updated;
  position: static;
  align-self: center;
}
:where(html.pg-dashboard) .db-head .db-wxbar{
  grid-area: wx;
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-dashboard) .db-wx-days{
    margin-left: auto;
  }
  :where(html.pg-dashboard) .db-wx-what{
    max-width: none;
  }
}
/* less room above the greeting (owner, 2026-11-08): the body's own 24px
   padding came on top of the dashboard's — the dashboard's padding alone */
:where(html.pg-dashboard) body{
  padding: 0 !important;
}
:where(html.pg-dashboard) .db{
  padding-top: 12px;
}
/* Help near a vehicle: the two dropdowns side by side (stacked on a phone) */
:where(html.pg-dashboard) .db-help-pick{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-dashboard) .db-help-pick{
    grid-template-columns: 1fr;
  }
}
:where(html.pg-dashboard) #dbHelp:empty,
:where(html.pg-dashboard) #dbHelp > .db-empty:empty{
  display: none;
}

/* ══ One type size on the regular pages (owner, 2026-11-08: "make all fonts
   standard", "same size as the menu bar") — the live map page, Dashboard,
   History, Reports. The menu bar's sizes are the standard: 14px for a value
   / a row / a button, 13px for secondary lines, 11px for the small caps
   labels, Poppins. School / service keep theirs (not these pages).
   One exception, phones only: a box you TYPE into (a search, a date) stays
   16px — an iPhone zooms the whole page into a typed box under 16px. ══ */
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) input.ec-dd.ec-dd.ec-dd.ec-dd,
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) input.ec-dd.ec-dd.ec-dd.ec-dd::placeholder{
  font-size: 14px;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) .ec-dd-pop .ec-dd-item.ec-dd-item{
  padding: 8px 10px;
  font-size: 14px;
}
:where(html.pg-history, html.pg-report) .form-group.outlined input:not(.ec-dd),
:where(html.pg-history, html.pg-report) .form-group.outlined select,
:where(html.pg-history, html.pg-report) input[type="datetime-local"],
:where(html.pg-dashboard) .db-find-form input{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
}
:where(html.pg-history, html.pg-report) .form-group.outlined label{
  font-size: 11px;
}
:where(html.pg-history, html.pg-report, html.pg-dashboard) button,
:where(html.pg-history, html.pg-report) .h-day-btn,
:where(html.pg-history, html.pg-report) .rpt-chip{
  font-family: "Poppins", sans-serif;
}
@media (pointer: fine) {
  :where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) .ec-dd-pop input.ec-dd-q{
    font-size: 14px;
  }
}
@media (pointer: coarse) {
  /* typed boxes on a phone: 16px (no iPhone zoom) */
  :where(html.pg-history, html.pg-report) .form-group.outlined input:not(.ec-dd),
  :where(html.pg-history, html.pg-report) input[type="datetime-local"],
  :where(html.pg-dashboard) .db-find-form input{
    font-size: 16px;
  }
}

/* ══ History on a desktop: ONE card (owner, 2026-11-08: "in history the card
   is split — on desktop make it single"): the search card runs the full
   height on the left and the player is its footer (same width, a hairline
   instead of a gap); the search, summary and timeline scroll inside. A phone
   (and a short phone on its side) keeps its layout. ══ */
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  :where(html.pg-history) .replay-panel{
    top: 10px !important;
    left: 10px !important;
    bottom: 10px !important;
    width: 340px !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 118px !important; /* the player below */
    overflow-y: auto !important;
    box-sizing: border-box;
  }
  :where(html.pg-history) .player-bar{
    left: 10px !important;
    right: auto !important;
    bottom: 10px !important;
    width: 340px !important;
    box-sizing: border-box;
    border-radius: 0 0 14px 14px !important;
    border-top: 1px solid var(--c-line) !important;
    box-shadow: none !important;
    z-index: 3;
  }
}

/* History and Reports on a desktop: the search card is a flush panel like the
   menu bar (owner, 2026-11-08: "same as the menu bar — no padding outside"):
   top to bottom, against the menu, square, one hairline on its right edge */
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  :where(html.pg-history) .replay-panel,
  :where(html.pg-report) .search-panel{
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    box-sizing: border-box;
  }
  :where(html.pg-history) .player-bar{
    left: 0 !important;
    bottom: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--c-line, #e6e8ef) !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
  }
}
/* History's panel the same width as Reports' (25vw of the page, owner
   2026-11-08: "Reports is right, History looks wider") — the player too */
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  :where(html.pg-history) .replay-panel,
  :where(html.pg-history) .player-bar{
    width: 25vw !important;
    min-width: 280px;
  }
}
/* History and Reports on a desktop / a phone on its side: no ← in the panel's
   header (owner, 2026-11-08) — the menu moves between screens; only the
   filter button that shows / hides the search stays. Phones keep both. */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-history, html.pg-report) .replay-header [data-act="goBack"]{
    visibility: hidden;
    pointer-events: none;
  }
}
@media (orientation: landscape), (min-width: 900px) {
  /* the filter toggle goes too on a desktop (owner, 2026-11-08: "remove this
     filter button for desktop in both history and report") — the title alone */
  :where(html.pg-history, html.pg-report) .replay-header [data-act="toggleReplayBody"]{
    visibility: hidden;
    pointer-events: none;
  }
}
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  /* the report itself flush beside the search panel (owner: "no padding
     outside"): from the panel's edge to the screen's, top to bottom, square */
  :where(html.pg-report) .report-panel{
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: max(25vw, 280px) !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* the History player on one line at the panel's width: smaller step
     buttons, the speed on one line */
  :where(html.pg-history) .player-controls{
    flex-wrap: nowrap !important;
    gap: 6px;
  }
  :where(html.pg-history) .player-buttons{
    flex-wrap: nowrap !important;
    gap: 2px !important;
    min-width: 0;
  }
  :where(html.pg-history) .player-buttons button:not(#playBtn){
    font-size: 20px !important;
    padding: 0 4px !important;
  }
  :where(html.pg-history) .speed-indicator{
    flex: none;
    white-space: nowrap;
    font-size: 12px;
  }
}
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  /* an older rule gave the report a fixed width / height: let the four edges decide */
  :where(html.pg-report) .report-panel{
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
  /* the step buttons are a row (they were inline, so they wrapped like words) */
  :where(html.pg-history) .player-buttons{
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }
}
/* History / Reports header on a desktop (owner, 2026-11-08: "put the logo
   in the header, reduce the height, both the same look"): the other panels'
   top bar — white, the page icon in brand colour and the title on the left,
   56px, a hairline under it. A phone keeps its centred title (no icon). */
:where(html.pg-history, html.pg-report) .lt-head-ic{
  display: none;
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-history, html.pg-report) .replay-header{
    display: flex !important;
    align-items: center;
    height: 56px !important;
    min-height: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box;
    background: #fff !important;
    border-bottom: 1px solid var(--c-line, #e6e8ef) !important;
  }
  :where(html.pg-history, html.pg-report) .replay-header [data-act="goBack"]{
    display: none !important;
  }
  :where(html.pg-history, html.pg-report) .replay-header > div:last-child{
    display: none !important;
  }
  :where(html.pg-history, html.pg-report) .lt-head-title{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
  }
  :where(html.pg-history, html.pg-report) .lt-head-ic{
    display: inline-block;
    color: var(--c-brand, #696cff);
    font-size: 20px;
  }
  :where(html.pg-history, html.pg-report) .lt-head-title b{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--c-title, #2b2c40);
  }
}
/* the History play button without its filled circle (owner, 2026-11-08): a
   plain glyph like the step buttons, in the brand colour */
:where(html.pg-history) #playBtn{
  width: auto !important;
  height: auto !important;
  padding: 0 6px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--c-brand, #696cff) !important;
  font-size: 30px !important;
}
:where(html.pg-history) #playBtn i{
  color: inherit !important;
}
/* the History / Reports title centred in its header (owner, 2026-11-08) */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-history, html.pg-report) .replay-header{
    justify-content: center !important;
  }
  :where(html.pg-history, html.pg-report) .lt-head-title{
    margin: 0 auto !important;
  }
}
/* the flush History / Reports layout on EVERY desktop window, short ones too
   (owner, 2026-11-08: "I said no padding outside" — a laptop at 125-150%
   scaling is under 501px high and fell into the phone-on-its-side rules).
   A short window with a mouse (pointer: fine) is a desktop, not a phone. */
@media (min-width: 900px), ((orientation: landscape) and (pointer: fine)) {
  :where(html.pg-history) .replay-panel,
  :where(html.pg-report) .search-panel{
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: max(25vw, 280px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    box-sizing: border-box;
  }
  :where(html.pg-history) .replay-panel{
    padding-bottom: 118px !important;
  }
  :where(html.pg-history) .player-bar{
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: max(25vw, 280px) !important;
    box-sizing: border-box;
    border: 0 !important;
    border-top: 1px solid var(--c-line, #e6e8ef) !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 3;
  }
  :where(html.pg-report) .report-panel{
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: max(25vw, 280px) !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
/* the History player on one line on every desktop window (owner,
   2026-11-08): the five buttons evenly spread, the speed a fixed pill on the
   right — a gauge icon + "1x" / "10x" (js/page-history.js; the title says
   "Speed: …"), so two digits never wrap */
@media (min-width: 900px), ((orientation: landscape) and (pointer: fine)) {
  :where(html.pg-history) .player-controls{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
  }
  :where(html.pg-history) .player-buttons{
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between !important;
    min-width: 0;
  }
  :where(html.pg-history) .player-buttons button:not(#playBtn){
    font-size: 20px !important;
    padding: 0 2px !important;
  }
  :where(html.pg-history) .speed-indicator{
    display: inline-flex !important;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 58px;
    height: 26px;
    padding: 0 8px;
    box-sizing: border-box;
    border-radius: 13px;
    background: var(--c-brand-tint, #ececff);
    color: var(--c-brand, #696cff);
    font-size: 12px !important;
    font-weight: 600;
    white-space: nowrap;
  }
}
:where(html.pg-history) .speed-indicator::before{
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0M288 96a32 32 0 1 0-64 0a32 32 0 1 0 64 0m-32 320c35.3 0 64-28.7 64-64c0-17.4-6.9-33.1-18.1-44.6L366 161.7c5.3-12.1-.2-26.3-12.3-31.6s-26.3.2-31.6 12.3L257.9 288H256c-35.3 0-64 28.7-64 64s28.7 64 64 64m-80-272a32 32 0 1 0-64 0a32 32 0 1 0 64 0M96 288a32 32 0 1 0 0-64a32 32 0 1 0 0 64m352-32a32 32 0 1 0-64 0a32 32 0 1 0 64 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M0 256a256 256 0 1 1 512 0a256 256 0 1 1-512 0M288 96a32 32 0 1 0-64 0a32 32 0 1 0 64 0m-32 320c35.3 0 64-28.7 64-64c0-17.4-6.9-33.1-18.1-44.6L366 161.7c5.3-12.1-.2-26.3-12.3-31.6s-26.3.2-31.6 12.3L257.9 288H256c-35.3 0-64 28.7-64 64s28.7 64 64 64m-80-272a32 32 0 1 0-64 0a32 32 0 1 0 64 0M96 288a32 32 0 1 0 0-64a32 32 0 1 0 0 64m352-32a32 32 0 1 0-64 0a32 32 0 1 0 64 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 900px), ((orientation: landscape) and (pointer: fine)) {
  /* the row takes only the room left of the speed pill (an older rule fixed its width) */
  :where(html.pg-history) .player-buttons{
    width: auto !important;
    max-width: none !important;
    flex: 1 1 0 !important;
    margin: 0 !important;
  }
  :where(html.pg-history) .player-buttons button{
    margin: 0 !important;
    min-width: 0 !important;
  }
}
/* History: the Map buttons chooser (owner, 2026-11-08) — a folding section
   of ticks in the search panel */
:where(html.pg-history) .h-mapbtns{
  margin-top: 14px;
  border-top: 1px solid var(--c-line, #e6e8ef);
  padding-top: 10px;
}
:where(html.pg-history) .h-mapbtns > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--c-muted, #7a8191);
  font: 600 11px / 1.3 "Poppins", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
:where(html.pg-history) .h-mapbtns > summary::-webkit-details-marker{
  display: none;
}
:where(html.pg-history) .h-mapbtns > summary::after{
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
:where(html.pg-history) .h-mapbtns:not([open]) > summary::after{
  transform: rotate(-45deg);
}
:where(html.pg-history) .h-mapbtns-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin-top: 10px;
}
:where(html.pg-history) .h-mapbtn{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--c-text, #4b5160);
  font: 400 13px / 1.3 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-history) .h-mapbtn input{
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-brand, #696cff);
}
:where(html.pg-history) .h-mapbtn span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the chooser: one column, each row the button's own icon tile (owner) */
:where(html.pg-history) .h-mapbtns-list{
  grid-template-columns: 1fr;
  gap: 6px;
}
:where(html.pg-history) .h-mapbtn{
  gap: 10px;
}
:where(html.pg-history) .h-mapbtn-ic{
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background-color: var(--c-brand, #696cff);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  /* the map glyphs are dark: shown white on the brand tile, as on the map */
  background-blend-mode: normal;
}
:where(html.pg-history) .h-mapbtn-ic[style*="background-image"]{
  background-color: var(--c-brand, #696cff);
}
/* the glyph white on the brand tile, as on the map (the map draws them dark
   and turns them white the same way) */
:where(html.pg-history) .h-mapbtn-ic{
  position: relative;
  background-image: none !important;
}
:where(html.pg-history) .h-mapbtn-ic::before{
  content: "";
  position: absolute;
  inset: 5px;
  background-image: var(--img, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1);
}

/* History on a desktop: the optional map buttons as chips along the bottom
   of the map (owner, 2026-11-08) — icon + name, wrapping; the same buttons
   (js/page-history.js setupMapButtonChips moves them into #hChipBar) */
:where(html.pg-history) .h-chipbar{
  display: none;
}
:where(html.pg-history) .h-chip-name{
  display: none;
}
:where(html.pg-history.h-chips-on) .h-chipbar{
  position: absolute;
  left: calc(max(25vw, 280px) + 10px);
  right: 60px;
  bottom: 10px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *{
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  float: none !important;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(34, 48, 62, 0.18);
  border-radius: 16px !important;
  overflow: hidden;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: 32px !important;
  padding: 0 12px 0 32px !important;
  border-radius: 16px !important;
  white-space: nowrap;
}
:where(html.pg-history.h-chips-on) .h-chipbar button::before{
  left: 10px !important;
  top: 8px !important;
  width: 16px !important;
  height: 16px !important;
  right: auto !important;
  bottom: auto !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar .h-chip-name{
  display: inline;
  color: #fff;
  font: 600 12px / 1 "Poppins", sans-serif;
}
/* the chips sit in ONE white card at the bottom of the map, like the vehicle
   info card (owner, 2026-11-08: "bottom of the map, the extra buttons in a
   card, like the info bar"): centred, as wide as its chips */
:where(html.pg-history.h-chips-on) .h-chipbar{
  width: fit-content;
  max-width: calc(100% - max(25vw, 280px) - 70px);
  margin-inline: auto;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid var(--c-line, #e6e8ef);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(34, 48, 62, 0.2);
  pointer-events: auto;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *{
  box-shadow: none;
}
:where(html.pg-history.h-chips-on) .h-chipbar:not(:has(> :not([style*="display: none"]))){
  display: none;
}
/* 3D terrain (maplibre's own control) draws its glyph on an inner span:
   placed where the other chips have theirs, white */
:where(html.pg-history.h-chips-on) .h-chipbar #toggleTerrainBtn > .maplibregl-ctrl-icon{
  position: absolute !important;
  left: 8px !important;
  top: 6px !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  background-size: contain !important;
  filter: brightness(0) invert(1);
}
/* the chips compact, like the vehicle card's info chips (owner, 2026-11-08):
   24px, 11px text, a light brand tint, the icon and name in brand colour */
:where(html.pg-history.h-chips-on) .h-chipbar{
  gap: 5px;
  padding: 6px 8px;
  border-radius: 12px;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *{
  border-radius: 12px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  height: 24px !important;
  padding: 0 9px 0 25px !important;
  border-radius: 12px !important;
  background-color: var(--c-brand-tint, #ececff) !important;
  box-shadow: none !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button::before,
:where(html.pg-history.h-chipbar-x) .x{
  left: 8px !important;
  top: 6px !important;
  width: 12px !important;
  height: 12px !important;
  /* the glyph in brand blue (#696cff) */
  filter: brightness(0) saturate(100%) invert(43%) sepia(75%) saturate(2650%) hue-rotate(227deg) brightness(101%) contrast(101%) !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar #toggleTerrainBtn > .maplibregl-ctrl-icon{
  left: 6px !important;
  top: 4px !important;
  width: 16px !important;
  height: 16px !important;
  filter: brightness(0) saturate(100%) invert(43%) sepia(75%) saturate(2650%) hue-rotate(227deg) brightness(101%) contrast(101%) !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar .h-chip-name{
  color: var(--c-brand, #696cff);
  font-size: 11px;
}
/* no leftover button border / shadow under a chip */
:where(html.pg-history.h-chips-on) .h-chipbar > *,
:where(html.pg-history.h-chips-on) .h-chipbar button{
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
  background-color: var(--c-brand-tint, #ececff) !important;
}
/* the inner control group (purple, 30px) peeked under each 24px chip */
:where(html.pg-history.h-chips-on) .h-chipbar .maplibregl-ctrl-group,
:where(html.pg-history.h-chips-on) .h-chipbar > *{
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* the chip card tight (owner, 2026-11-08: "too much space wasted, make it
   compact"): every wrapper exactly the chip's 24px, 4px between chips and
   rows, a slim card */
:where(html.pg-history.h-chips-on) .h-chipbar{
  gap: 4px !important;
  padding: 5px 6px !important;
  border-radius: 10px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *,
:where(html.pg-history.h-chips-on) .h-chipbar .maplibregl-ctrl-group{
  display: flex !important;
  height: 24px !important;
  min-height: 0 !important;
  max-height: 24px !important;
  width: auto !important;
  line-height: 24px;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  padding: 0 8px 0 23px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *,
:where(html.pg-history.h-chips-on) .h-chipbar .maplibregl-ctrl-group{
  align-items: center !important;
  overflow: visible !important;
  margin: 0 !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
}
/* no card — one row of chips on the map (owner, 2026-11-08: "single row
   without card"): white chips with a light shadow, scrolling sideways if
   the window is too narrow (no scrollbar shown) */
:where(html.pg-history.h-chips-on) .h-chipbar{
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
  pointer-events: auto;
}
:where(html.pg-history.h-chips-on) .h-chipbar::-webkit-scrollbar{
  display: none;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *{
  flex: none;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  background-color: #fff !important;
  box-shadow: 0 1px 6px rgba(34, 48, 62, 0.22) !important;
}
/* the chip row wraps to a second row when it does not fit (owner,
   2026-11-08), centred; the glyphs fitted whole into their 14px box (they
   were drawn larger and cropped) */
:where(html.pg-history.h-chips-on) .h-chipbar{
  flex-wrap: wrap !important;
  justify-content: center !important;
  overflow: visible !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button::before{
  top: 5px !important;
  left: 7px !important;
  width: 14px !important;
  height: 14px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  padding-left: 26px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar #toggleTerrainBtn > .maplibregl-ctrl-icon{
  top: 5px !important;
  left: 7px !important;
  width: 14px !important;
  height: 14px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* the chips to the right; when they do not fit, the extra ones go to a row
   ABOVE (owner, 2026-11-08: "align right, remaining buttons to the top") */
:where(html.pg-history.h-chips-on) .h-chipbar{
  flex-wrap: wrap-reverse !important;
  justify-content: flex-end !important;
  margin-inline: 0 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
/* right up to the map edge (10px, like the map buttons) — the button column ends well above */
:where(html.pg-history.h-chips-on) .h-chipbar{
  right: 10px !important;
  max-width: calc(100% - max(25vw, 280px) - 20px) !important;
}
/* an unticked button stays hidden as a chip too (the chip rule above forced
   display: flex over the chooser's display: none) */
:where(html.pg-history.h-chips-on) .h-chipbar > [style*="display: none"]{
  display: none !important;
}

/* ══ Geofence cards in the school look (owner, 2026-11-08) — a copy of
   school's rules for the regular page: the map snap on the left, "1. Name"
   (+ Private / Synced) and the actions as labelled chips; Show on map
   (js/livetracking-ui.js regularCards). ══ */
:where(html.pg-livetracking) #geofenceList .geofence-item{
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(html.pg-livetracking) .geofence-item .geo-thumb{
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #e9ecf2;
  border: 1px solid var(--c-line, #e6e8ef);
}
:where(html.pg-livetracking) .geofence-item .geo-thumb canvas{
  display: block;
  width: 72px;
  height: 72px;
}
:where(html.pg-livetracking) .geofence-item .geofence-row{
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px;
}
:where(html.pg-livetracking) .geofence-item .geofence-name{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--c-title, #2b2c40);
  font-size: 14px;
  font-weight: 600;
}
:where(html.pg-livetracking) .geofence-item .geofence-name[data-sr]::before{
  content: attr(data-sr) ".";
  flex-shrink: 0;
  color: var(--c-muted, #7a8191);
  font-weight: 600;
}
:where(html.pg-livetracking) .geofence-item .geofence-button-group{
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}
:where(html.pg-livetracking) .geofence-item .geofence-button-group button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 10px;
  background: var(--c-fill, #f1f2f7) !important;
  color: var(--c-text, #4b5160);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
:where(html.pg-livetracking) .geofence-item .geofence-button-group button i{
  font-size: 11px;
}
:where(html.pg-livetracking) .geofence-item .geofence-vis-btn::after{ content: "Hide"; }
:where(html.pg-livetracking) .geofence-item.hidden-on-map .geofence-vis-btn::after{ content: "Show"; }
:where(html.pg-livetracking) .geofence-item .edit-geofence-btn::after{ content: "Rename"; }
:where(html.pg-livetracking) .geofence-item .delete-geofence-btn::after{ content: "Delete"; }
:where(html.pg-livetracking) .geofence-item .geofence-notif-btn::after{ content: "Notifications"; }
:where(html.pg-livetracking) .geofence-item .geofence-notif-btn:has(.fa-bell-slash)::after{ content: "Muted"; }
:where(html.pg-livetracking) .geofence-item .geofence-button-group .delete-geofence-btn,
:where(html.pg-livetracking) .geofence-item .geofence-button-group .delete-geofence-btn i{
  color: #d64545;
}
/* the Show on map chip (geofence, notification and vehicle cards) */
:where(html.pg-livetracking) .lt-show-map{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--c-fill, #f1f2f7);
  color: var(--c-brand, #696cff) !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
:where(html.pg-livetracking) .geofence-item .geofence-button-group .lt-show-map{
  flex: 1 1 auto;
}
:where(html.pg-livetracking) .lt-show-map i{
  font-size: 12px;
}
:where(html.pg-livetracking) .geofence-pagination[hidden]{
  display: none !important;
}

/* ══ Notification cards in the school look (owner, 2026-11-08): compact, a
   neutral border (the event colour stays on the icon tile and the title),
   small chips, the Seen pill pinned top-right, Show on map in the chip row ══ */
:where(html.pg-livetracking) #notificationList .notification-item{
  position: relative;
  padding: 9px 12px 10px !important;
  margin-bottom: 10px;
  border: 1px solid var(--c-line, #e6e8ef) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
:where(html.pg-livetracking) #notificationList .notification-item .vehicle-header{
  min-height: 0;
  padding-right: 60px;
  gap: 8px;
}
:where(html.pg-livetracking) #notificationList .notification-item .vehicle-logo,
:where(html.pg-livetracking) #notificationList .notification-item .da-alert-icon{
  flex: none;
  width: 30px !important;
  height: 30px !important;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 13px;
}
:where(html.pg-livetracking) #notificationList .notification-item .vehicle-info strong{
  color: var(--c-title, #2b2c40);
  font-size: 14px;
  font-weight: 600;
}
:where(html.pg-livetracking) #notificationList .notification-item .notification-title{
  font-size: 12px;
  font-weight: 600;
}
:where(html.pg-livetracking) #notificationList .notification-item .notification-body{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
:where(html.pg-livetracking) #notificationList .notification-item .notif-chip{
  padding: 2px 7px;
  font-size: 11px;
}
:where(html.pg-livetracking) #notificationList .notification-item .notif-seen-tag{
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  padding: 2px 6px;
  font-size: 11px;
}

/* ══ Vehicle cards (owner, 2026-11-08 — as school): the chosen vehicle wears
   a "Selected" ribbon on its top-right corner, a brand border and tint; Show
   on map in the chip row ══ */
:where(html.pg-livetracking) #showVehicleList .vehicleList{
  position: relative;
  overflow: hidden;
}
:where(html.pg-livetracking) #showVehicleList .vehicleList.selected{
  padding-top: 24px !important;
  border-color: var(--c-brand, #696cff) !important;
  background-color: #f6f6ff !important;
  box-shadow: none !important;
}
:where(html.pg-livetracking) #showVehicleList .vehicleList.selected::before{
  content: "Selected";
  position: absolute;
  top: 0;
  right: 14px;
  padding: 3px 10px 4px;
  border-radius: 0 0 8px 8px;
  background: var(--c-brand, #696cff);
  color: #fff;
  font: 700 11px / 1.3 "Poppins", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
:where(html.pg-livetracking) #showVehicleList .vehicleList .lt-show-map{
  height: 22px;
  padding: 0 8px;
  border-radius: 8px;
}

/* ══ Geofence mode (owner, 2026-11-09): while the Geofences panel is open the
   map shows geofences only — no vehicles, tails, info card or capsule — and
   the panel offers Draw a geofence / Set my geofence (js/livetracking-ui.js) ══ */
:where(html.pg-livetracking.lt-geo-mode) .vehicleMarkerEL,
:where(html.pg-livetracking.lt-geo-mode) .vehicleMarkerEL1,
:where(html.pg-livetracking.lt-geo-mode) #showSingleVehicle,
:where(html.pg-livetracking.lt-geo-mode) .lt-capsule{
  display: none !important;
}
:where(html.pg-livetracking) .lt-geo-tools{
  display: flex;
  gap: 8px;
  margin: 2px 0 10px;
}
:where(html.pg-livetracking) .lt-geo-tool{
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: var(--c-brand-tint, #ececff);
  color: var(--c-brand, #696cff);
  font: 600 12px / 1 "Poppins", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-geo-tool:first-child{
  background: var(--c-brand, #696cff);
  color: #fff;
}

/* ══ geofences.html — the regular Geofences page (owner, 2026-11-09), opened
   in a frame like History / Reports. It carries pg-livetracking too (the same
   panel, card and map-button rules), so only the layout differs here: no menu,
   no tab bar; on a desktop the list is a flush panel on the left (as History's
   search panel) and the map fills the rest; on a phone the map is on top and
   the list a sheet below. Map buttons a geofence page has no use for go. ══ */
:root:where(.pg-geofences){
  --lt-menu-x: 0px !important;
  --lt-bottom: 0px !important;
}
:where(html.pg-geofences) #map{
  left: 0 !important;
  bottom: 0 !important;
}
:where(html.pg-geofences) #ETAButton,
:where(html.pg-geofences) #traffic,
:where(html.pg-geofences) #showAllVehicles,
:where(html.pg-geofences) #GeofenceBtn,
:where(html.pg-geofences) #toggleAudioBtn,
:where(html.pg-geofences) #notificationSidebarButton,
:where(html.pg-geofences) .lt-map-attrib,
:where(html.pg-geofences) .lt-attrib-btn{
  display: none !important;
}
:where(html.pg-geofences) #geofence-sidebar{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: max(25vw, 280px) !important;
  max-width: none !important;
  transform: none !important;
  z-index: 20;
  border-right: 1px solid var(--c-line, #e6e8ef);
  box-shadow: none !important;
}
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-geofences) #geofence-sidebar{
    top: auto !important;
    right: 0 !important;
    width: auto !important;
    height: 58vh !important;
    border-right: 0;
    border-top: 1px solid var(--c-line, #e6e8ef);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 20px rgba(34, 48, 62, 0.12) !important;
  }
}
/* the Geofences page's frame: over the map like History / Reports */
:where(html.pg-livetracking) #geofencesModal{
  position: absolute;
  inset: 0;
  z-index: 25;
  background: #f5f5f9;
}
:where(html.pg-livetracking) #geofencesModal iframe{
  width: 100%;
  height: 100%;
  border: 0;
}
/* Sign out at the foot of Settings, compact (owner, 2026-11-08: "reduce the
   size of the sign out button — all users"): content-width, centred, smaller */
:where(html.pg-livetracking) .st-signout,
:where(html.pg-livetracking) #ltSettingsContent .st-signout{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 140px;
  margin: 10px auto 24px;
  padding: 7px 20px;
  border-width: 1px;
  border-radius: 10px;
  font-size: 13px;
}
/* History / Reports: Show and Clear compact, as the Sign out button (owner,
   2026-11-09: "these buttons the same treatment") — 34px, 13px text, normal
   case; Show keeps the room, Clear its own width */
:where(html.pg-history, html.pg-report) .show-btn,
:where(html.pg-history, html.pg-report) .clear-btn,
:where(html.pg-history, html.pg-report) .stop-btn{
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
}
:where(html.pg-history, html.pg-report) .show-btn::first-letter,
:where(html.pg-history, html.pg-report) .clear-btn::first-letter,
:where(html.pg-history, html.pg-report) .stop-btn::first-letter{
  text-transform: uppercase;
}
:where(html.pg-history, html.pg-report) .show-btn,
:where(html.pg-history, html.pg-report) .clear-btn,
:where(html.pg-history, html.pg-report) .stop-btn{
  text-transform: lowercase !important;
}
/* geofences.html: the list the same size as the Notifications panel (owner,
   2026-11-09: "the size of the geofence tab like the notification tab") —
   the 420px drawer of the main page's panels (360px on a short landscape phone) */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-geofences) #geofence-sidebar{
    width: min(420px, 100%) !important;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-geofences) #geofence-sidebar{
    width: min(360px, 100%) !important;
  }
}
/* Live tracking: no My geofence (house) and no drawing tools (polygon + delete)
   on its map (owner, 2026-11-09) — geofences are made on the Geofences page
   (geofences.html), which keeps them. The column re-measures itself
   (script.js syncAppButtonBase observes the stack). */
:where(html.pg-livetracking:not(.pg-geofences)) #myGeofenceButton,
:where(html.pg-livetracking:not(.pg-geofences)) .maplibregl-ctrl-group:has(.mapbox-gl-draw_polygon){
  display: none !important;
}
/* Geofences page: My geofence (house) its own button, apart from the drawing
   tools (owner, 2026-11-09: "separate the my geofence button") — a 10px gap,
   the column's rhythm, and its own rounded corners */
:where(html.pg-geofences) #myGeofenceButton{
  border-radius: 8px !important;
}
:where(html.pg-geofences) .maplibregl-ctrl-group:has(.mapbox-gl-draw_polygon){
  transform: translateY(10px);
}
/* the two now separate look like every other map button (owner, 2026-11-09:
   "correct it"): the house loses the inset line it had for joining the draw
   group, the draw group gets its top corners back */
:where(html.pg-geofences) #myGeofenceButton{
  border-radius: 6px !important;
  box-shadow: none !important;
}
:where(html.pg-geofences) .maplibregl-ctrl-group:has(.mapbox-gl-draw_polygon){
  border-radius: 6px !important;
  overflow: hidden;
}
/* Geofences top bar: the "Private" switch in place of the filter button
   (owner, 2026-11-09) — a small switch + its word, left of the ×; the
   filter row it used to open stays hidden */
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-toggle{
  position: absolute;
  top: 10px;
  right: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px;
  color: var(--c-text, #4b5160);
  font: 600 12px / 1 "Poppins", sans-serif;
  cursor: pointer;
  user-select: none;
}
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-track{
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: #d9dbe3;
  transition: background 0.15s ease;
}
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease;
}
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-toggle.is-on .lt-priv-track{
  background: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-toggle.is-on .lt-priv-thumb{
  left: 15px;
}
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-toggle.is-on{
  color: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #geofence-sidebar .lt-priv-toggle{
  top: 8px; /* level with the × (measured) */
}
/* each geofence card: a Private | Server switch on its name line (owner,
   2026-11-09) — the side it is on is filled; the old Private / Synced badge
   goes (the switch says it) */
:where(html.pg-livetracking) #geofenceList .geofence-item .geo-badge{
  display: none !important;
}
:where(html.pg-livetracking) #geofenceList .geofence-name{
  flex-wrap: nowrap;
}
:where(html.pg-livetracking) .lt-geo-sync{
  display: inline-flex;
  flex: none;
  margin-left: auto;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--c-fill, #f1f2f7);
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-geo-sync-opt{
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--c-muted, #7a8191);
  font: 600 10px / 1.2 "Poppins", sans-serif;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
}
:where(html.pg-livetracking) .lt-geo-sync:not(.is-server) .lt-geo-sync-private,
:where(html.pg-livetracking) .lt-geo-sync.is-server .lt-geo-sync-server{
  background: var(--c-brand, #696cff);
  color: #fff;
}

/* Regular: the "Sync to server" checkboxes (new-geofence name, rename, edit
   bar) are gone — each geofence card's Private | Server switch does it
   (owner, 2026-11-09). Hidden, they keep the geofence's current state; a new
   geofence starts private. */
:where(html.pg-livetracking) .geofence-sync-row,
:where(html.pg-livetracking) #geofenceEditSyncWrap{
  display: none !important;
}

/* ══ notifications.html — the regular Notifications page (owner, 2026-11-09),
   as geofences.html: opened in a frame over Live tracking; on a desktop the
   list a 420px flush panel on the left and the map the rest; on a phone the
   map on top, the list a sheet below. The (hidden) Geofences panel is there
   only for script.js to draw the map's geofences. ══ */
:root:where(.pg-notifications){
  --lt-menu-x: 0px !important;
  --lt-bottom: 0px !important;
}
:where(html.pg-notifications) #map{
  left: 0 !important;
  bottom: 0 !important;
}
:where(html.pg-notifications) #geofence-sidebar,
:where(html.pg-notifications) #myGeofenceButton,
:where(html.pg-notifications) .maplibregl-ctrl-group:has(.mapbox-gl-draw_polygon),
:where(html.pg-notifications) #ETAButton,
:where(html.pg-notifications) #traffic,
:where(html.pg-notifications) #showAllVehicles,
:where(html.pg-notifications) #toggleAudioBtn,
:where(html.pg-notifications) #notificationSidebarButton,
:where(html.pg-notifications) .lt-map-attrib,
:where(html.pg-notifications) .lt-attrib-btn{
  display: none !important;
}
:where(html.pg-notifications) #notification-sidebar{
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: min(420px, 100%) !important;
  max-width: none !important;
  transform: none !important;
  z-index: 20;
  border-right: 1px solid var(--c-line, #e6e8ef);
  box-shadow: none !important;
}
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-notifications) #notification-sidebar{
    width: min(360px, 100%) !important;
  }
}
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-notifications) #notification-sidebar{
    top: auto !important;
    right: 0 !important;
    width: auto !important;
    height: 58vh !important;
    border-right: 0;
    border-top: 1px solid var(--c-line, #e6e8ef);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 20px rgba(34, 48, 62, 0.12) !important;
  }
}
/* its frame on Live tracking: over the map, as Geofences */
:where(html.pg-livetracking) #notificationsModal{
  position: absolute;
  inset: 0;
  z-index: 25;
  background: #f5f5f9;
}
:where(html.pg-livetracking) #notificationsModal iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

/* ══ History chips (owner, 2026-11-09): "why do they look grey — colour them
   properly; no data / no action possible → grey, text too, like the inactive
   vehicle chip; count badges". Switched off but usable = the normal brand chip
   (the old #ddd off-grey is for the button column only); nothing to show =
   the inactive look (grey fill, grey glyph and text, no count); the count a
   small pill after the name. ══ */
:where(html.pg-history.h-chips-on) .h-chipbar button.h-btn-off{
  background-color: var(--c-brand-tint, #ececff) !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button.h-chip-empty{
  background-color: #f1f2f7 !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button.h-chip-empty .h-chip-name{
  color: #7a8191;
}
:where(html.pg-history.h-chips-on) .h-chipbar button.h-chip-empty::before,
:where(html.pg-history.h-chips-on) .h-chipbar button.h-chip-empty > .maplibregl-ctrl-icon{
  filter: brightness(0) invert(53%) sepia(8%) saturate(420%) hue-rotate(185deg) !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button.h-chip-empty .active-badge,
:where(html.pg-history.h-chips-on) .h-chipbar button.h-chip-empty .h-chip-count{
  display: none !important;
}
:where(html.pg-history) .h-chip-count{
  display: none;
}
:where(html.pg-history.h-chips-on) .h-chipbar .h-chip-count{
  display: inline-block;
  margin-left: 5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-brand, #696cff);
  color: #fff;
  font: 700 10px/16px "Poppins", sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: middle;
}
:where(html.pg-history.h-chips-on) .h-chipbar .h-chip-count:empty{
  display: none;
}
/* the chips tighter (owner, 2026-11-09: "no wasted map space"): 22px chips,
   3px apart in both directions, the bar's own padding small */
:where(html.pg-history.h-chips-on) .h-chipbar{
  gap: 3px !important;
  padding: 3px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar > *,
:where(html.pg-history.h-chips-on) .h-chipbar .maplibregl-ctrl-group,
:where(html.pg-history.h-chips-on) .h-chipbar button{
  height: 22px !important;
  min-height: 0 !important;
  border-radius: 11px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button{
  padding: 0 7px 0 22px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar button::before,
:where(html.pg-history.h-chips-on) .h-chipbar #toggleTerrainBtn > .maplibregl-ctrl-icon{
  top: 5px !important;
  left: 6px !important;
  width: 12px !important;
  height: 12px !important;
}
:where(html.pg-history.h-chips-on) .h-chipbar .h-chip-count{
  margin-left: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  font-size: 9px;
  line-height: 14px;
}
/* History on a desktop: the search, the summary and the timeline scroll as
   ONE column in the panel (owner, 2026-11-09: the search was squeezed into a
   one-field box with its own scrollbar once a route showed) — none of them
   shrinks or scrolls by itself; after Show the panel scrolls to the summary
   (js/page-history.js toggleReplayBody) */
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  :where(html.pg-history) .replay-panel > *{
    flex-shrink: 0 !important;
  }
  :where(html.pg-history) .replay-body,
  :where(html.pg-history) .h-timeline{
    flex: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* the player card in front of the panel's scrolling content (owner,
   2026-11-09: "the player card must be in front"): the search section kept an
   old z-index 9999 that painted it over the player once the panel scrolled
   as one column */
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  :where(html.pg-history) .replay-body{
    z-index: auto !important;
  }
  :where(html.pg-history) .player-bar{
    z-index: 30 !important;
    background: #fff !important;
  }
}
/* notifications.html: the Geofences map button shows / hides the geofences on
   this page's map (owner, 2026-11-09; js/page-notifications.js) — grey while
   they are hidden */
:where(html.pg-notifications) #GeofenceBtn{
  border-radius: 6px !important; /* its own button, not the foot of a group */
}
/* shown = all green (#20c997, the map buttons' "on" green, as the drawing tool);
   hidden = the plain brand button (owner, 2026-11-09) */
:where(html.pg-notifications) #GeofenceBtn:not(.nt-geo-off){
  background-color: #20c997 !important;
  border-color: #20c997 !important;
}
:where(html.pg-livetracking.pg-notifications) #GeofenceBtn{
  display: none !important; /* the header switch does it now (owner, 2026-11-09) */
  align-items: center;
  justify-content: center;
  top: var(--app-btn-base) !important;
}
/* History summary tiles (owner, 2026-11-09: "the summary is not seen properly" —
   "16 h 34 m" wrapped to two lines in a third of the panel): one line each,
   tighter tiles; the number shrinks a little in a narrow panel */
:where(html.pg-history) .hs-tiles{
  gap: 6px;
}
:where(html.pg-history) .hs-tile{
  min-width: 0;
  padding: 6px 8px;
}
:where(html.pg-history) .hs-tile b{
  white-space: nowrap;
  font-size: clamp(12px, 4.2cqw, var(--fs-name, 14px));
}
:where(html.pg-history) .hs-tile span{
  white-space: nowrap;
}
:where(html.pg-history) .info-bar{
  container-type: inline-size;
}
/* the search's own fold (owner, 2026-11-09) — the map buttons' look, at the
   top of the panel: no line or gap above it */
:where(html.pg-history) .h-search{
  margin-top: 0;
  border-top: 0;
  padding-top: 2px;
}
:where(html.pg-history) .h-search[open] > summary{
  margin-bottom: 14px; /* room for the first field's floating label */
}
/* History day bar, redone (owner, 2026-11-09: "it shows when driving
   happened — make it proper"): a "Driving 2h 37m · 2 trips" line; a grey day
   (not the alarm pink) with the trips as rounded green blocks, faint grid lines
   at the scale's marks, the replay's place as a brand line; the time scale
   under it (the two ends pinned to the edges) */
:where(html.pg-history) .h-day-head{
  font: 500 var(--fs-chip, 11px) / 1.3 "Poppins", sans-serif;
  text-align: left;
  color: var(--c-muted, #7a8191);
}
:where(html.pg-history) .h-day-head b{
  color: var(--c-run, #14916f);
  font-weight: 600;
}
:where(html.pg-history) .h-day-head b::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
  background: currentColor;
  vertical-align: 0;
}
:where(html.pg-history) .h-day-track{
  height: 14px;
  border-radius: 7px;
  background: #eef0f5;
}
:where(html.pg-history) .h-day-grid{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(34, 48, 62, 0.1);
  pointer-events: none;
}
:where(html.pg-history) .h-day-block{
  top: 2px;
  bottom: 2px;
  border-radius: 4px;
}
:where(html.pg-history) .h-day-now{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--c-brand, #696cff);
  pointer-events: none;
  z-index: 1;
}
:where(html.pg-history) .h-day-now[hidden]{
  display: none;
}
:where(html.pg-history) .h-day-scale{
  position: relative;
  height: 14px;
  font: 500 11px / 14px "Poppins", sans-serif;
  color: var(--c-muted, #7a8191);
  white-space: nowrap;
}
:where(html.pg-history) .h-day-scale > span{
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
:where(html.pg-history) .h-day-scale > .is-first{
  transform: none;
}
:where(html.pg-history) .h-day-scale > .is-last{
  transform: translateX(-100%);
}
/* the panel's scroll ends above the player, whatever its height (its real
   height from js/page-history.js playerRoom; 118px until measured) */
@media ((orientation: landscape) and (min-height: 501px)), ((min-width: 900px) and (min-height: 501px)) {
  :where(html.pg-history) .replay-panel{
    padding-bottom: calc(var(--h-player-h, 118px) + 12px) !important;
  }
}
/* Notifications search: the row's size on a desktop (owner, 2026-11-09: "the
   search text is too big") — 13px, the hint grey like "All vehicles". Touch
   screens keep 16px: smaller text in a field makes iPhones zoom in on tap. */
@media (pointer: fine) {
  :where(html.pg-livetracking) .veh-filter-combo #notificationSearch{
    font-size: var(--fs-body, 13px);
  }
}
:where(html.pg-livetracking) .veh-filter-combo #notificationSearch::placeholder{
  color: var(--c-muted, #7a8191);
}
/* Notifications: the filters fold under a "Search" title, as History's search
   (owner, 2026-11-09) — the header's filter button goes; the title in the
   History fold's look (11px caps, grey, an arrow on the right), a brand dot
   while any filter is set */
:where(html.pg-livetracking) #ltNotifFilterBtn{
  display: none !important;
}
:where(html.pg-livetracking) .lt-search-fold{
  display: flex;
  align-items: center;
  width: calc(100% - 24px);
  margin: 4px 12px 8px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--c-line, #e6e8ef);
  background: none;
  color: var(--c-muted, #7a8191);
  font: 600 11px / 1.3 "Poppins", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}
:where(html.pg-livetracking) .lt-search-fold.has-filter::before{
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) .lt-search-fold::after{
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
:where(html.pg-livetracking) .lt-search-fold.is-open::after{
  transform: rotate(45deg);
}
:where(html.pg-livetracking) .lt-search-fold.is-open{
  border-bottom-color: transparent;
}
/* Reports: the search folds under a title, as History's (owner, 2026-11-09) —
   the same look (11px caps, grey, the arrow on the right) */
:where(html.pg-report) .h-search > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  color: var(--c-muted, #7a8191);
  font: 600 11px / 1.3 "Poppins", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  padding: 2px 0;
}
:where(html.pg-report) .h-search[open] > summary{
  margin-bottom: 14px; /* room for the first field's floating label */
}
:where(html.pg-report) .h-search > summary::-webkit-details-marker{
  display: none;
}
:where(html.pg-report) .h-search > summary::after{
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
:where(html.pg-report) .h-search:not([open]) > summary::after{
  transform: rotate(-45deg);
}
/* Load and refresh belong to the folded search (owner, 2026-11-09: "Load and
   reload go inside the search"): shown only while it is open; folded, the row
   keeps the count and the type filter */
:where(html.pg-livetracking) #notification-sidebar:not(.lt-filters-open) #daLoadBtn,
:where(html.pg-livetracking) #notification-sidebar:not(.lt-filters-open) #daRefreshBtn{
  display: none !important;
}
/* Notification source marks back on the regular pages (owner, 2026-11-09:
   "why no flag for device / server / the app's live notifications — the
   lightning icon?"): the school rule copied with the school look hid them
   (every school row is live there); a regular list mixes the three, so each
   card says where it came from — chip = the device, server = the server's
   notification, bolt (green) = detected live by the app */
:where(html.pg-livetracking) .notif-source{
  display: inline-block;
}
/* The address's expand / fold button (… / ^) on a smooth round of its own
   (owner, 2026-11-09: "the address folding icons need a smooth background" —
   the 6% grey let the text show through it): white, a soft shadow, the brand
   glyph; the text stops short of it */
:where(html.pg-livetracking) .addr-expand-btn{
  background: #fff !important;
  color: var(--c-brand, #696cff) !important;
  box-shadow: 0 1px 4px rgba(34, 48, 62, 0.18);
  z-index: 1;
}
:where(html.pg-livetracking) .addr-expand-btn:hover{
  background: var(--c-brand-tint, #ececff) !important;
}
:where(html.pg-livetracking) .address-chip.addr-overflow{
  position: relative;
  padding-right: 28px !important;
}
/* The brand logo larger in the menu and the phone drawer (owner, 2026-11-09:
   "why does this logo look so small") — white-label logos often carry empty
   margins in the image, so the 150 × 44 box left the artwork tiny: up to the
   menu's width and 64px high (60 in the drawer) */
:where(html.pg-livetracking) .lt-nav-logo{
  max-width: min(180px, 100%) !important;
  max-height: 64px !important;
}
:where(html.pg-livetracking) .lt-drawer-logo{
  max-width: min(190px, 100%) !important;
  max-height: 60px !important;
}
/* Notifications header: the "Geofences" switch (the map's geofences on / off),
   the Geofences page's Private switch look, left of the × — notifications.html
   only (the main page's panel no longer opens) */
:where(html.pg-livetracking:not(.pg-notifications)) #ntGeoToggle{
  display: none !important;
}
:where(html.pg-livetracking) #notification-sidebar .lt-priv-toggle{
  position: absolute;
  top: 8px;
  right: 50px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-text, #4b5160);
  font: 600 12px / 1 "Poppins", sans-serif;
  cursor: pointer;
  user-select: none;
  z-index: 2;
}
:where(html.pg-livetracking) #notification-sidebar .lt-priv-track{
  position: relative;
  width: 30px;
  height: 17px;
  border-radius: 9px;
  background: #d9dbe3;
  transition: background 0.15s ease;
}
:where(html.pg-livetracking) #notification-sidebar .lt-priv-thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s ease;
}
:where(html.pg-livetracking) #notification-sidebar .lt-priv-toggle.is-on .lt-priv-track{
  background: var(--c-brand, #696cff);
}
:where(html.pg-livetracking) #notification-sidebar .lt-priv-toggle.is-on .lt-priv-thumb{
  left: 15px;
}
:where(html.pg-livetracking) #notification-sidebar .lt-priv-toggle.is-on{
  color: var(--c-brand, #696cff);
}
/* Reports: "Bridge long data gaps into trips" in the panel's type (owner,
   2026-11-09 screenshots: it was the browser's 16px black) — 13px, the text
   colour, a brand checkbox, on one line with its box */
:where(html.pg-report) .rpt-check-row{
  margin: 2px 2px 8px;
}
:where(html.pg-report) .rpt-check-row label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text, #4b5160);
  font: 500 var(--fs-body, 13px) / 1.3 "Poppins", sans-serif;
  cursor: pointer;
}
:where(html.pg-report) .rpt-check-row input[type="checkbox"]{
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-brand, #696cff);
}
/* Toasts on a desktop / a phone on its side (owner, 2026-11-10: "the toast
   message is the wrong size"): school's full-width phone toast came with the
   school look and ran the whole window. The message toast is a compact pill
   centred over the map (the menu's width left out), solid, at most 480px;
   the notification alert card sits bottom-right, 420px. Upright phones keep
   the full-width toasts. */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .simpleToast{
    left: calc(50% + var(--lt-menu-x, 0px) / 2) !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: min(480px, calc(100% - var(--lt-menu-x, 0px) - 32px)) !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    opacity: 1 !important;
    box-shadow: 0 6px 20px rgba(34, 48, 62, 0.22);
  }
  :where(html.pg-livetracking) .toast{
    left: auto !important;
    right: 16px !important;
    width: min(420px, calc(100% - 32px)) !important;
  }
}
/* Notifications filters, regular pages (owner, 2026-11-10): one vehicle picker
   (as Notification settings' list) instead of the search box + dropdown and the
   clear button; From / To with a time (datetime-local) in place of the date
   fields — those stay for script.js, hidden (js/livetracking-ui.js ntVehiclePicker,
   ntTimes) */
:where(html.pg-livetracking) #notification-sidebar .veh-filter-combo,
:where(html.pg-livetracking) #notification-sidebar #clearVehicleFilterButton,
:where(html.pg-livetracking) #notification-sidebar #daFrom,
:where(html.pg-livetracking) #notification-sidebar #daTo{
  display: none !important;
}
:where(html.pg-livetracking) .nt-veh-pick{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:where(html.pg-livetracking) .nt-veh-pick .alert-vehicles-btn{
  width: 100%;
}
:where(html.pg-livetracking) .nt-veh-pick .alert-vehicles-panel{
  margin: 0;
}
:where(html.pg-livetracking) .nt-veh-pick .alert-vehicles-list{
  max-height: 220px;
  overflow-y: auto;
}
:where(html.pg-livetracking) .device-alerts-bar input.nt-dt{
  width: 100%;
  box-sizing: border-box;
  height: 40px;
  padding: 6px 8px 6px 10px;
  border: 1px solid #d7d9e3;
  border-radius: 10px;
  font: 400 13px / 1.2 "Poppins", sans-serif;
  color: #333a45;
  background: #fff;
}
:where(html.pg-livetracking) .device-alerts-bar input.nt-dt::-webkit-calendar-picker-indicator{
  margin-left: 0;
  cursor: pointer;
  opacity: 0.6;
}
:where(html.pg-livetracking) .device-alerts-bar input.nt-dt:focus{
  outline: none;
  border-color: #696cff;
  box-shadow: 0 0 0 3px #eceffd;
}
/* its arrow at the right end, as the Notification settings picker */
:where(html.pg-livetracking) .alert-vehicles-btn #ntVehSummary{
  flex: 1;
}

/* Fit the screen as it is held (owner, 2026-11-10: "fit the app as per the
   screen — portrait or landscape").
   A phone on its side (short): the menu's logo and rows smaller, so more of
   the menu shows without scrolling. */
@media (orientation: landscape) and (max-height: 500px) {
  :where(html.pg-livetracking) .lt-nav-logo{
    max-height: 36px !important;
  }
  :where(html.pg-livetracking) .lt-nav-brand{
    min-height: 0;
    padding-bottom: 6px;
    margin-bottom: 4px;
  }
  :where(html.pg-livetracking) .lt-nav{
    padding-top: 8px;
  }
}
/* Dashboard turned but narrow (a phone on its side, the frame beside the
   menu): the one-row desktop header has no room — the weather bar ran over
   itself; the greeting on its line, the weather bar the full width below */
@media (orientation: landscape) and (max-width: 899px) {
  :where(html.pg-dashboard) .db-head{
    flex-wrap: wrap;
    row-gap: 8px;
  }
  :where(html.pg-dashboard) .db-head-side{
    width: 100%;
  }
  :where(html.pg-dashboard) .db-wxbar{
    flex: 1 1 auto;
    min-width: 0;
  }
  :where(html.pg-dashboard) .db-wx-now{
    flex: none;
  }
  :where(html.pg-dashboard) .db-wx-days{
    flex: 1 1 auto;
    justify-content: space-around;
  }
}
/* Reports: the header keeps its height and the search scrolls under it (a
   phone on its side squeezed the title to 4px, cut off at the top) */
:where(html.pg-report) .search-panel > .replay-header{
  flex-shrink: 0;
}
:where(html.pg-report) .search-panel > .replay-body{
  flex: 0 1 auto; /* shrinks + scrolls, never grows (on a phone the report shares the panel) */
  min-height: 0;
  overflow-y: auto;
}
/* Dashboard turned but narrow: the weather bar stacked as on an upright phone
   (the reading, then the three days as tiles — one row cut off "Tomorrow"),
   and the Status legend one column (two ran past the card's edge) */
@media (orientation: landscape) and (max-width: 899px) {
  :where(html.pg-dashboard) .db-wxbar{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  :where(html.pg-dashboard) .db-wx-days{
    padding-left: 0;
    border-left: 0;
  }
  :where(html.pg-dashboard) .db-wx-day{
    flex: 1 1 0;
    min-width: 0;
    background: var(--c-fill, #f5f5f9);
  }
  :where(html.pg-dashboard) .db-legend{
    grid-template-columns: 1fr;
  }
}
/* A phone on its side (short, touch, under 900px): History's player under
   the search panel at its width, the panel scrolling above it (the player
   sat half behind the panel); Reports' search a usable width (25vw left the
   fields cut) and the report beside it */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) and (not (pointer: fine)) {
  :where(html.pg-history) .replay-panel{
    top: 8px !important;
    left: 8px !important;
    bottom: 8px !important;
    width: clamp(260px, 42vw, 330px) !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: calc(var(--h-player-h, 118px) + 4px) !important;
    overflow-y: auto !important;
    box-sizing: border-box;
  }
  :where(html.pg-history) .player-bar{
    left: 8px !important;
    right: auto !important;
    bottom: 8px !important;
    width: clamp(260px, 42vw, 330px) !important;
    box-sizing: border-box;
    border-radius: 0 0 14px 14px !important;
    border-top: 1px solid var(--c-line, #e6e8ef) !important;
    box-shadow: none !important;
    z-index: 30 !important;
    background: #fff !important;
  }
  :where(html.pg-history) .replay-body{
    z-index: auto !important;
  }
  :where(html.pg-history) .player-controls{
    flex-wrap: nowrap !important;
    gap: 6px;
  }
  :where(html.pg-history) .player-buttons{
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    min-width: 0;
  }
  :where(html.pg-history) .player-buttons button:not(#playBtn){
    font-size: 20px !important;
    padding: 0 4px !important;
  }
  :where(html.pg-history) .speed-indicator{
    flex: none;
    white-space: nowrap;
    font-size: 12px;
  }
  :where(html.pg-report) .search-panel{
    width: clamp(240px, 36vw, 300px) !important;
  }
  :where(html.pg-report) .report-panel{
    left: calc(clamp(240px, 36vw, 300px) + 20px) !important;
    right: 10px !important;
    width: auto !important;
  }
}
@media (orientation: landscape) and (max-width: 899px) {
  /* each day a small tile, its lines stacked (on one line they ran off) */
  :where(html.pg-dashboard) .db-wx-day{
    flex-direction: column;
    gap: 1px;
    padding: 4px 6px;
  }
}
@media (orientation: landscape) and (max-width: 899px) {
  :where(html.pg-dashboard) .db-wx-days{
    width: 100%;
    margin-left: 0 !important;
    justify-content: stretch;
  }
}
/* Settings › This screen: the device reading on its own lines (js/device-info.js,
   owner 2026-11-10) */
:where(html.pg-livetracking) #screenInfo{
  white-space: pre-line;
}
:where(html.pg-livetracking) #screenBadge{
  white-space: nowrap;
}
/* the badge beside the "This screen" title, so the reading below has the
   row's full width (beside it, it wrapped to a narrow column) */
:where(html.pg-livetracking) .st-row:has(#screenInfo){
  position: relative;
  align-items: flex-start;
}
:where(html.pg-livetracking) .st-row:has(#screenInfo) #screenBadge{
  position: absolute;
  top: 10px;
  right: 0;
}

/* iPhone / iPad: text boxes at 16px (owner, 2026-11-10 font audit F1) —
   Safari and the iOS app's WKWebView zoom the page in when a tapped input's
   text is under 16px, and it stays zoomed. html.os-ios / os-ipados come from
   js/device-info.js (regular pages only); Android and desktop keep their sizes. */
:where(html.os-ios, html.os-ipados) input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"], [type="color"], [type="file"], [type="image"], [type="hidden"]),
:where(html.os-ios, html.os-ipados) select,
:where(html.os-ios, html.os-ipados) textarea{
  font-size: 16px !important;
}
/* Reports: the long text cells (address, detail) a readable width — on a
   phone the 22-column tables squeezed the Address to 84px, so "Start: …,
   End: …" wrapped to ~15 lines and every row was ~280px tall (owner,
   2026-11-10 report screenshots). The table already scrolls sideways. */
:where(html.pg-report) .rpt-table td:not(.rpt-nw):not(.rpt-note-cell){
  min-width: 240px;
  max-width: 420px;
}
/* Settings › This screen as icon chips (owner, 2026-11-10: "too much — icons,
   fewer words"); replaces the multi-line text + badge */
:where(html.pg-livetracking) #screenInfo.dev-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  white-space: normal;
}
:where(html.pg-livetracking) .dev-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--c-fill, #f5f5f9);
  color: var(--c-text, #4b5160);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
:where(html.pg-livetracking) .dev-chip i{
  font-size: 12px;
  color: var(--c-brand, #696cff);
}
/* the Landscape chip's phone icon lies on its side */
:where(html.pg-livetracking) .dev-chip i.dev-ic-turn.is-land{
  transform: rotate(90deg);
}

/* "Refreshing…" on a reload (js/reload-pill.js, owner 2026-11-11: "a reload
   animation … do not block the page — a small animation, top centre"): a
   small pill sliding down at the top centre, clicks pass through it */
:where(html.pg-livetracking) .ec-reload-pill{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  z-index: 2147483000;
  display: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--c-title, #2b2c40);
  box-shadow: 0 4px 16px rgba(34, 48, 62, 0.18);
  font: 500 12px/1 "Poppins", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, 0);
  animation: ec-reload-in 0.25s ease-out;
}
:where(html.ec-reloading, html.ec-leaving) .ec-reload-pill{
  display: inline-flex;
}
:where(html.ec-reload-done) .ec-reload-pill{
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
:where(html.pg-livetracking) .ec-reload-spin{
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid var(--c-brand-tint, #ececff);
  border-top-color: var(--c-brand, #696cff);
  border-radius: 50%;
  animation: ec-reload-spin 0.8s linear infinite;
}
@keyframes ec-reload-in{
  from{ opacity: 0; transform: translate(-50%, -12px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}
@keyframes ec-reload-spin{
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  :where(html.pg-livetracking) .ec-reload-pill{ animation: none; }
  :where(html.pg-livetracking) .ec-reload-spin{ animation-duration: 2s; }
}
/* A reload coming back to a screen over the map (js/reload-pill.js sets
   html[data-lt-boot]; js/livetracking-ui.js lifts it once that screen has
   loaded): the map area is covered from the first paint — no live map and no
   Dashboard showing first (owner, 2026-11-11). Under the menu / bottom bar
   (z 30) and the "Refreshing…" pill. */
:where(html.pg-livetracking[data-lt-boot]) body::after{
  content: "";
  position: fixed;
  top: 0;
  left: var(--lt-menu-x, 0px);
  right: 0;
  bottom: var(--lt-bottom, 0px);
  z-index: 29;
  background: #f5f5f9;
  pointer-events: none;
}

/* ── Vehicle settings + Live tracking link: the app's form look (owner,
   2026-11-11: "follow our main theme", then "check Reports, History,
   Geofences, Notifications, Settings and compare"). Measured off the rendered
   Reports / History search form:
     header   as Notifications / Geofences: white, hairline, brand icon,
              18px / 700 title, plain red ×
     caption  as their "SEARCH": 11px / 600 grey caps, no card around it
     field    .form-group.outlined: 34px, white, 1px #d4d8e2, 6px radius,
              14px text; its name in 11px / 700 grey caps set into the top
              border; 16px between fields
     buttons  as Show / Clear: 34px, 10px radius, brand and brand tint
   Scoped to [data-dp-mode] (script.js openEditDeviceModal stamps it on this
   page), so it outranks the panel's older rules without touching them. ── */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .sidebar-content,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-container{
  background: #fff;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box{
  padding: 0 15px 20px;
  color: var(--c-text);
}
/* header */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  margin: 0 -15px 4px;
  padding: 14px 56px 10px 15px;
  border-bottom: 1px solid var(--c-line);
  background: #fff;
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--c-title);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode="vehicle"] .dp-form-box h2.dp-link-only{
  display: none;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2 i{
  margin: 0;
  color: var(--c-brand);
  font-size: 18px;
  vertical-align: 0;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-sidebar-close{
  top: 10px;
  width: 40px;
  height: 40px;
  margin: 10px 8px -50px 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-danger);
  font-size: 22px;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-sidebar-close:hover{
  background: var(--c-danger-tint);
  color: var(--c-danger);
}
/* a section: its caption, then the fields — no card */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-card{
  margin: 0 0 6px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-card-title{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 14px;
  padding: 2px 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}
/* a field: the outlined group */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-row,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-card > .dp-link{
  position: relative;
  display: block;
  margin: 6px 0 16px;
  padding: 0;
  border: 0;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-row:not(.dp-btn-row) .dp-label,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-card > .dp-link .dp-label{
  position: absolute;
  top: -8px;
  left: 12px;
  z-index: 1;
  display: block;
  height: 16px;
  margin: 0;
  padding: 0 4px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-muted);
  white-space: nowrap;
  pointer-events: none;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-label i{
  display: none; /* the form's labels are words only */
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-control{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-control > .dp-input-box,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-card > .dp-link > .dp-input-box{
  flex: 1 1 0;
  width: 100%;
  margin: 0;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] #ltuAmountBox{
  flex: 0 0 84px;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box input,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box select,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box input.ec-dd-field{
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background-color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--c-title);
  box-shadow: none;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box input.ec-dd-field{
  padding-right: 32px;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px; /* the chevron: icons.css, as every dropdown */
  cursor: pointer;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box input:focus,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box select:focus{
  border-color: var(--c-brand);
  box-shadow: none;
}
/* IMEI / SIM come from the server: a value, not a box waiting for input
   (the dropdowns and the icon picker are read-only inputs too, but white) */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] #dpImeiInput,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] #dpSimInput{
  background-color: #f7f8fb;
  color: var(--c-text);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-input-box input::placeholder{
  color: var(--c-muted);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .plus-btn{
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 6px;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-size: 18px;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .plus-btn:hover{
  background: var(--c-brand);
  color: #fff;
}
/* buttons, as Show / Clear (the theme section's own .dp-btn rules are
   !important, so these are too) */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-btn-row{
  display: flex;
  gap: 10px;
  margin: 4px 0 8px;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-btn{
  flex: 1 1 0;
  height: 34px;
  border-radius: 10px !important;
  font: 600 13px / 1 "Poppins", sans-serif !important;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-btn-danger{
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--c-brand-tint) !important;
  color: var(--c-brand) !important;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-empty{
  padding: 14px;
  border: 1px dashed var(--c-line);
  border-radius: 12px;
  font-size: var(--fs-body);
  color: var(--c-muted);
  text-align: center;
}
/* The icon picker (Vehicle settings → Icon), 2026-11-11 (owner: "correct
   this"): it was position:fixed from the iframe days, so it covered the whole
   window over the map, with 120px tiles, checkboxes and big buttons. Now it
   opens over the panel only (contain: layout makes the panel the box for
   fixed children) in the Add vehicle picker's look: 84px tiles, a 44px
   icon, the chosen one ringed in brand and ticked; Show / Clear buttons. */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode]{
  contain: layout;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-modal-bg{
  position: fixed;
  inset: 0;
  place-items: start center;
  padding: 64px 12px 12px;
  background: rgba(43, 44, 64, 0.35);
  z-index: 40;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-modal-box{
  width: 100%;
  max-height: 100%;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(34, 48, 62, 0.18);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-modal-box h2{
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  position: static;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-grid{
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 2px;
}
/* "Loading…" / "Failed to load icons." across the whole grid */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .icon-grid-note{
  grid-column: 1 / -1;
  padding: 14px;
  font-size: var(--fs-body);
  color: var(--c-muted);
  text-align: center;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 4px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
  cursor: pointer;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-item:hover{
  border-color: var(--c-brand);
  background: #fff;
  box-shadow: none;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-item.dp-selected{
  border-color: var(--c-brand);
  background: #f6f6ff;
  box-shadow: 0 0 0 1px var(--c-brand);
}
/* the tick box, top right (owner: "you missed checkbox"): 16px, the
   fields' #d4d8e2 outline; chosen = brand with the white tick (icons.css) */
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-item{
  position: relative;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-radio{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid #d4d8e2;
  border-radius: 4px;
  background-color: #fff;
  opacity: 1;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-radio:checked{
  border-color: var(--c-brand);
  background-color: var(--c-brand);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-img{
  width: 44px;
  height: 44px;
  margin: 0;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-name{
  min-height: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--c-text);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-icon-item.dp-selected .dp-icon-name{
  color: var(--c-brand);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-modal-actions{
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-modal-actions .dp-btn{
  height: 34px;
}

/* Add vehicle (owner, 2026-11-11: "also correct this"): the same form look as
   Reports / History and Vehicle settings — a white page (not grey), the field
   without a card round it, 34px fields and 34px / 10px buttons, the caption
   as their "SEARCH". The panel's own rules above stay; .route-list adds the
   class that outranks them. */
:where(html.pg-livetracking) #add-vehicle-sidebar .sidebar-content,
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list{
  background: #fff;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .st-sect{
  margin: 16px 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .st-card{
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .sl-field{
  padding-top: 6px;
  margin-bottom: 10px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .sl-input input{
  height: 34px;
  padding-left: 10px;
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background-color: #fff;
  font-size: 14px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .sl-input input:focus{
  border-color: var(--c-brand);
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .vt-icon-box{
  border: 1px solid #d4d8e2;
  border-radius: 6px;
  background: #fff;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .sl-btn{
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .av-note,
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .sl-note{
  font-size: 13px;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list .sl-input input::placeholder{
  font-size: 14px;
  color: var(--c-muted);
}

/* Hide / show the left menu (owner, 2026-11-11): the round brand button on
   the menu's right edge, level with the middle of the logo (.lt-nav-collapse's look,
   above); its chevron turns when folded (rule above). Hidden where the
   bottom bar is (a phone held upright). js/livetracking-ui.js */
:where(html.pg-livetracking) #ltNavCollapse{
  display: none;
}
/* the menu never scrolls sideways (owner, 2026-11-11: "no horizontal scroll"):
   folded to 72px, a row with its count was a few px wider */
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) .lt-nav{
    overflow-x: hidden;
  }
  /* a panel title's ← keeps clear of the button on the menu's edge */
  :where(html.pg-livetracking) .lt-head-back{
    margin-left: 2px;
  }
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking) #ltNavCollapse{
    display: grid;
    position: fixed;
    /* the middle of the logo block, whatever its height (a dealer's logo +
       name is taller): js/livetracking-ui.js measures it into --lt-collapse-y */
    top: calc(var(--lt-collapse-y, 43px) - 13px);
    left: calc(var(--lt-menu-x) - 13px);
    z-index: 31;
    width: 26px;
    height: 26px;
    padding: 0;
    transition: left 0.2s ease, background 0.15s ease;
  }
  :where(html.pg-livetracking) #ltNavCollapse:hover{
    background: #5f61e6;
  }
  :where(html.pg-livetracking) #ltNavCollapse i{
    font-size: 18px;
  }
}

/* ← back and × on every page (owner, 2026-11-11: "add to all pages").
   ← (.lt-head-back, data-lt-back → livetracking-ui.js ltBack): in the
   panel titles (Settings, Vehicle settings, Live tracking link, the
   Notifications and Geofences pages) and Dashboard's top row; the Add
   vehicle header's ← look — 32px, plain, the title's colour. */
:where(html.pg-livetracking, html.pg-dashboard) .lt-head-back{
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px 4px -4px -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-title, #2b2c40);
  font-size: 18px;
  vertical-align: middle;
  cursor: pointer;
}
:where(html.pg-livetracking, html.pg-dashboard) .lt-head-back:hover{
  background: #f1f2f7;
}
:where(html.pg-livetracking, html.pg-dashboard) .lt-head-back i{
  margin: 0 !important;
  color: inherit !important;
  font-size: 18px !important;
}
/* Dashboard: a slim row above the greeting, ← left and × right */
:where(html.pg-dashboard) .db-topbar{
  grid-column: 1 / -1; /* .db is a grid on a wide screen: the whole row */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 2px;
}
:where(html.pg-dashboard) .db-topbar .lt-head-back{
  margin: 0 0 0 -6px;
}
:where(html.pg-dashboard) .db-close{
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-danger, #d64545);
  font-size: 20px;
  cursor: pointer;
}
:where(html.pg-dashboard) .db-close:hover{
  background: var(--c-danger-tint, #fdecec);
}
/* History / Reports: × at the header's right end (runs the page's goBack),
   and on a desktop the ← comes back (hidden there since 2026-11-08); the
   filter tools stay hidden on a desktop (.rh-head-tools — the rule above hid
   "> div:last-child", which the × now is not). */
:where(html.pg-history, html.pg-report) .replay-header .rh-head-x{
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-danger, #d64545);
  font-size: 20px;
  cursor: pointer;
}
:where(html.pg-history, html.pg-report) .replay-header .rh-head-x:hover{
  background: var(--c-danger-tint, #fdecec);
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-history, html.pg-report) .replay-header button[data-act="goBack"]{
    display: grid !important;
    place-items: center;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  :where(html.pg-history, html.pg-report) .replay-header .rh-head-tools{
    display: none !important;
  }
}

/* The folded menu (owner, 2026-11-11: "when minimised only a round letter
   logo, like the account's; no name"): the logo and the dealer's name hide,
   the brand's first letter shows in a brand circle (.my-avatar's look). */
:where(html.pg-livetracking) .lt-brand-mono{
  display: none;
}
@media (orientation: landscape), (min-width: 900px) {
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-brand .lt-brand-link,
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-brand .lt-brand-name{
    display: none !important;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-brand{
    min-height: 0;
    padding: 4px 0 10px;
    align-items: center;
  }
  :where(html.pg-livetracking.lt-nav-folded) .lt-brand-mono{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c-brand, #696cff);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
}

/* The menu's logo block stays put (owner, 2026-11-11: "fix the menu top bar
   down to the line, the scrollbar only below the line — sticky; mobile
   too"): desktop and a phone on its side (the phone's drawer already scrolls
   only its list). The block is sticky at the menu's top on white; the menu
   uses the ::-webkit-scrollbar rules here (scrollbar-color would switch them
   off in Chrome) so its track can start under the line
   (--lt-brand-h, measured by js/livetracking-ui.js). */
@media (orientation: landscape), (min-width: 900px) {
  /* the menu's top padding moves into the block, so nothing shows above
     it while the list scrolls under */
  :where(html.pg-livetracking) .lt-nav,
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav{
    padding-top: 0 !important;
  }
  :where(html.pg-livetracking) .lt-nav-brand,
  :where(html.pg-livetracking.lt-nav-folded) .lt-nav-brand{
    position: sticky;
    top: 0;
    z-index: 2;
    margin-top: 0 !important;
    padding-top: 12px !important;
    background: #fff;
    box-shadow: 0 -16px 0 #fff;
  }
  :where(html.pg-livetracking) .lt-nav::-webkit-scrollbar-track{
    margin-top: var(--lt-brand-h, 0px);
  }
}

/* ── One scrollbar on every regular page (owner, 2026-11-11: "all scrollbars
   the same size and look, and auto-hide"): 6px, brand blue, round ends, no
   arrow buttons, shown only while the pointer is over that box or it
   scrolls (.lt-scrolling) — the menu, the panels, the dropdown lists, the
   Dashboard / History / Reports frames alike. Chrome / Edge / Safari / the
   app's WebView draw it from the ::-webkit-scrollbar rules, so the standard
   scrollbar-color / -width (which switch those off in Chrome and draw a
   wide bar with arrows on Windows) are reset to auto here; boxes that hide
   their bar on purpose (the status chips, History's chip bar) keep theirs.
   Firefox keeps the scrollbar-color auto-hide above. ── */
@supports selector(::-webkit-scrollbar) {
  :where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report),
  :where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) *{
    scrollbar-color: auto !important;
  }
  :where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) *{
    scrollbar-width: auto;
  }
  :where(html.pg-livetracking) .route-list{
    scrollbar-width: auto;
  }
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar,
:where(html.pg-livetracking) .route-list.route-list::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) ::-webkit-scrollbar-thumb,
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) .ec-dd-rows::-webkit-scrollbar-thumb{
  background: transparent;
  border-radius: 3px;
}
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) :is(:hover, .lt-scrolling)::-webkit-scrollbar-thumb,
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report) .ec-dd-rows:is(:hover, .lt-scrolling)::-webkit-scrollbar-thumb,
:where(html.pg-livetracking, html.pg-dashboard, html.pg-history, html.pg-report).lt-scrolling::-webkit-scrollbar-thumb{
  background: var(--c-brand, #696cff);
}

/* Phone held upright (owner, 2026-11-11: "Vehicle settings, Add vehicle and
   Live tracking link have left and right padding — use 100% width"): the
   panels were full width but their box was the old 97% .sidebar-content,
   centred, so the map showed in a 6px strip each side. Full width, as
   Settings. */
/* every layout (owner, 2026-11-11, desktop: "a gap between the panel and
   the menu" — the same 6px each side) */
@media all {
  :where(html.pg-livetracking) #edit-device-sidebar .sidebar-content,
  :where(html.pg-livetracking) #add-vehicle-sidebar .sidebar-content{
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box;
  }
}

/* ── Back / close by layout (owner, 2026-11-11, after the audit: "we wrongly
   added return and close buttons — keep / remove by device"). The rule:
   ← only where a screen was opened from inside another one (the menu or the
   tab bar cannot take you back there); × only on a panel beside the map in
   the left-menu layout (it shows the whole map again); screens reached
   straight from the menu / tab bar get neither — the menu / bar does that.
   Layout = html.lt-layout-menu / html.lt-layout-bar (js/device-info.js,
   from the main window, so the frames agree with the page). Nothing is
   deleted: the buttons hide by layout.
     screen              menu: ←  ×      bar: ←  ×
     Dashboard                 –  –           –  –
     History, Reports          –  –           –  –
     Settings                  –  ×           –  –
     Notifications, Geofences  –  ×           ←  –
     Vehicle settings, Live
     tracking link, Add vehicle ←  ×          ←  –                      ── */
/* Dashboard, History, Reports: neither, anywhere */
:where(html.pg-dashboard) .db-topbar,
:where(html.pg-history, html.pg-report) .replay-header.replay-header button[data-act="goBack"]{
  display: none !important; /* outranks the desktop "show the ← again" rule above */
}
/* Settings: no ← anywhere */
:where(html.pg-livetracking) #lt-settings-sidebar .lt-head-back{
  display: none !important;
}
/* Notifications / Geofences: ← only with the bottom bar */
:where(html.pg-livetracking.lt-layout-menu) :is(#notification-sidebar, #geofence-sidebar) .lt-head-back{
  display: none !important;
}
/* the bottom bar: no × on Settings, Notifications, Geofences, Vehicle
   settings, Live tracking link, Add vehicle */
:where(html.pg-livetracking.lt-layout-bar) :is(#lt-settings-close, #notification-sidebar-close-button, #geofence-sidebar-close-button, #dpSidebarCloseBtn, #avClose){
  display: none !important;
}
/* Notifications / Geofences: no × in any layout (owner, 2026-11-11: "no need
   close button" — the menu reaches them straight, as Dashboard) */
:where(html.pg-livetracking) :is(#notification-sidebar-close-button, #geofence-sidebar-close-button){
  display: none !important;
}
/* their header switch (Private / Geofences) moves to the edge the × held */
:where(html.pg-livetracking) :is(#geofence-sidebar, #notification-sidebar) .lt-priv-toggle{
  right: 14px;
}

/* History / Reports on a touch tablet on its side (owner, 2026-11-11: "why a
   gap on a tablet sideways"): the frame is under 900px wide with no mouse, so
   the desktop rule that sets the search panel to max(25vw, 280px) did not
   apply — the panel stayed 25vw (198px) while the report was placed at
   280px, leaving a grey strip. Same width as the report's left edge. */
@media (orientation: landscape) and (min-height: 501px) {
  :where(html.pg-history) .replay-panel,
  :where(html.pg-history) .player-bar,
  :where(html.pg-report) .search-panel{
    width: max(25vw, 280px) !important;
  }
}

/* A phone on its side: History and Reports flush, as on a desktop / a tablet
   (owner, 2026-11-11: "on a phone sideways do not put extra padding") — no
   8–10px frame round the panels, square, one hairline on the panel's right;
   the widths stay the phone's (History clamp(260px, 42vw, 330px), Reports
   clamp(240px, 36vw, 300px)), the report from the panel's edge to the
   screen's. Overrides the short-landscape block above. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 899px) and (not (pointer: fine)) {
  :where(html.pg-history) .replay-panel,
  :where(html.pg-report) .search-panel{
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  :where(html.pg-history) .player-bar{
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
  }
  :where(html.pg-report) .report-panel{
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: clamp(240px, 36vw, 300px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* History / Reports held upright, phone and tablet (owner, 2026-11-11: "this
   is the tablet — do not add extra padding", "same here" for the phone): no
   8–10px frame round the cards, square, as on a desktop / a phone on its
   side. History: the search card against the top and left edges (its right
   edge stays clear of the map buttons), the player across the bottom;
   Reports: the search and the report fill the screen. Hairlines where they
   meet the map. */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-history) .replay-panel{
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--c-line, #e6e8ef) !important;
    border-bottom: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  :where(html.pg-history) .player-bar{
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--c-line, #e6e8ef) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  :where(html.pg-report) .search-panel,
  :where(html.pg-report) .report-panel{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* History / Reports: the header's Search switch (owner, 2026-11-11) in place
   of the filter icon — the Geofences / Private switch's look: a 34×20 track,
   brand when the search shows, grey when hidden, and the word "Search". The
   filter dot (#filterBadge) still marks a filter set while hidden. */
:where(html.pg-history, html.pg-report) .replay-header .rh-search-sw{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-muted, #7a8191);
  font: 600 12px / 1 "Poppins", sans-serif;
  cursor: pointer;
  user-select: none;
}
:where(html.pg-history, html.pg-report) .rh-sw-track{
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #c9cdd8;
  transition: background 0.15s ease;
}
:where(html.pg-history, html.pg-report) .rh-sw-thumb{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}
:where(html.pg-history, html.pg-report) .rh-search-sw.is-on{
  color: var(--c-brand, #696cff);
}
:where(html.pg-history, html.pg-report) .rh-search-sw.is-on .rh-sw-track{
  background: var(--c-brand, #696cff);
}
:where(html.pg-history, html.pg-report) .rh-search-sw.is-on .rh-sw-thumb{
  transform: translateX(14px);
}
:where(html.pg-history, html.pg-report) .rh-search-sw:focus-visible{
  outline: 2px solid var(--c-brand, #696cff);
  outline-offset: 2px;
  border-radius: 6px;
}
/* no green filter dot by the switch (owner, 2026-11-11: "remove green dot");
   the switch itself says whether the search is shown */
:where(html.pg-history, html.pg-report) .rh-search-sw .filterBadge{
  display: none !important;
}
/* History with the search hidden and nothing loaded: the empty info bar was
   a white strip under the header */
:where(html.pg-history) #infoBar:empty{
  display: none !important;
}
/* History / Reports header white on a phone / tablet too, as on a desktop
   (owner, 2026-11-11: "remove the grey colouring" — the old #f5f5f5 band) */
:where(html.pg-history, html.pg-report) .replay-header{
  background: #fff !important;
  border-bottom: 1px solid var(--c-line, #e6e8ef) !important;
}
/* geofences.html held upright: the sheet's height from js/page-geofences.js —
   58vh, or less on a short phone so the map's buttons stay above it */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-geofences) #geofence-sidebar{
    height: var(--geo-sheet-h, 58vh) !important;
  }
}

/* History: the day's totals and the trips & stops list under one foldable
   "Summary" heading (owner, 2026-11-11: "collapse it by the arrow", "fold
   all in 1 summary") —
   the Search / map-buttons heading's look; hidden while there is no list */
:where(html.pg-history) #hTripsFold:has(> #hTimeline[hidden]):has(> #infoBar:empty){
  display: none;
}
:where(html.pg-history) #hTripsFold > #infoBar{
  margin-top: 8px;
}
:where(html.pg-history) #hTripsFold > #infoBar:empty{
  display: none !important;
}
:where(html.pg-history) #hTripsFold{
  margin: 0;
  padding: 10px 12px 10px !important; /* the Search section's 12px sides */
  box-sizing: border-box;
  flex: none;
}
:where(html.pg-history) #hTripsFold > #hTimeline{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 8px;
}
/* History / Reports title icon on every screen, as Settings' (owner,
   2026-11-11: "you missed the Map History and Reports icon") — it showed only
   on a desktop */
:where(html.pg-history, html.pg-report) .lt-head-title{
  display: flex !important;
  align-items: center;
  gap: 10px;
}
:where(html.pg-history, html.pg-report) .lt-head-ic{
  display: inline-block !important;
  color: var(--c-brand, #696cff);
  font-size: 20px;
}
/* Reports on a phone / tablet held upright (owner, 2026-11-11: "when I
   expand the search it goes behind the report — push the report below the
   search, and pull it up when the search folds"): the report is drawn under
   the search in the same panel; the search box (.replay-body) was allowed to
   shrink (flex 0 1 auto, its own scroll), so a long report squeezed an
   opened search to a sliver. It keeps its full height now and the panel
   scrolls as one — open = the report below it, folded = the report up. */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-report) .search-panel > .replay-body{
    flex: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :where(html.pg-report) .search-panel > #reportBody1{
    flex: none !important;
  }
  :where(html.pg-report) .search-panel{
    overflow-y: auto !important;
  }
}

/* History list mode (js/page-history.js setupMapButtonChooser; phones and
   touch tablets): the rows are the map items — a count pill on the right,
   greyed while there is nothing to show. Held upright the panel is full
   width and the four map buttons left (full screen, zoom, my location,
   layers) sit just below it on the right. */
:where(html.pg-history) .h-mapbtn-count{
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-brand-tint, #ececff);
  color: var(--c-brand, #696cff);
  font: 600 11px / 18px "Poppins", sans-serif;
  text-align: center;
}
:where(html.pg-history) .h-mapbtn.is-empty{
  opacity: 0.45;
}
:where(html.pg-history.h-list-mode.lt-layout-bar) .replay-panel{
  right: 0 !important;
  width: auto !important;
  border-right: 0 !important;
}
:where(html.pg-history.h-list-mode.lt-layout-bar) .maplibregl-ctrl-top-right:not(.front-col){
  top: var(--h-ctrl-y, 0px) !important;
}
:where(html.pg-history.h-list-mode.lt-layout-bar) .front-col:has(#switchStyle){
  top: calc(var(--h-ctrl-y, 0px) + 175px) !important;
}
/* list mode held upright: the panel never runs past the room the four map
   buttons need under it (the open Show on map list scrolls inside instead) */
:where(html.pg-history.h-list-mode.lt-layout-bar) .replay-panel{
  max-height: var(--h-panel-max, calc(100% - 360px)) !important; /* js: room for the four buttons above the player */
}
/* History held upright with a day loaded (owner, 2026-11-11: "fix this"):
   the search box shrank under a long Summary (flex 0 1 auto), hiding Show on
   map and putting SUMMARY over SEARCH. Nothing shrinks now; the panel scrolls
   as one under its pinned header. */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-history) .replay-panel{
    overflow-y: auto !important;
  }
  :where(html.pg-history) .replay-panel > .replay-body,
  :where(html.pg-history) .replay-panel > #hTripsFold{
    flex: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  :where(html.pg-history) .replay-panel > .replay-header{
    position: sticky !important;
    top: 0;
    z-index: 5;
  }
}
/* one scrollbar (owner, 2026-11-11: "double scrollbar issue"): held upright
   the trip list has no height of its own — the panel scrolls */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-history) #hTripsFold > #hTimeline{
    max-height: none !important;
    overflow: visible !important;
  }
}

/* History's loading popup (owner, 2026-11-11: "a loading popup like Reports"):
   Reports' rules, copied for pg-history (reportSpin keyframes shared) */
:where(html.pg-history) #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-history) #globalLoadingOverlay.active{
  display: flex;
}
:where(html.pg-history) .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-history) .loading-overlay-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
:where(html.pg-history) .loading-overlay-status{
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
:where(html.pg-history) .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-history) .loading-meta-label{
  font-weight: 700;
  color: #475569;
}
:where(html.pg-history) .loading-meta-value{
  font-weight: 600;
  color: #1f2937;
  word-break: break-word;
}
:where(html.pg-history) .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-history) .loading-overlay-cancel:hover{
  background: #fdeceb;
}
:where(html.pg-history) .loading-overlay-cancel[disabled]{
  opacity: 0.6;
  cursor: default;
}
:where(html.pg-history) .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;
}
:where(html.pg-history) #globalLoadingOverlay{
  z-index: 40000;
}
:where(html.pg-history) #globalLoadingOverlay{
  padding: 16px;
  box-sizing: border-box;
}
:where(html.pg-history) .loading-overlay-card{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 460px;
}

/* History: Show on map sits under Summary now (owner, 2026-11-11), outside
   the search box — its own 12px sides, as Summary; never shrinks held upright */
:where(html.pg-history) #hMapBtns.h-mapbtns-low{
  margin: 0;
  padding: 10px 12px !important;
  box-sizing: border-box;
  flex: none;
  border-top: 1px solid var(--c-line, #e6e8ef);
}

/* ── One button rule on the regular pages (owner, 2026-11-11: "audit the
   buttons — compact like the Sign out button, all buttons the same design
   rule"). The Sign out button is the model: 36px high, 10px corners, 13px /
   600, as wide as its words (at least 140px), never stretched, centred in
   its row. Three kinds:
     main      brand fill, white text  (Show, Update, Create link, Select,
               Scan QR code, Verify IMEI, Confirm, Retrieve my settings)
     other     brand tint, brand text  (Clear, Cancel, Back, Stop camera)
     stop /    white, 1px red outline, red text (Stop, Stop loading, Delete
     delete    my account, Sign out)
   Not touched: tabs, status chips, Settings rows, the small in-row buttons
   (Copy / Edit / View / Refresh / Repair), Dashboard's Find (part of its
   field), Excel / PDF (size only). ── */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(
  .show-btn, .clear-btn, .stop-btn,
  .dp-btn, .sl-btn, .lt-acc-btn, .st-signout, .loading-overlay-cancel,
  .download-xlsx-btn, .download-pdf-btn
).btn-rule, :where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(
  .show-btn, .clear-btn, .stop-btn,
  .dp-btn, .sl-btn, .lt-acc-btn, .st-signout, .loading-overlay-cancel,
  .download-xlsx-btn, .download-pdf-btn
){
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 100%;
  height: 36px !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 20px !important;
  border-radius: 10px !important;
  box-sizing: border-box;
  font: 600 13px / 1 "Poppins", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}
/* main */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.show-btn, .dp-btn-primary, .sl-btn:not(.sl-btn-light), #retriveBtn){
  background: var(--c-brand, #696cff) !important;
  color: #fff !important;
  border: 0 !important;
}
/* other */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.clear-btn, .sl-btn-light, .dp-btn-danger){
  background: var(--c-brand-tint, #ececff) !important;
  color: var(--c-brand, #696cff) !important;
  border: 0 !important;
}
/* stop / delete */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.stop-btn, .loading-overlay-cancel, #deleteAccountBtn, .st-signout){
  background: #fff !important;
  color: var(--c-danger, #d64545) !important;
  border: 1px solid var(--c-danger, #d64545) !important;
}
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.show-btn, .clear-btn, .stop-btn, .dp-btn, .sl-btn, .lt-acc-btn, .loading-overlay-cancel)[disabled]{
  opacity: 0.5 !important;
  cursor: default !important;
}
/* their rows: centred, 10px apart, wrapping on a narrow screen */
:where(html.pg-history, html.pg-report) div:has(> .show-btn),
:where(html.pg-report) div:has(> .download-xlsx-btn),
:where(html.pg-livetracking) :is(.dp-btn-row, .dp-modal-actions, .sl-actions){
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center;
  gap: 10px !important;
}
/* single buttons on their own line: centred too */
:where(html.pg-livetracking) .sl-btn.sl-wide{
  display: flex !important;
  margin: 8px auto !important;
}
:where(html.pg-history, html.pg-report) .loading-overlay-cancel{
  display: flex !important;
  margin: 12px auto 0 !important;
}
:where(html.pg-livetracking) .st-signout{
  display: flex !important;
  margin: 10px auto 24px !important;
}
/* the delete confirmation: Yes, delete = stop / delete; No = other */
:where(html.pg-livetracking) .lt-acc-btn.lt-acc-btn-danger{
  background: #fff !important;
  color: var(--c-danger, #d64545) !important;
  border: 1px solid var(--c-danger, #d64545) !important;
}
:where(html.pg-livetracking) .lt-acc-btn.lt-acc-btn-plain{
  background: var(--c-brand-tint, #ececff) !important;
  color: var(--c-brand, #696cff) !important;
  border: 0 !important;
}
:where(html.pg-livetracking) :is(.lt-acc-actions, div:has(> #confirmDeleteYes)){
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 10px !important;
}

/* ── Compact buttons (owner, 2026-11-11: "I meant compact — like the Copy /
   Repair buttons, not the Sign out size; why a single button per row"):
   replaces the size part of the rule above. Every action button is the
   Settings in-row button's shape — 32px high, 0 14px, 12px / 600, 10px
   corners, as wide as its words (no minimum) — so they sit side by side in
   one row, from the left. The three colours stay. Sign out keeps its own. ── */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(
  .show-btn, .clear-btn, .stop-btn,
  .dp-btn, .sl-btn, .lt-acc-btn, .loading-overlay-cancel,
  .download-xlsx-btn, .download-pdf-btn
){
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 14px !important;
  font: 600 12px / 1 "Poppins", sans-serif !important;
}
:where(html.pg-history, html.pg-report) div:has(> .show-btn),
:where(html.pg-report) div:has(> .download-xlsx-btn),
:where(html.pg-livetracking) :is(.dp-btn-row, .dp-modal-actions, .sl-actions, .lt-acc-actions, div:has(> #confirmDeleteYes)){
  justify-content: flex-start !important;
  gap: 8px !important;
}
/* single buttons: from the left too (the popup's Stop loading stays centred) */
:where(html.pg-livetracking) .sl-btn.sl-wide{
  margin: 8px 0 !important;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-btn{
  font: 600 12px / 1 "Poppins", sans-serif !important;
  height: 32px !important;
}
/* the rule above must not show a button the page has hidden (Stop at rest,
   Excel / PDF before a report, the delete confirmation's Yes / No) */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(
  .show-btn, .clear-btn, .stop-btn,
  .dp-btn, .sl-btn, .lt-acc-btn, .st-signout, .loading-overlay-cancel,
  .download-xlsx-btn, .download-pdf-btn
):is([style*="display: none"], [style*="display:none"], [hidden]){
  display: none !important;
}

/* ── The button system (owner, 2026-11-12: approved the plan — "yes do it
   all"). One compact shape (32px, 10px corners, 12px / 600, as wide as its
   words) and five styles, by what the button does:
     Primary    brand fill        the main action of a form (one per row, first)
     Secondary  brand tint        neutral / step back (Cancel, Back, No, Excel, PDF)
     Negative   red tint          clears or stops, nothing lost (Clear, Stop,
                                  Stop loading, Delete my account, Sign out)
     Danger     red fill          cannot be undone, only in a final confirm
                                  (Yes, delete)
     Disabled   the same, faded
   No outlined buttons any more. The rules above set the shape; these set the
   colours (later, same weight, so they win). ── */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.show-btn, .dp-btn-primary, .sl-btn:not(.sl-btn-light), #retriveBtn){
  background: var(--c-brand, #696cff) !important;
  color: #fff !important;
  border: 0 !important;
}
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.sl-btn-light, .dp-btn-danger, .download-xlsx-btn, .download-pdf-btn, .lt-acc-btn.lt-acc-btn-plain){
  background: var(--c-brand-tint, #ececff) !important;
  color: var(--c-brand, #696cff) !important;
  border: 0 !important;
}
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.clear-btn, .stop-btn, .loading-overlay-cancel, #deleteAccountBtn, .st-signout){
  background: #fdecec !important;
  color: #d64545 !important;
  border: 0 !important;
}
:where(html.pg-livetracking) #confirmDeleteYes{
  background: #d64545 !important;
  color: #fff !important;
  border: 0 !important;
}
/* pressed / hover: one step darker */
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.show-btn, .dp-btn-primary, .sl-btn:not(.sl-btn-light), #retriveBtn):not([disabled]):hover{
  background: #5f61e6 !important;
}
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.sl-btn-light, .dp-btn-danger, .download-xlsx-btn, .download-pdf-btn, .lt-acc-btn.lt-acc-btn-plain):not([disabled]):hover{
  background: #dcdcff !important;
}
:where(html.pg-livetracking, html.pg-history, html.pg-report, html.pg-dashboard) :is(.clear-btn, .stop-btn, .loading-overlay-cancel, #deleteAccountBtn, .st-signout):not([disabled]):hover{
  background: #f9dada !important;
}
:where(html.pg-livetracking) #confirmDeleteYes:not([disabled]):hover{
  background: #c23b3b !important;
}
/* Sign out: the same compact shape as every button */
:where(html.pg-livetracking) .st-signout,
:where(html.pg-livetracking) #ltSettingsContent .st-signout{
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 14px !important;
  font: 600 12px / 1 "Poppins", sans-serif !important;
}
/* Excel / PDF keep their file icons and their own colours (owner,
   2026-11-12: "put icons and use Excel and PDF colours"): Excel green, PDF
   red, as tints like the other soft buttons; the icon takes the text colour */
:where(html.pg-report) .download-xlsx-btn.download-xlsx-btn{
  background: #e6f4ec !important;
  color: #1d7a46 !important;
}
:where(html.pg-report) .download-xlsx-btn.download-xlsx-btn:not([disabled]):hover{
  background: #d3ecdf !important;
}
:where(html.pg-report) .download-pdf-btn.download-pdf-btn{
  background: #fdecec !important;
  color: #c62828 !important;
}
:where(html.pg-report) .download-pdf-btn.download-pdf-btn:not([disabled]):hover{
  background: #f9dada !important;
}
:where(html.pg-report) :is(.download-xlsx-btn, .download-pdf-btn) i{
  color: inherit !important;
  font-size: 14px;
}
/* the small in-row buttons with an icon: the icon and the word 6px apart */
:where(html.pg-livetracking) .st-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* Panel titles centred (owner, 2026-11-12: "top bar title and its logo need
   to middle like History and Reports; put the back button near the close
   button, its left side; same for sideways and upright both"): Settings,
   Notifications, Geofences, Vehicle settings, Live tracking link and Add
   vehicle — the icon + title sit in the middle of the header in every
   layout; the ← moves to the right, beside the × (menu layout) or beside
   the round menu button #ltMenuBtn (bottom-bar layout). The switches on
   Notifications / Geofences step left of it. */
:where(html.pg-livetracking) .notif-sticky-head,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2{
  position: relative;
}
:where(html.pg-livetracking) .notif-sticky-head h2,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2{
  justify-content: center !important;
  text-align: center;
}
/* the same room on both sides so the middle is the middle */
:where(html.pg-livetracking) .notif-sticky-head{
  padding-left: 48px !important;
  padding-right: 48px !important;
}
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2{
  padding-left: 56px !important;
  padding-right: 56px !important;
}
:where(html.pg-livetracking) :is(#notification-sidebar, #geofence-sidebar) .notif-sticky-head{
  padding-right: 120px !important;
  padding-left: 120px !important;
}
:where(html.pg-livetracking) .notif-sticky-head .lt-head-back,
:where(html.pg-livetracking) #add-vehicle-sidebar .av-back-btn,
:where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2 .lt-head-back{
  position: absolute;
  right: 56px; /* beside the × (menu layout: 40px ending 8px from the edge, a 12px gap); the bar layout moves it to the edge below */
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}
:where(html.pg-livetracking) #add-vehicle-sidebar .notif-sticky-head h2{
  flex: 1 1 auto;
}
/* ── The upright (bottom-bar) layout's menu button (owner, 2026-11-12: "put
   the round menu button on each page, like the phones" — "my wrong, I want
   it top LEFT for upright screens"): #ltMenuBtn, #ltNavCollapse's look —
   28px, brand blue, a white ring — fixed at the top-left of the screen, over
   every page and panel (the frames, Settings, the vehicle list…), under the
   drawer it opens (z 40 / 41). The map's capsule is the single blue Vehicles
   pill beside it. The panels' ← sits on the right edge here (no × to pair
   with). ── */
:where(html.pg-livetracking) #ltMenuBtn{
  display: none;
}
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-livetracking) #ltMenuBtn{
    position: fixed;
    /* 12px like the Vehicles pill beside it (top: 9px, 34px tall — the same
       centre line) — NOT + the safe-area inset: the page's own top bars do
       not add it, so in the Android app the button sat ~35px below the pill
       and over the "Search" line (owner, 2026-11-12, Samsung S21 FE) */
    top: 12px;
    left: 12px;
    z-index: 39;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-brand, #696cff);
    color: #fff;
    box-shadow: 0 0 0 4px #fff, 0 2px 10px rgba(34, 48, 62, 0.18);
    cursor: pointer;
  }
  :where(html.pg-livetracking) #ltMenuBtn i{
    font-size: 18px;
  }
  :where(html.pg-livetracking) #ltMenuBtn:hover,
  :where(html.pg-livetracking) #ltMenuBtn[aria-expanded="true"]{
    background: #5f61e6;
  }
  :where(html.pg-livetracking.lt-geo-mode) #ltMenuBtn{
    display: none;
  }
  /* the Vehicles pill: blue, next to the round button (12 + 28 + 12 from the edge) */
  :where(html.pg-livetracking) .lt-capsule{
    left: 52px;
    top: 9px;
    background: var(--c-brand, #696cff);
  }
  :where(html.pg-livetracking) .lt-capsule .lt-vehicles-btn{
    background: var(--c-brand, #696cff);
    color: #fff;
  }
  :where(html.pg-livetracking) .lt-capsule .lt-vehicles-btn:hover{
    background: #5f61e6;
  }
  /* no × beside it here: every panel's ← goes to the right edge */
  :where(html.pg-livetracking) .notif-sticky-head .lt-head-back,
  :where(html.pg-livetracking) #add-vehicle-sidebar .av-back-btn,
  :where(html.pg-livetracking) #edit-device-sidebar[data-dp-mode] .dp-form-box h2 .lt-head-back{
    right: 10px;
  }
  /* the Notifications / Geofences sheet: its switch stays on the right (no
     × there), the title centred */
  :where(html.pg-livetracking) :is(#notification-sidebar, #geofence-sidebar) .notif-sticky-head{
    padding-left: 104px !important;
    padding-right: 104px !important;
  }
}
/* Upright: the frames' titles clear the round menu button at the top-left
   (owner, 2026-11-12: "fix this, title with its logo need to center") —
   History / Reports: icon + title in the middle of their header, the same
   room (52px = 12 + 28 + 12) on both sides; Dashboard: the greeting block
   steps right of the button. */
@media not ((orientation: landscape) or (min-width: 900px)) {
  :where(html.pg-history, html.pg-report) .replay-header{
    display: flex !important;
    align-items: center;
    justify-content: center !important;
    padding-left: 52px !important;
    padding-right: 52px !important;
    box-sizing: border-box;
  }
  :where(html.pg-history, html.pg-report) .lt-head-title{
    margin: 0 auto !important;
    justify-content: center;
  }
  :where(html.pg-dashboard) .db-head{
    padding-left: 40px;
  }
}
/* Notifications / Geofences: no ← in any layout (owner, 2026-11-12: "no need
   back button here, the user can click Live tracking directly"); the switch
   sits on the right in both layouts, where the × would be. */
:where(html.pg-livetracking) :is(#notification-sidebar, #geofence-sidebar) .lt-head-back{
  display: none !important;
}
:where(html.pg-livetracking) :is(#notification-sidebar, #geofence-sidebar) .lt-priv-toggle{
  right: 10px;
}
/* Add vehicle's list scrolled with the standard grey bar (owner, 2026-11-12:
   "scrollbar? why different"): its own rule said scrollbar-width: thin, which
   in Chrome switches the ::-webkit-scrollbar look off; the id outranked the
   reset in the "one scrollbar" block above. Back to the 6px blue bar. */
:where(html.pg-livetracking) #add-vehicle-sidebar .route-list{
  scrollbar-width: auto;
}
/* the Status legend: each label on one line ("In-active" wrapped to two on
   a phone, owner 2026-11-12) */
:where(html.pg-dashboard) .db-st{
  white-space: nowrap;
}