/*
 * MakeBOQ cross-device layout safeguards.
 * Page-specific styles still control visual design; these rules only prevent
 * clipping, inaccessible controls, and unusable touch layouts.
 */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

img, svg, video, canvas, iframe {
  max-width: 100%;
}

img, video { height: auto; }

main, section, article, header, footer, nav, form, fieldset,
.page-shell, .main-wrap, .page-content {
  min-width: 0;
}

input, select, textarea, button {
  max-width: 100%;
}

textarea { resize: vertical; }

pre, code, .break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap,
.overflow-x-auto,
.table-container {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

[role="dialog"],
.modal-box,
.modal-content,
.dialog,
.customer-create-dialog {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

@media (max-width: 767px) {
  body { padding-bottom: var(--safe-bottom); }

  h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.2rem, 5.5vw, 1.5rem); line-height: 1.25; }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important; /* Prevent iOS focus zoom. */
  }

  main table {
    width: 100%;
    max-width: 100%;
  }

  th, td {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .toast,
  #toast,
  #flash-container,
  #flash-wrap {
    left: max(12px, var(--safe-left)) !important;
    right: max(12px, var(--safe-right)) !important;
    width: auto !important;
    max-width: none !important;
  }

  [role="dialog"],
  .modal-box,
  .modal-content,
  .dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .modal-body,
  .dialog-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sticky {
    scroll-margin-top: calc(72px + var(--safe-top));
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  [role="dialog"],
  .modal-box,
  .modal-content,
  .dialog,
  .customer-create-dialog {
    max-height: calc(100dvh - 12px) !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;
  }
}

@media print {
  .global-sidebar-desktop,
  #global-sidebar-drawer,
  #global-sidebar-backdrop,
  .global-sidebar-fab {
    display: none !important;
  }

  main { margin-left: 0 !important; }
}