/* ============================================================================
   NoJack Track — client-grade UI theme
   Premium dark "security operations" look. Every class hook used by the
   markup/JS is preserved; this file restyles them.
   ============================================================================ */
:root {
  --bg: #080b12;
  --surface: #0f1521;
  --surface-2: #151d2c;
  --surface-3: #1d2740;
  --surface-hi: #26324f;
  --border: #273250;
  --border-soft: #1a2333;
  --text: #eef2f8;
  --muted: #96a3ba;
  --faint: #657189;
  --brand: #e6122a;
  --brand-2: #ff3547;
  --brand-wash: rgba(230, 18, 42, 0.12);
  /* electric-cyan secondary accent — live / selected / interactive (the ⚡ energy) */
  --accent: #25d9f2;
  --accent-dim: #0e94a8;
  --accent-wash: rgba(37, 217, 242, 0.12);
  /* status semantics — ONE canonical value each (ends the 3-greens / multi-reds drift) */
  --ok: #26d07c; --run: #26d07c; --run-wash: rgba(38, 208, 124, 0.14);
  --idle: #f5a524; --idle-wash: rgba(245, 165, 36, 0.14);
  --stop: #ff4d5e; --stop-wash: rgba(255, 77, 94, 0.14);
  --inact: #8b7bfb; --inact-wash: rgba(139, 123, 251, 0.14);
  --warn: #f5a524;
  --off: #5b6879;
  --ring: rgba(37, 217, 242, 0.35);
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sh-3: 0 20px 60px rgba(0, 0, 0, 0.55);
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(230, 18, 42, 0.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(40, 80, 160, 0.10), transparent 55%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.1px;
}

.view { height: 100vh; height: 100dvh; width: 100vw; }
#app-view { height: var(--app-visible-height, 100dvh); }
.view.center { display: grid; place-items: center; padding: 20px; }
.view.col { display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ---------- brand lockup (logo mark injected via CSS, no extra markup) ---------- */
.logo { display: inline-flex; align-items: center; gap: 11px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.4px; }
.logo::before {
  content: "";
  width: 1.55em; height: 1.55em; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='11' fill='%23e6122a'/%3E%3Cpath fill='%23fff' d='M20 9.2c-4.3 0-7.8 3.4-7.8 7.7 0 5.8 7.8 13.9 7.8 13.9s7.8-8.1 7.8-13.9c0-4.3-3.5-7.7-7.8-7.7zm0 10.6a2.85 2.85 0 1 1 0-5.7 2.85 2.85 0 0 1 0 5.7z'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: 0 6px 18px rgba(230, 18, 42, 0.4);
  border-radius: 12px;
}
.logo span { color: var(--brand); }
.logo.sm { font-size: 1.12rem; }

/* Square NoJack Track shield supplied by the owner. Keep it contained at every size so the
   NO JACK and TRACK lettering is never cropped by the former wide-banner treatment. */
.brand-logo {
  display: block;
  width: min(240px, 100%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 2px auto 8px;
  border-radius: 24px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42));
}
.brand-logo.sm {
  width: 58px;
  height: 58px;
  max-width: none;
  flex: none;
  margin: 0;
  border-radius: 15px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.34));
}
/* Phones and portrait tablets keep a compact square mark; it no longer turns into a
   full-width banner that takes map space away from the user. */
@media (max-width: 979px) {
  .appbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .appbar .brand-logo.sm { order: -1; width: 58px; height: 58px; max-height: 58px; margin: 0; border-radius: 15px; object-fit: contain; }
}
/* APK: the brand mark shows only on the Home tab — every other tab gets a slim header
   (scope chip + bell) so the map / vehicle list / trips / settings / info get full height. */
html.is-app #app-view:not([data-tab="home"]) .appbar .brand-logo.sm { display: none; }
.admin-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.6px; color: var(--brand); text-transform: uppercase; align-self: center; padding: 4px 10px; border: 1px solid rgba(230, 18, 42, 0.4); border-radius: 999px; background: rgba(230, 18, 42, 0.1); }

/* ---------- login ---------- */
.card {
  width: min(380px, 94vw);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)) , var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 34px 30px 30px;
  box-shadow: var(--sh-3);
}
.card .logo { width: 100%; justify-content: center; margin-bottom: 6px; }
.card .sub { color: var(--muted); margin: 6px 0 24px; text-align: center; font-size: 0.92rem; }
/* login: full-screen control-room backdrop + dark scrim so the card stays crisp */
#login-view.center { background: linear-gradient(rgba(8, 11, 18, 0.72), rgba(8, 11, 18, 0.9)), url("/img/login-bg.webp?v=2") center / cover no-repeat, var(--bg); }
#login-view .card { background: linear-gradient(180deg, rgba(21, 29, 44, 0.92), rgba(15, 21, 33, 0.97)); border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--sh-3); }
/* The square logo sits inside the card, fully visible on phones and desktop. */
#login-view .brand-logo { width: min(238px, 72vw); max-width: 100%; height: auto; object-fit: contain; margin: -8px auto 18px; border-radius: 26px; }

label, #pw-form label, .card label {
  display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
