/*
   Patch for Capacitor/Cordova Mobile Integration
   Handling Notch and Safe Areas
*/

:root {
    /* Mobile-first Safe Area Variables */
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* 1. Header/Navbar Safe Area */
.navbar {
    padding-top: var(--sat) !important;
    height: calc(var(--nav-h) + var(--sat)) !important;
}

/* 2. Main Content Safe Area */
.main-area, .content-wrapper, .php-main {
    padding-top: var(--sat);
}

/* 3. Bottom Navigation / Tabbar Safe Area */
.mobile-tabbar {
    padding-bottom: calc(20px + var(--sab)) !important;
}

/* 4. Fix for fixed elements overlapping status bar */
.toast, .modal-overlay {
    padding-top: var(--sat);
}

/* 5. Generic Full-screen Shell Fix */
body {
    padding-top: var(--sat);
    padding-bottom: var(--sab);
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* Ensure no double padding on nested main areas */
.main-area .php-main {
    padding-top: 0;
}

/* Mobile-only search bar: hidden on desktop, shown on mobile */
.mobile-search-wrapper {
    display: none;
}
@media (max-width: 768px) {
    .mobile-search-wrapper {
        display: block;
    }
}

/* ─── Bottom clearance for pages using .content-wrapper > .php-main ───
   Prevents the last element (sign-out, submit button, etc.) from hiding
   behind the fixed mobile tabbar (~85px) or app bottom nav (65px).
   Only applies in web-view (app-view.css handles the app case separately). ── */
@media (max-width: 768px) {
    .web-view .content-wrapper .php-main {
        padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    }
}