:root {
  --municipal-navy: #002b53;
  --municipal-blue: #1d71b8;
  --municipal-gold: #eab308;
  --ink: #11243a;
  --muted: #587084;
  --line: #cbd9e4;
  --canvas: #edf3f7;
  --surface: #ffffff;
  --header-height: 76px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: var(--canvas); font-family: Arial, Helvetica, sans-serif; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--municipal-gold); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-150%); padding: 9px 14px; color: white; background: var(--municipal-navy); border-radius: 7px; }
.skip-link:focus { transform: translateY(0); }
.app-shell { height: 100%; }

.municipal-header {
  position: relative;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-height);
  padding: 7px clamp(14px, 3vw, 34px);
  background: white;
  border-bottom: 4px solid var(--municipal-blue);
  box-shadow: 0 2px 12px rgb(0 43 83 / 12%);
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--municipal-navy); text-decoration: none; }
.brand img { width: 38px; height: auto; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .92rem; letter-spacing: .02em; text-transform: uppercase; }
.brand small { margin-top: 2px; color: var(--muted); font-size: .74rem; }
.municipal-header nav { display: flex; gap: 5px; margin-left: auto; }
.municipal-header nav a { padding: 9px 12px; color: var(--municipal-navy); border-radius: 7px; font-size: .84rem; font-weight: 800; text-decoration: none; }
.municipal-header nav a:hover, .municipal-header nav a.active { color: white; background: var(--municipal-blue); }
.mobile-fleet-toggle { display: none; }

