/* CDX palette and system typography: the map is the primary surface. */
:root {
  --ink:#263445; --muted:#59697b; --blue:#3152c9; --cyan:#00a8c0;
  --line:#e0e6ed; --paper:#f7f9fc; --panel:rgba(255,255,255,.96);
  --shadow:0 5px 24px #26344514,0 1px 4px #2634450a;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink); font-size:16px; font-synthesis:none;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); }
button,input,select { font:inherit; color:inherit; }
button,a,input,select { touch-action:manipulation; }
button { cursor:pointer; border:0; }
button:disabled { cursor:not-allowed; opacity:.45; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
button:hover { background-color:#eef2f8; }
svg:not(.leaflet-zoom-animated) { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
h1,h2,h3,p { margin:0; }
h2 { font-size:20px; font-weight:650; letter-spacing:-.4px; }
h3 { font-size:17px; font-weight:600; }
a { color:inherit; }
button span[data-icon] { display:inline-flex; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 26px; background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:1000; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; flex-shrink:0; }
.brand img { width:110px; height:auto; }
.brand>span { font-size:20px; font-weight:500; border-left:1px solid #d8e0e8; padding-left:13px; }
.navigation { display:flex; align-items:center; gap:6px; }
.nav-item { display:flex; align-items:center; justify-content:center; gap:9px; position:relative; min-height:46px; padding:0 17px; background:transparent; color:var(--muted); border-radius:12px; font-size:15px; font-weight:550; white-space:nowrap; }
.nav-item.active { background:#edf1fd; color:var(--blue); }
.nav-item i { width:7px; height:7px; border-radius:50%; background:#c16613; position:absolute; top:7px; right:8px; }
.header-actions { display:flex; gap:7px; align-items:center; }
.header-actions select { min-height:44px; background:#f2f5f8; border:0; border-radius:10px; padding:0 10px; font-size:14px; }
.header-actions .active { color:var(--blue); background:#edf1fd; }
.icon-button { min-width:44px; height:44px; display:inline-grid; place-items:center; background:transparent; border-radius:10px; }
.dashboard { height:calc(100dvh - 76px); min-height:570px; position:relative; isolation:isolate; }
.map-panel,.map-area,#map { position:absolute; inset:0; }
#map { z-index:1; background:#e9efe9; }
/* Soften cartography only; controls, route and attribution retain full contrast. */
.leaflet-tile-pane { filter:saturate(.23) brightness(1.035) contrast(.96); }
.leaflet-container { font-family:inherit; }
.leaflet-control-attribution { font-size:11px!important; color:#455362; background:#fffffff0!important; }
.leaflet-control-zoom { border:1px solid #dce2e9!important; border-radius:13px!important; overflow:hidden; box-shadow:var(--shadow)!important; margin:185px 24px 0 0!important; }
.leaflet-control-zoom a { width:46px!important; height:44px!important; line-height:44px!important; font-size:24px!important; color:var(--ink)!important; border-bottom-color:var(--line)!important; }
.sidebar { position:absolute; z-index:600; top:24px; left:24px; width:326px; max-height:calc(100% - 60px); display:flex; flex-direction:column; border:1px solid #fff; border-radius:20px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(16px); overflow:hidden; }
.sidebar-heading { display:flex; align-items:center; justify-content:space-between; padding:14px 14px 4px 22px; }
.sidebar-heading .icon-button { color:var(--muted); }
.vehicle-card { margin:8px 14px 0; padding:13px 10px; display:flex; align-items:center; gap:14px; text-align:left; background:#f1f5fa; border-radius:13px; flex-shrink:0; width:calc(100% - 28px); }
.car-preview { width:51px; height:72px; display:grid; place-items:center; flex-shrink:0; }
.car-preview img { width:31px; height:auto; filter:drop-shadow(0 3px 2px #1d31444d); }
.vehicle-copy { min-width:0; flex:1; }
.vehicle-copy h3 { font-size:18px; }
.vehicle-copy>span { display:block; font-size:14px; color:#21714c; margin-top:5px; }
.vehicle-copy>small { display:block; font-size:13px; color:var(--muted); margin-top:5px; }
.vehicle-chevron { color:var(--blue); }
#side-content { padding:18px 22px 5px; overflow:auto; overscroll-behavior:contain; }
.device-footer { padding:12px 22px 18px; color:var(--muted); font-size:13px; flex-shrink:0; }
.device-footer span:before { content:''; width:6px; height:6px; display:inline-block; background:#b98739; border-radius:50%; margin:0 7px 2px 0; }
.trip-preview { display:grid; gap:18px; margin:0 0 19px; position:relative; }
.trip-preview:before { content:''; position:absolute; left:6px; top:12px; bottom:14px; width:1px; background:#cbd5e3; }
.trip-stop { display:flex; align-items:center; gap:13px; position:relative; }
.stop-dot { border:2px solid #8595aa; border-radius:50%; width:13px; height:13px; background:white; flex-shrink:0; }
.trip-stop:last-child .stop-dot { border-color:var(--blue); background:var(--blue); }
.trip-stop strong { font-size:15px; display:block; font-weight:500; }
.trip-stop time { font-size:13px; color:var(--muted); display:block; margin-top:3px; }
.primary,.secondary { border-radius:11px; min-height:46px; padding:11px 15px; font-size:15px; font-weight:600; }
.primary { background:var(--blue); color:#fff; }
.primary:hover { background:#2444b5; }
.secondary { background:#eff3f8; color:var(--blue); }
.full { width:100%; margin-top:10px; }
.text-button { min-height:44px; padding:9px 0; color:var(--blue); background:none; font-size:14px; }
.text-button svg { width:16px; margin-right:7px; }
.map-caption { position:absolute; top:28px; left:calc(50% + 120px); transform:translateX(-50%); z-index:450; display:flex; gap:9px; align-items:center; background:#fffffff0; border:1px solid #fff; padding:10px 15px; border-radius:30px; box-shadow:0 1px 8px #2634450a; font-size:14px; }
.map-caption-source { color:#835b19; background:#f7ebd6; padding:3px 7px; border-radius:6px; font-size:12px; }
.map-tools { position:absolute; right:24px; top:24px; display:flex; flex-direction:column; gap:2px; padding:3px; background:#fffffff5; border:1px solid #fff; border-radius:14px; box-shadow:var(--shadow); z-index:500; }
.map-tools .selected { color:var(--blue); background:#edf1fd; }
.map-position { position:absolute; z-index:480; right:24px; bottom:190px; padding:14px 19px; background:var(--panel); border:1px solid white; box-shadow:var(--shadow); border-radius:17px; text-align:center; }
.speed-reading { display:flex; align-items:baseline; justify-content:center; gap:5px; }
.speed-reading strong { font-size:38px; line-height:1.1; font-weight:600; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.speed-reading>span { color:var(--muted); font-size:13px; }
#map-state { display:block; margin-top:7px; font-size:13px; font-weight:500; }
.vehicle-marker { background:none; border:0; }
.vehicle-body { width:70px; height:70px; display:grid; place-items:center; }
.vehicle-body img { display:block; width:30px; height:auto; filter:drop-shadow(0 4px 3px #213b6370) drop-shadow(0 0 3px white); }
.vehicle-label { position:absolute; top:72px; left:50%; transform:translateX(-50%); display:block; background:white; border-radius:8px; color:var(--ink); border:1px solid #d7e0ed; padding:5px 9px; font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 2px 5px #26344512; }
.endpoint { background:#fff; border:3px solid var(--blue); border-radius:50%; }
.fence-label { background:#ffffffee; border:0; box-shadow:none; font-size:13px; color:#375572; padding:5px 9px; border-radius:8px; }
.journey-panel { position:absolute; z-index:550; left:374px; right:24px; bottom:28px; max-width:1000px; background:var(--panel); backdrop-filter:blur(16px); border:1px solid #fff; border-radius:20px; padding:16px 22px 18px; box-shadow:var(--shadow); }
.journey-heading { display:flex; align-items:center; gap:20px; margin-bottom:10px; }
.journey-heading h2 { font-size:17px; }
.journey-heading p { color:var(--muted); font-size:13px; margin-top:4px; }
.journey-summary { display:flex; align-items:center; gap:14px; margin-left:auto; }
.journey-summary strong { font-size:18px; font-weight:600; white-space:nowrap; }
.journey-summary small { font-size:14px; font-weight:400; color:var(--muted); }
.summary-divider { width:1px; height:18px; background:#d4dce5; }
.journey-heading>.icon-button { color:var(--blue); }
.journey-stats { display:none; }
body[data-view=history] .journey-stats { display:flex; gap:28px; padding-bottom:14px; }
.journey-stats span { font-size:13px; color:var(--muted); margin-right:8px; }
.journey-stats strong { font-size:15px; font-weight:600; }
.journey-stats small { font-size:13px; font-weight:400; }
body[data-view=history] .map-position { bottom:228px; }
.playback { display:flex; gap:16px; align-items:center; }
.play-button { width:48px; height:48px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.play-button:hover { background:#2444b5; }
.play-button svg { width:21px; height:21px; }
.timeline { flex:1; min-width:0; }
.timeline input { display:block; width:100%; margin:0; height:28px; accent-color:var(--blue); cursor:pointer; }
.timeline>div { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.timeline strong { font-weight:600; color:var(--blue); }
.speed-button { min-width:44px; min-height:44px; background:#edf1f7; border-radius:10px; font-size:15px; }
.section-top { display:flex; align-items:center; justify-content:space-between; margin:20px 0 16px; }
.section-top h3 { font-size:15px; }
.section-top button { font-size:14px; background:none; color:var(--blue); }
.muted { color:var(--muted); font-size:14px; line-height:1.6; }
.event-row { display:flex; gap:11px; padding:15px 0; border-bottom:1px solid var(--line); }
.event-icon { flex-shrink:0; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#eef2fc; color:var(--blue); }
.event-icon.speed,.event-icon.battery { color:#94601b; background:#fbefdd; }
.event-icon svg { width:18px; height:18px; }
.event-copy { min-width:0; flex:1; }
.event-copy strong { font-size:14px; display:block; line-height:1.4; font-weight:600; }
.event-copy p { font-size:14px; color:var(--muted); margin:5px 0; overflow-wrap:anywhere; }
.event-copy time,.acknowledged { font-size:13px; color:var(--muted); }
.ack-button { display:block; min-height:44px; font-size:14px; background:none; color:var(--blue); padding:5px 0; }
.fence-card { padding:17px 0; border-bottom:1px solid var(--line); }
.fence-card h3 { font-size:16px; overflow-wrap:anywhere; }
.fence-card p { color:var(--muted); font-size:14px; margin:7px 0; }
.fence-actions { display:flex; justify-content:space-between; gap:5px; }
.fence-actions button { min-height:44px; background:none; padding:7px 0; color:var(--blue); font-size:14px; }
.fence-actions .danger { color:#a34b44; }
.detail-list { font-size:14px; margin:0 0 18px; }
.detail-list div { display:flex; gap:14px; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }
.detail-list dt { color:var(--muted); }
.detail-list dd { margin:0; text-align:right; }
.feature-list { list-style:none; margin:10px 0; padding:0; font-size:14px; }
.feature-list li { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.feature-list span { color:#236b51; }
.feature-list .pending { color:var(--muted); }
.settings-form { margin:18px 0; }
label { display:block; font-size:15px; font-weight:500; margin:15px 0; }
input:not([type=range]) { display:block; border:1px solid #c9d3df; border-radius:9px; width:100%; min-height:46px; padding:10px 12px; margin-top:8px; color:var(--ink); background:#fff; }
dialog { border:1px solid #fff; border-radius:22px; padding:24px; max-width:430px; width:calc(100% - 32px); max-height:calc(100dvh - 50px); color:var(--ink); box-shadow:0 25px 100px #26344538; }
dialog::backdrop { background:#26344540; backdrop-filter:blur(4px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dialog-heading h2 { font-size:24px; }
.dialog-heading button { font-size:28px; }
dialog p { font-size:15px; line-height:1.65; margin:17px 0; }
.coordinates-form { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
details { margin:16px 0 6px; }
summary { cursor:pointer; min-height:44px; display:list-item; padding:12px 0; font-size:14px; color:var(--muted); }
.map-empty { position:absolute; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:21px; padding-left:340px; text-align:center; background:#edf2f0ed; }
.map-empty svg { width:48px; height:48px; color:var(--blue); }
.map-empty h2 { max-width:280px; line-height:1.4; }
.map-notice { position:absolute; z-index:560; top:85px; left:380px; right:92px; padding:13px; font-size:14px; color:#6f4b1e; background:#fff7e9; border:1px solid #efddbc; border-radius:10px; }
.floating-button { position:absolute; top:24px; left:24px; z-index:600; display:flex; align-items:center; gap:10px; background:white; padding:14px 17px; border-radius:13px; box-shadow:var(--shadow); font-size:16px; }
body.panel-collapsed .sidebar { display:none; }
body.panel-collapsed .journey-panel { left:24px; }
body.panel-collapsed .map-caption { left:50%; }
body.picking-zone #map { cursor:crosshair; }
body.picking-zone .sidebar,body.picking-zone .journey-panel,body.picking-zone .map-position { visibility:hidden; }
#toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:15px 22px; border-radius:13px; box-shadow:var(--shadow); z-index:2000; max-width:min(520px,88vw); font-size:15px; line-height:1.5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.connection.error { width:auto; height:auto; margin:0; clip:auto; overflow:visible; top:76px; right:20px; padding:10px 15px; background:#fff0ed; color:#9f3e31; border-radius:8px; z-index:1500; }
[hidden] { display:none!important; }
.login-page { min-height:100dvh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(100%,400px); padding:32px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.login-card h1 { font-size:28px; margin:32px 0 10px; }
.login-card form { margin-top:24px; }
.login-error { color:#a23b31; font-size:14px; line-height:1.5; }
@media(min-width:1550px) { .journey-panel { left:50%; transform:translateX(-35%); right:auto; width:min(900px,calc(100% - 430px)); } body.panel-collapsed .journey-panel { left:50%; transform:translateX(-50%); } }
@media(max-width:1100px) {
  .topbar { padding:0 18px; gap:15px; }
  .brand img { width:88px; }
  .brand>span { font-size:18px; }
  .nav-item { gap:7px; padding:0 11px; font-size:14px; }
  .header-actions { gap:2px; }
  .sidebar { left:16px; top:16px; width:292px; }
  .journey-panel { left:324px; right:16px; padding:15px; }
  .journey-heading { gap:8px; }
  .journey-summary { gap:8px; }
  .journey-summary strong,.journey-heading h2 { font-size:16px; }
  .journey-heading p { font-size:12px; }
  .map-position { right:16px; }
  .map-caption { left:calc(50% + 95px); }
}
@media(max-width:860px) {
  .topbar { height:66px; padding:0 16px; }
  .brand img { width:92px; }
  .header-actions .icon-button { min-width:42px; }
  .navigation { position:fixed; bottom:0; left:0; right:0; height:72px; padding:5px 10px max(5px,env(safe-area-inset-bottom)); justify-content:space-around; gap:4px; background:#fffffffa; backdrop-filter:blur(14px); border-top:1px solid #dce3eb; }
  .nav-item { flex-direction:column; flex:1; gap:5px; min-height:56px; font-size:12px; padding:5px; border-radius:10px; }
  .nav-item svg { width:23px; height:23px; }
  .dashboard { height:calc(100dvh - 138px); min-height:510px; }
  .sidebar { top:14px; left:14px; width:278px; max-height:calc(100% - 170px); border-radius:17px; }
  .sidebar-heading { padding:7px 9px 0 17px; }
  .sidebar-heading h2 { font-size:18px; }
  .vehicle-card { margin:5px 10px 0; padding:8px; width:calc(100% - 20px); gap:10px; }
  .car-preview { width:39px; height:56px; }
  .car-preview img { width:24px; }
  .vehicle-copy h3 { font-size:16px; }
  .vehicle-copy>span { font-size:14px; }
  .vehicle-copy>small { font-size:12px; margin-top:3px; }
  #side-content { padding:10px 17px 0; }
  body[data-view=tracking] #side-content { display:none; }
  .device-footer { padding:10px 17px 13px; font-size:12px; }
  .map-caption { display:none; }
  .map-tools { right:14px; top:14px; }
  .leaflet-control-zoom { margin:172px 14px 0 0!important; }
  .journey-panel { left:14px; right:14px; bottom:27px; padding:12px 15px 14px; border-radius:17px; }
  .journey-heading { margin-bottom:6px; gap:10px; }
  .journey-heading h2 { font-size:16px; }
  .journey-heading p { font-size:12px; }
  .journey-summary strong { font-size:16px; }
  .journey-summary small { font-size:13px; }
  .journey-heading>.icon-button { min-width:38px; }
  .map-position { bottom:183px; right:14px; padding:11px 14px; border-radius:14px; }
  .speed-reading strong { font-size:30px; }
  #map-state { font-size:12px; }
  .playback { gap:12px; }
  .play-button { height:46px; width:46px; }
  .timeline>div { font-size:12px; }
  .map-empty { padding:130px 30px 150px; }
  .map-empty h2 { font-size:20px; }
  body[data-view=history] .map-position { bottom:222px; }
  body[data-view=fences] .sidebar,body[data-view=alerts] .sidebar,body[data-view=device] .sidebar { max-height:calc(100% - 42px); }
  body[data-view=fences] .vehicle-card,body[data-view=alerts] .vehicle-card,body[data-view=device] .vehicle-card { display:none; }
  body[data-view=fences] .journey-panel,body[data-view=alerts] .journey-panel,body[data-view=device] .journey-panel { display:none; }
  body[data-view=fences] .map-position,body[data-view=alerts] .map-position,body[data-view=device] .map-position { bottom:30px; }
  .map-notice { top:auto; bottom:190px; left:14px; right:14px; }
  .floating-button { top:14px; left:14px; }
  body.panel-collapsed .journey-panel { left:14px; }
  #toast { bottom:90px; }
}
@media(max-width:400px) {
  .topbar { padding:0 12px; gap:8px; }
  .brand { gap:8px; }
  .brand img { width:79px; }
  .brand>span { font-size:17px; padding-left:8px; }
  .header-actions { gap:0; }
  .header-actions select { max-width:80px; font-size:13px; padding:0 5px; }
  .header-actions .icon-button { min-width:40px; }
  .sidebar { width:calc(100% - 92px); }
  .vehicle-chevron { display:none; }
  .journey-summary { gap:6px; }
  .journey-summary strong { font-size:15px; }
  .journey-summary small { font-size:12px; }
  .journey-heading { gap:5px; }
  .journey-heading>.icon-button { min-width:32px; }
  .journey-heading p { max-width:115px; }
  .playback { gap:8px; }
  .timeline>div { font-size:11px; }
  .timeline>div strong { display:none; }
  .journey-stats { gap:15px!important; }
  .journey-stats span { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }