:root {
    --bg:#0d1014; --panel:#1a1f26; --text:#e8eaed; --muted:#9aa0a6; --accent:#3a86ff;
    --border:#2a2f37; --nav-bg:#15191f; --input-bg:#0f1318; --btn-bg:#2a2f37; --row-active:#222831; --card-overlay:rgba(26,31,38,.96);
    --MainColor:#00C98E; --TextOverMain:#fff;   /* brand colour for the selected marker label (per-host override TODO) */
}
:root[data-theme="light"] {
    --bg:#f4f6f9; --panel:#ffffff; --text:#1a1d21; --muted:#5f6368; --accent:#2563eb;
    --border:#dfe3e9; --nav-bg:#ffffff; --input-bg:#ffffff; --btn-bg:#eaeef3; --row-active:#eef1f6; --card-overlay:rgba(255,255,255,.97);
}

* { box-sizing: border-box; }
html, body { margin:0; height:100%; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* definite viewport height so the flex children (map!) size correctly and the page itself never scrolls */
.app { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }

.topbar {
    display:flex; align-items:center; gap:.6rem;
    padding: calc(env(safe-area-inset-top) + .5rem) .65rem .5rem;
    background:#fff; color:#1a1d21; font-weight:600; flex:0 0 auto; border-bottom:1px solid #e6e8eb;
}
.topbar .logo { height:28px; width:auto; }
.topbar .title { font-size:1.15rem; }

/* auto-update banner */
.updatebar { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; border:none; cursor:pointer; background:var(--accent); color:#fff; padding:.5rem .8rem; font:inherit; font-size:.85rem; font-weight:600; }

.content { flex:1; padding:.55rem; min-height:0; display:flex; flex-direction:column; overflow-y:auto; }
/* map + history pages: trim padding for a few extra px. list page: top bar + search stay put, only the list scrolls */
.content:has(.split), .content:has(.histmap) { padding:.45rem; }
.content:has(.vscroll) { overflow:hidden; }
.vscroll { flex:1; min-height:0; overflow-y:auto; }

.card {
    background: var(--panel); border-radius:14px; padding:1.2rem 1.2rem 1.4rem;
}
.card h2 { margin:.2rem 0 .8rem; font-size:1.3rem; }

.muted { color: var(--muted); }
.foot { text-align:center; margin-top:1.4rem; font-size:.85rem; }

.btn {
    appearance:none; border:none; border-radius:12px; cursor:pointer;
    padding:.85rem 1.1rem; font-size:1rem; width:100%;
    background:var(--btn-bg); color:var(--text); margin-top:.6rem;
}
.btn.primary { background: var(--accent); color:#fff; }

/* loading splash before Blazor boots */
.splash { display:flex; align-items:center; justify-content:center; height:100vh; }
.spinner { width:46px; height:46px; border:4px solid var(--border); border-top-color: var(--accent); border-radius:50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    display:none; position:fixed; bottom:0; left:0; right:0;
    background:#b00020; color:#fff; padding:.7rem 1rem; z-index:1000;
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color:#fff; cursor:pointer; }
#blazor-error-ui .dismiss { float:right; }

/* bottom navigation */
.bottomnav { display:flex; position:sticky; bottom:0; background:var(--nav-bg); border-top:1px solid var(--border); }
.bottomnav .navitem {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:.1rem;
    padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));
    color:var(--muted); text-decoration:none; font-size:.72rem;
}
.bottomnav .navitem.active { color:var(--accent); }
.bottomnav .ico { font-size:1.2rem; line-height:1; }

/* live map */
.mapfull { width:100%; height:100%; border-radius:12px; overflow:hidden; background:#0a0c0f; }
.histwrap { flex:1; min-height:0; position:relative; }
.histmap { position:absolute; inset:0; border-radius:12px; overflow:hidden; background:#0a0c0f; }
.maploader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.15); }

/* SVR — Stolen Vehicle Recovery */
.svr-head { display:flex; align-items:center; gap:.4rem; padding:.2rem .15rem .5rem; }
.svr-title { font-weight:700; font-size:1.02rem; }
.svr-title i { color:var(--accent); margin-right:.3rem; }
.svr-count { margin-left:auto; font-size:.76rem; color:var(--muted); background:rgba(127,127,127,.16); border-radius:999px; padding:.05rem .55rem; }
.svr-loading { flex:1; display:flex; align-items:center; justify-content:center; }
.svr-msg { padding:1.1rem .5rem; text-align:center; }
.svr-list { display:flex; flex-direction:column; gap:.5rem; padding-bottom:.5rem; }
.svr-card { display:block; width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; background:rgba(127,127,127,.08); border:1px solid var(--border); border-radius:12px; padding:.6rem .7rem; }
.svr-card:active { transform:scale(.995); }
.svr-card.alarm { border-color:#d9534f; box-shadow:inset 0 0 0 1px #d9534f; }
.svr-card-top { display:flex; align-items:center; gap:.5rem; }
.svr-name { font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svr-pill { color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; padding:.14rem .55rem; border-radius:999px; white-space:nowrap; }
.svr-desc { color:var(--muted); font-size:.8rem; margin-top:.35rem; line-height:1.35; }
.svr-meta { display:flex; flex-wrap:wrap; gap:.2rem .9rem; margin-top:.45rem; font-size:.74rem; color:var(--muted); }
.svr-meta i { margin-right:.25rem; opacity:.85; }
.svr-alarm { margin-top:.45rem; font-size:.78rem; font-weight:600; color:#d9534f; }
.svr-alarm i { margin-right:.3rem; }

/* SVR detail / alarm / delay pages */
.svr-subhead { display:flex; align-items:center; gap:.4rem; padding:.1rem .15rem .5rem; }
.svr-back { background:none; border:none; color:var(--text); font-size:1.05rem; padding:.2rem .4rem; cursor:pointer; }
.svr-subtitle { font-weight:700; font-size:1.02rem; }
.svr-detail { display:flex; flex-direction:column; gap:.6rem; padding-bottom:.6rem; }
.svr-d-status { display:flex; }
.svr-d-card { background:rgba(127,127,127,.08); border:1px solid var(--border); border-radius:12px; padding:.65rem .75rem; display:flex; flex-direction:column; gap:.3rem; }
.svr-d-card i { margin-right:.3rem; opacity:.85; }
.svr-d-veh { font-weight:600; }
.svr-d-sub { font-size:.78rem; }
.svr-delaynote { color:#b8860b; font-weight:600; }
.svr-act { width:100%; margin-top:.1rem; }
.btn.danger { background:#d9534f; color:#fff; border-color:#d9534f; }
.svr-warn { font-size:.82rem; color:#b8860b; line-height:1.35; }
.svr-activate { gap:.45rem; }
.svr-contact { display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.svr-alarmcard { border-color:#d9534f; }
.svr-alarm-h { font-weight:700; color:#d9534f; }
.svr-call { display:inline-flex; align-items:center; gap:.4rem; color:var(--accent); text-decoration:none; padding:.15rem 0; }
.svr-fieldlbl { font-size:.74rem; color:var(--muted); margin-top:.2rem; }
.svr-slider { display:flex; flex-direction:column; gap:.25rem; }
.svr-slider label { font-size:.8rem; color:var(--muted); }
.svr-slider input[type=range] { width:100%; }
.svr-msg.ok { color:var(--accent); }
.svr-msg.err { color:#d9534f; }

/* SVR apply wizard */
.svr-steps { font-size:.78rem; color:var(--muted); font-weight:600; }
.svr-wiz-nav { display:flex; gap:.5rem; margin-top:.3rem; }
.svr-wiz-nav .btn { flex:1; }
.svr-photogrid { display:flex; flex-direction:column; gap:.5rem; }
.svr-photo { background:rgba(127,127,127,.08); border:1px solid var(--border); border-radius:12px; padding:.55rem .65rem; display:flex; flex-direction:column; gap:.4rem; }
.svr-photo.set { border-color:var(--accent); }
.svr-photo-lbl { font-weight:600; font-size:.85rem; }
.svr-photo img { width:100%; max-height:150px; object-fit:cover; border-radius:8px; }
.svr-photo-ok { color:var(--accent); font-weight:600; font-size:.8rem; }
.svr-photo-ok i { margin-right:.35rem; }
.svr-photo-acts { display:flex; gap:.4rem; }
.svr-photo-acts .btn { flex:1; }
.svr-testrow { display:flex; align-items:center; gap:.2rem; padding:.2rem 0; font-size:.85rem; }
.svr-testrow i { margin-right:.35rem; color:var(--muted); }
.svr-testrow.done, .svr-testrow.done i { color:var(--accent); }
.sigpad { width:100%; height:160px; background:#fff; border:1px dashed #888; border-radius:8px; touch-action:none; }
.maphint { position:absolute; left:0; right:0; bottom:10px; text-align:center; font-size:.8rem; margin:0; color:var(--muted); }
.histhint { text-align:center; font-size:.8rem; margin:.4rem 0 0; }

/* map + selected-device detail card */
.mapwrap { flex:1; min-height:0; position:relative; }

/* The map fills its pane: mobile = full-screen, desktop = the right pane of the shell. The old in-map
   list is retired in favour of the persistent shell rail (below), so .split-list stays hidden everywhere. */
.split { flex:1; min-height:0; display:flex; }
.split-list { display:none; }
.split-map { flex:1; min-height:0; position:relative; }

/* Desktop shell: a persistent vehicle-list rail (left) + a routed pane (right) holding the map OR a
   report/history/commands/settings page, with the action bar docked under the pane only. .shell is
   display:contents so the rail + pane become items of the .app grid. The rail is hidden on mobile,
   where the list is the Home page and pages are full-screen. */
.shell { display:contents; }
.shell-rail { display:none; }
@media (min-width:900px) {
    .bottomnav.mainnav { display:none; } /* desktop: the rail replaces the Vehicles/Map toggle */

    /* Grid only kicks in on the rail pages (map + action pages); login/SVR/settings have no rail and
       stay full-screen via the default .app flex column. */
    .app:has(.shell-rail) {
        display:grid;
        grid-template-columns:340px minmax(0,1fr);
        grid-template-rows:auto auto 1fr auto;
        grid-template-areas:
            "top  top"
            "upd  upd"
            "rail pane"
            "rail nav";
    }
    .topbar    { grid-area:top; }
    .updatebar { grid-area:upd; }
    .content   { grid-area:pane; }
    .bottomnav { grid-area:nav; }   /* row collapses to 0 when no vehicle is selected (nav not rendered) */
    .shell-rail { display:block; grid-area:rail; min-height:0; overflow:hidden; border-right:1px solid var(--border); }
    .shell-list { padding:.5rem .55rem; }
}
.sl-row { display:flex; align-items:center; gap:.55rem; width:100%; text-align:left; background:var(--panel); border:none; border-radius:10px; padding:.5rem .6rem; margin-bottom:.35rem; color:var(--text); cursor:pointer; font:inherit; }
.sl-row.sel { box-shadow:0 0 0 2px var(--accent) inset; }
.sl-dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.sl-meta { display:flex; flex-direction:column; min-width:0; }
.sl-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sl-sub { font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.devcard { position:absolute; left:8px; right:8px; bottom:8px; background:var(--card-overlay); border:1px solid var(--border); border-radius:14px; padding:.7rem .9rem; box-shadow:0 4px 16px rgba(0,0,0,.5); }
.dc-row1 { display:flex; align-items:center; gap:.5rem; }
.dc-dot { width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.dc-status { font-weight:600; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dc-speed { font-size:.85rem; color:var(--muted); white-space:nowrap; }
.dc-addr { font-size:.82rem; margin-top:.35rem; }
.dc-row2 { display:flex; gap:1rem; margin-top:.35rem; font-size:.8rem; flex-wrap:wrap; }

/* login */
.card.login { max-width:420px; margin:2.5rem auto 0; text-align:center; }
.card.login h2 { margin:.4rem 0 .2rem; }
.login-logo { max-height:54px; width:auto; margin:0 auto .6rem; display:block; }
.lgn { width:100%; box-sizing:border-box; margin:.4rem 0; padding:.85rem 1rem; font-size:1rem; border-radius:12px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); }
.lgn::placeholder { color:#6b7280; }
.lgn-error { color:#ff6b6b; font-size:.9rem; margin:.6rem 0 0; }
.lgn-or { text-align:center; color:var(--muted); margin:.9rem 0 .1rem; font-size:.82rem; }
.btn.sso { background:var(--btn-bg); display:flex; align-items:center; justify-content:center; gap:.5rem; }

/* page title */
.pagetitle { margin:.2rem 0 1rem; font-size:1.4rem; }

/* live map markers */
/* anchor the point's CENTRE on the lat/lon: the label is taken out of flow so only the 30px point
   sizes the marker, then translateY(50%) lifts that point's centre onto the AdvancedMarker anchor. */
.mm { display:flex; flex-direction:column; align-items:center; position:relative; transform:translateY(50%); }
.mm-point { position:relative; width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.mm-dot { width:26px; height:26px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5); box-sizing:border-box; transition:background .3s ease; }
.mm-veh { display:flex; align-items:center; justify-content:center; }
.mm-vimg { width:40px; height:40px; object-fit:contain; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.mm-dir { display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; transform-origin:50% 50%; transition:transform .3s ease; flex:0 0 auto; }
.mm-name { display:inline-flex; align-items:center; line-height:1.15; background:#FCFCEE; color:#555; border:1px solid #999; border-radius:0 5px 5px 0; padding:2px 7px; font-size:13px; font-weight:bold; }
.me-dot { width:16px; height:16px; border-radius:50%; background:#4285F4; border:3px solid #fff; box-shadow:0 0 0 4px rgba(66,133,244,.3), 0 1px 3px rgba(0,0,0,.5); }
/* marker label = Tracking's fused pill: white status cap (the arrow) + cream name pill */
.mm-label { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:3px; display:inline-flex; align-items:stretch; white-space:nowrap; font-family:Roboto,Arial,sans-serif; box-shadow:0 1px 3px rgba(0,0,0,.4); border-radius:5px; }
.mm-cap { display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #999; border-right:none; border-radius:5px 0 0 5px; padding:0 5px; }

/* marker popups (tracking-style: hover preview + click-to-pin, X / click-off to close) */
.mappop { position:fixed; z-index:1200; transform:translate(-50%,-100%); background:var(--card-overlay); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem; box-shadow:0 6px 20px rgba(0,0,0,.45); min-width:170px; max-width:260px; font-size:.8rem; line-height:1.3; }
.mappop.pinned { z-index:1150; }
.mp-close { position:absolute; top:-9px; right:-9px; width:22px; height:22px; border-radius:50%; border:none; cursor:pointer; background:var(--btn-bg); color:var(--text); font-size:14px; line-height:20px; text-align:center; padding:0; box-shadow:0 2px 6px rgba(0,0,0,.4); z-index:3; }
.mp-close:hover { background:#e1374e; color:#fff; }
.mp-head { display:flex; align-items:flex-start; gap:.45rem; }
.mp-meta { display:flex; flex-direction:column; min-width:0; gap:1px; }
.mp-name { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-status { font-weight:600; font-size:.74rem; }
.mp-sub { color:var(--muted); font-size:.72rem; }
.mp-addr { margin:.35rem 0; white-space:normal; }
.mp-stats { display:flex; gap:.35rem; margin-top:.3rem; }
.mp-stat { flex:1; text-align:center; background:rgba(127,127,127,.14); border:1px solid var(--border); border-radius:8px; padding:.25rem .15rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.mp-stat .v { display:block; font-weight:700; }
.mp-stat .k { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:1px; }
/* speed-limit sign (red circle) + red speed when over the limit */
/* speed limit: a badge pinned to the top-right corner of the speed stat box */
.mp-stat-speed { position:relative; }
.mp-limover { position:absolute; top:-10px; right:-8px; z-index:2; }
.mp-limsign { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:#fff; border:3px solid #e1374e; color:#111; font-weight:800; font-size:.74rem; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.mp-stat .v.over { color:#e1374e; }
.mp-time { margin-top:.35rem; }
.mm-moving .mm-point::before { content:""; position:absolute; left:50%; top:50%; width:22px; height:22px; border-radius:50%; background:rgba(0,201,142,.45); transform:translate(-50%,-50%); animation:mm-pulse 1.8s ease-out infinite; pointer-events:none; z-index:-1; }
@keyframes mm-pulse { 0% { transform:translate(-50%,-50%) scale(.6); opacity:.6; } 70% { transform:translate(-50%,-50%) scale(2.2); opacity:0; } 100% { transform:translate(-50%,-50%) scale(2.2); opacity:0; } }

/* device list */
.devlist { display:flex; flex-direction:column; gap:.5rem; }
.devrow { display:flex; align-items:center; gap:.7rem; background:var(--panel); border-radius:12px; padding:.7rem .9rem; }
.devdot { width:14px; height:14px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.devmeta { flex:1; min-width:0; }
.devname { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.devsub { font-size:.8rem; }
.devbatt { font-size:.8rem; color:var(--muted); }

/* top bar action (sign out) */
.topacts { margin-left:auto; display:flex; align-items:center; gap:.1rem; }
.topact { background:transparent; border:none; color:#1a1d21; font-size:1.2rem; line-height:1; cursor:pointer; padding:.2rem .45rem; }
/* theme picker (app settings) */
.themeopts { display:flex; flex-direction:column; gap:.5rem; margin-top:.4rem; }
.themeopt { display:flex; align-items:center; gap:.6rem; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:.8rem 1rem; color:var(--text); cursor:pointer; width:100%; text-align:left; font:inherit; }
.themeopt.sel { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.themeopt .ico { width:1.4rem; text-align:center; }
.ms-auto { margin-left:auto; font-size:.85rem; color:var(--muted); }

/* lock screen */
.lockscreen { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:2000; padding:1.5rem; }
.lock-card { text-align:center; max-width:340px; width:100%; }
.lock-icon { font-size:3rem; color:var(--accent); margin-bottom:.6rem; }
.lock-title { font-size:1.3rem; font-weight:600; }
.lgn-check { display:flex; align-items:center; gap:.5rem; margin:.7rem 0 .2rem; font-size:.9rem; color:var(--muted); cursor:pointer; }
.lgn-check input { width:18px; height:18px; }
.topback { background:transparent; border:none; color:#1a1d21; font-size:1.4rem; line-height:1; cursor:pointer; padding:0 .6rem 0 .1rem; margin:0; }
.actionscreen { padding:.5rem 0; }

/* reports */
.rep-lbl { display:block; font-size:.8rem; color:var(--muted); margin:.7rem 0 .2rem; }
.rep-bar { display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem; }
.rep-back { background:transparent; border:none; color:var(--accent); font-size:.95rem; cursor:pointer; padding:0; }
.rep-title { font-weight:600; }
.rep-frame { width:100%; height: calc(100vh - 205px); border:none; border-radius:10px; background:#fff; }
select.lgn { appearance:none; -webkit-appearance:none; }

/* history */
.hist-bar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.5rem; }
.hist-date { width:auto; margin:0; padding:.5rem .7rem; }
.rt-dot { width:14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.5); box-sizing:border-box; }

/* list search + group filter */
.listfilter { display:flex; gap:.5rem; margin-bottom:.5rem; }
.listfilter .srch { flex:1; margin:0; }
.listfilter .grp { width:auto; margin:0; max-width:45%; }

/* device list: group filter + map-scope switch (top) and search (bottom) — shared by the desktop rail
   and the mobile list. The wrapper is a flex column so the list scrolls while the bars stay pinned. */
.sl-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
.sl-wrap .shell-list { flex:1 1 auto; min-height:0; overflow-y:auto; }

.grpbar { display:flex; align-items:center; gap:.5rem; padding:.5rem .55rem; flex:0 0 auto; }
.grpbar .grp { flex:1 1 auto; min-width:0; margin:0; }

.grpsw { position:relative; display:inline-flex; align-items:center; flex:0 0 auto; cursor:pointer; }
.grpsw input { position:absolute; opacity:0; width:0; height:0; }
.grpsw-track { position:relative; display:inline-block; width:40px; height:22px; border-radius:999px; background:var(--border); transition:background .15s; }
.grpsw-thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35); transition:transform .15s; }
.grpsw input:checked + .grpsw-track { background:var(--accent); }
.grpsw input:checked + .grpsw-track .grpsw-thumb { transform:translateX(18px); }

.srchbar { position:relative; display:flex; align-items:center; padding:.5rem .55rem; flex:0 0 auto; border-top:1px solid var(--border); }
.srchbar > i { position:absolute; left:1.15rem; color:var(--muted); font-size:.85rem; pointer-events:none; }
.srchbar .srch { margin:0; padding-left:2.2rem; }

/* vehicle list (app-style rows) */
.vlist { display:flex; flex-direction:column; gap:.4rem; }
.vrow { display:flex; align-items:stretch; width:100%; text-align:left; background:var(--panel); border:none; border-radius:12px; padding:0; color:var(--text); cursor:pointer; overflow:hidden; font:inherit; }
.vrow:active { background:var(--row-active); }
.vbar { width:5px; align-self:stretch; border-radius:12px 0 0 12px; flex:0 0 auto; }
.vbody { display:flex; flex-direction:column; flex:1; min-width:0; padding:.45rem .55rem; gap:2px; }
.vtop { display:flex; align-items:flex-start; gap:.5rem; }
.vicons { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; }
.vicon-wrap { flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.vicon { width:38px; height:38px; object-fit:contain; display:block; }
.vicon-circle { width:26px; height:26px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.5); box-sizing:border-box; flex:0 0 auto; margin:7px; }
.vmeta { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.vname { font-weight:600; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vsub { font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vaddr { font-size:.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vright { display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:0 0 auto; }
.vtime { font-size:.72rem; white-space:nowrap; }
.vbatt { font-size:.78rem; white-space:nowrap; }
.vcomm { color:#e0922f; }
.vright i { font-size:.66rem; opacity:.8; }
/* dark mode: white circle behind the vehicle/status icon so dark glyphs stay visible */
:root:not([data-theme="light"]) .vicon-wrap { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }

/* selected-device status badge — white circle so the coloured icon shows in dark mode */
.statusbadge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); flex:0 0 auto; font-size:.78rem; }
.dc-arrow { display:inline-flex; transform-origin:50% 50%; line-height:0; }
.dc-addr i, .dc-row2 i { width:1em; text-align:center; }
:root:not([data-theme="light"]) .sl-dot { box-shadow:0 0 0 2px #fff; }

/* map overlay controls (follow / traffic) */
.mapctrls { position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:6px; z-index:6; }
.mapbtn { width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--card-overlay); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.95rem; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.mapbtn.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* history per-point markers */
/* route markers are centred on their lat/lon (AdvancedMarkerElement anchors content bottom-centre) */
.rt-arrow { width:18px; height:18px; transform-origin:50% 50%; transition:transform .3s ease; }
.rt-idle { width:11px; height:11px; border-radius:50%; background:#f5b301; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.5); box-sizing:border-box; transform:translateY(50%); }
.rt-heart { width:14px; height:14px; line-height:0; transform:translateY(50%); }
.rt-dot { transform:translateY(50%); }
.rt-arrow svg, .rt-heart svg { display:block; }

/* selected marker: the label pulses (like /Tracking); all other markers stay visible */
/* selected: the name pill turns the brand colour (matches Tracking's .markerlabels-selected) */
.mm-sel .mm-name { background:var(--MainColor); color:var(--TextOverMain); animation: mm-labelpulse 1.3s ease-in-out infinite; }
@keyframes mm-labelpulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--MainColor) 70%, transparent); }
    50%      { box-shadow: 0 0 11px 4px color-mix(in srgb, var(--MainColor) 70%, transparent); }
}

/* enterprise desktop list cards (assethtmlv2-style: info + stats sections) */
.sl-card { display:flex; align-items:stretch; width:100%; text-align:left; background:var(--panel); border:none; border-radius:10px; padding:0; margin-bottom:.4rem; color:var(--text); cursor:pointer; overflow:hidden; font:inherit; }
.sl-card.sel { box-shadow:0 0 0 2px var(--accent) inset; }
.slc-bar { width:5px; align-self:stretch; flex:0 0 auto; }
.slc-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:.5rem .6rem; gap:3px; }
.slc-top { display:flex; align-items:flex-start; gap:.5rem; }
.slc-meta { display:flex; flex-direction:column; min-width:0; flex:1; gap:1px; }
.slc-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slc-sub { font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slc-sub i { width:1em; opacity:.8; }
.slc-times { display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex:0 0 auto; font-size:.7rem; color:var(--muted); white-space:nowrap; }
.slc-times .vcomm { color:#e0922f; }
.slc-times i { width:1em; opacity:.8; }
.slc-addr { font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slc-addr i { opacity:.8; margin-right:2px; }
.slc-stats { display:flex; flex-wrap:wrap; gap:.1rem .8rem; font-size:.74rem; color:var(--muted); margin-top:1px; }
.slc-stats i { width:1em; text-align:center; margin-right:2px; }
/* icon stack: tracker icon (circle or device image) above the status icon */
.slc-icons { display:flex; flex-direction:column; align-items:center; gap:4px; flex:0 0 auto; padding-top:1px; }
.slc-trk-circle { width:24px; height:24px; border-radius:50%; border:3px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.5); box-sizing:border-box; }
.slc-trk-img { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.slc-trk-img img { width:28px; height:28px; object-fit:contain; display:block; }
:root:not([data-theme="light"]) .slc-trk-img { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.slc-statusline { display:flex; align-items:center; gap:.55rem; font-size:.78rem; flex-wrap:wrap; }
.slc-speed { color:var(--muted); white-space:nowrap; }
.slc-speed i { margin-right:2px; opacity:.8; }