:root{--nav-w:216px;--rail-w:340px;--bottom-h:196px;--drawer-w:380px;--b1:1.25fr;--b2:1fr;--b3:1.1fr;--b4:.7fr;--toast-r:20px;
  --bg:#05090c;--surface:#0a1217;--surface2:#0e1920;--line:#15232b;--line2:#1f3340;--teal:#22d6a3;--moving:var(--teal);--accent2:var(--teal);--accent3:var(--teal);--line-accent:var(--line2);--amber:#f6b93b;--red:#ff5d52;--blue:#59a9ff;
  --tx:#e9f1f3;--idle:#8fa0ab;--stopped:#6f7e89;--offline:#4b5862;--on-accent:#032018;--on-warn:#2b1c00;--on-danger:#ffffff;--mu:#8d9fa9;--mu2:#667984;--r:12px;--rs:8px;--shadow:0 10px 30px color-mix(in srgb,var(--e-shadow) 30%,transparent);--field:color-mix(in srgb,var(--bg) 55%,var(--surface));--e-app-bg:var(--bg);--e-card-bg:var(--surface);--e-card-border:var(--line);--e-card-title:var(--tx);--e-card-title-bar:var(--teal);--e-page-bg:var(--surface);--e-divider:var(--line);--e-shadow:#000000;--e-scrollbar:var(--line2);--e-nav-bg-top:var(--surface2);--e-nav-bg-bottom:var(--bg);--e-nav-border:var(--line);--e-nav-text:color-mix(in srgb,var(--tx) 80%,var(--bg));--e-nav-text-hover:var(--tx);--e-nav-hover:var(--tx);--e-nav-active:var(--teal);--e-nav-active-text:var(--tx);--e-nav-section:var(--mu2);--e-brand-icon:var(--teal);--e-brand-text:var(--tx);--e-brand-accent:var(--teal);--e-status-box-bg:var(--surface);--e-status-box-border:var(--line);--e-button-bg:color-mix(in srgb,var(--tx) 5%,var(--surface));--e-button-text:var(--tx);--e-button-border:var(--line2);--e-button-hover:var(--teal);--e-primary-bg:var(--teal);--e-primary-text:var(--on-accent);--e-ghost-text:var(--mu);--e-link:var(--teal);--e-input-bg:color-mix(in srgb,var(--bg) 55%,var(--surface));--e-input-text:var(--tx);--e-input-border:var(--line2);--e-input-placeholder:var(--mu2);--e-focus-ring:var(--teal);--e-switch-on:var(--teal);--e-switch-off:var(--mu);--e-tab-active:var(--teal);--e-tab-text:var(--mu);--e-tab-text-active:var(--tx);--e-segment-active:var(--teal);--e-section-label:var(--teal);--e-count-badge:var(--teal);--e-status-good:var(--teal);--e-status-warn:var(--amber);--e-status-bad:var(--red);--e-chip-bg:var(--line);--e-chip-text:var(--tx);--e-chip-good:var(--teal);--e-chip-warn:var(--amber);--e-chip-bad:var(--red);--e-progress-track:var(--line);--e-overview-icons:var(--mu);--e-list-icon:var(--teal);--e-fault-warning:var(--amber);--e-fault-stop:var(--red);--e-weather-alert:var(--amber);--e-weather-alert-edge:var(--red);--e-table-head-bg:var(--surface);--e-table-head-text:var(--mu);--e-table-row-hover:var(--surface2);--e-map-bg:var(--surface);--e-map-border:var(--line);--e-map-overlay-bg:var(--surface);--e-map-overlay-border:var(--line2);--e-attribution-bg:var(--bg);--e-attribution-text:var(--mu);--e-tooltip-bg:var(--surface2);--e-tooltip-text:var(--tx);--e-tooltip-border:var(--line2);--e-truck-trail:var(--teal);--e-geofence:var(--teal);--e-geofence-label:color-mix(in srgb,var(--teal) 35%,var(--tx));--e-route-line:var(--teal);--e-traffic-jam:var(--red);--e-destination-pin:var(--red);--e-pin-outline:#ffffff;--e-replay-dot:var(--amber);--e-reach-area:var(--amber);--e-warning-area:var(--amber);--e-warning-area-severe:var(--red);--e-marker-bg:var(--bg);--e-marker-moving:var(--teal);--e-marker-idle:var(--idle);--e-marker-parked:var(--stopped);--e-marker-offline:var(--offline);--e-marker-maintenance:var(--amber);--e-marker-alert:var(--red);--e-marker-label-bg:var(--bg);--e-marker-label-text:var(--tx);--e-marker-label-border:var(--line2);--e-marker-label-ok:var(--teal);--e-marker-selected:#ffffff;--e-marker-match:var(--amber);--e-badge-attention:var(--amber);--e-badge-critical:var(--red);--e-badge-ready:var(--teal);--e-idle-timer-bg:var(--bg);--e-idle-timer-text:var(--tx);--e-idle-timer-border:var(--idle);--e-idle-timer-warn:var(--amber);--e-idle-timer-bad:var(--red);--e-hq-marker:var(--amber);--e-hq-bg:var(--bg);--e-trailer:var(--blue);--e-trailer-moving:var(--teal);--e-trailer-bg:var(--bg);--e-trailer-label-text:var(--tx);--e-drawer-bg:var(--surface);--e-drawer-border:var(--line2);--e-menu-bg:var(--surface);--e-menu-border:var(--line2);--e-dialog-bg:var(--surface);--e-dialog-text:var(--tx);--e-dialog-border:var(--line2);--e-dialog-backdrop:#000000;--e-toast-bg:var(--surface2);--e-toast-border:var(--line2);--e-toast-warning:var(--amber);--e-toast-alert:var(--red);--e-finder-backdrop:#000000;--e-finder-bg:var(--surface);--e-finder-highlight:var(--teal)}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:var(--x-scroll-bars-firefox-colour,var(--e-scrollbar)) transparent}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:var(--x-scroll-bar-handle-background,var(--e-scrollbar));border-radius:8px}*::-webkit-scrollbar-track{background:transparent}
html,body{height:100%;overflow:hidden;background:var(--x-page-background,var(--e-app-bg));color:var(--x-page-text,var(--tx));font:13px/1.45 Manrope,system-ui,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{background:var(--x-button-background,var(--e-button-bg));color:var(--x-button-text,var(--e-button-text));border:1px solid var(--x-button-border,var(--e-button-border));height:30px;padding:0 12px;border-radius:var(--rs);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
button:hover{border-color:var(--x-button-hovered-border,var(--e-button-hover));background:var(--x-button-hovered-background,color-mix(in srgb,var(--e-button-hover) 7%,var(--e-button-bg)))}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--x-keyboard-focus-ring-outline,var(--e-focus-ring));outline-offset:2px}
button.pri{background:var(--x-main-action-button-save-assign-background,var(--e-primary-bg));color:var(--x-main-action-button-save-assign-text,var(--e-primary-text));border-color:var(--x-main-action-button-save-assign-border,var(--e-primary-bg));font-weight:700}button.pri:hover{background:var(--x-main-action-button-hovered-background,color-mix(in srgb,var(--e-primary-bg) 82%,white))}
button.ghost{background:transparent;color:var(--x-quiet-button-text,var(--e-ghost-text));border-color:var(--x-quiet-button-border,var(--e-divider))}button.ghost:hover{color:var(--x-quiet-button-hovered-text,var(--tx))}button.wide{width:100%}
button.lnk{border:0;background:none;color:var(--x-link-style-button-text,var(--e-link));padding:0 4px;height:auto;font-size:12px;font-weight:600}button.lnk:hover{background:none;text-decoration:underline}
input,select{background:var(--x-text-box-and-drop-down-background,var(--e-input-bg));color:var(--x-text-box-and-drop-down-text,var(--e-input-text));border:1px solid var(--x-text-box-and-drop-down-border,var(--e-input-border));height:32px;padding:0 10px;border-radius:var(--rs);transition:border-color .15s}input:hover,select:hover{border-color:var(--x-text-box-hovered-border,color-mix(in srgb,var(--e-input-border) 70%,var(--mu)))}
input::placeholder{color:var(--x-hint-text-in-empty-boxes-text,var(--e-input-placeholder))}select option{background:var(--x-drop-down-choices-background,var(--e-input-bg));color:var(--x-drop-down-choices-text,var(--e-input-text))}a{color:var(--x-links-text,var(--e-link))}
#app{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr) var(--rail-w);height:100vh;position:relative}

/* cards */
.card{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:linear-gradient(180deg,var(--x-panel-background-1st-colour,color-mix(in srgb,var(--tx) 3%,transparent)),var(--x-panel-background-2nd-colour,color-mix(in srgb,var(--tx) 1%,transparent))),var(--x-panel-background-3rd-colour,var(--e-card-bg));border:1px solid var(--x-panel-border,var(--e-card-border));border-radius:var(--r);box-shadow:var(--shadow)}
.ch{display:flex;align-items:center;gap:8px;padding:0 10px 0 14px;height:42px;border-bottom:1px solid var(--x-panel-header-bottom-border,var(--e-divider));flex:none}
.ch h2{flex:1;display:flex;align-items:center;gap:9px;font:700 13px Manrope;color:var(--x-panel-title-text,var(--e-card-title))}.ch h2::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--x-bar-before-panel-titles-background,var(--e-card-title-bar))}
.hb{width:26px;height:26px;padding:0;display:grid;place-items:center;border:0;background:none;color:var(--x-panel-hide-x-button-text,var(--mu2));opacity:0;border-radius:6px}.hb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.card:hover .hb,.hb:focus-visible{opacity:1}.hb:hover{background:var(--x-panel-hide-x-button-hovered-background,color-mix(in srgb,var(--e-status-bad) 12%,transparent));color:var(--x-panel-hide-x-button-hovered-text,var(--e-status-bad));border:0}
.cb{padding:14px;overflow:auto;flex:1;min-height:0}.cb.flush{padding:0 14px}
.empty,.mute{color:var(--x-empty-list-and-quiet-text-text,var(--mu))}.empty{padding:6px 0}