input {
  width: 100%; margin-top: 7px; padding: 12px 13px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 0.95rem; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: var(--faint); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
/* "Keep me signed in" — horizontal checkbox row. Selector must out-specify `.card label`
   (0,2,0) or it inherits the uppercase block-label styling. */
.card label.remember-row, .remember-row { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 6px 0; text-transform: none; letter-spacing: 0; font-size: 0.86rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.remember-row input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.remember-row span { user-select: none; }

button {
  cursor: pointer; border: none; border-radius: var(--r-sm);
  padding: 11px 18px; font-weight: 650; font-size: 0.9rem; font-family: inherit;
  color: #fff; background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: var(--sh-1); transition: filter 0.15s, transform 0.05s, background 0.15s;
}
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
button.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
button.ghost:hover { background: var(--surface-3); filter: none; }
button.danger { background: transparent; color: #ff8a8a; border: 1px solid #5a2b32; box-shadow: none; }
button.danger:hover { background: rgba(120, 30, 40, 0.25); filter: none; }
.card button { width: 100%; margin-top: 10px; padding: 13px; font-size: 0.95rem; }

.error { color: #ff7a7a; font-size: 0.85rem; margin: 14px 0 0; text-align: center; }
.muted { color: var(--muted); font-size: 0.88rem; }

/* ============================================================================
   Client app (mobile 3-tab)
   ============================================================================ */
.appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; flex: none;
  background: linear-gradient(180deg, var(--surface), rgba(18, 23, 35, 0.92));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.chip {
  font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface-2);
}
.chip.all {
  color: #ffd9dc; border-color: rgba(230, 18, 42, 0.5);
  background: linear-gradient(180deg, rgba(230, 18, 42, 0.22), rgba(230, 18, 42, 0.10));
}

#app-view .tabpanel { flex: 1; min-height: 0; position: relative; overflow-y: auto; }
#panel-live { overflow: hidden; }
#map { height: 100%; width: 100%; background: #0a0d12; }

/* vehicle-list status dot — colour set inline from the ignition/motion/comms state */
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.5); }

/* ---------- vehicle map markers (heading arrow / stopped dot) ---------- */
/* divIcon wrapper has no chrome of its own; the glyph inside carries the colour. */
.veh-icon { background: none; border: none; }
.veh-arrow { width: 30px; height: 30px; display: block; transform-origin: 50% 50%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.veh-arrow path { fill: var(--c, var(--off)); stroke: #0a0d13; stroke-width: 1.3; stroke-linejoin: round; }
.veh-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--off)); border: 2px solid #0a0d13; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
/* the followed vehicle gets a soft ring so it stands out from the fleet */
.veh-icon.followed .veh-arrow { filter: drop-shadow(0 0 0 2px rgba(230, 18, 42, 0.9)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.veh-icon.followed .veh-dot { box-shadow: 0 0 0 3px rgba(230, 18, 42, 0.5), 0 1px 2px rgba(0, 0, 0, 0.6); }

/* ---------- "last known GPS" pin (shown when GPS is denied) ---------- */
.lastknown-icon { background: none; border: none; }
.lastknown {
  width: 14px; height: 14px; border-radius: 50%; position: relative;
  background: #e6edf6; border: 2px solid #0a0d13;
  box-shadow: 0 0 0 2px rgba(230, 237, 246, 0.55), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.lastknown::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(230, 237, 246, 0.7); animation: lk-pulse 1.8s ease-out infinite;
}
@keyframes lk-pulse { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- live-LBS tower-hop labels ---------- */
.lbs-hop-label {
  background: var(--warn); color: #1a1205; font-weight: 800; font-size: 0.66rem;
  width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%;
  border: 1.5px solid #1a1205; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.lbs-hop-label.dim { background: #7a5a1a; color: #ffe6b0; opacity: 0.85; }
.track-note.live { color: #b9f0c8; background: rgba(46, 204, 113, 0.10); border-color: rgba(46, 204, 113, 0.30); }
.track-note.live .lbs-maps { color: #c8f0d4; }

/* live-track "following" card */
.track-card {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 1100; /* above the leaflet map controls so the card's top-left isn't covered */
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 15px 17px; box-shadow: var(--sh-2);
  /* Bottom sheet: never taller than most of the screen; scroll inside if needed
     so the map above always stays visible. Collapses to a peek via the handle.
     overflow-x hidden so a wide child can never push the card's content off-screen left. */
  max-height: 86vh; overflow: hidden auto;
}
/* Grab handle — tap/drag to collapse the card down to a peek so the map shows. */
#track-card {
  left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
  bottom: var(--track-sheet-bottom, 14px);
  max-height: var(--track-sheet-height, calc(100% - 28px)); overflow: hidden; gap: 8px;
}
#track-card > .track-row { flex: none; }
.track-body { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--faint) var(--surface); }
.track-body > * { flex-shrink: 0; }
.track-client-details { margin: 0 12px; padding: 12px 0; border-block: 1px solid var(--border-soft); }
.client-details-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.client-details-heading h3 { margin: 0; font-size: 16px; font-weight: 700; }
#client-details-refresh { min-height: 44px; padding: 8px 12px; flex-shrink: 0; }
#client-details-values { margin: 12px 0 0; }
#client-details-values > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin: 10px 0; }
#client-details-values dt { color: var(--muted); }
#client-details-values dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; user-select: text; }
#client-details-status { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 400px) { #client-details-values > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.track-handle { align-self: stretch; flex: none; min-height: 44px; padding: 8px 12px; margin: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-3); color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 650; cursor: pointer; }
.track-handle:hover { background: var(--surface-hi); }
.track-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-height: 450px) {
  #track-card { padding: 8px 10px; gap: 6px; }
  #track-card .track-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Peek state: only the handle + the name/speed header (and any maintenance
   banner) show — map fully visible. */
.track-card.collapsed { overflow: hidden; gap: 6px; }
.track-card.collapsed .track-body > *:not(.track-maint):not(.recovery-status):not(.track-actions) { display: none; }
.track-card.collapsed:not(.recovery-active) .track-body > .track-actions { display: none; }
.track-card.collapsed.recovery-active .track-actions > :not(#track-lbs-live):not(#track-predictions):not(#track-recovery):not(#track-share) { display: none; }
.track-card.collapsed .track-row { cursor: pointer; }
/* Per-vehicle maintenance banner (client-facing) + list-card flag badge. */
.track-maint { background: #f5a623; color: #1b1200; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.2px; text-align: center; padding: 9px 12px; border-radius: var(--r-sm); line-height: 1.3; }
.obj-maint { color: #ffcf99; border-color: rgba(245, 165, 36, 0.55); background: rgba(245, 165, 36, 0.14); }
.track-row { display: flex; align-items: center; gap: 13px; }
#track-history, #report-card-csv { margin: 0; }
.track-back { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); padding: 7px 11px; font-size: 0.8rem; border-radius: var(--r-sm); white-space: nowrap; }
.track-main { flex: 1; min-width: 0; }
.track-name { font-weight: 700; font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-meta { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.track-speed { font-weight: 800; font-size: 1.35rem; white-space: nowrap; text-align: right; line-height: 1; color: #fff; }
/* report: "towers used" chips (the LBS layer of a movement report) */
.report-towers { display: flex; flex-wrap: wrap; gap: 6px; max-height: 82px; overflow-y: auto; }
.report-towers .tower-chip {
  font-size: 0.72rem; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: rgba(245, 165, 36, 0.14); color: #f5a524;
  border: 1px solid rgba(245, 165, 36, 0.34); white-space: nowrap; cursor: default;
}
.report-towers .tower-chip.unresolved { opacity: 0.55; }
#report-lbs-toggle.active { background: rgba(245, 165, 36, 0.18); color: #f5a524; border-color: rgba(245, 165, 36, 0.5); }
/* Follow — live recovery navigation */
.follow-btn {
  width: 100%; margin-top: 8px; padding: 11px 14px; border: none; border-radius: var(--r-sm);
  background: #16a34a; color: #fff; font-weight: 750; font-size: 0.9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.follow-btn:hover { filter: brightness(1.06); }
.follow-btn.active { background: #dc2626; }
.follow-btn svg { fill: currentColor; }
.nav-bar {
  margin-top: 8px; padding: 9px 12px; border-radius: var(--r-sm); font-weight: 650; font-size: 0.85rem;
  background: rgba(22, 163, 74, 0.12); border: 1px solid rgba(22, 163, 74, 0.4); color: #bbf7d0;
}
.nav-bar.warn { background: rgba(245, 165, 36, 0.12); border-color: rgba(245, 165, 36, 0.4); color: #ffd9a8; }
.me-dot {
  width: 16px; height: 16px; border-radius: 50%; background: #2563eb; border: 3px solid #fff;
  box-shadow: 0 0 0 2px #2563eb, 0 1px 4px rgba(0, 0, 0, 0.5);
}
.track-speed small { display: block; font-weight: 600; color: var(--faint); font-size: 0.58rem; letter-spacing: 0.5px; margin-top: 3px; }
.overlay-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); z-index: 400; pointer-events: none; padding: 24px; text-align: center; }

/* live-track actions (Maps / LBS / Details) */
.track-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* wrap on narrow cards so the row never overflows + shifts the card */
.btn-mini {
  flex: 1 1 92px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-3); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 11px 8px; font-size: 0.85rem; font-weight: 600;
  box-shadow: none; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-mini svg { width: 18px; height: 18px; fill: currentColor; flex: none; transition: transform 0.15s; }
.btn-mini:hover { background: var(--border); filter: none; }
.btn-mini:active { transform: translateY(1px); }
.btn-mini.active { border-color: var(--brand); color: #fff; background: rgba(230, 18, 42, 0.16); }
.btn-mini[aria-expanded="true"] svg { transform: rotate(180deg); }
.btn-mini.disabled, .btn-mini[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }
.btn-mini:disabled { opacity: 0.6; cursor: default; }

/* LBS result note */
.track-note {
  font-size: 0.78rem; color: #ffe0a8; line-height: 1.55;
  background: rgba(245, 165, 36, 0.10); border: 1px solid rgba(245, 165, 36, 0.30);
  border-radius: var(--r-sm); padding: 8px 11px;
}
.track-note .lbs-maps { color: #ffd9a8; font-weight: 700; text-decoration: underline; }
.track-note .lbs-demo { color: var(--faint); font-style: italic; }

/* telemetry (GPS + Network parameter panels) */
.telemetry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; max-height: 54vh; overflow-y: auto; flex: none; }
/* APK (phone AND tablet): the track card is a flex column, so telemetry must flow at its
   natural height (flex:none above stops the column shrinking it to a sliver) and let the
   CARD be the scroller — otherwise the Info box collapses to ~60px and looks empty. This
   used to live only under the ≤560px phone query, which left TABLETS (is-app, wider than
   560) with the broken tiny box — that was Anton's "info box doesn't show on the tablet". */
html.is-app .telemetry { max-height: none; overflow: visible; }
.tele-group { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 9px 11px; }
.tele-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.7px; color: var(--brand); font-weight: 700; margin-bottom: 8px; }
.tele-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 0.9rem; border-bottom: 1px solid var(--border-soft); }
.tele-row:last-child { border-bottom: none; }
.tele-row .tk { color: var(--muted); white-space: nowrap; }
.tele-row .tv { color: var(--text); font-weight: 600; text-align: right; word-break: break-all; }
.tele-empty { color: var(--muted); font-size: 0.8rem; padding: 6px 2px; }
/* Phones: the Info panel + the meta grid go SINGLE-column and a touch larger, so the
   key/value rows are actually readable — two columns squeezed each to ~150px and clipped
   the values ("Demo Transpo…", "12 Jul, 17:4…"). */
@media (max-width: 560px) {
  /* Let the telemetry flow at full natural height (flex:none so the flex-column card can't
     shrink it into a tiny ~60px nested scrollbox) and let the CARD be the single scroller. */
  .telemetry { grid-template-columns: 1fr; }
  .tele-title { font-size: 0.82rem; }
  .tele-row { font-size: 0.96rem; padding: 8px 0; }
  .tw-grid { grid-template-columns: 1fr; }
  .tw-cell { font-size: 0.9rem; padding-bottom: 6px; }
  .tw-cell .tw-v { white-space: normal; overflow: visible; }
}

/* vehicles tab */
.search-row { padding: 10px 14px 6px; display: flex; align-items: center; gap: 10px; }
.search-row input { margin: 0; flex: 1; min-width: 0; }
.veh-count { font-size: 0.74rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.map-selection-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 14px 10px; }
.select-toggle { flex: none; min-height: 44px; padding: 8px 13px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.select-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.select-toggle:disabled { opacity: 0.45; cursor: default; }
#map-selection-count { margin-left: auto; font-variant-numeric: tabular-nums; }
#live-empty { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100% - 32px)); display: block; padding: 16px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); }

/* ---------- fleet object panel (Trakzee-style redesign) ---------- */
.fleet-status { display: flex; align-items: center; gap: 14px; padding: 12px 14px 2px; }
.fleet-donut { width: 88px; height: 88px; flex: none; }
.donut-svg { width: 100%; height: 100%; }
.donut-num { font-size: 8px; font-weight: 800; fill: var(--text); text-anchor: middle; }
.donut-lbl { font-size: 2.6px; fill: var(--muted); text-anchor: middle; text-transform: uppercase; letter-spacing: 0.4px; }
.fleet-pills { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; min-width: 0; }
/* clean status TILE: colour dot + big tabular count + label (SCOPED to the fleet panel so
   it never bleeds onto the admin role/status .pill badges). */
.fleet-pills .pill {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r); padding: 8px 11px; min-width: 74px; position: relative; transition: border-color 0.15s, background 0.15s;
}
.fleet-pills .pill::before { content: ""; position: absolute; top: 10px; left: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--off)); box-shadow: 0 0 7px var(--pc, transparent); }
.fleet-pills .pill:hover { background: var(--surface-3); border-color: var(--border); }
.fleet-pills .pill.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fleet-pills .pill .pill-n { font-weight: 800; font-size: 1.4rem; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; padding-left: 15px; }
.fleet-pills .pill .pill-l { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 600; }
.fleet-pills .pill.total { --pc: var(--accent); }
.fleet-pills .pill.total .pill-n { color: var(--text); }

.object-list { list-style: none; margin: 0; padding: 6px 12px 18px; }
.obj-row {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 8px 10px 12px; margin-bottom: 7px; transition: border-color 0.15s, background 0.15s;
}
.obj-row:hover { border-color: rgba(230, 18, 42, 0.4); }
.obj-row.sel { border-color: var(--brand); background: var(--surface-2); }
.obj-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); margin-top: 4px; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.obj-text { flex: 1; min-width: 0; }
.obj-client { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2px; color: #e5484d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; }
.obj-l1 { display: flex; align-items: center; gap: 8px; }
.obj-plate { flex: 0 1 auto; min-width: 0; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj-badge { flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.4px; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; background: var(--surface-2); white-space: nowrap; }
.obj-mm { flex: 0 4 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.obj-l2 { color: var(--muted); font-size: 0.78rem; margin-top: 3px; }
.obj-tele { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip3 { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px 3px 8px; }
.chip3 svg { width: 15px; height: 15px; fill: var(--faint); }
.chip3 i { font-style: normal; }
.chip3.on { color: #bff0cf; background: rgba(54, 194, 91, 0.14); border-color: rgba(54, 194, 91, 0.35); }
.chip3.on svg { fill: #36c25b; }
.chip3.off { opacity: 0.7; }
.obj-addr { color: var(--faint); font-size: 0.72rem; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obj-menu-btn { flex: none; align-self: center; background: none; border: none; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 4px 7px; cursor: pointer; border-radius: var(--r-sm); }
.obj-menu-btn:hover { background: var(--surface-3); color: var(--text); }
.obj-menu { position: fixed; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--sh-3); padding: 5px; min-width: 184px; }
.obj-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 0.85rem; padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer; }
.obj-menu-item:hover { background: var(--surface-2); }
/* activity reports dialog */
.wide-dialog { width: min(680px, 94vw); }
.activity-results { max-height: 48vh; overflow: auto; margin: 12px 0 4px; border: 1px solid var(--border); border-radius: var(--r-sm); }
.act-grid { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.act-grid th { position: sticky; top: 0; background: var(--surface-2); text-align: left; padding: 8px 10px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.act-grid td { padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.act-grid tbody tr:hover { background: var(--surface-2); }
#activity-types { gap: 6px; }
#activity-types .preset { font-weight: 600; }
/* fleet records (admin) — module tabs + form select */
.rec-modtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-modtab { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.rec-modtab:hover { background: var(--surface-3); }
.rec-modtab.active { border-color: var(--accent); color: #fff; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--accent-wash); }
#rec-form select { flex: 1 1 180px; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 0.95rem; }
.edit-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit-profile input { margin: 0; width: 100%; }
.place-pin { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: #7c3aed; border: 2px solid #fff; transform: rotate(-45deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.share-link-row { display: flex; gap: 8px; }
.share-link-row input { flex: 1; margin: 0; font-size: 0.82rem; }
#share-dialog select { width: 100%; margin-top: 7px; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); }
/* charts */
.chart-area { margin: 10px 0 4px; }
.chart-svg { width: 100%; height: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.chart-svg .cline { fill: none; stroke: #22d3ee; stroke-width: 2; stroke-linejoin: round; }
.chart-svg .cg { stroke: var(--border); stroke-width: 1; opacity: 0.6; }
.chart-svg .cyl { fill: var(--faint); font-size: 9px; text-anchor: end; }
.chart-svg .cxl { fill: var(--faint); font-size: 9px; }
.chart-svg .ctitle { fill: var(--muted); font-size: 10px; font-weight: 600; }
/* click-to-draw geofence button (admins) */
/* placed top-LEFT beside the zoom control — the top-right corner belongs to the Leaflet
   layers switcher, which this used to hide behind (only a stray "+" peeked out on mobile). */
.geo-draw-btn { position: absolute; left: 52px; top: 12px; right: auto; z-index: 600; background: #7c3aed; color: #fff; border: none; border-radius: 999px; padding: 9px 15px; font-weight: 700; font-size: 0.82rem; box-shadow: var(--sh-2); cursor: pointer; }
.geo-draw-btn.active { background: #dc2626; }

/* update banner (Home page). Web = "reload"; APK = one-tap "Update now". */
.update-bar { display: none; align-items: center; gap: 10px; margin: 0 0 15px; padding: 11px 13px; border-radius: 12px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; font-size: 0.92rem; font-weight: 600; box-shadow: var(--sh-2); }
.update-bar.show { display: flex; }
.update-bar .update-ic { width: 21px; height: 21px; fill: currentColor; flex: none; }
.update-msg { flex: 1 1 auto; min-width: 0; }
.update-act { flex: none; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; font-weight: 700; font-size: 0.86rem; padding: 8px 15px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.update-act:hover { background: rgba(255, 255, 255, 0.3); }
.update-x { flex: none; background: none; border: none; color: rgba(255, 255, 255, 0.85); font-size: 1rem; line-height: 1; cursor: pointer; padding: 4px 4px; }
.vehicle-list { list-style: none; margin: 0; padding: 8px 14px 18px; }
.vehicle-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 13px 15px; margin-bottom: 11px; cursor: pointer;
  box-shadow: var(--sh-1); transition: border-color 0.15s, transform 0.08s, background 0.15s;
}
.vehicle-card:hover { border-color: rgba(230, 18, 42, 0.45); }
.vehicle-card:active { transform: scale(0.995); background: var(--surface-2); }
.vehicle-card .top { display: flex; align-items: center; gap: 10px; }
.vehicle-card .vname { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vehicle-card .vplate {
  margin-left: auto; flex: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; background: var(--surface-2);
}
.vehicle-card .vmeta { color: var(--muted); font-size: 0.82rem; margin-top: 7px; padding-left: 19px; }
.vehicle-card .vowner {
  display: inline-block; margin-top: 9px; margin-left: 19px; font-size: 0.7rem; font-weight: 600;
  color: #ffd0d4; background: rgba(230, 18, 42, 0.14); border: 1px solid rgba(230, 18, 42, 0.3);
  padding: 2px 9px; border-radius: 999px;
}
.pad { padding: 18px; }

/* trips tab */
.trips-controls { padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 10px; }
.trip-select { width: 100%; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-size: 0.95rem; }
.trip-select:focus { outline: none; border-color: var(--brand); }
#trip-presets { margin-bottom: 0; }
.trip-list { list-style: none; margin: 0; padding: 8px 14px 18px; }
.trip-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; box-shadow: var(--sh-1); transition: border-color 0.15s, background 0.15s; }
.trip-card:hover { border-color: rgba(230, 18, 42, 0.45); }
.trip-card:active { background: var(--surface-2); }
.trip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.trip-day { font-weight: 700; }
.trip-time { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.trip-stats { color: var(--text); font-size: 0.85rem; margin-top: 6px; }
.trip-addr { color: var(--muted); font-size: 0.78rem; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* settings tab */
.settings { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.set-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 15px 17px; box-shadow: var(--sh-1); }
.set-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.6px; color: var(--faint); font-weight: 600; }
.set-value { font-weight: 700; margin-top: 5px; font-size: 1.05rem; }
.set-sub { color: var(--muted); font-size: 0.85rem; margin-top: 5px; line-height: 1.5; }
button.wide, a.wide { width: 100%; text-align: center; padding: 14px; font-size: 0.92rem; }
a.wide { text-decoration: none; display: block; }

/* ---------- home / welcome landing ---------- */
#panel-home { overflow-y: auto; }
.home { max-width: 940px; margin: 0 auto; padding: 30px 20px 40px; }
.home-hero { margin-bottom: 22px; }
.home-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.home-user { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 4px; }
.home-sub { color: var(--muted); font-size: 0.95rem; }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.home-tile { text-align: left; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px 18px 16px; position: relative; overflow: hidden; box-shadow: none; transition: border-color 0.15s, transform 0.08s, background 0.15s; }
.home-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc, var(--off)); }
.home-tile:hover { border-color: var(--border); background: var(--surface-3); filter: none; }
.home-tile:active { transform: scale(0.99); }
.home-tile-readonly, .home-tile-readonly:hover, .home-tile-readonly:active { cursor: default; background: var(--surface-2); border-color: var(--border-soft); transform: none; transition: none; }
.home-tile.total { background: linear-gradient(180deg, var(--accent-wash), transparent), var(--surface-2); }
.home-tile-n { display: block; font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--pc, var(--text)); }
.home-tile.total .home-tile-n { color: var(--text); }
.home-tile-l { display: block; margin-top: 7px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.home-quick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.home-cta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px; font-size: 0.92rem; font-weight: 650; }
.home-cta svg { width: 18px; height: 18px; }
.home-cta.ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.home-cta.ghost:hover { background: var(--surface-3); filter: none; }

/* bottom nav */
.bottomnav { flex: none; display: flex; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); }
.navbtn {
  flex: 1; background: transparent; color: var(--faint); border: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0 11px; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.2px;
  position: relative; box-shadow: none;
}
.navbtn svg { width: 23px; height: 23px; fill: currentColor; }
.navbtn:hover { background: transparent; filter: none; color: var(--muted); }
.navbtn:active { transform: none; }
.navbtn.active { color: var(--brand); }
.navbtn.active::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }

/* ---------- desktop / control-room split view (APP only — web uses the full-width tree) ---------- */
@media (min-width: 980px) {
  html.is-app #app-view.col {
    display: grid;
    grid-template-columns: 384px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "bar bar" "side main" "side nav";
  }
  html.is-app .appbar { grid-area: bar; }
  /* the fleet object panel is ALWAYS visible on the left, regardless of the active tab */
  html.is-app #panel-vehicles { grid-area: side; display: block !important; border-right: 1px solid var(--border); }
  html.is-app #panel-live, html.is-app #panel-trips, html.is-app #panel-settings { grid-area: main; min-width: 0; }
  html.is-app .bottomnav { grid-area: nav; justify-content: flex-start; }
  html.is-app .bottomnav .navbtn { flex: none; min-width: 120px; flex-direction: row; gap: 8px; padding: 12px 18px; }
  html.is-app .bottomnav .navbtn span { font-size: 0.82rem; }
  html.is-app .navbtn[data-tab="vehicles"] { display: none; }
  html.is-app .navbtn.active::before { left: 0; right: 0; }
  html.is-app #panel-live .track-card { max-width: 520px; }
}

/* ============ WEB DASHBOARD (browser only — the APK keeps the mobile look) ============ */
/* Control-room SPLIT: the object tree (left) and the live map (right) are BOTH
   visible at once — clicking a vehicle in the tree locates it on the map beside it. */
@media (min-width: 1000px) {
  html.is-web #app-view.col {
    display: grid;
    /* the sidebar width is draggable — --side-w is set by the resize handle (persisted) */
    grid-template-columns: var(--side-w, minmax(600px, 1.4fr)) minmax(300px, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "bar bar" "nav nav" "side main";
  }
  html.is-web .appbar { grid-area: bar; }
  /* desktop nav = a top tab strip under the bar (not a bottom bar) */
  html.is-web .bottomnav { border-top: none; border-bottom: 1px solid var(--border); padding: 0 12px; padding-bottom: 0; background: var(--surface); }
  html.is-web .navbtn { flex: none; flex-direction: row; gap: 8px; min-width: 0; padding: 12px 18px; font-size: 0.85rem; }
  html.is-web .navbtn svg { width: 18px; height: 18px; }
  html.is-web .navbtn.active { color: var(--brand-2); }
  html.is-web .navbtn.active::before { top: auto; bottom: 0; left: 12px; right: 12px; height: 2px; border-radius: 2px 2px 0 0; }
  html.is-web #panel-vehicles { grid-area: side; display: block !important; border-right: 1px solid var(--border); overflow-y: auto; max-width: none; }
  html.is-web #panel-vehicles[hidden] { display: block !important; } /* tree stays in the sidebar even when 'live' is the active pane */
  html.is-web #panel-live { grid-area: main; }
  html.is-web #panel-trips, html.is-web #panel-settings { grid-area: main; }
  html.is-web .tabpanel[hidden]:not(#panel-vehicles) { display: none; }
  html.is-web .bottomnav { grid-area: nav; justify-content: flex-start; }
  html.is-web .navbtn[data-tab="vehicles"] { display: none; } /* the tree is always in the sidebar */
  /* a tab on the map's left edge to collapse the vehicle list so the map gets bigger */
  html.is-web .side-toggle {
    display: grid; place-items: center; position: absolute; z-index: 620;
    top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 56px; padding: 0;
    background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-left: none;
    border-radius: 0 8px 8px 0; cursor: pointer; font-size: 1rem; box-shadow: var(--sh-2);
  }
  html.is-web .side-toggle:hover { background: var(--surface-2); color: var(--text); }
  /* draggable divider — grab the map's left edge and drag to resize the vehicle list */
  html.is-web:not(.side-collapsed) .side-resize {
    display: block; position: absolute; z-index: 615; top: 0; left: 0; width: 9px; height: 100%; cursor: col-resize;
  }
  html.is-web .side-resize::before {
    content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: transparent; transition: background 0.12s;
  }
  html.is-web .side-resize:hover::before, html.is-web.resizing .side-resize::before { background: color-mix(in srgb, var(--brand) 60%, transparent); }
  html.is-web.side-collapsed #app-view.col { grid-template-columns: 0 1fr; }
  html.is-web.side-collapsed #panel-vehicles { display: none !important; }
}
/* desktop: Home / Trips / Settings are FULL-WIDTH pages (no vehicle sidebar); only Live keeps the split */
@media (min-width: 1000px) {
  html.is-web #panel-home { grid-area: main; }
  html.is-web #app-view[data-tab="home"],
  html.is-web #app-view[data-tab="trips"],
  html.is-web #app-view[data-tab="settings"] { grid-template-columns: 1fr; grid-template-areas: "bar" "nav" "main"; }
  html.is-web #app-view[data-tab="home"] #panel-vehicles,
  html.is-web #app-view[data-tab="trips"] #panel-vehicles,
  html.is-web #app-view[data-tab="settings"] #panel-vehicles { display: none !important; }
}
.side-toggle, .side-resize { display: none; } /* hidden on the app + narrow web (no split) */
/* Narrow browser windows: stack tree above the map (still one view, not tabs). */
@media (max-width: 999px) {
  html.is-web #app-view.col { display: flex; flex-direction: column; }
  html.is-web .navbtn[data-tab="vehicles"] { display: flex; }
  html.is-web .tabpanel[hidden] { display: none; }
}

/* status tiles: full-width coloured strip instead of the donut */
html.is-web .fleet-donut { display: none; }
html.is-web .fleet-status { padding: 10px 12px 4px; gap: 6px; }
/* desktop: the same clean status TILES, stretched across the sidebar width */
html.is-web .fleet-pills { display: flex; gap: 8px; width: 100%; }
html.is-web .fleet-pills .pill { flex: 1; min-width: 0; }
html.is-web .fleet-pills .pill .pill-n { font-size: 1.55rem; }
html.is-web .fleet-pills .pill.total { --pc: var(--accent); }

/* the object list becomes a dense tree */
html.is-web #vehicle-list.object-list { padding: 4px 10px 20px; }
html.is-web .obj-row { display: none; } /* card rows are APK-only */
.tree-client {
  display: grid; grid-template-columns: 18px 18px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 10px; margin-top: 2px; cursor: pointer; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border); font-weight: 650; font-size: 0.9rem;
}
.tree-client:hover { background: var(--surface-3); }
.tree-arrow { transition: transform 0.15s; color: var(--muted); font-size: 0.8rem; }
.tree-client.open .tree-arrow { transform: rotate(90deg); }
.tree-count { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.tree-client.susp-1 { border-left: 3px solid #eab308; } .tree-client.susp-1 .tree-cname { color: #eab308; }
.tree-client.susp-2 { border-left: 3px solid #f5a623; } .tree-client.susp-2 .tree-cname { color: #f5a623; }
.tree-client.susp-3 { border-left: 3px solid #e5122a; } .tree-client.susp-3 .tree-cname { color: #ff5a5f; }
.tree-cbox, .tree-vbox { width: 15px; height: 15px; margin: 0; accent-color: #2d7feb; flex: none; }
/* Vehicle row (web tree): checkbox | main, where main stacks two compact lines —
   [status pill · plate/make-model/RFID · relative time] then [labelled telemetry chips].
   Fluid: chips wrap instead of the old fixed 11-column grid, so no per-width breakpoints. */
html.is-web .tree-veh {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 9px;
  padding: 8px 12px 9px 16px; border-bottom: 1px solid var(--border-soft); font-size: 0.78rem;
}
html.is-web .tree-veh:hover { background: var(--surface-2); }
html.is-web .tree-veh.sel { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
html.is-web .tree-veh .tree-vbox { margin-top: 2px; }
.tree-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tree-row1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tree-status {
  flex: none; --sc: #9aa4ad; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
  color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc) 42%, transparent);
}
.tree-name-cell { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; overflow: hidden; }
.tree-plate { color: #4aa3ff; text-decoration: none; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 3.4em; }
.tree-plate:hover { text-decoration: underline; }
.tree-badge { flex: 0 3 auto; min-width: 0; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.2px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; background: var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-mm { flex: 0 6 auto; }
.tree-rfid { flex: 0 3 auto; color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.tree-stamp { flex: none; color: var(--faint); font-size: 0.68rem; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; padding-left: 4px; }
.tree-row2 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.tvc { display: inline-flex; align-items: center; gap: 3px; font-size: 0.63rem; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px 1px 5px; white-space: nowrap; }
.tvc svg { width: 11px; height: 11px; fill: var(--faint); }
.tvc i { font-style: normal; }
.tvc.on { color: #bff0cf; background: rgba(54, 194, 91, 0.14); border-color: rgba(54, 194, 91, 0.35); }
.tvc.on svg { fill: #36c25b; }
.tvc.off { color: #f2bcbc; background: rgba(229, 50, 45, 0.10); border-color: rgba(229, 50, 45, 0.30); }
.tvc.off svg { fill: #e5322d; }

/* ---------- dialog ---------- */
dialog {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; width: min(380px, 92vw);
  box-shadow: var(--sh-3);
}
dialog::backdrop { background: rgba(5, 7, 12, 0.7); backdrop-filter: blur(2px); }
dialog h3 { margin: 0 0 18px; font-size: 1.1rem; }
dialog menu { display: flex; gap: 10px; justify-content: flex-end; padding: 0; margin: 10px 0 0; flex-wrap: wrap; }
dialog menu button { width: auto; }
.report-hint { color: var(--muted); font-size: 0.85rem; margin: -6px 0 16px; }
.presets { display: flex; gap: 8px; margin-bottom: 16px; }
.preset { flex: 1; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); padding: 9px 4px; font-size: 0.82rem; box-shadow: none; }
.preset:hover { background: var(--surface-3); filter: none; }
.preset.active { border-color: var(--brand); color: #fff; background: rgba(230, 18, 42, 0.18); }

.leaflet-popup-content { font-size: 0.85rem; }
.leaflet-control-attribution { font-size: 0.62rem; opacity: 0.6; }

/* ============================================================================
   Admin / control-room back-office console
   ============================================================================ */
.topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); }
.spacer { flex: 1; }
.who { color: var(--muted); font-size: 0.86rem; }
a.ghost { text-decoration: none; line-height: 1; padding: 9px 14px; display: inline-block; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); font-size: 0.85rem; }
a.ghost:hover { background: var(--surface-3); }

.badge { font-size: 0.7rem; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface-2); }
.badge.ok { color: #9af0c0; border-color: rgba(46, 204, 113, 0.4); background: rgba(46, 204, 113, 0.12); }
.badge.warn { color: #ffe0a8; border-color: rgba(245, 165, 36, 0.4); background: rgba(245, 165, 36, 0.12); }
.badge.bad { color: #ffb0b0; border-color: rgba(230, 18, 42, 0.4); background: rgba(230, 18, 42, 0.12); }

.tabs { display: flex; gap: 8px; padding: 12px 22px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; box-shadow: none; font-weight: 600; font-size: 0.9rem; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.tab:hover { color: var(--text); background: var(--surface-3); filter: none; }
.tab.active { color: #06131a; background: var(--accent); border-color: var(--accent); font-weight: 700; box-shadow: 0 4px 16px var(--accent-wash); }

.admin-main { flex: 1; overflow-y: auto; padding: 20px; }
.panel { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sh-1); }
.panel h3 { margin: 0 0 16px; font-size: 1rem; display: flex; align-items: center; gap: 12px; padding-left: 12px; border-left: 3px solid var(--accent); line-height: 1.25; }
.panel h3 button { font-size: 0.78rem; padding: 6px 13px; }

.form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.form-row input { width: auto; flex: 1 1 160px; margin-top: 0; }
.form-row select {
  flex: 0 1 200px; padding: 12px 13px; margin-top: 0;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 0.95rem; font-family: inherit;
}
.form-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.form-row button { flex: none; }
/* themed file picker (default browser "Choose file" is a jarring white button on dark) */
input[type="file"] { color: var(--muted); font-size: 0.86rem; max-width: 100%; }
input[type="file"]::file-selector-button { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 14px; font-weight: 600; font-size: 0.82rem; cursor: pointer; margin-right: 12px; transition: background 0.15s; }
input[type="file"]::file-selector-button:hover { background: var(--border); }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.grid th { text-align: left; color: var(--muted); font-weight: 700; padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; background: var(--surface-2); }
table.grid th:first-child { border-top-left-radius: var(--r-sm); }
table.grid th:last-child { border-top-right-radius: var(--r-sm); }
table.grid td { padding: 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.grid tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
table.grid tbody tr:hover { background: var(--accent-wash); }
table.grid input { margin: 0; padding: 7px 9px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.actions button { font-size: 0.76rem; padding: 6px 11px; }

.pill { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); }
.pill.ok { color: #9af0c0; border-color: rgba(46, 204, 113, 0.4); background: rgba(46, 204, 113, 0.1); }
.pill.warn { color: #ffd9a8; border-color: rgba(245, 165, 36, 0.5); background: rgba(245, 165, 36, 0.12); }
.pill.bad { color: #ffb0b0; border-color: rgba(230, 18, 42, 0.4); background: rgba(230, 18, 42, 0.1); }
button.ghost.warn { color: #ffcf99; border-color: rgba(245, 165, 36, 0.5); }
button.ghost.danger { color: #ff9a9a; border-color: rgba(230, 18, 42, 0.45); }

/* ---- Suspended clients: fleet coloring + tags + lockout banners ---- */
/* Fleet-card tint by client status: 1 small=yellow, 2 full=orange, 3 gone=red. */
.obj-susp-1 { border-color: rgba(234, 179, 8, 0.6) !important; background: linear-gradient(180deg, rgba(234, 179, 8, 0.10), rgba(234, 179, 8, 0.02)); box-shadow: inset 3px 0 0 #eab308; }
.obj-susp-2 { border-color: rgba(245, 165, 36, 0.6) !important; background: linear-gradient(180deg, rgba(245, 165, 36, 0.12), rgba(245, 165, 36, 0.02)); box-shadow: inset 3px 0 0 #f5a623; }
.obj-susp-3 { border-color: rgba(230, 18, 42, 0.6) !important;  background: linear-gradient(180deg, rgba(230, 18, 42, 0.12), rgba(230, 18, 42, 0.02)); box-shadow: inset 3px 0 0 #e5122a; }
.obj-susp-1 .obj-client { color: #eab308; }
.obj-susp-2 .obj-client { color: #f5a623; }
.obj-susp-3 .obj-client { color: #ff5a5f; }
.susp-tag { display: inline-block; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.susp-tag.s1 { color: #1b1200; background: #eab308; }
.susp-tag.s2 { color: #1b1200; background: #f5a623; }
.susp-tag.s3 { color: #fff; background: #e5122a; }
/* Client Status dropdown (admin) — coloured by level */
.status-select { font-weight: 700; border-radius: 6px; padding: 4px 6px; border: 1px solid var(--border); background: var(--surface-2); }
.status-select.lvl-0 { color: #2ecc71; border-color: rgba(46, 204, 113, 0.5); }
.status-select.lvl-1 { color: #eab308; border-color: rgba(234, 179, 8, 0.55); }
.status-select.lvl-2 { color: #f5a623; border-color: rgba(245, 165, 36, 0.6); }
.status-select.lvl-3 { color: #ff5a5f; border-color: rgba(230, 18, 42, 0.6); }
/* account hierarchy: service-provider badge + hierarchy dialog checkbox row */
.pill.provider { color: #b9a5ff; border-color: rgba(124, 92, 255, 0.5); background: rgba(124, 92, 255, 0.12); }
.hier-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.hier-check input { width: auto; margin: 0; }

/* Full-screen lockout overlay in the app (small OR full suspend) */
.suspend-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(120, 0, 8, 0.94); backdrop-filter: blur(2px); }
.suspend-box { max-width: 460px; text-align: center; background: #1a0406; border: 2px solid #e5122a; border-radius: 16px; padding: 30px 26px; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }
.suspend-icon { font-size: 46px; line-height: 1; }
.suspend-title { margin: 12px 0 8px; font-size: 1.5rem; font-weight: 900; letter-spacing: 1px; color: #ff5a5f; }
.suspend-msg { font-size: 1rem; line-height: 1.5; color: #ffdede; margin-bottom: 20px; }
.suspend-box .ghost { background: transparent; color: #ffb0b0; border: 1px solid rgba(255, 120, 120, 0.5); }

/* Big red banner on the login screen (full suspend) */
.suspend-login { width: min(420px, 92vw); margin: 0 auto 14px; text-align: center; background: #2a0508; border: 2px solid #e5122a; border-radius: 12px; padding: 16px 18px; box-shadow: 0 10px 34px rgba(230, 18, 42, 0.25); }
.suspend-login-head { font-size: 1.15rem; font-weight: 900; letter-spacing: 0.6px; color: #ff5a5f; margin-bottom: 6px; }
#login-suspend-text { font-size: 0.92rem; line-height: 1.45; color: #ffdede; }

.assign-search { width: 100%; margin-bottom: 8px; }
.assign-hint { font-size: 0.78rem; color: var(--muted); margin-bottom: 8px; }
.assign-list { max-height: 52vh; overflow-y: auto; margin-bottom: 14px; }
.assign-row { display: flex; align-items: center; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: 0.92rem; }
.assign-row input { width: auto; margin: 0; }
.assign-sub { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 1px; }

/* ===================== Tamper / jamming alerts ===================== */
/* Bell in the appbar */
.alert-bell {
  margin-left: auto; position: relative; flex: none;
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--faint); cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.alert-bell svg { width: 20px; height: 20px; fill: currentColor; }
.alert-bell:hover { color: var(--text); border-color: var(--brand); }
.alert-bell.has-alerts { color: var(--brand-2); border-color: var(--brand); animation: bell-pulse 1.6s ease-in-out infinite; }
@keyframes bell-pulse { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-12deg); } 16% { transform: rotate(10deg); } 24% { transform: rotate(-6deg); } 32% { transform: rotate(0); } }
.alert-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 0.68rem; font-weight: 800; line-height: 1;
  border: 2px solid var(--surface);
}

/* Pop-up toast stack (fixed overlay) */
.alert-toasts {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  z-index: 1300; pointer-events: none; width: max-content; max-width: 94vw;
}
.alert-toast {
  pointer-events: auto; width: min(440px, 94vw);
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--brand); box-shadow: var(--sh-2);
  animation: toast-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.alert-toast.leaving { animation: toast-out 0.4s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-10px); } }
.alert-toast.critical { border-left-color: var(--brand); background: linear-gradient(180deg, rgba(230, 18, 42, 0.10), rgba(230, 18, 42, 0)), var(--surface); }
.alert-toast.warning { border-left-color: var(--warn); background: linear-gradient(180deg, rgba(245, 165, 36, 0.10), rgba(245, 165, 36, 0)), var(--surface); }
.alert-toast .at-ico { font-size: 1.4rem; line-height: 1.2; flex: none; }
.alert-toast .at-body { flex: 1; min-width: 0; }
.alert-toast .at-title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.alert-toast .at-veh { font-size: 0.82rem; color: var(--text); opacity: 0.85; margin-top: 1px; }
.alert-toast .at-detail { font-size: 0.8rem; color: #b9c4d2; margin-top: 3px; line-height: 1.5; }
.alert-toast .at-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.alert-toast .at-actions button {
  cursor: pointer; border-radius: 6px; padding: 6px 10px; font-size: 0.76rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); width: 100%;
}
.alert-toast .at-locate { background: var(--brand); border-color: var(--brand); color: #fff; }
.alert-toast .at-actions button:hover { filter: brightness(1.08); }

/* Alerts dialog list */
.alerts-list { max-height: 56vh; overflow-y: auto; margin: 6px 0 12px; }
.alert-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 6px; border-bottom: 1px solid var(--border-soft);
}
.alert-item .ai-ico { font-size: 1.2rem; flex: none; }
.alert-item .ai-main { flex: 1; min-width: 0; }
.alert-item .ai-title { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.alert-item.critical .ai-title { color: var(--brand-2); }
.alert-item .ai-veh { font-size: 0.8rem; color: #b9c4d2; margin-top: 1px; }
.alert-item .ai-detail { font-size: 0.84rem; color: #b9c4d2; margin-top: 6px; line-height: 1.5; }
#alerts-dialog { width: min(680px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
.alert-evidence { margin-top: 10px; font-size: 0.84rem; color: #b9c4d2; overflow-wrap: anywhere; }
.alert-evidence summary { cursor: pointer; color: var(--text); }
.alert-evidence li { margin-top: 8px; }
.alert-item .ai-actions { display: flex; flex-direction: column; gap: 5px; flex: none; }
.alert-item .ai-actions button { padding: 5px 9px; font-size: 0.74rem; }

/* On a wide control-room screen, anchor toasts to the top-right corner. */
@media (min-width: 980px) {
  .alert-toasts { left: auto; right: 18px; transform: none; align-items: flex-end; }
}

/* ===================== Live track-card widgets ===================== */
.obj-owner { font-size: 0.72rem; font-weight: 700; color: var(--brand-2); letter-spacing: 0.2px; margin-bottom: 1px; }
.track-widgets { padding: 10px 12px 4px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 9px; }
.tw-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.state-badge { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 999px; color: #0a0d13; }
.state-badge.s-moving { background: #36c25b; }
.state-badge.s-idle { background: #f4c20d; }
.state-badge.s-parked { background: #9c6536; color: #fff; }
.state-badge.s-nocomms { background: #e5322d; color: #fff; }
.state-badge.s-nodata { background: var(--off); color: #fff; }
.standstill { font-size: 0.8rem; color: var(--muted); }
.tw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.tw-cell { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; border-bottom: 1px solid var(--border-soft); padding-bottom: 4px; min-width: 0; }
.tw-cell .tw-k { color: var(--faint); flex: none; }
.tw-cell .tw-v { color: var(--text); font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-notes { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.tw-notes label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; }
.tw-notes textarea {
  width: 100%; resize: vertical; padding: 9px 11px; font-family: inherit; font-size: 0.88rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text);
}
.tw-notes textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.tw-note-row { display: flex; align-items: center; gap: 10px; }
.tw-note-row button { padding: 7px 14px; font-size: 0.8rem; }
.tw-note-msg { font-size: 0.8rem; color: var(--ok); }
.tw-note-ro { font-size: 0.86rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 8px 11px; white-space: pre-wrap; }

/* chip3 reused for the track-card GPS/IGN chips — add on/off tint if not already themed */
.tw-chips .chip3.on i { color: var(--ok); }
.tw-chips .chip3.off i { color: var(--faint); }

/* ===================== Parking guard button ===================== */
.park-btn {
  width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; font-weight: 700; font-size: 0.9rem; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none;
}
.park-btn svg { width: 16px; height: 16px; }
.park-btn { min-height: 44px; white-space: normal; }
.parking-status { margin: 6px 0 8px; color: var(--text); font-size: 0.8rem; line-height: 1.45; overflow-wrap: anywhere; }
.park-btn:hover { background: var(--surface-3); filter: none; }
.park-btn.armed {
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.22), rgba(46, 204, 113, 0.10));
  border-color: rgba(46, 204, 113, 0.6); color: #d6ffe6;
}
.park-btn.armed svg { fill: var(--ok); }

/* ===================== Client tabs (control-room drill-down) ===================== */
.client-tabs {
  display: flex; gap: 7px; overflow-x: auto; padding: 8px 12px 10px; flex: none;
  border-bottom: 1px solid var(--border-soft); scrollbar-width: thin;
}
.client-tabs::-webkit-scrollbar { height: 6px; }
.client-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.client-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); box-shadow: none;
  white-space: nowrap;
}
.client-tab:hover { background: var(--surface-3); color: var(--text); filter: none; }
.client-tab.active {
  color: #fff; border-color: var(--brand);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
}
.client-tab .ct-n {
  font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14); color: inherit;
}
.client-tab:not(.active) .ct-n { background: var(--surface-3); color: var(--faint); }
/* header row shown at the top of the list when a client tab is active */
.client-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 700; color: var(--brand-2); position: sticky; top: 0; z-index: 2;
}
.client-head-clear { padding: 4px 11px; font-size: 0.72rem; background: var(--surface-3); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.client-head-clear:hover { filter: none; background: var(--surface); }

/* ===================== Client dropdown (replaces the client-tab scroll) ===================== */
.client-select {
  width: calc(100% - 24px); margin: 4px 12px 8px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); font-size: 0.9rem; font-family: inherit; font-weight: 600; cursor: pointer;
}
.client-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }

/* toggle row (settings checkboxes) */
.toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--text); margin: 4px 0; }
.toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); margin: 0; cursor: pointer; flex: none; }
.toggle-row span { font-size: 0.92rem; }

/* ===================== Client tree (Trakzee-style collapsible fleet) ===================== */
.vehicle-tree { padding: 4px 0 14px; }
/* client parent node */
.tree-client {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 12px; border-bottom: 1px solid var(--border-soft);
  font-size: 0.86rem; font-weight: 700; color: var(--text); user-select: none;
}
.tree-client:hover { background: var(--surface-2); }
.tree-arrow { color: var(--faint); font-size: 0.7rem; width: 12px; flex: none; transition: transform 0.15s; }
.tree-client.open .tree-arrow { transform: rotate(90deg); }
.tree-cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count {
  flex: none; font-size: 0.7rem; font-weight: 800; color: var(--faint);
  background: var(--surface-3); border-radius: 999px; padding: 1px 8px;
}
/* RFID badge on the vehicle card — accented so it reads apart from the make/model pill */
.obj-rfid { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }

/* Recovery status remains visible when the vehicle card is collapsed. */
.recovery-status:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
.recovery-status { display: grid; gap: 6px; }
.recovery-status .track-note { margin: 0; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); line-height: 1.45; }
.recovery-status .track-note.stale { color: #ffdc9f; background: #30271b; border-color: #72582c; }
.recovery-status .prediction-note { color: #cbe2ff; background: #17283f; border-color: #395d88; }
#track-predictions, #track-lbs-live { min-height: 44px; white-space: nowrap; }
#track-predictions:focus-visible, #track-lbs-live:focus-visible { outline: 3px solid #347abe; outline-offset: 2px; }

/* Focused recovery keeps the live controls visible above the map. */
.track-card.collapsed.recovery-nav .track-body > .track-actions { display:flex; }
.track-card.collapsed.recovery-nav .track-body > #nav-bar { display:block; }
.track-card.collapsed.recovery-nav .track-actions > #track-recovery,
.track-card.collapsed.recovery-nav .track-actions > #track-share { display:inline-flex; }
#track-recovery, #track-share { min-height:44px; white-space:nowrap; }
.track-card.recovery-nav #nav-bar { font-variant-numeric:tabular-nums; line-height:1.45; }
#share-expiry { font-variant-numeric:tabular-nums; color:var(--text); }
#share-dialog button, #share-hours { min-height:44px; }
#track-recovery:focus-visible, #track-share:focus-visible { outline:3px solid var(--accent);outline-offset:2px; }
/* Notification locate: keep the real vehicle's status colour and mark it for 60s.
   Animate inner rings only; Leaflet owns the outer marker's transform. */
.alert-vehicle-highlight { pointer-events: none !important; overflow: visible; }
.alert-vehicle-ring { position: absolute; inset: 8px; border: 3px solid #ffcf45; border-radius: 50%; outline: 2px solid #172033; }
.alert-vehicle-ring::before, .alert-vehicle-ring::after { content: ''; position: absolute; inset: -3px; border: 3px solid #ffcf45; border-radius: 50%; animation: alert-vehicle-pulse 1.8s ease-out infinite; }
.alert-vehicle-ring::after { animation-delay: -.9s; }
.alert-vehicle-label { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(230px, 65vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 9px; border: 1px solid #ffcf45; border-radius: 6px; background: #172033; color: #ffdf80; box-shadow: 0 3px 8px #0004; font: 600 12px/1.4 system-ui, sans-serif; }
@keyframes alert-vehicle-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .alert-vehicle-ring::before, .alert-vehicle-ring::after { animation: none; display: none; } }

/* Standby control-room permissions are also enforced by the API. */
body.tracking-only [data-tracking-write] { display: none !important; }
body.tracking-only .standby-only { display: block !important; }

/* Home plate lookup: existing dark surfaces, clear keyboard and touch actions. */
.home-plate-search { margin: 0 0 24px; }
.home-plate-search > label { display: block; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.home-plate-row { display: flex; align-items: stretch; gap: 10px; }
.home-plate-row input { flex: 1; min-width: 0; margin: 0; min-height: 46px; }
.home-plate-row input::placeholder { color: var(--muted); opacity: 1; }
.home-plate-row button { flex: none; min-height: 46px; white-space: nowrap; }
.home-plate-status { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; }
.home-plate-results { display: grid; gap: 6px; margin-top: 12px; }
button.home-plate-result { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; min-height: 48px; padding: 10px 12px; }
.home-plate-result span { color: var(--muted); font-size: 0.8rem; font-weight: 400; overflow-wrap: anywhere; }
.home-plate-search :is(input,button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 420px) { .home-plate-row { flex-wrap: wrap; } .home-plate-row input { flex-basis: 100%; } .home-plate-row button { width: 100%; } }

/* Login installation help expands in the page, including on small phones. */
#login-view.center { height: auto; min-height: 100vh; min-height: 100dvh; }
#login-view .card { width: min(380px, 100%); }
.login-install { margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--border); }
.install-intro { margin: 16px 0 10px; font-size: 0.88rem; color: var(--text); }
.install-action { display: block; min-height: 46px; padding: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 0.92rem; font-weight: 600; text-decoration: none; text-align: center; cursor: pointer; }
.install-action:hover { background: var(--surface-3); }
summary.install-action { display: list-item; list-style-position: inside; text-align: left; }
.install-help { margin: 8px 0 16px; color: var(--muted); font-size: 0.82rem; line-height: 1.5; }
.install-steps { margin: 14px 0; padding-left: 22px; color: var(--text); font-size: 0.88rem; line-height: 1.6; }
.install-steps li + li { margin-top: 8px; }
.install-guide { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 0.82rem; text-underline-offset: 3px; }
.login-install :is(button,a,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }