/* Keep the working window still; only its content area scrolls. */
#modal.workspace-dialog {
  position: fixed;
  inset: 20px 16px;
  margin: auto;
  width: min(1440px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}

#modal.workspace-dialog[open] {
  display: flex;
  flex-direction: column;
}

#modal.workspace-dialog > .modal-head,
#modal.workspace-dialog > .modal-tabs,
#modal.workspace-dialog .modal-footer {
  flex: 0 0 auto;
}

#modal.workspace-dialog > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

#modal.workspace-dialog .modal-body {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  overflow-anchor: none;
}

/* The payment register has its own table scroller. */
#modal.workspace-dialog:has(.payment-tab-view) > .modal-body {
  overflow: hidden;
}

@media (max-width: 800px) {
  #modal.workspace-dialog {
    inset: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    border-radius: 0;
  }
}