/*
 * 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.                                      */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box; /* prevents width overflow on mobile elements */
  }

  body {
    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 ────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

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

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

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

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

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

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

/* ─── 7. Safe area insets (notch / home indicator on iPhone/iPad) ────────────── */
.dashboard-header,
.employee-header,
.operator-header,
[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 */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

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

/* ─── 9. Flash messages: stay within viewport on small screens ───────────────── */
@media (max-width: 640px) {
  .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) {
  .container,
  .card,
  [class*="-container"]:not([class*="search-container"]):not([class*="filter-container"]):not([class*="search-bar"]),
  [class*="-form"],
  [class*="-card"] {
    max-width: 100% !important;
    box-sizing: border-box;
  }

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

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