/* Mobile pop-up fit + scroll fix.
   On phones, `100vh` counts the area hidden behind the browser's address bar, so a
   full-height dialog centered with `place-items:center` gets pushed partly off-screen and
   its bottom becomes unreachable — the page behind won't scroll either. This makes every
   modal backdrop scrollable and top-aligns tall dialogs so their bottom is always reachable,
   and caps dialogs to the *visible* viewport with `dvh`. If `dvh` is unsupported the dialog
   rule is ignored and the scrollable/ top-aligned backdrop still guarantees reachability. */
@media (max-width: 768px) {

  /* --- Backdrops: scroll the whole overlay, keep horizontal centering, top-align vertically. --- */
  .completePrintOverlay,
  .accountProfileBackdrop,
  .planLimitBackdrop,
  .accountPlanBackdrop,
  .simulatedCheckoutBackdrop,
  .planEnabledBackdrop,
  .integrationBackdrop,
  .lockedArchiveBackdrop,
  .profileEditModal,
  .fviBackdrop,
  .inventoryAddModalBackdrop,
  .invAddModal,
  .invTaperOverlay,
  .invQrEnlargeBackdrop,
  .legalBackdrop,
  .newProjectGuardBackdrop,
  .projectLibraryBackdrop,
  .themedDialogBackdrop,
  .notificationCenterOverlay,
  .notificationDigestBackdrop {
    align-items: start !important;            /* keep justify (horizontal) centering, top-align vertically */
    overflow-y: auto !important;              /* the overlay itself scrolls when the dialog is tall */
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;  /* don't chain the scroll to the page behind */
    padding-top: 12px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  /* --- Dialogs / inner scroll panes: cap to the VISIBLE viewport so their own scroll reaches the bottom. --- */
  .completePrintModal,
  .accountProfileDialog,
  .accountProfileScroll,
  .planLimitDialog,
  .accountPlanDialog,
  .accountPlanScroll,
  .simulatedCheckoutDialog,
  .simulatedCheckoutScroll,
  .integrationDialog,
  .projectLibraryDialog,
  .projectLibraryScroll,
  .themedDialog,
  .opDialog,
  .pdModal,
  .qrLabelsDialog,
  .inventoryAddModalScroll {
    max-height: calc(100dvh - 26px) !important;
  }
}