/* V19 interaction and layout stability layer. It intentionally contains no business styling. */
:root {
  --v19-viewport-width: 100vw;
  --v19-viewport-height: 100vh;
  --v19-keyboard-height: 0px;
  --v19-safe-top: env(safe-area-inset-top, 0px);
  --v19-safe-right: env(safe-area-inset-right, 0px);
  --v19-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v19-safe-left: env(safe-area-inset-left, 0px);
  --v19-density-control: 44px;
  --v19-density-gap: 12px;
  --v19-density-panel: clamp(16px, 2vw, 28px);
  --v19-overlay-gutter: clamp(8px, 2vw, 24px);
  --v19-z-base: 0;
  --v19-z-raised: 10;
  --v19-z-sticky: 20;
  --v19-z-popover: 30;
  --v19-z-fixed: 40;
  --v19-z-backdrop: 60;
  --v19-z-overlay: 70;
  --v19-z-toast: 80;
  --v19-z-critical: 90;
  --ui-z-sticky: var(--v19-z-sticky);
  --ui-z-drawer: var(--v19-z-overlay);
  --ui-z-modal: var(--v19-z-overlay);
  --ui-z-toast: var(--v19-z-toast);
}

@supports (height: 100dvh) {
  :root {
    --v19-viewport-height: 100dvh;
  }
}

html {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  min-height: var(--v19-viewport-height);
}

html[data-v19-scroll-lock='true'],
body[data-v19-scroll-lock='true'] {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body[data-v19-scroll-lock='true'] {
  position: fixed;
  top: var(--v19-locked-page-y, 0px);
  left: var(--v19-locked-page-x, 0px);
  right: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:is(main, section, article, aside, nav, header, footer, form, fieldset, div),
:is(.ui-shell, .app-shell, .workspace-main, .workspace-panel, .panel, .ui-card) {
  min-width: 0;
}

:is(img, video, canvas, svg):not(.ui-icon) {
  max-width: 100%;
}

:is(pre, code, address, [data-long-text]) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

:is(.table-wrap, .table-scroll, [data-v18-scroll-region], [data-v19-scroll-region]) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* The account gateway owns one viewport; other dialogs retain their internal scrolling. */
.modal-backdrop:has(.auth-shell),
.modal-backdrop .auth-shell {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: pinch-zoom;
}

@supports (overflow: clip) {
  .modal-backdrop:has(.auth-shell),
  .modal-backdrop .auth-shell {
    overflow: clip !important;
  }
}

:is(.site-header, [data-ui-template='admin'] .workspace > header, .station-header) {
  z-index: var(--v19-z-sticky);
}

:is(.account-menu, [role='menu'], [data-v19-overlay-kind='popover']) {
  z-index: var(--v19-z-popover);
}

:is(.mobile-tabbar, [data-v19-fixed-navigation]) {
  z-index: var(--v19-z-fixed);
}

:is(
  .modal-backdrop,
  .shell-drawer-backdrop,
  .admin-modal,
  .ui-modal-backdrop,
  .ui-drawer-backdrop
) {
  z-index: var(--v19-z-backdrop);
  max-width: var(--v19-viewport-width);
  max-height: var(--v19-viewport-height);
  padding: max(var(--v19-overlay-gutter), var(--v19-safe-top))
    max(var(--v19-overlay-gutter), var(--v19-safe-right))
    max(var(--v19-overlay-gutter), var(--v19-safe-bottom))
    max(var(--v19-overlay-gutter), var(--v19-safe-left));
  overflow: hidden;
  overscroll-behavior: contain;
}

:is(.modal-backdrop, .shell-drawer-backdrop, .admin-modal, .ui-modal-backdrop, .ui-drawer-backdrop)
  > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
  position: relative;
  z-index: var(--v19-z-overlay);
  width: min(100%, 820px);
  max-width: 100%;
  max-height: calc(
    var(--v19-viewport-height) - var(--v19-safe-top) - var(--v19-safe-bottom) -
      (2 * var(--v19-overlay-gutter))
  );
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

:is(.shell-drawer-backdrop, .ui-drawer-backdrop) {
  padding-top: var(--v19-safe-top);
  padding-right: var(--v19-safe-right);
  padding-bottom: var(--v19-safe-bottom);
  padding-left: var(--v19-safe-left);
}

:is(.shell-drawer, .ui-drawer) {
  max-height: var(--v19-viewport-height) !important;
}

:is(.toast, [role='status'][data-toast], [data-v19-toast]) {
  z-index: var(--v19-z-toast) !important;
  max-width: min(calc(100vw - 24px), 560px);
  pointer-events: none;
}

body[data-v19-keyboard='open'] :is(.mobile-tabbar, [data-v19-fixed-navigation]) {
  visibility: hidden;
  pointer-events: none;
}

body[data-v19-keyboard='open']
  :is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  ) {
  align-items: start;
  padding-bottom: 8px;
}

body[data-v19-keyboard='open']
  :is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  )
  > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
  max-height: calc(var(--v19-viewport-height) - 8px);
}

