/* App shell: the viewport is fixed height and the main content area owns scrolling, so a page can
   size itself to the space below the app bar instead of growing the document. */
html, body {
    height: 100%;
    overflow: hidden;
}

/* Fill the viewport; MudMainContent's pt-16 keeps content clear of the 64px fixed app bar.
   Pages taller than the viewport scroll here rather than scrolling the body. */
.mud-main-content {
    height: 100vh;
    overflow-y: auto;
}

/* Embedded OpenStreetMap (LeafletMap.razor). The canvas needs an explicit size for Leaflet to lay
   out tiles; height is set inline per-use, width fills the container. */
.leaflet-map-canvas {
    width: 100%;
    border-radius: var(--mud-default-borderradius, 4px);
    z-index: 0; /* keep the map's stacking context below MudBlazor overlays/popovers */
}

.leaflet-map-link {
    display: inline-block;
    margin-top: 4px;
}

/* App-bar search: pill the outlined field. The 8px theme default (--mud-default-borderradius) reads as
   barely-rounded on the dense search box, so round it fully. Targets MudAutocomplete's outlined border
   via the appbar-search class set on the SessionSearch in MainLayout. The full class chain is needed to
   out-specify MudBlazor's own `.mud-input.mud-input-outlined .mud-input-outlined-border` (0,3,0) — a
   shorter selector loses on specificity and the corners stay at 8px. */
.appbar-search .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 999px;
}

/* App bar packs tightly on a phone. Keep the wordmark and the sign-in button from shrinking or wrapping —
   "Sign in" was wrapping to two lines and spilling out of the fixed-height bar — so they hold their natural
   size and the search takes the remaining width. */
.appbar-wordmark,
.appbar-signin {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Compact logomark home button. It shares the wordmark's top-left slot but is the mirror of it: hidden on
   wide screens (the wordmark carries the home link there) and revealed only on a phone where the wordmark is
   elided — so the two never show together and the home link is never duplicated. */
.appbar-home {
    display: none;
    flex-shrink: 0;
    align-items: center;
}

.appbar-home img {
    display: block;
}

@media (max-width: 600px) {
    /* On a phone the wordmark gives way to the search, and the logomark takes over its home-link role in the
       top-left. Collapse the centring spacers so the search bar takes the remaining width. */
    .appbar-wordmark {
        display: none;
    }

    .appbar-home {
        display: inline-flex;
    }

    .mud-appbar .mud-spacer {
        flex-grow: 0;
    }
}