/* navigation */
#nav{border-right:1px solid var(--x-side-menu-right-border,var(--e-nav-border));display:flex;flex-direction:column;padding:20px 0 14px;background:linear-gradient(180deg,var(--x-side-menu-background-1st-colour,var(--e-nav-bg-top)) 0%,var(--x-side-menu-background-2nd-colour,var(--e-nav-bg-bottom)) 70%);min-width:0}
.brand{display:flex;align-items:center;gap:11px;padding:0 22px 22px;color:var(--x-logo-symbol-text,var(--e-brand-icon))}.brand svg{width:30px;height:30px;flex:none}.brand b{font:800 17px Manrope;color:var(--x-logo-name-text,var(--e-brand-text));letter-spacing:.005em;white-space:nowrap}.brand b span{color:var(--x-logo-name-second-word-text,var(--e-brand-accent))}
#navlist{display:flex;flex-direction:column;gap:2px;padding:0 10px;overflow:auto}
#navlist button{display:flex;align-items:center;gap:12px;width:100%;height:38px;border:0;border-radius:9px;background:none;padding:0 12px;color:var(--x-menu-item-text,var(--e-nav-text));font-weight:500;text-align:left}
#navlist button svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#navlist button:hover{background:var(--x-menu-item-hovered-background,color-mix(in srgb,var(--e-nav-hover) 4%,transparent));color:var(--x-menu-item-hovered-text,var(--e-nav-text-hover))}#navlist button.on{background:linear-gradient(90deg,var(--x-selected-menu-item-background-1st-colour,color-mix(in srgb,var(--e-nav-active) 16%,transparent)),var(--x-selected-menu-item-background-2nd-colour,color-mix(in srgb,var(--e-nav-active) 4%,transparent)));color:var(--x-selected-menu-item-text,var(--e-nav-active-text));box-shadow:inset 2px 0 0 var(--x-selected-menu-item-glow-shadow,var(--e-nav-active))}#navlist button.on svg{color:var(--x-selected-menu-item-icon-text,var(--e-nav-active))}
.navfoot{margin:auto 12px 0;display:grid;gap:8px}.sys{border:1px solid var(--x-system-status-box-border,var(--e-status-box-border));border-radius:10px;padding:10px 12px;font-size:12px;color:var(--x-system-status-box-text,var(--tx));display:grid;gap:7px;background:var(--x-system-status-box-background,var(--e-status-box-bg))}
.sys div{display:flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap}.sys b{font-weight:700}.dot{width:8px;height:8px;border-radius:50%;background:var(--c,var(--mu));box-shadow:0 0 8px var(--c,transparent);flex:none}

/* center */
#center{position:relative;display:grid;grid-template-rows:minmax(0,1fr) var(--bottom-h);gap:12px;padding:12px;min-width:0;min-height:0}
#mapwrap{position:relative;border:1px solid var(--x-map-frame-border,var(--e-map-border));border-radius:var(--r);overflow:hidden;min-height:0;box-shadow:var(--shadow)}
#map{position:absolute;inset:0;background:var(--x-map-behind-the-tiles-background,var(--e-map-bg))}.leaflet-container{font-family:Manrope,sans-serif;background:var(--x-map-area-while-tiles-load-background,var(--e-map-bg))}
.leaflet-control-attribution{background:var(--x-map-credit-line-background,color-mix(in srgb,var(--e-attribution-bg) 70%,transparent))!important;color:var(--x-map-credit-line-text,var(--e-attribution-text))!important;font-size:10px}.leaflet-control-attribution a{color:var(--x-map-credit-line-links-text,var(--e-attribution-text))!important}
.searchbar{position:absolute;top:12px;left:12px;z-index:800;display:flex;align-items:center;gap:6px;background:var(--x-target-search-bar-background,color-mix(in srgb,var(--e-map-overlay-bg) 86%,transparent));backdrop-filter:blur(10px);border:1px solid var(--x-target-search-bar-border,var(--e-map-overlay-border));border-radius:11px;padding:6px;width:min(640px,calc(100% - 250px));box-shadow:var(--shadow)}
.searchbar .si{width:18px;height:18px;margin:0 2px 0 6px;fill:none;stroke:var(--x-target-search-bar-magnifier-icon,var(--mu));stroke-width:1.8;stroke-linecap:round;flex:none}.searchbar input{flex:1;min-width:120px;border-color:transparent;background:transparent}.searchbar input:hover{border-color:transparent}.searchbar input:focus{background:var(--x-target-search-box-typing-background,var(--field))}
.float{background:var(--x-floating-map-cards-background,color-mix(in srgb,var(--e-map-overlay-bg) 92%,transparent));backdrop-filter:blur(10px);border-color:var(--x-floating-map-cards-border,var(--e-map-overlay-border))}
#tgcard{position:absolute;top:62px;left:12px;z-index:800;width:440px;max-width:calc(100% - 24px);padding:12px 14px;resize:both;overflow:auto;min-width:300px;min-height:90px}
#tgcard h3{font:700 14px Manrope}#tgcard p{color:var(--x-target-results-description-text,var(--mu));font-size:12px;margin:2px 0 8px}
.trow{display:grid;grid-template-columns:1fr 60px 80px;gap:8px;padding:8px 6px;border-top:1px solid var(--x-target-result-row-top-border,var(--e-divider));cursor:pointer;align-items:center;border-radius:6px}.trow:hover{background:var(--x-target-result-row-hovered-background,var(--e-table-row-hover))}
.trow small{display:block;color:var(--x-target-result-driver-line-text,var(--mu));font-size:11px}.trow .eta{text-align:right;color:var(--x-target-result-drive-time-text,var(--e-status-good));font-weight:700}.trow .eta.est{color:var(--x-target-result-estimated-drive-time-text,var(--mu));font-weight:500}
.viewbtn{position:absolute;top:12px;right:12px;z-index:800;display:flex;align-items:center;gap:7px;background:var(--x-view-button-on-the-map-background,color-mix(in srgb,var(--e-map-overlay-bg) 86%,transparent));border-color:var(--x-view-button-on-the-map-border,var(--e-map-overlay-border));backdrop-filter:blur(10px);box-shadow:var(--shadow)}.viewbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.mapctl{position:absolute;right:12px;bottom:18px;z-index:800;display:grid;gap:6px}.mapctl button{width:36px;height:36px;padding:0;font-size:18px;background:var(--x-zoom-and-locate-buttons-background,color-mix(in srgb,var(--e-map-overlay-bg) 90%,transparent));border-color:var(--x-zoom-and-locate-buttons-border,var(--e-map-overlay-border));display:grid;place-items:center;border-radius:10px}.mapctl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* bottom row */
#bottom{position:relative;display:grid;grid-template-columns:var(--b1) var(--b2) var(--b3) var(--b4);gap:12px;min-height:0}
.sel{display:grid;grid-template-columns:132px 1fr;gap:14px;height:100%}.sel svg.pic{width:100%;align-self:center;opacity:.95}
.sel .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.sel .top b{font:800 18px Manrope}
.sel dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px}.sel dt{color:var(--x-selected-vehicle-labels-text,var(--mu))}.sel dd{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel .acts{margin-top:10px}
.tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;color:var(--c);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent)}
.srow{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--x-vehicle-status-row-bottom-border,var(--e-divider))}.srow:last-child{border:0}.srow svg{width:17px;height:17px;color:var(--x-vehicle-status-icons-text,var(--e-list-icon));fill:none;stroke:currentColor;stroke-width:1.7}.srow b{font-weight:700}
.good{color:var(--x-good-values-green-text-text,var(--e-status-good))}.warn{color:var(--x-warning-values-amber-text-text,var(--e-status-warn))}.bad{color:var(--x-bad-values-red-text-text,var(--e-status-bad))}
.trip{display:grid;grid-template-columns:62px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--x-recent-trip-row-bottom-border,var(--e-divider));align-items:baseline}.trip:last-child{border:0}.trip time{color:var(--x-recent-trip-time-text,var(--e-status-good));font-weight:700;font-size:12px}.trip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cap{color:var(--x-small-captions-text,var(--mu2));font-size:11px;margin-bottom:4px}
.legend{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 10px}.legend li{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--x-legend-text-text,var(--tx))}
.gfk{width:14px;height:10px;border:1.5px solid var(--x-legend-geofence-sample-border,var(--e-geofence));background:var(--x-legend-geofence-sample-background,color-mix(in srgb,var(--e-geofence) 15%,transparent));transform:skewX(-14deg)}.rtk{width:16px;border-top:2px dashed var(--x-legend-route-sample-top-border,var(--e-route-line))}

