/* pwa-responsive.css — baseline responsive tweaks injected into every page
 * by PWAInjector. Deliberately conservative: only fixes patterns that break
 * on mobile without touching any page's actual layout. Each page still gets
 * to define its own grid/flex/table layouts on top.
 *
 * If a page needs to opt OUT of a rule, override with a more specific
 * selector — nothing here uses !important.
 */

/* 1. Prevent horizontal body scroll on narrow viewports.
      Common cause: fixed-pixel widths on wrappers. min-width:0 lets them shrink. */
html, body { min-width: 0; overflow-x: hidden; }

/* 2. Images never overflow their container. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* 3. Tables become horizontally scrollable on mobile instead of blowing out the layout.
      Wrap: <div class="tbl-wrap"><table>…</table></div> gets a scrollbar;
      bare <table> in a container also becomes scrollable. */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  table:not(.no-mobile-scroll) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}

/* 4. Code / pre blocks scroll horizontally instead of blowing out. */
pre, code {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* 5. Touch target size on mobile — 44px minimum per Apple HIG / WCAG 2.5.5.
      Applies to bare <button> / links styled as buttons only. */
@media (max-width: 640px) and (pointer: coarse) {
  button, .btn, [role="button"], input[type="button"], input[type="submit"] {
    min-height: 40px;
  }
}

/* 6. iOS safe-area padding for standalone PWA (notch, home indicator). */
@supports (padding: max(0px)) {
  body {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* But NOT for POS surfaces — they own the full screen. */
  body:has([id^="scanBarGlobal"]),
  body:has([id="posScreen"]),
  body:has([id="hospPOS"]),
  body:has([class*="pos-main"]) { padding: 0; }
}

/* 7. Prevent iOS Safari's auto-zoom on input focus (fires when font-size < 16px). */
@media (max-width: 640px) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* 8. Hide desktop-only chrome on very narrow viewports (opt-in via .hide-mobile). */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

/* 9. Make Bootstrap container behave on very small screens (spillover fix). */
.container, .container-fluid { max-width: 100vw; }

/* 10. When app is standalone (installed PWA), hide the "install" prompt if any
       and treat it like a native app. */
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  #pwaPill { display: none !important; }
}