/**
 * iOS-specific styles
 *
 * Applied when body has class "app-ios" (set by Platform.init()).
 * Handles Dynamic Island, status bar safe areas, home indicator, and
 * iOS-specific layout adjustments.
 */

body.app-ios {
    --ios-footer-padding: 12px;
}

/* ==========================================
   Safe Area — Push content below status bar / Dynamic Island
   ========================================== */

body.app-ios #app {
    padding-top: var(--safe-area-top);
}

/* ==========================================
   Footer — Account for home indicator
   ========================================== */

body.app-ios .footer {
    height: calc(var(--footer-height) + var(--ios-footer-padding) + 16px);
    padding-bottom: var(--ios-footer-padding);
}

body.app-ios .pages {
    padding-bottom: calc(var(--footer-height) + var(--ios-footer-padding) + 16px);
}

/* ==========================================
   Offline Banner — Extend behind Dynamic Island
   The yellow background fills the entire status bar area,
   text appears below the island.
   ========================================== */

body.app-ios .offline-banner {
    padding-top: calc(var(--space-2) + var(--safe-area-top));
}

/* When offline, the banner covers the top safe area — remove app padding */
body.app-ios.is-offline #app {
    padding-top: 0;
}

/* Pages push down to account for taller banner */
body.app-ios.is-offline .pages {
    padding-top: calc(36px + var(--safe-area-top));
}

/* ==========================================
   Fullscreen Popups — Safe area padding
   ========================================== */

@media (max-width: 480px) {
    body.app-ios .popup-header {
        padding-top: calc(var(--space-4) + var(--safe-area-top));
    }

    body.app-ios .popup-footer {
        padding-bottom: calc(var(--space-4) + var(--safe-area-bottom));
    }
}

/* ==========================================
   Auth Pages — Safe area for login/unlock screens
   ========================================== */

body.app-ios .auth-page {
    padding-top: var(--safe-area-top);
}