html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; }
.page-split { display: flex; height: calc(100vh - 56px); min-height: 420px; }
.side { width: 360px; max-width: 45vw; overflow-y: auto; border-right: 1px solid var(--bs-border-color); padding: .75rem; background: var(--bs-body-bg); }
.map-wrap { flex: 1; position: relative; min-width: 0; }
.map { position: absolute; inset: 0; }
.map-banner { position: absolute; top: 8px; left: 8px; z-index: 5; }
.status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; vertical-align: baseline; }
.vehicle-row { cursor: pointer; }
.vehicle-row:hover, .vehicle-row.active { background: var(--bs-secondary-bg); }
.fallback-map { width: 100%; height: 100%; background: #e9eef2; }
.fallback-map text { font: 11px sans-serif; fill: #222; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.kpi { font-size: 1.15rem; font-weight: 600; }
.small-muted { color: var(--bs-secondary-color); font-size: .8rem; }
.login-box { max-width: 380px; margin: 12vh auto; }
.replay-bar { position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 5; background: rgba(255,255,255,.95); border-radius: .5rem; padding: .5rem .75rem; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
@media (max-width: 768px) {
  .page-split { flex-direction: column-reverse; height: auto; }
  .side { width: 100%; max-width: none; max-height: 40vh; border-right: 0; border-top: 1px solid var(--bs-border-color); }
  .map-wrap { height: 60vh; flex: none; }
}
.list-group-item.vehicle-row.active { color: inherit; background: var(--bs-secondary-bg); border-color: var(--bs-border-color); }
.list-group-item.vehicle-row.active .small-muted { color: var(--bs-secondary-color); }