html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

body {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

*,
*::before,
*::after {
  touch-action: manipulation;
}

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

table {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Mobile: ไม่ให้เนื้อหาล้นจอ ── */
@media (max-width: 1023px) {
  .app-shell,
  .admin-shell,
  .admin-content,
  .admin-main,
  .cases-app,
  .cases-panel,
  .install-page,
  .login-page,
  .admin-login-body,
  .admin-page,
  .admin-card,
  .modal-card {
    max-width: 100%;
    overflow-x: clip;
  }

  .page-section,
  .stack,
  .stack-lg,
  .grid-2,
  .admin-grid-2,
  .admin-form-grid,
  .admin-officer-list,
  .cases-list,
  .cases-detail-body,
  .cases-action-bar,
  .hospital-card,
  .status-card,
  .profile-avatar-block {
    max-width: 100%;
    min-width: 0;
  }

  .grid-2,
  .install-grid,
  .hospital-actions,
  .modal-actions,
  .cases-info-grid,
  .cases-action-row,
  .admin-actions,
  .admin-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cases-action-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cases-hero > div:first-child,
  .admin-topbar-text,
  .admin-detail-head > div:first-child,
  .cases-card-body,
  .admin-officer-row .min-w-0 {
    min-width: 0;
  }

  .cases-hero-title,
  .admin-page-title,
  .admin-detail-title,
  .hospital-name,
  .status-title,
  .officer-name {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .cases-card-foot {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .admin-officer-row {
    flex-wrap: wrap;
  }

  .admin-officer-actions {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin-alert {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .admin-bottom-nav,
  .bottom-nav {
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }

  .page-section,
  .cases-hero,
  .cases-filters,
  .cases-list,
  .cases-detail-bar,
  .cases-detail-body,
  .cases-action-bar,
  .login-page,
  .install-page {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .app-header {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .sos-section-wrap {
    overflow: hidden;
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .install-grid {
    grid-template-columns: 1fr;
  }

  .cases-action-row {
    grid-template-columns: 1fr;
  }

  .admin-tab {
    font-size: 9px;
    padding: 8px 2px;
  }

  .quick-card {
    font-size: 13px;
    min-height: 108px;
    padding: 14px;
  }
}

a,
button,
input,
select,
textarea,
label,
summary,
[role="button"] {
  touch-action: manipulation;
}

input,
select,
textarea,
.admin-input,
.field input,
.field select,
.field textarea,
.install-field input {
  font-size: 16px !important;
  line-height: 1.4;
  max-height: none;
}

@supports (-webkit-touch-callout: none) {
  html {
    height: -webkit-fill-available;
  }

  body {
    min-height: -webkit-fill-available;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell,
  .app-main,
  .st-page,
  .pf-page,
  .lg-page,
  .hm-page {
    -webkit-overflow-scrolling: touch;
  }

  .app-shell {
    min-height: -webkit-fill-available;
  }

  .bottom-nav {
    padding-bottom: calc(8px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  }

  .modal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .sos-button,
  .lg-line-btn,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger,
  .hm-link,
  .bottom-nav a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  input,
  select,
  textarea,
  .admin-input {
    font-size: 16px !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px !important;
  }

  /* กัน iOS Safari zoom / layout เพี้ยนตอน focus input */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    transform: translateZ(0);
  }
}