html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* GNV11 sign-in */
.login-layout { min-height: 100vh; margin: 0; background: #f4f7fb; color: #142238; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.login-body { min-height: 100vh; }
.login-body main { min-height: 100vh; }
.login-page { --navy: #10243b; --blue: #1769d2; --ink: #17283e; min-height: 100vh; display: grid; place-items: center; padding: 32px; background: radial-gradient(ellipse at 78% 10%, rgba(202,224,250,.56), transparent 33%), #f4f7fb; }
.login-shell { width: min(1120px, 100%); min-height: min(700px, calc(100vh - 64px)); display: grid; grid-template-columns: 1.02fr .98fr; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(19,44,78,.13), 0 3px 12px rgba(19,44,78,.05); }
.login-showcase { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; min-height: 620px; padding: 42px 48px 36px; color: #fff; background: linear-gradient(145deg, #112a45 0%, #15395d 58%, #0e2c4d 100%); isolation: isolate; }
.showcase-grid { position: absolute; z-index: -1; inset: 0; opacity: .23; background-image: linear-gradient(rgba(177,208,239,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(177,208,239,.12) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(120deg, black, transparent 78%); }
.brand-lockup { z-index: 1; display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(207,229,251,.3); border-radius: 14px; color: #8dc6ff; background: rgba(116,179,239,.1); }
.brand-mark svg { width: 28px; height: 28px; }
.brand-company { display: block; font-size: 19px; line-height: 1.05; font-weight: 750; letter-spacing: .16em; }
.brand-product { display: block; margin-top: 5px; color: #a9c4df; font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.showcase-copy { position: relative; z-index: 1; max-width: 410px; margin: auto 0; padding: 60px 0 74px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #a9c9e9; font-size: 10px; font-weight: 750; letter-spacing: .19em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #50d6a0; box-shadow: 0 0 0 4px rgba(80,214,160,.15); }
.showcase-copy h1 { margin: 24px 0 16px; font-size: clamp(42px, 5vw, 62px); line-height: 1.04; letter-spacing: -.045em; font-weight: 650; }
.showcase-copy p { max-width: 350px; margin: 0; color: #c0d1e2; font-size: 15px; line-height: 1.8; }
.showcase-bottom { z-index: 1; display: flex; align-items: center; gap: 12px; color: #b2c8dd; font-size: 12px; }
.signal-lines { display: flex; align-items: end; gap: 3px; height: 16px; }
.signal-lines i { width: 3px; border-radius: 3px; background: #61bcff; }
.signal-lines i:nth-child(1) { height: 5px; opacity: .55; }.signal-lines i:nth-child(2) { height: 9px; opacity: .72; }.signal-lines i:nth-child(3) { height: 12px; opacity: .85; }.signal-lines i:nth-child(4) { height: 16px; }
.radar { position: absolute; z-index: -1; width: 360px; height: 360px; border: 1px solid rgba(133,190,242,.13); border-radius: 50%; right: -176px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 0 38px rgba(133,190,242,.035), 0 0 0 78px rgba(133,190,242,.03), 0 0 0 118px rgba(133,190,242,.025); }
.radar-two { width: 12px; height: 12px; right: 84px; top: 28%; border: 0; background: #55b8ff; box-shadow: 0 0 0 7px rgba(85,184,255,.17), 0 0 28px 7px rgba(85,184,255,.43); }
.login-panel { display: grid; place-items: center; padding: 56px clamp(32px, 6vw, 76px); }
.login-panel-inner { width: 100%; max-width: 368px; }
.mobile-brand { display: none; }
.login-heading { margin-bottom: 34px; }
.login-eyebrow { color: #4077b6; }
.login-heading h2 { margin: 13px 0 9px; color: #17283e; font-size: 29px; letter-spacing: -.035em; font-weight: 700; }
.login-heading p { margin: 0; color: #718096; font-size: 14px; line-height: 1.6; }
.login-form { display: grid; gap: 21px; }
.login-validation { color: #b42318; font-size: 13px; }.login-validation:empty { display: none; }.login-validation ul { margin: 0; padding-left: 18px; }
.login-field .form-label { margin-bottom: 8px; color: #26384e; font-size: 12px; font-weight: 650; }
.input-wrap { position: relative; display: flex; align-items: center; }
.field-icon { position: absolute; z-index: 1; left: 15px; width: 19px; height: 19px; color: #8a9aab; pointer-events: none; }
.login-input { height: 52px; padding: 0 16px 0 45px; border: 1px solid #dce4ed; border-radius: 10px; background: #fbfcfe; color: #1b2c42; font-size: 13px; box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.login-input::placeholder { color: #a5b0bc; }.login-input:focus { border-color: #4989d5; background: #fff; box-shadow: 0 0 0 4px rgba(44,119,205,.11); }
.password-input { padding-right: 62px; }.password-toggle { position: absolute; right: 13px; padding: 5px; border: 0; background: transparent; color: #4c78a8; font-size: 11px; font-weight: 700; }.password-toggle:hover { color: #174f8e; }
.field-error { display: block; margin-top: 5px; color: #b42318; font-size: 12px; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 11px; height: 52px; margin-top: 4px; border: 0; border-radius: 10px; background: linear-gradient(100deg, #1769d2, #1e7be0); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 8px 18px rgba(30,111,207,.2); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }.login-submit svg { width: 18px; height: 18px; }.login-submit:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 11px 22px rgba(30,111,207,.25); }.login-submit:focus-visible,.password-toggle:focus-visible { outline: 3px solid rgba(44,119,205,.35); outline-offset: 3px; }
.login-footnote { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 26px; color: #8795a5; font-size: 11px; }.secure-icon svg { display: block; width: 17px; height: 17px; }
.login-copyright { margin: 47px 0 0; color: #a3adba; text-align: center; font-size: 10px; }
@media (max-width: 760px) { .login-page { min-height: 100svh; padding: 0; background: #fff; }.login-shell { min-height: 100svh; grid-template-columns: 1fr; border-radius: 0; box-shadow: none; }.login-showcase { display: none; }.login-panel { min-height: 100svh; padding: 35px 26px 28px; }.login-panel-inner { max-width: 420px; }.mobile-brand { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(50px, 12vh, 94px); color: #183554; font-size: 15px; font-weight: 800; letter-spacing: .08em; }.mobile-brand small { display: block; margin-top: 2px; color: #7d90a5; font-size: 8px; letter-spacing: .17em; }.mobile-brand-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #eaf3fd; color: #1769d2; font-weight: 800; }.login-heading h2 { font-size: 27px; }.login-copyright { margin-top: 42px; } }
@media (max-width: 380px) { .login-panel { padding-right: 21px; padding-left: 21px; }.login-heading h2 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .login-input,.login-submit { transition: none; } }

/* Supplied GNT company logo */
.company-logo { display: block; width: min(100%, 290px); height: auto; object-fit: contain; object-position: left center; }
.mobile-brand { min-height: 74px; }
.mobile-company-logo { display: block; width: min(100%, 250px); height: auto; max-height: 88px; object-fit: contain; object-position: left center; }


/* Mobile-first fleet overview shell */
.fleet-dashboard { --fleet-ink: #172b43; --fleet-muted: #748499; --fleet-blue: #1769d2; max-width: 1120px; margin: 0 auto; padding: 26px 0 56px; color: var(--fleet-ink); }
.fleet-heading { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 18px 2px 28px; }
.fleet-kicker { margin: 0 0 9px; color: #5780aa; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.fleet-heading h1 { margin: 0; color: var(--fleet-ink); font-size: clamp(27px, 3.5vw, 36px); font-weight: 720; letter-spacing: -.04em; }
.fleet-subtitle { margin: 8px 0 0; color: var(--fleet-muted); font-size: 14px; }
.fleet-heading-mark { display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid #dce9f7; border-radius: 16px; background: linear-gradient(145deg,#f6faff,#eaf3fd); color: var(--fleet-blue); }
.fleet-heading-mark svg { width: 27px; height: 27px; }
.fleet-content-card { min-height: 390px; overflow: hidden; border: 1px solid #e4ebf2; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(24,52,84,.055); }
.fleet-card-topline { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 23px 26px; border-bottom: 1px solid #edf1f5; }
.fleet-card-topline h2 { margin: 0; color: #1b2e45; font-size: 16px; font-weight: 700; }
.fleet-card-topline p { margin: 5px 0 0; color: #8a98a9; font-size: 12px; }
.fleet-live-label { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #e2eaf2; border-radius: 999px; color: #718198; font-size: 10px; font-weight: 650; white-space: nowrap; }
.fleet-live-label span { width: 6px; height: 6px; border-radius: 50%; background: #4c9bda; }
.fleet-empty-state { display: flex; min-height: 316px; flex-direction: column; align-items: center; justify-content: center; padding: 36px 22px; text-align: center; }
.fleet-empty-illustration { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 19px; border-radius: 50%; background: #f1f7fe; color: #377fca; }
.fleet-empty-illustration > svg { position: relative; z-index: 1; width: 57px; height: 57px; }
.fleet-orbit { position: absolute; border: 1px solid #dbeafa; border-radius: 50%; }.fleet-orbit-a { inset: 10px; }.fleet-orbit-b { inset: -8px; border-style: dashed; opacity: .65; }
.fleet-empty-state h3 { margin: 0 0 8px; color: #21364f; font-size: 17px; font-weight: 700; }
.fleet-empty-state p { max-width: 320px; margin: 0; color: #8291a3; font-size: 13px; line-height: 1.65; }
@media (max-width: 767.98px) { .fleet-dashboard { padding: 18px 0 36px; }.fleet-heading { padding: 17px 2px 22px; }.fleet-heading-mark { width: 46px; height: 46px; border-radius: 14px; }.fleet-content-card { min-height: 350px; border-radius: 15px; }.fleet-card-topline { padding: 19px 17px; }.fleet-empty-state { min-height: 276px; } }
@media (max-width: 380px) { .fleet-live-label { padding: 6px 8px; font-size: 9px; } }

.gnv-brand { display: inline-flex; align-items: center; gap: 11px; }.gnv-brand img { display: block; width: 142px; height: 38px; object-fit: contain; object-position: left center; }.gnv-brand span { padding-left: 10px; border-left: 1px solid #dce5ef; color: #48617c; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
@media (max-width: 420px) { .gnv-brand img { width: 122px; height: 34px; }.gnv-brand span { font-size: 10px; } }


/* Telematics home reference layout */
.dashboard-layout { margin: 0; min-height: 100vh; background: #f3f7fc; color: #14325a; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.dashboard-body, .dashboard-body main { min-height: 100vh; }
.telematics-home { min-height: 100vh; padding-bottom: 76px; }
.telematics-header { display: flex; min-height: 76px; align-items: center; gap: 23px; padding: 0 clamp(18px, 3vw, 34px); background: linear-gradient(105deg,#2366a8,#1e5b9c); color: #fff; box-shadow: 0 2px 10px rgba(10,54,105,.16); }
.header-icon { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 0; border-radius: 10px; background: transparent; color: white; }.header-icon svg { width: 27px; height: 27px; }.header-icon:disabled { opacity: .96; }
.telematics-brand { display: flex; min-width: 0; align-items: center; gap: 12px; }.telematics-brand img { display: block; width: 117px; max-height: 55px; object-fit: contain; filter: brightness(0) invert(1); }.telematics-brand > span { display: block; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.48); color: #fff; font-size: 16px; font-weight: 650; line-height: 1.2; }.telematics-brand small { display: block; margin-top: 3px; color: #d9e8f8; font-size: 12px; font-weight: 450; }.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }.header-actions form { margin: 0; }
.telematics-main { width: min(1440px, 100%); margin: 0 auto; padding: 18px clamp(16px, 2.6vw, 34px) 14px; }.fleet-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }.summary-tile { display: flex; min-height: 78px; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid; border-radius: 13px; background: #fff; }.summary-tile.total { border-color: #cfe0f7; background: linear-gradient(110deg,#f5f9ff,#fff); color: #1468cd; }.summary-tile.moving { border-color: #ccecdf; background: linear-gradient(110deg,#f2fbf6,#fff); color: #14a05c; }.summary-tile.idle { border-color: #f7e4bd; background: linear-gradient(110deg,#fffaf0,#fff); color: #ef960d; }.summary-tile.stopped { border-color: #f5d5d8; background: linear-gradient(110deg,#fff4f5,#fff); color: #e8343d; }.summary-icon { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: currentColor; }.summary-icon svg { width: 25px; height: 25px; color: #fff; }.summary-label { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 650; }.summary-tile strong { display: block; color: #193454; font-size: 24px; line-height: 1; font-weight: 720; }
.fleet-controls { display: grid; grid-template-columns: minmax(220px,1fr) 205px 145px; gap: 14px; margin-top: 18px; }.vehicle-search,.group-filter,.filter-button { display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 0 15px; border: 1px solid #cbdcf0; border-radius: 11px; background: rgba(255,255,255,.88); color: #234b7d; }.vehicle-search svg { width: 22px; height: 22px; flex: 0 0 auto; color: #6f8fb6; }.vehicle-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #224975; font: inherit; font-size: 14px; }.vehicle-search input::placeholder { color: #7190b6; opacity: 1; }.vehicle-search input:disabled { cursor: not-allowed; }.group-filter,.filter-button { justify-content: space-between; font-size: 13px; font-weight: 600; }.group-filter svg { width: 18px; height: 18px; color: #6384ae; }.filter-button { justify-content: center; color: #066edc; }.filter-button svg { width: 22px; height: 22px; stroke-width: 2.6; }.fleet-controls button:disabled { opacity: 1; cursor: not-allowed; }
.status-tabs { display: flex; align-items: center; gap: 10px; margin: 15px 0 17px; overflow-x: auto; scrollbar-width: none; }.status-tabs::-webkit-scrollbar { display:none; }.status-tab { display: inline-flex; min-height: 37px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 999px; background: #eaf1f9; color: #42658d; font-size: 12px; font-weight: 650; }.status-tab span { font-weight: 700; }.status-tab.selected { background: #1375df; color: #fff; }.status-tab.moving-tab { border-color:#d6eee1; background:#effaf4; color:#169b59; }.status-tab.idle-tab { border-color:#f8e8c8; background:#fff8e9; color:#eb970c; }.status-tab.stopped-tab { border-color:#f6dade; background:#fff1f2; color:#e63946; }.status-tab i { display:inline-block; width:10px; height:10px; border-radius:50%; background:currentColor; }.moving-tab i { border-radius:2px; }.idle-tab i { width:6px; border-radius:4px; }.status-tab:disabled { opacity: 1; cursor:not-allowed; }
.vehicle-list { min-height: 330px; display: grid; place-items: center; border: 1px solid #dbe7f4; border-radius: 14px; background: rgba(255,255,255,.78); }.vehicle-empty { display:flex; flex-direction:column; align-items:center; padding: 42px 18px; text-align:center; }.empty-vehicle-icon { display:grid; width:74px; height:74px; place-items:center; border:1px solid #d9e9fb; border-radius:50%; background:#f2f8ff; color:#397dca; }.empty-vehicle-icon svg { width:49px; height:49px; }.vehicle-empty h2 { margin:17px 0 6px; color:#23456e; font-size:16px; font-weight:700; }.vehicle-empty p { margin:0; color:#8094ad; font-size:13px; }.fleet-list-footer { display:flex; align-items:center; gap:8px; margin-top:10px; color:#6d87a9; font-size:11px; }.information-icon { display:grid; width:17px; height:17px; place-items:center; border-radius:50%; background:#6f91b9; color:white; font-family:Georgia,serif; font-size:12px; font-weight:bold; }
.mobile-bottom-nav { position:fixed; z-index:10; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); min-height:66px; padding:5px max(12px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)); border-top:1px solid #e2eaf3; background:rgba(255,255,255,.97); box-shadow:0 -5px 18px rgba(28,62,100,.05); }.bottom-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#6480a2; font-size:10px; line-height:1.2; text-decoration:none; }.bottom-nav-item svg { width:21px; height:21px; }.bottom-nav-item.active { color:#0874e6; font-weight:650; }.bottom-nav-item.unavailable { opacity:.8; }
@media (min-width: 1100px) { .telematics-home { padding-bottom:84px; }.mobile-bottom-nav { right:auto; left:50%; width:min(720px,90vw); min-height:68px; transform:translateX(-50%); border:1px solid #e2eaf3; border-bottom:0; border-radius:16px 16px 0 0; } }
@media (max-width: 720px) { .telematics-header { min-height:66px; gap:13px; padding:0 13px; }.header-icon { width:34px; height:38px; }.telematics-brand { gap:9px; }.telematics-brand img { width:88px; max-height:47px; }.telematics-brand > span { padding-left:9px; font-size:13px; }.telematics-brand small { font-size:10px; }.header-actions { gap:3px; }.header-actions .header-icon svg { width:23px; height:23px; }.telematics-main { padding:12px 12px 12px; }.fleet-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.summary-tile { min-height:66px; gap:9px; padding:8px 10px; border-radius:11px; }.summary-icon { width:39px; height:39px; }.summary-icon svg { width:21px; height:21px; }.summary-label { font-size:11px; }.summary-tile strong { font-size:20px; }.fleet-controls { grid-template-columns:minmax(0,1fr) 92px; gap:8px; margin-top:12px; }.vehicle-search { grid-column:1 / -1; min-height:44px; }.group-filter,.filter-button { min-height:42px; padding:0 10px; font-size:11px; }.filter-button { gap:5px; }.filter-button svg { width:18px; height:18px; }.status-tabs { gap:7px; margin:12px 0; }.status-tab { min-height:33px; gap:6px; padding:0 12px; font-size:11px; }.vehicle-list { min-height:260px; border-radius:12px; }.vehicle-empty { padding:30px 16px; }.fleet-list-footer { align-items:flex-start; padding:0 2px; font-size:10px; line-height:1.4; }.mobile-bottom-nav { min-height:62px; }.bottom-nav-item { font-size:9px; }.bottom-nav-item svg { width:19px; height:19px; } }
@media (max-width: 360px) { .telematics-brand img { width:74px; }.telematics-brand > span { font-size:11px; }.telematics-main { padding-right:9px; padding-left:9px; }.summary-tile { gap:7px; padding:8px; }.summary-icon { width:34px; height:34px; }.group-filter { font-size:10px; } }

/* Interactive fleet filters and vehicle map links */
.fleet-controls { grid-template-columns: minmax(220px, 1fr) minmax(190px, 260px); }
.group-filter-wrap { position: relative; min-width: 0; }
.group-filter { width: 100%; min-height: 48px; cursor: pointer; }
.group-filter[aria-expanded="true"] svg { transform: rotate(180deg); }
.group-filter svg { transition: transform .15s ease; }
.group-picker-panel { position: absolute; z-index: 20; top: calc(100% + 7px); right: 0; left: 0; max-height: min(360px, 60vh); overflow: auto; padding: 8px; border: 1px solid #d4e1ef; border-radius: 12px; background: #fff; box-shadow: 0 14px 35px rgba(24,57,94,.16); }
.group-picker-panel[hidden] { display: none; }
.group-search-label { display: block; margin-bottom: 6px; }
.group-search-label input { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid #dce6f1; border-radius: 8px; outline: none; color: #24496f; font: inherit; font-size: 12px; }
.group-search-label input:focus { border-color: #478bd6; box-shadow: 0 0 0 3px rgba(44,119,205,.1); }
.group-option { display: flex; width: 100%; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #31577f; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.group-option:hover,.group-option.selected { background: #edf5ff; color: #126bd0; }
.group-option[hidden] { display: none; }
.group-option small { color: #8294a9; font-size: 10px; }
.status-tab { cursor: pointer; transition: background .15s ease, color .15s ease; }
.status-tab.selected { border-color: #1375df; background: #1375df; color: #fff; }
.status-tab.moving-tab.selected,.status-tab.idle-tab.selected,.status-tab.towing-tab.selected,.status-tab.stopped-tab.selected { border-color: #1375df; background: #1375df; color: #fff; }
.status-tab svg { width: 15px; height: 15px; flex: 0 0 auto; }
.filtered-empty { width: 100%; border: 1px dashed #d3e1f0; border-radius: 13px; background: #fff; }
.vehicle-card[hidden] { display: none; }
.vehicle-map-button { display: inline-flex; grid-column: 1 / -1; justify-self: end; align-items: center; gap: 6px; min-height: 35px; padding: 0 12px; border: 1px solid #cfe1f7; border-radius: 9px; background: #f4f9ff; color: #0874df; text-decoration: none; font-size: 12px; font-weight: 650; }
.vehicle-map-button:hover { border-color: #8ebbe9; background: #e9f4ff; color: #075db3; }
.vehicle-map-button svg { width: 17px; height: 17px; }
.fleet-list-footer strong { color: #315b88; font-weight: 700; }
.vehicle-date-actions { display: flex; align-items: center; gap: 10px; }
.vehicle-date-actions .vehicle-map-button { grid-column: auto; justify-self: auto; min-height: 30px; padding: 0 9px; }
.vehicle-gps-time-compact { display: none; }
@media (max-width: 720px) {
  .vehicle-card-heading { align-items: center; flex-direction: row; gap: 6px; }
  .vehicle-name { flex: 1 1 auto; gap: 5px; }
  .vehicle-name h2 { font-size: 12px; }
  .vehicle-plate-icon { width: 19px; height: 19px; }
  .vehicle-status-badge { padding: 3px 6px; font-size: 9px; }
  .vehicle-date-actions { flex: 0 0 auto; gap: 5px; }
  .vehicle-gps-time { font-size: 9px; white-space: nowrap; }
  .vehicle-gps-time-full { display: none; }
  .vehicle-gps-time-compact { display: inline; }
  .vehicle-map-button { min-height: 27px; gap: 3px; padding: 0 6px; font-size: 9px; }
  .vehicle-map-button svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
  .vehicle-name { gap: 4px; }
  .vehicle-name h2 { font-size: 11px; }
  .vehicle-plate-icon { width: 17px; height: 17px; }
  .vehicle-status-badge { padding: 2px 5px; font-size: 8px; }
  .vehicle-gps-time { font-size: 8px; }
  .vehicle-date-actions { gap: 4px; }
  .vehicle-map-button { padding: 0 5px; font-size: 8px; }
}

@media (max-width: 720px) { .fleet-controls { grid-template-columns: minmax(0, 1fr) 135px; }.group-filter { min-height: 42px; }.group-picker-panel { min-width: 220px; }.vehicle-map-button { min-height: 34px; } }

/* Live fleet data cards */
.fleet-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.summary-tile.towing { border-color: #d9d6f5; background: linear-gradient(110deg,#f7f6ff,#fff); color: #6c58c8; }
.status-tab.towing-tab { border-color: #e1ddfa; background: #f5f3ff; color: #6854c5; }
.vehicle-list.has-vehicles { display: flex; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; border: 0; background: transparent; }
.vehicle-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 9px 20px; overflow: hidden; padding: 15px 18px 15px 22px; border: 1px solid #dbe7f4; border-left: 5px solid #e8343d; border-radius: 13px; background: rgba(255,255,255,.92); box-shadow: 0 3px 12px rgba(28,62,100,.035); }
.vehicle-card.status-moving { border-left-color: #16a15d; }
.vehicle-card.status-idling { border-left-color: #ef9a0b; }
.vehicle-card.status-towing { border-left-color: #7059cd; }
.vehicle-card-heading { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; }
.vehicle-name { display: flex; min-width: 0; align-items: center; gap: 10px; }
.vehicle-name h2 { overflow: hidden; margin: 0; color: #1d3b5c; font-size: 16px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-plate-icon { width: 23px; height: 23px; flex: 0 0 auto; color: #3278b9; }
.status-moving .vehicle-plate-icon { color: #159454; }
.status-idling .vehicle-plate-icon { color: #dc8a00; }
.status-towing .vehicle-plate-icon { color: #6854c5; }
.status-stop .vehicle-plate-icon { color: #dd3440; }
.vehicle-status-badge { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: #fff0f1; color: #dd3440; font-size: 11px; font-weight: 700; }
.status-moving .vehicle-status-badge { background: #eaf8f0; color: #159454; }
.status-idling .vehicle-status-badge { background: #fff6e5; color: #dc8a00; }
.status-towing .vehicle-status-badge { background: #f2efff; color: #6854c5; }
.vehicle-gps-time { flex: 0 0 auto; color: #74869c; font-size: 11px; }
.vehicle-description { grid-column: 1 / -1; margin: -5px 0 0; color: #71839a; font-size: 11px; }
.vehicle-address { overflow: hidden; margin: 0; align-self: center; color: #315b88; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; }
.vehicle-card-metrics { display: flex; justify-content: space-between; gap: 10px; padding-left: 18px; border-left: 1px solid #e2ebf5; }
.vehicle-card-metrics span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.vehicle-card-metrics small { color: #8191a4; font-size: 10px; }
.vehicle-card-metrics strong { color: #315b88; font-size: 12px; font-weight: 650; white-space: nowrap; }
@media (max-width: 720px) { .vehicle-card { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 13px 13px 13px 17px; }.vehicle-card-heading { grid-column: 1; align-items: flex-start; flex-direction: column; gap: 5px; }.vehicle-description { grid-column: 1; }.vehicle-card-metrics { justify-content: flex-start; gap: 22px; padding: 8px 0 0; border-top: 1px solid #e8eef5; border-left: 0; }.vehicle-gps-time { font-size: 10px; }.vehicle-name h2 { font-size: 14px; } }

/* Keep plate, timestamp, and map action on one compact mobile row. */
@media (max-width: 720px) {
  .vehicle-card-heading { align-items: center; flex-direction: row; flex-wrap: nowrap; gap: 5px; }
  .vehicle-name { min-width: 0; flex: 1 1 0; gap: 4px; }
  .vehicle-name h2 { min-width: 0; font-size: 12px; }
  .vehicle-plate-icon { width: 18px; height: 18px; }
  .vehicle-status-badge { padding: 2px 5px; font-size: 8px; }
  .vehicle-date-actions { flex: 0 0 auto; gap: 4px; white-space: nowrap; }
  .vehicle-gps-time { font-size: 9px; white-space: nowrap; }
  .vehicle-gps-time-full { display: none; }
  .vehicle-gps-time-compact { display: inline; }
  .vehicle-date-actions .vehicle-map-button { min-height: 27px; gap: 3px; padding: 0 5px; font-size: 8px; }
  .vehicle-date-actions .vehicle-map-button svg { width: 13px; height: 13px; }
}
@media (max-width: 380px) {
  .vehicle-name h2 { font-size: 10px; }
  .vehicle-status-badge { padding: 2px 4px; font-size: 7px; }
  .vehicle-gps-time { font-size: 8px; }
}

@media (max-width: 720px) {
  .fleet-controls { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
  .vehicle-search { grid-column: auto; min-width: 0; }
  .group-filter { min-width: 0; }
  .status-tab.towing-tab { display: none; }
  .vehicle-name h2 { font-size: 15px; }
  .vehicle-status-badge { padding: 4px 7px; font-size: 10px; }
  .vehicle-gps-time { font-size: 11px; }
}

/* Focused service notice */
body.maintenance-layout { min-width: 320px; min-height: 100vh; margin: 0; background: #edf2f8; color: #18324f; font-family: "Segoe UI", Arial, sans-serif; }
.maintenance-body { min-height: 100vh; }
.maintenance-page { display: grid; min-height: 100vh; place-items: center; padding: clamp(16px, 4vw, 52px); background: radial-gradient(ellipse at 50% 0%, #f8fbff 0, #edf2f8 65%); }
.maintenance-shell { width: min(1180px, 100%); min-height: min(720px, calc(100vh - 48px)); display: flex; flex-direction: column; padding: clamp(22px, 4vw, 48px) clamp(22px, 6vw, 76px) 26px; border: 1px solid #e0e8f2; border-radius: 22px; background: #fff; box-shadow: 0 24px 75px rgba(30, 58, 91, .10); }
.maintenance-header,.maintenance-brand,.maintenance-live,.maintenance-footer,.maintenance-note,.art-card-top,.art-card-bottom { display: flex; align-items: center; }
.maintenance-header { justify-content: space-between; gap: 18px; }
.maintenance-brand { gap: 12px; color: inherit; text-decoration: none; }
.maintenance-brand img { width: 54px; height: 48px; object-fit: contain; }
.maintenance-brand span { display: flex; flex-direction: column; gap: 3px; }
.maintenance-brand strong { color: #24476f; font-size: 13px; letter-spacing: .13em; }
.maintenance-brand small { color: #91a0b2; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.maintenance-live { gap: 8px; padding: 9px 12px; border: 1px solid #e1eaf4; border-radius: 999px; color: #6e829b; font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.maintenance-live i,.art-card-bottom i { width: 7px; height: 7px; border-radius: 50%; background: #e3a52d; box-shadow: 0 0 0 4px #fff5df; }
.maintenance-content { display: grid; flex: 1; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); padding: 45px 0 54px; }
.maintenance-copy { max-width: 490px; }
.maintenance-eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: #6883a4; font-size: 10px; font-weight: 750; letter-spacing: .15em; }
.maintenance-eyebrow span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #edf3fb; color: #41658f; font-size: 10px; letter-spacing: 0; }
.maintenance-copy h1 { max-width: 470px; margin: 0; color: #18324f; font-size: clamp(36px, 4.5vw, 58px); font-weight: 680; letter-spacing: -.045em; line-height: 1.08; }
.maintenance-description { max-width: 430px; margin: 21px 0 27px; color: #71839a; font-size: 15px; line-height: 1.75; }
.maintenance-note { gap: 13px; max-width: 410px; padding: 15px 17px; border: 1px solid #e8eef5; border-radius: 12px; background: #fbfcfe; }
.maintenance-note-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: #edf3fb; color: #55779f; }
.maintenance-note-icon svg { width: 20px; height: 20px; }
.maintenance-note > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.maintenance-note strong { color: #304e70; font-size: 12px; }
.maintenance-note small { color: #8594a7; font-size: 11px; line-height: 1.5; }
.maintenance-art { position: relative; display: grid; min-height: 390px; place-items: center; isolation: isolate; }
.art-orbit { position: absolute; z-index: -1; width: min(84%, 400px); aspect-ratio: 1; border: 1px solid #edf2f8; border-radius: 50%; }
.orbit-two { width: min(68%, 325px); border-style: dashed; }
.art-card { width: min(100%, 410px); padding: 16px 20px 13px; border: 1px solid #e2eaf3; border-radius: 16px; background: linear-gradient(145deg,#fff,#f9fbfe); box-shadow: 0 20px 55px rgba(36, 66, 103, .10); transform: rotate(2deg); }
.art-card-top,.art-card-bottom { justify-content: space-between; color: #8b9bb0; font-size: 8px; font-weight: 750; letter-spacing: .13em; }
.art-card-top span:first-child { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: #244a75; color: white; font-size: 9px; letter-spacing: .04em; }
.art-illustration { display: block; width: 100%; max-height: 270px; }
.art-card-bottom { padding-top: 10px; border-top: 1px solid #edf1f6; font-size: 8px; }
.art-card-bottom span { display: flex; align-items: center; gap: 9px; }
.art-card-bottom i { width: 6px; height: 6px; box-shadow: none; }
.art-card-bottom strong { color: #a2afbe; font-size: 8px; }
.art-spark { position: absolute; color: #e6b44c; font-size: 23px; }
.spark-a { top: 14%; right: 10%; }.spark-b { bottom: 13%; left: 8%; font-size: 16px; }
.maintenance-footer { justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid #edf1f6; color: #8997a8; font-size: 11px; }
.maintenance-assistance { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.maintenance-contact { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid #188b58; border-radius: 9px; background: #1c9b62; box-shadow: 0 3px 8px rgba(28,155,98,.16); color: #fff; font-size: 11px; font-weight: 700; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.maintenance-contact:hover { transform: translateY(-1px); background: #168653; color: #fff; }
.maintenance-contact:focus-visible { outline: 3px solid rgba(28,155,98,.28); outline-offset: 3px; }
.maintenance-contact svg { width: 17px; height: 17px; }
.maintenance-footer strong { color: #60758e; font-weight: 650; }
.footer-mark { color: #a5b1bf; font-size: 8px; font-weight: 750; letter-spacing: .12em; white-space: nowrap; }.footer-mark b { padding: 0 5px; color: #e0a02f; }
@media (max-width: 760px) {
  .maintenance-page { padding: 12px; }
  .maintenance-shell { min-height: calc(100vh - 24px); padding: 20px 22px 18px; border-radius: 16px; }
  .maintenance-content { grid-template-columns: 1fr; gap: 4px; padding: 50px 0 30px; }
  .maintenance-copy { max-width: 560px; }
  .maintenance-copy h1 { max-width: 520px; font-size: clamp(38px, 9vw, 52px); }
  .maintenance-description { margin: 16px 0 21px; font-size: 14px; }
  .maintenance-art { min-height: 290px; }
  .art-card { width: min(88%, 380px); }
  .art-illustration { max-height: 220px; }
  .maintenance-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-width: 420px) {
  .maintenance-shell { padding: 17px 17px 15px; }
  .maintenance-brand img { width: 43px; height: 40px; }
  .maintenance-brand strong { font-size: 11px; }
  .maintenance-brand small { font-size: 8px; }
  .maintenance-live { gap: 7px; padding: 8px 9px; font-size: 8px; }
  .maintenance-content { padding-top: 42px; }
  .maintenance-eyebrow { font-size: 8px; }
  .maintenance-copy h1 { font-size: 39px; }
  .maintenance-art { min-height: 245px; }
  .art-card { padding: 12px 14px 10px; }
  .art-illustration { max-height: 180px; }
}
@media (prefers-reduced-motion: no-preference) {
  .maintenance-live i { animation: maintenance-pulse 2.2s ease-in-out infinite; }
  @keyframes maintenance-pulse { 50% { box-shadow: 0 0 0 7px rgba(255,245,223,.2); } }
}

/* Keep search, group and sorting aligned, and status filters on one row. */
.fleet-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 260px) 44px; }
.fleet-controls .vehicle-search { grid-column: auto; min-width: 0; }
.group-filter-label, #group-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-filter svg { flex-shrink: 0; }
.sort-control { position: relative; min-width: 0; }
.sort-toggle { justify-content: center; padding: 0; height: 100%; }
.sort-toggle svg { width: 22px; height: 22px; }
.sort-toggle[aria-expanded="true"] svg { transform: none; }
.sort-picker-panel { left: auto; width: 220px; max-width: calc(100vw - 24px); }

.sort-control:focus-within { outline: 2px solid #1375df; outline-offset: 2px; }
.status-tabs { overflow: visible; }
.status-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 6px; white-space: nowrap; }
@media (max-width: 720px) {
  .fleet-controls { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 38px; gap: 6px; }
  .fleet-controls .vehicle-search, .sort-control { min-height: 42px; }
  .vehicle-search { padding: 0 8px; gap: 5px; }
  .vehicle-search input { font-size: 12px; }
  .vehicle-search svg { width: 16px; height: 16px; }
  .group-filter { padding: 0 7px; gap: 4px; }
  .status-tabs { gap: 4px; }
  .status-tab { gap: 3px; padding: 0 3px; font-size: 10px; }
  .status-tab svg { width: 12px; height: 12px; }
}
@media (max-width: 360px) { .status-tab svg { display: none; } }