@import './list-swipe.css';
/* List scope: fonts and the final live widget rules, independent of map/detail. */
@font-face{font-family:Roboto;src:url('./assets/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Roboto;src:url('./assets/roboto-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Roboto;src:url('./assets/roboto-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:LynqPlateUI;src:url('./assets/FE-FONT-UI.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Material Icons';src:url('./assets/material-icons.ttf') format('truetype');font-weight:400;font-display:block}
.units-panel{width:clamp(354px,33vw,368px);font-family:Roboto,Arial,'Segoe UI',sans-serif;--fleet-primary:#0f728f;--fleet-primary-soft:rgba(15,114,143,.12);font-synthesis:weight style}
.units-panel .material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.units-panel .fleet-list-title{display:flex;align-items:center;gap:10px;flex:0 0 54px;min-height:54px;padding:19px 18px 10px}
.units-panel .fleet-list-title-text{flex:1;min-width:0;font:900 18px/24px Roboto,Arial,sans-serif;letter-spacing:-.035em;margin:0;color:#0f172a}
.list-viewport{position:relative;display:flex;flex:1;min-height:0;overflow:hidden}
.units-panel .list-scroll{flex:1;min-width:0;padding-top:5px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;scrollbar-gutter:auto}
.units-panel .arrival-table{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed}
.units-panel .unit-row{display:table-row;width:100%;padding:0;border:0;border-bottom:1px solid rgba(226,232,240,.95);background:#fff;box-shadow:none;text-align:left;cursor:pointer;transition:background 180ms ease}
.units-panel .unit-row:hover{background:#f8fafc}
.units-panel .unit-row.selected{background:#f2f7ff;box-shadow:none;border-left:0}
.units-panel .unit-row td{padding:0;border:0;background:transparent}
.units-panel .unit-row:focus-visible{outline:2px solid #8bb1f3;outline-offset:-2px}
.units-panel .fleet-modern-row{overflow:hidden}
.units-panel .fleet-modern-vehicle-halo{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:visible;isolation:isolate}
.units-panel .fleet-modern-vehicle-halo::before{filter:blur(2.8px)}
.units-panel .fleet-modern-unit{font-synthesis:none}
.units-panel .fleet-modern-status-line{border:0;background:#f2f4f7;color:#475467}
.units-panel .fleet-modern-status{background:transparent;color:inherit}
.units-panel .status-moving .fleet-modern-status-line{background:#dcfce7;color:#15803d}
.units-panel .status-offline .fleet-modern-status-line{background:#f2f4f7;color:#667085}
.units-panel .status-alarm .fleet-modern-status-line{background:#fee4e2;color:#b42318}
.units-panel .fleet-modern-location{color:#667085}
.units-panel .fleet-modern-location.is-geofence{color:#175cd3}
.units-panel .fleet-modern-svg-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px;width:14px;height:14px}
.units-panel .fleet-modern-svg-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.units-panel .fleet-modern-svg-icon svg path{fill:currentColor;stroke:none}
.units-panel .fleet-modern-svg-icon svg circle{fill:#fff;stroke:none}
.units-panel .arrival-tag-active{position:absolute;z-index:3;right:0;width:20px;border-radius:6px;background:#2563eb;overflow:hidden;pointer-events:none}
.units-panel .arrival-tag-text{position:absolute;left:50%;transform:translateX(-50%);writing-mode:vertical-rl;white-space:nowrap;color:#eff6ff;font:700 11px/normal Roboto,Arial,sans-serif;padding:4px 2px}
@media(min-width:961px) and (max-width:980px){.units-panel{width:344px}}
@media(max-width:960px){.units-panel{width:auto}.units-panel .mobile-handle{position:absolute;top:0;left:calc(50% - 45px);z-index:5}.units-panel .fleet-list-title{flex-basis:84px;padding:32px 20px 12px;min-height:84px}.units-panel .fleet-list-title-text{font-size:22px;line-height:28px}}

/* Verbatim live halo rules; only scope/row selector adapted. */
.units-panel .fleet-modern-vehicle-halo {
  position: relative !important;

  width: 48px !important;
  height: 54px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
  isolation: isolate !important;
}

.units-panel .fleet-modern-vehicle-halo::before {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 36px !important;
  height: 36px !important;

  transform: translate(-50%, -50%) !important;

  border-radius: 999px !important;

  background:
    radial-gradient(
      circle,
      rgba(15, 114, 143, 0.36) 0%,
      rgba(15, 114, 143, 0.24) 38%,
      rgba(15, 114, 143, 0.08) 66%,
      rgba(15, 114, 143, 0.00) 82%
    ) !important;

  box-shadow:
    0 0 14px rgba(15, 114, 143, 0.26),
    0 0 4px rgba(15, 114, 143, 0.14) !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

.units-panel .fleet-modern-vehicle-halo::after {
  display: none !important;
  content: none !important;

  width: 0 !important;
  height: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
}

.units-panel .fleet-modern-vehicle-img,
.units-panel .fleet-modern-vehicle-fallback {
  position: relative !important;
  z-index: 2 !important;

  width: 32px !important;
  height: 46px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(0 1px 2px rgba(15, 23, 42, 0.22)) !important;
}

.units-panel .unit-row.status-moving .fleet-modern-vehicle-halo::before {
  background:
    radial-gradient(
      circle,
      rgba(34, 197, 94, 0.42) 0%,
      rgba(34, 197, 94, 0.28) 38%,
      rgba(34, 197, 94, 0.10) 66%,
      rgba(34, 197, 94, 0.00) 82%
    ) !important;

  box-shadow:
    0 0 15px rgba(34, 197, 94, 0.30),
    0 0 5px rgba(34, 197, 94, 0.18) !important;
}

.units-panel .unit-row.status-stopped .fleet-modern-vehicle-halo::before {
  background:
    radial-gradient(
      circle,
      rgba(245, 158, 11, 0.42) 0%,
      rgba(245, 158, 11, 0.28) 38%,
      rgba(245, 158, 11, 0.10) 66%,
      rgba(245, 158, 11, 0.00) 82%
    ) !important;

  box-shadow:
    0 0 15px rgba(245, 158, 11, 0.30),
    0 0 5px rgba(245, 158, 11, 0.18) !important;
}

.units-panel .unit-row.status-offline .fleet-modern-vehicle-halo::before {
  background:
    radial-gradient(
      circle,
      rgba(100, 116, 139, 0.38) 0%,
      rgba(100, 116, 139, 0.24) 38%,
      rgba(100, 116, 139, 0.09) 66%,
      rgba(100, 116, 139, 0.00) 82%
    ) !important;

  box-shadow:
    0 0 13px rgba(100, 116, 139, 0.24),
    0 0 4px rgba(100, 116, 139, 0.14) !important;
}

.units-panel .unit-row.status-alarm .fleet-modern-vehicle-halo::before {
  background:
    radial-gradient(
      circle,
      rgba(239, 68, 68, 0.44) 0%,
      rgba(239, 68, 68, 0.28) 38%,
      rgba(239, 68, 68, 0.10) 66%,
      rgba(239, 68, 68, 0.00) 82%
    ) !important;

  box-shadow:
    0 0 15px rgba(239, 68, 68, 0.30),
    0 0 5px rgba(239, 68, 68, 0.18) !important;
}

/* The parking shield shares the identity line without covering the plate. */
.units-panel .fleet-modern-identity-line{box-sizing:border-box}
.fleet-parking-indicator{display:inline-flex;width:18px;height:18px;flex:0 0 18px;color:#2563eb}
.fleet-parking-indicator[hidden]{display:none}
.fleet-parking-indicator[data-state="breached"]{color:#dc2626}
.fleet-parking-indicator svg{display:block;width:100%;height:100%}
.units-panel .fleet-modern-identity-line>.fleet-parking-indicator{box-sizing:content-box;margin-left:auto;padding-left:8px}
.units-panel .fleet-modern-identity-line>.fleet-parking-indicator svg{width:18px;height:18px;stroke:none}

/* Local movement has no green route status. */
.status-maneuvering .fleet-modern-status,.status-pending .fleet-modern-status{color:#64748b;background:#f1f5f9}

/* Fleet vehicle/list polish: keep this delta self-contained for live releases. */
.units-panel .fleet-arrival-caption{color:#758594;font-weight:400}
.units-panel .fleet-arrival-hour{color:#0f728f;font-size:12px;font-weight:750;font-variant-numeric:tabular-nums;margin-left:3px}
.units-panel .fleet-modern-updated.fleet-modern-updated{display:flex!important;align-items:center;justify-content:flex-end;gap:4px}
.units-panel .fleet-report-refresh{display:inline-flex;width:12px;height:12px;flex:0 0 12px}
.units-panel .fleet-report-refresh svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.units-panel .fleet-modern-vehicle-img{object-fit:contain}
.units-panel .fleet-unit-detail-open.fleet-unit-detail-open{
 box-sizing:border-box;width:40px;height:44px;padding:8px 6px;border:0;
 border-radius:14px;background:#edf2f5;background-clip:content-box;color:#758594;
}
.units-panel .unit-row.selected .fleet-unit-detail-open.fleet-unit-detail-open{background-color:#cceaf6;color:#0f728f}
@media(hover:hover){
 .units-panel .fleet-unit-detail-open.fleet-unit-detail-open:hover{background-color:#dcecf2;color:#0f728f}
}
.units-panel .fleet-unit-detail-open.fleet-unit-detail-open:focus-visible{outline:2px solid #0f728f;outline-offset:-2px}
/* End Fleet vehicle/list polish. */

/* Fleet vehicle legibility: compact artwork and a visible status halo. */
.units-panel .unit-row .fleet-modern-vehicle-halo::before{
 width:44px!important;height:44px!important;filter:blur(1.25px)!important;
 background:radial-gradient(circle,rgba(var(--fleet-vehicle-status,15,114,143),.32) 0%,rgba(var(--fleet-vehicle-status,15,114,143),.23) 38%,rgba(var(--fleet-vehicle-status,15,114,143),.10) 70%,rgba(var(--fleet-vehicle-status,15,114,143),0) 100%)!important;
 box-shadow:0 0 5px rgba(var(--fleet-vehicle-status,15,114,143),.13)!important;
}
.units-panel .unit-row.status-moving .fleet-modern-vehicle-halo{--fleet-vehicle-status:34,197,94}
.units-panel .unit-row.status-stopped .fleet-modern-vehicle-halo{--fleet-vehicle-status:245,158,11}
.units-panel .unit-row.status-offline .fleet-modern-vehicle-halo{--fleet-vehicle-status:100,116,139}
.units-panel .unit-row.status-alarm .fleet-modern-vehicle-halo{--fleet-vehicle-status:239,68,68}
.units-panel .fleet-modern-vehicle-img,
.units-panel .fleet-modern-vehicle-fallback{width:26px!important;height:40px!important;filter:drop-shadow(0 .75px .65px rgba(15,23,42,.27))!important}
/* End Fleet vehicle legibility. */

/* Fleet vehicle button: recessed state fill, confined to list and detail. */
.units-panel .unit-row,.fleet-unit-popup__header{
 --fleet-vehicle-well:radial-gradient(circle at 48% 36%,rgba(var(--fleet-vehicle-tone,100,116,139),.35),rgba(var(--fleet-vehicle-tone,100,116,139),.19) 56%,rgba(var(--fleet-vehicle-tone,100,116,139),.07) 100%),linear-gradient(145deg,#e7edf0,#fff);
 --fleet-vehicle-inset:inset 0 3px 6px #263c4c48,inset 0 1px 2px #263c4c20,inset 0 -3px 3px #ffffffef,0 1px 1px #ffffffd9;
}
.units-panel .unit-row .fleet-vehicle-detail-button.fleet-unit-detail-open{
 position:static!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 52px!important;width:52px!important;min-width:52px!important;max-width:52px!important;height:52px!important;min-height:52px!important;max-height:52px!important;
 padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;
 background:var(--fleet-vehicle-well)!important;background-clip:border-box!important;box-shadow:var(--fleet-vehicle-inset)!important;
 overflow:visible!important;cursor:pointer;touch-action:manipulation;
}
.units-panel .unit-row .fleet-vehicle-detail-button .fleet-modern-vehicle-halo::before,
.units-panel .unit-row .fleet-vehicle-detail-button .fleet-modern-vehicle-halo::after{display:none!important;content:none!important}
.units-panel .unit-row .fleet-vehicle-detail-button:focus-visible{outline:2px solid #0f728f!important;outline-offset:3px!important}
@media(hover:hover){.units-panel .unit-row .fleet-vehicle-detail-button:hover{box-shadow:inset 0 4px 7px #263c4c50,inset 0 1px 2px #263c4c20,inset 0 -3px 3px #fff,0 1px 1px #fff!important}}
.units-panel .unit-row .fleet-vehicle-detail-button:active{box-shadow:inset 0 5px 8px #263c4c60,inset 0 1px 2px #263c4c25,inset 0 -1px 2px #fff!important}
.units-panel.units-panel .unit-row[data-detail-row="selected"]{
 background:radial-gradient(ellipse at 8% 25%,rgba(var(--fleet-vehicle-tone,100,116,139),.20),rgba(var(--fleet-vehicle-tone,100,116,139),.08) 55%,rgba(var(--fleet-vehicle-tone,100,116,139),0) 100%),#fff!important;
}
.fleet-unit-popup__header .fleet-detail-header-tint{
 position:absolute!important;display:block!important;inset:-16px -16px -6px!important;z-index:-1!important;pointer-events:none!important;
 border-radius:20px 20px 0 0!important;
 -webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent);
 background:radial-gradient(ellipse at 9% 20%,rgba(var(--fleet-vehicle-tone,100,116,139),.24),rgba(var(--fleet-vehicle-tone,100,116,139),.10) 55%,rgba(var(--fleet-vehicle-tone,100,116,139),0) 100%)!important;
}
/* End Fleet vehicle button. */