/* right rail */
#rail{display:flex;flex-direction:column;gap:12px;padding:12px 12px 12px 0;overflow:auto;min-height:0}#rail .card{resize:vertical;min-height:96px;flex:none}
.ov{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.ov>div{padding:4px 0}.ov svg{width:28px;height:28px;color:var(--x-fleet-overview-icons-text,var(--e-overview-icons));fill:none;stroke:currentColor;stroke-width:1.6;margin:0 auto 6px;display:block}
.ov b{display:block;font:800 24px/1.1 Manrope}.ov span{color:var(--x-fleet-overview-labels-text,var(--mu));font-size:11px}.ov .g svg,.ov .g b{color:var(--x-fleet-overview-active-count-text,var(--e-status-good))}.ov .a svg,.ov .m svg{color:var(--x-fleet-overview-idle-and-service-icons-text,var(--e-status-warn))}
.list{list-style:none}.list li{display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;padding:10px 0;border-top:1px solid var(--x-activity-and-alert-row-top-border,var(--e-divider));cursor:pointer}.list li:first-child{border-top:0}
.list li:hover{background:var(--x-activity-and-alert-row-hovered-background,color-mix(in srgb,var(--e-table-row-hover) 40%,transparent))}.list .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--c,var(--e-list-icon)) 14%,transparent);color:var(--c,var(--e-list-icon))}
.list .ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}.list b{display:block;font-weight:600}.list small{color:var(--c,var(--mu));font-size:12px}.list time{color:var(--x-activity-and-alert-time-text,var(--mu2));font-size:11px;white-space:nowrap}
.fl{display:grid;gap:9px}.fl select{width:100%}
.row{position:relative;display:flex;align-items:center;gap:10px;padding:4px 0;cursor:pointer}.row input{position:absolute;left:0;top:50%;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.sw{width:30px;height:17px;border:1px solid var(--x-on-off-switch-track-border,var(--line2));border-radius:10px;position:relative;flex:none;background:var(--x-on-off-switch-track-background,var(--e-input-bg));transition:border-color .15s}.sw::after{content:"";position:absolute;top:3px;left:3px;width:9px;height:9px;border-radius:50%;background:var(--x-on-off-switch-knob-off-background,var(--e-switch-off));transition:transform .15s,background .15s}
.row input:checked+.sw{border-color:var(--x-on-off-switch-track-on-border,var(--e-switch-on));background:var(--x-on-off-switch-track-on-background,color-mix(in srgb,var(--e-switch-on) 12%,transparent))}.row input:checked+.sw::after{transform:translateX(13px);background:var(--x-on-off-switch-knob-on-background,var(--e-switch-on))}.row input:focus-visible+.sw{outline:2px solid var(--x-on-off-switch-focus-ring-outline,var(--e-focus-ring));outline-offset:2px}
.row .nm{flex:1}.row em{font:11px ui-monospace,monospace;font-style:normal;color:var(--x-filter-count-text,var(--mu2))}.row input:checked~em{color:var(--x-filter-count-on-text,var(--e-switch-on))}
details.more{margin-top:12px;border-top:1px solid var(--x-more-filters-section-top-border,var(--e-divider));padding-top:10px}summary{cursor:pointer;color:var(--x-expandable-section-titles-text,var(--e-link));font-weight:600;list-style:none;padding:2px 0}summary::-webkit-details-marker{display:none}summary::before{content:"+  ";color:var(--x-expandable-section-arrow-text,var(--mu))}details[open]>summary::before{content:"-  "}
.sub{font-weight:700;color:var(--x-small-sub-headings-text,var(--mu2));font-size:10.5px;margin:14px 0 4px;text-transform:uppercase;letter-spacing:.08em}
.seg{display:flex;gap:2px;margin:4px 0;background:var(--x-button-group-background,var(--e-input-bg));border:1px solid var(--x-button-group-border,var(--e-divider));border-radius:9px;padding:2px}.seg button{flex:1;height:26px;padding:0 8px;border:0;background:none;font-size:12px;color:var(--x-button-group-choice-text,var(--mu));border-radius:7px}.seg button.on{background:var(--x-button-group-chosen-background,color-mix(in srgb,var(--e-segment-active) 14%,transparent));color:var(--x-button-group-chosen-text,var(--e-segment-active));font-weight:700}

/* details drawer */
#drawer{position:absolute;right:0;top:0;bottom:0;width:var(--drawer-w);max-width:100vw;background:var(--x-truck-details-panel-background,color-mix(in srgb,var(--e-drawer-bg) 97%,transparent));backdrop-filter:blur(12px);border-left:1px solid var(--x-truck-details-panel-left-border,var(--e-drawer-border));display:none;flex-direction:column;z-index:900;box-shadow:-24px 0 48px var(--x-truck-details-panel-glow-shadow,color-mix(in srgb,var(--e-shadow) 50%,transparent))}
#drawer.open{display:flex;animation:slide .28s cubic-bezier(.2,.8,.2,1)}@keyframes slide{from{transform:translateX(24px);opacity:0}}
#dz-h{padding:18px 20px 8px}.dh{display:flex;justify-content:space-between;align-items:start;gap:10px}.dh h3{font:800 26px/1.1 Manrope}.dh p{color:var(--x-truck-description-text,var(--mu));margin-top:2px}.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.big{display:flex;align-items:baseline;gap:6px}.big strong{font:800 40px/1 Manrope}.big small{color:var(--x-speed-unit-text,var(--mu))}.loc{color:var(--x-truck-location-text,var(--mu));font-size:12px;margin-top:2px}
.tabs{display:flex;border-bottom:1px solid var(--x-tab-bar-bottom-border,var(--e-divider));overflow-x:auto;padding:0 10px}.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--x-tab-text,var(--e-tab-text));height:38px;padding:0 11px;white-space:nowrap}.tabs button:hover{background:none;color:var(--x-tab-hovered-text,var(--e-tab-text-active))}.tabs button.on{color:var(--x-selected-tab-text,var(--e-tab-text-active));border-bottom-color:var(--x-selected-tab-pointer,var(--e-tab-active))}
#dz-b{flex:1;overflow:auto;padding:14px 20px 20px}#dz-b h4{font:700 10.5px Manrope;color:var(--x-section-headings-text,var(--e-section-label));letter-spacing:.09em;text-transform:uppercase;margin:18px 0 6px}#dz-b h4:first-child{margin-top:2px}
dl.g{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:10px}dl.g dt{color:var(--x-value-labels-text,var(--mu));font-size:11px}dl.g dd{font:700 18px Manrope}dl.g dd.bad{color:var(--x-bad-values-text,var(--e-status-bad))}dl.g dd.warn{color:var(--x-warning-values-text,var(--e-status-warn))}
.li{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--x-list-row-bottom-border,var(--e-divider))}.li small{color:var(--x-list-row-detail-text,var(--mu));margin-left:auto;text-align:right}
.hos div{display:grid;grid-template-columns:42px 1fr 74px;gap:10px;align-items:center;margin:8px 0}.hos small{color:var(--x-driver-hours-labels-text,var(--mu))}.hos b{font-weight:700;text-align:right}.hos .tr{display:block;height:6px;background:var(--x-driver-hours-bar-track-background,var(--e-progress-track));border-radius:3px}.hos i{display:block;height:100%;border-radius:3px}
.fault{border:1px solid var(--x-fault-code-card-border,var(--e-divider));padding:9px 11px;margin:7px 0;border-left:3px solid var(--x-fault-code-card-left-border,var(--e-fault-warning));border-radius:8px;background:var(--x-fault-code-card-background,color-mix(in srgb,var(--tx) 2%,transparent))}.fault.stop{border-left-color:var(--x-fault-code-card-stop-now-left-stripe,var(--e-fault-stop))}.fault b{font:700 13px ui-monospace,monospace}.fault p{color:var(--x-fault-code-explanation-text,var(--mu));font-size:12px;margin-top:2px}
.lamps{display:flex;gap:6px;margin-bottom:12px}.lamp{font-size:11px;font-weight:700;padding:3px 10px;border:1px solid var(--x-engine-lamp-chip-off-border,var(--line2));color:var(--x-engine-lamp-chip-off-text,var(--mu));border-radius:20px}.lamp.on{background:var(--x-engine-lamp-chip-on-background,var(--e-fault-warning));color:var(--x-engine-lamp-chip-on-text,var(--on-warn));border-color:var(--x-engine-lamp-chip-on-border,var(--e-fault-warning))}.lamp.on.stop{background:var(--x-stop-engine-lamp-chip-on-background,var(--e-fault-stop));color:var(--x-stop-engine-lamp-chip-on-text,#fff);border-color:var(--x-stop-engine-lamp-chip-on-border,var(--e-fault-stop))}
.cam img,.cam video{width:100%;display:block;background:var(--x-camera-picture-frame-background,#000);border:1px solid var(--x-camera-picture-frame-border,var(--line2));border-radius:10px;min-height:110px}.cam p,.note{color:var(--x-notes-and-hints-text,var(--mu));font-size:12px;margin:4px 0}.err{color:var(--x-error-text-text,var(--e-status-bad))}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}#dz-b input{width:100%;margin-bottom:8px}
.eta-out strong{display:block;font:800 36px/1.1 Manrope}.eta-out .warn{color:var(--x-route-eta-warning-text,var(--e-status-warn))}
.wxr{display:grid;grid-template-columns:54px 46px 1fr 36px;gap:8px;padding:7px 0;border-bottom:1px solid var(--x-weather-forecast-row-bottom-border,var(--e-divider));font-size:12px}.wxr span:first-child,.wxr span:last-child{color:var(--x-weather-time-and-wind-text,var(--mu))}
.wxa{border:1px solid var(--x-weather-alert-card-border,var(--e-weather-alert));border-left:3px solid var(--x-weather-alert-card-left-border,var(--e-weather-alert-edge));padding:8px 10px;margin:8px 0;border-radius:8px}
.chip{font-size:11px;font-weight:700;padding:2px 10px;border-radius:20px;background:var(--x-plain-chip-background,var(--e-chip-bg));color:var(--x-plain-chip-text,var(--e-chip-text))}.chip.moving,.chip.healthy{background:var(--x-moving-healthy-chip-background,color-mix(in srgb,var(--e-chip-good) 16%,transparent));color:var(--x-moving-healthy-chip-text,var(--e-chip-good))}.chip.idle,.chip.attention{background:var(--x-idle-attention-chip-background,color-mix(in srgb,var(--e-chip-warn) 16%,transparent));color:var(--x-idle-attention-chip-text,var(--e-chip-warn))}.chip.critical{background:var(--x-critical-chip-background,color-mix(in srgb,var(--e-chip-bad) 18%,transparent));color:var(--x-critical-chip-text,var(--e-chip-bad))}

/* table pages */
#page{border:1px solid var(--x-full-page-border,var(--e-card-border));border-radius:var(--r);background:var(--x-full-page-background,var(--e-page-bg));display:flex;flex-direction:column;min-height:0;grid-row:1/-1;box-shadow:var(--shadow);overflow:hidden}
.ptools{display:flex;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--x-page-toolbar-bottom-border,var(--e-divider));flex-wrap:wrap}.ptools h1{font:800 20px Manrope;margin-right:auto}.ptools input{width:210px}.ptools button.on{border-color:var(--x-page-toolbar-chosen-tab-border,var(--e-segment-active));color:var(--x-page-toolbar-chosen-tab-text,var(--e-segment-active));background:var(--x-page-toolbar-chosen-tab-background,color-mix(in srgb,var(--e-segment-active) 10%,transparent))}
.tw{overflow:auto;flex:1}table{width:100%;border-collapse:collapse}th{position:sticky;top:0;background:var(--x-table-heading-background,color-mix(in srgb,var(--e-table-head-bg) 96%,transparent));backdrop-filter:blur(6px);text-align:left;font:700 10.5px Manrope;letter-spacing:.08em;text-transform:uppercase;color:var(--x-table-heading-text,var(--e-table-head-text));padding:11px 16px;border-bottom:1px solid var(--x-table-heading-bottom-border,var(--line2))}
td{padding:11px 16px;border-bottom:1px solid var(--x-table-cell-bottom-border,var(--e-divider))}tbody tr{cursor:pointer;transition:background .12s}tbody tr:hover{background:var(--x-table-row-hovered-background,var(--e-table-row-hover))}td.bad{color:var(--x-table-bad-value-text,var(--e-status-bad));font-weight:700}td.warn{color:var(--x-table-warning-value-text,var(--e-status-warn))}td.good{color:var(--x-table-good-value-text,var(--e-status-good))}td.mute{color:var(--x-table-quiet-value-text,var(--mu))}

/* map markers */
.mk{--c:var(--x-truck-marker-colour,var(--e-marker-moving));position:relative;width:38px;height:38px;border-radius:50%;background:var(--x-truck-marker-background,color-mix(in srgb,var(--e-marker-bg) 95%,transparent));border:2px solid var(--c);color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 15%,transparent),0 0 18px color-mix(in srgb,var(--c) 45%,transparent);display:grid;place-items:center;cursor:pointer;transition:opacity .2s}
.mk::after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-5px;border:5px solid transparent;border-top:8px solid var(--c)}
.mk svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.mk .nm{position:absolute;top:100%;margin-top:9px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 11px Manrope;background:var(--x-truck-name-label-background,color-mix(in srgb,var(--e-marker-label-bg) 90%,transparent));color:var(--x-truck-name-label-text,var(--e-marker-label-text));padding:2px 7px;border-radius:6px;border:1px solid var(--x-truck-name-label-border,var(--e-marker-label-border));pointer-events:none}
.mk .nm b{color:var(--x-name-label-figure-text,var(--e-marker-label-ok))}.mk .nm b.warn{color:var(--x-name-label-figure-warning-text,var(--e-status-warn))}.mk .nm b.crit{color:var(--x-name-label-figure-critical-text,var(--e-status-bad))}.low .mk .nm{display:none}
.mk.v-idle{--c:var(--x-idling-truck-colour,var(--e-marker-idle))}.mk.v-offsite{--c:var(--x-truck-idling-outside-the-safe-geofence-colour,var(--e-marker-idle-offsite))}.mk.v-offsite::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--x-off-site-idle-pulse-ring-border,var(--e-marker-idle-offsite));animation:ping 1.8s infinite}.mk.v-stopped{--c:var(--x-parked-truck-colour,var(--e-marker-parked))}.mk.v-offline,.mk.v-unknown{--c:var(--x-offline-truck-colour,var(--e-marker-offline))}.mk.v-maint{--c:var(--x-truck-in-maintenance-colour,var(--e-marker-maintenance))}.mk.v-alert{--c:var(--x-truck-with-an-alert-colour,var(--e-marker-alert))}
.mk .bd{position:absolute;top:-4px;right:-4px;width:13px;height:13px;border-radius:50%;background:var(--x-attention-dot-background,var(--e-badge-attention));border:2px solid var(--x-attention-dot-border,var(--e-marker-bg))}.mk.v-alert .bd{background:var(--x-critical-dot-background,var(--e-badge-critical))}
.mk.sel{box-shadow:0 0 0 4px var(--x-selected-truck-ring-glow-shadow,var(--e-marker-selected)),0 0 22px var(--c)}.mk.hit{box-shadow:0 0 0 4px var(--x-search-match-ring-glow-shadow-1st-colour,var(--e-marker-match)),0 0 22px var(--x-search-match-ring-glow-shadow-2nd-colour,var(--e-marker-match))}.mk.dim{opacity:.22}.mk.hide{display:none}
.mk.v-alert::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--x-alert-pulse-ring-border,var(--e-marker-alert));animation:ping 1.8s infinite}@keyframes ping{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
.hq{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--x-headquarters-marker-background,color-mix(in srgb,var(--e-hq-bg) 95%,transparent));border:2px solid var(--x-headquarters-marker-border,var(--e-hq-marker));color:var(--x-headquarters-marker-text,var(--e-hq-marker));box-shadow:0 0 16px var(--x-headquarters-marker-glow-shadow,color-mix(in srgb,var(--e-hq-marker) 40%,transparent));cursor:pointer}.hq svg{width:24px;height:24px}
.hq-l{position:absolute;top:100%;margin-top:4px;left:50%;transform:translateX(-50%);white-space:nowrap;font:800 11px Manrope;color:var(--x-headquarters-label-text,var(--e-hq-marker));background:var(--x-headquarters-label-background,color-mix(in srgb,var(--e-hq-bg) 90%,transparent));padding:2px 7px;border-radius:6px}
.leaflet-tooltip.gft{background:none;border:0;box-shadow:none;color:var(--x-geofence-names-text,var(--e-geofence-label));font:700 10px Manrope;letter-spacing:.08em;text-transform:uppercase;text-align:center;white-space:normal;width:90px}.leaflet-tooltip.gft::before{display:none}
.asset{width:12px;height:12px;background:var(--x-trailer-dot-background,var(--e-trailer));border:2px solid var(--x-trailer-dot-border,var(--e-trailer-bg));border-radius:3px}

