/* ==========================================================================
   Shared PWA stylesheet — loaded by all three PWA layouts
   (advisor_layout_top, tech_layout_top, customer_layout_top).
   Put only PWA-specific rules here that don't belong in assets/app.css.
   ========================================================================== */

/* ── Hero — geometric background with brand overlay ──────────────────────────
   Adjust --pwa-hero-overlay to control how dark the blue tint sits over the
   image. 0.0 = no tint (raw image), 1.0 = fully opaque brand-900. */
.pwa-hero {
  --pwa-hero-overlay: rgba(14, 60, 98, 0.90);

  background-color: #0d1c32;
  background-image:
    linear-gradient(var(--pwa-hero-overlay), var(--pwa-hero-overlay)),
    url("backgrounds/hero.jpg");
  background-size: cover;
  background-position: center;
}

/* Safe-area bottom padding for the fixed bottom nav bar so content
   doesn't hide behind the home indicator on notched devices.
   Tailwind's pb-safe class is not available by default; use this instead. */
.pb-safe {
  padding-bottom: 0.5rem;
}

/* Viewport shell class used on <html> and <body> in public/customer layouts.
   100vh is the fallback for Firefox mobile which doesn't reliably support dvh;
   100dvh overrides it on browsers that do. Without the fallback, Firefox
   collapses the body height and the bottom nav drifts to the top of content. */
.pwa-viewport {
  height: 100vh;
  height: 100dvh;
}

/* Explicit zero to guard against any browser-default body margin on first
   paint before Tailwind Preflight applies — prevents gap above the header. */
html, body {
  margin: 0;
  padding: 0;
}

/* Firefox flex-shrink fix: without min-height:0 the flex-1 <main> won't
   shrink below its content size in Firefox, breaking the scroll layout. */
main {
  min-height: 0;
}

/* Pull-to-refresh visual damping: prevent the browser's default
   overscroll bounce from conflicting with the PWA swipe handlers.
   Applied to main because the layout uses a flex-column with overflow-y:auto
   on <main>, not body scroll. */
html, body, main {
  overscroll-behavior-y: contain;
}