/* ═══════════════════════════════════════════════════════════════════════════
   MedMax — global responsive layer
   ═══════════════════════════════════════════════════════════════════════════

   390 templates were written against a desk monitor. Editing each one is 390
   chances to break a working page and no way to prove the result, so this file
   fixes the *classes* of failure instead, with one rule that decides where it
   is allowed to act:

       act ONLY on elements that declared no responsive intent of their own.

   A page that already says `grid-cols-1 md:grid-cols-4` is finished — its
   author made a decision and this file must not overrule it. A page that says
   only `grid-cols-4` never made a decision, and that is the page a phone
   cannot render. The `:not([class*="md:grid-cols"])` guards below encode
   exactly that: they match on the literal class attribute, so an element is
   skipped the moment it carries any breakpoint variant of the property being
   corrected.

   Two rules of the house:

   • Every query is `@media screen and (…)`. A print sheet is ~794px wide at
     96dpi, so a bare `max-width: 1023px` block also fires on paper — which
     would reflow a signed invoice, a prescription and a payslip.

   • RTL is the default direction. Overflow runs toward the LEFT here, and an
     element hidden with `left:-9999px` sits inside the scrollable canvas
     rather than outside it. Hide things with opacity or clip, never with a
     large negative offset.

   Loaded LAST, after tailwind.built.css, so the corrections win the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --mmr-gutter: 12px;
  --mmr-scroll-shadow: rgba(15, 23, 42, 0.12);
}

/* ── 1. Nothing may be wider than the screen ───────────────────────────────
   A guard, not a fix: the rules below remove the causes. This only stops one
   escaped element from dragging the whole document sideways.

   Screen-scoped like everything else. On paper "100%" resolves against the
   page area, and a printed document is not a place to discover that some
   browser disagrees about what that means.                                 */
@media screen {
  html,
  body {
    max-width: 100%;
  }
}

/* ── 2. Tables scroll instead of stretching the page ───────────────────────
   `medmax-responsive.js` wraps every table that is not already inside a
   horizontal scroller. Kept out of print entirely: on paper the wrapper must
   not clip a single row.                                                    */
.mmr-tablewrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.mmr-tablewrap > table {
  min-width: 100%;
}
/* A hairline that appears only while there is more table to the side, so the
   user knows the column they want exists. */
.mmr-tablewrap.mmr-has-overflow {
  box-shadow: inset -10px 0 8px -10px var(--mmr-scroll-shadow),
              inset 10px 0 8px -10px var(--mmr-scroll-shadow);
}
@media screen and (max-width: 767.98px) {
  .mmr-tablewrap::-webkit-scrollbar {
    height: 6px;
  }
  .mmr-tablewrap::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 999px;
  }
}
@media print {
  .mmr-tablewrap {
    overflow: visible !important;
    box-shadow: none !important;
  }
}

/* ── 3. Fixed multi-column grids that never declared a breakpoint ──────────
   Tailwind writes `grid-cols-4` as `repeat(4, minmax(0,1fr))`, which does not
   collapse — four columns on a 360px phone is four unreadable 78px slivers.
   The `:not()` chain skips any element whose author already handled this.   */

