/* Shared mobile safety layer for public, auth, dashboard and error pages. */
html {
  max-width: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  min-height: 100dvh;
}

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

:where(button, input, select, textarea) {
  font: inherit;
}

:where(button, a, input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

:where(dialog, [role="dialog"], [aria-modal="true"]) {
  max-width: 100%;
  max-height: 100dvh;
}

@media screen and (max-width: 900px) {
  html,
  body {
    width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  body,
  body * {
    box-sizing: border-box;
  }

  :where(main, section, article, aside, header, footer, nav, form, fieldset, table, thead, tbody, tr, td, th, div) {
    min-width: 0;
  }

  :where(h1, h2, h3, h4, p, li, label, span, strong, small, a, button, td, th) {
    overflow-wrap: anywhere;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    max-width: 100%;
  }

  :where(input[type="checkbox"], input[type="radio"]) {
    max-width: none;
  }

  :where(.modal-shell, .dashboard-modal-shell, .settings-modal, .clinical-finish-modal, .booking-confirmation-modal) {
    padding-inline: max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-left));
  }

  :where(.modal-dialog, .dashboard-modal-dialog, .settings-modal-dialog, .clinical-finish-dialog, .booking-confirmation-dialog) {
    width: min(100%, 680px);
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :where(.table-wrap, .table-container, .responsive-table, .bookings-table-wrap, .patients-table-wrap) {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* A translated fixed sidebar still expands the RTL scroll area in Chromium. */
  .dashboard-sidebar:not(.open):not(.is-open) {
    display: none !important;
  }

  body.sidebar-open .dashboard-sidebar,
  .dashboard-sidebar.open,
  .dashboard-sidebar.is-open {
    display: block !important;
  }
}

@media screen and (max-width: 760px) {
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 46px;
    font-size: 16px !important;
  }

  :where(button, .btn, a.btn, input[type="button"], input[type="submit"], summary) {
    min-height: 44px;
    touch-action: manipulation;
  }

  :where(input, select, textarea, button) {
    border-radius: max(10px, min(14px, 3vw));
  }

  :where([style*="width"], [style*="min-width"]) {
    max-width: 100%;
  }
}

@media screen and (max-width: 430px) {
  :root {
    --mobile-page-gutter: max(10px, env(safe-area-inset-right));
  }

  :where(.flash-message, .alert, .auth-alert, .validation-summary) {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

.user-pwa-install {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border-light, #dce4f0);
  color: var(--primary, #075cff);
  background: var(--header-bg, #fff);
  font: inherit;
  text-align: start;
  cursor: pointer;
}