html, body {
    margin: 0;
    padding: 0;
    background: #0e1117;
    color: #e6edf3;
    font-family: 'Roboto', sans-serif;
}

#blazor-error-ui {
    background: #b00020;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#map {
    width: 100%;
    height: 480px;
    border-radius: 4px;
}

.tag-color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
}

.metric-card {
    text-align: center;
    padding: 16px;
}

.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85em; }

/* ---------- Brand-colour-safe form-control overrides ----------
   The user-selected branding "Primary" colour drives the theme palette, which means
   on-state switch thumbs and other primary-coloured elements inherit it. When the
   brand colour is very dark (black, very dark navy, etc.) — or very pale — the
   defaults can blend into the dark surface and become unreadable. These rules give
   the OFF state a guaranteed neutral contrast, and let the ON state still pick up
   the brand colour so the toggle's "active" semantic stays brand-coloured. */
.mud-switch .mud-switch-thumb {
    background-color: #d6dae0 !important;        /* light neutral thumb in OFF state */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.mud-switch .mud-switch-input:checked + .mud-switch-base .mud-switch-thumb,
.mud-switch.mud-checked .mud-switch-thumb,
.mud-switch .mud-checked .mud-switch-thumb {
    background-color: var(--mud-palette-primary) !important;
}
.mud-switch-track {
    background-color: rgba(255, 255, 255, 0.25) !important;
    opacity: 1 !important;
}
.mud-switch .mud-switch-input:checked ~ .mud-switch-track,
.mud-switch.mud-checked .mud-switch-track {
    background-color: var(--mud-palette-primary) !important;
    opacity: 0.55 !important;
}

/* ---------- Brand-colour-safe button text ----------
   Outlined and Text MudButton variants render their text + border using the raw
   Primary palette colour — which becomes unreadable when the brand colour is very
   dark (black) or very pale. We blend the brand colour toward white via CSS
   color-mix so the hue stays visible (you can still tell it's a brand-themed
   button) but the luminance is bumped to a guaranteed-readable level.
   Filled buttons aren't touched here — MudBlazor auto-derives a contrast text
   colour for those based on Primary's luminance and gets it right in most cases. */
.mud-button-outlined-primary,
.mud-button-text-primary {
    color: color-mix(in srgb, var(--mud-palette-primary) 25%, white 75%) !important;
}
.mud-button-outlined-primary {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, white 65%) !important;
}
.mud-button-outlined-primary:hover,
.mud-button-text-primary:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Left-nav active-link contrast ----------
   By default MudNavLink colours its active item with the Primary palette colour,
   which is unreadable when the brand is very dark (e.g. black). Force the active
   item's text + icon to white and use a subtle white tint behind it so the active
   state stays legible regardless of brand colour. */
.mud-nav-link.active,
.mud-nav-link.active-link,
.mud-nav-link[aria-current="page"] {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}
.mud-nav-link.active .mud-nav-link-icon,
.mud-nav-link.active-link .mud-nav-link-icon,
.mud-nav-link[aria-current="page"] .mud-nav-link-icon,
.mud-nav-link.active .mud-icon-root,
.mud-nav-link.active-link .mud-icon-root,
.mud-nav-link[aria-current="page"] .mud-icon-root {
    color: #ffffff !important;
}