/* Mobile UX — Claude Design canvas 2026-10-17, then the iTrack look 2026-10-19 (Mohamed: «غامق ومعاه زرار فاتح، والشكل
   بس الأول»). Local Battuta (Alexandria) only — no remote fonts, the app works offline. Phone scale 13/16/20/24, nothing
   below 13 (the unchanged driver screen keeps its 30/48 amount). Colours are tokens: light below, dark (the phone default)
   in the ≤768px block further down. ≤768px gets the phone shell; wider screens keep the existing layout and colours. */
:root{
  --muted:#405357;--faint:#5d6b6e;
  --m-ink:#1a3034;--m-text2:#405357;--m-text3:#5d6b6e;--m-ph:#5d6b6e;--m-teal:#187f77;--m-teal-ink:#13665f;--m-teal-soft:#eaf5f2;--m-teal-line:#9fc9c2;
  --m-amber:#a57231;--m-amber-ink:#8a5f27;--m-amber-deep:#6b4a1f;--m-amber-soft:#fbf3e8;--m-amber-line:#f0dcc2;
  --m-gray:#8c9b9e;--m-gray-soft:#f0f3f3;--m-line:#e8edef;--m-line-2:#d5dddf;--m-bg:#f6f8f9;--m-map:#e7efec;
  --m-danger:#b4432f;--m-danger-fill:#b4432f;--m-danger-soft:#fbe9e5;--m-danger-line:#f2c9c0;--m-shadow:0 6px 20px #183a3826;
  --m-surface:#fff;--m-surface-2:#f0f3f3;--m-bar:#fff;--m-overlay:#ffffffeb;--m-backdrop:#0f1f2259;
  --m-moving:#187f77;--m-parked:#a57231;--m-nosignal:#8c9b9e;--m-moving-ink:#13665f;--m-parked-ink:#8a5f27;--m-nosignal-ink:#405357;
  --m-moving-soft:#eaf5f2;--m-parked-soft:#fbf3e8;--m-nosignal-soft:#f0f3f3;--m-car-edge:#ffffff;
  --m-tab-h:64px;
}
bdi{white-space:nowrap}
input::placeholder,textarea::placeholder{color:#5d6b6e;font-weight:400;opacity:1}
.m-tabbar,#m-map-ui,#m-fabs,#m-mapcard,#m-layers,#m-vehicles,#m-today,#m-alerts,#m-me,#m-tabhead{display:none}

/* Desktop: same card language as the design without moving anything. */
.surface,.farm-card,.dashboard-kpi,.now-kpi{border-radius:18px}
.button{border-radius:12px}

/* ---------- Shared pieces (any width) ---------- */
.m-icon-button{width:48px;height:48px;border:0;border-radius:14px;background:var(--m-surface);box-shadow:var(--m-shadow);display:grid;place-items:center;color:var(--m-ink);position:relative;flex-shrink:0}
.m-ib{width:44px;height:44px;border:0;background:none;border-radius:12px;display:grid;place-items:center;color:var(--m-ink);flex-shrink:0;padding:0;cursor:pointer}
.m-ib:active,.m-row:active,.m-vrow:active,.m-arow:active{background:var(--m-surface-2)}
.m-link{border:0;background:none;padding:0;min-height:44px;color:var(--m-teal-ink);font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.m-link.inline{min-height:0;font-size:13px}
.m-empty,.m-muted{color:var(--m-text2);font-size:16px;margin:0}
.m-muted{font-size:13px}
.m-pad{padding:12px 16px}.m-pad-x{padding-inline:16px}
.m-note{display:block;font-size:13px;color:var(--m-text2);font-weight:400}
.m-note-line{margin:0;font-size:13px;color:var(--m-text2);line-height:1.6}
.m-amber{color:var(--m-amber-ink)!important;font-weight:600}
.m-foot{margin:0;font-size:13px;color:var(--m-text2);text-align:center}
.m-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-bar{display:block;height:8px;border-radius:6px;background:var(--m-surface-2);overflow:hidden}.m-bar>span{display:block;height:100%;background:var(--m-teal);border-radius:6px}
.m-bar.over>span{background:var(--m-amber)}
.m-bar.none{background:repeating-linear-gradient(-45deg,var(--m-surface-2) 0 6px,var(--m-line) 6px 12px)}
.m-secondary{min-height:48px;padding:0 16px;border-radius:14px;border:1.5px solid var(--m-line);background:var(--m-surface);color:var(--m-ink);font:inherit;font-size:16px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.m-btn{min-height:48px;border-radius:12px;border:1px solid var(--m-line-2);background:var(--m-surface-2);color:var(--m-ink);font:inherit;font-size:16px;font-weight:600;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none}
.m-btn.primary{background:var(--m-teal);border-color:var(--m-teal);color:#fff}
.m-btn.danger{background:var(--m-danger-fill);border-color:var(--m-danger-fill);color:#fff}
.m-btn.ghost-danger{background:none;color:var(--m-danger);border-color:var(--m-danger-line)}
.m-btn.block{width:100%;min-height:56px}
.m-btn:disabled{opacity:.45;cursor:not-allowed}
.m-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px}.m-chips::-webkit-scrollbar{display:none}
.m-chip{flex:none;min-height:44px;padding:0 12px;white-space:nowrap;border-radius:999px;border:1px solid var(--m-line-2);background:var(--m-surface);color:var(--m-text2);font:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.m-chip[aria-pressed=true]{background:var(--m-teal-soft);border-color:var(--m-teal-ink);color:var(--m-ink)}
.m-chip svg{flex-shrink:0}
.m-chip-dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.m-chip.moving .m-chip-dot{background:var(--m-moving)}.m-chip.parked .m-chip-dot{background:var(--m-parked)}.m-chip.nosignal .m-chip-dot{background:var(--m-nosignal)}
.m-search{margin:12px 16px 0;height:48px;border-radius:12px;background:var(--m-surface);border:1px solid var(--m-line-2);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--m-text3)}
.m-search input{border:0;outline:0;flex:1;min-width:0;font:inherit;font-size:16px;background:transparent;color:var(--m-ink)}
.m-search:focus-within{outline:2px solid var(--m-teal-ink);outline-offset:1px}
.m-count{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--m-danger-fill);color:#fff;font-size:13px;line-height:24px;font-weight:600;text-align:center;flex-shrink:0}
.m-section-h{font-size:13px;color:var(--m-text3);padding:16px 16px 6px;margin:0;font-weight:500}
.m-group{background:var(--m-surface);border-block:1px solid var(--m-line);margin-top:10px}
.m-section-h+.m-group{margin-top:0}
.m-group>.m-empty{padding:16px}

/* Rows (iTrack list language) */
.m-row{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 16px;border:0;background:none;color:var(--m-ink);font:inherit;text-align:start;text-decoration:none;cursor:pointer;box-sizing:border-box}
div.m-row{cursor:default}
.m-row+.m-row,.m-row+.m-pad{box-shadow:inset 0 1px var(--m-line)}
.m-row:disabled{opacity:.45;cursor:not-allowed}
.m-row-ico{color:var(--m-text2);flex:none;display:grid}
.m-row-lbl{flex:1;min-width:0;display:flex;flex-direction:column}
.m-row-lbl b{font-weight:500;font-size:16px;line-height:1.5}
.m-row-lbl small{font-size:13px;color:var(--m-text3);line-height:1.5}
.m-row-val{color:var(--m-text2);font-size:13px;text-align:end;flex-shrink:0;max-width:60%}
.m-row-chev{color:var(--m-text3);flex:none;display:grid}
.m-row.danger,.m-row.danger .m-row-ico{color:var(--m-danger)}
.m-idrow .m-row-val{font-size:16px;color:var(--m-ink);font-variant-numeric:tabular-nums}
.m-idrow .m-copy{margin-inline-end:-10px}
.m-month .m-row{flex-wrap:wrap}.m-month .m-row>.m-bar{order:5;flex-basis:100%;margin-inline-start:0}
.m-month .m-row-val{font-size:16px;color:var(--m-ink)}

/* Top bar of every phone page */
.m-appbar{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:56px;padding:env(safe-area-inset-top) 4px 0;background:var(--m-bar);border-bottom:1px solid var(--m-line);box-sizing:border-box}
.m-appbar-start{justify-self:start;display:flex;align-items:center}.m-appbar-end{justify-self:end;display:flex;align-items:center}
.m-appbar-titles{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:calc(100vw - 120px);text-align:center;padding:4px 0}
.m-appbar-title{margin:0;font-size:20px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;color:var(--m-ink)}
.m-appbar-sub{font-size:13px;color:var(--m-text3);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.m-bar-button{min-height:44px;border-radius:12px;border:1px solid var(--m-line-2);background:var(--m-surface-2);color:var(--m-ink);display:inline-flex;align-items:center;gap:6px;padding:0 12px;font:inherit;font-size:16px;font-weight:600;margin-inline-end:8px;cursor:pointer}

/* Cars: state-coloured, a red «no signal» badge when the device is silent */
.m-car{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:none;position:relative;background:var(--m-nosignal-soft)}
.m-car.big{width:48px;height:48px}
.m-car.moving{background:var(--m-moving-soft)}.m-car.parked{background:var(--m-parked-soft)}
.m-car-body{fill:var(--m-nosignal);stroke:var(--m-car-edge);stroke-width:1.5}
.m-car-shape.moving .m-car-body{fill:var(--m-moving)}.m-car-shape.parked .m-car-body{fill:var(--m-parked)}
.m-car-glass{fill:#0b1012;opacity:.5}.m-car-glass.rear{opacity:.35}
.m-nosig{position:absolute;top:1px;left:1px;width:15px;height:15px}.m-nosig circle{fill:#fff;stroke:#d63c2c;stroke-width:2}.m-nosig path{stroke:#d63c2c;stroke-width:2}
.m-state{font-size:16px;color:var(--m-nosignal-ink)}
.m-state.moving{color:var(--m-moving-ink)}.m-state.parked{color:var(--m-parked-ink)}

/* Vehicle rows */
.m-vrow{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;min-height:72px;border:0;background:none;color:var(--m-ink);font:inherit;text-align:start;cursor:pointer;box-sizing:border-box}
.m-vrow+.m-vrow{box-shadow:inset 0 1px var(--m-line)}
.m-vrow.selected{box-shadow:inset -3px 0 var(--m-teal-ink)}
.m-vrow-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-vrow-text strong{font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-vrow-text small{font-size:13px;color:var(--m-text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-vrow-text .geographic-location{white-space:nowrap}
.m-vrow-side{font-size:13px;color:var(--m-text3);white-space:nowrap}
/* iTrack list 2026-10-31: car with its figure under it, name + coloured tag, device number, ignition line. */
.m-vrow-car{flex:none;width:64px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px}/* fixed: names line up in every row (Khattat r1) */
.m-vrow-under{font-size:13px;font-weight:600;color:var(--m-text2);white-space:nowrap}.m-vrow-under.moving{color:var(--m-moving-ink)}.m-vrow-under.speeding{color:var(--m-danger)}
.m-vrow-top{display:flex;align-items:center;gap:8px;min-width:0}.m-vrow-top strong{flex:1;min-width:0}
.m-tag{flex:none;font-size:13px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap;line-height:1.7}
.m-tag.moving{color:var(--m-moving-ink);background:var(--m-moving-soft)}.m-tag.parked{color:var(--m-parked-ink);background:var(--m-parked-soft)}
.m-tag.speeding{color:var(--m-danger);background:var(--m-danger-soft)}.m-tag.nosignal{color:var(--m-nosignal-ink);background:var(--m-nosignal-soft)}
.m-vrow-acc{display:flex;align-items:center;gap:6px}.m-vrow-acc i{width:7px;height:7px;border-radius:50%;background:var(--m-nosignal);flex:none}.m-vrow-acc.on i{background:var(--m-moving)}
/* Groups (iTrack «Default Group[34] ▾»): a header per group with its count; tapping it folds the group. */
.m-vgroup-head{width:100%;display:flex;align-items:center;gap:8px;padding:10px 16px;border:0;background:var(--m-surface-2);color:var(--m-ink);font:inherit;font-weight:700;font-size:13px;cursor:pointer;text-align:start}
.m-vgroup-head span{flex:1}.m-vgroup-head svg{transition:transform .2s}.m-vgroup-head[aria-expanded=false] svg{transform:rotate(90deg)}

/* Alert rows */
.m-arow{width:100%;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;min-height:68px;border:0;background:none;color:var(--m-ink);font:inherit;text-align:start;cursor:pointer;box-sizing:border-box}
.m-arow+.m-arow{box-shadow:inset 0 1px var(--m-line)}
.m-arow-dot{width:9px;height:9px;border-radius:50%;flex:none}.m-arow.unread .m-arow-dot{background:var(--m-teal-ink)}
.m-aicon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:#eef3f3;color:#1d2a2c}
.m-aicon.red{color:#b4432f}.m-aicon.violet{color:#5b3fc4}.m-aicon.amber{color:#8a5f27}.m-aicon.gray{color:#405357}
.m-arow-text{flex:1;min-width:0;display:flex;flex-direction:column}
.m-arow-text small{font-size:13px;color:var(--m-text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-arow-text b{font-size:16px;font-weight:600;line-height:1.4}
.m-arow.read .m-arow-text b{font-weight:500;color:var(--m-text2)}
.m-arow time{font-size:13px;color:var(--m-text3);white-space:nowrap}

/* Map labels (local coordinate map and Google markers) */
.map-label rect{fill:var(--m-surface);filter:drop-shadow(0 4px 6px #183a3826)}
.map-label text{font-family:Battuta,Tahoma,sans-serif;font-size:13px;font-weight:600;fill:var(--m-text2)}
.map-label.moving rect{fill:var(--m-ink)}.map-label.moving text{fill:var(--m-surface)}
.map-label.parked text{fill:var(--m-amber-ink)}
.m-gpin{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:Battuta,Tahoma,sans-serif}
.m-gpin-label{max-width:132px;overflow:hidden;text-overflow:ellipsis;padding:2px 10px;border-radius:8px;background:var(--m-surface);color:var(--m-ink);border:1px solid var(--m-line-2);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px #183a381f}
.m-gpin.moving .m-gpin-label{border-color:var(--m-moving)}
.m-gpin-car{position:relative;display:grid;place-items:center;width:34px;height:40px;filter:drop-shadow(0 2px 3px #000a)}
/* iTrack look 2026-10-31: the car's centre sits on the position (Google anchors the marker's bottom) and turns with --heading. */
.m-gpin{transform:translateY(20px)}.m-gpin-car>svg:first-child{transform:rotate(var(--heading,0deg));transition:transform .4s ease}
.m-car-light{fill:#fff4c2}.m-car-tail{fill:#e2574c}
@media (prefers-reduced-motion:reduce){.m-gpin-car>svg:first-child{transition:none}}
.m-gpin-car .m-nosig{top:0;left:0}

/* Full-screen pages as modal dialogs (Android back closes them). */
.m-page-dialog{border:0;padding:0;background:var(--m-bg);color:var(--m-ink);font-family:Battuta,Tahoma,sans-serif;width:min(440px,100%);max-width:none;height:min(880px,94dvh);max-height:none;border-radius:24px;overflow:auto;overscroll-behavior:contain}
.m-page-dialog::backdrop{background:var(--m-backdrop)}
@media(max-width:768px){.m-page-dialog{width:100%;height:100dvh;margin:0;border-radius:0;inset:0}}
.m-page-dialog h1,.m-page-dialog h2{margin:0}
.m-page{min-height:100%;padding-bottom:max(24px,env(safe-area-inset-bottom))}

/* Vehicle page */
.m-vhero{margin:12px 16px 0;padding:16px;border-radius:16px;background:var(--m-surface);border:1px solid var(--m-line);display:grid;gap:10px}
.m-vhero-top{display:flex;align-items:center;gap:12px;min-width:0}
.m-vhero-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-vhero-state{font-size:24px;font-weight:700;line-height:1.4}
.m-vhero-text small{font-size:13px;color:var(--m-text2);line-height:1.6}
.m-vhero-place{margin:0;font-size:16px;color:var(--m-ink);line-height:1.7}
.m-vtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 16px}
.m-vtile{min-width:0;padding:12px 10px;border-radius:14px;background:var(--m-surface);border:1px solid var(--m-line);display:flex;flex-direction:column;gap:2px}
.m-vtile>span{font-size:13px;color:var(--m-text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-vtile>strong{font-size:20px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.m-vtoday{margin:0;font-size:13px;color:var(--m-text3)}
.m-vinfo .m-vdev .m-row-val{max-width:none}
.m-vinfo .m-copy{margin-inline-end:-10px}
.m-actgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--m-surface);border-block:1px solid var(--m-line);margin-top:10px}
.m-actgrid button{border:0;background:none;color:var(--m-ink);min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:6px 2px}
.m-actgrid button svg{color:var(--m-teal-ink)}
.m-actgrid button:active{background:var(--m-surface-2)}
.m-vehicle-head{display:flex;flex-direction:column;gap:4px}
.m-title-24{font-size:24px;font-weight:700;line-height:1.3}
.m-vehicle-head p{margin:0;font-size:13px;color:var(--m-text2)}
.m-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px}
.m-stats>div{background:var(--m-surface);border:1px solid var(--m-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.m-stats>div.accent{background:var(--m-teal);border-color:var(--m-teal);color:#fff}.m-stats>div.accent span{color:#fff}
.m-stats span{font-size:13px;color:var(--m-text2)}
.m-stats strong{font-size:24px;font-weight:700;line-height:1.3;white-space:nowrap}
.m-stats strong small{font-size:13px;font-weight:500}
.m-stats .m-note{font-size:13px}
.m-vehicle-place{margin:0;padding-bottom:0;font-size:13px;color:var(--m-text2)}
.m-stats-now{padding-top:12px}
.m-stats-now+.m-actgrid{margin-top:12px}
/* Slim phone 2026-10-26 (iTrack video): three actions, a short status block, name / value details, the list's
   الكل / متصلة / مش متصلة tabs, the tracking card and the one-line install row. */
.m-actgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-desk-note{margin-top:4px;color:var(--m-text3)}
.m-kv .m-row-lbl b{font-weight:400;color:var(--m-text2)}
.m-kv .m-row-val{font-size:16px;font-weight:600;color:var(--m-ink)}
#m-mapcard.tracking .m-mapcard-acts{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--m-bar);border-bottom:1px solid var(--m-line);margin-top:8px}
.m-seg button{min-height:48px;border:0;border-bottom:2px solid transparent;background:none;color:var(--m-text2);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.m-seg button[aria-pressed=true]{color:var(--m-teal-ink);border-bottom-color:var(--m-teal-ink)}
.m-gchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 16px 2px}.m-gchips::-webkit-scrollbar{display:none}
.m-gchips button{flex:0 0 auto;min-height:36px;padding:0 14px;border:1px solid var(--m-line);border-radius:999px;background:var(--m-bar);color:var(--m-text2);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
.m-gchips button[aria-pressed=true]{color:var(--m-teal-ink);border-color:var(--m-teal-ink)}
.m-search[hidden]{display:none}
#m-vehicles .m-search{margin-top:8px}
.m-track-box{display:grid;gap:6px;padding:10px 4px 4px}
.m-kvline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.m-kvline>span{color:var(--m-text3)}
.m-kvline b{font-weight:600}
.m-track-place{margin:2px 0 0;font-size:16px;color:var(--m-ink)}
.m-install-row{margin-top:10px}
.m-install-row .m-row{gap:12px}
.m-install-mini{flex:none;min-height:44px;padding:0 16px}
.m-week-export{padding-inline:0}
.m-week-export .m-note-line{margin-top:8px}
.m-route{display:flex;flex-direction:column;gap:12px;padding:16px}
.m-route-date{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--m-text2)}
.m-route-date input{min-height:48px;border:1px solid var(--m-line-2);border-radius:12px;background:var(--m-surface);color:var(--m-ink);font:inherit;font-size:16px;padding:0 12px}
.m-route .m-mini{height:220px;border-radius:14px;overflow:hidden;background:var(--m-map);border:1px solid var(--m-line)}
.m-mini-svg{width:100%;height:100%;display:block}
.m-mini-bg{fill:var(--m-map)}.m-mini-road{stroke:var(--m-surface);stroke-width:12}.m-mini-route{stroke:var(--m-teal);stroke-width:5}
.m-mini-end{fill:var(--m-nosignal);stroke:var(--m-surface);stroke-width:4}.m-mini-end.moving{fill:var(--m-moving)}.m-mini-end.parked{fill:var(--m-parked)}
.m-mini-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--m-text2);font-size:13px}
.m-route .fw-replay-map svg{width:100%;height:100%}
.m-banner{margin:12px 16px 0;border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.6;background:var(--m-surface);border:1px solid var(--m-line);color:var(--m-ink)}
.m-banner p{margin:0}
.m-banner.ok{border-color:var(--m-teal-line)}
.m-banner.warn{border-color:var(--m-amber-line);background:var(--m-amber-soft);color:var(--m-amber-deep)}
.m-banner-dot{width:10px;height:10px;border-radius:50%;margin-top:8px;flex:none;background:var(--m-nosignal)}.m-banner-dot.connected{background:var(--m-moving)}
.m-dangerbox{margin:16px;border:1px solid var(--m-danger-line);border-radius:14px;padding:14px;background:var(--m-danger-soft);display:flex;flex-direction:column;gap:10px}
.m-dangerbox h2{font-size:16px;font-weight:700;color:var(--m-danger)}
.m-dangerbox p{margin:0;font-size:16px;line-height:1.6;color:var(--m-ink)}
.m-remote-reason{font-size:13px!important;color:var(--m-text2)!important}
/* The existing device-screen blocks (interval and listen) reused inside «الأوامر». */
.m-extras{padding:4px 16px 14px;color:var(--m-ink)}
.m-extras h3,.m-extras h4{margin:10px 0 6px;font-size:16px}
.m-extras h3{display:none}
.m-extras .dm-listen .dm-sub,.m-extras .dm-family h4{font-size:16px;margin:12px 0 6px}
.m-extras .dm-listen{border:0;padding-block:4px;margin:0}
.m-extras p{margin:6px 0;font-size:13px;line-height:1.6;color:var(--m-text2)}
.m-extras strong{color:var(--m-ink)}
.m-extras .dm-control-grid{display:flex;flex-direction:column;gap:8px}
.m-extras .dm-control-grid>div{display:flex;flex-direction:column;gap:4px}
.m-extras .dm-control-grid small{font-size:13px;color:var(--m-text2)}
.m-extras .button,.m-extras .dm-dialog-actions .button{min-height:48px;width:100%;border-radius:12px;border:1px solid var(--m-line-2);background:var(--m-surface-2);color:var(--m-ink);font:inherit;font-size:16px;font-weight:600}
.m-extras .button.dm-current{border-color:var(--m-teal-ink);background:var(--m-teal-soft)}
.m-extras .button:disabled{opacity:.45}
.m-extras .dm-dialog-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.m-extras .dm-change-note,.m-extras .dm-interval-stale{color:var(--m-amber-deep);background:var(--m-amber-soft);border-radius:10px;padding:8px 10px}
.m-extras .dm-consent-ok{color:var(--m-ink)}.m-extras .dm-consent-missing{color:var(--m-amber-deep)}

/* «النهارده» */
.m-today-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 4px}
.m-date{margin:0;font-size:13px;color:var(--m-text2)}
.m-today-head h1{margin:0;font-size:24px;font-weight:700}
.m-period{display:flex;background:var(--m-surface-2);border:1px solid var(--m-line-2);border-radius:12px;padding:3px;flex-shrink:0}
.m-period button{min-height:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:13px;color:var(--m-text2);cursor:pointer}
.m-period button[aria-selected=true]{background:var(--m-surface);color:var(--m-ink);font-weight:700}
.m-today-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-stat-card{background:var(--m-surface);border:1px solid var(--m-line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:96px}
.m-stat-card span{font-size:13px;color:var(--m-text2)}
.m-stat-card strong{font-size:24px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-stat-card strong small{font-size:13px}
.m-stat-card.teal{background:var(--m-teal);border-color:var(--m-teal);color:#fff}.m-stat-card.teal span{color:#fff}
.m-stat-card.amber{background:var(--m-amber-soft);border-color:var(--m-amber-line)}.m-stat-card.amber span{color:var(--m-amber-deep)}.m-stat-card.amber strong{color:var(--m-amber-ink)}
.m-stat-card.skeleton{background:linear-gradient(90deg,var(--m-surface-2),var(--m-surface),var(--m-surface-2));background-size:200% 100%;animation:load 1.4s linear infinite}
.m-card-box{background:var(--m-surface);border:1px solid var(--m-line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px}
.m-card-box h2{font-size:16px;font-weight:700}
.m-row-between{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px}
.m-row-between>:last-child{text-align:left}
.m-warn{margin:0;padding:10px 12px;border-radius:12px;background:var(--m-amber-soft);color:var(--m-amber-deep);font-size:13px}
.m-att{width:100%;display:flex;align-items:center;gap:10px;padding:12px 0;border:0;border-bottom:1px solid var(--m-line);background:none;color:inherit;font:inherit;text-align:right;cursor:pointer;min-height:56px}
.m-att:last-of-type{border-bottom:0}
.m-att-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--m-amber-soft);color:var(--m-amber-ink)}
.m-att.gray .m-att-icon{background:var(--m-gray-soft);color:var(--m-text2)}
.m-att-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.m-att-text strong{font-size:16px}.m-att-text small{font-size:13px;color:var(--m-text2)}
.m-att>svg{color:var(--m-text3);flex-shrink:0}
.m-each{display:flex;flex-direction:column;gap:10px}.m-each-row{display:flex;flex-direction:column;gap:4px}
.m-expand{min-height:52px;border-radius:14px;border:1px solid var(--m-line-2);background:var(--m-surface);color:var(--m-teal-ink);font:inherit;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.m-expand[aria-expanded=true] svg{transform:rotate(90deg)}

/* «حسابي» and «الإعدادات» */
.m-profile{display:flex;align-items:center;gap:14px;padding:16px;background:var(--m-surface);border-bottom:1px solid var(--m-line)}
.m-profile>div{min-width:0;display:flex;flex-direction:column}
.m-profile strong{font-size:20px;font-weight:700}
.m-profile small{font-size:13px;color:var(--m-text3)}
.m-avatar{width:56px;height:56px;border-radius:14px;background:var(--m-teal-soft);color:var(--m-teal-ink);display:grid;place-items:center;font-size:24px;font-weight:700;flex:none}
.m-segmented{display:flex;background:var(--m-surface-2);border:1px solid var(--m-line-2);border-radius:12px;padding:3px}
.m-segmented button{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;font:inherit;font-size:16px;color:var(--m-text2);cursor:pointer}
.m-segmented button[aria-pressed=true]{background:var(--m-teal);color:#fff;font-weight:700}
.m-row-static{cursor:default}
/* Khattat 2026-10-19: one-line titles keep their ellipsis but never clip the dots under a final «ي» (or marks above). */
.m-ellipsis,.m-appbar-title,.m-appbar-sub,.m-vrow-text strong,.m-vrow-text small,.m-arow-text small,.m-stat-card strong,.m-mapcard-main strong{line-height:1.7;padding-block:.1em .3em}
/* The bar stays compact: a little less line height, the same room below the line. */
.m-appbar-title,.m-appbar-sub{line-height:1.45}
.m-count.neutral{background:var(--m-surface-2);color:var(--m-ink);border:1px solid var(--m-line-2)}
.m-change-note{margin:0;padding:10px 16px;font-size:13px;line-height:1.6;color:var(--m-amber-deep);background:var(--m-amber-soft)}

/* «سجّل» page (staff) */
.m-record-form{min-height:100%;display:flex;flex-direction:column}
.m-rec-head{padding:max(16px,env(safe-area-inset-top)) 16px 16px;display:flex;align-items:center;gap:12px}
.m-rec-head .m-icon-button{width:44px;height:44px;box-shadow:none}
.m-rec-head>div{flex:1;min-width:0}
.m-rec-head h1{font-size:24px;font-weight:700}
.m-rec-machine select{border:0;background:transparent;font:inherit;font-size:13px;color:var(--m-text2);padding:0;min-height:32px;max-width:100%}
.m-rec-body{flex:1;padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}
.m-type{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-type button,.driver-type button{height:48px;border-radius:14px;border:1.5px solid var(--m-line);background:var(--m-surface);color:var(--m-text2);font:inherit;font-size:16px;cursor:pointer}
.m-type button[aria-checked=true],.driver-type button[aria-checked=true]{border:2px solid var(--m-teal);background:var(--m-teal-soft);color:var(--m-teal-ink);font-weight:700}
.m-amount,.driver-amount{background:var(--m-surface);border-radius:20px;padding:18px;display:flex!important;flex-direction:column;gap:6px;align-items:center}
.m-amount>span:first-child,.driver-amount>span:first-child{font-size:16px;color:var(--m-text2)}
.m-amount-row,.driver-amount-row{display:flex;align-items:baseline;gap:8px;justify-content:center;max-width:100%}
.m-amount input,.driver-amount input{width:170px;field-sizing:content;min-width:3ch;max-width:60vw;border:0!important;outline:0;text-align:center;font:inherit;font-size:24px!important;font-weight:700;color:var(--m-ink);background:transparent;min-height:0!important;padding:0!important}
/* The driver screen keeps its large amount (same layout, theme colours only). */
.driver-amount input{font-size:48px!important}
.m-amount-row>span,.driver-amount-row>span{font-size:20px;color:var(--m-text2)}
.m-amount:focus-within,.driver-amount:focus-within{outline:2px solid var(--m-teal)}
.m-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.m-field{background:var(--m-surface);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.m-field>span{font-size:13px;color:var(--m-text2)}
.m-field input{border:0;outline:0;font:inherit;font-size:24px;font-weight:700;background:transparent;color:var(--m-ink);min-width:0;width:100%;min-height:36px;padding:0}
.m-field:focus-within{outline:2px solid var(--m-teal)}
.m-two .m-field input{font-size:24px}
.m-field input#m-rec-evidence{font-size:16px;font-weight:500}
.m-total{margin:0;font-size:13px;color:var(--m-text2)}.m-total:empty{display:none}
/* The amount ≠ liters × price message reads as a warning, like the amber notices (Khattat r3). */
.m-total.is-warn,.driver-total.is-warn{display:flex;align-items:flex-start;gap:8px;color:var(--m-amber-ink)!important;font-weight:600}
.m-total.is-warn::before,.driver-total.is-warn::before{content:'';flex:0 0 18px;height:18px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5f27' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E") center/18px no-repeat}
.m-fieldset{border:0;margin:0;padding:12px 14px;background:var(--m-surface);border-radius:16px;display:flex;flex-direction:column;gap:8px}
.m-fieldset legend{font-size:13px;color:var(--m-text2);padding:0;float:right;margin-bottom:6px}
.m-fieldset small{font-size:13px;color:var(--m-text2)}
.m-radios{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.m-radios label{min-height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--m-line);display:flex;align-items:center;gap:6px;font-size:16px;cursor:pointer}
.m-radios label:has(input:checked){border-color:var(--m-teal);background:var(--m-teal-soft);color:var(--m-teal-ink);font-weight:700}
.m-radios input{accent-color:var(--m-teal);width:18px;height:18px}
.m-note-line{margin:0;font-size:13px;color:var(--m-text2)}
.m-hand-off{background:var(--m-surface);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;color:var(--m-teal)}
.m-hand-off p{margin:0;font-size:16px;color:var(--m-ink);line-height:1.7}
.m-error{margin:0;color:var(--m-danger);font-size:16px;font-weight:600}.m-error:empty{display:none}
.m-rec-foot{position:sticky;bottom:0;padding:16px 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:var(--m-bg)}
.m-rec-foot .m-big{height:58px;border-radius:18px}
.m-rec-foot span{text-align:center;font-size:13px;color:var(--m-text2)}


/* Remote engine cut confirmation as a sheet (any width). */
.remote-sheet{border:0;padding:0;background:var(--m-surface);color:var(--m-ink);width:min(440px,100%);max-width:none;border-radius:26px;font-family:Battuta,Tahoma,sans-serif}
.remote-sheet::backdrop{background:var(--m-backdrop)}
@media(max-width:768px){.remote-sheet{margin:auto 0 0;width:100%;border-radius:26px 26px 0 0;max-height:94dvh;overflow:auto}}
.remote-sheet form{padding:12px 20px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}
.remote-sheet-icon{align-self:center;width:72px;height:72px;border-radius:24px;display:grid;place-items:center}
.remote-sheet-icon svg{width:36px;height:36px}
.remote-sheet-icon.danger{background:var(--m-danger-soft);color:var(--m-danger)}.remote-sheet-icon.ok{background:var(--m-teal-soft);color:var(--m-teal)}
.remote-sheet h2{margin:0;text-align:center;font-size:24px;font-weight:700}
.remote-lead{margin:-8px 0 0;text-align:center;font-size:16px;line-height:1.7;color:var(--m-text2)}
.remote-owner{margin:-8px 0 0;text-align:center;font-size:13px;line-height:1.6;color:var(--m-text2)}
.remote-sms-note{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--m-amber-soft);color:var(--m-amber-deep);font-size:13px;line-height:1.6}
.remote-sms-note svg{width:20px;height:20px;flex-shrink:0}
.remote-sms-note bdi{font-weight:700}
.remote-sheet-actions{display:flex;flex-direction:column;gap:10px}
.remote-yes,.remote-no,.remote-done{min-height:52px;border:0;border-radius:18px;font:inherit;font-size:16px;cursor:pointer}
.remote-yes{height:58px;font-weight:700;color:#fff}.remote-yes.danger{background:var(--m-danger-fill)}.remote-yes.ok{background:var(--m-teal)}
.remote-no{background:var(--m-gray-soft);color:var(--m-ink);font-weight:600}
.remote-done{background:var(--m-teal);color:#fff;font-weight:700}
.remote-sheet .error-text{margin:0;font-size:16px}.remote-sheet .error-text:empty{display:none}
.remote-steps{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--m-line);padding-top:10px}
.remote-steps-caption{font-size:13px;color:var(--m-text2)}
.remote-steps.warn .remote-steps-caption{color:var(--m-amber-deep);font-weight:600}
.remote-steps ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;font-size:13px}
.remote-steps li[data-step]{display:flex;align-items:center;gap:6px;color:var(--m-text2);white-space:nowrap}
.remote-steps li.done,.remote-steps li.current{color:var(--m-teal-ink);font-weight:600}
.remote-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--m-line-2);background:var(--m-surface);flex-shrink:0;box-sizing:border-box}
.remote-steps li.current .remote-dot{border-color:var(--m-teal)}
.remote-steps li.done .remote-dot{background:var(--m-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--m-teal)}
.remote-line{flex:1;height:2px;margin:0 8px;background:var(--m-line);min-width:12px}
.remote-steps li.done+.remote-line{background:var(--m-teal)}
/* Unknown/quarantined/rejected/expired: «بيتبعت» is a warning, never a tick (Tester 2026-10-17). */
.remote-steps li.warn{color:var(--m-amber-ink);font-weight:600}.remote-steps li.warn .remote-dot{border-color:var(--m-amber);background:var(--m-amber-soft);color:var(--m-amber-ink);font-size:13px;line-height:14px;text-align:center;font-weight:700}
.remote-stop-button{color:var(--m-danger)!important;border-color:var(--m-danger-line)!important}

/* ---------- Driver screen (any width; phones first) ---------- */
.driver-app{gap:14px}
.driver-balance{border:0;border-radius:20px}.driver-balance span{color:var(--m-text2);font-size:16px}.driver-balance small{color:var(--m-text2);font-size:13px}
.driver-card{border:0;border-radius:18px}
/* Three equal buttons with drawings (Mohamed 2026-10-28): سولار، عهدة، كارتات. */
.driver-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.driver-kinds[hidden]{display:none}
.driver-action{min-height:108px;padding:12px 4px;border-radius:18px;border:1.5px solid var(--m-teal);background:var(--m-teal-soft);color:var(--m-ink);font:inherit;font-size:16px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.driver-action svg{color:var(--m-teal-ink)}
.driver-action:active{background:var(--m-surface-2)}
.driver-action:disabled{opacity:.55;cursor:not-allowed}
.driver-task span,.driver-task small,.driver-expense small,.driver-expense a,.driver-status,.receipt-status,.voice-hint{font-size:13px}
.driver-expense small,.driver-empty,.driver-loading,.field-empty,.voice-hint{color:var(--m-text2)}
.driver-record{display:flex;flex-direction:column;gap:0;background:var(--m-bg)}
.driver-record[hidden]{display:none}
body.driver-recording .driver-record{position:fixed;inset:0;z-index:30;overflow:auto;overscroll-behavior:contain}
body.driver-recording{overflow:hidden}
.driver-rec-head{padding:max(16px,env(safe-area-inset-top)) 16px 16px;display:flex;align-items:center;gap:12px;max-width:560px;width:100%;margin:0 auto;box-sizing:border-box}
.driver-rec-head>div{flex:1;min-width:0}.driver-rec-head h2{margin:0;font-size:24px;font-weight:700;text-wrap:balance}.driver-rec-head small{display:block;font-size:13px;color:var(--m-text2)}
.driver-icon{width:44px;height:44px;border-radius:14px;border:0;background:var(--m-surface);display:grid;place-items:center;color:var(--m-ink);flex-shrink:0;cursor:pointer}
.driver-rec-body{flex:1;padding:0 16px 16px;display:flex;flex-direction:column;gap:14px;max-width:560px;width:100%;margin:0 auto;box-sizing:border-box}
.driver-type{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.driver-rec-body>label:not(.driver-amount):not(.driver-photo),.driver-rec-body .driver-row label,.driver-price label{display:flex;flex-direction:column;gap:4px;background:var(--m-surface);border-radius:16px;padding:12px 14px;font-size:13px;color:var(--m-text2)}
.driver-rec-body input:not([type=file]),.driver-rec-body select{border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--m-ink);min-height:40px;width:100%;min-width:0;padding:0}
.driver-rec-body .driver-row input{font-size:24px;font-weight:700}
.driver-rec-body>label:focus-within,.driver-row label:focus-within{outline:2px solid var(--m-teal)}
.driver-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.driver-price{background:var(--m-surface);border-radius:16px;padding:0 14px}.driver-price summary{min-height:44px;display:flex;align-items:center;gap:4px;font-size:13px;color:var(--m-text2);cursor:pointer}
.driver-price label{padding:0 0 12px!important;background:none!important}
.driver-total{font-size:13px;color:var(--m-text2);font-weight:600}
.driver-photo{height:120px;border-radius:20px;border:2px dashed var(--m-teal-line);background:var(--m-surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--m-teal-ink)!important;font-size:16px;font-weight:700;padding:0}
.driver-photo span{font-size:16px}
.driver-voice-link{min-height:52px;border-radius:16px;border:1.5px solid var(--m-line);background:var(--m-surface);display:flex;align-items:center;justify-content:center;gap:8px;color:var(--m-ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.driver-voice-link svg{color:var(--m-teal)}
#driver-feedback{font-size:16px}
.driver-rec-foot{position:sticky;bottom:0;padding:16px 16px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:var(--m-bg);max-width:560px;width:100%;margin:0 auto;box-sizing:border-box}
.driver-rec-foot .driver-primary{min-height:58px;border-radius:18px}
.driver-rec-foot span{text-align:center;font-size:13px;color:var(--m-text2)}


/* ---------- Mobile shell ≤768px ---------- */
@media(max-width:768px){
  body.m-on{font-size:16px;background:var(--m-bg);color:var(--m-ink)}
  body.m-on .sidebar{display:none!important}
  body.m-on .m-tabbar{display:grid;grid-template-columns:repeat(var(--m-tabs,4),minmax(0,1fr));align-items:stretch;position:fixed;right:0;left:0;bottom:0;z-index:20;height:calc(var(--m-tab-h) + env(safe-area-inset-bottom));padding:0 0 env(safe-area-inset-bottom);box-sizing:border-box;background:var(--m-bar);border-top:1px solid var(--m-line)}
  .m-tabbar button{min-height:56px;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;font-size:13px;color:var(--m-text3);cursor:pointer;padding:0}
  .m-tabbar button[hidden]{display:none}
  .m-tabbar button.is-on{color:var(--m-teal-ink);font-weight:700}
  .m-tab-ico{position:relative;display:grid}
  .m-tab-badge{position:absolute;top:-8px;inset-inline-end:-14px;min-width:20px;height:20px;border-radius:10px;background:var(--m-danger-fill);color:#fff;font-size:13px;line-height:20px;padding:0 5px;font-weight:600;box-sizing:border-box;text-align:center}
  body.m-on main{padding-bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom) + 16px)}
  body.m-on main>footer{display:none}
  body.m-on .toast,body.m-on #toast{bottom:calc(var(--m-tab-h) + 16px)}
  /* Phone pages hide the desktop chrome; existing screens keep their heading and actions under the bar. */
  body.m-on:not(.m-mode-tab) .topbar,body.m-on:not(.m-mode-tab) .page-heading{display:none!important}
  body.m-mode-tab .topbar{display:none}
  body.m-mode-tab[data-m-tab=machines] .topbar{display:flex;position:static;background:var(--m-bg);border:0;padding:8px 16px 0}
  body.m-mode-tab[data-m-tab=machines] .topbar>:not(.topbar-tools),body.m-mode-tab[data-m-tab=machines] .topbar-tools>:not(.search-box){display:none!important}
  body.m-mode-tab[data-m-tab=machines] .search-box{display:flex;width:100%;background:var(--m-surface);border:1px solid var(--m-line-2);color:var(--m-text3);min-height:48px;border-radius:12px}
  body.m-mode-tab[data-m-tab=machines] .search-box input{color:var(--m-ink);width:100%}
  body.m-mode-tab .search-box kbd{display:none}
  body.m-mode-tab #m-tabhead{display:block;position:sticky;top:0;z-index:6}
  /* The bar already names the screen: the inner heading is not repeated (Khattat 2026-10-19). */
  body.m-mode-tab .page-heading .eyebrow,body.m-mode-tab .page-heading #page-title{display:none}
  body.m-mode-tab .page-heading #page-description{font-size:13px}
  /* One calendar icon in date fields: the browser's own. */
  body.m-on .date-field>[data-icon]{display:none}
  body.m-mode-tab .heading-dot{display:none}
  /* Overview pages: only the active one shows; «كل التفاصيل» in «النهارده» reveals the existing dashboard sections. */
  body.m-mode-map #view-overview>:not(.overview-hero),body.m-mode-map #roster,
  body.m-mode-vehicles #view-overview>:not(#m-vehicles),
  body.m-mode-today:not(.m-today-more) #view-overview>:not(#m-today),
  body.m-mode-today.m-today-more #view-overview>:is(.overview-hero,#now-kpis,#m-vehicles){display:none!important}
  body:is(.m-mode-alerts,.m-mode-me) main>.view{display:none!important}
  body.m-mode-vehicles #m-vehicles,body.m-mode-today #m-today,body.m-mode-alerts #m-alerts,body.m-mode-me #m-me{display:block}
  body.m-mode-today #m-today{padding:0 16px}
  body.m-mode-today #m-today .m-today-bar{margin:0 -16px}
  body.m-mode-today #m-today>:not(.m-today-bar){margin-top:12px}
  body:is(.m-mode-today,.m-mode-vehicles,.m-mode-alerts,.m-mode-me) #demo-banner{margin:12px 16px 0}
  body.m-mode-today.m-today-more #live-dashboard{margin:12px 16px 0}
  body.m-mode-today .overview-hero+*{margin-top:0}
  /* Map: full screen under the bar, chips over the map, controls on the left, the selected vehicle in a card. */
  body.m-mode-map{overflow:hidden;height:100dvh}
  body.m-mode-map main{padding:0}
  body.m-mode-map .overview-hero{margin:0;display:block}
  body.m-mode-map #tracking-workspace{position:fixed;inset:calc(56px + env(safe-area-inset-top)) 0 calc(var(--m-tab-h) + env(safe-area-inset-bottom)) 0;height:auto!important;min-height:0!important;margin:0;border:0;border-radius:0;box-shadow:none;z-index:1;background:var(--m-map)}
  body.m-mode-map #tracking-workspace #map{height:100%;min-height:0}
  body.m-mode-map .map-tools,body.m-mode-map .map-note,body.m-mode-map #selected-card,body.m-mode-map #demo-storage-note{display:none!important}
  body.m-mode-map #map .coordinate-map{background:var(--m-map)}
  body.m-mode-map #m-map-ui{display:block;position:fixed;top:0;right:0;left:0;z-index:5;pointer-events:none}
  #m-map-ui>*{pointer-events:auto}
  .m-map-bar{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:env(safe-area-inset-top) 16px 0;background:var(--m-bar);border-bottom:1px solid var(--m-line);box-sizing:border-box}
  .m-wordmark{font-size:20px;font-weight:700;color:var(--m-teal-ink);white-space:nowrap}
  .m-live{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--m-text2);white-space:nowrap;min-width:0}
  .m-live i{width:8px;height:8px;border-radius:50%;background:var(--m-moving);flex:none}
  body.app-offline-on .m-live{display:none}/* not «مباشر» while showing saved data */
  #m-map-ui>.m-map-status{display:flex;gap:4px;padding:12px 16px 0;overflow-x:auto;scrollbar-width:none;pointer-events:none}.m-map-status::-webkit-scrollbar{display:none}
  .m-mchip{pointer-events:auto;flex:none;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--m-line-2);background:var(--m-overlay);box-shadow:var(--m-shadow);color:var(--m-ink);font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}
  .m-mchip.moving{color:var(--m-moving-ink)}.m-mchip.parked{color:var(--m-parked-ink)}.m-mchip.nosignal{color:var(--m-nosignal-ink)}
  .m-mchip[aria-pressed=true]{border-color:var(--m-teal-ink);background:var(--m-teal-soft);box-shadow:inset 0 0 0 1px var(--m-teal-ink)}
  .m-map-note{margin:8px 12px 0;width:fit-content;max-width:calc(100% - 24px);box-sizing:border-box;padding:6px 12px;border-radius:10px;background:var(--m-surface);font-size:13px;color:var(--m-text2)}
  /* The note (local drawing / Maps failed) takes the row under the chips; the map controls move below it. */
  body.m-mode-map:has(#m-map-note:not([hidden])) #m-fabs,body.m-mode-map:has(#m-map-note:not([hidden])) #m-layers{top:calc(env(safe-area-inset-top) + 172px)}
  body.m-mode-map #m-fabs{display:flex;flex-direction:column;gap:10px;position:fixed;left:12px;top:calc(env(safe-area-inset-top) + 124px);z-index:5}
  body.m-mode-map:has(#demo-banner:not([hidden])) #m-fabs{top:calc(env(safe-area-inset-top) + 192px)}
  body.m-mode-map #m-layers:not([hidden]){display:grid;gap:8px;position:fixed;left:64px;top:calc(env(safe-area-inset-top) + 124px);z-index:6;width:min(260px,calc(100vw - 88px));box-sizing:border-box;padding:12px;border-radius:16px;background:var(--m-surface);border:1px solid var(--m-line-2);box-shadow:var(--m-shadow)}
  body.m-mode-map:has(#demo-banner:not([hidden])) #m-layers{top:calc(env(safe-area-inset-top) + 192px)}
  .m-layers-h{margin:0;font-size:13px;font-weight:600;color:var(--m-text2)}
  .m-layers .m-segmented button{font-size:13px;padding-inline:4px;white-space:nowrap}
  .m-fab{width:44px;height:44px;border-radius:12px;background:var(--m-overlay);border:1px solid var(--m-line-2);color:var(--m-ink);display:grid;place-items:center;padding:0;cursor:pointer}
  .m-fab[aria-pressed=true]{color:var(--m-teal-ink);border-color:var(--m-teal-ink);background:var(--m-teal-soft)}
  .m-fab[aria-expanded=true]{color:var(--m-teal-ink);border-color:var(--m-teal-ink);background:var(--m-teal-soft)}
  body.m-mode-map #m-mapcard:not([hidden]){display:block;position:fixed;right:12px;left:12px;bottom:calc(var(--m-tab-h) + env(safe-area-inset-bottom) + 12px);z-index:6;background:var(--m-surface);border:1px solid var(--m-line-2);border-radius:16px;padding:10px 8px 12px;box-shadow:var(--m-shadow)}
  .m-mapcard-top{position:relative}
  /* The close button sits beside the name only, so the place / age line below uses the card's full text width. */
  .m-mapcard-close{position:absolute;top:4px;inset-inline-end:4px;color:var(--m-text2);background:var(--m-surface-2)}
  .m-mapcard-title{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;min-height:44px;padding-inline-end:52px;box-sizing:border-box}
  .m-mapcard-title strong{flex:0 1 auto;min-width:0;max-width:100%}
  .m-mapcard-main .m-mapcard-line{display:block;color:var(--m-text2)}
  .m-mapcard-main{width:100%;flex:1;min-width:0;display:flex;align-items:flex-start;gap:12px;border:0;background:none;color:var(--m-ink);font:inherit;text-align:start;padding:4px;cursor:pointer}
  .m-mapcard-main>.m-mapcard-text{flex:1;min-width:0;display:flex;flex-direction:column}
  .m-mapcard-main strong{font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .m-mapcard-main small{font-size:13px;color:var(--m-text3)}
  .m-mapcard-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;padding:0 4px}
  .m-mapcard-acts .m-btn{min-height:44px;padding:0 6px}
  /* The trial stays clearly labelled on the map: one compact line under the chips. */
  body.m-mode-map #demo-banner{position:fixed;top:calc(env(safe-area-inset-top) + 120px);right:12px;left:12px;z-index:5;margin:0;padding:6px 6px 6px 12px;border-radius:12px;gap:8px;align-items:center;flex-wrap:nowrap}
  body.m-mode-map #demo-banner .demo-description,body.m-mode-map #demo-banner>[data-icon]{display:none}
  body.m-mode-map #demo-banner .demo-text{flex:1;min-width:0;font-size:13px;line-height:1.5;white-space:normal}
  body.m-mode-map #demo-banner button{min-height:44px;font-size:13px;white-space:nowrap}
  body.m-on #demo-storage-note{font-size:13px}
  body.m-mode-map #error,body.m-mode-map #loading-bar{position:fixed;top:calc(env(safe-area-inset-top) + 120px);right:16px;left:16px;z-index:7;margin:0}
  /* Inner screens on phones: no text under 13px; the logo subtitle is dropped instead of shrunk. */
  body.m-on small{font-size:13px}
  body.m-on .topbar-brand small,body.m-on .brand small{display:none}
  .m-list .m-empty{padding:16px}
  /* Existing screens on phones: placeholders and dimmed (offline) rows keep AA contrast; the words carry the state. */
  body.m-on .search-box input::placeholder{color:var(--m-ph)}
  body.m-on .machine-row.dim{opacity:1}body.m-on .machine-row.dim .machine-text strong{color:var(--m-text2)}
}
@media(max-width:380px){.m-stats strong{font-size:20px}.m-stat-card strong{font-size:20px}.m-today-head{flex-wrap:wrap}.m-amount input{font-size:24px!important}.driver-amount input{font-size:30px!important}.m-actgrid button{font-size:13px}}
@media(prefers-reduced-motion:reduce){.m-stat-card.skeleton{animation:none}}

/* ---------- Dark look (the phone default) ≤768px: phone shell, dialogs and the driver screen ---------- */
@media(max-width:768px){
html[data-m-theme=dark] body:is(.m-on,.driver-mode){
  color-scheme:dark;
  --m-ink:#eef3f3;--m-text2:#b3c0c2;--m-text3:#95a3a5;--m-ph:#8e9c9e;--m-teal:#187f77;--m-teal-ink:#45c2b5;--m-teal-soft:#123a36;--m-teal-line:#2f6b62;
  --m-amber:#e8ae52;--m-amber-ink:#e8ae52;--m-amber-deep:#f0c47e;--m-amber-soft:#2e2617;--m-amber-line:#5a4520;
  --m-gray:#768385;--m-gray-soft:#1f292b;--m-line:#263133;--m-line-2:#324043;--m-bg:#0f1416;--m-map:#0b1315;
  --m-danger:#f0705f;--m-danger-fill:#b9402d;--m-danger-soft:#3a1d19;--m-danger-line:#7a3a30;--m-shadow:0 10px 30px #000a;
  --m-surface:#182022;--m-surface-2:#1f292b;--m-bar:#141b1d;--m-overlay:#182022f2;--m-backdrop:#000000a6;
  --m-moving:#4fd17f;--m-parked:#e8ae52;--m-nosignal:#9aa6a8;--m-moving-ink:#4fd17f;--m-parked-ink:#e8ae52;--m-nosignal-ink:#b3c0c2;
  --m-moving-soft:#4fd17f24;--m-parked-soft:#e8ae5224;--m-nosignal-soft:#9aa6a81f;--m-car-edge:#0b1012;
  /* Existing screens: their own tokens take the same dark values. */
  --bg:#0f1416;--surface:#182022;--ink:#eef3f3;--muted:#b3c0c2;--faint:#a3b0b2;--line:#2b3739;--line-soft:#1f292b;
  --teal-dark:#45c2b5;--teal-soft:#123a36;--amber:#e8ae52;--amber-ink:#e8ae52;--amber-soft:#2e2617;--amber-line:#5a4520;
  --gray-soft:#1f292b;--track:#1f292b;--map:#0b1315;--danger:#f0705f;--side:#141b1d;--side-ink:#c2d1d3;--side-active:#1f292b;--shadow:0 8px 30px #0006;
  --dm-muted:#b3c0c2;--dm-teal:#45c2b5;--dm-line:#2b3739;
}
html[data-m-theme=dark] body:is(.m-on,.driver-mode) input::placeholder,html[data-m-theme=dark] body:is(.m-on,.driver-mode) textarea::placeholder{color:#8e9c9e}
html[data-m-theme=dark] .m-page-dialog,html[data-m-theme=dark] .remote-sheet{color-scheme:dark}
/* Local coordinate map in the dark look (Google tiles and the Map ID stay as they are). */
html[data-m-theme=dark] body.m-on #map .coordinate-map>rect{fill:var(--m-map)}
html[data-m-theme=dark] body.m-on #map .coordinate-map pattern path{stroke:#1a2729}
html[data-m-theme=dark] body.m-on #map .farm-shape{fill:#45c2b514;stroke:#45c2b5}
html[data-m-theme=dark] body.m-on #map .farm-label{fill:#45c2b5}
html[data-m-theme=dark] body.m-on #map .map-marker circle{stroke:#0b1012}
html[data-m-theme=dark] body.m-on #map .map-marker:has(.map-label.moving) circle{fill:var(--m-moving)}
html[data-m-theme=dark] body.m-on #map .map-marker:has(.map-label.parked) circle{fill:var(--m-parked)}
html[data-m-theme=dark] body.m-on #map .map-marker:has(.map-label.nosignal) circle{fill:var(--m-nosignal)}
html[data-m-theme=dark] body.m-on #map .map-marker>svg{fill:#0b1012}
html[data-m-theme=dark] body.m-on #map polyline{stroke:#e8ae52}
html[data-m-theme=dark] .map-label rect,html[data-m-theme=dark] .map-label.moving rect{fill:#0b1113;stroke:var(--m-line-2);filter:none}
html[data-m-theme=dark] .map-label text,html[data-m-theme=dark] .map-label.moving text,html[data-m-theme=dark] .map-label.parked text{fill:var(--m-ink)}
html[data-m-theme=dark] .map-label.moving rect{stroke:var(--m-moving)}
html[data-m-theme=dark] .m-route .fw-replay-map svg polyline{stroke:#45c2b5}
html[data-m-theme=dark] .m-route .fw-replay-map svg text{fill:var(--m-ink)}
html[data-m-theme=dark] .m-route .fw-replay-map svg circle{fill:var(--m-surface);stroke:#45c2b5}
html[data-m-theme=dark] .m-route .fw-replay-map svg .fw-replay-label{stroke:#1f292b}
}

/* Device screen tokens on phones (its muted/teal text sat at 4.37–4.45:1 on the light page). */
@media(max-width:768px){body.m-on #device-management{--dm-muted:var(--m-text2);--dm-teal:var(--m-teal-ink);--dm-line:var(--m-line)}}
/* ---------- generated: dark look for existing screens (scripts/phone-dark-layer.py from the existing stylesheets; do not edit by hand) ---------- */
@media(max-width:768px){
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) a{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) a:hover{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .skip-link{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .workspace-selector{border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .workspace-avatar,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .owner-avatar,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .profile-mini{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .nav-caption{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .nav-count{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .owner-profile{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .owner-profile small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .owner-avatar{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .topbar{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .breadcrumb>span:first-child{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .breadcrumb strong{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .search-box{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .search-box:focus-within{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) kbd{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .connection{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .connection i{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .profile-mini{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .heading-dot{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .button.secondary{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .segmented{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .segmented button{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .segmented button[aria-pressed=true]{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .date-field{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .text-button,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .link-button{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .link-button:hover,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .text-button:hover{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .notice.error{background-color:#3a1d19;background-image:none;border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .surface{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .empty{background-color:var(--surface);background-image:none;border:1px dashed var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .empty>.icon{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) th{background-color:#1f292b;background-image:none;border-block:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .map-card{border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .map-button{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) #toggle-tracks[aria-pressed=true]{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .map-note{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .map-empty .icon{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .selected-card{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .farm-card{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .farm-card.outside{background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .machine-row:hover{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .day-summary{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .chips button{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .chips button.active{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .inventory-row{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .inventory-row.head{background-color:#1f292b;background-image:none;border-bottom-color:var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .source-pill.ok{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .inspector{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ok-text{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .farm-tile{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .preview-badge{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .add-tile{border:2px dashed var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .add-tile:hover:not(:disabled){background-color:var(--surface);background-image:none;color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .kpi-strip{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .kpi{border-left:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .kpi.teal strong{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .kpi.skeleton{background:var(--surface)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .report-row.head{border-top:1px solid var(--line);border-bottom-color:var(--line);background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .report-row.total{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .section-icon{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dropzone{border:2px dashed var(--line);background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dropzone .icon{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .import-result{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .format-block pre{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .form-grid input:not([type=checkbox]),:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .form-grid select,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .form-grid textarea{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .form-actions{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) #toast{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .auth-card{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .auth-card .brand-mark{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .archive-equipment{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-panel p{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-panel select,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-panel input{border:1px solid var(--line);background-color:var(--surface);background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-maintenance{border:1px solid var(--line);background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-state{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-state.overdue,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-state.due{color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-state.missing{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-state.near{color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-progress{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-record{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-record small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-table th,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-table td{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-note{background-color:#2e2617;background-image:none;color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-dialog input,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-dialog select,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-dialog textarea{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-kpis small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-error{color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .performance-machine{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .performance-status{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .performance-status.over-budget{color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .performance-metrics dt{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .performance-metrics small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .budget-comparison td,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .budget-comparison th{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .budget-comparison thead{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .budget-comparison tbody tr:last-child{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-dialog .form-actions{background-color:var(--surface);background-image:none;border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ops-panel #ops-feedback{color:#45c2b5}
@media(max-width:600px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .budget-comparison tbody tr{border-bottom:1px solid var(--line)}}
@media(max-width:600px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .budget-comparison td::before{color:var(--muted)}}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .workspace-avatar{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) nav button.active .nav-count{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .connection{background-color:#1f292b;background-image:none;color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .connection.connected{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .connection.failed{background-color:#3a1d19;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .now-kpi{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .now-kpi.teal strong{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .now-kpi.teal .icon{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .roster-card{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .chip.dark{background:var(--m-teal);color:#fff}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .roster-list .machine-row:hover{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .inspector-grid>div:not(.full){background-color:#123a36;background-image:none;border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .inventory-row.head{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .kpi-strip .kpi{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .seg-tr{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .seg-un{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .bar-col.today span{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .auth-hero-foot{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .device-connection{background-color:#1f292b;background-image:none;color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .device-connection.connected{background-color:#123a36;background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .device-connection.disconnected{background-color:#2e2617;background-image:none;color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .device-last-message{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .travel-filters input,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .travel-filters select,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .remote-dialog input:not([type=checkbox]){border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .travel-machine-result{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .travel-kpis>div{border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .travel-quality{color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .travel-card{border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .remote-status.online{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .remote-status.offline{color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-filters input,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-filters select{border:1px solid var(--line);background-color:var(--surface);background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-result-title,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-machine-result{border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-quality{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-table-wrap th,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-table-wrap td{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-graphic svg{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-graphic figcaption,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-replay{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fleet-capabilities dd{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .alerts-shortcut{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .notification-form input:not([type=checkbox]){background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-actions input{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-status{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-status.failed{color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-kpi{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-kpi small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-facts{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-fact{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-fact strong{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-caption{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-section{background-color:var(--surface);background-image:none;border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-section p{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-section summary::before{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-section summary span{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-table th{color:var(--muted);background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-table td{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-machine small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-badge{background-color:#1f292b;background-image:none;color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-badge.connected{background-color:#123a36;background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-badge.disconnected{background-color:#2e2617;background-image:none;color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-alert{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-alert small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-month-facts dt{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-empty{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-skeleton{background-color:#1f292b;background-image:none;color:var(--muted)}
@media(max-width:650px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-table tr{border-top:1px solid var(--line)}}
@media(max-width:650px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dashboard-table td::before{color:var(--muted)}}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-tools{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-tools details{background-color:var(--surface);background-image:none;border:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-tools summary span{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-followup{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-followup small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-empty,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-caption{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-dialog{border:1px solid var(--line);color:#45c2b5;background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-dialog-head{background-color:var(--surface);background-image:none;border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-dialog-head p{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-section{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-facts dt{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-profile-state small{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-table th{color:var(--muted);background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-table th,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-table td{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-dialog select{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-record{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-record span{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) #fw-daily-report footer{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-replay-map{background-color:#1f292b;background-image:none;border:1px solid var(--line)}
@media(max-width:650px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-table tr{border-top:1px solid var(--line)}}
@media(max-width:650px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .fw-table td::before{color:var(--muted)}}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-panel{border:1px solid var(--line);color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-controls input{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-header{border-bottom:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-controls{background-color:#123a36;background-image:none;border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-controls select{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-caption,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-period,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) #equipment-analysis-message{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-result-mode{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-finding{border:1px solid var(--line);background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-finding-head{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-recommendation{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-evidence{color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-more,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-details{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-details a{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-table-wrap th,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-table-wrap td{border-bottom:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-empty{color:var(--muted)}
@media(max-width:600px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-table-wrap tr{border-bottom:1px solid var(--line)}}
@media(max-width:600px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .ea-table-wrap td:before{color:var(--muted)}}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .nav-bottom{border-top:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .access-permission-head{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .help-about a{color:var(--m-teal-ink)}
@media(max-width:900px){:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .nav-bottom{border-inline-start:1px solid var(--line)}}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .driver-balance strong{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .driver-sent{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .driver-card input,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .driver-card select{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .driver-photo{border:2px dashed var(--line);color:var(--m-teal-ink)!important}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .driver-secondary{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .approved .driver-status,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .approved .receipt-status{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .rejected .driver-status,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .rejected .receipt-status{background-color:#3a1d19;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .custody-card{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .custody-balance{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .field-row input,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .field-row select{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .field-feedback{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .task.done .task-status{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .voice-status{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .rep-balance strong{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .lamp-text-green{color:var(--m-teal-ink)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) #dm-search{border:1px solid var(--line);background-color:var(--surface);background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-device{background-color:var(--surface);background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-device:hover{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-device.is-selected{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-connected{background-color:#123a36;background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-disconnected{background-color:#2e2617;background-image:none;color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-unknown{background-color:#1f292b;background-image:none;color:var(--muted)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-sim bdi{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-device-times strong{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-clocks section{background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-event{border-inline-start:1px solid var(--line)}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-tag{color:var(--muted);background-color:#1f292b;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-event .dm-command{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-reply{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-warning,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-info{background-color:#2e2617;background-image:none;color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-info{background-color:#123a36;background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-close{background-color:#1f292b;background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog input,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog select{border:1px solid var(--line);background-color:var(--surface);background-image:none;color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog #dm-form-error{color:#f0705f}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-command-status{color:#e8ae52;background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog .dm-relay-note{color:#45c2b5;background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-reply .dm-relay-state{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-family h4,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-listen h3{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-family .dm-read-note,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog .dm-read-note{color:#45c2b5;background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-family .dm-change-note,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-dialog .dm-change-note{color:#e8ae52;background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-interval-current strong{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-segmented button[aria-pressed=true]{background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-listen .dm-consent-ok{color:#45c2b5;background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-listen .dm-consent-missing{color:#e8ae52;background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-reply .dm-extra-state{color:#45c2b5}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-alarm-tag{background-color:#2e2617;background-image:none;color:#e8ae52}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-setting{color:#e8ae52;background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-setting:not(:disabled):hover{background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-setting.dm-current,:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-setting.dm-current:disabled{color:#45c2b5;background-color:#123a36;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-controls .dm-family .dm-interval-stale{color:#e8ae52;background-color:#2e2617;background-image:none}
:where(html[data-m-theme=dark] body:is(.m-on,.driver-mode)) .dm-listen .dm-sub{color:#45c2b5}
}
/* ---------- end generated dark look ---------- */
/* Dark look: what the generated twins cannot express (inline status colours, filled buttons, reused device blocks). */
@media(max-width:768px){
html[data-m-theme=dark] body.m-on [style*="color:#13665f"]{color:#45c2b5!important}
html[data-m-theme=dark] body.m-on [style*="color:#8a5f27"]{color:#e8ae52!important}
html[data-m-theme=dark] body.m-on [style*="color:#405357"]{color:#b3c0c2!important}
html[data-m-theme=dark] body.m-on [style*="background:#eaf5f2"]{background:#123a36!important}
html[data-m-theme=dark] body.m-on [style*="background:#fbf3e8"]{background:#2e2617!important}
html[data-m-theme=dark] body.m-on [style*="background:#f0f3f3"]{background:#1f292b!important}
html[data-m-theme=dark] body:is(.m-on,.driver-mode) :is(a,button).button.primary{color:#fff}
html[data-m-theme=dark] body:is(.m-on,.driver-mode) :is(input,select,textarea):not([type=checkbox]):not([type=radio]){color:var(--m-ink)}
html[data-m-theme=dark] body.m-on .m-extras .dm-family h4,html[data-m-theme=dark] body.m-on .m-extras .dm-listen .dm-sub,html[data-m-theme=dark] body.m-on .m-extras .dm-interval-current strong{color:var(--m-ink)}
html[data-m-theme=dark] body.m-on .m-extras .dm-read-note{color:var(--m-ink);background:var(--m-teal-soft)}
html[data-m-theme=dark] body.m-on .m-extras .dm-change-note,html[data-m-theme=dark] body.m-on .m-extras .dm-interval-stale,html[data-m-theme=dark] body.m-on .m-extras .dm-consent-missing{color:var(--m-amber-deep);background:var(--m-amber-soft)}
html[data-m-theme=dark] body.m-on .m-extras .dm-consent-ok{color:#4fd17f;background:#15342a}
}

/* ---------- Phone text colours ≥4.5:1 (generated from the existing stylesheets; same specificity via :where). Tokens since the
   iTrack look 2026-10-19: identical values in the light look, light text in the dark look. ---------- */
@media(max-width:768px){
:where(body.m-on) a{color:var(--m-teal-ink)}
:where(body.m-on) .muted{color:var(--m-text2)}
:where(body.m-on) .workspace-selector small{color:var(--m-teal-ink)}
:where(body.m-on) .workspace-selector [data-icon] .icon{color:var(--m-teal-ink)}
:where(body.m-on) .owner-profile small{color:var(--m-teal-ink)}
:where(body.m-on) .breadcrumb{color:var(--m-text2)}
:where(body.m-on) .search-box{color:var(--m-text2)}
:where(body.m-on) kbd{color:var(--m-text2)}
:where(body.m-on) .connection{color:var(--m-text2)}
:where(body.m-on) .profile-mini{color:var(--m-teal-ink)}
:where(body.m-on) .eyebrow{color:var(--m-text2)}
:where(body.m-on) .heading-dot{color:var(--m-teal-ink)}
:where(body.m-on) #page-description{color:var(--m-text2)}
:where(body.m-on) .button.secondary .icon{color:var(--m-text2)}
:where(body.m-on) .segmented button{color:var(--m-text2)}
:where(body.m-on) .date-field .icon{color:var(--m-text2)}
:where(body.m-on) .text-button,:where(body.m-on) .link-button{color:var(--m-teal-ink)}
:where(body.m-on) .icon-button{color:var(--m-text2)}
:where(body.m-on) .quiet-note{color:var(--m-text2)}
:where(body.m-on) footer{color:var(--m-text2)}
:where(body.m-on) .card-head p{color:var(--m-text2)}
:where(body.m-on) .pill{color:var(--m-text2)}
:where(body.m-on) .big-number span{color:var(--m-text2)}
:where(body.m-on) .unknown{color:var(--m-text2)}
:where(body.m-on) .empty{color:var(--m-text2)}
:where(body.m-on) .empty>.icon{color:var(--m-teal-ink)}
:where(body.m-on) th{color:var(--m-text2)}
:where(body.m-on) .name-cell small{color:var(--m-text2)}
:where(body.m-on) .notes-cell{color:var(--m-text2)}
:where(body.m-on) .map-note{color:var(--m-text2)}
:where(body.m-on) .map-empty{color:var(--m-text2)}
:where(body.m-on) .map-empty .icon{color:var(--m-teal-ink)}
:where(body.m-on) .selected-text .detail-name span{color:var(--m-text2)}
:where(body.m-on) .farm-sub{color:var(--m-text2)}
:where(body.m-on) .farm-sub.warn{color:var(--m-amber-ink)}
:where(body.m-on) .note-row .icon{color:var(--m-amber-ink)}
:where(body.m-on) .summary-total small{color:var(--m-text2)}
:where(body.m-on) .chips button{color:var(--m-text2)}
:where(body.m-on) .inventory-row.head{color:var(--m-text2)}
:where(body.m-on) .inventory-name small{color:var(--m-text2)}
:where(body.m-on) .row-caret{color:var(--m-text2)}
:where(body.m-on) .inspector-grid span{color:var(--m-text2)}
:where(body.m-on) .inspector-grid strong small{color:var(--m-text2)}
:where(body.m-on) .inspector-grid div>small{color:var(--m-text2)}
:where(body.m-on) .detail-quality{color:var(--m-text2)}
:where(body.m-on) .preview-badge{color:var(--m-text2)}
:where(body.m-on) .add-tile{color:var(--m-text2)}
:where(body.m-on) .add-tile:hover:not(:disabled){color:var(--m-teal-ink)}
:where(body.m-on) .kpi span{color:var(--m-text2)}
:where(body.m-on) .kpi small{color:var(--m-text2)}
:where(body.m-on) .kpi.teal strong{color:var(--m-teal-ink)}
:where(body.m-on) .kpi.amber strong{color:var(--m-amber-ink)}
:where(body.m-on) .kpi.gray strong{color:var(--m-text2)}
:where(body.m-on) .report-row.head{color:var(--m-text2)}
:where(body.m-on) .report-row.muted-row{color:var(--m-text2)}
:where(body.m-on) .bar-col span{color:var(--m-text2)}
:where(body.m-on) .bar-col small{color:var(--m-text2)}
:where(body.m-on) .week-stats span{color:var(--m-text2)}
:where(body.m-on) .section-title p{color:var(--m-text2)}
:where(body.m-on) .section-icon{color:var(--m-teal-ink)}
:where(body.m-on) .dropzone{color:var(--m-text2)}
:where(body.m-on) .dropzone .icon{color:var(--m-teal-ink)}
:where(body.m-on) .format-block p{color:var(--m-text2)}
:where(body.m-on) .form-grid label{color:var(--m-text2)}
:where(body.m-on) .form-grid input[readonly]{color:var(--m-text2)}
:where(body.m-on) .form-grid small{color:var(--m-text2)}
:where(body.m-on) .auth-card p{color:var(--m-text2)}
:where(body.m-on) #auth-form label{color:var(--m-text2)}
:where(body.m-on) .archived-machine small{color:var(--m-text2)}
:where(body.m-on) .ops-state{color:var(--m-teal-ink)}
:where(body.m-on) .ops-state.missing{color:var(--m-text2)}
:where(body.m-on) .ops-state.near{color:var(--m-amber-ink)}
:where(body.m-on) .ops-record small{color:var(--m-text2)}
:where(body.m-on) .ops-kpis small{color:var(--m-text2)}
:where(body.m-on) .performance-metrics small{color:var(--m-text2)}
:where(body.m-on) .ops-panel #ops-feedback{color:var(--m-teal-ink)}
@media(max-width:600px){:where(body.m-on) .budget-comparison td::before{color:var(--m-text2)}}
:where(body.m-on) .now-kpi-label{color:var(--m-text2)}
:where(body.m-on) .now-kpi strong small{color:var(--m-text2)}
:where(body.m-on) .now-kpi>small{color:var(--m-text2)}
:where(body.m-on) .now-kpi.teal .icon{color:var(--m-teal-ink)}
:where(body.m-on) .now-kpi.amber .icon{color:var(--m-amber-ink)}
:where(body.m-on) .now-kpi.gray strong{color:var(--m-text2)}
:where(body.m-on) .now-kpi.gray .icon{color:var(--m-text2)}
:where(body.m-on) .roster-head p{color:var(--m-text2)}
:where(body.m-on) .week-legend{color:var(--m-text2)}
:where(body.m-on) .auth-points .icon{color:var(--m-teal-ink)}
@media (max-width:900px){:where(body.m-on) nav button.active .icon{color:var(--m-teal-ink)}}
:where(body.m-on) .device-connection{color:var(--m-text2)}
:where(body.m-on) .device-connection.connected{color:var(--m-teal-ink)}
:where(body.m-on) .device-connection.disconnected{color:var(--m-amber-ink)}
:where(body.m-on) .device-last-message{color:var(--m-text2)}
:where(body.m-on) .notification-form>label,:where(body.m-on) .notification-fields label{color:var(--m-text2)}
:where(body.m-on) .notification-toggle small{color:var(--m-text2)}
:where(body.m-on) .notification-channel-status,:where(body.m-on) #notification-form-feedback,:where(body.m-on) #notification-alerts-status{color:var(--m-text2)}
:where(body.m-on) .notification-alert small{color:var(--m-text2)}
:where(body.m-on) .notification-alert time{color:var(--m-text2)}
:where(body.m-on) .dashboard-status{color:var(--m-teal-ink)}
:where(body.m-on) .dashboard-kpi small{color:var(--m-text2)}
:where(body.m-on) .dashboard-caption{color:var(--m-text2)}
:where(body.m-on) .dashboard-section p{color:var(--m-teal-ink)}
:where(body.m-on) .dashboard-section summary::before{color:var(--m-text2)}
:where(body.m-on) .dashboard-section summary span{color:var(--m-text2)}
:where(body.m-on) .dashboard-table th{color:var(--m-text2)}
:where(body.m-on) .dashboard-machine small{color:var(--m-text2)}
:where(body.m-on) .dashboard-badge{color:var(--m-text2)}
:where(body.m-on) .dashboard-alert small{color:var(--m-text2)}
:where(body.m-on) .dashboard-month-facts dt{color:var(--m-text2)}
:where(body.m-on) .dashboard-empty{color:var(--m-teal-ink)}
:where(body.m-on) .dashboard-skeleton{color:var(--m-teal-ink)}
@media(max-width:650px){:where(body.m-on) .dashboard-table td::before{color:var(--m-text2)}}
:where(body.m-on) .fw-tools summary span{color:var(--m-text2)}
:where(body.m-on) .fw-followup small{color:var(--m-text2)}
:where(body.m-on) .fw-empty,:where(body.m-on) .fw-caption{color:var(--m-text2)}
:where(body.m-on) .fw-dialog-head p{color:var(--m-text2)}
:where(body.m-on) .fw-facts dt{color:var(--m-text2)}
:where(body.m-on) .fw-profile-state small{color:var(--m-text2)}
:where(body.m-on) .fw-table th{color:var(--m-text2)}
:where(body.m-on) .fw-record span{color:var(--m-text2)}
:where(body.m-on) #fw-daily-report footer{color:var(--m-text2)}
@media(max-width:650px){:where(body.m-on) .fw-table td::before{color:var(--m-text2)}}
:where(body.m-on) .ea-finding-head{color:var(--m-teal-ink)}
:where(body.m-on) .ea-evidence{color:var(--m-teal-ink)}
:where(body.m-on) .access-fields small{color:var(--m-text2)}
:where(body.m-on) .access-permission-head{color:var(--m-text2)}
:where(body.m-on) .access-user small{color:var(--m-text2)}
:where(body.m-on) .access-locked{color:var(--m-text2)}
:where(body.m-on) .help-layout p,:where(body.m-on) .help-layout dd{color:var(--m-text2)}
:where(body.m-on) .help-about a{color:var(--m-teal-ink)}
:where(body.m-on) .driver-balance span{color:var(--m-text2)}
:where(body.m-on) .driver-balance small{color:var(--m-text2)}
:where(body.m-on) .driver-card label{color:var(--m-text2)}
:where(body.m-on) .driver-task span,:where(body.m-on) .driver-task small{color:var(--m-text2)}
:where(body.m-on) .driver-expense small{color:var(--m-text2)}
:where(body.m-on) .driver-empty,:where(body.m-on) .driver-loading,:where(body.m-on) .field-empty{color:var(--m-text2)}
:where(body.m-on) .custody-card small{color:var(--m-text2)}
:where(body.m-on) .custody-card dt{color:var(--m-text2)}
:where(body.m-on) .field-row label{color:var(--m-text2)}
:where(body.m-on) .receipt-photo{color:var(--m-text2)}
:where(body.m-on) .receipt-body small,:where(body.m-on) .task small,:where(body.m-on) .poi small{color:var(--m-text2)}
:where(body.m-on) .task-status{color:var(--m-text2)}
:where(body.m-on) #poi-visits td small{color:var(--m-text2)}
:where(body.m-on) .notification-schedule small{color:var(--m-text2)}
:where(body.m-on) .voice-hint{color:var(--m-text2)}
:where(body.m-on) .voice-item small,:where(body.m-on) .voice-note small{color:var(--m-text2)}
:where(body.m-on) .voice-transcript{color:var(--m-text2)}
:where(body.m-on) .sh-stats span{color:var(--m-text2)}
:where(body.m-on) .sh-note{color:var(--m-text2)}
:where(body.m-on) .lamp-text-grey{color:var(--m-text2)}
:where(body.m-on) .sh-attention li span:last-child{color:var(--m-text2)}
:where(body.m-on) .sh-body p{color:var(--m-text2)}
:where(body.m-on) .sh-details dt{color:var(--m-text2)}
:where(body.m-on) .sh-time{color:var(--m-text2)}
:where(body.m-on) .sh-demo p{color:var(--m-text2)}
:where(body.m-on) .dm-tag{color:var(--m-text2)}
}

/* ---------- 13px floor for existing screens (generated from the existing stylesheets; print and logo lockup excluded) ---------- */
.small,.workspace-selector small,.nav-caption,.nav-count,.owner-profile small,.breadcrumb,.search-box,.search-box input,kbd,.connection,.eyebrow,.small-button,.text-button,.link-button,.demo-banner,.demo-banner button,.demo-storage-note,.quiet-note,footer,.card-head p,.pill,.pill.amber,.big-number span,th,.name-cell small,.notes-cell,.farm-label,.map-button,.map-note,.map-empty,.selected-text,.selected-text .detail-name span,.farm-sub,.machine-text small,.note-row,.note-row small,.summary-total small,.chips button,.inventory-row.head,.inventory-name small,.source-pill,.inspector-grid span,.inspector-grid strong small,.inspector-grid div>small,.detail-quality,.preview-badge,.machine-chip,.add-tile small,.kpi span,.kpi small,.report-row.head,.share small,.bar-col span,.bar-col small,.week-stats div,.section-title p,.dropzone,.import-result,.format-block,.format-block pre,.format-block p,.form-grid label,.form-grid small,.error-text,#auth-form label,.archived-machine small,.ops-state,.performance-metrics dt,.performance-metrics small,.now-kpi>small,.roster-head p,.chip,.week-legend,.auth-hero-foot,.device-connection,.device-last-message,.travel-quality,.fleet-filters label,.fleet-quality,.fleet-table-wrap table,.fleet-graphic figcaption,.fleet-replay,.fleet-capabilities dd,.alerts-shortcut,.notification-form>label,.notification-fields label,.notification-form legend,.notification-filter-grid,.notification-channel-status,#notification-form-feedback,#notification-alerts-status,.notification-alert small,.notification-alert time,.dashboard-actions label,.dashboard-status,.dashboard-kpi h3,.dashboard-kpi small,.dashboard-fact,.dashboard-caption,.dashboard-section p,.dashboard-section summary span,.dashboard-table,.dashboard-table th,.dashboard-machine small,.dashboard-badge,.dashboard-row-actions .link-button,.dashboard-alert,.dashboard-alert small,.dashboard-month-facts dt,.dashboard-empty,.fw-toolbar .link-button,.fw-tools summary span,.fw-followup strong,.fw-followup small,.fw-followup small,.fw-empty,.fw-caption,.fw-dialog-head p,.fw-facts dt,.fw-profile-state small,.fw-quick-actions button,.fw-section summary,.fw-table,.fw-table th,.fw-table .link-button,.fw-section-head label,.fw-quick-form label,.fw-replay-controls label,.fw-record,.fw-record span,#fw-daily-report footer,.fw-replay-map svg,.fw-replay-time,.fw-map-pin,.ea-header .eyebrow,.ea-caption,.ea-period,#equipment-analysis-message,.ea-result-mode,.ea-finding-head,.ea-evidence,.ea-table-wrap table,.access-fields small,.access-permission-head,.access-locked,.help-about dt,.driver-top small,.driver-balance small,.driver-task span,.driver-task small,.driver-expense small,.driver-expense a,.driver-status,.receipt-status,.custody-card small,.custody-card dt,.custody-card dd,.field-row label,.field-form p,.receipt-photo,.receipt-body small,.task small,.poi small,.task-status,.schedule-times label,.notification-schedule small,.voice-hint,.voice-item small,.voice-note small,.sh-stats span,.sh-note,.sh-status,.sh-body p,.sh-details div,.sh-time,.dm-toolbar p,.dm-kicker,.dm-notice,.dm-search-label,#dm-search,.dm-status,.dm-tag,.dm-sim,.dm-device-times,.dm-device-times strong,.dm-detail h3 span,.dm-clocks strong,.dm-clocks p,.dm-clocks small,.dm-map-link,.dm-coordinates bdi,.dm-facts dt,.dm-event-ref dt,.dm-facts small,.dm-history-note,.dm-event h4,.dm-tag,.dm-event p,.dm-event .dm-command,.dm-event small,.dm-reply,.dm-event details,.dm-event-ref dd,.dm-versions,.dm-versions p,.dm-versions li,.dm-empty,.dm-warning,.dm-info,.dm-device .dm-warning,.dm-dialog p,.dm-dialog label,.dm-dialog input,.dm-dialog select,.dm-dialog small,.dm-shares legend,.dm-dialog #dm-form-error,.dm-dialog [type=file]{font-size:13px}
@media (max-width:900px){nav button,.now-kpi>small{font-size:13px}}
@media(max-width:600px){.budget-comparison td::before,.ops-actions button,.ops-table table,.ea-finding-head .link-button{font-size:13px}}
@media(max-width:650px){.dashboard-kpi h3,.dashboard-table td::before,.fw-table td::before{font-size:13px}}
@media(max-width:900px){.access-user-actions .button{font-size:13px}}
@media(max-width:760px){.dm-toolbar .button{font-size:13px}}
@media(max-width:450px){.dm-detail-head .button{font-size:13px}}
.m-truck-shape .m-truck-cab,.m-truck-shape .m-truck-box{stroke:#1c2326;stroke-width:1.2}.m-truck-ribs{fill:none;stroke:#00000066;stroke-width:1}.m-gpin-car .m-truck-shape{filter:drop-shadow(0 0 1px #ffffffb3)}.m-gpin-car:has(.m-truck-shape) .m-nosig{left:-5px}
.m-truck-shape.c-white :is(.m-truck-cab,.m-truck-box){fill:#f4f5f2}.m-truck-shape.c-red :is(.m-truck-cab,.m-truck-box){fill:#d6322b}.m-truck-shape.c-blue :is(.m-truck-cab,.m-truck-box){fill:#2f6fd6}.m-truck-shape.c-green :is(.m-truck-cab,.m-truck-box){fill:#2e9d5b}.m-truck-shape.c-yellow :is(.m-truck-cab,.m-truck-box){fill:#f2c12e}.m-truck-shape.c-orange :is(.m-truck-cab,.m-truck-box){fill:#ee7d23}.m-truck-shape.c-black :is(.m-truck-cab,.m-truck-box){fill:#23282b;stroke:#8a959a}.m-truck-shape.c-silver :is(.m-truck-cab,.m-truck-box){fill:#b9c1c4}
.m-gpin-state{position:absolute;top:2px;right:-3px;width:11px;height:11px;border-radius:50%;border:2px solid var(--m-surface);box-shadow:0 0 0 1px #1c232659;background:var(--m-nosignal)}.m-gpin-state.moving{background:var(--m-moving)}.m-gpin-state.parked{background:var(--m-parked)}

/* iTrack look phase 3 — vehicle page: device number on top, four buttons with the alerts count, route times. */
.m-actgrid.m-actgrid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-actgrid button{position:relative}.m-act-count{position:absolute;top:6px;inset-inline-end:auto;right:calc(50% + 8px);min-width:22px;height:22px;line-height:22px}/* clear of the bell (Khattat F1) */
.m-route-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-field-error{margin:0;font-size:13px;color:var(--m-danger)}
#m-hardware-alarms .ha-status,#m-hardware-alarms .ha-source-warning,#m-hardware-alarms .ha-source-empty{margin:8px 16px;font-size:13px}
#m-hardware-alarms .ha-more{margin:4px 16px 8px;width:calc(100% - 32px);box-sizing:border-box}
#m-hardware-alarms .ha-sources{margin:4px 16px 12px;font-size:13px}
/* Phone alarms sit in the list like the other alerts: no card around the block or each alarm (Khattat-ready, phase 4). */
#m-alerts #m-hardware-alarms.hardware-alarms{margin:0;padding:0;border:0;border-radius:0;background:none;line-height:1.5}/* beats the card rule in hardware-alarms.css (Khattat F1) */
/* Dark icon circles for the alert rows (Khattat phase 4 F3): no near-white discs on the dark screen. */
@media(max-width:768px){html[data-m-theme=dark] .m-aicon{background:#1f292b;color:#b3c0c2}html[data-m-theme=dark] .m-aicon.red{background:#3a1d19;color:#f0705f}html[data-m-theme=dark] .m-aicon.amber{color:#e8ae52}html[data-m-theme=dark] .m-aicon.violet{color:#b7a8ff}}
/* ux1 Khattat fixes: chips fit 360 (F2); tile values as a big number and a small unit, pairs wrap (F1); card line keeps the age whole (F3). */
.m-mchip{padding-inline:8px}
.m-vtile>strong{font-size:13px;font-weight:600;color:var(--m-text2);line-height:1.5;overflow-wrap:normal}
.m-vtile>strong b{font-size:20px;font-weight:700;color:var(--m-ink)}
.m-vtile>strong .m-nowrap{display:inline-block}
.m-mapcard-line{display:flex;min-width:0}
/* ---------- Release 2 (2026-11-01): full-screen playback (iTrack Playback) and its period sheet ---------- */
.m-page[data-screen=route]{height:100%;min-height:0;padding-bottom:0;box-sizing:border-box}
.m-route.m-playback{display:block;position:relative;height:100%;min-height:480px;padding:0;overflow:hidden;background:var(--m-map)}
.m-route.m-playback .m-mini{position:absolute;inset:0;height:auto;border:0;border-radius:0;background:var(--m-map);padding:0}
.m-route.m-playback .m-mini-empty{padding:96px 24px 24px;box-sizing:border-box;text-align:center;font-size:16px}
.m-route.m-playback .m-mini-empty .m-btn{margin-top:8px}
.m-route.m-playback .fw-replay-map{position:absolute;inset:0;height:auto;margin:0;border:0;border-radius:0}
.m-route.m-playback .fw-replay-map svg .fw-replay-label{font-size:16px}
.m-pb-head{position:absolute;top:0;inset-inline:0;z-index:3;display:grid;grid-template-columns:44px minmax(148px,1fr) auto;align-items:center;gap:6px;padding:calc(env(safe-area-inset-top) + 8px) 8px 8px}
.m-pb-head .m-ib{background:var(--m-overlay);box-shadow:var(--m-shadow)}
.m-pb-titles{min-width:0;display:flex;flex-direction:column;padding:4px 10px;border-radius:12px;background:var(--m-overlay);box-shadow:var(--m-shadow)}
.m-pb-title{margin:0;font-size:16px;font-weight:700;line-height:1.4;color:var(--m-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-pb-sum{font-size:13px;color:var(--m-text2);line-height:1.5;overflow:hidden}
.m-pb-period{min-height:44px;min-width:0;max-width:38vw;padding:4px 10px 4px 8px;border-radius:12px;border:1px solid var(--m-teal-ink);background:var(--m-surface);color:var(--m-ink);font:inherit;font-size:16px;font-weight:600;display:flex;align-items:center;gap:0;cursor:pointer;box-shadow:var(--m-shadow);white-space:nowrap}
.m-pb-period-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.m-pb-period svg{flex:none;margin-inline-start:8px}
.m-pb-card{position:absolute;inset-inline:12px;bottom:max(16px,env(safe-area-inset-bottom));z-index:2;padding:12px 16px 14px;border-radius:20px;background:var(--m-surface);border:1px solid var(--m-line);box-shadow:var(--m-shadow);display:flex;flex-direction:column;gap:6px;color:var(--m-ink)}
.m-pb-top{display:flex;align-items:center;gap:12px}
.m-pb-play{width:56px;height:56px;border-radius:50%;border:0;background:var(--m-teal);color:#fff;display:grid;place-items:center;flex:none;cursor:pointer;padding:0}
.m-pb-play:focus-visible,.m-pb-rates button:focus-visible,.m-pb-period:focus-visible,.m-sheet-opt:focus-visible{outline:3px solid var(--m-teal-ink);outline-offset:2px}
.m-pb-now{display:flex;flex-direction:column;min-width:0}
.m-pb-clock{font-size:20px;font-weight:700;line-height:1.3;color:var(--m-ink);font-variant-numeric:tabular-nums}
.m-pb-now .m-pb-state{font-size:13px;font-weight:600;line-height:1.5}
.m-pb-slider{width:100%;height:44px;margin:0;accent-color:var(--m-teal);cursor:pointer}
.m-pb-ends{display:flex;justify-content:space-between;margin-top:-10px;font-size:13px;color:var(--m-text2)}
.m-pb-rates{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.m-pb-rates button{min-height:44px;min-width:0;padding:0;border-radius:10px;border:1px solid var(--m-line-2);background:none;color:var(--m-text2);font:inherit;font-size:16px;cursor:pointer}
.m-pb-rates button[aria-pressed=true]{border-color:var(--m-teal-ink);background:var(--m-teal-soft);color:var(--m-ink);font-weight:700}
.m-sheet{margin:auto 0 0;width:100%;max-width:none;max-height:90dvh;overflow:auto;box-sizing:border-box;border:0;border-radius:20px 20px 0 0;padding:8px 16px max(16px,env(safe-area-inset-bottom));background:var(--m-surface);color:var(--m-ink);font-family:Battuta,Tahoma,sans-serif}
.m-sheet::backdrop{background:var(--m-backdrop)}
@media(min-width:769px){.m-sheet{width:min(440px,100%);margin-inline:auto}}
.m-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.m-sheet-title{margin:0;font-size:20px;font-weight:700}
.m-sheet-list{display:flex;flex-direction:column;border-block:1px solid var(--m-line);margin:4px 0 12px}
.m-sheet-opt{width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px;border:0;background:none;color:var(--m-ink);font:inherit;font-size:16px;text-align:start;cursor:pointer}
.m-sheet-opt+.m-sheet-opt{box-shadow:inset 0 1px var(--m-line)}
.m-sheet-opt[aria-pressed=true]{color:var(--m-teal-ink);font-weight:700}
.m-sheet-range{display:flex;flex-direction:column;gap:12px}
/* Release 2: one alerts list by day; the device-alarm footer is a status, a «اعرض الأقدم» button and a sources line. */
.m-bar-text{min-height:44px;padding:0 8px;border:0;background:none;color:var(--m-teal-ink);font:inherit;font-size:16px;font-weight:600;white-space:nowrap;cursor:pointer}
.m-alist{list-style:none;margin:0;padding:0}
.m-alist>li+li{box-shadow:inset 0 1px var(--m-line)}
.m-alist .ha-event.ha-row{margin:0;padding:0;border:0;border-radius:0;background:none}
.m-alist .ha-sum{list-style:none;min-height:68px}
.m-alist .ha-sum::-webkit-details-marker{display:none}
.m-alist .ha-sum time{font-size:13px;color:var(--m-text3);white-space:nowrap}
.m-alist .ha-sum .ha-clock-note{color:var(--m-parked-ink);white-space:normal}
.m-alist .ha-row .ha-times{margin:0;padding:4px 16px 12px 62px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;font-size:13px}
.m-alist .ha-row .ha-times div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px}.m-alist .ha-row .ha-times dt,.m-alist .ha-row .ha-times dd{margin:0;font-size:13px}.m-alist .ha-row .ha-times dt{color:var(--m-text2)}.m-alist .ha-row .ha-times dd{white-space:nowrap}
.m-alist .ha-clock-detail{margin:0;padding:0 16px 4px 62px;font-size:13px;color:var(--m-parked-ink)}
#m-hardware-alarms .ha-sources-line{margin:8px 16px 12px;border:0;padding:0}
#m-hardware-alarms .ha-sources-line>summary{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-height:44px;font-weight:400}
#m-hardware-alarms .ha-sources-line>summary::-webkit-details-marker{display:none}
#m-hardware-alarms .ha-line-more{color:var(--m-teal-ink);font-weight:600;text-decoration:underline}
#m-hardware-alarms .ha-sources-line.warn>summary .ha-line-text{color:var(--m-amber-ink)}
#m-hardware-alarms .ha-status:empty{display:none}
.m-sheet .m-btn.primary:disabled{opacity:1;background:var(--m-surface-2);border-color:var(--m-line-2);color:var(--m-text2)}

/* Release 2 review (Khattat r2): the unread dot sits outside the flow so GPS and device rows share one icon column; the
   phone sources list keeps one fact per line and every date whole. */
#m-alerts .m-arow{position:relative}
#m-alerts .m-arow-dot{position:absolute;inset-inline-start:4px;top:50%;margin-top:-4.5px}
#m-hardware-alarms .ha-sources-line li>.ha-fact{display:flex;flex-direction:column}
#m-hardware-alarms .ha-sources-line .ha-fact small{font-size:13px;color:var(--m-text2)}
#m-hardware-alarms .ha-sources-line .ha-date{font-size:13px;white-space:nowrap;unicode-bidi:isolate}