/* ══════════════════════════════════════════════════════════════════════════════
   ViyaBook — viya-scroll-fix.css
   MOBILE SCROLLING (loaded LAST, after every other stylesheet).
   ------------------------------------------------------------------------------
   THE BUG: 34 of 49 pages computed `overflow-x: hidden` on <html>/<body> — set by
   dashboard.css, tablet.css and ~30 page-level <style> blocks, most with
   !important. It is there for a good reason (stop a stray wide element causing
   sideways scroll), but it has a nasty side effect:

       Per the CSS spec, when one axis is `hidden` the OTHER axis can no longer be
       `visible` — it is forced to `auto`. So `overflow-x:hidden` on the root turns
       the page into an EXPLICIT SCROLL CONTAINER instead of letting the browser
       scroll the viewport natively.

   On iOS Safari that is the difference between native, momentum-driven scrolling
   and a janky container scroll: flicks die immediately, the rubber-band is gone,
   and drags feel sticky and heavy. Exactly "very difficult to scroll".

   THE FIX: `overflow-x: clip`. It clips horizontal overflow just like `hidden`,
   but — crucially — it does NOT create a scroll container, so the vertical axis
   stays `visible` and the browser keeps scrolling the page natively. Horizontal
   overflow is still prevented; only the scroll behaviour changes.

   `hidden` is declared first as a fallback for very old engines that don't know
   `clip` (Safari <16); anything modern takes `clip` from the second declaration.
   ══════════════════════════════════════════════════════════════════════════════ */

/* SPECIFICITY NOTE — why the selectors below look odd.
   Most pages set `html, body { overflow-x: hidden !important }` inside a <style>
   block in the page itself. A <style> in the document comes AFTER this <link>, so
   at EQUAL specificity and equal !important, the page's rule wins on source order —
   `!important` alone is not enough to beat it.
   `html`/`body` are type selectors = specificity (0,0,1).
   `html:root:root` = (0,2,1), which outranks them regardless of source order.
   (:root always matches <html>, so repeating it only raises specificity —
   it changes nothing about what is selected.) */
html:root:root,
html:root:root > body {
  overflow-x: hidden;              /* fallback: pre-Safari-16 */
  overflow-x: clip !important;     /* real fix: clips WITHOUT a scroll container */
  overflow-y: visible !important;  /* let the viewport scroll natively */
  max-width: 100%;
}

/* Native momentum scrolling on iOS for the page and for any real scroll pane
   (modals, drawers, sheets, the sidebar). Without this an overflow:auto pane on
   iOS scrolls one "step" per drag instead of gliding. */
html, body,
.modal, .modal-body, .modal-overlay,
.sidebar-nav, .viya-sidebar-nav,
.viya-more-sheet, .drawer, .sheet,
[class*="-scroll"], [class*="scroll-"] {
  -webkit-overflow-scrolling: touch;
}

/* Scroll chaining: when you reach the bottom of a modal's list, the PAGE behind it
   used to start scrolling too, which reads as the modal "fighting" your finger.
   `contain` stops the scroll at the modal's edge instead of passing it through. */
.modal, .modal-body, .modal-overlay,
.viya-more-sheet, .drawer, .sheet,
.viya-mobile-cart, .vb-mcart {
  overscroll-behavior: contain;
}

/* iOS viewport height: 100vh on iOS is measured WITHOUT the address bar, so a
   100vh element is taller than the visible area and its last rows sit under the
   browser chrome, unreachable. dvh tracks the *actual* visible height. The vh
   line stays first as the fallback for engines without dvh. */
@supports (height: 100dvh) {
  .modal-overlay, .viya-page-loader, .paper-loading-overlay,
  .mira-loading, .biz-loading, #tdSkeleton {
    height: 100vh;
    height: 100dvh;
  }
}

/* Below 1024px the app is the mobile/tablet view. Make sure nothing in the app
   shell re-introduces a scroll container on the root, and that the main column
   can actually grow taller than the screen (a `height:100vh` main column silently
   clips its own overflow and looks like "the page won't scroll"). */
@media (max-width: 1024px) {
  html:root:root, html:root:root > body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100% !important;
    position: static !important;   /* a stray position:fixed on body freezes scroll */
  }
  .main, .main-content, .viya-main, .app, .dashboard-shell, .viya-layout {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Honour reduce-motion: no smooth-scroll animation for people who asked for less. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}
