html, body { margin: 0; height: 100%; width: 100%; }
/* The app shell must always fill the window (defensive — never collapse to a narrow column). */
#app, .mud-layout, .mud-main-content { width: 100%; max-width: 100%; }

#blazor-error-ui {
    background: #b71c1c; color: #fff; bottom: 0; display: none;
    left: 0; padding: 0.8rem 1.2rem; position: fixed; width: 100%; z-index: 10000;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.6rem; }
#blazor-error-ui a { color: #fff; text-decoration: underline; }

/* Leaflet must sit under MudBlazor overlays */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 400 !important; }
/* ...but marker popups must sit ABOVE the center crosshair (z-index 500) so they aren't covered. */
.leaflet-popup-pane { z-index: 700 !important; }

.build-stamp {
    position: fixed; left: 6px; bottom: 4px; font-size: 11px;
    color: var(--mud-palette-text-disabled, #999); z-index: 2000; pointer-events: none;
}

/* Situation-updates panel sits beside the map on desktop; overlays the map on small screens. */
@media (max-width: 768px) {
    .sw-situation-panel {
        position: absolute; top: 0; right: 0; bottom: 0;
        width: 88% !important; z-index: 1000;
        box-shadow: -2px 0 10px rgba(0,0,0,.25);
    }
}