@charset "UTF-8";
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: #0a2034; color: #eaf5fb; font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { font: inherit; }
button, select, summary { -webkit-tap-highlight-color: transparent; }
button, select { min-height: 38px; border: 1px solid #3b5e77; border-radius: 9px; background: #102f48; color: #edf8ff; padding: 7px 12px; }
button { cursor: pointer; }
button:hover, button[aria-pressed="true"] { border-color: #48c8f1; color: #b8eeff; background: #16405a; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #48c8f1; outline-offset: 2px; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; }
.map-filter { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.map-filter label { color: #bed0df; font-size: 12px; }
.map-filter select { max-width: 100%; }
.map-views { display: flex; gap: 5px; }
.refresh-button { color: #8cdecf; }
#map { flex: 1 0 280px; min-height: 280px; isolation: isolate; background: #aed3df; color: #172033; }
.map-footer { padding: 10px 14px 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-bottom: 7px; color: #d3e3ed; font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 3px; }
.yellow { background: #ffe066; }.orange { background: #fdae61; }.red { background: #d7191c; }
#map-status { margin: 0; color: #f4faff; font-weight: 650; font-size: 12px; }
.freshness { margin: 3px 0 0; color: #9db6c9; font-size: 11px; }
body[data-state="stale"] .freshness, body[data-state="error"] #map-status { color: #ffd784; }
.map-hint { margin: 4px 0 0; color: #9db6c9; font-size: 11px; }
#map-list { border-top: 1px solid #28485f; margin-top: 9px; padding-top: 7px; }
#map-list summary { cursor: pointer; color: #a3e1f6; font-size: 12px; font-weight: 600; }
.list-scope { margin: 7px 0; color: #9db6c9; font-size: 11px; }
.alert-list { max-height: 230px; overflow: auto; overscroll-behavior: contain; }
.alert-card { padding: 12px 0; border-bottom: 1px solid #315066; }
.alert-card:last-child { border-bottom: 0; }
.alert-card h3, .popup-alert h3 { font-size: 13px; line-height: 1.45; margin: 0 0 7px; }
.alert-card p, .popup-alert p { margin: 5px 0; overflow-wrap: anywhere; }
.alert-card a { color: #9cdef4; }
.alert-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11px; font-weight: 700; color: #172033; background: #d4dce5; margin: 0 5px 4px 0; }
.badge-yellow { background: #ffe066; }.badge-orange { background: #fdae61; }.badge-red { background: #d7191c; color: white; }
.alert-phase { font-size: 11px; font-weight: 600; }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: 14px 18px; max-height: 280px; overflow: auto; }
.popup-alert + .popup-alert { border-top: 1px solid #d2dee7; margin-top: 13px; padding-top: 13px; }
.popup-alert { color: #172033; font-size: 12px; }
.popup-alert a { color: #0f5ca8; }
.popup-alert .dates { font-size: 11px; color: #3b5265; }
.leaflet-control-attribution { font-size: 10px; }
@media (max-width: 520px) {
  .map-toolbar { gap: 8px; padding: 10px; }
  .map-filter { flex: 1 1 100%; }
  .map-filter select { flex: 1; min-width: 0; }
  .map-views { flex: 1; }
  .map-views button { flex: 1; }
  button, select { padding: 7px 10px; font-size: 12px; }
  .map-footer { padding: 10px; }
  .legend { gap: 4px 12px; font-size: 10px; }
}