/*
 * Redesign intent: let the map dominate while explorer and details remain
 * predictable. Mobile swaps modes instead of compressing three panels.
 */
body { display: grid; grid-template-rows: 56px minmax(0, 1fr); height: 100vh; height: 100dvh; }
#status-bar { grid-row: 1; }
#app-shell { display: grid; grid-row: 2; grid-template-columns: 360px minmax(0, 1fr); min-height: 0; overflow: hidden; }
body.has-selection #app-shell { grid-template-columns: 360px minmax(520px, 1fr) 360px; }
body.explorer-collapsed #app-shell { grid-template-columns: 0 minmax(0, 1fr); }
body.explorer-collapsed.has-selection #app-shell { grid-template-columns: 0 minmax(520px, 1fr) 360px; }
#vehicle-explorer { grid-column: 1; min-width: 0; overflow: hidden; }
#map-region { grid-column: 2; min-width: 0; }
#vehicle-detail { grid-column: 3; min-width: 0; }
#mobile-view-switch { display: none; }

@media (max-width: 1279px) {
  #app-shell, body.has-selection #app-shell { grid-template-columns: 320px minmax(0, 1fr); }
  body.has-selection #app-shell { grid-template-columns: 0 minmax(0, 1fr); }
  body.explorer-collapsed #app-shell, body.explorer-collapsed.has-selection #app-shell { grid-template-columns: 0 minmax(0, 1fr); }
  body.has-selection #sidebar-toggle { display: none; }
  body.has-selection #vehicle-explorer { visibility: hidden; border-right: 0; }
  #vehicle-detail { position: fixed; top: 56px; right: 0; bottom: 0; z-index: var(--z-detail); width: min(360px, calc(100vw - 32px)); box-shadow: var(--shadow-overlay); }
  body.has-selection #map-controls { right: calc(360px + var(--space-3)); }
}

@media (max-width: 767px) {
  body { grid-template-rows: 52px minmax(0, 1fr); }
  #app-shell, body.has-selection #app-shell, body.explorer-collapsed #app-shell, body.explorer-collapsed.has-selection #app-shell { display: block; position: relative; width: 100%; height: 100%; }
  #mobile-view-switch { display: grid; grid-template-columns: 1fr 1fr; }
  #sidebar-toggle, #fleet-health, #last-update { display: none; }
  #vehicle-explorer, #map-region { position: absolute; inset: 0; width: 100%; height: 100%; }
  #map-region { visibility: visible; }
  #vehicle-explorer { z-index: var(--z-drawer); visibility: hidden; transform: translateX(-105%); transition: transform var(--motion-standard) ease-out, visibility 0s linear var(--motion-standard); }
  body[data-mobile-view='list'] #vehicle-explorer { visibility: visible; transform: translateX(0); transition-delay: 0s; }
  body[data-mobile-view='list'] #map-region { visibility: hidden; }
  #vehicle-detail { position: fixed; inset: auto 0 0; z-index: var(--z-detail); width: auto; max-height: calc(100dvh - 58px - env(safe-area-inset-top)); border-radius: 12px 12px 0 0; padding-right: max(var(--space-4), env(safe-area-inset-right)); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); padding-left: max(var(--space-4), env(safe-area-inset-left)); box-shadow: var(--shadow-overlay); }
  #vehicle-detail[data-snap='compact'] { max-height: 292px; }
  #vehicle-detail[data-snap='half'] { max-height: 55dvh; }
  #vehicle-detail[data-snap='full'] { max-height: calc(100dvh - 64px); }
}