/*
 * Mobile scroll safety layer
 * Purpose: prevent iOS/Android touch gestures from being trapped by nested
 * vertical scroll containers. On mobile, the page/window should be the main
 * vertical scroller. Tables keep horizontal scrolling; modals/offcanvas keep
 * their own scrolling only while open.
 */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
  }

  body {
    position: relative !important;
    touch-action: pan-x pan-y;
  }

  /* Common application/page wrappers: do not become nested vertical scrollers on mobile. */
  .app,
  .app-wrapper,
  .app-main,
  .main,
  .main-content,
  .content,
  .content-wrapper,
  .page,
  .page-wrapper,
  .page-content,
  .container,
  .container-fluid,
  .card,
  .card-body,
  .tab-content,
  .tab-pane,
  .pos-shell,
  .pos-layout,
  .pos-main,
  .pos-content,
  .pos-left,
  .pos-right,
  .pos-right-scroll,
  .goods-page,
  .goods-shell,
  .goods-card,
  .goods-card .card-body,
  .customer-page,
  .pet-page,
  .schedule-page,
  .account-page,
  .report-page {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Bootstrap viewport helpers can create 100vh traps under mobile browser chrome. */
  .vh-100,
  .min-vh-100 {
    height: auto !important;
    min-height: 100dvh !important;
  }

  /* Keep horizontal table/grid scrolling, but do not trap vertical gestures. */
  .table-responsive,
  .table-responsive-sm,
  .table-responsive-md,
  .table-responsive-lg,
  .table-responsive-xl,
  .table-responsive-xxl,
  .table-wrap,
  .table-wrapper,
  .table-container,
  .grid-scroll,
  .horizontal-scroll,
  .overflow-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Controls that legitimately need their own scroll while opened. */
  .modal,
  .modal-dialog,
  .modal-content,
  .modal-body,
  .offcanvas,
  .offcanvas-body,
  .dropdown-menu,
  .select2-results,
  .select2-results__options,
  .ui-autocomplete,
  .flatpickr-calendar,
  .daterangepicker {
    -webkit-overflow-scrolling: touch;
  }

  body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none;
  }

  body.modal-open .modal,
  body.modal-open .modal-body,
  body.offcanvas-backdrop .offcanvas,
  body.offcanvas-backdrop .offcanvas-body {
    overflow-y: auto !important;
  }

  /* Avoid fixed panels capturing the whole screen unless a component is explicitly open. */
  .mobile-fixed-scroll-lock {
    overflow: hidden !important;
    height: 100dvh !important;
  }
}