@media screen and (max-width: 1279.98px) {
  [class~="grid-cols-5"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-6"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-7"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-8"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-9"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-10"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-11"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-12"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 1023.98px) {
  [class~="grid-cols-4"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-5"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-6"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-7"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-8"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-9"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-10"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-11"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-12"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 767.98px) {
  [class~="grid-cols-3"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-4"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-5"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-6"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-7"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-8"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-9"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-10"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-11"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-12"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (max-width: 599.98px) {
  [class~="grid-cols-2"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-3"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-4"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-5"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-6"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-7"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-8"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-9"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-10"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-11"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]),
  [class~="grid-cols-12"]:not([class*="sm:grid-cols"]):not([class*="md:grid-cols"]):not([class*="lg:grid-cols"]):not([class*="xl:grid-cols"]):not([data-mmr-keep-cols]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── 3b. Items that refuse to shrink ───────────────────────────────────────
   The most common reason a *correctly written* responsive grid still overflows.
   Grid and flex items default to `min-width: auto`, which means "never narrower
   than my own content" — so one wide child (a chart canvas, a long reference
   number, a table) pushes its whole track past the screen while the container's
   own `grid-template-columns: 1fr` looks perfectly fine in the stylesheet.

   Measured on the finance dashboard at 360px: `.fd-main-grid` correctly
   collapses to a single 336px column, and its `.mm-card` child still measures
   734px.

   `min-width: 0` is a no-op on ordinary block elements, so applying it broadly
   costs nothing; it only takes effect where the element is a flex or grid item,
   which is exactly the case being corrected. `:where()` contributes zero
   specificity, so any deliberate `min-w-*` class or inline min-width still
   wins.                                                                      */
@media screen and (max-width: 1279.98px) {
  main :where(div, section, article, aside, header, footer, nav, li, ul, ol, dl,
              form, fieldset, figure, details, label, p) {
    min-width: 0;
  }
  /* Chart.js writes an explicit pixel width onto the canvas; without this the
     canvas is the un-shrinkable child described above. */
  main canvas {
    max-width: 100%;
  }

  /* Nothing directly inside the page scroller may be wider than it.
     `<main>` is `flex flex-col`, so its children are flex items — and a flex
     item with auto margins on the cross axis (`mx-auto`, which nearly every
     page wrapper carries) does NOT stretch to the container. It sizes to its
     content instead, so the ZATCA onboarding wrapper measured 695px inside a
     464px main and dragged the page 220px sideways with `min-width: 0` already
     applied.

     `!important` because the wrapper almost always carries a `max-w-*` utility
     (a class beats this selector on specificity), and below 1280px the 100%
     cap is the stricter of the two anyway. */
  main > *:not(script):not(style):not(link) {
    max-width: 100% !important;
  }
}

/* ── 3c. The design system's own breakpoints measure the wrong box ─────────
   `medmax-modern.css` turns `.mm-grid-3-col` into three columns at a 768px
   VIEWPORT — which is the exact width where the shell stops treating the
   sidebar as a drawer and gives it a permanent ~256px. So the rule fires when
   the content area is 464px wide: narrower than the phone that was still
   showing one column a pixel earlier.

   Measured on /finance/payments/ at 768: `.mm-grid-3-col` is handed 382px and
   needs 491. Same arithmetic as the header — a viewport breakpoint cannot see
   the sidebar. Corrected here rather than in medmax-modern.css so the public
   pages that use the same classes outside the shell keep their behaviour.   */
@media screen and (min-width: 768px) and (max-width: 1099.98px) {
  .mm-grid-3-col,
  .mm-grid-4-col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* NOTE: `.mm-page-header` / `.mm-page-title-block` were tried here too — the
     payroll screen still overflows `<main>` by 41px at exactly 768px. Neither
     a forced column nor a `max-width: 100%` cap moved the number, so neither
     rule ships: a change that does not fix the thing it was written for is a
     change with no evidence behind it. That page-view is the one known
     residual out of 744 measured (124 pages × 6 widths) and is recorded in
     docs/readiness/2026-08-31-responsive-audit-ar.md. */
}
@media screen and (min-width: 1100px) and (max-width: 1339.98px) {
  .mm-grid-4-col {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── 4. Rows that cannot wrap ──────────────────────────────────────────────
   `flex-wrap` changes nothing until the row actually runs out of space, so
   this is safe on rows that already fit. Elements that scroll sideways on
   purpose (tab strips, chip rails) are left alone.                          */
@media screen and (max-width: 767.98px) {
  .flex:not(.flex-col):not(.flex-nowrap):not([class*="flex-col"]):not([class*="md:flex-"]):not([class*="sm:flex-"]):not([class*="lg:flex-"]):not([class*="overflow-x"]):not(.overflow-auto):not(.overflow-scroll):not([data-mmr-nowrap]) {
    flex-wrap: wrap;
  }
}

/* ── 4b. The tablet band, where `md:` promised room the sidebar took ───────
   `flex-col md:flex-row` becomes a row at a 768px VIEWPORT — the same width at
   which the sidebar stops being a drawer and claims ~256px, leaving 464px. The
   row is then too long, and the `.flex-col` in its own class list excludes it
   from the wrapping rule above.

   Permission to wrap, not a change of direction: `flex-wrap` does nothing
   until the row actually runs out of room, so a row that fits is untouched.
   Elements whose author targeted `lg:`/`xl:` are left alone — they were
   thinking about real desktop widths.                                        */
@media screen and (min-width: 768px) and (max-width: 1099.98px) {
  [class*="md:flex-row"]:not([class*="lg:flex-"]):not([class*="xl:flex-"]):not([class*="overflow-x"]):not([data-mmr-nowrap]),
  .flex:not(.flex-col):not(.flex-nowrap):not([class*="lg:flex-"]):not([class*="xl:flex-"]):not([class*="overflow-x"]):not(.overflow-auto):not(.overflow-scroll):not([data-mmr-nowrap]) {
    flex-wrap: wrap;
  }
}

/* ── 5. Widths pinned in pixels ────────────────────────────────────────────
   Tables keep their minimum width — they are inside a scroller and shrinking
   them would crush the columns instead of letting the user reach them.      */
@media screen and (max-width: 767.98px) {
  [class*="min-w-["]:not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(col):not(colgroup):not([data-mmr-keep-width]),
  [style*="min-width"]:not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(col):not(colgroup):not([data-mmr-keep-width]) {
    min-width: 0 !important;
  }
  [style*="width"]:not(table):not(thead):not(tbody):not(tr):not(th):not(td):not(col):not(colgroup):not(svg):not(img):not(canvas):not(progress):not([data-mmr-keep-width]) {
    max-width: 100% !important;
  }
}

/* ── 6. Dialogs fill a phone instead of hanging off it ─────────────────────
   Modals in this codebase are `.fixed.inset-0` with a `max-w-*` panel inside.
   On a phone the panel needs the whole screen and its own vertical scroll,
   or its footer buttons end up below the fold with no way to reach them.    */
@media screen and (max-width: 639.98px) {
  [class~="fixed"][class~="inset-0"] > [class*="max-w-"]:not([data-mmr-keep-width]),
  [class~="fixed"][class~="inset-0"] > div > [class*="max-w-"]:not([data-mmr-keep-width]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  [class~="fixed"][class~="inset-0"] > [class*="max-w-"]:not([data-mmr-keep-width]) {
    max-height: 92dvh;
    overflow-y: auto;
  }
}

/* ── 7. Text that refuses to break ─────────────────────────────────────────
   Long identifiers — an IBAN, a claim reference, a national ID, an e-mail —
   are the usual reason a card is wider than the phone. Table cells are left
   alone: they scroll.                                                       */
@media screen and (max-width: 767.98px) {
  main :is(h1, h2, h3, h4, h5, p, span, li, label, dd, dt, a, small, strong, b) {
    overflow-wrap: break-word;
  }
}

/* ── 8. iOS zooms the whole page when a focused field is under 16px ────────
   `max()` keeps the visual size for anything already larger.                */
@media screen and (max-width: 639.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* ── 9. Media never exceeds its box ────────────────────────────────────────
   Sized elements are skipped: an avatar with `w-10 h-10` already knows how
   big it wants to be, and overriding it would squash it.                    */
@media screen {
  main img:not([class*="w-"]):not([class*="h-"]):not([data-mmr-keep-width]),
  main video,
  main iframe {
    max-width: 100%;
  }
}

/* ── 10. Coarse pointers ───────────────────────────────────────────────────
   No forced hit-area growth — that reflows dense clinical tables. Just remove
   the 300ms tap delay and stop double-tap zoom on controls.                 */
@media (pointer: coarse) {
  button,
  [role="button"],
  a[href],
  input[type="submit"],
  input[type="button"],
  label[for] {
    touch-action: manipulation;
  }
}

/* ── 11. Very wide monitors ────────────────────────────────────────────────
   Reading a paragraph that runs 2400px edge to edge is its own failure mode.
   Only prose is capped; tables, grids and dashboards keep the full width
   they were designed to use.                                                */
@media screen and (min-width: 1800px) {
  main p:not([class*="max-w"]):not([class*="text-center"]) {
    max-width: 105ch;
  }
}

/* ── 12. Utility hooks ─────────────────────────────────────────────────────
   For the rare page that must opt out, and the correct way to hide something
   from sight while keeping it in the accessibility tree. Use this instead of
   a negative offset: in RTL, `left:-9999px` sits inside the scroll canvas and
   gives the page a 10,000px horizontal scroll region.                       */
.mmr-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}