/* view menu, toasts, dialog */
.menu{position:fixed;z-index:3000;width:300px;max-height:min(78vh,640px);overflow:auto;background:var(--x-view-and-filter-menus-background,color-mix(in srgb,var(--e-menu-bg) 98%,transparent));backdrop-filter:blur(12px);border:1px solid var(--x-view-and-filter-menus-border,var(--e-menu-border));border-radius:12px;padding:14px 16px;box-shadow:0 24px 60px var(--x-view-and-filter-menus-glow-shadow,color-mix(in srgb,var(--e-shadow) 60%,transparent))}
.menu h3{font:800 14px Manrope;margin-bottom:2px}.menu p{color:var(--x-menu-notes-text,var(--mu));font-size:12px;margin-bottom:8px}.menu .sub:first-of-type{margin-top:8px}.menu .row.off{opacity:.55}.menu .acts{margin-top:14px}
#toasts{position:fixed;top:14px;right:var(--toast-r);z-index:2000;display:flex;flex-direction:column;gap:8px;width:310px}
.toast{background:var(--x-pop-up-alert-background,var(--e-toast-bg));border:1px solid var(--x-pop-up-alert-border,var(--e-toast-border));border-left:4px solid var(--x-pop-up-alert-left-border,var(--e-toast-warning));padding:10px 14px;cursor:pointer;border-radius:10px;box-shadow:var(--shadow);animation:tin .3s}.toast.red{border-left-color:var(--x-pop-up-alert-red-left-stripe,var(--e-toast-alert))}.toast b{display:block}.toast span{color:var(--x-pop-up-alert-text-text,var(--mu));font-size:12px}@keyframes tin{from{transform:translateY(-8px);opacity:0}}
dialog{margin:auto;background:var(--x-dialog-box-background,var(--e-dialog-bg));color:var(--x-dialog-box-text,var(--e-dialog-text));border:1px solid var(--x-dialog-box-border,var(--e-dialog-border));border-radius:14px;padding:22px;width:min(480px,92vw);box-shadow:0 30px 80px var(--x-dialog-box-glow-shadow,color-mix(in srgb,var(--e-shadow) 60%,transparent))}dialog::backdrop{background:var(--x-screen-behind-a-dialog-background,color-mix(in srgb,var(--e-dialog-backdrop) 72%,transparent))}
dialog h3{font:800 22px Manrope}dialog p{color:var(--x-dialog-notes-text,var(--mu));font-size:12px;margin-bottom:8px}dialog label{display:block;margin:10px 0 4px;color:var(--x-dialog-labels-text,var(--e-dialog-text))}dialog input{width:100%}

/* resizable panels */
.split{position:absolute;z-index:960;background:transparent;transition:background .15s;touch-action:none}
.split:hover,.split.drag,.split:focus-visible{background:var(--x-panel-resize-edge-active-background,color-mix(in srgb,var(--e-focus-ring) 40%,transparent));outline:0}
.split.v{top:0;bottom:0;width:8px;cursor:col-resize}.split.h{height:8px;cursor:row-resize}
#sp-nav{left:calc(var(--nav-w) - 4px)}#sp-rail{right:calc(var(--rail-w) - 4px)}
#sp-drawer{right:calc(var(--drawer-w) - 4px);display:none;z-index:1000}#drawer.open + #sp-drawer{display:block}
#sp-bottom{left:12px;right:12px;bottom:calc(var(--bottom-h) + 14px)}.split.cs{top:0;bottom:0}
body.dragging{cursor:col-resize;user-select:none}body.dragging.rows{cursor:row-resize}body.dragging #map{pointer-events:none}

@media (max-width:1180px){#app{grid-template-columns:64px minmax(0,1fr) 300px}.brand b,#navlist button span,.sys,.navfoot .ghost{display:none}.brand{padding:0 16px 16px}#navlist button{justify-content:center;padding:0}}
@media (max-width:860px){html,body{overflow:auto}#app{display:block;height:auto}#nav{flex-direction:row;overflow:auto;padding:8px}.brand{display:none}#navlist{flex-direction:row}#navlist button{width:auto}#center{display:block}#mapwrap{height:60vh;margin-bottom:12px}#bottom{display:block}#bottom .card{margin-bottom:12px}#rail{padding:0 12px 12px}#drawer{position:fixed;width:100%;top:auto;height:70vh}.split{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* asset search */
.findbtn{position:absolute;top:12px;right:92px;z-index:800;display:flex;align-items:center;gap:7px;background:var(--x-find-button-on-the-map-background,color-mix(in srgb,var(--e-map-overlay-bg) 86%,transparent));border-color:var(--x-find-button-on-the-map-border,var(--e-map-overlay-border));backdrop-filter:blur(10px);box-shadow:var(--shadow)}.findbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
kbd{font:600 10px ui-monospace,monospace;border:1px solid var(--x-keyboard-key-hints-border,var(--e-input-border));border-radius:4px;padding:1px 5px;color:var(--x-keyboard-key-hints-text,var(--mu))}
.nav-find{display:flex;align-items:center;gap:10px;margin:0 12px 14px;width:calc(100% - 24px)}.nav-find svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex:none}.nav-find span{flex:1;text-align:left}
#finder{position:fixed;inset:0;z-index:3500;background:var(--x-screen-behind-find-background,color-mix(in srgb,var(--e-finder-backdrop) 55%,transparent));backdrop-filter:blur(3px);display:grid;justify-items:center;align-content:start;padding-top:12vh}
.fbox{width:min(660px,92vw);background:var(--x-find-box-background,color-mix(in srgb,var(--e-finder-bg) 99%,transparent));border:1px solid var(--x-find-box-border,var(--e-dialog-border));border-radius:14px;box-shadow:0 30px 80px var(--x-find-box-glow-shadow,color-mix(in srgb,var(--e-shadow) 65%,transparent));overflow:hidden}
.fin{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--x-find-search-line-bottom-border,var(--e-divider))}.fin input{flex:1;height:54px;border:0;background:none;font-size:16px}.fin input:hover{border:0}.fin input:focus-visible{outline:0}
#fres{list-style:none;max-height:min(56vh,470px);overflow:auto;padding:6px}
.fg{padding:12px 10px 4px;font:700 10.5px Manrope;letter-spacing:.08em;text-transform:uppercase;color:var(--x-find-result-groups-text,var(--mu2))}
.fi{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:8px 10px;border-radius:9px;cursor:pointer}.fi.on{background:var(--x-find-chosen-result-background,color-mix(in srgb,var(--e-finder-highlight) 11%,transparent))}
.fi .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--x-find-result-icon-background,color-mix(in srgb,var(--e-finder-highlight) 12%,transparent));color:var(--x-find-result-icon-text,var(--e-finder-highlight))}.fi .ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.fi b{display:block;font-weight:700}.fi small{color:var(--x-find-result-detail-text,var(--mu));display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:430px}.fnone{padding:22px 14px;color:var(--x-find-nothing-found-text,var(--mu));text-align:center}
.fhint{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--x-find-keyboard-hints-top-border,var(--e-divider));color:var(--x-find-keyboard-hints-text,var(--mu2));font-size:11px}
@media (max-width:1180px){.nav-find span,.nav-find kbd{display:none}.nav-find{justify-content:center}}

