/*
 * Server host shell styles (extracted from _Host.cshtml so they ride the
 * 1-year immutable static-asset cache instead of being re-shipped inside
 * every dynamically rendered HTML response).
 *
 * Server host viewport fix.
 *
 * Unlike the WASM host, Blazor Server keeps the rendered application
 * inside #app. Force the persistent navigation drawer to be anchored
 * to the VIEWPORT (position:fixed) and pinned between the fixed app
 * bar and the visible viewport bottom so its pinned contact actions
 * cannot be clipped below the fold. Note: MudBlazor's temporary
 * drawer class is "mud-drawer-temporary" (single dash).
 */
body.egk-app .navigation-drawer.mud-drawer:not(.mud-drawer-temporary) {
    position: fixed !important;
    top: var(--mud-appbar-height, 64px) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100vh - var(--mud-appbar-height, 64px)) !important;
    max-height: calc(100dvh - var(--mud-appbar-height, 64px)) !important;
}

body.egk-app .navigation-drawer.compact-drawer.mud-drawer:not(.mud-drawer-temporary) {
    top: var(--mud-appbar-height, 56px) !important;
    max-height: calc(100vh - var(--mud-appbar-height, 56px)) !important;
    max-height: calc(100dvh - var(--mud-appbar-height, 56px)) !important;
}

body.egk-app .navigation-drawer.mud-drawer:not(.mud-drawer-temporary) > .mud-drawer-content {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0;
    overflow: hidden !important;
}

/* Size the nav wrapper (the flex column that pins the Contact Us
   footer) directly against the VISIBLE viewport instead of the drawer
   box. The wrapper's top edge sits at the app bar's bottom, so
   100dvh - appbar puts the wrapper's bottom — and the pinned footer —
   exactly at the viewport bottom no matter how the drawer box itself
   gets sized in this host. */
body.egk-app .navigation-drawer.mud-drawer:not(.mud-drawer-temporary) .nav-wrapper {
    height: calc(100vh - var(--mud-appbar-height, 64px)) !important;
    height: calc(100dvh - var(--mud-appbar-height, 64px)) !important;
    max-height: calc(100vh - var(--mud-appbar-height, 64px)) !important;
    max-height: calc(100dvh - var(--mud-appbar-height, 64px)) !important;
}

#blazor-error-ui {
    display: none;
    background: #c51244;
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    z-index: 1000;
    width: 100%;
    font-family: Inter, Roboto, Arial, sans-serif;
}

    #blazor-error-ui .dismiss {
        position: absolute;
        right: .75rem;
        top: .5rem;
        cursor: pointer;
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 1.25rem;
    }

    #blazor-error-ui .reload {
        color: #fff;
        text-decoration: underline;
    }

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 11, 26, .75);
    color: #fff;
    font-family: Inter, Roboto, Arial, sans-serif;
    text-align: center;
}

    #components-reconnect-modal.components-reconnect-show,
    #components-reconnect-modal.components-reconnect-failed,
    #components-reconnect-modal.components-reconnect-rejected {
        display: flex;
    }