/**
 * Native App Safe Area Handling — iOS & Android
 *
 * Strategy:
 * - Status bar overlay mode is ON (WebView extends behind status bar + home indicator)
 * - Header becomes position:fixed (never sticky — avoids all iOS scroll-bounce glitches)
 * - Body padding clears the fixed header at top and fixed nav at bottom
 * - Bottom nav uses auto height with proper safe-area padding
 * - Modals start BELOW the fixed header (not at top:0 with padding)
 * - --native-header-h is measured by JS (native-init.js) for accuracy across devices
 * - All values use !important to override base @media rules
 *
 * This CSS only applies when html has class "capacitor-native" (set by native-init.js)
 * so it has ZERO impact on web browsers.
 */

/* ═══════════════════════════════════════════════════
   SHARED (both iOS and Android native)
   ═══════════════════════════════════════════════════ */

/* Fixed white bar behind the system status bar — z-index above everything */
html.capacitor-native body::before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #ffffff;
  z-index: 10000;
  pointer-events: none;
}

/* Body: top padding = safe area + header height (measured by JS, fallback 72px).
   Fallback is 72px (covers taller destination headers). JS refines it at DOMContentLoaded. */
html.capacitor-native body {
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--native-header-h, 72px) + 8px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  html.capacitor-native body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Header: FIXED position — eliminates all sticky scroll-bounce glitches on iOS */
html.capacitor-native .header {
  position: fixed !important;
  top: env(safe-area-inset-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9000 !important;
  background: var(--surface, #ffffff) !important;
}

/* Bottom nav: only on mobile-sized screens (matches base CSS breakpoint) */
@media (max-width: 768px) {
  html.capacitor-native .bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9000 !important;
    height: auto !important;
    padding-top: 8px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    background: #ffffff !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08) !important;
    align-items: center !important;
    justify-content: space-around !important;
  }
}

/* Nav tabs: consistent sizing, no iOS @supports hack interference */
@media (max-width: 768px) {
  html.capacitor-native .bnav-tab {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
  }
}

/* Modals/overlays on MOBILE (phones): full-bleed below the fixed header */
@media (max-width: 768px) {
  html.capacitor-native .essentials-modal,
  html.capacitor-native .roster-modal,
  html.capacitor-native .overlay {
    top: calc(env(safe-area-inset-top, 0px) + var(--native-header-h, 72px)) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Modals/overlays on TABLET (iPad): keep the nice centered floating card style.
   Just ensure they can't go behind the fixed header. The overlay uses inset:40px which
   is fine. The essentials/roster use top:50%+transform which is also fine since
   the header is small relative to iPad screen. Just add a safe top clamp. */
@media (min-width: 769px) {
  html.capacitor-native .overlay {
    top: calc(env(safe-area-inset-top, 0px) + var(--native-header-h, 72px) + 20px) !important;
    padding-top: 0 !important;
  }
  html.capacitor-native .essentials-modal,
  html.capacitor-native .roster-modal {
    top: calc(env(safe-area-inset-top, 0px) + var(--native-header-h, 72px) + 20px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: auto !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - var(--native-header-h, 72px) - 60px) !important;
    padding-top: 0 !important;
  }
}

/* Modal/overlay internal sticky headers */
html.capacitor-native .essentials-header,
html.capacitor-native .roster-header,
html.capacitor-native .overlay-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1;
}

/* Category tabs (destination page) — sits at top of scrollable area */
html.capacitor-native .category-tabs {
  top: 0 !important;
}

/* DM Chat View - sits below fixed header on native */
html.capacitor-native .dm-chat-view {
  top: calc(env(safe-area-inset-top, 0px) + var(--native-header-h, 72px)) !important;
}

/* Destination page: #nativeHeaderSpacer handles header clearance via JS.
   Zero out body padding-top and .main padding-top so the spacer is the single source of truth. */
html.capacitor-native body.page-destination {
  padding-top: 0 !important;
}
html.capacitor-native body.page-destination .main {
  padding-top: 0 !important;
}

/* Footer and FAB adjustments only where bottom nav exists */
@media (max-width: 768px) {
  html.capacitor-native .footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  html.capacitor-native .fab-addtip {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Tip sheet (login + add-a-tip): add bottom padding to clear the bottom nav */
  html.capacitor-native .sheet {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
}

/* ═══════════════════════════════════════════════════
   iOS-SPECIFIC
   ═══════════════════════════════════════════════════ */

/* iOS: ensure crisp white behind status bar (matches header) */
html.capacitor-ios body::before {
  background: #ffffff;
}

/* ═══════════════════════════════════════════════════
   ANDROID-SPECIFIC
   ═══════════════════════════════════════════════════ */

/* Android fallback: env(safe-area-inset-top) may return 0 on some WebViews.
   The --status-bar-height CSS variable is set by native-init.js as a fallback. */
html.capacitor-android body::before {
  height: env(safe-area-inset-top, var(--status-bar-height, 24px));
}

html.capacitor-android body {
  padding-top: calc(env(safe-area-inset-top, var(--status-bar-height, 24px)) + var(--native-header-h, 72px) + 8px) !important;
}

html.capacitor-android .header {
  top: env(safe-area-inset-top, var(--status-bar-height, 24px)) !important;
}

html.capacitor-android .essentials-modal,
html.capacitor-android .roster-modal,
html.capacitor-android .overlay {
  top: calc(env(safe-area-inset-top, var(--status-bar-height, 24px)) + var(--native-header-h, 72px)) !important;
}