/*
 * pwa_base.css
 * Mobile + PWA compatibility layer for Stepwize
 * Applied on ALL pages via application.html.erb and home_landing.html.erb
 * Desktop layouts are UNCHANGED — these rules only fix iOS/Android/iPad behaviour.
 */

/* ─── 0. Mobile CSS baseline reset (PWA mobile only) ───────────────────────── */
/*                                                                               */
/* Tailwind CDN is only loaded in development (application.html.erb line 51).   */
/* Its Preflight reset was silently normalising box-sizing and the browser's     */
/* default 8px body margin in local dev, but NOT in staging/production.          */
/* These two rules replicate only that subset, scoped strictly to mobile so      */
/* desktop layout is completely unaffected.                                      */
.pwa-root *,
.pwa-root *::before,
.pwa-root *::after {
  box-sizing: border-box; /* prevents width overflow across all screen sizes */
}

@media (max-width: 768px) {
  .pwa-root {
    margin: 0; /* removes browser default 8px body margin — makes header
                  getBoundingClientRect() return the same value in staging
                  as in local dev, so --mobile-header-offset matches */
  }
}

/* ─── 1. Prevent iOS font inflation ────────────────────────────────────────── */
.pwa-root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─── 2. Prevent horizontal scroll on all devices ──────────────────────────── */
.pwa-root {
  overflow-x: hidden;
  max-width: 100%;
}

/* ─── 3. Prevent iOS auto-zoom on input focus (requires font-size >= 16px) ─── */
.pwa-root input:not(.search-input),
.pwa-root select:not(.search-input),
.pwa-root textarea:not(.search-input) {
  font-size: max(16px, 1em);
}

.pwa-root .search-input {
  font-size: max(16px, 0.95rem);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .pwa-root .search-input {
    width: 100%;
  }
}

/* ─── 4. Remove 300ms tap delay on interactive elements ────────────────────── */
.pwa-root a,
.pwa-root button,
.pwa-root [role="button"],
.pwa-root label,
.pwa-root input[type="submit"],
.pwa-root input[type="button"],
.pwa-root input[type="reset"],
.pwa-root select {
  touch-action: manipulation;
}

/* ─── 5. Smooth momentum scrolling on iOS for overflow containers ───────────── */
.pwa-root .dashboard-sidebar,
.pwa-root .employee-sidebar,
.pwa-root .operator-sidebar,
.pwa-root .modal-container,
.pwa-root .table-container,
.pwa-root [class*="scrollable"],
.pwa-root [class*="-scroll"] {
  -webkit-overflow-scrolling: touch;
}

/* ─── 6. Prevent overscroll rubber-band from breaking sticky headers ─────────── */
.pwa-root .dashboard-sidebar,
.pwa-root .employee-dashboard-container,
.pwa-root .operator-dashboard-container {
  overscroll-behavior-y: contain;
}

/* ─── 7. Safe area insets (notch / home indicator on iPhone/iPad) ────────────── */
.pwa-root .dashboard-header,
.pwa-root .employee-header,
.pwa-root .operator-header,
.pwa-root [class*="-header"] {
  padding-top: max(0px, env(safe-area-inset-top));
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* Ensure footer / bottom areas respect home-indicator on iPhone */
.pwa-root {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── 8. Minimum tap target size on mobile (WCAG 2.5.5) ─────────────────────── */
@media (max-width: 1024px) {
  .pwa-root button,
  .pwa-root [role="button"],
  .pwa-root .nav-cta,
  .pwa-root [class*="-btn"]:not([class*="fm-mobile"]),
  .pwa-root [class*="btn-"],
  .pwa-root input[type="submit"],
  .pwa-root input[type="button"],
  .pwa-root input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ─── 9. Flash messages: stay within viewport on small screens ───────────────── */
@media (max-width: 640px) {
  .pwa-root .flash {
    top: 12px !important;
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    font-size: 0.875rem;
  }
}

/* ─── 10. Full-width page layout guard (prevents cards/forms from overflowing) ── */
@media (max-width: 768px) {
  .pwa-root .container,
  .pwa-root .card,
  .pwa-root [class*="-container"]:not([class*="search-container"]):not([class*="filter-container"]):not([class*="search-bar"]),
  .pwa-root [class*="-form"],
  .pwa-root [class*="-card"] {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Tables: always scrollable horizontally on mobile */
  .pwa-root table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Images: always responsive */
  .pwa-root img {
    max-width: 100%;
    height: auto;
  }
}