/*
  Shared scroll layer.
  Pages own vertical scrolling. Dialogs own exactly one vertical scroll area.
  Inner table wrappers inside dialogs keep horizontal scrolling only.
*/

:root {
  --app-safe-bottom-gap: env(safe-area-inset-bottom, 0px);
  --app-page-bottom-gap: calc(var(--app-safe-bottom-gap) + 0.55rem);
  --app-dialog-bottom-gap: calc(var(--app-safe-bottom-gap) + 0.75rem);
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body > div,
header,
main,
footer {
  min-width: 0;
  max-width: 100%;
}

/* Page scroll areas */
#v3MainContent,
#posAppShell main,
.pos-scroll {
  scroll-padding-bottom: var(--app-page-bottom-gap);
  -webkit-overflow-scrolling: touch;
}

#v3PagesWrap {
  padding-bottom: max(var(--app-page-bottom-gap), 0.75rem);
}

#v3PagesWrap [id$="TableWrap"] > table,
.pos-scroll > table {
  margin-bottom: var(--app-page-bottom-gap);
}

.v3-order-items-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Dialog shell */
dialog[open] {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

dialog[open] > * {
  min-height: 0;
}

/* Common direct dialog bodies */
dialog[open] > div[class*="overflow-auto"],
dialog[open] > div[class*="overflow-y-auto"],
dialog[open] > div[class*="flex"][class*="flex-col"],
dialog[open] > div[class*="max-h-"][class*="overflow-hidden"] {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: inherit !important;
}

dialog[open] > div[class*="overflow-auto"],
dialog[open] > div[class*="overflow-y-auto"],
dialog[open] .v3-order-edit-body {
  overflow-y: auto !important;
  scroll-padding-bottom: var(--app-dialog-bottom-gap) !important;
  padding-bottom: max(var(--app-dialog-bottom-gap), 0.85rem) !important;
  -webkit-overflow-scrolling: touch;
}

dialog[open] > div[class*="flex"][class*="flex-col"] > div[class*="overflow-auto"],
dialog[open] > div[class*="flex"][class*="flex-col"] > div[class*="overflow-y-auto"],
dialog[open] > div[class*="max-h-"][class*="overflow-hidden"] > div[class*="overflow-auto"],
dialog[open] > div[class*="max-h-"][class*="overflow-hidden"] > div[class*="overflow-y-auto"] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  scroll-padding-bottom: var(--app-dialog-bottom-gap) !important;
  padding-bottom: max(var(--app-dialog-bottom-gap), 0.85rem) !important;
  -webkit-overflow-scrolling: touch;
}

/* Prevent nested vertical scrolling in report/detail tables. */
dialog[open] div[class*="overflow-auto"]:has(> table),
dialog[open] div[class*="overflow-y-auto"]:has(> table) {
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: 0 !important;
  -webkit-overflow-scrolling: auto;
}

dialog[open] div[class*="overflow-auto"]:has(> table) > table,
dialog[open] div[class*="overflow-y-auto"]:has(> table) > table {
  margin-bottom: 0 !important;
}

/* Modal footers stay visible; content above them keeps the bottom gap. */
dialog[open] > footer,
dialog[open] > div:last-child:not([class*="overflow-auto"]):not([class*="overflow-y-auto"]) {
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  dialog[open] {
    width: calc(100dvw - 1rem) !important;
    max-width: calc(100dvw - 1rem) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem) !important;
  }

  #posProductsTableWrap > table {
    margin-bottom: 0 !important;
  }

  #posProductsBody {
    padding-bottom: calc(4.45rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  #posProductsTableWrap > table {
    margin-bottom: 0 !important;
  }

  #posProductsBody {
    padding-bottom: calc(3.55rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}