/* 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 {
    /* 100vh on a mobile browser measures the viewport *behind* the address/toolbar chrome, so the bottom of
       a viewport-filling page (the week grid's last day rows) renders below the fold, hidden behind the
       toolbar. dvh tracks the actually-visible height; the 100vh line stays as the fallback for the rare
       engine without dvh support. */
    height: 100vh;
    height: 100dvh;
    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-up button from shrinking or wrapping —
   the two-word label 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;
}

/* Home icon 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;
}

@media (max-width: 600px) {
    /* Claw back the toolbar's desktop gutters. An icon button already carries 12px of its own padding inside
       a 48px tap target, so 16px of toolbar padding on top of that leaves the end buttons floating ~28px off
       each edge — on a 375px screen that is 24px of width the search field could have had, and it reads as
       the menu being adrift rather than tucked into the corner. 4px here puts the glyphs at the usual 16px
       inset with the tap targets untouched. */
    .mud-appbar .mud-toolbar {
        padding-left: 4px;
        padding-right: 4px;
    }

    /* 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;
    }
}