/* SupplyX PWA Native Feel — shared across Sales, Driver, Dispatcher
   Makes PWAs feel indistinguishable from native Android/iOS apps. */

/* ─── 1. Disable ALL zoom / pinch / double-tap zoom ─── */
html {
  touch-action: manipulation;          /* kills double-tap zoom */
  -ms-touch-action: manipulation;
  -webkit-text-size-adjust: 100%;      /* prevents auto-font-enlarge on rotate */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;         /* no rubber-band pull-to-refresh */
  overscroll-behavior-x: none;
}

/* Disable pinch zoom on the viewport level */
@viewport {
  zoom: 1;
  width: device-width;
}

/* Form elements should never trigger zoom */
input, textarea, select, button {
  font-size: 16px !important;          /* iOS zooms if < 16px */
  -webkit-appearance: none;
  appearance: none;
}

/* Prevent input focus zoom on iOS */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ─── 2. Safe area insets (notch / gesture bar) ─── */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  min-height: 100vh;
  min-height: 100dvh;                  /* dynamic viewport height */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ─── 3. Status bar theming ─── */
:root {
  color-scheme: dark light;            /* auto dark/light status bar */
}

/* ─── 4. Prevent pull-to-refresh / overscroll bounce ─── */
body,
#root {
  overscroll-behavior: none;
  overflow: auto;
}

/* ─── 5. Prevent text selection on UI chrome (like native apps) ─── */
button, nav, .no-select, [role="navigation"], [role="tablist"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Allow text selection only in content areas */
input, textarea, [contenteditable="true"], .selectable {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ─── 6. Smooth momentum scrolling in scrollable areas ─── */
.scroll-y, .overflow-y-auto, [class*="scroll"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* ─── 7. Full-height app shell (no dead space) ─── */
#root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ─── 8. Prevent iOS elastic bounce on whole page ─── */
html, body {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#root {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ─── 9. Standalone display-mode adjustments ─── */
@media all and (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }

  /* Hide browser chrome hints */
  .browser-only {
    display: none !important;
  }
}

/* ─── 10. Dark mode status bar for dark-themed apps ─── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* ─── 11. Prevent landscape orientation on portrait-primary apps ─── */
@media screen and (orientation: landscape) {
  .portrait-only {
    /* Could show a "rotate your device" overlay */
  }
}

/* ─── 12. Network status indicator ─── */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: env(safe-area-inset-top) 16px 8px;
  background: #f59e0b;
  color: #000;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.offline-banner.visible {
  transform: translateY(0);
}

/* ─── 13. Splash screen fade (for TWA / standalone) ─── */
@keyframes pwa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.pwa-standalone #root {
  animation: pwa-fade-in 0.15s ease-out;
}

/* ─── 14. Prevent iOS bounce on input focus ─── */
input:focus, textarea:focus, select:focus {
  outline: none;
}

/* ─── 15. Prevent 300ms click delay (already handled by touch-action, but belt-and-suspenders) ─── */
a, button, [role="button"], label {
  cursor: pointer;
}