.fleet-integrated-header{display:none!important} #detail#detail .fleet-detail-vehicle-well{border-radius:0!important;background:radial-gradient(ellipse,rgba(var(--fleet-vehicle-tone,141,158,177),.14),transparent 70%)!important;box-shadow:none!important;animation:none!important;border:0!important} #detail#detail .fleet-detail-vehicle-well::before,#detail#detail .fleet-detail-vehicle-well::after{content:none!important} @media(max-width:599px) and (min-height:501px){ html.fleet-phone-portrait:root{--fleet-shell-height:calc(56px + env(safe-area-inset-top,0px))!important;--fleet-nav-bottom-space:min(var(--fleet-nav-inset),8px)!important;--fleet-bottom-nav-height:calc(64px + var(--fleet-nav-bottom-space))!important} html.fleet-phone-portrait #fleetShell .fleet-integrated-header{display:flex!important;position:fixed!important;inset:0 0 auto!important;height:var(--fleet-shell-height)!important;padding:env(safe-area-inset-top,0px) 16px 0!important;box-sizing:border-box!important;align-items:center!important;justify-content:space-between!important;background:#fff!important;z-index:65!important;pointer-events:auto!important} .fleet-integrated-brand{display:block!important;width:clamp(96px,28vw,112px)!important;height:32px!important;object-fit:contain!important;object-position:left center!important;flex:0 0 auto!important} html.fleet-phone-portrait #fleetShell .fleet-integrated-header{gap:8px!important} .fleet-integrated-actions{display:flex;align-items:center;flex:0 0 auto;gap:0} html.fleet-phone-portrait #fleetShell .fleet-integrated-actions .fleet-mobile-shortcut{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:10px;background:transparent;color:#537589;cursor:pointer;touch-action:manipulation} html.fleet-phone-portrait #fleetShell .fleet-integrated-actions .fleet-mobile-shortcut[hidden]{display:none!important} .fleet-integrated-actions .fleet-mobile-shortcut>.material-icons{font-size:25px} .fleet-integrated-actions .fleet-mobile-shortcut>svg{display:block;width:25px;height:25px} .fleet-integrated-actions button:focus-visible{outline:2px solid #1294a3;outline-offset:-3px} :is(#fleetShell,#fleetMobileSheet) .fleet-menu-title{margin:0;min-width:0;color:#15333d;font:600 20px/28px Roboto,Arial,sans-serif;letter-spacing:-.3px} :is(#fleetShell,#fleetMobileSheet) .fleet-menu-header{min-height:44px;padding:0 4px 8px} .fleet-integrated-bell{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:0!important;border:0!important;border-radius:10px!important;background:transparent!important;color:#102b3b!important;position:relative!important;cursor:pointer!important} .fleet-integrated-bell .material-icons{font-size:27px!important} .fleet-integrated-bell.has-important-alert::after{content:''!important;position:absolute!important;right:10px!important;top:8px!important;width:6px!important;height:6px!important;border-radius:50%!important;background:#bd2a44!important;border:2px solid #fff!important} html.fleet-phone-portrait #fleetShell .fleet-bottom-tab-mark{background:transparent!important;height:30px!important;width:44px!important} html.fleet-phone-portrait #fleetShell .fleet-bottom-tab-mark>.material-icons{font-size:27px!important} html.fleet-phone-portrait .workspace .map-control-space{top:12px!important;max-height:calc(100% - 12px - var(--fleet-map-controls-bottom))!important} html.fleet-phone-portrait .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right{top:12px!important} #fleetMobileSheet#fleetMobileSheet.is-active{left:0!important;right:0!important;border:0!important;border-radius:20px 20px 0 0!important;box-shadow:0 -3px 16px #1637460b!important;--fleet-mobile-sheet-x-padding:16px!important} #fleetMobileSheet#fleetMobileSheet.is-active[data-layout='portrait'] .units-panel{height:var(--sheet-content-height)!important} #fleetMobileSheet#fleetMobileSheet.is-active .list-scroll{padding:0 0 12px!important} #fleetMobileSheet#fleetMobileSheet.is-active .list-viewport{margin:0!important} } #detail#detail#detail.has-swipe-detail{--swipe-detail-halo:radial-gradient(ellipse,rgba(var(--fleet-vehicle-tone,141,158,177),.14),transparent 70%)!important} #detail#detail#detail .fleet-swipe-metrics{background:#f0f7f8!important;color:#087c91!important} @media(max-width:599px) and (min-height:501px){ html.fleet-phone-portrait #fleetShell .fleet-integrated-header[hidden],html.fleet-phone-portrait #fleetShell .fleet-integrated-bell[hidden]{display:none!important} html.fleet-phone-portrait .workspace #map.fleet-map-controls.fleet-map-controls .maplibregl-ctrl-top-right{top:auto!important;bottom:var(--fleet-map-controls-bottom)!important;justify-content:flex-end!important} html.fleet-phone-portrait:root:has(#fleetShell.is-backend-space){--fleet-shell-height:env(safe-area-inset-top,0px)!important} } /* A single row system: identity | swipe cue + original vehicle | live reading. */ .workspace{--fleet-map-font:Roboto,Arial,sans-serif!important} @media(min-width:600px){ .units-panel.units-panel{width:360px!important;max-width:calc(100% - 24px)!important} #fleetMobileSheet#fleetMobileSheet.is-active{left:12px!important;right:auto!important;width:360px!important;max-width:calc(100% - 24px)!important} #fleetMobileSheet#fleetMobileSheet.is-active .units-panel{width:100%!important;max-width:none!important} } .units-panel.units-panel .fleet-list-title-text{font-size:18px!important;line-height:24px!important} #fleetMobileSheet#fleetMobileSheet.is-active .fleet-list-title{--sheet-title-height:68px;padding:20px 12px 4px!important} #fleetMobileSheet#fleetMobileSheet.is-active .fleet-list-title-text{font-size:18px!important;line-height:24px!important} .units-panel .list-scroll,#fleetMobileSheet .list-scroll{background:#fff!important} .units-panel .arrival-tag-active{background:#0f728f} #unitList#unitList tr.unit-row{background:transparent!important;border-bottom:0!important} #unitList#unitList tr.unit-row>td{padding:6px 8px!important;border:0!important} #unitList#unitList tr.unit-row>td::after{content:none!important} #unitList#unitList .fleet-integrated-card{--card-paper:#f2f5f6;--card-field:#e6ecee;--card-ink:#576e7b;--swipe-progress:0;--card-field-width:156px;position:relative!important;isolation:isolate;overflow:hidden!important;border-radius:12px!important;background:var(--card-paper)!important;color:var(--card-ink);height:auto!important;min-height:0!important;box-shadow:none!important;touch-action:pan-y pinch-zoom;font-family:Roboto,Arial,sans-serif!important} #unitList#unitList .fleet-integrated-card[data-kind=moving],#unitList#unitList .fleet-integrated-card[data-kind=maneuvering]{--card-paper:#eaf6f0;--card-field:#c6e6da;--card-ink:#096c72} #unitList#unitList .fleet-integrated-card[data-kind=offline],#unitList#unitList .fleet-integrated-card[data-kind=alarm]{--card-paper:#fafbfc;--card-field:#f0f3f5;--card-ink:#b23b52} #unitList#unitList .fleet-integrated-card::before{content:'';position:absolute;z-index:-1;inset:0 0 0 auto;width:var(--card-field-width);background:var(--card-field);pointer-events:none;opacity:calc(1 - var(--swipe-progress));transition:opacity 220ms ease} /* Outline paints above the right field without changing row geometry. */ #unitList#unitList .selected .fleet-integrated-card{outline:1.5px solid #78b9b4;outline-offset:-1.5px} #unitList#unitList .fleet-integrated-row{position:relative!important;z-index:1;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr) 36px 100px!important;gap:8px!important;align-items:center!important;min-height:106px!important;height:auto!important;padding:12px!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;color:#15333d!important;font-family:Roboto,Arial,sans-serif!important;transform:translateX(var(--swipe-offset,0%));transition:transform 240ms cubic-bezier(.2,.75,.25,1);user-select:none;-webkit-user-select:none} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:27px!important} #unitList#unitList .fleet-integrated-row [hidden]{display:none!important} #unitList#unitList .fleet-integrated-row :is(.fleet-unit-detail-open,.fleet-modern-status-line,.fleet-modern-identity-separator,.fleet-modern-location .fleet-modern-svg-icon){display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:27px 19px 19px!important;gap:2px 6px!important;min-width:0!important;height:auto!important;overflow:hidden!important;align-items:center!important;opacity:calc(1 - var(--swipe-progress)*2);transition:opacity 180ms ease} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line{display:contents!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{grid-row:1!important;grid-column:1/-1!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:22px!important;font-weight:750!important;line-height:27px!important;letter-spacing:-.5px!important;color:#15333d!important;padding-right:18px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line>[role=img]{grid-row:1!important;grid-column:2!important;justify-self:end!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain{grid-row:2!important;grid-column:1/-1!important;display:flex!important;min-width:0!important;overflow:hidden!important} #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-plate-plain{grid-column:1!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font:450 13px/19px Roboto,Arial,sans-serif!important;letter-spacing:.2px!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important;color:#304e5a!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location{grid-row:3!important;grid-column:1!important;display:flex!important;min-width:0!important;overflow:hidden!important;padding:0!important;margin:0!important;line-height:19px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-main{position:static!important;display:flex!important;min-width:0!important;max-width:100%!important;padding:0!important;margin:0!important;overflow:hidden!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{font:400 12px/19px Roboto,Arial,sans-serif!important;color:#576e7b!important;overflow:hidden!important;white-space:nowrap!important;text-overflow:ellipsis!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated{grid-row:3!important;grid-column:2!important;display:flex!important;position:static!important;align-items:center!important;justify-content:flex-end!important;gap:3px!important;min-width:0!important;width:auto!important;max-width:100%!important;white-space:nowrap!important;font:400 10px/19px Roboto,Arial,sans-serif!important;color:#576e7b!important;margin:0!important;padding:0!important} #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-updated{grid-row:2!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated::before{content:none!important} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{grid-row:3;grid-column:2;justify-self:end;white-space:nowrap;font:400 10px/19px Roboto,Arial,sans-serif;color:#576e7b;font-variant-numeric:tabular-nums} #unitList#unitList .fleet-arrival-hour{font-weight:600;color:#087c86} #unitList#unitList .fleet-integrated-row .fleet-modern-left{grid-column:2!important;grid-row:1!important;position:relative!important;display:flex!important;align-items:center!important;width:36px!important;height:70px!important;min-width:0!important;background:transparent!important;border:0!important;border-left:1px solid #718d972c!important;box-shadow:none!important;overflow:visible!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left::before,#unitList#unitList .fleet-modern-vehicle-halo::before,#unitList#unitList .fleet-modern-vehicle-halo::after{content:none!important} #unitList#unitList .fleet-integrated-peek{position:relative;display:flex;align-items:center;justify-content:flex-start;flex:none;width:44px;height:64px;padding:0;margin:0;border:0;border-radius:6px;background:transparent;color:#587a80;cursor:pointer;touch-action:pan-y pinch-zoom} #unitList#unitList .fleet-integrated-peek:focus-visible{outline:2px solid #087c86;outline-offset:1px} #unitList#unitList .fleet-integrated-arrow{font-size:14px;flex:none;width:12px;opacity:calc(.8 - var(--swipe-progress));transition:opacity 180ms ease;pointer-events:none} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{position:relative!important;display:grid!important;place-items:center!important;flex:none!important;width:26px!important;height:54px!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;animation:none!important;overflow:visible!important;pointer-events:none} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-img{position:relative!important;display:block!important;width:23px!important;height:50px!important;max-width:none!important;max-height:none!important;object-fit:contain!important;opacity:1!important;filter:drop-shadow(0 1px 1px #17343b26)!important;transform:none!important} #unitList#unitList .fleet-primary-reading{grid-column:3;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right;justify-content:center;gap:3px;min-width:0;min-height:65px;color:var(--card-ink);font-variant-numeric:tabular-nums;opacity:calc(1 - var(--swipe-progress)*2);transition:opacity 180ms ease} #unitList#unitList .fleet-primary-line{display:flex;align-items:baseline;justify-content:flex-end;gap:3px;max-width:100%;width:100%} #unitList#unitList .fleet-primary-value{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 4px;font:700 28px/1.05 Roboto,Arial,sans-serif;letter-spacing:-.7px} #unitList#unitList .fleet-primary-duration-part{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap} #unitList#unitList .fleet-primary-number{font-size:22px;font-weight:650;letter-spacing:-.6px} #unitList#unitList .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:11px;font-weight:500;letter-spacing:0;white-space:nowrap} #unitList#unitList .fleet-primary-status{font-size:12px;line-height:15px;font-weight:500;max-width:100%;text-wrap:balance;overflow-wrap:anywhere} #unitList#unitList .fleet-primary-secondary{font-size:10px;line-height:13px;color:#576e7b;text-wrap:balance} #unitList#unitList .fleet-primary-icon{font-size:28px;line-height:30px;color:var(--card-ink)} #unitList#unitList .fleet-primary-reading[data-mode=icon] .fleet-primary-line{display:none} #unitList#unitList .is-private .fleet-integrated-peek{cursor:default} #unitList#unitList .is-private .fleet-integrated-arrow{visibility:hidden} /* The car follows the finger left; the same readings gain the full remaining width. */ #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{position:absolute;z-index:0;inset:35px 12px 9px 66px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;width:auto!important;background:transparent!important;color:var(--card-ink);pointer-events:none;opacity:var(--swipe-progress);transform:translateX(calc(14px*(1 - var(--swipe-progress))));transition:opacity 220ms ease,transform 220ms ease} #unitList#unitList .in-target-row .fleet-integrated-card>.fleet-swipe-metrics{right:27px} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-width:0;min-height:0;padding:0 4px;line-height:1.1} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric+.fleet-swipe-metric{border-left:1px solid #5a778526} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric[hidden]{display:none!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics[data-count="1"]{grid-template-columns:minmax(0,1fr)} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-metric{border:0!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-icon{display:none} #unitList#unitList .fleet-integrated-card .fleet-swipe-value{font:650 26px/1.05 Roboto,Arial,sans-serif;letter-spacing:-.5px;overflow-wrap:anywhere} #unitList#unitList .fleet-integrated-card .fleet-swipe-value.is-missing{font-size:16px;letter-spacing:0} #unitList#unitList .fleet-integrated-card .fleet-swipe-unit{font-size:11px;line-height:13px} #unitList#unitList .fleet-integrated-card .fleet-swipe-unit:empty{display:none} #unitList#unitList .fleet-integrated-card .fleet-swipe-label{font-size:10px;line-height:12px;margin-top:3px} #unitList#unitList .fleet-integrated-card [data-mode=offline] .fleet-swipe-value{font-size:22px} #unitList#unitList .fleet-integrated-card [data-mode=offline] .fleet-swipe-label{font-size:12px;line-height:15px} #unitList#unitList .fleet-integrated-reveal-heading{position:absolute;z-index:2;left:67px;right:20px;top:10px;display:flex;align-items:baseline;gap:8px;visibility:hidden;opacity:var(--swipe-progress);pointer-events:none;white-space:nowrap;overflow:hidden;transition:opacity 200ms ease} #unitList#unitList .fleet-integrated-reveal-name{font-size:15px;color:#15333d;overflow:hidden;text-overflow:ellipsis} #unitList#unitList .fleet-integrated-reveal-plate{font-size:11px;color:#576e7b;overflow:hidden;text-overflow:ellipsis} #unitList#unitList .is-revealed .fleet-integrated-reveal-heading{visibility:visible} #unitList#unitList .is-revealed .fleet-modern-left{border-color:transparent!important} #unitList#unitList .fleet-integrated-card.is-detail-ready::after{content:'Soltá para abrir';position:absolute;z-index:3;bottom:0;left:62px;right:14px;padding:2px;background:var(--card-paper);color:var(--card-ink);font:600 10px/12px Roboto,Arial,sans-serif;text-align:center;pointer-events:none} #unitList#unitList .fleet-integrated-card.is-dragging :is(.fleet-integrated-row,.fleet-modern-content,.fleet-primary-reading,.fleet-swipe-metrics,.fleet-integrated-reveal-heading,.fleet-integrated-arrow),#unitList#unitList .fleet-integrated-card.is-dragging::before{transition:none!important} @media(max-width:359px){ #unitList#unitList tr.unit-row>td{padding:6px 5px!important} #unitList#unitList .fleet-integrated-row{grid-template-columns:minmax(0,1fr) 30px 89px!important;gap:5px!important;padding:10px!important} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:23px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:20px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font-size:12px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{font-size:11px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated,#unitList#unitList .fleet-integrated-arrival{font-size:9px!important;gap:2px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:30px!important} #unitList#unitList .fleet-integrated-arrow{width:9px;font-size:12px} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-img{width:20px!important;height:44px!important} #unitList#unitList .fleet-primary-value{font-size:26px} #unitList#unitList .fleet-primary-number{font-size:20px} #unitList#unitList .fleet-primary-status{font-size:11px} #unitList#unitList .fleet-primary-secondary{font-size:9px} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{left:55px;right:10px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value{font-size:20px} #unitList#unitList .fleet-integrated-card .fleet-swipe-label{font-size:9px} #unitList#unitList .fleet-integrated-reveal-heading{left:58px} } @media(prefers-reduced-motion:reduce){#unitList#unitList .fleet-integrated-card *,#unitList#unitList .fleet-integrated-card::before{transition:none!important;animation:none!important}} #unitList#unitList .in-target-row .fleet-integrated-card{--card-field-width:171px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 3px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-number{font-size:26px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-duration-unit{font-size:10px} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value .fleet-primary-number{font-size:30px} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value .fleet-primary-duration-unit{font-size:15px} @media(max-width:359px){ #unitList#unitList .fleet-integrated-card{--card-field-width:134px} #unitList#unitList .in-target-row .fleet-integrated-card{--card-field-width:147px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value{gap:2px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-number{font-size:20px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-duration-unit{font-size:9px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-duration-part{gap:1px} } /* Paint the original asset directly in its moving anchor. It remains opaque on phones without a separate composited image layer. */ #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{background: url('./assets/car.webp') center / 23px 50px no-repeat!important} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-img{display:none!important} #unitList#unitList .fleet-primary-status,#unitList#unitList .fleet-primary-secondary{width:100%;text-align:right;text-wrap:wrap} @media(max-width:359px){#unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{background-size:20px 44px!important}} /* Arrival and update occupy different rows; a long arrival label must not constrain the plate beside the shorter report age. */ #unitList#unitList .has-integrated-arrival .fleet-modern-content{position:relative!important} #unitList#unitList .has-integrated-arrival .fleet-integrated-arrival{position:absolute;right:0;bottom:0} #unitList#unitList .has-integrated-arrival .fleet-modern-location{grid-column:1/-1!important;padding-right:82px!important} @media(max-width:359px){#unitList#unitList .has-integrated-arrival .fleet-modern-location{padding-right:74px!important}} /* Compact tablet/desktop proportions; phone geometry stays unchanged. */ @media(min-width:600px){ .units-panel.units-panel{width:312px!important} #fleetMobileSheet#fleetMobileSheet.is-active{width:312px!important} .units-panel.units-panel .fleet-list-title-text,#fleetMobileSheet#fleetMobileSheet.is-active .fleet-list-title-text{font-size:16px!important;line-height:22px!important} #fleetMobileSheet#fleetMobileSheet.is-active .fleet-list-title{--sheet-title-height:58px;padding:14px 10px 2px!important} .units-panel .arrival-tag-active{width:18px;border-radius:5px} .units-panel .arrival-tag-text{font-size:10px} #unitList#unitList tr.unit-row>td{padding:6px 7px!important} #unitList#unitList .fleet-integrated-card{--card-field-width:115px;border-radius:10px!important} #unitList#unitList .in-target-row .fleet-integrated-card{--card-field-width:126px} #unitList#unitList .fleet-integrated-row{grid-template-columns:minmax(0,1fr) 28px 76px!important;gap:3px!important;min-height:74px!important;padding:6px 8px!important;border-radius:10px!important} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:19px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-template-rows:21px 15px 15px!important;gap:1px 6px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:17px!important;line-height:21px!important;padding-right:16px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font-size:11px!important;line-height:15px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location,#unitList#unitList .fleet-integrated-row .fleet-modern-location-text{font-size:10px!important;line-height:15px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated,#unitList#unitList .fleet-integrated-arrival{font-size:9px!important;line-height:15px!important;gap:2px!important} #unitList#unitList .fleet-modern-updated svg{width:11px;height:11px} #unitList#unitList .has-integrated-arrival .fleet-modern-location{padding-right:73px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:28px!important;height:54px!important} #unitList#unitList .fleet-integrated-peek{height:48px;width:44px} #unitList#unitList .fleet-integrated-arrow{width:8px;font-size:11px} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:21px!important;height:42px!important;background-size:18px 40px!important} #unitList#unitList .fleet-primary-reading{min-height:50px;gap:2px} #unitList#unitList .fleet-primary-value{font-size:21px} #unitList#unitList .fleet-primary-number{font-size:17px} #unitList#unitList .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:9px} #unitList#unitList .fleet-primary-status{font-size:10px;line-height:12px} #unitList#unitList .fleet-primary-secondary{font-size:9px;line-height:11px} #unitList#unitList .fleet-primary-icon{font-size:21px;line-height:23px} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{inset:26px 8px 6px 50px} #unitList#unitList .in-target-row .fleet-integrated-card>.fleet-swipe-metrics{right:19px} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric{padding:0 3px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value,#unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-number{font-size:20px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value.is-missing{font-size:14px} #unitList#unitList .fleet-integrated-card .fleet-swipe-unit{font-size:10px;line-height:11px} #unitList#unitList .fleet-integrated-card .fleet-swipe-value .fleet-primary-duration-unit{font-size:9px} #unitList#unitList .fleet-integrated-card .fleet-swipe-label{font-size:9px;line-height:11px;margin-top:2px} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value .fleet-primary-number{font-size:23px} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value .fleet-primary-duration-unit{font-size:12px} #unitList#unitList .fleet-integrated-card [data-mode=offline] .fleet-swipe-value{font-size:17px} #unitList#unitList .fleet-integrated-card [data-mode=offline] .fleet-swipe-label{font-size:10.5px;line-height:13px} #unitList#unitList .fleet-integrated-reveal-heading{left:51px;right:15px;top:6px;gap:5px} #unitList#unitList .fleet-integrated-reveal-name{font-size:12px} #unitList#unitList .fleet-integrated-reveal-plate{font-size:10px} #unitList#unitList .fleet-integrated-card.is-detail-ready::after{left:48px;right:10px;font-size:9px;line-height:11px} } /* Compact headers retain the original full-height desktop panel and tablet stops. */ @media(min-width:600px){ #fleetMobileSheet:not(.is-active) .units-panel .fleet-list-title{height:48px!important;min-height:48px!important;flex-basis:48px!important;padding:6px 10px!important} #fleetMobileSheet#fleetMobileSheet#fleetMobileSheet.is-active:not([data-snap='0']) .fleet-list-title{height:58px!important;min-height:58px!important;max-height:58px!important;flex-basis:58px!important;padding:14px 10px 0!important} #fleetMobileSheet#fleetMobileSheet#fleetMobileSheet.is-active:not([data-snap='0']) .fleet-list-title-text{font-size:16px!important;line-height:22px!important} } /* All row surfaces have equal width; the geozone ribbon overlays the edge. */ #unitList#unitList .fleet-integrated-card{margin-right:0!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-main{flex:1 1 0!important;width:100%!important;overflow:hidden!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{display:block!important;min-width:0!important;max-width:100%!important;flex:1 1 0!important;text-overflow:ellipsis!important;overflow:hidden!important} /* Flat oval at the left, identity in the middle, readings behind a hairline. Keep the original car as an opaque background for reliable phone rendering. */ #unitList#unitList .fleet-integrated-card{--vehicle-oval:#d9e5ec} #unitList#unitList .fleet-integrated-card[data-kind=moving],#unitList#unitList .fleet-integrated-card[data-kind=maneuvering]{--vehicle-oval:#d0eee3} #unitList#unitList .fleet-integrated-card::before{content:none} #unitList#unitList .fleet-integrated-row{grid-template-columns:48px minmax(0,1fr) 82px!important;transform:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{grid-column:1!important;width:48px!important;height:64px!important;border:0!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-column:2!important;transform:translateX(calc(-8px * var(--swipe-progress)));transition:opacity 180ms ease,transform 220ms ease} #unitList#unitList .fleet-integrated-peek{width:48px;height:64px;justify-content:center;box-shadow:none;border:0;background:transparent;border-radius:999px} #unitList#unitList .fleet-integrated-arrow{display:none} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:48px!important;height:64px!important;border-radius:999px!important;background-color:var(--vehicle-oval)!important;box-shadow:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:20px!important} #unitList#unitList .fleet-primary-reading{position:relative;box-sizing:border-box;padding-left:4px} #unitList#unitList .fleet-primary-reading::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:1px;background:#49657529;pointer-events:none} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{left:74px} #unitList#unitList .fleet-integrated-reveal-heading{left:74px} @media(max-width:359px){ #unitList#unitList .fleet-integrated-row{grid-template-columns:42px minmax(0,1fr) 72px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:42px!important;height:56px!important} #unitList#unitList .fleet-integrated-peek{width:44px;height:56px;margin-left:-1px} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:42px!important;height:56px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:18px!important} #unitList#unitList .fleet-primary-reading{padding-left:3px} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics,#unitList#unitList .fleet-integrated-reveal-heading{left:62px} } @media(min-width:600px){ #unitList#unitList .fleet-integrated-row{grid-template-columns:40px minmax(0,1fr) 68px!important;column-gap:6px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:40px!important;height:54px!important} #unitList#unitList .fleet-integrated-peek{width:44px;height:54px;margin-left:-2px} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:40px!important;height:54px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:16px!important} #unitList#unitList .fleet-primary-reading{padding-left:2px} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics,#unitList#unitList .fleet-integrated-reveal-heading{left:60px} } /* Two equivalent cues for readings. The vehicle remains opaque and untouched. */ #unitList#unitList .fleet-integrated-arrow,#unitList#unitList .fleet-reading-arrow{display:block;position:absolute;z-index:2;left:1px;top:50%;width:10px;font-size:13px;line-height:16px;transform:translateY(-50%);opacity:.8;color:#4e6a74;pointer-events:none} #unitList#unitList .fleet-primary-reading{border:0;border-radius:0;background:transparent;padding:0 0 0 10px;font-family:inherit;cursor:pointer;touch-action:pan-y pinch-zoom} #unitList#unitList .fleet-reading-arrow{left:2px} #unitList#unitList .fleet-primary-reading:focus-visible{outline:2px solid #087c86;outline-offset:2px;border-radius:4px} #unitList#unitList .is-private .fleet-reading-arrow{visibility:hidden} #unitList#unitList .is-private .fleet-primary-reading{cursor:default} /* Opposite swipe reveals navigation in the same row, without another card. */ #unitList#unitList .fleet-integrated-card{--actions-progress:0;--row-open-progress:max(var(--swipe-progress),var(--actions-progress))} #unitList#unitList .fleet-integrated-row .fleet-modern-content{opacity:calc(1 - var(--row-open-progress)*2)!important;transform:translateX(calc(-8px * var(--swipe-progress) + 12px * var(--actions-progress)))} #unitList#unitList .fleet-primary-reading{opacity:calc(1 - var(--row-open-progress)*2)} #unitList#unitList .fleet-integrated-reveal-heading{opacity:var(--row-open-progress)} #unitList#unitList .is-actions-revealed .fleet-integrated-reveal-heading{visibility:visible} #unitList#unitList .fleet-row-actions{position:absolute;z-index:3;inset:34px 12px 10px 74px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:stretch;opacity:var(--actions-progress);visibility:hidden;transform:translateX(calc(-14px * (1 - var(--actions-progress))));transition:opacity 220ms ease,transform 220ms ease;pointer-events:none} #unitList#unitList .is-actions-revealed .fleet-row-actions{visibility:visible} #unitList#unitList .fleet-row-actions:not([inert]){pointer-events:auto} #unitList#unitList .fleet-row-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px;padding:3px 0;border:0;border-radius:7px;background:transparent;color:#234954;font:500 12px/15px Roboto,Arial,sans-serif;cursor:pointer;touch-action:pan-y pinch-zoom} #unitList#unitList .fleet-row-action>.material-icons{font-size:22px;line-height:24px} #unitList#unitList .fleet-row-action:focus-visible{outline:2px solid #087c86;outline-offset:-2px} #unitList#unitList .fleet-row-action:active{background:#087c8618} #unitList#unitList .in-target-row .fleet-row-actions{right:27px} #unitList#unitList .fleet-integrated-card.is-dragging .fleet-row-actions{transition:none!important} @media(hover:hover){#unitList#unitList .fleet-row-action:hover{background:#087c8610}} @media(max-width:359px){#unitList#unitList .fleet-row-actions{left:62px;right:10px}#unitList#unitList .in-target-row .fleet-row-actions{right:23px}#unitList#unitList .fleet-row-action{font-size:11px}} @media(min-width:600px){ #unitList#unitList .fleet-row-actions{inset:24px 8px 6px 60px;gap:2px} #unitList#unitList .in-target-row .fleet-row-actions{right:19px} #unitList#unitList .fleet-row-action{font-size:11px;line-height:13px;gap:2px} #unitList#unitList .fleet-row-action>.material-icons{font-size:19px;line-height:21px} #unitList#unitList .fleet-integrated-arrow,#unitList#unitList .fleet-reading-arrow{font-size:12px} } /* Phone reading hierarchy: location and report age share a flexible line; zone entry remains below the readings. */ @media(max-width:599px){ #unitList#unitList .fleet-integrated-row{--phone-car:44px;--phone-reading:90px;grid-template-columns:var(--phone-car) minmax(0,1fr) var(--phone-reading)!important;grid-template-rows:minmax(70px,auto) 19px!important;column-gap:8px!important;row-gap:3px!important;min-height:114px!important;padding:10px 10px 10px 6px!important} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:26px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{grid-row:1/3!important;width:var(--phone-car)!important;height:60px!important;align-self:center!important} #unitList#unitList .fleet-integrated-peek{width:44px;height:60px;margin-left:0} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:var(--phone-car)!important;height:60px!important;background-size:22px 48px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-column:2/4!important;grid-row:1/3!important;grid-template-columns:minmax(0,1fr) max-content var(--phone-reading)!important;grid-template-rows:24px 20px minmax(20px,1fr) 19px!important;column-gap:8px!important;row-gap:2px!important;align-self:stretch!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{grid-column:1/3!important;font-size:19px!important;line-height:24px!important;letter-spacing:-.3px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line>[role=img]{grid-column:1/3!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-plate-plain{grid-column:1/3!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font-size:14px!important;line-height:20px!important;font-weight:500!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location{grid-column:1!important;padding:0!important;line-height:20px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{font-size:14px!important;line-height:20px!important;color:#455f6b!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-updated{grid-row:3!important;grid-column:2!important;justify-self:end!important;justify-content:flex-end!important;gap:4px!important;font-size:12px!important;line-height:19px!important;color:#4c6570!important} #unitList#unitList .fleet-modern-updated svg{width:14px;height:14px} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{position:static!important;grid-row:4;grid-column:3;align-self:center;font-size:12px!important;line-height:19px;color:#4c6570} #unitList#unitList .fleet-primary-reading{grid-row:1;align-self:stretch;min-height:70px;gap:3px;padding-left:12px} #unitList#unitList .fleet-primary-reading::before{top:2px;bottom:2px} #unitList#unitList .fleet-primary-value{font-size:26px;line-height:1.1} #unitList#unitList .fleet-primary-number{font-size:21px} #unitList#unitList .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:12px} #unitList#unitList .fleet-primary-status{font-size:14px;line-height:17px} #unitList#unitList .fleet-primary-secondary{font-size:12px;line-height:16px;color:#455f6b} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{left:62px;top:36px;bottom:10px} #unitList#unitList .fleet-integrated-card .fleet-swipe-label{font-size:12px;line-height:15px} #unitList#unitList .fleet-integrated-card .fleet-swipe-unit{font-size:12px;line-height:14px} #unitList#unitList .fleet-integrated-reveal-heading{left:62px;top:10px;gap:7px} #unitList#unitList .fleet-integrated-reveal-name{font-size:17px} #unitList#unitList .fleet-integrated-reveal-plate{font-size:13px} #unitList#unitList .fleet-row-actions{left:62px;top:36px;bottom:10px} #unitList#unitList .fleet-row-action{font-size:13px;line-height:17px} } @media(max-width:359px){ #unitList#unitList .fleet-integrated-row{--phone-car:40px;--phone-reading:82px;column-gap:6px!important} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:24px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{column-gap:6px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:18px!important} #unitList#unitList .fleet-integrated-peek{margin-left:-2px} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{background-size:20px 44px!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics,#unitList#unitList .fleet-integrated-reveal-heading,#unitList#unitList .fleet-row-actions{left:56px} #unitList#unitList .fleet-row-actions{gap:2px} #unitList#unitList .fleet-primary-number{font-size:20px} } /* Direction cues sit on their boundaries, keeping the identity column clear. */ #unitList#unitList .fleet-integrated-arrow{left:auto;right:1px} #unitList#unitList .fleet-primary-reading{padding-left:5px} #unitList#unitList .fleet-reading-arrow{left:.5px;width:12px;text-align:center;transform:translate(-50%,-50%)} #unitList#unitList .fleet-primary-reading::before{background:linear-gradient(to bottom,#49657529 0 calc(50% - 8px),transparent calc(50% - 8px) calc(50% + 8px),#49657529 calc(50% + 8px) 100%)} @media(min-width:600px){ #unitList#unitList .fleet-integrated-row .fleet-modern-left{transform:translateX(-3px)} #unitList#unitList .fleet-integrated-row{grid-template-columns:40px minmax(0,1fr) 64px!important} } /* Three centered identity lines. The ribbon identifies the zone; its row shows entry time instead. Freshness has reserved width at the end of that line. */ #unitList#unitList .fleet-integrated-row{grid-template-rows:auto!important;row-gap:0!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{grid-row:1!important;align-self:center!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-column:2!important;grid-row:1!important;grid-template-columns:minmax(0,1fr) max-content!important;align-self:center!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit,#unitList#unitList .fleet-integrated-row .fleet-modern-identity-line>[role=img],#unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-plate-plain{grid-column:1/-1!important} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{position:static!important;grid-row:3;grid-column:1;justify-self:start;display:flex;align-items:baseline;gap:4px;text-align:left;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis} #unitList#unitList .fleet-integrated-arrival>.fleet-arrival-caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #unitList#unitList .fleet-integrated-arrival>.fleet-arrival-hour{flex:none;font-size:inherit!important;line-height:inherit!important} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival[hidden],#unitList#unitList .fleet-integrated-row .fleet-modern-location[hidden]{display:none!important} #unitList#unitList .fleet-primary-reading{grid-row:1;align-self:center;gap:2px} #unitList#unitList .fleet-integrated-row .fleet-modern-updated,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-updated{grid-row:3!important;grid-column:2!important;justify-self:end!important;justify-content:flex-end!important} @media(max-width:599px){ #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-template-rows:24px 20px 20px!important;row-gap:2px!important} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{font-size:14px!important;line-height:20px} #unitList#unitList .fleet-integrated-arrival>.fleet-arrival-caption{font-size:12px} } @media(min-width:600px){ #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{font-size:10px!important;line-height:15px!important} #unitList#unitList .fleet-primary-reading{gap:1px} } /* Compact operational column: readable state captions and single-line metrics. */ #unitList#unitList .unit-row .fleet-integrated-row .fleet-primary-reading .fleet-primary-status{display:block!important} #unitList#unitList .fleet-primary-value{flex-wrap:nowrap;white-space:nowrap;gap:4px;letter-spacing:0} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-part{gap:1px} #unitList#unitList .fleet-primary-reading .fleet-primary-number{font-size:20px;line-height:1.1;font-weight:650;letter-spacing:-.4px} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-unit{font-size:12px;font-weight:500} #unitList#unitList .fleet-primary-secondary{white-space:nowrap;text-wrap:nowrap;font-size:13px;line-height:17px;letter-spacing:-.15px} #unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:11.5px;letter-spacing:-.2px} #unitList#unitList .fleet-primary-reading[data-mode=icon] .fleet-primary-status{font-size:12px;line-height:15px;overflow-wrap:normal;word-break:normal;text-wrap:balance} #unitList#unitList .fleet-integrated-row{--phone-car:46px;--phone-reading:114px;min-height:102px!important;column-gap:6px!important} /* A flat circle with the original opaque car; keep a comfortable tap target. */ #unitList#unitList .fleet-integrated-arrow{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:46px!important;height:46px!important} #unitList#unitList .fleet-integrated-peek{width:46px;height:46px;margin-left:0} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:46px!important;height:46px!important;border-radius:50%!important;background-size:18px 40px!important} @media(max-width:359px){ #unitList#unitList .fleet-integrated-row{--phone-car:40px;--phone-reading:104px} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:40px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:40px!important;height:40px!important;background-size:16px 35px!important} #unitList#unitList .fleet-integrated-peek{margin-left:-3px} #unitList#unitList .fleet-primary-secondary{font-size:12px} #unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:10.5px} } @media(min-width:600px){ #fleetMobileSheet:not(.is-active) .units-panel{width:324px!important;min-width:324px!important;max-width:324px!important} #unitList#unitList .fleet-integrated-row{grid-template-columns:38px minmax(0,1fr) 100px!important;min-height:70px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{width:38px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{width:38px!important;height:38px!important;background-size:16px 34px!important} #unitList#unitList .fleet-integrated-peek{margin-left:-4px} #unitList#unitList .fleet-primary-reading .fleet-primary-number{font-size:17px} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-unit{font-size:10px} #unitList#unitList .fleet-primary-secondary{font-size:11px;line-height:13px} #unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:10.5px} #unitList#unitList .fleet-primary-reading[data-mode=icon] .fleet-primary-status{font-size:11px;line-height:13px} } /* One leftward reveal: navigation replaces the old status-reading panel. */ #unitList#unitList .fleet-integrated-card[data-swipe-mode=actions]>.fleet-swipe-metrics{display:none!important} #unitList#unitList .fleet-integrated-card[data-swipe-mode=actions] .fleet-modern-content{transform:translateX(calc(-12px * var(--actions-progress)))} #unitList#unitList .fleet-integrated-card[data-swipe-mode=actions] .fleet-row-actions{transform:translateX(calc(14px * (1 - var(--actions-progress))))} /* Location remains compact, with a visible link and a keyboard-accessible popup. */ #unitList#unitList .fleet-integrated-row button.fleet-modern-location-main{border:0!important;border-radius:2px!important;background:none!important;box-shadow:none!important;text-align:left!important;min-height:20px!important;cursor:default} #unitList#unitList .fleet-integrated-row .fleet-modern-location-main.is-address-link{cursor:pointer} #unitList#unitList .fleet-integrated-row .is-address-link .fleet-modern-location-text{color:#08788a!important;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#7aa9b1;text-underline-offset:3px} #unitList#unitList .fleet-integrated-row .is-address-link:focus-visible{outline:2px solid #08788a;outline-offset:-2px} .fleet-address-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 48px);margin:auto;padding:22px;border:1px solid #dce5e8;border-radius:20px;background:#fff;color:#173641;box-shadow:0 16px 64px #142c3b33;font:400 16px/1.5 Roboto,Arial,sans-serif;overflow:auto} .fleet-address-dialog::backdrop{background:#17364155} .fleet-address-header{display:flex;align-items:center;justify-content:space-between;gap:12px} .fleet-address-header h2{margin:0;font-size:20px;line-height:1.3;font-weight:600} .fleet-address-close{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:#f0f5f6;color:#355463;font:400 28px/1 Arial;cursor:pointer} .fleet-address-unit{margin:4px 0 16px;color:#08788a;font-weight:600} .fleet-address-body{margin:0;overflow-wrap:anywhere;font-size:16px;line-height:1.55} .fleet-address-note{margin:16px 0 0;font-size:13px;color:#627985} .fleet-address-retry{margin-top:16px;min-height:44px;padding:8px 16px;border:1px solid #aacbd1;border-radius:10px;color:#08788a;background:#f0f8f8;font:500 15px Roboto,Arial,sans-serif;cursor:pointer} .fleet-address-retry[hidden]{display:none} .fleet-address-dialog button:focus-visible{outline:2px solid #08788a;outline-offset:3px} /* Mobile row opens the detail; lateral-menu cues are hidden. */ @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-reading-arrow{display:none!important} #unitList#unitList .fleet-primary-reading::before{background:#49657529} } /* Mobile status reveal: the familiar three-line row stays visible on the left. */ @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList tr.unit-row>td{padding:0 8px!important} #unitList#unitList .fleet-integrated-card{--card-paper:#fff;--card-ink:#173744;--card-field:#f4f8f9;border-radius:0!important;background:#fff!important;box-shadow:none!important} #unitList#unitList .fleet-integrated-card::before{content:none!important} #unitList#unitList .selected .fleet-integrated-card{outline:1px solid #9ec9cd;outline-offset:-1px} #unitList#unitList .fleet-integrated-row{grid-template-columns:minmax(0,1fr) 108px!important;grid-template-rows:1fr!important;column-gap:10px!important;row-gap:0!important;min-height:98px!important;padding:11px 14px!important;border-radius:0!important;background:#fff!important;transform:translateX(var(--swipe-offset,0%))!important} #unitList#unitList .selected .fleet-integrated-row{background:#fff!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-column:1!important;grid-row:1!important;grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:26px 21px 19px!important;gap:2px 5px!important;align-self:center!important;min-width:0!important;opacity:1!important;transform:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line{grid-row:1!important;grid-column:1/-1!important;display:flex!important;align-items:baseline!important;gap:5px!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{display:block!important;flex:none!important;grid-row:auto!important;grid-column:auto!important;padding:0!important;font-size:19px!important;line-height:26px!important;letter-spacing:-.45px!important;color:#102e3b!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-separator{display:inline-flex!important;flex:none!important;font-size:13px!important;color:#4f6975!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-separator[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-plate-plain{display:inline-flex!important;flex:0 1 auto!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important;overflow:hidden!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font-size:13px!important;line-height:21px!important;font-weight:500!important;letter-spacing:.35px!important;color:#213e4b!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line>[role=img]{position:static!important;flex:none!important;grid-column:auto!important;grid-row:auto!important;margin-left:auto!important} #unitList#unitList .fleet-integrated-row .fleet-modern-status-line{display:flex!important;grid-column:1!important;grid-row:2!important;align-items:center!important;min-width:0!important;overflow:hidden!important;background:transparent!important;border:0!important} #unitList#unitList tr.unit-row .fleet-integrated-row .fleet-modern-status-line{display:flex!important} #unitList#unitList .fleet-integrated-row .fleet-modern-status{font-size:13px!important;line-height:20px!important;font-weight:600!important;color:#667d8e!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #unitList#unitList .fleet-integrated-row[data-kind=moving] .fleet-modern-status,#unitList#unitList .fleet-integrated-row[data-kind=maneuvering] .fleet-modern-status{color:#087d8d!important} #unitList#unitList .fleet-integrated-row[data-kind=offline] .fleet-modern-status,#unitList#unitList .fleet-integrated-row[data-kind=alarm] .fleet-modern-status{color:#b3314a!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-updated{display:flex!important;position:static!important;grid-column:2!important;grid-row:2!important;justify-self:end!important;align-self:center!important;gap:4px!important;min-width:0!important;max-width:100%!important;font-size:11px!important;line-height:20px!important;color:#708596!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated::before{content:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location{display:flex!important;grid-column:1/-1!important;grid-row:3!important;min-width:0!important;max-width:100%!important;line-height:19px!important} #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-location{grid-column:1!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{font-size:12px!important;line-height:19px!important;color:#6b8190!important} #unitList#unitList .fleet-integrated-row .is-address-link .fleet-modern-location-text{color:#6b8190!important;text-decoration:none!important} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{grid-column:2!important;grid-row:3!important;font-size:11px!important;line-height:19px!important} #unitList#unitList .fleet-primary-reading{grid-column:2!important;grid-row:1!important;align-self:center!important;min-height:64px!important;gap:2px!important;padding:0 0 0 10px!important;border:0!important;text-align:right!important;color:#102e3b!important;opacity:1!important} #unitList#unitList .fleet-primary-reading::before{content:''!important;position:absolute!important;left:0!important;top:2px!important;bottom:2px!important;width:1px!important;background:#d9e5e9!important} #unitList#unitList .fleet-primary-reading .fleet-primary-status{display:none!important} #unitList#unitList .unit-row .fleet-integrated-row .fleet-primary-reading .fleet-primary-status{display:none!important} #unitList#unitList .fleet-primary-value{font-size:24px!important;line-height:1.06!important} #unitList#unitList .fleet-primary-reading .fleet-primary-number{font-size:23px!important;line-height:1.06!important} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:12px!important} #unitList#unitList .fleet-primary-secondary{font-size:11px!important;line-height:15px!important;color:#637a8a!important} #unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:10px!important} #unitList#unitList .fleet-primary-icon{font-size:29px!important;line-height:32px!important} #unitList#unitList .fleet-integrated-row[data-kind=offline] .fleet-primary-icon,#unitList#unitList .fleet-integrated-row[data-kind=alarm] .fleet-primary-icon{color:#af2d48!important} #unitList#unitList .fleet-integrated-reveal-heading{left:14px!important;right:auto!important;top:50%!important;transform:translateY(-50%)!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px!important;width:calc(max(38%,128px) - 20px)!important;max-width:calc(100% - 180px)!important;overflow:hidden!important;white-space:nowrap!important;line-height:1.1!important} #unitList#unitList .fleet-integrated-reveal-name{font-size:21px!important;line-height:23px!important;color:#102e3b!important} #unitList#unitList .fleet-integrated-reveal-plate{font-size:13px!important;line-height:16px!important;color:#455f6d!important} #unitList#unitList .fleet-integrated-reveal-state{display:flex;gap:4px;max-width:100%;font-size:12px;line-height:16px;white-space:nowrap;color:#677f8c} #unitList#unitList .fleet-integrated-reveal-status{overflow:hidden;text-overflow:ellipsis;font-weight:600} #unitList#unitList .fleet-integrated-reveal-age{flex:none;color:#8295a0} #unitList#unitList .fleet-integrated-card[data-kind=moving] .fleet-integrated-reveal-status,#unitList#unitList .fleet-integrated-card[data-kind=maneuvering] .fleet-integrated-reveal-status{color:#087d8d} #unitList#unitList .fleet-integrated-card[data-kind=offline] .fleet-integrated-reveal-status,#unitList#unitList .fleet-integrated-card[data-kind=alarm] .fleet-integrated-reveal-status{color:#b3314a} #unitList#unitList .fleet-row-actions{display:none!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{inset:0 44px 0 auto!important;width:min(calc(62% - 44px),calc(100% - 168px))!important;max-width:none!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;align-items:center!important;padding:4px 0!important;box-sizing:border-box!important;background:#f4f8f9!important;color:#153744!important;opacity:1!important;transform:none!important} #unitList#unitList .in-target-row .fleet-integrated-card>.fleet-swipe-metrics{inset:0 70px 0 auto!important;width:min(calc(62% - 70px),calc(100% - 168px))!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics[data-count="1"]{grid-template-columns:1fr!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric{min-height:64px!important;padding:0 2px!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric+.fleet-swipe-metric{border-left:1px solid #dce7ea!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-icon{display:none!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-unit{font-size:12px!important;line-height:1!important;margin-top:4px!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-label{font-size:11px!important;line-height:12px!important;margin-top:6px!important;color:#5c7685!important} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value{justify-content:center!important;white-space:normal!important} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value .fleet-primary-number{font-size:27px!important} #unitList#unitList .fleet-integrated-card [data-count="1"] .fleet-swipe-value .fleet-primary-duration-unit{font-size:13px!important} #unitList#unitList .fleet-integrated-card [data-mode=offline] .fleet-swipe-value{font-size:17px!important;color:#b3314a!important} #unitList#unitList .fleet-integrated-card [data-mode=private] .fleet-swipe-value{font-size:15px!important} #unitList#unitList .fleet-swipe-expand{position:absolute;z-index:3;right:0;top:0;transform:none;display:grid;place-items:center;width:44px;height:100%;padding:0;border:0;background:#fff;color:#087b8a;cursor:pointer;touch-action:manipulation} #unitList#unitList .in-target-row .fleet-swipe-expand{right:26px} #unitList#unitList .fleet-swipe-expand[hidden]{display:none!important} #unitList#unitList .fleet-swipe-expand .material-icons{font-size:21px;line-height:1} #unitList#unitList .fleet-swipe-expand:focus-visible{outline:2px solid #087b8a;outline-offset:-3px} #unitList#unitList .fleet-integrated-card.is-revealed .fleet-modern-content,#unitList#unitList .fleet-integrated-card.is-revealed .fleet-primary-reading{opacity:calc(1 - var(--swipe-progress))!important} } @media(max-width:359px){ #unitList#unitList .fleet-integrated-row{grid-template-columns:minmax(0,1fr) 96px!important;column-gap:7px!important;padding:10px 11px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{font-size:18px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font-size:12px!important} #unitList#unitList .fleet-integrated-card.is-revealed .fleet-integrated-row{min-height:168px!important} #unitList#unitList .fleet-integrated-card.is-revealed .fleet-integrated-row{opacity:0!important} #unitList#unitList .fleet-integrated-card .fleet-integrated-reveal-heading{top:9px!important;transform:none!important;width:calc(100% - 58px)!important;max-width:none!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{inset:66px 44px 0 0!important;width:calc(100% - 44px)!important} #unitList#unitList .in-target-row .fleet-integrated-card>.fleet-swipe-metrics{inset:66px 70px 0 0!important;width:calc(100% - 70px)!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-value:not(.is-single-duration){white-space:normal!important} #unitList#unitList .fleet-swipe-expand{top:66px;height:102px} } @media(min-width:601px) and (max-width:960px) and (max-height:500px){ #fleetMobileSheet#fleetMobileSheet.is-active{width:min(460px,calc(100vw - 24px))!important} #fleetMobileSheet#fleetMobileSheet.is-active .units-panel.units-panel{width:calc(100% - 24px)!important;min-width:0!important;max-width:none!important} } /* The tablet and desktop list uses the phone's information hierarchy at a smaller scale. Its whole row opens the existing detail placement. */ @media (min-width:601px) and (min-height:501px), (min-width:961px){ #unitList#unitList tr.unit-row>td{padding:2px 7px!important} #unitList#unitList .fleet-integrated-card, #unitList#unitList .fleet-integrated-card[data-kind=moving], #unitList#unitList .fleet-integrated-card[data-kind=maneuvering], #unitList#unitList .fleet-integrated-card[data-kind=offline], #unitList#unitList .fleet-integrated-card[data-kind=alarm]{--card-paper:#fff;--card-field:#fff;--card-ink:#173744;border-radius:6px!important;background:#fff!important;box-shadow:none!important;touch-action:pan-y pinch-zoom} #unitList#unitList .fleet-integrated-card::before{content:none!important} #unitList#unitList .selected .fleet-integrated-card{outline:1px solid #9ec9cd;outline-offset:-1px} #unitList#unitList .fleet-integrated-row{grid-template-columns:minmax(0,1fr) 92px!important;grid-template-rows:1fr!important;column-gap:8px!important;row-gap:0!important;min-height:80px!important;padding:8px 10px!important;background:transparent!important;transform:none!important} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:22px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-left{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{grid-column:1!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(0,1fr) max-content!important;grid-template-rows:22px 19px 17px!important;gap:1px 4px!important;align-self:center!important;min-width:0!important;opacity:1!important;transform:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line{grid-row:1!important;grid-column:1/-1!important;display:flex!important;align-items:baseline!important;gap:4px!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{display:block!important;flex:0 1 auto!important;grid-row:auto!important;grid-column:auto!important;min-width:0!important;padding:0!important;font-size:17px!important;line-height:22px!important;letter-spacing:-.35px!important;color:#102e3b!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-separator{display:inline-flex!important;flex:none!important;font-size:11px!important;color:#5b7280!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-separator[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain, #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-plate-plain{display:inline-flex!important;flex:0 1 auto!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important;overflow:hidden!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{font-size:11.5px!important;line-height:17px!important;font-weight:500!important;letter-spacing:.1px!important;color:#284552!important} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line>[role=img]{position:static!important;flex:none!important;grid-column:auto!important;grid-row:auto!important;margin-left:auto!important} #unitList#unitList tr.unit-row .fleet-integrated-row .fleet-modern-status-line{display:flex!important;grid-column:1!important;grid-row:2!important;align-items:center!important;min-width:0!important;overflow:hidden!important;background:transparent!important;border:0!important} #unitList#unitList .fleet-integrated-row .fleet-modern-status{font-size:12px!important;line-height:18px!important;font-weight:600!important;color:#667d8e!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} #unitList#unitList .fleet-integrated-row[data-kind=moving] .fleet-modern-status,#unitList#unitList .fleet-integrated-row[data-kind=maneuvering] .fleet-modern-status{color:#087d8d!important} #unitList#unitList .fleet-integrated-row[data-kind=offline] .fleet-modern-status,#unitList#unitList .fleet-integrated-row[data-kind=alarm] .fleet-modern-status{color:#b3314a!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated,#unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-updated{display:flex!important;position:static!important;grid-column:2!important;grid-row:2!important;justify-self:end!important;align-self:center!important;gap:3px!important;min-width:0!important;max-width:100%!important;font-size:10px!important;line-height:18px!important;color:#718694!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated::before{content:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location{display:flex!important;grid-column:1/-1!important;grid-row:3!important;min-width:0!important;max-width:100%!important;line-height:17px!important} #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-location{grid-column:1!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{font-size:11px!important;line-height:17px!important;color:#6b8190!important} #unitList#unitList .fleet-integrated-row .is-address-link .fleet-modern-location-text{color:#6b8190!important;text-decoration:none!important} #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{grid-column:2!important;grid-row:3!important;font-size:10px!important;line-height:17px!important} #unitList#unitList .fleet-primary-reading{grid-column:2!important;grid-row:1!important;align-self:center!important;min-height:60px!important;gap:2px!important;padding:0 0 0 8px!important;border:0!important;background:transparent!important;text-align:right!important;color:#102e3b!important;opacity:1!important;cursor:pointer} #unitList#unitList .fleet-reading-arrow{display:none!important} #unitList#unitList .fleet-primary-reading:focus-visible{outline:2px solid #087b8a;outline-offset:2px} #unitList#unitList .fleet-primary-reading::before{content:''!important;position:absolute!important;left:0!important;top:2px!important;bottom:2px!important;width:1px!important;background:#d9e5e9!important} #unitList#unitList .unit-row .fleet-integrated-row .fleet-primary-reading .fleet-primary-status{display:none!important} #unitList#unitList .fleet-primary-value{font-size:23px!important;line-height:1.05!important} #unitList#unitList .fleet-primary-reading .fleet-primary-number{font-size:20px!important;line-height:1.05!important} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:10px!important} #unitList#unitList .fleet-primary-secondary{font-size:10px!important;line-height:13px!important;color:#637a8a!important} #unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:9.5px!important} #unitList#unitList .fleet-primary-icon{font-size:26px!important;line-height:29px!important} #unitList#unitList .fleet-integrated-row[data-kind=offline] .fleet-primary-icon,#unitList#unitList .fleet-integrated-row[data-kind=alarm] .fleet-primary-icon{color:#af2d48!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics,#unitList#unitList .fleet-integrated-reveal-heading,#unitList#unitList .fleet-row-actions,#unitList#unitList .fleet-swipe-expand{display:none!important} #unitList#unitList .fleet-integrated-card[data-swipe-mode=actions] .fleet-modern-content{transform:none!important} } /* Variant 3 (D): one quiet circle and a vertically centred identity stack. The circle keeps its size when a plate is absent. */ #unitList#unitList .fleet-integrated-row{ --identity-car:64px;--identity-gap:8px;--identity-name:19px;--identity-plate:12.5px; --identity-meta:12px;--identity-reading:94px;--identity-number:22px;--identity-inset:8px; grid-template-columns:minmax(0,1fr) max(var(--identity-reading),var(--route-width,0px))!important; grid-template-rows:1fr!important;column-gap:8px!important;row-gap:0!important; min-height:88px!important;padding:12px var(--identity-inset)!important; transform:none!important;opacity:1!important; } #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:28px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-content{ grid-column:1!important;grid-row:1!important;display:grid!important; grid-template-columns:var(--identity-car) minmax(0,1fr)!important; grid-template-rows:var(--identity-car)!important;gap:0 var(--identity-gap)!important; height:var(--identity-car)!important;align-self:center!important; overflow:visible!important;opacity:1!important;transform:none!important; } #unitList#unitList .fleet-integrated-row .fleet-modern-left{ grid-column:1!important;grid-row:1!important;display:flex!important; width:var(--identity-car)!important;height:var(--identity-car)!important; align-self:center!important;border:0!important;transform:none!important; } #unitList#unitList .fleet-integrated-peek{ width:var(--identity-car);height:var(--identity-car);min-width:44px; margin:0;justify-content:center;border:0;border-radius:50%;background:none;box-shadow:none; } #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{ width:var(--identity-car)!important;height:var(--identity-car)!important;border-radius:50%!important; background:#edf2f5 url('./assets/car.webp') center / 22px 45px no-repeat!important; border:0!important;box-shadow:none!important; } #unitList#unitList .fleet-integrated-row[data-kind=moving] .fleet-modern-vehicle-halo, #unitList#unitList .fleet-integrated-row[data-kind=maneuvering] .fleet-modern-vehicle-halo{background-color:#e5f3eb!important} #unitList#unitList .fleet-integrated-row:is([data-kind=offline],[data-kind=alarm]) .fleet-modern-vehicle-halo{background-color:#f7e7eb!important} #unitList#unitList .fleet-row-identity-text{ grid-column:2;grid-row:1;min-width:0;height:100%;display:flex; flex-direction:column;justify-content:center;overflow:hidden; } #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line{ position:relative!important;display:flex!important;flex-direction:column!important; align-items:stretch!important;justify-content:center!important;gap:0!important; width:100%!important;min-height:0!important;max-height:none!important;height:auto!important; overflow:hidden!important;flex:none!important; } #unitList#unitList .fleet-integrated-row .fleet-modern-unit{ display:block!important;min-width:0!important;max-width:100%!important; font-size:var(--identity-name)!important;line-height:22px!important; font-weight:700!important;letter-spacing:-.35px!important;padding:0!important; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important; } #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain, #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-plate-plain{display:flex!important;flex:none!important;min-height:0!important;height:16px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain[hidden]{display:none!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{ font-size:var(--identity-plate)!important;line-height:16px!important; font-weight:400!important;letter-spacing:.1px!important;color:#667c89!important; } #unitList#unitList .fleet-integrated-row .fleet-modern-identity-line>[role=img]{position:absolute!important;right:0!important;top:2px!important;margin:0!important} #unitList#unitList .fleet-modern-identity-line:has(>[role=img]:not([hidden])) .fleet-modern-unit{padding-right:17px!important;box-sizing:border-box} #unitList#unitList .fleet-integrated-row .fleet-modern-identity-separator, #unitList#unitList tr.unit-row .fleet-integrated-row .fleet-modern-status-line{display:none!important} #unitList#unitList .fleet-row-identity-meta{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;column-gap:4px;min-width:0;min-height:26px;max-height:26px} #unitList#unitList .fleet-integrated-row .fleet-modern-location, #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-location, #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{ position:static!important;grid-column:1!important;grid-row:1!important; padding:0!important;min-width:0!important;max-width:100%!important;font-size:var(--identity-meta)!important; line-height:13px!important;justify-self:stretch!important;align-self:center!important; } #unitList#unitList .fleet-integrated-row .fleet-modern-location-main{display:block!important;min-height:0!important;width:100%!important;padding:0!important;overflow:hidden!important} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{ display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden!important;white-space:normal!important;text-overflow:ellipsis!important; font-size:var(--identity-meta)!important;line-height:13px!important;color:#667e8b!important; } #unitList#unitList .fleet-integrated-arrival>.fleet-arrival-caption{font-size:inherit!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated, #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-modern-updated{ grid-column:2!important;grid-row:1!important;gap:3px!important; font-size:11px!important;line-height:16px!important;color:#7b8e98!important; white-space:nowrap!important;align-self:center!important; } #unitList#unitList .fleet-modern-updated svg{width:11px;height:11px;flex:none} #unitList#unitList .fleet-primary-reading{ grid-column:2!important;grid-row:1!important;min-height:64px!important; gap:3px!important;padding:0 0 0 8px!important;justify-content:center; } #unitList#unitList .fleet-primary-reading::before{top:0!important;bottom:0!important;background:#e1e9ed!important} #unitList#unitList .fleet-primary-value,#unitList#unitList .fleet-primary-reading .fleet-primary-number{font-size:var(--identity-number)!important;font-weight:700!important;line-height:1.1!important} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:12px!important;font-weight:400!important} #unitList#unitList .unit-row .fleet-integrated-row .fleet-primary-reading .fleet-primary-status{display:block!important;font-size:12px!important;line-height:15px!important;font-weight:400!important;color:#6d808e!important;overflow-wrap:normal} #unitList#unitList .unit-row .fleet-integrated-row:is([data-kind=moving],[data-kind=maneuvering]) .fleet-primary-reading .fleet-primary-status{color:#20826b!important} #unitList#unitList .unit-row .fleet-integrated-row:is([data-kind=offline],[data-kind=alarm]) .fleet-primary-reading .fleet-primary-status{color:#b3314a!important} #unitList#unitList .fleet-primary-secondary,#unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:11.5px!important;line-height:15px!important;letter-spacing:0!important;white-space:normal!important;text-wrap:wrap!important;color:#708590!important} #unitList#unitList .fleet-integrated-reveal-heading{display:none!important} @media(max-width:380px){ #unitList#unitList .fleet-integrated-row{--identity-car:64px;--identity-gap:6px;--identity-name:18px;--identity-plate:12px;--identity-reading:84px;--identity-number:22px;--identity-inset:6px;column-gap:6px!important} #unitList#unitList .fleet-row-identity-meta{column-gap:2px} #unitList#unitList .fleet-modern-updated svg{display:none} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:24px!important} } @media(min-width:601px) and (min-height:501px), (min-width:961px){ #unitList#unitList .fleet-integrated-row{--identity-car:64px;--identity-gap:6px;--identity-name:17px;--identity-reading:82px;--identity-number:23px;min-height:84px!important;padding:10px 8px!important} #unitList#unitList .in-target-row .fleet-integrated-row{padding-right:24px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{background-size:20px 41px!important} #unitList#unitList .fleet-primary-secondary,#unitList#unitList .fleet-primary-secondary[data-density=long]{font-size:11px!important} } /* Slide the actual three-line stack. The fixed circle exits the clipped card; identity and location never get replaced with a duplicate heading. */ @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-card{--reveal-left:118px} #unitList#unitList .fleet-integrated-card .fleet-modern-content{ width:calc((1 - var(--swipe-progress)) * 100% + var(--swipe-progress) * (var(--identity-car) + var(--identity-gap) + var(--reveal-left) - var(--identity-inset) - 8px))!important; transform:translateX(calc(-1 * (var(--identity-car) + var(--identity-gap)) * var(--swipe-progress)))!important; opacity:1!important;transition:width 220ms ease,transform 220ms ease; } #unitList#unitList .fleet-integrated-card .fleet-primary-reading{opacity:calc(1 - var(--swipe-progress))!important;transform:translateX(calc(-16px * var(--swipe-progress)))} #unitList#unitList .fleet-integrated-card.is-revealed .fleet-integrated-row{min-height:88px!important;opacity:1!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{inset:0 44px 0 var(--reveal-left)!important;width:auto!important;opacity:var(--swipe-progress)!important;transform:translateX(calc(14px * (1 - var(--swipe-progress))))!important} #unitList#unitList .in-target-row .fleet-integrated-card>.fleet-swipe-metrics{inset:0 70px 0 var(--reveal-left)!important;width:auto!important} #unitList#unitList .fleet-swipe-expand{top:0;height:100%} #unitList#unitList .fleet-integrated-card.is-dragging .fleet-modern-content{transition:none!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-value{overflow-wrap:anywhere!important;max-width:100%} #unitList#unitList .fleet-integrated-card [data-mode=moving] .fleet-swipe-value:not(.is-single-duration){white-space:normal!important} #unitList#unitList .fleet-integrated-card .fleet-swipe-metric{overflow:hidden} } @media(prefers-reduced-motion:reduce){ #unitList#unitList .fleet-integrated-card .fleet-modern-content{transition:none!important} } @media(max-width:380px){#unitList#unitList .fleet-integrated-card{--reveal-left:102px}} @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-card.is-revealed .fleet-modern-content{opacity:1!important} #unitList#unitList .fleet-integrated-card .fleet-integrated-row{background:transparent!important} #unitList#unitList .fleet-integrated-card>.fleet-swipe-metrics{z-index:2} } #unitList#unitList .fleet-integrated-row .fleet-integrated-arrival{display:flex;flex-wrap:wrap;gap:0 4px!important} #unitList#unitList .fleet-integrated-arrival>.fleet-arrival-caption{flex:none;overflow:visible;text-overflow:clip} #unitList#unitList .fleet-primary-reading .fleet-primary-value{flex-wrap:wrap;justify-content:flex-end;white-space:normal} @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-card [data-mode=moving] .fleet-swipe-value[data-density=long]{font-size:20px!important;letter-spacing:-.035em!important} } @media(max-width:380px){ #unitList#unitList .fleet-integrated-card [data-mode=moving] .fleet-swipe-value[data-density=long]{font-size:16px!important} } /* Desktop uses the same three-line composition with room for location and age. */ @media(min-width:1200px){ #fleetMobileSheet:not(.is-active) .units-panel.units-panel{width:368px!important;min-width:368px!important;max-width:368px!important} #unitList#unitList .fleet-integrated-row{--identity-car:60px;--identity-gap:8px;--identity-name:16px;--identity-plate:12px;--identity-meta:11.5px;--identity-number:22px;--identity-reading:82px;min-height:80px!important;padding:10px 8px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{line-height:20px!important} #unitList#unitList .fleet-row-identity-meta{min-height:24px;max-height:24px;column-gap:6px} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{line-height:12px!important} #unitList#unitList .fleet-primary-reading{min-height:60px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{background-size:20px 41px!important} } /* Keep the slid identity on three lines; report age keeps its own width. */ @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-card.is-revealed .fleet-integrated-row:not(.has-integrated-arrival) .fleet-row-identity-meta{min-height:18px;max-height:18px;margin-top:3px} #unitList#unitList .fleet-integrated-card.is-revealed .fleet-modern-location-text{ display:block!important;-webkit-line-clamp:unset;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important;line-height:16px!important; } } /* Moving and stopped readings share a baseline, number size and caption row. */ .fleet-swipe-group[hidden]{display:none!important} @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-card>:is([data-mode=stopped],[data-mode=moving])[data-count="3"]{ --swipe-number:22px;--swipe-long-number:18px;--swipe-unit:10px; grid-template-rows:14px minmax(0,1fr)!important;padding:8px 0!important;align-items:stretch!important; } #unitList#unitList .fleet-integrated-card .fleet-swipe-group{grid-column:1 / 3;grid-row:1;text-align:center;font:500 11px/14px Roboto,Arial,sans-serif;color:#5c7685} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-metric{ grid-row:2;display:grid!important;grid-template-columns:auto auto;grid-template-rows:28px 24px; justify-content:center!important;align-content:center;align-items:baseline!important; min-height:0!important;overflow:hidden;gap:2px!important;padding:0 2px!important; } #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-metric:nth-child(3){grid-column:3} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-value{ grid-column:1;grid-row:1;flex-wrap:nowrap!important;gap:2px!important; font-size:var(--swipe-number)!important;line-height:28px!important;font-weight:700!important; letter-spacing:-.04em!important;white-space:nowrap!important;overflow-wrap:normal!important;font-variant-numeric:tabular-nums; } #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-primary-number{font-size:var(--swipe-number)!important;line-height:28px!important} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-primary-duration-part{display:inline-flex!important;flex-direction:row!important;align-items:baseline!important;gap:1px!important} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-primary-duration-unit{font-size:var(--swipe-unit)!important;line-height:14px!important;letter-spacing:0!important;font-weight:400!important} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-label{grid-column:1 / -1;grid-row:2;align-self:start;margin:0!important;font-size:11px!important;line-height:12px!important;min-height:24px} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-unit:empty{display:none!important} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-metric:has(>.fleet-swipe-unit:empty) .fleet-swipe-value{grid-column:1 / -1} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-unit{grid-column:2;grid-row:1;font-size:var(--swipe-unit)!important;line-height:14px!important;margin:0!important} #unitList#unitList .fleet-integrated-card>[data-mode=moving][data-count="1"] .fleet-swipe-value{font-size:22px!important;line-height:28px!important} #unitList#unitList .fleet-integrated-card>[data-mode=moving][data-count="1"] .fleet-swipe-unit{font-size:10px!important;line-height:14px!important} /* Long distances reduce the whole trio together, never one value alone. */ #unitList#unitList .fleet-integrated-card>:is([data-mode=stopped],[data-mode=moving])[data-count="3"]:has(.fleet-swipe-value[data-density=long][data-distance=true]){--swipe-number:var(--swipe-long-number)} } @media(max-width:380px){ #unitList#unitList .fleet-integrated-card>:is([data-mode=stopped],[data-mode=moving])[data-count="3"]{--swipe-number:18px;--swipe-long-number:16px;--swipe-unit:9px} } @media(max-width:350px){ #unitList#unitList .fleet-integrated-card>:is([data-mode=stopped],[data-mode=moving])[data-count="3"]{--swipe-number:16px;--swipe-long-number:14px;--swipe-unit:8px} #unitList#unitList .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-label{font-size:10px!important} #unitList#unitList .in-target-row .fleet-integrated-card{--reveal-left:86px} #unitList#unitList .in-target-row .fleet-integrated-card.is-revealed .fleet-integrated-arrival, #unitList#unitList .in-target-row .fleet-integrated-card.is-revealed .fleet-integrated-arrival>span, #unitList#unitList .in-target-row .fleet-integrated-card.is-revealed .fleet-arrival-hour{font-size:10px!important} #unitList#unitList .in-target-row .fleet-integrated-card>:is([data-mode=stopped],[data-mode=moving])[data-count="3"]{--swipe-number:16px;--swipe-long-number:14px;--swipe-unit:8px;padding:5px 0!important} #unitList#unitList .in-target-row .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-metric{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:40px 24px;gap:0!important;padding:0 1px!important;align-content:start} #unitList#unitList .in-target-row .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] :is(.fleet-swipe-value,.fleet-primary-number){line-height:20px!important} #unitList#unitList .in-target-row .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-value{flex-wrap:wrap!important;align-content:start;align-self:start} #unitList#unitList .in-target-row .fleet-integrated-card :is([data-mode=stopped],[data-mode=moving])[data-count="3"] .fleet-swipe-label{font-size:10px!important} } /* Compact desktop/tablet rows retain the panel's full vertical extent. */ @media(min-width:601px) and (min-height:501px),(min-width:961px){ #fleetMobileSheet:not(.is-active) .units-panel.units-panel{width:300px!important;min-width:300px!important;max-width:300px!important} #unitList#unitList .fleet-integrated-row{--identity-car:54px;--identity-gap:6px;--identity-name:15px;--identity-plate:11px;--identity-meta:10.5px;--identity-reading:76px;--identity-number:20px;min-height:72px!important;padding:9px 7px!important;column-gap:6px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-unit{line-height:19px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-plate-plain-text{line-height:14px!important} #unitList#unitList .fleet-row-identity-meta{min-height:22px;max-height:22px;column-gap:4px} #unitList#unitList .fleet-integrated-row .fleet-modern-location-text{line-height:11px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-updated{font-size:10px!important;line-height:14px!important} #unitList#unitList .fleet-primary-reading{min-height:54px!important;padding-left:6px!important;gap:2px!important} #unitList#unitList .fleet-integrated-row .fleet-modern-vehicle-halo{background-size:18px 37px!important} #unitList#unitList .unit-row .fleet-integrated-row .fleet-primary-reading .fleet-primary-status{font-size:11px!important;line-height:14px!important} #unitList#unitList .fleet-primary-reading .fleet-primary-duration-unit,#unitList#unitList .fleet-primary-unit{font-size:10.5px!important} } /* Speeds and every duration number have the same scale, including mixed hours/minutes. */ #unitList#unitList .fleet-integrated-row .fleet-primary-reading :is(.fleet-primary-value,.fleet-primary-number){font-size:var(--identity-number)!important;line-height:1.1!important} #unitList#unitList .fleet-integrated-row .fleet-primary-secondary{white-space:nowrap!important;text-wrap:nowrap!important;font-size:10.5px!important;line-height:14px!important;letter-spacing:-.1px!important} @media(min-width:1200px){ #fleetMobileSheet:not(.is-active) .units-panel.units-panel{width:332px!important;min-width:332px!important;max-width:332px!important} } @media(min-width:601px) and (max-width:960px) and (min-height:501px){ #fleetMobileSheet#fleetMobileSheet.is-active[data-layout=portrait]{width:288px!important;max-width:calc(100% - 32px)!important} } @media(max-width:600px),(max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-row .fleet-primary-secondary{font-size:11.5px!important} } /* Grouped rows prioritize entry time while closed. The revealed identity and swipe readings retain their original arrival and operational information. */ #unitList#unitList .fleet-integrated-row.has-integrated-arrival .fleet-integrated-arrival{display:none!important} #unitList#unitList .fleet-grouped-state{display:none;grid-column:1;grid-row:1;min-width:0;max-width:100%;font-size:var(--identity-meta);line-height:13px;font-weight:500;color:#6d808e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #unitList#unitList .has-integrated-arrival .fleet-grouped-state:not([hidden]){display:block} #unitList#unitList .fleet-integrated-row:is([data-kind=moving],[data-kind=maneuvering]) .fleet-grouped-state{color:#20826b} #unitList#unitList .fleet-integrated-row:is([data-kind=offline],[data-kind=alarm]) .fleet-grouped-state{color:#b3314a} /* Calendar time has a label above and a smaller, quieter numeric treatment. */ #unitList#unitList .fleet-integrated-row .fleet-primary-reading[data-mode=arrival]{--arrival-size:20px;gap:4px!important} #unitList#unitList .unit-row .fleet-integrated-row .fleet-primary-reading[data-mode=arrival] .fleet-primary-status{order:-1;color:#6d808e!important;font-size:11px!important;line-height:14px!important;font-weight:400!important;white-space:nowrap} #unitList#unitList .fleet-integrated-row .fleet-primary-reading[data-mode=arrival] .fleet-primary-value{font-size:var(--arrival-size)!important;font-weight:600!important;line-height:1.15!important;letter-spacing:.1px;color:#216276;white-space:nowrap} #unitList#unitList .fleet-integrated-row .fleet-primary-reading[data-mode=arrival] .fleet-primary-unit{font-size:10px!important;font-weight:400!important;color:#6d808e!important} @media(min-width:601px) and (min-height:501px),(min-width:961px),(max-width:350px){ #unitList#unitList .fleet-integrated-row .fleet-primary-reading[data-mode=arrival]{--arrival-size:18px} } @media(max-width:600px),(max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-card.is-revealed .has-integrated-arrival .fleet-integrated-arrival:not([hidden]){display:flex!important} #unitList#unitList .fleet-integrated-card.is-revealed .fleet-grouped-state{display:none!important} } /* Map-only vehicle contrast. Keep the original opaque sprite and geographic anchor; the four thin alpha shadows trace its silhouette without a box. */ .workspace #map .map-unit .map-unit-aura > img { width:44px; height:44px; object-fit:contain; opacity:1; filter:drop-shadow(.45px 0 0 rgba(23,52,59,.44)) drop-shadow(-.45px 0 0 rgba(23,52,59,.44)) drop-shadow(0 .45px 0 rgba(23,52,59,.44)) drop-shadow(0 -.45px 0 rgba(23,52,59,.44)) drop-shadow(0 1.25px 1.25px rgba(19,45,59,.24)); } /* Quieter stopped-time reading; preserve arrival, speed and alert colors. */ #unitList#unitList .fleet-integrated-row[data-kind=stopped] .fleet-primary-reading[data-mode=duration] .fleet-primary-value{color:#596773!important} /* Mobile identity: a small plate/location gap and a centered short divider. */ @media(max-width:600px), (max-width:960px) and (max-height:500px){ #unitList#unitList .fleet-integrated-row{--identity-car:60px} #unitList#unitList .fleet-integrated-card:not(.is-revealed) .fleet-row-identity-meta{min-height:20px;max-height:26px} #unitList#unitList .fleet-primary-reading::before{top:50%!important;bottom:auto!important;height:40px!important;transform:translateY(-50%);background:#e7edef!important} }