/* ---- dispatch, shop and history ---- */
.navsec{font:700 10px Manrope;letter-spacing:.1em;text-transform:uppercase;color:var(--x-menu-section-headings-text,var(--e-nav-section));padding:14px 12px 4px}
.ptools .sp{flex:1}.pbody{padding:14px 18px;overflow:auto;flex:1;min-height:0}#page .pbody{flex:1}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 14px}.fgrid label,label.inl{display:grid;gap:5px;color:var(--x-form-labels-text,var(--tx));font-size:12px}label.inl{display:flex;align-items:center;gap:8px}
.fgrid input,.fgrid select{width:100%}
.dsp{display:grid;gap:14px;padding:14px 18px;overflow:auto;min-height:0;align-content:start;flex:1}.dsp .card{overflow:visible}
.tw2{overflow:auto;max-height:none}
table.t{width:100%;border-collapse:collapse}table.t th{text-align:left;font:700 10.5px Manrope;letter-spacing:.07em;text-transform:uppercase;color:var(--x-small-table-heading-text,var(--e-table-head-text));padding:9px 12px;border-bottom:1px solid var(--x-small-table-heading-bottom-border,var(--line2));white-space:nowrap}
table.t td{padding:10px 12px;border-bottom:1px solid var(--x-small-table-cell-bottom-border,var(--e-divider));vertical-align:top}table.t small{display:block;color:var(--x-small-table-detail-text,var(--mu));font-size:11px;margin-top:2px}
table.t td.bad,table.t td.warn,table.t td.good,table.t td.mute{font-weight:600}table.t td.mute{font-weight:400}
.rowacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.rowacts button{height:28px;padding:0 10px}.rowacts select{height:28px;max-width:130px}
.sqwrap{display:grid;gap:14px;padding:14px 18px;overflow:auto;flex:1;min-height:0;align-content:start}.sqs{overflow:visible}.sqs .ch .note{margin:0}.cnt{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--x-count-badge-background,color-mix(in srgb,var(--e-count-badge) 15%,transparent));color:var(--x-count-badge-text,var(--e-count-badge));font-size:11px;margin-left:6px}
.ovline{margin-top:10px;padding-top:10px;border-top:1px solid var(--x-ready-to-dispatch-line-top-border,var(--e-divider));color:var(--x-ready-to-dispatch-line-text,var(--e-status-good));font-weight:600;font-size:12px;text-align:center}
.mk .rd{position:absolute;bottom:-2px;right:-4px;width:15px;height:15px;border-radius:50%;background:var(--x-ready-to-dispatch-tick-background,var(--e-badge-ready));border:2px solid var(--x-ready-to-dispatch-tick-border,var(--e-marker-bg));display:grid;place-items:center}
.mk .rd::after{content:"";width:4px;height:7px;border:solid var(--x-ready-to-dispatch-tick-mark-border,var(--on-accent));border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.fault.sev-stop{border-left-color:var(--x-fault-card-stripe-stop-now-left-stripe,var(--e-fault-stop))}.fault.sev-schedule{border-left-color:var(--x-fault-card-stripe-schedule-repair-left-stripe,var(--e-fault-warning))}.fault.sev-monitor{border-left-color:var(--x-fault-card-stripe-monitor-left-stripe,var(--mu))}
.fault .fh{display:flex;gap:8px;align-items:center;justify-content:space-between}.fault .adv{color:var(--x-fault-advice-text,var(--tx));margin-top:4px}.fault button{margin-top:8px;height:26px;font-size:12px}
.note-i{border:1px solid var(--x-note-card-border,var(--e-divider));border-radius:8px;padding:8px 10px;margin:6px 0;background:var(--x-note-card-background,color-mix(in srgb,var(--tx) 2%,transparent))}.note-i p{margin:2px 0}.note-i small{color:var(--x-note-author-and-time-text,var(--mu))}
.spark{width:100%;height:44px;display:block;background:var(--x-trend-chart-background-background,color-mix(in srgb,var(--e-shadow) 20%,transparent));border-radius:6px}.sparkl{display:flex;justify-content:space-between;color:var(--x-trend-chart-labels-text,var(--mu));font-size:11px;margin-top:2px}
.pbar{display:inline-block;width:90px;height:7px;background:var(--x-progress-bar-track-background,var(--e-progress-track));border-radius:4px;vertical-align:middle;margin-right:6px}.pbar i{display:block;height:100%;border-radius:4px}
.cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.calc{border:1px solid var(--x-pm-calendar-day-border,var(--e-divider));border-radius:10px;padding:8px;min-height:92px;background:var(--x-pm-calendar-day-background,color-mix(in srgb,var(--tx) 2%,transparent))}.calc.ov{border-color:var(--x-pm-calendar-day-overdue-border,color-mix(in srgb,var(--e-status-bad) 40%,transparent))}
.calc h5{display:flex;justify-content:space-between;font:700 11px Manrope;color:var(--x-pm-calendar-date-text,var(--mu));margin-bottom:6px}.calc h5 span{color:var(--x-pm-calendar-count-text,var(--e-status-good))}
.calchip{display:block;width:100%;text-align:left;height:auto;padding:5px 8px;margin:0 0 5px;font-size:12px;font-weight:600}.calchip small{display:block;color:var(--x-pm-calendar-entry-detail-text,var(--mu));font-weight:400;font-size:11px}.calchip.overdue{border-color:var(--x-pm-calendar-entry-overdue-border,color-mix(in srgb,var(--e-status-bad) 50%,transparent))}.calchip.due{border-color:var(--x-pm-calendar-entry-due-border,color-mix(in srgb,var(--e-status-warn) 50%,transparent))}
.rules{display:grid;gap:10px;margin-top:10px}.rule{border:1px solid var(--x-alert-rule-card-border,var(--e-divider));border-radius:10px;padding:10px 14px;display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:12px;align-items:center}.rule .rp{color:var(--x-alert-rule-description-text,var(--mu))}.rule input[type=number]{width:80px;margin:0 6px}.rule input[type=time]{margin:0 6px}
body.tablet{font-size:15px}body.tablet button{height:42px;padding:0 16px}body.tablet input,body.tablet select{height:42px}body.tablet #navlist button{height:50px}body.tablet table.t td,body.tablet td{padding:14px 14px}body.tablet .rowacts button{height:38px}body.tablet .hb{opacity:1}
@media (max-width:1100px){.cal{grid-template-columns:repeat(3,minmax(0,1fr))}.rule{grid-template-columns:1fr}}


/* idle timer above an idling truck */
.mk .idl{position:absolute;top:-28px;left:50%;transform:translateX(-50%);white-space:nowrap;display:none;font:800 10.5px Manrope;padding:2px 8px;border-radius:10px;background:var(--x-idle-timer-background,color-mix(in srgb,var(--e-idle-timer-bg) 95%,transparent));border:1px solid var(--x-idle-timer-border,var(--e-idle-timer-border));color:var(--x-idle-timer-text,var(--e-idle-timer-text));pointer-events:none;box-shadow:0 2px 8px var(--x-idle-timer-glow-shadow,color-mix(in srgb,var(--e-shadow) 50%,transparent))}
.mk .idl.on{display:block}.mk .idl.warn{border-color:var(--x-idle-timer-long-idle-border,var(--e-idle-timer-warn));color:var(--x-idle-timer-long-idle-text,var(--e-idle-timer-warn))}.mk .idl.bad{border-color:var(--x-idle-timer-very-long-idle-border,var(--e-idle-timer-bad));color:var(--x-idle-timer-very-long-idle-text,var(--e-idle-timer-bad))}

.idlev{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--x-idle-history-row-bottom-border,var(--e-divider))}.idlev small{display:block;color:var(--x-idle-history-detail-text,var(--mu));font-size:11px;margin-top:1px}.idlev button{height:26px;padding:0 10px;font-size:12px;flex:none}

.mapnote{position:absolute;left:12px;bottom:26px;z-index:850;max-width:min(560px,calc(100% - 90px));padding:10px 14px;border-radius:10px;background:var(--x-map-warning-note-background,color-mix(in srgb,var(--e-map-overlay-bg) 95%,transparent));border:1px solid var(--x-map-warning-note-border,var(--e-status-warn));color:var(--x-map-warning-note-text,var(--tx));font-size:12px;box-shadow:var(--shadow);cursor:pointer}.mapnote.bad{border-color:var(--x-map-error-note-border,var(--e-status-bad))}

/* ---- smoothness: cheap by default, richer when the graphics card is drawing (html.gpu) ---- */
#mapwrap{contain:layout paint;isolation:isolate}
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon{backface-visibility:hidden}
html:not(.gpu) *{backdrop-filter:none!important}
html:not(.gpu) .mk{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 15%,transparent)}
html:not(.gpu) .mk.sel{box-shadow:0 0 0 4px var(--x-selected-truck-ring-effects-off-glow-shadow,var(--e-marker-selected))}
html:not(.gpu) .mk.hit{box-shadow:0 0 0 4px var(--x-search-match-ring-effects-off-glow-shadow,var(--e-marker-match))}
html.gpu .leaflet-marker-icon,html.gpu .leaflet-tile-pane,html.gpu .leaflet-overlay-pane{will-change:transform}
html.gpu .mk.v-alert::before{will-change:transform,opacity}
html.gpu #drawer.open{will-change:transform,opacity}
html.gpu .leaflet-fade-anim .leaflet-tile{transition:opacity .25s linear}
html.gpu .mk{transition:opacity .2s,box-shadow .2s}

