/*
 * 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 {
        --ldv-mobile-chrome-height: calc(
            var(--ldv-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px) +
            3.25rem +
            0.5rem
        );
    }

    /*
     * 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: calc(
            var(--ldv-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px)
        );
        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: calc(
            var(--ldv-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px)
        ) !important;
        padding-bottom: 0.5rem !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-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px)
        ) !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);
    }

    .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.55rem !important;
    }
}

/* Phone: collapsed nav — full-width fixed header bar with logo + menu toggle. */
@media (max-width: 640.98px) {
    .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: calc(
            var(--ldv-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px)
        ) !important;
        padding-bottom: 0.5rem !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-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px)
        ) !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;
    }

    .page-app .app-main {
        padding-top: var(--ldv-mobile-chrome-height) !important;
    }

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

/*
 * 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: #fff !important;
        padding-top: calc(
            0.45rem +
            var(--ldv-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 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-safe-area-top, env(safe-area-inset-top, 0px)) +
            var(--ldv-layout-top-offset, 0px)
        ) !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #d6d5d5;
        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;
    }
}