/* Native iOS layout guards.
   Capacitor draws the web view edge-to-edge, so interactive content must account
   for the device safe areas without adding a solid strip around the app. */

html.is-capacitor-app,
html.is-capacitor-app body {
    min-height: 100%;
}

html.is-capacitor-app .header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

html.is-capacitor-app .notifications-panel,
html.is-capacitor-app .mobile-menu {
    height: 100dvh;
    max-height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

html.is-capacitor-app .modal,
html.is-capacitor-app .progress-overlay {
    box-sizing: border-box;
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
}

html.is-capacitor-app footer {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}