/* Global responsive standard:
   - protects viewport width on mobile
   - keeps legacy templates with inline layout styles from overflowing
   - normalizes table/modal/media behavior */

body.modal-open {
  overflow: hidden;
}

.alert-modal {
  width: min(520px, 100%);
}

.alert-modal-message {
  font-size: 14px;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  html,
  body {
    height: auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .layout,
  .main,
  .content,
  .page,
  [class*="page-"] {
    min-width: 0;
    max-width: 100%;
  }

  .content > * {
    min-width: 0;
    max-width: 100%;
  }

  .content {
    overflow-x: hidden;
  }

  .content :where(.card, .grid, .toolbar, .tabs, .table-wrap, .modal, .modal-dialog, .modal-body, form, details, section, article) {
    min-width: 0;
    max-width: 100%;
  }

  .content :where(img, svg, canvas, video, iframe) {
    max-width: 100%;
  }

  .content :where(input, select, textarea, button, .btn) {
    max-width: 100%;
  }

  .content :where(.table-wrap, .history-scroll, .list-scroll-3, .launches-scroll) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .content :where(.card > .table, .history-scroll > .table, .list-scroll-3 > .table, .launches-scroll > .table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .content [style*="width:min("],
  .content [style*="max-width:"] {
    max-width: 100% !important;
  }

  .content [style*="display:flex"][style*="justify-content:space-between"],
  .content [style*="display:flex"][style*="justify-content:flex-end"],
  .content [style*="display:flex"][style*="align-items:center"] {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
  }
}