/* ═══════════════════════════════════════════════════════════════
   pwa-boot.css — shared mobile + cross-browser polish for every
   neeetko PWA (portal, warehouse, sage, timecard, ops, approvals,
   proposals, attention, magi, orders, aikido, exclusions, guild,
   financial, homeready, salvo, sidereal).

   Injected into every HTML response from teamportal/server.py via
   the pwa-boot after-request hook. No opt-in needed.

   Scope: normalize mobile behavior on iOS Safari, iPadOS, Chrome
   (Android), and desktop Chrome/Firefox/Safari. Does NOT override
   per-page colors, fonts, or layout — only fixes the stuff every
   PWA needs and none get right alone.
   ═══════════════════════════════════════════════════════════════ */

/* Let the browser pick dark/light assets based on the page's own
   theme-color — individual PWAs can still force one. */
:root { color-scheme: dark light; }

/* iOS stretches text on orientation change; Android doesn't. Pin both. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Stop rubber-band overscroll from dragging content behind a fixed
     header on iOS — page-level containment only. */
  overscroll-behavior-y: contain;
}

/* Kill the blue/gray tap-flash on every tap target. Individual
   interactive elements can re-enable if they want feedback. */
html, body, button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* iOS Safari zooms into any <input> whose computed font-size is < 16px.
   Force 16px on all form controls. Individual pages can override for
   a specific control if they want smaller text and accept the zoom. */
input, select, textarea {
  font-size: 16px;
}
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Safe-area padding for notched devices. We use min() so pages with
   their own padding still get the larger of (their padding | the
   notch inset). Scoped to body so it doesn't double-apply when an
   outer wrapper already handles layout. */
body {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Phone numbers, dates, and addresses auto-style blue on iOS. Disable
   the default autodetect — pages that want a phone link use <a href="tel:">. */
body { -webkit-touch-callout: default; }

/* Responsive breakpoint tokens — pages can @media against these. */
:root {
  --bp-phone: 640px;
  --bp-tablet: 900px;
  --bp-desktop: 1200px;
}

/* Ensure clickable targets meet iOS 44pt / Material 48dp minimum on
   small screens without trampling desktop layouts. */
@media (max-width: 640px) and (pointer: coarse) {
  button, [role="button"], a.btn, input[type="button"], input[type="submit"] {
    min-height: 44px;
  }
}

/* Prevent horizontal scroll from a stray overflow — most common PWA
   bug on iPhone. Pages that genuinely need horizontal scroll should
   set it on an inner element, not body. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* Smooth scrolling for in-page anchors, but respect the OS setting
   for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}