/**
 * 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).
 */

: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"] {
    /* Use Capacitor-injected --safe-area-inset-* on html when present */
    --app-safe-area-top: var(--safe-area-inset-top, 0px);
    --app-safe-area-bottom: var(--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 clear of system bars */
    .modal .modal-dialog {
        margin-top: calc(var(--app-safe-area-top) + 1rem) !important;
        margin-bottom: calc(var(--app-safe-area-bottom) + 1rem) !important;
    }

    .modal .modal-dialog-centered {
        min-height: calc(100% - var(--app-safe-area-top) - var(--app-safe-area-bottom) - 2rem);
    }

    /* Fullscreen modal variants: keep pinned below native top inset site-wide */
    .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-top: var(--app-safe-area-top) !important;
        margin-bottom: var(--app-safe-area-bottom) !important;
        min-height: calc(100dvh - var(--app-safe-area-top) - var(--app-safe-area-bottom));
        align-items: flex-start;
    }

    .modal.modal-fullscreen {
        padding-top: var(--app-safe-area-top);
        padding-bottom: var(--app-safe-area-bottom);
    }

    @media (max-width: 576px) {
        .modal-fullscreen-sm-down .modal-content {
            max-height: calc(100vh - var(--app-safe-area-top) - var(--app-safe-area-bottom) - 48px) !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;
    }
}