/* V174 — Chrome compatibility layer.
   UI/browser behavior only; no business/data logic changes. */

:root {
  --v174-app-height: 100dvh;
  --v174-safe-top: env(safe-area-inset-top, 0px);
  --v174-safe-right: env(safe-area-inset-right, 0px);
  --v174-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v174-safe-left: env(safe-area-inset-left, 0px);
}

html {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: auto;
}

body, #root {
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chrome sometimes keeps min-width:auto on flex/grid descendants. */
main, section, article, aside, header, footer,
[data-slot="dialog-content"],
[data-slot="alert-dialog-content"] {
  min-width: 0;
}

.flex > *, .grid > * {
  min-width: 0;
}

/* Dialogs / modal sheets: never trap content outside Chrome viewport. */
[data-slot="dialog-overlay"],
[data-slot="alert-dialog-overlay"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw;
  height: var(--v174-app-height);
  touch-action: none;
}

[data-slot="dialog-content"],
[data-slot="alert-dialog-content"] {
  max-height: min(94dvh, var(--v174-app-height)) !important;
  overscroll-behavior-y: contain;
}

/* Ordinary centered dialogs can scroll internally if Chrome viewport shrinks. */
[data-slot="dialog-content"]:not(.order-dialog-content),
[data-slot="alert-dialog-content"] {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Lên đơn hàng: keep its own scroll container. */
.order-dialog-content {
  height: var(--v174-app-height) !important;
  max-height: var(--v174-app-height) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
  scrollbar-gutter: stable;
}

/* Sticky elements need an opaque stacking context in Chrome. */
.sticky,
.order-mobile-workflow {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Prevent fixed/sticky layers from being clipped by accidental transforms. */
[data-slot="dialog-portal"] {
  isolation: isolate;
}

/* Inputs/selects: normalize Chrome rendering and prevent zoom/layout jumps. */
input, select, textarea, button {
  max-width: 100%;
  font: inherit;
}

input, textarea {
  appearance: none;
  -webkit-appearance: none;
}

select {
  -webkit-appearance: auto;
  appearance: auto;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"] {
  min-width: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
}

textarea {
  resize: vertical;
}

/* Native select/dropdown must stay readable on Chrome. */
select, option {
  color: inherit;
  background-color: var(--background, #fff);
}

/* Tables: Chrome must scroll the wrapper rather than expanding page width. */
.overflow-x-auto,
[class*="overflow-x-auto"] {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

table {
  max-width: none;
}

th, td {
  overflow-wrap: normal;
}

/* Charts/SVG: avoid width overflow and blurry Chrome transforms. */
.recharts-responsive-container,
.recharts-wrapper,
.recharts-surface {
  max-width: 100% !important;
}

svg {
  shape-rendering: geometricPrecision;
}

/* Popovers/dropdowns should remain above sticky/mobile navigation. */
[data-radix-popper-content-wrapper] {
  z-index: 80 !important;
  max-width: calc(100vw - 16px) !important;
}

/* Buttons/links: reliable pointer behavior on Chrome touch devices. */
button, [role="button"], a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Mobile Chrome: keyboard/address-bar-safe layout. */
@media (max-width: 639px) {
  body {
    min-height: var(--v174-app-height);
  }

  input, select, textarea {
    font-size: 16px; /* avoids browser zoom and layout shift on focus */
  }

  [data-slot="dialog-content"]:not(.order-dialog-content),
  [data-slot="alert-dialog-content"] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(var(--v174-app-height) - 16px) !important;
  }

  .order-dialog-content {
    padding-bottom: max(1.5rem, var(--v174-safe-bottom)) !important;
  }

  .order-mobile-workflow {
    top: 0 !important;
    z-index: 20 !important;
  }

  /* horizontally wide data tables are intentionally scrollable */
  table {
    min-width: 680px;
  }

  /* avoid accidental horizontal movement in card grids */
  .grid, .flex {
    max-width: 100%;
  }
}

/* Chrome desktop: center dialogs inside viewport but preserve internal scroll. */
@media (min-width: 640px) {
  .order-dialog-content {
    height: calc(var(--v174-app-height) - 2rem) !important;
    max-height: calc(var(--v174-app-height) - 2rem) !important;
  }

  [data-slot="dialog-content"]:not(.order-dialog-content),
  [data-slot="alert-dialog-content"] {
    max-height: calc(var(--v174-app-height) - 2rem) !important;
  }
}

/* Fallback for older Chrome without dvh support. */
@supports not (height: 100dvh) {
  :root { --v174-app-height: 100vh; }
}