html, body {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}

.ni-brand {
    font-weight: 800;
    letter-spacing: -0.4px;
}

.ni-hover-card {
    transition: box-shadow .15s ease, transform .15s ease;
}

.ni-hover-card:hover {
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.20);
    transform: translateY(-2px);
}

.ni-hero {
    background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 55%, #43a047 100%);
    color: #fff;
    border-radius: 14px;
}

.ni-hero a {
    color: #fff;
}

a.ni-plain {
    text-decoration: none;
    color: inherit;
}

.ni-stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #b71c1c;
    color: #fff;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.35);
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    font-weight: 700;
}

#blazor-error-ui .reload {
    color: #fff;
    font-weight: 600;
}

/* iOS/WebKit fires a button's click only when the tap lands on the button itself — a tap on the
   SVG icon inside it does NOT register, so Blazor's @onclick never runs. That's why the all-icon
   top app bar did nothing on a real iPhone while text buttons elsewhere worked. Making icons (and
   the ripple layer) ignore pointer events lets every tap fall through to the clickable parent.
   Harmless on desktop/Blink, where icon taps already worked. */
.mud-button-root .mud-icon-root,
.mud-chip .mud-icon-root,
.mud-list-item .mud-icon-root,
.mud-nav-link .mud-icon-root {
    pointer-events: none;
}

/* iOS/WebKit only routes a tap's click event to Blazor's delegated @onclick handler when the
   tapped element presents as "clickable" — i.e. has cursor:pointer. MudBlazor's inner spans
   (e.g. .mud-icon-button-label) don't carry it, so on a real iPhone/iPad the click FIRES at the
   DOM level but Blazor never runs the handler. That's why the entire (all-@onclick) top app bar
   does nothing on iOS while <a href> navigation works. Forcing a pointer cursor across the page
   on touch devices makes every tap dispatch through to Blazor. It's invisible on touch (no cursor)
   and scoped away from desktop, so there's no visual side effect. */
@media (hover: none) and (pointer: coarse) {
    body,
    body * {
        cursor: pointer;
    }
}

/* Never let a popover (menus, selects, date/time pickers) render wider than the screen on a phone.
   The notification/account menus anchor to the right side of the app bar, so an over-wide panel
   ran off the edge; capping to the viewport keeps the whole panel on screen. */
.mud-popover {
    max-width: calc(100vw - 12px);
}

/* Bulleted lists on the Privacy Policy / Data Deletion pages: comfortable spacing and inherited
   (theme-aware) text color so they read well in both light and dark mode. */
.ni-policy-list {
    margin: 0 0 0.5rem 0;
    padding-left: 1.25rem;
}

.ni-policy-list li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

/* Permanent field-name labels rendered on top of traced field outlines on the park map.
   Pill-shaped semi-transparent badge so it reads against either satellite imagery or
   the street-map base layer; arrow hidden because the label sits inside the polygon. */
.leaflet-tooltip.ni-field-label {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: #111;
    font-weight: 600;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
}

.leaflet-tooltip.ni-field-label::before {
    display: none;
}