/* Overlay scale for the staff portal.
   One list, low to high. Everything that floats uses one of these variables.
   Do not invent a new number in a page.

   --z-base      in-page stacking (cards, badges)
   --z-sticky    sticky table headers and in-card bars
   --z-dropdown  menus, datepickers, column pickers
   --z-fixed     AdminLTE header and the mobile sidebar
   --z-fab       WhatsApp button. Above the page, below every modal.
   --z-loader    full-page loader. Above the page, below the modal backdrop,
                 so a modal that is open stays usable and a stuck loader
                 cannot cover it.
   --z-backdrop  Bootstrap modal backdrop
   --z-modal     Bootstrap .modal and .spx-modal
   --z-popover   a menu or picker portaled out of an open modal
   --z-toast     toastr and the "new version" card
   --z-sheet     full-screen sheets that must cover a modal: PDF viewer,
                 domain confirm, PWA install, ticket lightbox

   Bootstrap 3 already uses 1040 / 1050 for backdrop / modal. Those two
   variables keep that pair so existing modals do not jump. */

:root {
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-fixed: 1030;
  --z-fab: 1035;
  --z-loader: 1038;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-toast: 1070;
  --z-sheet: 1080;
}

/* Vendor sheets ship their own extremes. These win because this file is
   linked after them and the declarations are !important. */
#toast-container {
  z-index: var(--z-toast) !important;
}

ul.DTTT_dropdown.dropdown-menu {
  z-index: var(--z-popover) !important;
}

div.DTTT_collection_background {
  z-index: var(--z-backdrop) !important;
}

.modal-backdrop {
  z-index: var(--z-backdrop);
}

.modal {
  z-index: var(--z-modal);
}

/* Scroll the dialog, not the page behind it. Header and footer stay put. */
.modal-content,
.spx-modal-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}

.modal-body,
.spx-modal-body,
.dm-confirm-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100vh - 160px);
  max-height: calc(100dvh - 160px);
}

/* The FAB sits under the modal. Hide it as well so a footer button is never
   drawn underneath the green circle. */
body.modal-open .ic-whatsapp-chat,
body.spx-modal-open .ic-whatsapp-chat,
body.dm-open .ic-whatsapp-chat,
body.ic-pdf-open .ic-whatsapp-chat {
  visibility: hidden;
  pointer-events: none;
}

/* A loader that is not showing must not catch clicks, even if a later rule
   sets display back to block without the visible class. */
.page-loader:not(.is-visible) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}