/**

 * Safe area for native app – pure CSS (no extra divs).

 * Only when body.native-app: header and footer get extra space so content

 * stays clear of Android status bar and nav bar. Correct background colors

 * (header = .header-nav, footer = .footer).

 *

 * Bottom inset: Android WebView often reports env(safe-area-inset-bottom) as 0.

 * Use max(48px, …) plus native injection (MainActivity) so modals stay above the nav bar.

 */



:root {

    --safe-area-inset-top: env(safe-area-inset-top, 0px);

    --safe-area-inset-right: env(safe-area-inset-right, 0px);

    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

    --safe-area-inset-left: env(safe-area-inset-left, 0px);

}



body.native-app,

html[data-native-app="true"] {

    /* Capacitor injects --safe-area-inset-* on html; fall back to env(); enforce minimums for Android */

    --app-safe-area-top: max(24px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));

    --app-safe-area-bottom: max(48px, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));

    --app-header-base-height: 4.375rem;

    --safe-area-top: var(--app-safe-area-top);

    --safe-area-bottom: var(--app-safe-area-bottom);



    /* Header and content share one formula: base header + native top inset */

    .header-nav {

        min-height: calc(var(--app-header-base-height) + var(--app-safe-area-top)) !important;

        height: calc(var(--app-header-base-height) + var(--app-safe-area-top)) !important;

        padding-top: var(--app-safe-area-top) !important;

    }



    /* Keep wrap compact; top inset is handled by header padding-top above */

    .header-nav .header-nav-wrap {

        padding-top: 0 !important;

        padding-bottom: 0 !important;

    }



    /* Content starts exactly below computed header height */

    .vertical-layout .content {

        margin-top: calc(var(--app-header-base-height) + var(--app-safe-area-top)) !important;

    }



    /* Footer: extra space at bottom with footer background */

    .footer {

        padding-bottom: var(--app-safe-area-bottom) !important;

    }



    /* Side nav (mobile drawer): logo area clear of status bar */

    .side-nav .nav-logo {

        padding-top: calc(var(--app-safe-area-top) + 20px) !important;

    }



    /* Modals: keep header/footer above system bars (fixed overlays ignore page footer padding) */

    .modal .modal-dialog {

        margin-top: calc(var(--app-safe-area-top) + 0.5rem) !important;

        margin-bottom: calc(var(--app-safe-area-bottom) + 0.5rem) !important;

    }



    .modal .modal-dialog.modal-dialog-scrollable {

        height: auto !important;

        max-height: calc(100dvh - var(--app-safe-area-top) - var(--app-safe-area-bottom) - 1rem) !important;

    }



    .modal .modal-dialog.modal-dialog-scrollable .modal-content {

        max-height: calc(100dvh - var(--app-safe-area-top) - var(--app-safe-area-bottom) - 1rem) !important;

        overflow: hidden;

    }



    .modal .modal-dialog.modal-dialog-scrollable .modal-body {

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

    }



    .modal .modal-dialog-centered {

        min-height: calc(100dvh - var(--app-safe-area-top) - var(--app-safe-area-bottom) - 1rem);

    }



    /* Fullscreen modal variants: safe area via dialog margins above */

    .modal .modal-dialog.modal-fullscreen,

    .modal .modal-dialog.modal-fullscreen-sm-down,

    .modal .modal-dialog.modal-fullscreen-md-down,

    .modal .modal-dialog.modal-fullscreen-lg-down,

    .modal .modal-dialog.modal-fullscreen-xl-down,

    .modal .modal-dialog.modal-fullscreen-xxl-down {

        margin: 0 !important;

        min-height: calc(100dvh - var(--app-safe-area-top) - var(--app-safe-area-bottom));

        max-height: calc(100dvh - var(--app-safe-area-top) - var(--app-safe-area-bottom));

        align-items: flex-start;

    }



    @media (max-width: 576px) {

        .modal-fullscreen-sm-down .modal-content {

            max-height: 100% !important;

        }

    }



    .fixed-top {

        top: var(--app-safe-area-top) !important;

    }

}



@media only screen and (max-width: 768px) {

    body.native-app .header-nav .header-nav-wrap,

    html[data-native-app="true"] .header-nav .header-nav-wrap {

        /* padding-top: .75rem; */

        padding-bottom: 0.75rem;

    }

}

body.native-app.demo-mode .vertical-layout .content,
html[data-native-app="true"] body.demo-mode .vertical-layout .content {
    margin-top: calc(var(--app-header-base-height) + var(--app-safe-area-top) + var(--ngage-demo-bar-height, 2.5rem)) !important;
}