/* FleetIQ visual system — calm surfaces, purposeful contrast, clear hierarchy. */
:root, :root[data-theme="light"] {
  color-scheme:light;
  --page:#f3f6fa; --surface:#fff; --surface-2:#f0f4f8;
  --ink:#172b42; --ink-2:#52647a; --muted:#64758a;
  --grid:#e8edf3; --axis:#c9d3df; --border:#e1e8f0;
  --accent:#166f63; --accent-ink:#fff; --series-1:#237eae; --series-2:#d47a32; --series-3:#16816f;
  --series-1-soft:#e7f3f2; --good:#16856e; --good-ink:#13745f;
  --critical:#c94e58; --warning:#e3ac42; --radius:16px;
  --shadow:0 3px 16px rgba(26,49,77,.035);
  --font:"Inter","Segoe UI",system-ui,sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark; --page:#0e1723; --surface:#162333; --surface-2:#1e2e40;
  --ink:#edf4fc; --ink-2:#b7c6d8; --muted:#99abc0; --grid:#29394b;
  --axis:#485b70; --border:#2a3b50; --accent:#66d2bd; --accent-ink:#102a26;
  --series-1:#67b8e0; --series-2:#eba468; --series-3:#64c9b3; --series-1-soft:#223e43;
  --good:#67c8aa; --good-ink:#67c8aa; --critical:#f38b95; --shadow:0 3px 16px #00000012;
}
body {font-size:13px;line-height:1.55;letter-spacing:.005em;}
[hidden] {display:none!important;}
.app {grid-template-columns:236px minmax(0,1fr);}
.sidebar {background:#101f31;color:#b5c5d8;border:0;padding:30px 16px 20px;gap:5px;z-index:950;overflow-y:auto;}
.brand {color:#fff;font-size:25px;letter-spacing:-1px;padding:0 10px 27px;gap:12px;}
.brand-mark {width:39px;height:39px;background:#65d5bd;color:#102d29;border-radius:12px;font-size:24px;font-weight:800;box-shadow:0 4px 16px #0002;}
.brand small {font-size:9px;letter-spacing:1.65px;color:#8fa5bf;margin-top:0;}
.workspace-badge {display:flex;gap:10px;align-items:center;border:1px solid #ffffff18;border-radius:12px;padding:12px 10px;margin:0 3px 18px;font-size:11px;color:#e5edf7;font-weight:600;}
.workspace-badge small {display:block;color:#91a8c1;font-size:10px;font-weight:400;margin-top:2px;}
.workspace-icon {border-radius:8px;background:#27394e;color:#b9d5e8;padding:8px;font-size:10px;letter-spacing:1px;}
.nav-heading {font-size:9px;color:#8098b3;letter-spacing:1.8px;font-weight:700;padding:12px 13px 8px;}
.nav-btn {color:#afc1d7;padding:12px 14px;border-radius:10px;font-size:12px;gap:12px;transition:background .15s,color .15s;}
.nav-btn svg {width:19px;height:19px;stroke-width:1.6;}
.nav-btn:hover {background:#ffffff09;color:#fff;}
.nav-btn.active {background:#24453f;color:#8ee3cc;box-shadow:inset 3px 0 #69d9be;font-weight:600;}
.nav-badge {background:#513342;color:#ffb7bb;font-size:10px;}
.sidebar-foot {padding:22px 12px 0;margin-top:auto;color:#a3b5cb;font-size:11px;gap:14px;}
.sidebar-foot .btn {background:#1a2b40;border-color:#34465d;color:#c5d3e3;min-height:34px;}
main {padding:0 32px 40px;max-width:1900px;width:100%;margin:auto;}
.topbar {height:77px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;}
.breadcrumb {font-size:12px;color:var(--muted);display:flex;gap:13px;align-items:center;}
.breadcrumb strong {font-weight:550;color:var(--ink);}
.breadcrumb span {color:var(--axis);}
.topbar-actions {display:flex;align-items:center;gap:19px;}
.environment-tag {font-size:9px;font-weight:700;letter-spacing:1px;border:1px solid var(--border);padding:5px 9px;border-radius:5px;color:var(--ink-2);}
.today {font-size:11px;color:var(--muted);}
.avatar {border:1px solid var(--border);border-radius:50%;width:33px;height:33px;cursor:pointer;background:var(--surface);font-size:10px;font-weight:700;}
.view-head {margin-bottom:25px;align-items:center;gap:20px;}
.view-head h1 {font-size:29px;letter-spacing:-1.1px;font-weight:650;line-height:1.3;}
.view-head p {font-size:12px;margin-top:8px;color:var(--muted);}
.eyebrow {font-size:9px;font-weight:700;letter-spacing:1.55px;color:var(--muted);margin-bottom:7px;}
.heading-dot {color:var(--accent);}
.grid {gap:20px;}
.card {padding:22px;}
.card h2 {font-size:15px;font-weight:650;letter-spacing:-.3px;}
.card .sub {font-size:11px;line-height:1.6;margin:5px 0 16px;}
.card-head {align-items:center;gap:15px;}
.kpis {gap:16px;margin-bottom:24px;}
#dashKpis {grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.kpi {padding:19px 20px;position:relative;min-width:0;}
.kpi .label {font-size:11px;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.kpi .value {font-size:27px;letter-spacing:-1px;font-weight:650;margin:10px 0 5px;white-space:nowrap;}
.kpi .note {font-size:10px;line-height:1.55;}
.kpi-icon {display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--series-1-soft);color:var(--accent);}
.kpi-icon svg {width:17px;height:17px;}
#dashKpis .kpi:nth-child(n+5) {padding:13px 18px;display:grid;grid-template-columns:1fr auto;gap:0 8px;background:var(--surface);box-shadow:none;}
#dashKpis .kpi:nth-child(n+5) .value {font-size:20px;grid-column:2;grid-row:1 / 3;margin:0;align-self:center;letter-spacing:-.6px;}
#dashKpis .kpi:nth-child(n+5) .note {grid-column:1;font-size:9px;}
.operations-grid {grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);align-items:start;}
.operations-grid > .card {padding:22px 22px 16px;}
.operations-grid > .grid {gap:18px;grid-template-rows:322px 288px;}
.operations-grid > .grid > .card {display:flex;flex-direction:column;overflow:hidden;}
.operations-grid #insights,.operations-grid .feed {overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--axis) transparent;}
.map {height:500px;border-radius:12px;}
.map-legend {gap:12px;font-size:10px;padding-top:5px;}
.leaflet-tile-pane {filter:saturate(.55);}
.leaflet-bar {border:1px solid #dbe3eb!important;box-shadow:0 4px 14px #20384e18!important;border-radius:9px!important;overflow:hidden;}
.leaflet-bar a {background:var(--surface)!important;color:var(--ink)!important;}
.insight {gap:12px;padding:14px 0;grid-template-columns:24px 1fr;}
.insight .title {font-size:11px;line-height:1.6;}
.insight .detail {font-size:10px;line-height:1.7;margin-top:5px;color:var(--muted);}
.sev-icon {width:23px;height:23px;font-size:11px;border-radius:7px;}
.sev-icon.critical {background:#c94e5817;color:var(--critical);}
.sev-icon.warning {background:#e3ac4225;color:#986310;}
:root[data-theme="dark"] .sev-icon.warning {color:#edc771;}
.sev-icon.info {background:var(--series-1-soft);color:var(--series-1);}
.feed li {gap:12px;padding:12px 0;grid-template-columns:24px 1fr;font-size:11px;line-height:1.6;}
.feed .meta {font-size:9px;margin-top:5px;}
.btn {border-radius:9px;min-height:38px;padding:9px 14px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:background .15s,box-shadow .15s;}
.btn:hover {box-shadow:0 3px 10px #152b4310;}
.btn.primary {box-shadow:0 3px 8px #11645514;}
.btn.sm {min-height:30px;font-size:10px;padding:5px 10px;}
.text-btn {border:0;background:transparent;color:var(--accent);padding:6px 0;font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap;}
input,select,textarea {background:var(--surface);padding:10px 12px;border-radius:8px;min-height:40px;font-size:12px;}
input[type=checkbox] {width:auto;min-height:0;accent-color:var(--accent);}
input::placeholder,textarea::placeholder {color:var(--muted);opacity:.85;}
label.field,#view-fleet label {font-size:11px;gap:6px;color:var(--ink-2);}
.form-grid {gap:16px;}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.segmented {padding:4px;background:var(--surface-2);border:0;gap:3px;}
.segmented button {background:transparent;border-radius:6px;font-size:11px;}
.segmented button.active {background:var(--surface);box-shadow:0 1px 4px #20384e12;color:var(--accent);}
.table-toolbar {display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.search-field {display:flex;align-items:center;gap:10px;min-width:230px;flex:1;max-width:420px;border:1px solid var(--border);border-radius:9px;padding-left:12px;background:var(--surface);}
.search-field>span {font-size:23px;color:var(--muted);}
.search-field input {border:0;background:transparent;}
.filter-field {min-width:160px;}
#vehicleCount {margin-left:auto;font-size:11px;}
th {font-size:10px;letter-spacing:.4px;padding:12px;background:var(--surface-2);font-weight:600;}
td {padding:15px 12px;font-size:11px;vertical-align:middle;}
td strong {font-weight:600;}
td .muted {font-size:10px;margin-top:3px;}
tbody tr:last-child td {border-bottom:0;}
.table-wrap {border:1px solid var(--border);border-radius:10px;}
.pill {font-size:10px;padding:4px 9px;font-weight:500;}
.pill.good {background:#16856e14;color:var(--good-ink);}
.pill.critical {background:#c94e5812;color:var(--critical);}
.bar {height:5px;}
.workspace-tabs {display:flex;border-bottom:1px solid var(--border);gap:26px;margin-bottom:22px;overflow:auto;}
.workspace-tabs button {background:none;border:0;border-bottom:2px solid transparent;padding:13px 0;font-size:12px;white-space:nowrap;cursor:pointer;color:var(--muted);}
.workspace-tabs button[aria-pressed=true] {border-color:var(--accent);color:var(--accent);font-weight:600;}
#view-fleet > [data-fleet-section=access] {background:transparent;box-shadow:none;padding:0 0 12px;border:0;margin-bottom:0;}
.access-panel {margin:0!important;max-width:430px;}
.access-panel summary {font-size:11px!important;font-weight:500!important;color:var(--muted);}
#fleetFeedback:empty {display:none;}
#view-fleet details:not(.access-panel) {border-top:1px solid var(--border);padding-top:12px;}
#view-fleet summary {font-size:12px;}
.m-grid {gap:20px;}
.m-card h3 {font-size:15px;}
.m-card ul {line-height:1.8;}
.risk-num {font-size:32px;}
.chat {height:calc(100vh - 260px);border-radius:18px;}
.msg {padding:16px 20px;line-height:1.75;font-size:13px;}
.suggestions .btn {font-size:10px;font-weight:500;background:var(--surface-2);border-color:transparent;}
.chat-input {gap:12px;padding-top:20px;}
.chat-input textarea {height:48px;}
.drawer {padding:28px;background:var(--page);box-shadow:-16px 0 70px #0e223526;}
.drawer-bg {background:#091a3070;backdrop-filter:blur(3px);}
.stat {padding:14px;border-radius:12px;}
.stat .label {font-size:10px;}
.stat .value {margin-top:6px;}
.empty {padding:38px 15px;font-size:12px;}
.sr-only,.skip-link:not(:focus) {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.skip-link:focus {position:fixed;top:10px;left:10px;z-index:2000;background:var(--surface);padding:12px;border:2px solid var(--accent);}
@media(min-width:1600px) {.operations-grid {grid-template-columns:minmax(0,2.4fr) minmax(340px,1fr);} .map {height:560px;} .operations-grid > .grid {grid-template-rows:350px 320px;}}
@media(max-width:1200px) {
  .app {grid-template-columns:205px minmax(0,1fr);} main {padding-left:22px;padding-right:22px;}
  .sidebar {padding-left:12px;padding-right:12px;}.workspace-badge {font-size:10px;}
  .kpi {padding:15px;} .kpi .value {font-size:24px;}
  .operations-grid {grid-template-columns:minmax(0,1.4fr) minmax(285px,1fr);}
  #dashKpis .kpi:nth-child(n+5) {display:block;} #dashKpis .kpi:nth-child(n+5) .value {margin:4px 0;}
}
@media(max-width:1000px) {
  .operations-grid {grid-template-columns:1fr;}.operations-grid>.grid {grid-template-columns:1fr 1fr;grid-template-rows:350px;}
  #dashKpis {grid-template-columns:repeat(2,minmax(0,1fr));}.map {height:420px;}
  .today {display:none;} .view-head h1 {font-size:26px;}
}
@media(max-width:760px) {
  .app {display:block;} .sidebar {position:sticky;top:0;height:auto;flex-direction:row;align-items:center;overflow-x:auto;padding:9px 12px;gap:5px;}
  .sidebar .brand {padding:0 12px 0 0;font-size:0;gap:0;} .brand-mark {width:32px;height:32px;font-size:21px;}
  .workspace-badge,.nav-heading,.sidebar-foot {display:none;} .nav-btn {padding:9px;min-width:37px;width:auto;flex:none;}
  .nav-btn.active {box-shadow:inset 0 -2px #69d9be;}.nav-badge {position:absolute;transform:translate(13px,-10px);font-size:8px;padding:0 4px;line-height:14px;}
  main {padding:0 16px 28px;} .topbar {height:58px;margin-bottom:22px;}.topbar-actions {gap:10px;}.breadcrumb {font-size:10px;gap:8px;}
  .environment-tag {font-size:8px;padding:4px 6px;}.avatar {display:none;}.view-head h1 {font-size:25px;}
  .card {padding:16px;}.operations-grid>.card {padding:16px;}.operations-grid>.grid {grid-template-columns:1fr;grid-template-rows:330px 300px;}
  #dashKpis {gap:10px;}.kpi .value {font-size:23px;}.kpi .label {font-size:10px;}.kpi-icon {width:25px;height:25px;}
  .kpi .note {font-size:9px;}.map {height:350px;}.workspace-tabs {gap:22px;}.form-grid {grid-template-columns:1fr;}
  .chat {height:calc(100dvh - 280px);min-height:400px;}.table-toolbar {gap:10px;}.search-field {max-width:none;min-width:100%;}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
.compact-theme {display:none;background:var(--surface);border:1px solid var(--border);border-radius:8px;width:32px;height:32px;cursor:pointer;font-size:18px;}
@media(max-width:760px) {.compact-theme {display:inline-grid;place-items:center;}.topbar-actions {gap:7px;}.environment-tag {letter-spacing:.5px;}}