body[data-ui-density='compact'] {
  --v19-density-control: 36px;
  --v19-density-gap: 8px;
  --v19-density-panel: 16px;
}

body[data-ui-density='comfortable'] {
  --v19-density-control: 48px;
  --v19-density-gap: 14px;
  --v19-density-panel: clamp(18px, 4vw, 28px);
}

:is(button, [role='button'], input, select, textarea) {
  min-height: max(var(--v19-density-control), var(--ui-touch-target, 44px));
}

:is(button, [role='button'], a[href], input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-color-focus, #0f6f45) 34%, transparent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  :is(button, [role='button'], a[href]):not(:disabled) {
    transition:
      transform var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),
      box-shadow var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),
      background-color var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease);
  }

  :is(button, [role='button'], a[href]):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 767px) {
  :root {
    --v19-overlay-gutter: 0px;
  }

  :is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  ) {
    align-items: end;
    place-items: end stretch;
    padding-top: max(8px, var(--v19-safe-top));
  }

  :is(
      .modal-backdrop,
      .shell-drawer-backdrop,
      .admin-modal,
      .ui-modal-backdrop,
      .ui-drawer-backdrop
    )
    > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(var(--v19-viewport-height) - var(--v19-safe-top) - 8px);
    margin: 0;
    padding-bottom: max(18px, calc(12px + var(--v19-safe-bottom)));
    border-radius: 24px 24px 0 0 !important;
  }

  :is(.admin-modal-actions, .order-action-buttons, .family-order-actions, .location-actions) {
    position: sticky;
    z-index: var(--v19-z-raised);
    bottom: calc(-1 * max(18px, calc(12px + var(--v19-safe-bottom))));
    margin-inline: calc(-1 * var(--v19-density-panel));
    padding: 12px var(--v19-density-panel) max(12px, var(--v19-safe-bottom));
    flex-wrap: wrap;
    background: color-mix(in srgb, var(--ui-color-surface, #fffdf8) 94%, transparent);
    backdrop-filter: blur(12px);
  }

  :is(.admin-modal-actions, .order-action-buttons, .family-order-actions, .location-actions) > * {
    min-width: min(136px, 100%);
    flex: 1 1 auto;
  }

  .account-menu {
    position: fixed;
    right: 8px;
    bottom: calc(8px + var(--v19-safe-bottom));
    left: 8px;
    top: auto;
    width: auto;
    max-height: calc(var(--v19-viewport-height) - 16px - var(--v19-safe-bottom));
    overflow-y: auto;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  :is(
    .modal-backdrop,
    .shell-drawer-backdrop,
    .admin-modal,
    .ui-modal-backdrop,
    .ui-drawer-backdrop
  ) {
    align-items: stretch;
    padding: 4px max(8px, var(--v19-safe-right)) 4px max(8px, var(--v19-safe-left));
  }

  :is(
      .modal-backdrop,
      .shell-drawer-backdrop,
      .admin-modal,
      .ui-modal-backdrop,
      .ui-drawer-backdrop
    )
    > :is([role='dialog'], .shell-drawer, .admin-modal-card, .ui-modal, .ui-drawer) {
    max-height: calc(var(--v19-viewport-height) - 8px);
    border-radius: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}