/* Universal Safe-Area CSS for all pages */
/* This ensures content doesn't overlap status bars and gesture areas on mobile devices */

/* Apply to HTML element for top safe area */
html {
    padding-top: env(safe-area-inset-top, 0) !important;
}

/* Apply to body for bottom safe area */
body {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

/* Fixed headers and navbars */
.navbar,
.navbar.fixed-top,
header {
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0)) !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
}

/* Fixed bottom navigation */
.mobile-bottom-nav,
.bottom-nav,
footer.fixed-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
    padding-left: env(safe-area-inset-left, 0) !important;
    padding-right: env(safe-area-inset-right, 0) !important;
}

/* Main content area offset for fixed navbar */
body.has-fixed-navbar {
    padding-top: calc(80px + env(safe-area-inset-top, 0)) !important;
}

@media (max-width: 991.98px) {
    body.has-fixed-navbar {
        padding-top: calc(70px + env(safe-area-inset-top, 0)) !important;
    }
}