.workspace { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: calc(100% - var(--header-height)); }
body.embedded .municipal-header { display: none; }
body.embedded .workspace { height: 100%; }
.fleet-panel { position: relative; z-index: 400; display: flex; min-width: 0; flex-direction: column; background: white; border-right: 1px solid var(--line); box-shadow: 5px 0 18px rgb(0 43 83 / 8%); }
.panel-heading { padding: 22px 20px 16px; border-bottom: 1px solid #e0e8ee; }
.eyebrow { margin: 0 0 5px; color: #16804b; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
h1 { margin: 0; color: var(--municipal-navy); font-size: 1.65rem; line-height: 1.1; }
.live-summary { display: grid; grid-template-columns: 9px auto 1fr; align-items: center; gap: 7px; margin-top: 12px; font-size: .74rem; }
.live-summary strong { color: #16804b; }
.live-summary > span:last-child { color: var(--muted); text-align: right; }
.live-dot { width: 9px; height: 9px; background: #1ca45e; border-radius: 50%; box-shadow: 0 0 0 4px rgb(28 164 94 / 12%); animation: live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 8px rgb(28 164 94 / 0%); } }

.filters { padding: 14px 14px 10px; border-bottom: 1px solid #e0e8ee; }
.filters label { display: block; margin-bottom: 5px; color: var(--muted); font-size: .72rem; font-weight: 800; }
.filters input { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--ink); background: #f8fbfd; border: 1px solid #9cb7c9; border-radius: 8px; }
.route-filters { display: flex; gap: 6px; margin-top: 9px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; }
.route-filter { flex: 0 0 auto; min-width: 36px; height: 32px; padding: 4px 9px; color: var(--municipal-navy); background: white; border: 1px solid var(--line); border-radius: 999px; font-size: .74rem; font-weight: 900; cursor: pointer; }
.route-filter.active { color: var(--route-text, white); background: var(--route-color, var(--municipal-blue)); border-color: var(--route-color, var(--municipal-blue)); }

.vehicle-list { flex: 1; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.vehicle-card { position: relative; display: grid; min-height: 78px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 10px; width: 100%; margin: 0 0 7px; padding: 10px 11px 11px 13px; overflow: hidden; color: var(--ink); background: white; border: 1px solid #c9d9e4; border-left: 5px solid var(--vehicle-color, var(--municipal-blue)); border-radius: 9px; box-shadow: 0 2px 7px rgb(0 43 83 / 6%); text-align: left; cursor: pointer; isolation: isolate; }
.vehicle-card:hover { border-color: #8faec2; border-left-color: var(--vehicle-color, var(--municipal-blue)); box-shadow: 0 4px 12px rgb(0 43 83 / 12%); }
.vehicle-card.selected { border-color: var(--municipal-blue); border-left-color: var(--vehicle-color, var(--municipal-blue)); box-shadow: 0 0 0 2px rgb(0 119 190 / 14%), 0 4px 12px rgb(0 43 83 / 12%); }
.card-event-fill { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: var(--trip-progress, 0%); background: var(--vehicle-color, var(--municipal-blue)); border-right: 2px solid var(--vehicle-color, var(--municipal-blue)); opacity: .1; pointer-events: none; transition: width 500ms ease-out; }
.card-route { display: inline-flex; position: relative; z-index: 1; justify-self: start; min-height: 24px; align-items: center; padding: 4px 8px; color: var(--route-text, white); background: var(--route-color, var(--municipal-blue)); border-radius: 5px; font-size: .68rem; font-weight: 900; }
.card-event-time { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; justify-self: end; color: var(--municipal-navy); font-size: .68rem; font-weight: 900; white-space: nowrap; }
.card-event-time b { color: var(--muted); font-size: .62rem; }
.card-main, .card-meta { position: relative; z-index: 1; display: block; min-width: 0; }
.card-main strong, .card-main small, .card-meta strong, .card-meta small { display: block; }
.card-main strong { font-size: .86rem; }
.card-main small { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { text-align: right; }
.card-meta strong { font-size: .75rem; }
.card-meta small { margin-top: 3px; color: #16804b; font-size: .65rem; }
.card-progress-bus { position: absolute; z-index: 2; right: auto; bottom: -2px; left: clamp(23px, var(--trip-progress, 0%), calc(100% - 18px)); display: block; width: 31px; height: 31px; transform: translateX(-50%); pointer-events: none; transition: left 500ms ease-out; }
.card-progress-bus .bus-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 1px rgb(0 43 83 / 16%)); }
.vehicle-card.stale .card-meta small { color: #c1740d; }
.empty-state { display: grid; height: 180px; place-items: center; align-content: center; color: var(--muted); text-align: center; }
.empty-state p { margin: 8px 0; font-size: .82rem; }
.loading-bus { font-size: 2rem; animation: loading-bounce 1.6s ease-in-out infinite; }
@keyframes loading-bounce { 50% { transform: translateY(-7px) rotate(4deg); } }
.panel-footer { padding: 10px 14px; color: var(--muted); background: #f7fafc; border-top: 1px solid var(--line); font-size: .66rem; }

.map-pane, #fleet-map { position: relative; width: 100%; height: 100%; }
#fleet-map { z-index: 1; background: #dce7ea; }
.leaflet-tile-pane { filter: saturate(.58) contrast(.94) brightness(1.04); }
.leaflet-control-zoom a { color: var(--municipal-navy); }
.map-status { position: absolute; z-index: 350; top: 12px; left: 12px; max-width: calc(100% - 100px); padding: 8px 11px; color: var(--municipal-navy); background: rgb(255 255 255 / 94%); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 3px 12px rgb(0 43 83 / 14%); font-size: .76rem; font-weight: 800; backdrop-filter: blur(8px); }
.recenter-button, .locate-button { position: absolute; z-index: 350; right: 14px; display: grid; height: 42px; place-items: center; color: white; background: var(--municipal-blue); border: 3px solid white; border-radius: 11px; box-shadow: 0 4px 15px rgb(0 43 83 / 25%); font-size: 1.4rem; cursor: pointer; }
.recenter-button { width: 42px; }
.recenter-button { bottom: 48px; }
.locate-button { grid-template-columns: 22px auto; bottom: 98px; gap: 6px; width: auto; padding: 0 11px 0 8px; color: var(--municipal-navy); background: white; border-color: var(--municipal-blue); font-size: .7rem; font-weight: 900; }
.locate-button[aria-pressed="true"] { color: white; background: #16804b; border-color: white; }
.recenter-button svg, .locate-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.locate-button svg .solid { fill: currentColor; stroke: none; }
.map-legend { position: absolute; z-index: 350; right: 14px; bottom: 10px; display: flex; flex-wrap: wrap; justify-content: end; gap: 7px 12px; max-width: calc(100% - 28px); padding: 6px 9px; color: var(--muted); background: rgb(255 255 255 / 92%); border: 1px solid var(--line); border-radius: 7px; font-size: .65rem; }
.map-legend span { display: flex; align-items: center; gap: 5px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend-live { background: #1ca45e; }
.legend-stale { background: #d1841f; }
.legend-ghost { background: #8fb8d7; border: 1px solid white; opacity: .65; }
.legend-drift { background: #c43b2f; border-radius: 1px !important; }

.bus-marker { position: relative; width: 68px; height: 68px; }
.bus-marker-shadow { position: absolute; left: 16px; bottom: 5px; width: 36px; height: 10px; background: rgb(0 43 83 / 22%); border-radius: 50%; filter: blur(1px); animation: shadow-breathe 1.8s ease-in-out infinite; }
.bus-bearing { position: absolute; inset: 5px; transform: rotate(var(--bearing)); transition: transform 650ms ease-out; }
.bus-bounce { width: 100%; height: 100%; animation: bus-bounce 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
.bus-bounce .bus-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgb(0 43 83 / 18%)); }
.bus-marker-label { position: absolute; z-index: 2; bottom: -2px; left: 50%; transform: translateX(-50%); padding: 3px 7px; color: white; background: var(--municipal-navy); border: 2px solid white; border-radius: 999px; box-shadow: 0 2px 6px rgb(0 43 83 / 25%); font-size: 8px; font-weight: 900; line-height: 1; white-space: nowrap; }
.bus-marker.stale .bus-marker-label { background: #b46d12; }
.bus-marker.selected::before { content: ""; position: absolute; inset: 2px; border: 3px solid var(--municipal-gold); border-radius: 50%; animation: selected-ring 1.6s ease-out infinite; }
.schedule-ghost { opacity: .52; filter: saturate(.65); }
.schedule-ghost .bus-bearing { transition: transform 1s linear; }
.bus-ghost { display: block; width: 100%; height: 100%; }
.bus-ghost .bus-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 1px rgb(0 43 83 / 12%)); }
.ghost-marker-label { position: absolute; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%); padding: 2px 5px; color: var(--municipal-navy); background: rgb(255 255 255 / 94%); border: 1px solid #8fb8d7; border-radius: 999px; font-size: 7px; font-weight: 900; line-height: 1; white-space: nowrap; }
@keyframes bus-bounce {
  0%, 100% { transform: translateY(1px) rotate(-4deg) scale(1.015, .985); }
  25%, 75% { transform: translateY(-3px) rotate(0) scale(.99, 1.01); }
  50% { transform: translateY(1px) rotate(4deg) scale(1.015, .985); }
}
@keyframes shadow-breathe { 25%, 75% { transform: scaleX(.88); opacity: .65; } }
@keyframes selected-ring { 100% { inset: -7px; opacity: 0; } }
.bus-leaflet-icon { background: transparent; border: 0; }
.user-location-icon { background: transparent; border: 0; }
.user-location-pin { position: relative; display: flex; width: max-content; min-width: 118px; height: 38px; align-items: center; gap: 5px; padding: 4px 10px 4px 35px; color: white; background: #0879c1; border: 2px solid white; border-radius: 999px; box-shadow: 0 3px 12px rgb(0 43 83 / 32%); }
.user-location-pin strong { font-size: 10px; white-space: nowrap; }
.user-person { position: absolute; bottom: -1px; left: 1px; width: 38px; height: 46px; transform-origin: center bottom; animation: person-bob 1.9s ease-in-out infinite; }
.user-person svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 1px rgb(0 43 83 / 20%)); }
.person-head { fill: #ffd5b5; stroke: #173e62; stroke-width: 1.5; }
.person-hair { fill: #5c3826; }
.person-eye { fill: #173e62; }
.person-smile, .person-leg, .person-arm { fill: none; stroke: #173e62; stroke-width: 2.5; stroke-linecap: round; }
.person-body { fill: #f5b82e; stroke: #173e62; stroke-width: 1.5; }
.person-arm { transform-box: fill-box; transform-origin: left bottom; animation: person-wave .85s ease-in-out infinite alternate; }
.person-arm-left { animation: none; }
.user-location-pin::after { content: ""; position: absolute; bottom: -5px; left: 10px; width: 16px; height: 6px; background: rgb(0 43 83 / 22%); border-radius: 50%; animation: person-shadow 1.9s ease-in-out infinite; }
@keyframes person-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes person-wave { from { transform: rotate(-8deg); } to { transform: rotate(22deg); } }
@keyframes person-shadow { 50% { transform: scaleX(.72); opacity: .55; } }
.route-popup h2 { margin: 0 0 4px; color: var(--municipal-navy); font-size: 1rem; }
.route-popup p { margin: 3px 0; color: var(--muted); }
.popup-route { display: inline-block; margin-right: 5px; padding: 3px 7px; color: var(--route-text); background: var(--route-color); border-radius: 5px; font-weight: 900; }

.trip-inspector { position: absolute; z-index: 360; top: 56px; right: 14px; display: flex; width: min(350px, calc(100% - 28px)); max-height: calc(100% - 170px); flex-direction: column; overflow: hidden; background: rgb(255 255 255 / 97%); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 10px 34px rgb(0 43 83 / 24%); backdrop-filter: blur(10px); }
.trip-inspector[hidden] { display: none; }
.trip-inspector header { display: grid; grid-template-columns: auto minmax(0, 1fr) 32px; align-items: center; gap: 10px; padding: 13px; background: #f5f9fc; border-bottom: 1px solid var(--line); }
.trip-inspector header small, .trip-inspector header strong { display: block; }
.trip-inspector header small { color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.trip-inspector header strong { margin-top: 2px; color: var(--municipal-navy); font-size: 1rem; }
.trip-inspector header button { display: grid; width: 30px; height: 30px; place-items: center; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: 7px; font-size: 1.25rem; cursor: pointer; }
.inspector-route { display: grid; min-width: 66px; min-height: 34px; place-items: center; padding: 5px 9px; color: var(--route-text, white); background: var(--route-color, var(--municipal-blue)); border-radius: 999px; font-size: .68rem; font-weight: 900; }
.inspector-direction { margin: 0; padding: 13px 14px 10px; color: var(--municipal-navy); font-size: .82rem; font-weight: 800; }
.inspector-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0 14px 12px; gap: 7px; }
.inspector-stats div { padding: 8px 9px; background: #f3f7fa; border-radius: 7px; }
.inspector-stats div:last-child { grid-column: 1 / -1; }
.inspector-stats dt { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.inspector-stats dd { margin: 3px 0 0; color: var(--municipal-navy); font-size: .78rem; font-weight: 900; }
.inspector-track-heading { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 10px 14px 7px; border-top: 1px solid var(--line); }
.inspector-track-heading strong { color: var(--municipal-navy); font-size: .78rem; }
.inspector-track-heading span { color: var(--muted); font-size: .58rem; text-align: right; }
.inspector-stops { margin: 0; padding: 4px 14px 14px 38px; overflow-y: auto; color: var(--ink); }
.inspector-stops li { position: relative; min-height: 31px; padding: 3px 0 8px 7px; border-left: 3px solid var(--route-color, var(--municipal-blue)); font-size: .72rem; }
.inspector-stops li::marker { color: var(--route-color, var(--municipal-blue)); font-weight: 900; }
.inspector-stops li strong, .inspector-stops li time { display: block; }
.inspector-stops li time { margin-top: 2px; color: var(--muted); font-size: .62rem; }
.inspector-stops li.next strong { color: var(--municipal-blue); }

@media (max-width: 760px) {
  :root { --header-height: 68px; }
  .municipal-header { gap: 8px; padding-inline: 10px; }
  .brand { gap: 7px; }
  .brand img { width: 31px; }
  .brand strong { font-size: .7rem; }
  .brand small { font-size: .62rem; }
  .municipal-header nav { display: none; }
  .mobile-fleet-toggle { display: block; margin-left: auto; padding: 8px 10px; color: white; background: var(--municipal-blue); border: 0; border-radius: 8px; font-size: .74rem; font-weight: 900; }
  .mobile-fleet-toggle span { display: inline-grid; min-width: 19px; height: 19px; margin-left: 4px; place-items: center; color: var(--municipal-navy); background: white; border-radius: 999px; }
  .workspace { display: block; position: relative; }
  .map-pane { position: absolute; inset: 0; }
  .fleet-panel { position: absolute; z-index: 450; top: 8px; right: 8px; bottom: auto; left: 8px; max-height: min(74vh, 650px); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 10px 36px rgb(0 43 83 / 28%); transform: translateY(calc(-100% - 18px)); transition: transform 220ms ease-out; }
  .fleet-panel.open { transform: translateY(0); }
  .panel-heading { padding: 15px 16px 11px; }
  h1 { font-size: 1.25rem; }
  .filters { padding-block: 10px 8px; }
  .map-status { top: 8px; left: 8px; }
  .recenter-button { right: 10px; bottom: 44px; }
  .locate-button { right: 10px; bottom: 94px; }
  .map-legend { right: 10px; bottom: 8px; }
  .trip-inspector { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: min(64vh, 560px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}