/*
 * Global mobile / Capacitor (Android + iOS WebView) layout hardening.
 * Referenced from index.html as <link rel="stylesheet" href="/index.css">.
 * Tailwind is loaded from the CDN, so these are plain-CSS complements that
 * cover things utility classes cannot express per-element.
 */

/* ---------------------------------------------------------------
   1. Viewport + horizontal-overflow guard
   Wide desks (billing tables, receipt previews) must scroll inside
   their own container, never push the page sideways.
   --------------------------------------------------------------- */
html,
body {
  width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * `clip`, not `hidden`, and on <body> only.
 *
 * `overflow-x: hidden` forces the used value of `overflow-y` from `visible` to
 * `auto`, turning the element into a scroll container. On both <html> and
 * <body> that made two nested scrollers: the mouse wheel targeted <body>'s
 * scrollport, which has no overflow of its own, while the real overflow sat on
 * the viewport scroller — so tall pages (the signup form) could only be
 * scrolled by dragging the scrollbar.
 *
 * `clip` prevents sideways overflow without creating a scroll container.
 */
body {
  overflow-x: clip;
}

body {
  /* Android edge-to-edge: keep content clear of the gesture/nav bar. */
  overscroll-behavior-y: none;
}

#root {
  min-height: 100dvh;
}

/* ---------------------------------------------------------------
   2. Momentum scrolling inside scroll containers
   
   DO NOT reintroduce `-webkit-overflow-scrolling: touch` here.
   
   On iOS WKWebView that property makes the element a CONTAINING BLOCK for
   `position: fixed` descendants and gives it its own stacking context. The app
   shell's scroller is <main class="... overflow-y-auto">, so every modal
   rendered inside a page (`fixed inset-0 z-50`) was being positioned and
   painted INSIDE <main> instead of over the viewport — which put it behind the
   sticky header and search bar. That was the app-wide "popup opens behind the
   header" bug on iOS; Android was unaffected because its WebView ignores the
   property, which is also why it was never needed there.
   
   It is deprecated and a no-op on modern engines: iOS 13+ uses momentum
   scrolling for overflow containers by default, so nothing is lost.
   --------------------------------------------------------------- */

/* Horizontal tab strips / table scrollers: hide the scrollbar chrome but
   keep the scrolling, and snap the gesture to the axis. */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.overflow-x-auto {
  overscroll-behavior-x: contain;
}

/* ---------------------------------------------------------------
   3. Android safe-area for fixed/full-screen surfaces
   Modals opened as full-bleed sheets on phones set their own
   pt/pb via env(); this covers fixed action bars that do not.
   --------------------------------------------------------------- */
.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

.safe-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/*
 * Full-screen overlay modals.
 *
 * index.html sets viewport-fit=cover, so on notched iPhones the webview
 * extends under the status bar and home indicator. A `fixed inset-0` overlay
 * that centres a near-full-height panel therefore puts the panel's own header
 * row -- the one carrying PDF / Share / Print -- underneath the status bar.
 * Android's WebView starts below the status bar, which is why this only
 * showed up on iOS. max() keeps the original padding on non-notched devices.
 *
 * Loaded after the Tailwind CDN, so this wins over the element's p-2/p-4.
 */
.safe-modal {
  padding-top: max(0.5rem, env(safe-area-inset-top));
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/*
 * Safe area for EVERY full-screen overlay, not just the ones that remembered
 * to add .safe-modal (only one did).
 *
 * index.html sets viewport-fit=cover, so the webview runs under the status bar
 * and home indicator. A `fixed inset-0` overlay starts at the physical top of
 * the screen, which put modal titles and their PDF / Print / Close buttons
 * underneath the Dynamic Island.
 *
 * Phone widths only, so desktop padding is untouched. env() is 0 on devices
 * without a notch, where max() keeps the original spacing instead.
 */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 1023px) {
    .fixed.inset-0 {
      padding-top: max(0.75rem, env(safe-area-inset-top));
      padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
      padding-left: max(0.5rem, env(safe-area-inset-left));
      padding-right: max(0.5rem, env(safe-area-inset-right));
    }
    /* Printing must not inherit the on-screen insets. */
    @media print {
      .fixed.inset-0 { padding: 0 !important; }
    }
  }
}

/* ---------------------------------------------------------------
   Printing: keep the document exactly one viewport tall.

   The shell used to be `h-screen overflow-hidden`, so the printed document was
   a single page. Now that the document itself scrolls it can be many pages
   tall, and a `position: fixed` overlay — which every modal uses — is repeated
   by the browser on EVERY page. That produced duplicate copies of the
   e-prescription, visit summary, invoice and investigation request.

   Clamping #root for print only restores the old single-page geometry. The
   modal still prints because a fixed element's containing block is the
   viewport, so it is not clipped by this overflow.
   --------------------------------------------------------------- */
@media print {
  #root {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
}


/* ---------------------------------------------------------------
   4. Touch targets + input behaviour on small screens
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Kill the 300ms tap delay / double-tap zoom on controls. Deliberately
     no font-size override here: the compact desks rely on their type scale,
     and the Android WebView does not focus-zoom the way iOS Safari does. */
  button,
  [role='button'],
  a[href],
  label {
    touch-action: manipulation;
  }
}

/* Remove the grey tap flash on Android Chrome/WebView. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------
   5. Print: never let the mobile scroll containers clip a receipt.
   --------------------------------------------------------------- */
@media print {
  html,
  body {
    overflow: visible !important;
  }

  /*
   * DO NOT un-clip scroll containers here.
   *
   * The app shell is `h-screen overflow-hidden` and <main> is `overflow-y-auto`.
   * Forcing those to `overflow: visible` in print lets the whole scrollable page
   * contribute its full height to the printed document. Everything is
   * visibility:hidden so it is invisible, but it still occupies space — which
   * produced several blank sheets before the actual document, and pushed the
   * document itself onto page 2.
   *
   * The printable documents position themselves absolutely against the page, and
   * the pharmacy/OTC receipts print from their own popup window, so neither needs
   * this reset.
   */

  .overflow-x-auto > table {
    width: 100% !important;
    min-width: 0 !important;
  }

}