.dashboard-active .topbar { height: auto; min-height: 58px; padding: 8px 24px; display: flex; justify-content: space-between; gap: 20px; }
.fleet-status-bar { flex: none; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 18px; margin: 4px 0; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.dashboard-active .breadcrumb { font-size: 10px; gap: 7px; }
.dashboard-active .topbar-tools { gap: 12px; }
.desktop-header-actions { display: flex; align-items: center; gap: 12px; }
.desktop-header-actions .refresh-button { min-height: 32px; padding: 7px 10px; }
.desktop-header-actions .date-label { display: flex; font-size: 10px; }
.fleet-status-bar .fleet-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; min-width: 0; gap: 3px; }
.fleet-status-bar .summary-item { min-height: 49px; padding: 7px 9px; gap: 8px; justify-content: center; }
.fleet-status-bar .summary-icon { width: 27px; height: 29px; border-radius: 9px; }
.fleet-status-bar .summary-icon svg { width: 15px; height: 15px; }
.fleet-status-bar .summary-number { font-size: 21px; line-height: 1.05; }
.fleet-status-bar .summary-label { font-size: 9px; margin-top: 4px; }
.fleet-status-bar .summary-item.active { background: var(--violet-soft); }
.fleet-status-bar .summary-item.active::before, .fleet-status-bar .summary-item::after { display: none; }
.fleet-status-bar .extra-statuses { display: flex; justify-content: flex-end; align-items: center; gap: 7px; margin: 0; padding: 0; }
.fleet-status-bar .extra-status { font-size: 9px; padding: 4px 9px; background: white; border: 1px solid #e7e0ed; border-radius: 6px; color: var(--secondary); }
.fleet-status-bar .extra-status.active { background: var(--violet-soft); border-color: #bda4ee; color: var(--violet); }
.fleet-status-bar .extra-status strong { margin-left: 5px; font-weight: 750; }
body:not(.dashboard-active) .fleet-status-bar { display: none; }
.dashboard-active .dashboard-toolbar { display: none; }
.dashboard-active .page-content { padding-top: 0; }
.dashboard-active .workspace-footer { padding: 9px 2px; }
.drawer-list-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.drawer-detail-panel { display: none; }
.fleet-list-heading, .fleet-list-launch { display: none; }
.vehicle-card, body.compact-cards .vehicle-card { --card-band: #f3f1eb; --card-divider: #e6e2d9; padding: 0; content-visibility: auto; contain-intrinsic-block-size: auto 250px; }
.vehicle-card > .vehicle-select { padding: 13px 12px 10px; border-radius: 10px 10px 0 0; background: var(--card-band); border-bottom: 1px solid var(--card-divider); }
.vehicle-card > .vehicle-select:focus-visible { outline-offset: -3px; }
.vehicle-card > .vehicle-select .vehicle-card-bottom { border-top-color: var(--card-divider); }
.vehicle-card > .card-telemetry { padding: 10px 12px; background: #fff; }
.vehicle-card > .gps-warning { margin: 9px 12px 0; }
.vehicle-card > .vehicle-action-strip { padding: 8px 8px 10px; border-top-color: var(--card-divider); border-radius: 0 0 10px 10px; background: var(--card-band); }
body.compact-cards .vehicle-card > .vehicle-select { padding-top: 10px; padding-bottom: 8px; }
body.compact-cards .vehicle-card > .card-telemetry { padding-top: 8px; padding-bottom: 8px; }
body.compact-cards .vehicle-card > .vehicle-action-strip { padding-top: 6px; padding-bottom: 6px; }
.vehicle-type-icon[data-status], .map-vehicle-bearing[data-status] { --vehicle-status: #111827; --vehicle-status-bg: #f1f2f4; --vehicle-status-border: #b9bec7; --vehicle-status-glow: #11182724; }
.vehicle-type-icon[data-status=running], .map-vehicle-bearing[data-status=running] { --vehicle-status: #16a34a; --vehicle-status-bg: #eaf8ef; --vehicle-status-border: #9eddb4; --vehicle-status-glow: #16a34a28; }
.vehicle-type-icon[data-status=stopped], .map-vehicle-bearing[data-status=stopped] { --vehicle-status: #dc2626; --vehicle-status-bg: #fff0f0; --vehicle-status-border: #efb0b0; --vehicle-status-glow: #dc262630; }
.vehicle-type-icon[data-status=idle], .map-vehicle-bearing[data-status=idle] { --vehicle-status: #ca8a04; --vehicle-status-bg: #fff8db; --vehicle-status-border: #e7cd79; --vehicle-status-glow: #ca8a0428; }
.vehicle-type-icon[data-status=inactive], .map-vehicle-bearing[data-status=inactive] { --vehicle-status: #64748b; --vehicle-status-bg: #f1f3f6; --vehicle-status-border: #bac3d0; --vehicle-status-glow: #64748b28; }
.vehicle-type-icon[data-status] { color: var(--vehicle-status); background: var(--vehicle-status-bg); border-color: var(--vehicle-status-border); }
.drawer-detail-heading .vehicle-type-icon { width: 28px; height: 28px; border-radius: 8px; }
.drawer-detail-heading .vehicle-type-icon svg { width: 20px; height: 20px; }
.drawer-detail-heading .vehicle-registration { flex: 1; }
.vehicle-marker.aerial-vehicle-marker { width: 44px !important; height: 44px !important; margin-left: -22px !important; margin-top: -22px !important; }
.aerial-vehicle-marker .marker-bubble { width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.map-vehicle-bearing { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 28px; transform-origin: center; transition: transform .35s linear; }
.map-vehicle-bearing::before { content: ''; position: absolute; inset: -3px; border-radius: 12px; background: var(--vehicle-status-glow); border: 1px solid transparent; }
.is-selected .map-vehicle-bearing::before { border-color: var(--vehicle-status); box-shadow: 0 0 0 2px #ffffffbd,0 4px 10px var(--vehicle-status-glow); }
.map-vehicle-image, .aerial-vehicle-marker .map-vehicle-image { position: relative; z-index: 1; width: 42px; height: 28px; overflow: visible; filter: drop-shadow(0 2px 2px #13233235); }
.vehicle-icon-preview .map-vehicle-image { width: 90px; height: 50px; }
.vehicle-map-popup { font-family: inherit; }
.vehicle-map-popup .leaflet-popup-content-wrapper { padding: 12px; border: 1px solid #e7e0ed; border-radius: 16px; background: #fffefa; color: var(--ink); box-shadow: 0 12px 40px #32284226; }
.vehicle-map-popup .leaflet-popup-content { margin: 0; line-height: 1.5; overscroll-behavior: contain; scrollbar-width: thin; }
.vehicle-map-popup .leaflet-popup-scrolled { border: 0; padding-right: 5px; }
.vehicle-map-popup .leaflet-popup-tip { background: #fffefa; }
.vehicle-map-popup a.leaflet-popup-close-button { top: 5px; right: 5px; width: 30px; height: 30px; font-size: 24px; line-height: 30px; border-radius: 50%; color: var(--secondary); background: #fffefa; }
.vehicle-map-popup a.leaflet-popup-close-button:hover { color: var(--violet); background: var(--violet-soft); }
.vehicle-popup-heading { display: flex; align-items: center; gap: 9px; padding-right: 25px; }
.vehicle-popup-heading > div { min-width: 0; }
.vehicle-popup-heading strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.vehicle-popup-heading small { display: block; font-size: 10px; color: var(--muted); }
.vehicle-popup-heading .vehicle-type-icon { width: 32px; height: 32px; border-radius: 10px; }
.vehicle-popup-status { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.vehicle-popup-status > span:last-child { font-size: 9px; color: var(--muted); }
.vehicle-popup .card-telemetry { grid-template-columns: repeat(4,minmax(0,1fr)); margin: 10px 0; padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.vehicle-popup .telemetry-item { flex-direction: column; align-items: flex-start; gap: 5px; }
.vehicle-popup-row { display: flex; gap: 8px; margin: 9px 0; font-size: 10px; overflow-wrap: anywhere; }
.vehicle-popup-row > .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--violet); }
.vehicle-popup-row > div { min-width: 0; }
.vehicle-popup-row small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 2px; }
.popup-geofence { padding-top: 8px; border-top: 1px solid var(--line); }
.popup-geofence strong, .popup-geofence strong + span { display: block; }
.popup-fence-badge { display: inline-block; margin-right: 5px; padding: 1px 5px; border-radius: 4px; font-size: 9px; }
.popup-fence-badge.entry { color: #18743c; background: #eaf8ef; }
.popup-fence-badge.exit { color: #89620a; background: #fff3ce; }
.vehicle-popup .vehicle-action { min-height: 44px; }
.vehicle-card-bottom { margin-top: 10px; padding-top: 9px; }
.card-telemetry { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 5px; padding: 10px 0; }
.telemetry-item { display: flex; align-items: center; gap: 5px; font-size: 10px; min-width: 0; color: var(--secondary); }
.telemetry-item .icon { width: 14px; height: 14px; flex-shrink: 0; }
.telemetry-item strong { font-size: 10px; font-weight: 650; white-space: nowrap; }
.telemetry-item small { display: block; font-size: 8px; color: var(--muted); margin-top: 2px; }
.telemetry-item.is-on { color: #23845f; }
.telemetry-item.is-off { color: #b25864; }
.telemetry-item.is-unknown, .telemetry-item.is-stale { color: #94869c; }
.vehicle-action-strip { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.vehicle-action { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 39px; border-radius: 7px; font-size: 8px; color: #766786; padding: 5px 2px; }
.vehicle-action .icon { width: 17px; height: 17px; }
.vehicle-action:hover, .vehicle-action:focus-visible { color: var(--violet); background: var(--violet-soft); }
.vehicle-action:disabled { cursor: not-allowed; opacity: .45; }
.vehicle-action.is-locked { color: #c45464; }
.selection-actions { flex-wrap: wrap; justify-content: flex-end; }
.selection-actions .vehicle-action-strip { border: 0; padding: 0; min-width: 230px; }
.selection-card { padding: 12px 14px; bottom: 18px; }
.selection-card .selection-metrics { padding-top: 10px; margin-top: 10px; }
.map-controls { top: 85px; transform: none; }
.map-button[aria-pressed=true] { color: var(--violet); background: #f4edff; }
.map-panel .map-legend { bottom: 175px; }
.sheet-handle-label { display: none; }
.drawer-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.drawer-detail-heading .vehicle-registration { flex-wrap: wrap; gap: 6px; font-size: 12px; }
.drawer-detail-heading .text-button { font-size: 10px; white-space: nowrap; }
.drawer-gps-time { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; margin: 5px 0 8px; }
.drawer-gps-time .icon { width: 12px; height: 12px; }
.drawer-movement { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.movement-preview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 10px; }
.movement-preview > span { display: flex; align-items: center; gap: 5px; }
.movement-preview .icon { width: 14px; height: 14px; }
.movement-preview .text-button { font-size: 10px; }
.movement-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 12px 0; }
.movement-form label { flex: 1; min-width: 120px; }
.movement-timeline { display: grid; gap: 8px; padding: 10px 0; }
.movement-event { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 5px 12px; border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 10px; }
.movement-event strong { color: var(--violet); text-transform: capitalize; }
.movement-event small { display: block; color: var(--muted); margin-top: 4px; }
.movement-totals { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; padding: 10px 0; }
.map-fullscreen { overflow: hidden; }
.map-fullscreen .map-panel { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; border: 0; border-radius: 0; z-index: 1200; }
.map-fullscreen .map-controls { top: 80px; }
.map-fullscreen .map-top-controls { top: max(16px,env(safe-area-inset-top)); }
.playback-dialog { width: min(960px,calc(100vw - 24px)); max-width: 960px; }
.playback-map { height: clamp(220px,46dvh,480px); width: 100%; border-radius: 11px; overflow: hidden; z-index: 0; }
.playback-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 12px; }
.playback-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.playback-buttons select { padding: 8px; background: var(--surface-soft); border-radius: 7px; }
.playback-progress { display: flex; gap: 12px; align-items: center; }
.playback-progress input { flex: 1; min-width: 0; accent-color: var(--violet); }
.playback-info { font-size: 11px; line-height: 1.6; color: var(--secondary); margin-top: 8px; }
.playback-marker { width: 28px; height: 28px; border-radius: 50%; background: var(--violet); border: 3px solid white; box-shadow: 0 2px 8px #35204550; }
.relay-state-note { margin: 10px 0; font-size: 11px; line-height: 1.7; }
.telemetry-item:is(button):hover { color: var(--violet); }
body.auth-locked > .main { display: none; }
.device-diagnostics, .device-diagnostics > span { display: flex; align-items: center; gap: 4px; }
.device-diagnostics { gap: 8px; }
.map-fullscreen .topbar, .map-fullscreen .fleet-status-bar, .map-fullscreen .sidebar, .map-fullscreen .vehicles-panel, .map-fullscreen .mobile-nav { visibility: hidden; }
.drawer-detail-heading .text-button { display: inline-flex; align-items: center; gap: 4px; }
.drawer-detail-heading .text-button svg { width: 14px; height: 14px; }
.vehicle-action, .map-button, .sheet-handle, .mobile-nav a, .mobile-nav button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.vehicle-action:active, .map-button:active, .mobile-nav a:active { background: var(--violet-soft); }
@media (max-width: 1250px) and (min-width: 761px) {
  .dashboard-active .topbar { padding: 8px 16px; }
  .fleet-status-bar { padding-left: 16px; padding-right: 16px; gap: 12px; }

  .dashboard-active .connection-label { display: none; }
  .desktop-header-actions { gap: 8px; }
  .desktop-header-actions .date-label { font-size: 9px; }
  .desktop-header-actions .refresh-button > span:last-child { display: none; }
  .fleet-status-bar .summary-icon { display: none; }
  .fleet-status-bar .summary-label { font-size: 8px; }
  .selection-main { flex-wrap: wrap; gap: 8px; }
  .selection-actions { width: 100%; justify-content: flex-start; }
  .selection-card .selection-actions > .button { display: none; }
}
@media (max-width:760px), (max-width:1024px) and (max-height:500px) {
  html, body { height: 100%; overscroll-behavior: none; }
  body { overflow: hidden; }
  .main, .dashboard-active .main { height: var(--app-height,100dvh); min-height: 0; padding-bottom: calc(56px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow: hidden; }
  .topbar, .dashboard-active .topbar { flex: none; padding-top: calc(8px + env(safe-area-inset-top)); padding-left: max(14px,env(safe-area-inset-left)); padding-right: max(14px,env(safe-area-inset-right)); }
  .page-content { flex: 1; min-width: 0; min-height: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .dashboard-active .page-content { overflow: hidden; }
  .secondary-view { min-width: 0; max-width: 100%; width: 100%; padding-bottom: 18px; }
  .app-dialog { width: min(520px,calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(var(--app-height,100dvh) - 24px - env(safe-area-inset-top)); margin: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .app-dialog .dialog-heading > div, #dialog-body, .detail-grid > div { min-width: 0; max-width: 100%; }
  .app-dialog .dialog-heading h2, .app-dialog .detail-grid strong, .app-dialog .dialog-copy, .app-dialog .notification-item { overflow-wrap: anywhere; }
  .app-dialog .dialog-heading > button { flex: none; }
  .app-dialog .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-dialog input, .app-dialog select, .app-dialog textarea { min-width: 0; max-width: 100%; }
  .auth-screen { height: var(--app-height,100dvh); overflow: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  input, select, textarea, .production-form input, .production-form select, .search-field input { font-size: 16px !important; }
  .keyboard-open .mobile-nav { display: none; }
  .keyboard-open .main { padding-bottom: 0; }
  .desktop-header-actions { display: none !important; }
  .dashboard-active { overflow: hidden; }
  .dashboard-active .topbar { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 0; min-height: 0; padding-bottom: 6px; }
  .dashboard-active .mobile-brand { grid-row: 1; grid-column: 1; min-height: 37px; }
  .dashboard-active .mobile-brand strong { font-size: 18px; }
  .dashboard-active .mobile-brand strong > span { font-size: 7px; }
  .dashboard-active .mobile-brand-icon svg { width: 24px; height: 28px; }
  .dashboard-active .topbar-tools { grid-row: 1; grid-column: 2; gap: 10px; }
  .fleet-status-bar { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); }
  .dashboard-active .fleet-status-bar .fleet-summary { gap: 5px; padding: 0; }
  .fleet-status-bar .summary-item { flex-direction: row; min-height: 39px; padding: 4px; }
  .fleet-status-bar .summary-number { font-size: 19px; }
  .fleet-status-bar .summary-label { font-size: 8px; margin-top: 3px; }
  .fleet-status-bar .summary-icon { display: none; }
  .fleet-status-bar .extra-statuses { justify-content: center; }
  .fleet-status-bar .extra-status { padding: 3px 9px; font-size: 9px; }
  .dashboard-active .page-content { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 0; width: 100%; }
  .dashboard-active .dashboard-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .dashboard-active .connection-notice { flex: none; margin: 0; border-radius: 0; padding: 6px 12px; font-size: 10px; }
  .dashboard-active .fleet-workspace { position: relative; flex: 1; min-height: 0 !important; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 0; height: auto; }
  .dashboard-active:not(.fleet-list-open) .fleet-workspace:has(.vehicles-panel[data-drawer=detail]) { grid-template-rows: var(--mobile-map-height,60dvh) minmax(0,1fr); }
  .dashboard-active .map-panel { grid-row: 1; min-height: 0; height: auto; border-radius: 0; order: 0; }
  .dashboard-active .vehicles-panel { grid-row: 2; order: 1; margin-top: 0; min-height: 0; height: auto; overflow: hidden; border-radius: 19px 19px 0 0; border-top: 1px solid #ddd6e8; box-shadow: 0 -5px 18px #44345c13; z-index: 500; }
  .dashboard-active .vehicles-panel { transition: box-shadow .16s ease; }
  .dashboard-active:not(.fleet-list-open) .vehicles-panel[data-drawer=list] { display: none; }
  .dashboard-active .vehicles-panel.expanded { position: absolute; grid-row: 1 / -1; left: 0; right: 0; bottom: 0; height: calc(100% - 86px); margin-top: 0; box-shadow: 0 -12px 36px #44345c28; }
  .dashboard-active.fleet-list-open .vehicles-panel { position: absolute; inset: 0; grid-row: 1; display: flex; height: 100%; width: 100%; margin: 0; border: 1px solid #e4dfd5; border-radius: 18px 18px 0 0; background: var(--surface-soft); box-shadow: 0 -4px 24px #44345c1a; animation: fleet-list-enter .16s var(--ease); }
  .fleet-list-open .fleet-list-heading { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 12px; padding: 17px 16px 15px; border-bottom: 1px solid #e8e4dd; background: #f3f1eb; }
  .fleet-list-heading > div:first-child { min-width: 0; }
  .fleet-list-eyebrow { display: block; margin-bottom: 4px; color: #8c8274; font-size: 8px; font-weight: 750; letter-spacing: 1.4px; }
  .fleet-list-heading h2 { font-size: 20px; letter-spacing: -.5px; }
  .fleet-list-heading p { margin-top: 5px; color: var(--secondary); font-size: 10px; }
  .fleet-list-window-actions { display: flex; align-items: center; gap: 7px; flex: none; }
  .fleet-list-window-actions button { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 44px; padding: 8px; color: #76698a; border: 1px solid #e3ded6; border-radius: 11px; background: #fff; }
  .fleet-list-window-actions button:active { background: var(--violet-soft); }
  .fleet-list-minimize { flex-direction: column; gap: 2px; font-size: 8px; }
  .fleet-list-window-actions .icon { width: 17px; height: 17px; }
  .fleet-list-open .vehicles-panel .sheet-handle { display: none; }
  .fleet-list-open .vehicles-heading { padding-top: 13px; padding-bottom: 10px; }
  .fleet-list-open .vehicles-heading h2 { color: var(--secondary); font-size: 12px; }
  .fleet-list-open .vehicles-heading p { display: none; }
  .fleet-list-open .drawer-list-panel > .search-field { min-height: 42px; background: white; }
  .fleet-list-open .vehicles-panel .vehicle-tabs { display: flex; margin: 0 14px 12px; }
  .fleet-list-open .vehicles-panel .vehicle-list { padding-bottom: 16px; }
  .dashboard-active .sheet-handle { width: 100%; height: 30px; min-height: 30px; margin: 0; justify-content: space-between; padding: 0 17px; position: relative; touch-action: none; flex: none; }
  .sheet-handle > span:not(:first-child) { width: auto; height: auto; background: transparent; border-radius: 0; }
  .sheet-handle > span:first-child { position: absolute; top: 5px; left: calc(50% - 17px); }
  .sheet-handle-label { display: inline; font-size: 10px; color: var(--secondary); margin-top: 5px; }
  .sheet-handle [data-icon] { margin-top: 4px; color: var(--violet); }
  .sheet-handle .icon { width: 15px; height: 15px; }
  .drawer-list-panel { min-height: 0; overflow: hidden; }
  .vehicles-heading { padding: 2px 14px 8px; }
  .vehicles-heading h2 { font-size: 14px; }
  .vehicles-heading .count-badge { font-size: 9px; min-width: 20px; padding: 3px 5px; }
  .drawer-list-panel > .search-field { margin: 0 14px 8px; height: 33px; min-height: 33px; }
  .drawer-list-panel > .vehicle-tabs { display: none; }
  .vehicles-panel.expanded .drawer-list-panel > .vehicle-tabs { display: flex; margin: 0 14px 10px; }
  .vehicles-panel:not(.expanded)[data-drawer=list] .vehicles-heading { display: none; }
  .vehicle-list, .vehicles-panel.expanded .vehicle-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 10px; }
  .vehicle-list-footer { display: none; }
  .vehicle-card { padding: 0; }
  .selected .vehicle-card-bottom { display: flex; }
  .vehicle-mobile-detail { display: none !important; }
  .vehicles-panel[data-drawer=detail] .drawer-list-panel { display: none; }
  .drawer-detail-panel:not([hidden]) { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 16px; flex: 1; min-height: 0; }
  .drawer-detail-panel .card-telemetry { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 7px 0; gap: 5px; }
  .drawer-detail-panel .telemetry-item strong { font-size: 10px; }
  .drawer-detail-panel .telemetry-item small { font-size: 8px; }
  .drawer-detail-panel .telemetry-item .icon { width: 13px; height: 13px; }
  .drawer-detail-panel .vehicle-action-strip { padding-top: 5px; }
  .drawer-gps-time .text-button { margin-left: auto; font-size: 10px; padding: 4px 0; }
  .vehicle-action, .drawer-detail-panel .vehicle-action { min-height: 44px; font-size: 9px; }
  .drawer-detail-panel .telemetry-item:is(button) { min-height: 40px; }
  .drawer-detail-panel .vehicle-address { display: none; }
  .vehicles-panel.expanded .drawer-detail-panel .vehicle-address { display: flex; }
  .dashboard-active .workspace-footer { display: none; }
  .map-top-controls { top: 10px; left: 12px; right: 12px; }
  .map-caption-desktop { display: none; }
  .fleet-list-launch { display: flex; min-height: 49px; gap: 9px; padding: 8px 10px; text-align: left; border-color: #e8e3da; background: #fffefa; box-shadow: 0 4px 14px #473e4f15; }
  .fleet-list-launch > span:nth-child(2) { font-size: 11px; font-weight: 750; }
  .fleet-list-launch .map-region { font-size: 8px; font-weight: 500; margin-top: 4px; }
  .fleet-list-launch-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--violet); background: #f1ecf8; border: 1px solid #e6ddf2; border-radius: 9px; }
  .fleet-list-launch-icon svg { width: 18px; height: 18px; }
  .fleet-list-launch-arrow { color: #91849f; }
  .fleet-list-launch-arrow svg { width: 13px; height: 13px; }
  .map-controls { top: 70px; right: 12px; gap: 6px; }
  .map-controls .map-button { width: 40px; height: 40px; }
  .map-zoom .map-button { height: 40px; }
  .dashboard-active .leaflet-bottom { bottom: 0 !important; }
  .dashboard-active .leaflet-control-attribution { padding-bottom: 2px !important; }
  .dashboard-active .leaflet-control-scale { margin: 0 8px 20px !important; }
  .mobile-nav { height: calc(56px + env(safe-area-inset-bottom)); padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); padding-left: max(9px,env(safe-area-inset-left)); padding-right: max(9px,env(safe-area-inset-right)); }
  .mobile-nav svg { width: 19px; height: 19px; }
  .map-fullscreen .map-panel { display: block; }
  .map-fullscreen .map-controls { top: calc(80px + env(safe-area-inset-top)); }
  .map-fullscreen .leaflet-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .map-fullscreen .vehicles-panel, .map-fullscreen .mobile-nav { visibility: hidden; }
  .playback-dialog { padding: 18px; }
  .playback-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .playback-form label:first-child { grid-column: 1 / -1; }
  .playback-form > button { grid-column: 1 / -1; }
  .playback-map { height: 32dvh; min-height: 190px; }
}
@keyframes fleet-list-enter { from { opacity: .6; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:760px) and (max-height:560px), (max-width:1024px) and (max-height:500px) {
  .dashboard-active .mobile-brand { min-height: 26px; }
  .fleet-status-bar .summary-item { min-height: 30px; }
  .fleet-status-bar .summary-number { font-size: 15px; }
  .map-controls { top: 60px; display: flex; flex-direction: row; gap: 4px; }
  .map-zoom { display: flex; flex-direction: row; }
  .map-controls .map-button, .map-zoom .map-button { width: 32px; height: 32px; }
  .fleet-list-open .fleet-list-heading { padding: 4px 14px; }
  .fleet-list-heading h2 { font-size: 17px; }
  .fleet-list-heading p, .fleet-list-eyebrow { display: none; }
  .fleet-list-window-actions button { min-height: 36px; padding: 4px 8px; }
  .fleet-list-open .vehicles-heading { position: absolute; top: 49px; right: 13px; padding: 0; }
  .fleet-list-open .vehicles-heading > div { display: none; }
  .fleet-list-open .drawer-list-panel > .search-field { min-height: 36px; height: 36px; margin-top: 6px; margin-right: 61px; margin-bottom: 6px; }
  .fleet-list-open .vehicles-panel .vehicle-tabs { margin-bottom: 6px; }
  .fleet-list-open .vehicle-tabs button { padding-top: 6px; padding-bottom: 6px; }
}