/* dispatch: class chips and truck picker */
.dpick{margin-top:14px;display:grid;gap:8px}.pks{display:flex;gap:6px;flex-wrap:wrap}
.pk{height:28px;padding:0 12px;border-radius:20px;font-size:12px;font-weight:700}.pk.on{background:var(--x-chosen-vehicle-class-background,color-mix(in srgb,var(--e-segment-active) 18%,transparent));border-color:var(--x-chosen-vehicle-class-border,var(--e-segment-active));color:var(--x-chosen-vehicle-class-text,var(--e-segment-active))}
.dpick summary{cursor:pointer;font-size:12px;padding:4px 0}.vpick{border:1px solid var(--x-vehicle-picker-border,var(--e-input-border));border-radius:var(--rs);padding:10px;margin-top:6px;display:grid;gap:8px}
.vtools{display:flex;gap:8px;flex-wrap:wrap}.vtools input{flex:1;min-width:160px}.vlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2px 12px;max-height:220px;overflow:auto}
.vp{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:12px;cursor:pointer}.vp small{color:var(--x-vehicle-picker-detail-text,var(--mu));margin-left:auto}

/* trailers on the map */
.trl{position:relative;width:30px;height:20px;border-radius:6px;border:1.5px solid var(--x-parked-trailer-border,var(--e-trailer));background:var(--x-parked-trailer-background,color-mix(in srgb,var(--e-trailer-bg) 92%,transparent));color:var(--x-parked-trailer-text,var(--e-trailer));display:grid;place-items:center;cursor:default}
.trl svg{width:20px;height:12px}.trl.mv{border-color:var(--x-moving-trailer-border,var(--e-trailer-moving));color:var(--x-moving-trailer-text,var(--e-trailer-moving))}
.trl-l{position:absolute;top:21px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 9.5px Manrope;color:var(--x-trailer-name-text,var(--e-trailer-label-text));background:var(--x-trailer-name-background,color-mix(in srgb,var(--e-trailer-bg) 85%,transparent));padding:0 4px;border-radius:5px;display:none;pointer-events:none}
#map.zhi .trl-l{display:block}

/* hover tooltips follow the theme */
.leaflet-tooltip{background:var(--x-hover-tooltips-background,var(--e-tooltip-bg));color:var(--x-hover-tooltips-text,var(--e-tooltip-text));border:1px solid var(--x-hover-tooltips-border,var(--e-tooltip-border));box-shadow:var(--shadow)}
.leaflet-tooltip-top:before{border-top-color:var(--x-tooltip-pointer-above-pointer,var(--e-tooltip-border))}.leaflet-tooltip-bottom:before{border-bottom-color:var(--x-tooltip-pointer-below-pointer,var(--e-tooltip-border))}
.leaflet-tooltip-left:before{border-left-color:var(--x-tooltip-pointer-left-left-stripe,var(--e-tooltip-border))}.leaflet-tooltip-right:before{border-right-color:var(--x-tooltip-pointer-right-pointer,var(--e-tooltip-border))}
/* web edition */
a.btn{display:inline-flex;align-items:center;background:var(--x-link-button-users-server-status-background,var(--e-button-bg));color:var(--x-link-button-users-server-status-text,var(--e-button-text));border:1px solid var(--x-link-button-users-server-status-border,var(--e-button-border));height:30px;padding:0 12px;border-radius:var(--rs);text-decoration:none;font-size:13px}
a.btn:hover{border-color:var(--x-link-button-hovered-border,var(--e-button-hover))}
/* Themes panel (stays open while you use the dashboard, so every change shows on the real screen) */
.themer{position:fixed;top:10px;right:10px;bottom:10px;width:420px;max-width:calc(100vw - 20px);z-index:3000;display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--surface);color:var(--tx);border:1px solid var(--line-accent,var(--line2));border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55);font-size:13px}
.themer[hidden]{display:none}
.themer.left{right:auto;left:10px}
.th-head{display:flex;align-items:center;gap:8px}.th-head svg{width:20px;height:20px;fill:none;stroke:var(--teal);stroke-width:1.7}
.th-head h3{margin:0;font-size:16px;flex:1}.th-ic{width:30px;padding:0;justify-content:center;font-size:17px}
.th-dirty{font-size:11px;color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent);border-radius:20px;padding:1px 8px}
.th-bar,.th-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.th-bar select{flex:1;min-width:140px}
.th-tools input[type=search]{flex:1;min-width:150px}.th-sub{justify-content:space-between;color:var(--mu);font-size:12px}
.th-chk{display:flex;align-items:center;gap:6px;cursor:pointer}.th-danger{color:var(--red)}
.th-tabs{display:flex}.th-tabs button{flex:1}
#th-pick.on{background:var(--teal);color:var(--on-accent);border-color:var(--teal)}
.th-picked{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px dashed var(--teal);border-radius:9px;color:var(--tx)}
.th-picked span{flex:1}.th-picked button{height:24px;padding:0 8px;font-size:12px}
.th-list{flex:1;overflow:auto;border:1px solid var(--line);border-radius:10px;min-height:120px}
.th-area{position:sticky;top:0;z-index:1;background:var(--surface2);color:var(--mu);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-bottom:1px solid var(--line)}
.th-row{display:flex;min-height:40px;align-items:center;gap:9px;padding:6px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.th-row:hover{background:color-mix(in srgb,var(--tx) 5%,transparent)}.th-row.th-on{background:color-mix(in srgb,var(--teal) 13%,transparent)}
.th-row .th-lbl{flex:1;min-width:0}.th-row .th-lbl small{display:block;color:var(--mu2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-row .th-ch{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.th-sw{width:26px;height:26px;border-radius:7px;flex:none;border:1px solid var(--line2);position:relative;overflow:hidden;
  background:repeating-conic-gradient(#8a8a8a 0 25%,#d6d6d6 0 50%) 0 0/10px 10px}
.th-sw i{position:absolute;inset:0}
.th-ed{border:1px solid var(--teal);border-radius:10px;padding:10px;display:grid;gap:8px;background:color-mix(in srgb,var(--teal) 5%,transparent)}
.th-ed h4{margin:0;font-size:13px}.th-ed small{color:var(--mu)}
.th-ed .th-r{display:flex;gap:8px;align-items:center}.th-al{color:var(--mu);font-size:12px;width:52px}.th-av{width:38px;text-align:right;color:var(--mu);font-size:12px}.th-ed input[type=color]{width:46px;height:34px;padding:2px;border-radius:8px;cursor:pointer}
.th-ed input[type=text]{width:110px;font-family:ui-monospace,Consolas,monospace}.th-ed input[type=range]{flex:1}
.th-foot{display:flex;gap:6px;align-items:center}.th-note{flex:1;color:var(--mu);font-size:12px}
#th-hl{position:fixed;z-index:2999;pointer-events:none;border:2px solid #ff3df2;box-shadow:0 0 0 9999px rgba(0,0,0,.18);border-radius:4px;transition:all .06s}
#th-hl[hidden]{display:none}
body.th-picking,body.th-picking *{cursor:crosshair!important}
#th-probe{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}
@media (max-width:700px){.themer{top:auto;height:70vh;left:6px;right:6px;width:auto}}
.themer button:disabled{opacity:.4;cursor:default;pointer-events:none}