/*
 * iOS status-bar / safe-area chrome overrides.
 * Loaded AFTER LifeDataVault.Client.styles.css so !important rules beat
 * Bootstrap reboot (--bs-body-bg: #fff) and Blazor scoped layout CSS.
 */

html,
body {
    background-color: #0c1624 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#app,
#app > .page,
.page.page-app,
.page.page-marketing {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#app {
    background-color: #0c1624 !important;
    min-height: 100dvh;
}

@media (max-width: 899.98px) {
    :root {
        /*
         * safe-area-top and layout-top-offset are alternate probes for the same
         * physical band under the status icons — never sum them.
         */
        --ldv-header-top-inset: max(
            var(--ldv-safe-area-top, env(safe-area-inset-top, 0px)),
            var(--ldv-layout-top-offset, 0px)
        );
        /*
         * Fallback until ldvLayout.syncMobileChromeHeight() runs. Do not add
         * layout-top-offset — negative top pulls the header up without growing
         * the gap before app content.
         */
        --ldv-mobile-chrome-height: calc(
            3.25rem + 0.35rem + var(--ldv-safe-area-top, env(safe-area-inset-top, 0px))
        );
    }

    /*
     * When Safari insets the layout viewport below the status bar, fixed top:0
     * starts below the letterbox — paint upward with a negative top offset so
     * ink (#0c1624) fills behind the status icons instead of default black.
     */
    body::before {
        content: "";
        position: fixed;
        top: calc(-1 * var(--ldv-layout-top-offset, 0px));
        left: 0;
        right: 0;
        height: var(--ldv-header-top-inset);
        background-color: #0c1624 !important;
        z-index: 9998;
        pointer-events: none;
        transform: translateY(var(--ldv-visual-viewport-offset, 0px));
        will-change: transform;
    }

    header.ldv-header,
    .ldv-header.navbar,
    .landing-bar.ldv-header,
    .marketing-chrome.ldv-header {
        position: fixed !important;
        top: calc(-1 * var(--ldv-layout-top-offset, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        z-index: 9999 !important;
        transform: translateY(var(--ldv-visual-viewport-offset, 0px));
        will-change: transform;
        background-color: #0c1624 !important;
        padding-top: var(--ldv-header-top-inset) !important;
        padding-bottom: 0.35rem !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        min-height: calc(3.25rem + var(--ldv-header-top-inset)) !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(90, 140, 210, 0.28);
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .ldv-header::before {
        display: none;
    }

    .page-marketing > .marketing-chrome.ldv-header + .marketing-shell {
        padding-top: var(--ldv-mobile-chrome-height);
    }

    .page-marketing > .marketing-chrome.ldv-header + .marketing-shell.marketing-shell-auth {
        padding-top: calc(var(--ldv-header-top-inset) + 3.25rem + 0.15rem);
    }

    .landing .landing-stage,
    .page-marketing > .landing-bar.ldv-header + .marketing-shell-home .landing-stage {
        padding-top: var(--ldv-mobile-chrome-height);
    }

    .top-row.vault-status-bar {
        padding-top: 0.35rem !important;
    }
}

/* Phone: collapsed nav — full-width fixed header bar with logo + menu toggle. */
@media (max-width: 640.98px) {
    :root {
        --ldv-mobile-chrome-height-fallback: calc(
            var(--ldv-header-top-inset) + 3.25rem + 0.35rem
        );
        /*
         * Cap runaway JS measurements (keyboard / visualViewport glitches) while
         * still allowing slightly tighter live reads when valid.
         */
        --ldv-mobile-chrome-reserved: min(
            var(--ldv-mobile-chrome-height, var(--ldv-mobile-chrome-height-fallback)),
            var(--ldv-mobile-chrome-height-fallback)
        );
    }

    .nav-menu > .top-row.ldv-header {
        position: fixed !important;
        top: calc(-1 * var(--ldv-layout-top-offset, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        margin-top: 0 !important;
        z-index: 9999 !important;
        transform: translateY(var(--ldv-visual-viewport-offset, 0px));
        will-change: transform;
        background-color: #0c1624 !important;
        padding-top: var(--ldv-header-top-inset) !important;
        padding-bottom: 0.35rem !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        min-height: calc(3.25rem + var(--ldv-header-top-inset)) !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(90, 140, 210, 0.28);
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .nav-menu > .top-row.ldv-header > .container-fluid {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 3.25rem;
    }

    /*
     * Fixed header is out of flow — collapse the sidebar column so we do not
     * stack a second chrome band above app-main. Reserve exactly one band with
     * app-main padding so the status bar sits flush under the fixed header.
     */
    .page-app .sidebar {
        height: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .page-app .sidebar .nav-menu {
        min-height: 0 !important;
    }

    .page-app .app-main {
        position: relative;
        isolation: isolate;
        padding-top: var(--ldv-mobile-chrome-reserved) !important;
        background: linear-gradient(
            to bottom,
            #0c1624 0,
            #0c1624 var(--ldv-mobile-chrome-reserved),
            var(--ldv-app-main-bg, var(--ldv-paper, #f2f7f4)) var(--ldv-mobile-chrome-reserved)
        ) !important;
    }

    .page-app .app-main > .top-row.vault-status-bar {
        position: relative;
        z-index: 1;
        margin-top: 0 !important;
        min-height: 0 !important;
        box-sizing: border-box;
    }

    /*
     * Expanded hamburger menu: fixed overlay below the header — do not grow the
     * sidebar column or strip app-main padding (content stays in place).
     */
    .nav-menu-backdrop {
        position: fixed;
        top: var(--ldv-mobile-chrome-reserved);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9997;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(12, 22, 36, 0.52);
        cursor: pointer;
        transform: translateY(var(--ldv-visual-viewport-offset, 0px));
        will-change: transform;
    }

    .page-app #nav-menu-panel.nav-scrollable:not(.collapse) {
        position: fixed !important;
        top: var(--ldv-mobile-chrome-reserved) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding-top: 0 !important;
        z-index: 9998 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        transform: translateY(var(--ldv-visual-viewport-offset, 0px));
        will-change: transform;
        box-sizing: border-box !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 28%),
            linear-gradient(180deg, var(--ldv-ink) 0%, var(--ldv-navy) 55%, #0a2238 100%) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    }

    .page-app .sidebar {
        padding-top: 0 !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        position: static !important;
    }

    .page-app .app-page-body:has(> .app-focus-panel) {
        padding-top: 0.5rem !important;
    }

    /* Authenticated canvas — avoid ink (#0c1624) peeking through chrome gaps. */
    #app > .page.page-app {
        background-color: var(--ldv-app-main-bg, var(--ldv-paper, #eef2f7)) !important;
        min-height: 100dvh;
    }
}

/*
 * Tablet sidebar (641–899px): keep the brand lockup in the nav column instead of
 * pulling it into a full-width fixed bar — negative top offsets clip the logo.
 */
@media (min-width: 641px) and (max-width: 899.98px) {
    .nav-menu > .top-row.ldv-header {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        margin: 0 !important;
        background-color: var(--ldv-ink) !important;
        padding-top: calc(0.45rem + var(--ldv-header-top-inset, 0px)) !important;
        padding-bottom: 0.45rem !important;
        padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
        min-height: calc(2.75rem + var(--ldv-header-top-inset, 0px)) !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        display: block !important;
        overflow: visible !important;
    }

    .nav-menu > .top-row.ldv-header > .container-fluid {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 2.75rem;
    }

    .page-app .sidebar {
        padding-top: 0 !important;
        margin-top: 0 !important;
        background-color: transparent !important;
        position: sticky !important;
        top: 0 !important;
    }
}