/* OPAL WS global responsive hardening — 2026-07-27 */
@media (max-width: 760px) {
  html, body { max-width: 100%; overflow-x: hidden; }

  .modal-shell {
    padding: 8px;
    align-items: center;
  }
  .modal-card,
  .modal-card.wide,
  .enterprise-modal-card {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    min-width: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .modal-head {
    flex: 0 0 auto;
    padding: 14px;
    align-items: flex-start;
  }
  .modal-head > div { min-width: 0; }
  .modal-head h3,
  .modal-head h4,
  .modal-head small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .modal-head > button,
  .modal-head [data-modal-close] {
    flex: 0 0 38px;
  }
  .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px;
  }
  .modal-body > *,
  .modal-body label,
  .modal-body section,
  .modal-body article,
  .modal-body div { min-width: 0; }

  .modal-foot {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    background: var(--panel);
  }
  .modal-foot > .btn,
  .modal-foot > button,
  .modal-foot > a,
  .modal-foot > label {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
  }
  .modal-foot > div {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }
  .modal-foot > div > .btn,
  .modal-foot > div > button,
  .modal-foot > div > a { width: 100%; min-width: 0; }

  .btn:not(.topbar-icon-button):not(.sidebar-mobile-close),
  .button,
  .opal-button,
  .opal-mini-button,
  .action-button {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: center;
    line-height: 1.25;
  }
  .btn .o-icon,
  .button .o-icon { flex: 0 0 auto; }

  .grid-2,
  .grid-3,
  .grid-4,
  .form-grid,
  .settings-grid-2,
  .settings-grid-3,
  .settings-grid-4,
  .enterprise-grid-2,
  .enterprise-grid-3,
  .enterprise-grid-4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .head-actions,
  .enterprise-head-actions,
  .enterprise-section-actions,
  .form-actions,
  .action-row,
  .button-row,
  .toolbar-actions,
  .filter-actions {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
  .head-actions > .btn,
  .enterprise-head-actions > .btn,
  .form-actions > .btn,
  .action-row > .btn,
  .button-row > .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .tabs,
  .tabbar,
  .profile-tabbar,
  .enterprise-tabs,
  .modal-tabs,
  [role="tablist"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .tabs > button,
  .tabbar > button,
  .profile-tabbar > button,
  .enterprise-tabs > button,
  .modal-tabs > button,
  [role="tablist"] > [role="tab"] {
    flex: 0 0 auto;
    min-width: max-content;
  }
  .tabs .badge,
  .tabbar .badge,
  [role="tab"] .badge,
  [role="tab"] [data-count] {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
  }

  input, select, textarea,
  .modal-body input,
  .modal-body select,
  .modal-body textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .table-responsive,
  .opal-table-wrap,
  .enterprise-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 430px) {
  .modal-shell { padding: 0; }
  .modal-card,
  .modal-card.wide,
  .enterprise-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .modal-head { padding: 12px; }
  .modal-body { padding: 12px; }
  .modal-foot { padding-inline: 12px; }
}