/**
 * POS mobile v4 — global app-shell top offset / viewport height
 * Fixes module headings clipped under the mobile app header on iPhone Safari.
 * Desktop (≥768px) untouched.
 */
@media (max-width: 767.98px) {
  :root {
    --bv-app-header-h: 56px;
    --bv-mobile-nav-h: 60px;
  }

  /* Logged-in app: lock page scroll; modules scroll inside main */
  body:not(:has(#signup-btn)) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  body:not(:has(#signup-btn)) #root {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  /* App shell root — dynamic viewport instead of 100vh */
  body:not(:has(#signup-btn)) #root > div.flex.overflow-hidden {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
  }

  /* Column between header and fixed bottom nav */
  body:not(:has(#signup-btn)) #root > div.flex.overflow-hidden > div.flex.flex-col.min-w-0.overflow-hidden {
    min-height: 0 !important;
  }

  /* Mobile app header — safe-area top without double-applying on main */
  body:not(:has(#signup-btn)) #root header.h-\[56px\] {
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 40;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--bv-app-header-h) + env(safe-area-inset-top, 0px));
    min-height: calc(var(--bv-app-header-h) + env(safe-area-inset-top, 0px));
  }

  /* Main module scroll region */
  body:not(:has(#signup-btn)) #root main.flex-1.overflow-y-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overflow-anchor: none;
    scroll-padding-top: 0.25rem;
    padding-bottom: calc(var(--bv-mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
}