/* Desktop iTrack look, phase 1 (2026-11-01): the rail shell and the «المتابعة» monitor. Everything here applies only while
   desktop-monitor.mjs sets body.dt-on (1024px and wider, signed in, not the driver screen); the phone (mobile.css, m-*)
   and narrower screens are untouched. Light theme, dark navy rail, teal accent, 13/16/20/24px type. */
body:not(.dt-on) .dt-only{display:none!important}
@media (min-width:1024px){
body.dt-on{--dt-rail:72px;--dt-navy:#142235;--dt-navy-2:#1d2f47;--dt-teal:#187f77;--dt-teal-ink:#13665f;--dt-line:#e3e9ea;--dt-ink:#1a3034;--dt-muted:#5d6b6e;grid-template-columns:var(--dt-rail) minmax(0,1fr)}

/* ---------- Rail ---------- */
body.dt-on .sidebar{width:var(--dt-rail);padding:2px 0 0;background:var(--dt-navy);align-items:stretch;overflow:hidden;gap:0}
body.dt-on .workspace-nav::-webkit-scrollbar{display:none}
body.dt-on .sidebar .brand{justify-content:center;height:40px;min-height:40px;align-items:center;padding:0;margin:0;gap:0;flex:none}
body.dt-on .sidebar .brand-wordmark,body.dt-on .workspace-selector,body.dt-on .nav-caption,body.dt-on .owner-profile{display:none}
body.dt-on .workspace-nav{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;gap:0;margin:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
body.dt-on .nav-group{display:contents}
body.dt-on .sidebar nav button{flex:none;flex-direction:column;justify-content:center;gap:4px;width:100%;height:48px;min-height:48px;padding:0 2px;border-radius:0;font-size:13px;line-height:1;font-weight:600;text-align:center;color:#b7c4d4;white-space:nowrap}
/* One-word label (data-dt-short); the full name is the title and accessible name. */
body.dt-on .sidebar nav button>span:not([data-icon]):not(.nav-count):not(.dt-alt-icon){display:none}
body.dt-on .sidebar nav button::after{content:attr(data-dt-short);display:block;font-size:13px;line-height:1.15}
body.dt-on .sidebar nav button .dt-alt-icon{display:grid;place-items:center}
body.dt-on .sidebar nav button:has(.dt-alt-icon)>[data-icon]{display:none}
body.dt-on .sidebar nav button .icon{width:20px;height:20px;flex:none}
body.dt-on .sidebar nav button:hover{background:var(--dt-navy-2);color:#fff}
body.dt-on .sidebar nav button.active{background:var(--dt-navy-2);color:#fff;box-shadow:inset -3px 0 0 #4fb3a3}
body.dt-on .sidebar nav button.active .icon{color:#5fd0c0}
body.dt-on .sidebar nav button::before{display:none}
body.dt-on .sidebar nav button:hover .icon,body.dt-on .sidebar nav button:hover svg{color:#fff}
body.dt-on .sidebar nav button:focus-visible,body.dt-on .dt-rail-logout:focus-visible{outline:2px solid #5fd0c0;outline-offset:-3px}
body.dt-on .sidebar .nav-count{position:absolute;top:2px;left:10px;margin:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#c2453a;color:#fff;font-size:13px;line-height:20px;font-weight:700;text-align:center;box-sizing:border-box}
body.dt-on .sidebar #nav-machine-count{background:#2d4566;color:#dbe6f2}
body.dt-on .sidebar .nav-count[data-dt-empty=true],body.dt-on .sidebar .nav-count[hidden]{display:none}
/* Order like iTrack's rail; «صيانة النظام» and logout at the bottom. */
body.dt-on .sidebar [data-tab=overview]{order:1}body.dt-on .sidebar [data-tab=machines]{order:2}body.dt-on .sidebar [data-tab=reports]{order:3}body.dt-on .sidebar [data-tab=devices]{order:4}body.dt-on .sidebar [data-tab=farms]{order:5}body.dt-on .sidebar [data-tab=operations]{order:6}body.dt-on .sidebar [data-tab=custody]{order:7}body.dt-on .sidebar [data-tab=reps]{order:8}body.dt-on .sidebar [data-tab=notifications]{order:9}body.dt-on .sidebar [data-tab=settings]{order:10}body.dt-on .sidebar [data-tab=analysis]{order:11}body.dt-on .sidebar [data-tab=help]{order:12}
body.dt-on .sidebar [data-tab=integration]{order:20;margin-top:auto;border-top:1px solid #23395a}
body.dt-on .dt-rail-logout{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:48px;min-height:48px;padding:0 4px;font-weight:600!important;border-top:1px solid #23395a!important;border:0;background:none;color:#b7c4d4;font:inherit;font-size:13px;cursor:pointer}
body.dt-on .dt-rail-logout:hover{background:var(--dt-navy-2);color:#fff}
body.dt-on .dt-rail-logout[hidden]{display:none}

/* ---------- Slim top bar ---------- */
body.dt-on .topbar{height:52px;padding:0 20px}

/* ---------- Monitor: one top bar (the page strip folds into it), banner, full-screen map ---------- */
body.dt-on .heading-dot{display:none}
body.dt-monitor .topbar{gap:10px;padding:0 12px 0 14px}
body.dt-monitor .topbar .breadcrumb,body.dt-monitor #connection-status,body.dt-monitor .topbar-divider,body.dt-monitor .search-box kbd{display:none}
body.dt-monitor .topbar .page-heading{flex:1;min-width:0;padding:0;margin:0;display:flex;align-items:center;flex-wrap:nowrap;gap:10px;background:none;border:0}
body.dt-monitor .topbar .page-heading>div:first-child{flex:none;display:flex;align-items:baseline;gap:10px}
body.dt-monitor .page-heading .eyebrow,body.dt-monitor #page-description{display:none}
body.dt-monitor .page-heading h1{font-size:16px;margin:0;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.dt-monitor .page-heading .page-actions{gap:6px;margin-inline-start:auto;flex-wrap:nowrap}
body.dt-monitor .page-heading .page-actions .button,body.dt-monitor .page-heading .segmented button{min-height:34px;font-size:13px;padding-block:0;white-space:nowrap}
body.dt-monitor .page-heading .segmented button{padding-inline:10px}
body.dt-monitor .topbar-tools{gap:8px;flex:none}
body.dt-monitor .search-box{padding:4px 8px}body.dt-monitor .search-box input{width:120px;font-size:13px}
.dt-link[hidden]{display:none}
.dt-live{display:none}
body.dt-monitor .dt-live{display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:#eef6f3;font-size:13px;font-weight:600;color:#13665f;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden}
body.dt-monitor .dt-live>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.dt-monitor .page-heading .page-actions{flex:none}
body.dt-monitor .dt-live.failed{background:#fbf3e8;color:#8a5f27}
.dt-live-dot{width:8px;height:8px;border-radius:50%;background:#2fae6a;box-shadow:0 0 0 3px #2fae6a29}.dt-live-dot.off{background:#d39a3b;box-shadow:none}
body:not(.dt-monitor) #dt-summary-link{display:none}
body.dt-monitor #dt-summary-link{white-space:nowrap;flex:none}
@media (max-width:1365px){body.dt-monitor .search-box input{width:92px}body.dt-monitor .dt-live-label{display:none}body.dt-monitor .page-heading .segmented button{padding-inline:8px}body.dt-monitor .topbar .page-heading{gap:8px}}
.dt-link{border:0;background:none;padding:0 2px;min-height:32px;color:var(--dt-teal-ink,#13665f);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
body.dt-monitor .demo-banner,body.dt-monitor .demo-storage-note,body.dt-monitor .notice.error{margin:0;border-radius:0}
/* The demo banner is one 32px line under the bar. */
body.dt-monitor .demo-banner{min-height:32px;padding:2px 16px;font-size:13px;box-sizing:border-box;align-items:center}
body.dt-monitor .demo-banner button{min-height:28px;font-size:13px;padding-block:0}
/* Public demo on the monitor: the storage note lives in the banner (tooltip and screen-reader text), and the banner keeps
   the only «دخول بياناتك». */
body.dt-monitor #demo-storage-note{display:none}
.dt-banner-note{display:none}
body.dt-monitor .dt-banner-note{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.dt-monitor .demo-banner{position:relative;flex-wrap:nowrap;overflow:hidden}
body.dt-monitor .demo-banner .demo-text{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.dt-monitor .demo-banner button{flex:none;white-space:nowrap}
body.dt-monitor:has(#demo-banner:not([hidden])) #workspace-link{display:none}
body.dt-monitor .loading-bar{margin:0}
body.dt-monitor #view-overview .overview-hero{margin:0;display:block}
/* The floating panel replaces the side list on the map; the old list (with its place lines) stays under the map. */
body.dt-monitor #roster{margin:16px 28px 0;max-height:none}
body.dt-monitor #tracking-workspace{margin:0;height:max(440px,calc(100dvh - var(--dt-map-top,100px)));min-height:0;border:0;border-radius:0;transition:none}
body.dt-monitor #tracking-workspace.expanded{min-height:0}
body.dt-monitor #expand-map{display:none}
body.dt-monitor .map-note{top:12px;bottom:auto;left:12px;font-size:13px}
body.dt-monitor #toast{bottom:84px}
/* Summary blocks stay on the page, under the map. */
body.dt-monitor #roster,body.dt-monitor #now-kpis,body.dt-monitor #farm-overview,body.dt-monitor #day-summary{scroll-margin-top:60px}

/* ---------- Bottom toolbar (the existing map tools plus zoom, map type and names) ---------- */
/* Capped to the free map width: 16px from the panel and kept right of the bottom-left Google logo and its margin. */
body.dt-monitor .map-tools{top:auto;bottom:16px;left:auto;right:calc(340px + 28px);width:max-content;max-width:calc(100% - 340px - 28px - var(--dt-logo-clear));box-sizing:border-box;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;padding:6px 8px;background:#fff;border:1px solid var(--dt-line);border-radius:14px;box-shadow:0 8px 24px #14223526;overflow-x:auto;scrollbar-width:none}
body.dt-monitor.dt-panel-closed .map-tools{right:16px;max-width:calc(100% - 16px - var(--dt-logo-clear))}
body.dt-monitor #tracking-workspace{--dt-logo-clear:152px}
body.dt-monitor .map-tools::-webkit-scrollbar{display:none}
body.dt-monitor .map-tools .map-button{min-height:36px;box-shadow:none;font-size:13px;white-space:nowrap;flex:none}
body.dt-monitor .map-tools .map-button[aria-pressed=true]{background:#eaf5f2;border-color:var(--dt-teal);color:var(--dt-teal-ink)}
body.dt-monitor .map-measure-result{font-size:13px;white-space:nowrap}
.dt-tools{display:flex;align-items:center;gap:6px;flex:none}
.dt-sep{width:1px;height:22px;background:var(--dt-line,#e3e9ea);flex:none}
.dt-zoom{display:flex;align-items:center;gap:6px}
.dt-zoom input[type=range]{width:96px;accent-color:#187f77}
.dt-icon-button{width:36px;padding:0!important;justify-content:center}
.dt-tools .map-button[hidden]{display:none}
/* Compact toolbar (below 1360px, or whenever the full one would not fit): «المسارات» keeps its words and zoom stays;
   measuring, map type and names become 44px icon buttons whose names stay in aria-label and title. */
body.dt-monitor .map-tools.dt-compact{gap:4px;padding:4px 6px}
body.dt-monitor .map-tools.dt-compact .map-button{min-height:44px}
body.dt-monitor .map-tools.dt-compact :is(#measure-distance,#measure-area,#dt-map-type,#dt-names){width:44px;min-width:44px;padding:0;justify-content:center;font-size:0;gap:0}
body.dt-monitor .map-tools.dt-compact :is(#measure-distance,#measure-area,#dt-map-type,#dt-names) :is(.icon,svg){width:20px;height:20px}
body.dt-monitor .map-tools.dt-compact :is(#dt-map-type,#dt-names)>span{display:none}
body.dt-monitor .map-tools.dt-compact .dt-icon-button{width:44px;min-width:44px}
body.dt-monitor .map-tools.dt-compact .dt-zoom input[type=range]{width:80px}
/* The measuring total floats just above the compact bar instead of widening it. */
body.dt-monitor .map-tools.dt-compact{overflow:visible}
body.dt-monitor .map-tools.dt-compact #measure-result{position:absolute;bottom:calc(100% + 8px);right:0;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--dt-line);box-shadow:0 6px 16px #14223526}

/* ---------- Floating vehicle panel (iTrack «My device») ---------- */
.dt-panel{position:absolute;z-index:4;top:12px;right:12px;bottom:12px;width:340px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--dt-line,#e3e9ea);border-radius:14px;box-shadow:0 12px 32px #14223533;color:var(--dt-ink,#1a3034);overflow:hidden}
.dt-panel.collapsed{bottom:auto}
.dt-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 6px 14px;background:var(--dt-navy,#142235);color:#fff;min-height:44px;box-sizing:border-box}
.dt-panel-head h2{margin:0;font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.dt-count{font-size:13px;font-weight:600;color:#b7c4d4}
.dt-icon{width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.dt-icon:hover{background:#ffffff1a}
.dt-icon:focus-visible{outline:2px solid #5fd0c0}
.dt-panel-body{display:flex;flex-direction:column;min-height:0;flex:1}
.dt-panel-body[hidden]{display:none}
.dt-search{margin:10px 12px 6px;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:1px solid var(--dt-line,#e3e9ea);border-radius:10px;color:var(--dt-muted,#5d6b6e)}
.dt-search:focus-within{outline:2px solid #187f77;outline-offset:1px}
.dt-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13px;color:var(--dt-ink,#1a3034)}
.dt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 12px;border-bottom:1px solid var(--dt-line,#e3e9ea)}
.dt-tabs button{min-height:40px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--dt-muted,#5d6b6e);cursor:pointer;white-space:nowrap}
.dt-tabs button[aria-pressed=true]{color:#13665f;border-bottom-color:#187f77}
.dt-tabs button:focus-visible{outline:2px solid #187f77;outline-offset:-2px}
.dt-list{flex:1;min-height:0;overflow-y:auto;padding:4px 0 8px}
.dt-group{width:100%;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:0;background:#f3f6f7;color:var(--dt-ink,#1a3034);font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:start}
.dt-group[aria-expanded=false] .dt-caret{transform:rotate(90deg)}
.dt-box{width:24px;height:24px;display:grid;place-items:center;flex:none}
.dt-caret{transition:transform .15s}
.dt-group:focus-visible{outline:2px solid #187f77;outline-offset:-2px}
.dt-row{display:flex;align-items:center;gap:8px;min-height:42px;padding:0;padding-inline:12px 6px;border-bottom:1px solid #eef2f3}
.dt-row.selected{background:#e7f3f1}
.dt-row.off .dt-name{color:#8c9b9e}
.dt-check{width:16px;height:16px;margin:0;accent-color:#187f77;flex:none}
.dt-name{flex:1;min-width:0;border:0;background:none;padding:6px 0;font:inherit;font-size:16px;font-weight:600;color:var(--dt-ink,#1a3034);text-align:start;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-row.selected .dt-name{color:#13665f;font-weight:700}
.dt-name:focus-visible,.dt-more:focus-visible{outline:2px solid #187f77;outline-offset:1px;border-radius:6px}
.dt-age{font-size:13px;color:var(--dt-muted,#5d6b6e);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:56px;text-align:end}
.dt-age.moving{color:#13665f}.dt-age.parked{color:#8a5f27}.dt-age.nosignal{color:#b4432f}
.dt-dot{width:10px;height:10px;border-radius:50%;background:#9aa6a8;flex:none;display:inline-block}
.dt-dot.moving{background:#2fae6a}.dt-dot.parked{background:#d39a3b}.dt-dot.nosignal{background:#c2453a}
.dt-more{width:28px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--dt-muted,#5d6b6e);cursor:pointer;flex:none}
.dt-more:hover,.dt-more[aria-expanded=true]{background:#eef2f3;color:var(--dt-ink,#1a3034)}
.dt-empty{margin:16px 12px;font-size:13px;color:var(--dt-muted,#5d6b6e)}
.dt-menu{position:fixed;z-index:40;min-width:180px;padding:6px;background:#fff;border:1px solid var(--dt-line,#e3e9ea);border-radius:12px;box-shadow:0 12px 32px #1422353d}
.dt-menu[hidden]{display:none}
.dt-menu [role=menuitem]{width:100%;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;color:var(--dt-ink,#1a3034);cursor:pointer;text-align:start}
.dt-menu [role=menuitem]:hover,.dt-menu [role=menuitem]:focus{background:#eaf5f2;outline:0;color:#13665f}

/* ---------- Info window (#selected-card as a popup anchored to the car) ---------- */
body.dt-monitor #selected-card.dt-info{bottom:auto;right:auto;min-width:0;width:340px;max-width:340px;padding:0;display:block;border:1px solid var(--dt-line);border-radius:12px;background:#fff;box-shadow:0 12px 32px #14223540;z-index:5;transition:none}
body.dt-monitor #selected-card.dt-info[hidden]{display:none}
/* The row ⋮ menu and the info window never overlap: the window steps aside while the menu is open. */
body.dt-monitor.dt-menu-open #selected-card.dt-info{visibility:hidden}
.dt-info-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 6px 12px;border-bottom:1px solid #eef2f3}
.dt-info-head .detail-name{font-size:16px;font-weight:700;color:#13665f;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-info-head .detail-name small{font-size:13px;color:var(--dt-muted);font-weight:500}
.dt-info-head .icon-button{width:32px;height:32px}
.dt-info-rows{margin:0;padding:10px 12px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:6px 10px;align-items:baseline}
.dt-info-rows dt{font-size:13px;color:var(--dt-muted);font-weight:500}
.dt-info-rows dd{margin:0;font-size:16px;line-height:1.45;color:var(--dt-ink);min-width:0;overflow-wrap:anywhere}
.dt-info-rows .dt-dot{width:8px;height:8px;margin-inline-end:6px;vertical-align:middle}
.dt-info-rows .dt-place{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dt-muted{color:var(--dt-muted)}
.dt-info-rows .dt-unknown{display:none}
.dt-info-rows .dt-place .geographic-location[dir=ltr],.dt-info-rows .dt-place .geographic-location:not([data-location-request]){display:none}
.dt-info-rows .dt-place .geographic-location[dir=ltr]~.dt-unknown{display:inline}
.dt-info-actions{display:flex;gap:2px;justify-content:space-around;padding:6px 8px 8px;border-top:1px solid #eef2f3}
.dt-info-act{width:40px;height:36px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:#4b5f63;cursor:pointer}
.dt-info-act:hover,.dt-info-act[aria-pressed=true]{background:#eaf5f2;color:#13665f}
.dt-info-act:focus-visible{outline:2px solid #187f77;outline-offset:1px}
.dt-info-arrow{position:absolute;left:var(--dt-arrow,50%);bottom:-7px;width:12px;height:12px;margin-left:-6px;background:#fff;border-right:1px solid var(--dt-line);border-bottom:1px solid var(--dt-line);transform:rotate(45deg)}
body.dt-monitor #selected-card.below .dt-info-arrow{bottom:auto;top:-7px;transform:rotate(225deg)}
body.dt-monitor #selected-card.floating .dt-info-arrow{display:none}
}

@media (min-width:1024px){
/* Local fallback map: the desktop car marker and the ring of the selected one. */
.dt-car .m-car-shape{overflow:visible}
.dt-car-ring{fill:#187f7722;stroke:#187f77;stroke-width:2}
}

/* ---------- Phase 2 (2026-11-01): full-screen route playback in the monitor ---------- */
.dt-pb-stage,.dt-pb-panel{display:none}
@media (min-width:1024px){
body.dt-playback #dt-panel,body.dt-playback #selected-card,body.dt-playback .map-tools,body.dt-playback .map-note{display:none!important}
body.dt-monitor.dt-playback .dt-pb-stage{display:block;position:absolute;inset:0;z-index:3;background:#eef3f1}
body.dt-monitor.dt-playback .dt-pb-panel{display:flex}
.dt-pb-stage .dt-pb-canvas{position:absolute;inset:0;height:auto;margin:0;border:0;border-radius:0;background:#eef3f1}
.dt-pb-stage .dt-pb-canvas svg{width:100%;height:100%;display:block}
.dt-pb-route{stroke:#187f77}
.dt-pb-end{fill:#fff;stroke:#13665f;stroke-width:3}
.dt-pb-stop circle{fill:#d39a3b;stroke:#fff;stroke-width:2}
/* Stops stay amber; the highlighted one gets a teal ring (review r1). */
.dt-pb-stop.on circle{r:10;stroke:#13665f;stroke-width:3}
.dt-pb-stop.off{display:none}
/* One label style on the drawing and on Google: a pill, 13px/600, white on #315d5a. */
.dt-pb-label rect{fill:#315d5a}.dt-pb-label text{fill:#fff;font-size:13px;font-weight:600}
.dt-pb-stage .fw-map-pin{display:inline-block;padding:3px 11px;border-radius:999px;background:#315d5a;color:#fff;font-size:13px;font-weight:600;line-height:18px}
.dt-pb-stage .dt-pb-stop-pin{background:#d39a3b}.dt-pb-stage .dt-pb-stop-pin.on{box-shadow:0 0 0 3px #13665f}
.dt-pb-msg{position:absolute;inset:0;right:368px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#405357;font-size:16px}
/* The playback bar: content-width, capped like the phase-1 toolbar (16px from the panel, clear of the Google logo). */
.dt-pb-bar{position:absolute;z-index:3;bottom:16px;right:calc(340px + 28px);width:min(640px,calc(100% - 340px - 28px - 152px));box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:10px 16px 12px;background:#fff;border:1px solid #e3e9ea;border-radius:16px;box-shadow:0 10px 28px #14223533;color:#1a3034}
.dt-pb-track{display:flex;flex-direction:column}
.dt-pb-slider{width:100%;height:28px;margin:0;accent-color:#187f77;cursor:pointer}
.dt-pb-ends{display:flex;justify-content:space-between;font-size:13px;color:#5d6b6e}
.dt-pb-row{display:flex;align-items:center;gap:12px}
.dt-pb-play{width:56px;height:56px;border-radius:50%;border:0;background:#187f77;color:#fff;display:grid;place-items:center;flex:none;cursor:pointer;padding:0}
.dt-pb-play:focus-visible,.dt-pb-rates button:focus-visible{outline:3px solid #13665f;outline-offset:2px}
.dt-pb-now{display:flex;flex-direction:column;min-width:0;flex:1}
.dt-pb-clock{font-size:20px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.dt-pb-state{font-size:13px;font-weight:600;color:#405357}.dt-pb-state.moving{color:#13665f}.dt-pb-state.parked{color:#8a5f27}
.dt-pb-rates{display:grid;grid-template-columns:repeat(6,44px);gap:4px;flex:none}
.dt-pb-rates button{height:44px;border-radius:10px;border:1px solid #d5dddf;background:#fff;color:#405357;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.dt-pb-rates button[aria-pressed=true]{border-color:#13665f;background:#eaf5f2;color:#13665f;font-weight:700}
/* The playback panel in the «عربياتي» panel's place. */
.dt-pb-panel{flex-direction:column}
.dt-pb-panel::after{content:'';position:absolute;inset-inline:0;bottom:0;height:24px;background:linear-gradient(#fff0,#fff);pointer-events:none}
.dt-pb-head{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--dt-navy,#142235);color:#fff;min-height:56px;box-sizing:border-box}
.dt-pb-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;border:1px solid #ffffff40;border-radius:10px;background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex:none}
.dt-pb-back:hover{background:#ffffff1a}.dt-pb-back:focus-visible{outline:2px solid #5fd0c0}
.dt-pb-titles{min-width:0;display:flex;flex-direction:column}
.dt-pb-titles h2{margin:0;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-pb-live{font-size:13px;color:#b7c4d4}.dt-pb-live.moving{color:#7fe0a8}.dt-pb-live.parked{color:#f0c47e}
.dt-pb-scroll{flex:1;min-height:0;overflow-y:auto;padding:10px 12px 36px;display:flex;flex-direction:column;gap:10px}
.dt-pb-periodwrap{display:contents}
.dt-pb-periods{position:sticky;top:0;z-index:2;flex:none;box-shadow:0 -10px 0 #fff,0 6px 0 #fff}
.dt-pb-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #d5dddf;border-radius:10px;overflow:hidden}
.dt-pb-periods button{min-height:40px;border:0;background:#fff;color:#405357;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.dt-pb-periods button+button{border-inline-start:1px solid #d5dddf}
.dt-pb-periods button[aria-pressed=true]{background:#187f77;color:#fff}
.dt-pb-periods button:focus-visible{outline:2px solid #13665f;outline-offset:-3px}
.dt-pb-range{display:flex;flex-direction:column;gap:8px;margin-top:-2px}
.dt-pb-range label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#405357}
.dt-pb-range input{min-height:40px;border:1px solid #d5dddf;border-radius:10px;padding:0 10px;font:inherit;font-size:16px;color:#1a3034;background:#fff}
.dt-pb-range input:focus-visible{outline:2px solid #13665f;outline-offset:1px}
.dt-pb-range input[aria-invalid=true]{border-color:#b4432f}.dt-pb-range input[aria-invalid=true]:focus,.dt-pb-range input[aria-invalid=true]:focus-visible{outline:2px solid #b4432f;outline-offset:1px}
.dt-pb-times{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-pb-error{margin:0;font-size:13px;color:#b4432f}
.dt-pb-apply{min-height:40px}
.dt-pb-window{margin:0;font-size:13px;font-weight:600;color:#13665f}
.dt-pb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dt-pb-tile{padding:8px 10px;border:1px solid #e3e9ea;border-radius:12px;display:flex;flex-direction:column;gap:2px}
.dt-pb-tile span{font-size:13px;color:#5d6b6e}
.dt-pb-tile strong{font-size:16px;font-weight:700;color:#1a3034}
.dt-pb-tile strong .dt-nw{white-space:nowrap;font-size:inherit;color:inherit}
.dt-pb-note,.dt-pb-readings,.dt-pb-empty{margin:0;font-size:13px;color:#5d6b6e}
.dt-pb-options{display:flex;flex-wrap:wrap;gap:6px 16px}
.dt-pb-options label{display:flex;align-items:center;gap:6px;min-height:32px;font-size:13px;color:#1a3034;cursor:pointer}
.dt-pb-options input{width:16px;height:16px;accent-color:#187f77;margin:0}
.dt-pb-h{margin:4px 0 0;font-size:13px;font-weight:700;color:#1a3034}.dt-pb-h span{color:#5d6b6e;font-weight:500}
.dt-pb-stops{list-style:none;margin:0;padding:0;border-block:1px solid #eef2f3}
.dt-pb-stops li+li{border-top:1px solid #eef2f3}
.dt-pb-stops button{width:100%;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:4px 10px;min-height:44px;padding:6px 4px;border:0;background:none;font:inherit;text-align:start;cursor:pointer;color:#1a3034}
.dt-pb-stops button:hover,.dt-pb-stops button[aria-current=true]{background:#fbf3e8}
.dt-pb-stops button:focus-visible{outline:2px solid #13665f;outline-offset:-2px}
.dt-pb-stop-time{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.dt-pb-stop-dur{font-size:13px;color:#8a5f27}
.dt-pb-stop-place{font-size:13px;color:#405357;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-pb-stop-place .dt-unknown{display:none}
.dt-pb-stop-place .geographic-location[dir=ltr],.dt-pb-stop-place .geographic-location:not([data-location-request]){display:none}
.dt-pb-stop-place .geographic-location[dir=ltr]~.dt-unknown{display:inline}
.dt-pb-retry{min-height:44px;align-self:flex-start}
}

/* ---------- Phase 3 (2026-11-01): the reports page (desktop-reports.mjs), iTrack's Report page mirrored for RTL ----------
   Also applied while printing: paper is narrower than 1024px, and the print block below only takes away what paper
   does not need. */
@media (min-width:1024px),print{
body.dt-on #view-reports:not([hidden]){display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:20px;align-items:start;padding:16px 20px 32px;box-sizing:border-box}
body.dt-on #view-reports>*{grid-column:2;min-width:0;margin:0 0 16px!important}
body.dt-on #view-reports>#dt-rep-menu{grid-column:1;grid-row:1/span 12;position:sticky;top:68px;max-height:calc(100vh - 84px);display:flex;flex-direction:column;margin:0!important}
/* The classic panels show one at a time, from the menu; the page strip belongs to «ساعات الحركة» only. */
body.dt-on #view-reports:not([data-dt-show=fleet])>#fleet-report-centre,body.dt-on #view-reports:not([data-dt-show=travel])>#gps-travel-report,body.dt-on #view-reports:not([data-dt-show=poi])>#poi-visits,
body.dt-on #view-reports:not([data-dt-show=hours])>#report-summary,body.dt-on #view-reports:not([data-dt-show=hours])>.report-grid,body.dt-on #view-reports:not([data-dt-show=hours])>section.surface:has(#report-table),body.dt-on #view-reports:not([data-dt-show=hours])>.quiet-note{display:none!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show=hours])) .page-heading{display:none}
body.dt-on #view-reports[data-dt-show] .dt-rep-bar,body.dt-on #view-reports[data-dt-show] .dt-rep-msg,body.dt-on #view-reports[data-dt-show] .dt-rep-cards,body.dt-on #view-reports[data-dt-show] .dt-rep-table{display:none}
body.dt-on #view-reports[data-dt-show] .report-grid{display:grid}
/* Menu */
.dt-rep-menu{background:#fff;border:1px solid var(--dt-line);border-radius:14px;padding:12px 8px 16px;box-sizing:border-box;overflow:hidden}
/* The list scrolls inside the card; a 16px fade at its bottom says there is more (review r1). */
.dt-rep-menu-list{flex:1;min-height:0;overflow-y:auto;padding-bottom:4px}
.dt-rep-menu-list.cut{-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),#0000);mask-image:linear-gradient(#000 calc(100% - 16px),#0000)}
.dt-rep-menu-title{margin:0 8px 8px;font-size:16px;font-weight:700;color:var(--dt-ink)}
.dt-rep-cat+.dt-rep-cat{margin-top:8px;padding-top:8px;border-top:1px solid #eef2f3}
.dt-rep-cat h3{margin:0 8px 4px;font-size:13px;font-weight:700;color:var(--dt-muted)}
.dt-rep-cat ul{list-style:none;margin:0;padding:0}
.dt-rep-cat button{width:100%;display:flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;padding:6px 10px;border:0;border-radius:10px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--dt-ink);text-align:start;cursor:pointer}
.dt-rep-cat button:hover{background:#f2f6f5}
.dt-rep-cat button[aria-current=page]{background:#eaf5f2;color:var(--dt-teal-ink);box-shadow:inset -3px 0 0 var(--dt-teal)}
.dt-rep-cat button:focus-visible{outline:2px solid var(--dt-teal-ink);outline-offset:-2px}
.dt-rep-classic{flex:none;margin-inline-start:auto;padding:2px 8px;border-radius:999px;background:#eaf5f2;color:#13665f;font-size:13px;font-weight:600;line-height:1.4}
.dt-rep-cat button[aria-current=page] .dt-rep-classic{background:#fff}
/* Header, filter bar, message */
.dt-rep-main{display:flex;flex-direction:column;gap:12px}
.dt-rep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dt-rep-head h2{margin:0;font-size:20px;font-weight:700;color:var(--dt-ink)}
.dt-rep-sub{margin:4px 0 0;font-size:13px;color:var(--dt-muted)}
.dt-rep-actions{display:flex;gap:8px;flex-wrap:wrap}.dt-rep-actions [hidden]{display:none}
.dt-rep-actions .button{min-height:40px}
.dt-rep-print-head{display:none}
.dt-rep-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:12px 14px;background:#fff;border:1px solid var(--dt-line);border-radius:14px}
.dt-rep-field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--dt-muted)}
.dt-rep-field[hidden]{display:none}
.dt-rep-field select,.dt-rep-field input,.dt-rep-settings input{min-height:40px;box-sizing:border-box;border:1px solid #d5dddf;border-radius:10px;padding:0 10px;background:#fff;font:inherit;font-size:13px;font-weight:500;color:var(--dt-ink)}
.dt-rep-vehicle select{min-width:200px;max-width:260px}
.dt-rep-field select:focus-visible,.dt-rep-field input:focus-visible,.dt-rep-settings input:focus-visible{outline:2px solid var(--dt-teal-ink);outline-offset:1px}
.dt-rep-mode,.dt-rep-presets{display:flex;border:1px solid #d5dddf;border-radius:10px;overflow:hidden;align-self:flex-end}
.dt-rep-mode button,.dt-rep-presets button{min-height:38px;padding:0 12px;border:0;background:#fff;font:inherit;font-size:13px;font-weight:600;color:#405357;cursor:pointer;white-space:nowrap}
.dt-rep-mode button+button,.dt-rep-presets button+button{border-inline-start:1px solid #d5dddf}
.dt-rep-mode button[aria-pressed=true],.dt-rep-presets button[aria-pressed=true]{background:var(--dt-teal);color:#fff}
.dt-rep-mode button:focus-visible,.dt-rep-presets button:focus-visible{outline:2px solid var(--dt-teal-ink);outline-offset:-3px}
.dt-rep-show{min-height:40px;min-width:88px}
.dt-rep-settings{flex-basis:100%;font-size:13px;color:var(--dt-muted)}
.dt-rep-settings summary{display:list-item;cursor:pointer;font-size:13px;font-weight:600;color:var(--dt-ink);line-height:28px}
.dt-rep-echo{flex-basis:100%;margin:-2px 0 0;font-size:13px;font-weight:600;color:var(--dt-ink)}.dt-rep-echo:empty{display:none}
.dt-rep-settings>div{display:flex;flex-wrap:wrap;gap:10px 12px;padding-top:8px}
.dt-rep-settings label{display:flex;flex-direction:column;gap:4px;font-weight:600}
.dt-rep-settings input{width:140px}
.dt-rep-msg{margin:0;font-size:13px;font-weight:600;min-height:0}.dt-rep-msg:empty{display:none}
.dt-rep-msg.warn{padding:8px 12px;border-radius:10px;background:#fbefe8;color:#9a3b22}.dt-rep-msg.info{color:#8a5f27}
/* Cards */
.dt-rep-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dt-rep-cards:empty{display:none}
.dt-rep-card{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--dt-line);border-radius:14px;min-width:0}
.dt-rep-card span{font-size:13px;color:var(--dt-muted)}
.dt-rep-card strong{font-size:24px;font-weight:700;color:var(--dt-ink);font-variant-numeric:tabular-nums}
.dt-rep-card small{font-size:13px;color:#8a5f27}
/* Table: sticky header inside its own scroll box, sort buttons, pager */
.dt-rep-table{background:#fff;border:1px solid var(--dt-line);border-radius:14px;overflow:hidden}.dt-rep-table:empty{display:none}
.dt-rep-tablewrap{max-height:max(240px,calc(100vh - 360px));overflow:auto}
.dt-rep-tablewrap:focus-visible{outline:2px solid var(--dt-teal-ink);outline-offset:-2px}
.dt-rep-tablewrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;color:var(--dt-ink)}
/* Compressed for 1280 (review r1): 10px side padding (eleven summary columns), two-line headers with the unit under the name, 64px minimum. */
.dt-rep-tablewrap th{position:sticky;top:0;z-index:2;background:#f4f7f6;border-bottom:1px solid var(--dt-line);padding:0;text-align:start;vertical-align:bottom}
.dt-rep-tablewrap th button,.dt-rep-th{display:flex;align-items:flex-end;gap:2px;width:100%;min-height:44px;padding:6px 10px;box-sizing:border-box;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--dt-ink);text-align:start}
.dt-rep-tablewrap th button{cursor:pointer}
.dt-rep-hl{display:block;max-width:84px;white-space:normal;line-height:1.3}
.dt-rep-unit{display:block;white-space:nowrap}
.dt-rep-tablewrap th button:focus-visible{outline:2px solid var(--dt-teal-ink);outline-offset:-3px}
.dt-rep-unit{font-weight:500;color:var(--dt-muted)}
.dt-rep-arrow{flex:none;font-size:12px;line-height:1.3;color:#9aa8ab}
.dt-rep-tablewrap th[aria-sort=ascending] .dt-rep-arrow,.dt-rep-tablewrap th[aria-sort=descending] .dt-rep-arrow{color:var(--dt-teal-ink)}
.dt-rep-tablewrap td{padding:10px;min-width:40px;border-bottom:1px solid #eef2f3;white-space:nowrap;font-variant-numeric:tabular-nums}
.dt-rep-tablewrap tbody tr:hover td{background:#f8fbfa}
.dt-rep-tablewrap td.dt-rep-text{white-space:normal;min-width:72px}
.dt-rep-tablewrap th,.dt-rep-tablewrap td{min-width:64px;box-sizing:border-box}
/* Horizontal scroll is only a fallback: the vehicle column stays put and a fade marks the far side. */
.dt-rep-tablewrap .dt-rep-first{position:sticky;inset-inline-start:0;z-index:1;background:#fff;box-shadow:inset -1px 0 0 #eef2f3}
.dt-rep-tablewrap th.dt-rep-first{z-index:3;background:#f4f7f6}
.dt-rep-tablewrap tbody tr:hover td.dt-rep-first{background:#f8fbfa}
.dt-rep-scrollbox{position:relative}
.dt-rep-scrollbox.cut::after{content:'';position:absolute;top:0;bottom:0;left:0;width:24px;background:linear-gradient(to right,#fff,#fff0);pointer-events:none;z-index:4}
.dt-rep-pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--dt-line);font-size:13px;color:#405357}
.dt-rep-total{font-weight:700;color:var(--dt-ink)}
.dt-rep-pager label{display:flex;align-items:center;gap:6px}
.dt-rep-pager select{min-height:36px;border:1px solid #d5dddf;border-radius:8px;padding:0 8px;font:inherit;font-size:13px;background:#fff}
.dt-rep-pages{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.dt-rep-pages .button{min-height:36px}
.dt-rep-state{margin:0;padding:32px 16px;text-align:center;font-size:16px;color:#405357}
.dt-rep-state.error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 16px;color:#9a3b22}.dt-rep-state.error p{margin:0}
.dt-rep-notes{padding:8px 14px 12px;font-size:13px;color:var(--dt-muted);border-top:1px solid #eef2f3}
.dt-rep-notes summary{cursor:pointer;font-weight:600;min-height:28px}
.dt-rep-notes ul{margin:6px 0 0;padding-inline-start:18px}
.dt-rep-classic-note{margin:0;font-size:13px;color:var(--dt-muted)}
/* Drivers' accounts (dt6, rework r1 — Khattat layout): two-level header, end-aligned tabular numbers, sticky driver (start)
   and closing balance (end) with a 24px fade, a one-line amber «مشتركة» pill, a collapsed «إزاي اتحسب؟». */
.dt-rep-link{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;font:inherit;font-size:16px;font-weight:700;color:#13665f;text-decoration:none;white-space:nowrap;cursor:pointer;text-align:start}
.dt-rep-link:hover{color:#0d4d47}.dt-rep-chev{font-size:16px;color:var(--dt-muted)}
.dt-rep-link:focus-visible{outline:2px solid #13665f;outline-offset:2px;border-radius:4px}
.dt-rep-muted{color:var(--dt-muted);font-size:13px}
.dt-rep-tablewrap .dt-rep-wide{min-width:150px;max-width:190px}
.dt-rep-flag{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#9a3b22;white-space:normal;max-width:220px}
.dt-rep-flag.soft{color:#8a5f27;font-weight:500}
.dt-rep-sub2{display:block;font-size:12px;color:var(--dt-muted);white-space:nowrap}
.dt-rep-status{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;background:#f1f4f4;color:#405357}
.dt-rep-status.approved{background:#eaf5f2;color:#13665f}.dt-rep-status.pending{background:#fbf3e8;color:#8a5f27}.dt-rep-status.rejected{background:#fbefe8;color:#9a3b22}
.dt-rep-grouped .dt-rep-tablewrap th,.dt-rep-scrollbox.grouped .dt-rep-tablewrap th{vertical-align:bottom}
.dt-rep-scrollbox.grouped tr.dt-rep-grow th.dt-rep-grp{height:30px;padding:0 8px;text-align:center;font-size:13px;font-weight:600;color:#405357;white-space:nowrap;border-bottom:1px solid var(--dt-line);border-inline-start:1px solid #e3e9ea}
.dt-rep-scrollbox.grouped tr.dt-rep-srow th{top:31px}
.dt-rep-scrollbox.grouped th button,.dt-rep-scrollbox.grouped .dt-rep-th{font-size:13px;font-weight:600;white-space:nowrap;padding-inline:8px}
.dt-rep-scrollbox.grouped th.dt-rep-num button,.dt-rep-scrollbox.grouped th.dt-rep-num .dt-rep-th{justify-content:flex-end;text-align:end}
.dt-rep-hnote{display:block;font-size:11px;font-weight:500;color:#8a5f27}
.dt-rep-scrollbox.grouped .dt-rep-hl{display:flex;flex-direction:column;align-items:flex-end}
.dt-rep-scrollbox.grouped th.dt-rep-text .dt-rep-hl{align-items:flex-start}
.dt-rep-tablewrap td.dt-rep-num{min-width:76px;padding-inline:8px;text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt-rep-tablewrap td.dt-rep-num .dt-rep-flag{text-align:end;margin-inline-start:auto}
.dt-rep-tablewrap .dt-rep-drv-name{min-width:96px;white-space:nowrap}
.dt-rep-scrollbox.grouped .dt-rep-first{box-shadow:-6px 0 8px -6px rgba(16,40,40,.22)}
.dt-rep-veh{display:block;max-width:150px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-rep-pill{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.dt-rep-pill.warn{background:#fbf3e8;color:#8a5f27}
.dt-rep-pill.rej{display:inline-block;margin-top:4px;font-size:13px;font-weight:600;background:#fbe9e5;color:#b4432f;cursor:help}
.dt-rep-tablewrap .dt-rep-closing{position:sticky;inset-inline-end:0;z-index:1;background:#fff;border-inline-start:1px solid #cfd8d9}
.dt-rep-tablewrap th.dt-rep-closing{z-index:3;background:#f4f7f6}
.dt-rep-tablewrap tbody tr:hover td.dt-rep-closing{background:#f8fbfa}
.dt-rep-tablewrap td.dt-rep-closing{font-size:16px;font-weight:700;min-width:180px;white-space:normal}
.dt-rep-tablewrap td.dt-rep-closing .dt-rep-flag{max-width:none}
/* Khattat r2: the edge fade shows whenever more columns sit past the end; while the closing column is pinned there, the fade
   moves beside it instead of covering it. */
.dt-rep-scrollbox.grouped.stuck::after{display:none}
.dt-rep-scrollbox.grouped.stuck .dt-rep-closing::after{content:'';position:absolute;top:0;bottom:0;inset-inline-start:-25px;width:24px;background:linear-gradient(to right,#fff,#fff0);pointer-events:none}
.dt-rep-scrollbox.grouped.stuck th.dt-rep-closing::after{background:linear-gradient(to right,#f4f7f6,#f4f7f600)}
.dt-rep-bal{font-variant-numeric:tabular-nums}.dt-rep-bal.neg{color:#9a3b22}
.dt-rep-side{display:block;font-size:12px;font-weight:500;color:var(--dt-muted);white-space:nowrap}
.dt-rep-bal.neg+.dt-rep-side{color:#9a3b22}
.dt-rep-bal.big{font-size:24px;font-weight:700}
td .dt-rep-bal.big{font-size:16px}
.dt-rep-how{margin:10px 12px 0;font-size:13px;color:#405357}
.dt-rep-how summary{cursor:pointer;font-weight:600;min-height:28px;line-height:28px;color:#13665f;white-space:nowrap}
.dt-rep-how[open]{padding:8px 12px;background:#f8fbfa;border:1px solid #e3e9ea;border-radius:10px}
.dt-rep-formula{margin:6px 0;font-size:16px;font-weight:600;color:var(--dt-ink)}
.dt-rep-how ul{margin:4px 0 0;padding-inline-start:18px;line-height:1.7}
.dt-rep-statusline{margin:8px 12px 8px;font-size:12px;color:var(--dt-muted);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.dt-rep-cards.drivers{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dt-rep-cards.drivers .dt-rep-card{padding:10px 12px}.dt-rep-cards.drivers .dt-rep-card span{font-size:12px;line-height:1.4}
.dt-rep-cards.drivers .dt-rep-card strong{font-size:20px}
.dt-rep-cards.drivers .dt-rep-card strong.dt-rep-card-2{margin-top:2px}.dt-rep-cards.drivers .dt-rep-card small{font-size:12px;color:var(--dt-muted)}
.dt-rep-detail{padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}
.dt-rep-detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.dt-rep-detail-head h3{margin:0;font-size:18px}
.dt-rep-detail-bal{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end}.dt-rep-detail-bal>small{font-size:13px;color:var(--dt-muted)}
.dt-rep-detail-sum{margin:0;font-size:14px;color:#405357}
.dt-rep-detail h4{margin:6px 0 0;font-size:14px;font-weight:700;color:var(--dt-ink)}
.dt-rep-moves td.n{text-align:end}.dt-rep-moves tr.opening td,.dt-rep-moves tr.closing td{background:#f8fbfa;font-weight:600}
.dt-rep-rejected{margin:0;padding-inline-start:18px;font-size:13px;color:#405357;line-height:1.7}
.dt-rep-mini{border-collapse:collapse;font-size:13px;width:auto;min-width:420px}
.dt-rep-mini th,.dt-rep-mini td{padding:8px 12px;border-bottom:1px solid #eef2f3;text-align:start}
.dt-rep-mini th{background:#f4f7f6;font-weight:700}
/* What a classic panel cannot honour (dt5, Khattat r2): a callout, one fact per line. */
.dt-rep-callout{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;padding:10px 12px;background:#eaf5f2;border:1px solid #9fc9c2;border-inline-start:3px solid #187f77;border-radius:10px;font-size:13px;line-height:1.7;color:#1a3034}
.dt-rep-callout[hidden]{display:none}
.dt-rep-callout-icon{flex:none;margin-top:4px;color:#187f77}
.dt-rep-callout strong{font-weight:700}
.dt-rep-callout ul{list-style:none;margin:0;padding:0;font-weight:600}
.dt-rep-print-time{margin-inline-start:12px}
.dt-rep-print-cap{display:block;margin-top:6px;padding-inline-start:8px;border-inline-start:3px solid #b4432f;font-size:12px;font-weight:700;color:#1a3034}
}
/* Print / PDF: the report only, every row, no menu, rail, top bar or controls. */
@media print{
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])){display:block!important;background:#fff!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) :is(.sidebar,.topbar,.skip-link,.page-heading,footer,.app-footer,#demo-banner,#demo-storage-note,#error,#toast,#dt-rep-menu,.dt-rep-bar,.dt-rep-actions,.dt-rep-msg,.dt-rep-pager,.dt-rep-notes,.dt-rep-sub){display:none!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) #view-reports{display:block!important;padding:0!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) #view-reports>:not(#dt-rep-main){display:none!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) #dt-rep-main{display:flex!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-print-head{display:block!important;margin:0 0 8px;font-size:12px;color:#405357}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-cards{display:grid!important;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-card{border:1px solid #cfd8d9;border-radius:6px;padding:6px 8px}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-card strong{font-size:16px}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-table{border:0;overflow:visible}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap{max-height:none!important;overflow:visible!important}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap :is(th,td),body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap .dt-rep-first{position:static;box-shadow:none}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap th{background:#eef2f2;border-bottom:1px solid #cfd8d9}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap thead{display:table-header-group}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-scrollbox::after{display:none}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-closing::after{display:none}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap :is(th button,.dt-rep-th){min-height:0;padding:4px 6px;font-size:11px}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-arrow{display:none}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap td{padding:3px 6px;height:24px;font-size:11px;white-space:normal;border-bottom:1px solid #cfd8d9}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-main{font-size:11px}
body.dt-on:has(#view-reports:not([hidden]):not([data-dt-show])) .dt-rep-tablewrap tr{break-inside:avoid}
}

/* ---------- Phase 4 (2026-11-01): the devices table (desktop-devices.mjs), iTrack's Device Setting page mirrored for RTL.
   The table, header, pager and states reuse the reports page's .dt-rep-* rules. ---------- */
@media (min-width:1024px){
body.dt-on #view-devices:not([data-dt-show=classic])>#device-management{display:none}
body.dt-on:has(#view-devices:not([hidden]):not([data-dt-show=classic])) .page-heading{display:none}
.dt-dev{margin:16px 20px 0;display:flex;flex-direction:column;gap:12px}
.dt-dev [hidden]{display:none!important}
.dt-dev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dt-dev-head h2{margin:0;font-size:20px;font-weight:700;color:var(--dt-ink)}
.dt-dev-sub{margin:4px 0 0;font-size:13px;color:var(--dt-muted)}
.dt-dev-actions{display:flex;gap:8px;flex-wrap:wrap}.dt-dev-actions .button{min-height:40px}
.dt-dev-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:12px 14px;background:#fff;border:1px solid var(--dt-line);border-radius:14px}
.dt-dev-search input{min-width:260px}
.dt-dev-count{font-weight:500}
.dt-dev-table .dt-rep-tablewrap{max-height:max(280px,calc(100vh - 330px))}
.dt-dev-table th.dt-dev-num,.dt-dev-table td.dt-dev-num{min-width:44px;width:44px;color:var(--dt-muted);font-variant-numeric:tabular-nums}
.dt-dev-table .dt-dev-ops{width:1%;min-width:0;white-space:nowrap}
.dt-dev-opsbox{display:inline-grid;grid-template-columns:36px 36px;gap:6px}
.dt-dev-slot{visibility:hidden}
.dt-dev-icon{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #d5dddf;border-radius:10px;background:#fff;color:var(--dt-ink);cursor:pointer;font:inherit;font-size:18px;font-weight:700;line-height:1}
.dt-dev-icon:hover{background:#f2f6f5}.dt-dev-icon:focus-visible{outline:2px solid var(--dt-teal-ink);outline-offset:1px}
.dt-dev-icon[aria-expanded=true]{background:#eaf5f2;border-color:var(--dt-teal-ink)}
.dt-dev-imei{font-size:13px;color:var(--dt-ink);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dt-dev-speed{font-size:16px;font-weight:600;color:var(--dt-ink);font-variant-numeric:tabular-nums}
.dt-dev-default{font-size:13px;color:#5d6b6e}
.dt-dev-muted{color:var(--dt-muted)}
/* The monitor's colours (.dt-dot / .dt-age): moving green, parked amber, offline red; no age threshold. */
.dt-dev-state{display:inline-flex;align-items:center;gap:6px;font-weight:600}.dt-dev-state i{width:8px;height:8px;border-radius:50%;flex:none}
.dt-dev-state.moving{color:#13665f}.dt-dev-state.moving i{background:#2fae6a}.dt-dev-state.parked{color:#8a5f27}.dt-dev-state.parked i{background:#d39a3b}.dt-dev-state.nosignal{color:#b4432f}.dt-dev-state.nosignal i{background:#c2453a}
.dt-dev-age{display:block;font-size:13px;color:var(--dt-muted)}
.dt-dev-menu{position:fixed;z-index:60;min-width:200px;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:6px;background:#fff;border:1px solid var(--dt-line);border-radius:12px;box-shadow:0 12px 32px #14223533;display:flex;flex-direction:column}
.dt-dev-menu button{min-height:40px;padding:0 12px;border:0;border-radius:8px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--dt-ink);text-align:start;cursor:pointer}
.dt-dev-menu button:hover,.dt-dev-menu button:focus-visible{background:#eaf5f2;outline:none}
.dt-dev-back .button{display:inline-flex;gap:6px;align-items:center;min-height:40px}
.dt-dev-empty{display:flex;flex-direction:column;align-items:center;gap:12px}.dt-dev-empty p{margin:0}
/* A table body cut by its card fades at the bottom above the pager. */
.dt-dev-table .dt-rep-scrollbox.vcut::before{content:'';position:absolute;inset-inline:0;bottom:0;height:16px;background:linear-gradient(#fff0,#fff);pointer-events:none;z-index:4}
/* The existing device dialog on the desktop: paired fields on one grid, 44px controls, sharing aligned with the fields. */
body.dt-on .dm-dialog .dm-form-grid{align-items:start;gap:16px}
body.dt-on .dm-dialog .dm-form-grid :is(input,select){height:44px;min-height:44px}
body.dt-on .dm-dialog .dm-shares{border:0;padding:0;margin:16px 0}
body.dt-on .dm-dialog .dm-shares legend{padding:0;font-weight:600}
}