/* Responsive safety net — loaded last on every app page (templates/core/base.html).
   Goal: no page ever scrolls sideways, on a small phone, a tablet or a big screen.
   Wide things (tables, diagrams, code) scroll inside their own box; the page itself never does. */
html, body { max-width: 100%; }
.main-content { min-width: 0; }

/* Columns and grid cells may shrink below their content's natural width (their content then scrolls inside). */
.main-content .row > *, .main-content [class*="grid"] > * { min-width: 0; }

/* Media and form controls never wider than their box */
.main-content img, .main-content video, .main-content canvas, .main-content iframe { max-width: 100%; }
.main-content svg:not(.td-stage svg):not(#netmap svg) { max-width: 100%; }
.main-content input, .main-content select, .main-content textarea, .main-content .form-control, .main-content .form-select { max-width: 100%; }

/* Real data has very long single words — emails, member usernames, voucher codes, router names. "anywhere" also shrinks
   their minimum width, so they can no longer hold a grid cell or flex row wider than the screen (tables scroll instead). */
.main-content :is(b, strong, a, code, kbd, .voucher-code, dd, label, .badge, .nx-chip):not(table *):not(.btn):not(.btn *):not(.nav *) { overflow-wrap: anywhere; }
.main-content .nx-chip { max-width: 100%; white-space: normal; }

/* Long words, codes, MAC addresses and URLs wrap instead of pushing the page wider */
.main-content :is(p, li, h1, h2, h3, h4, h5, label, .alert, .panel-head p, small, dd) { overflow-wrap: break-word; }
.main-content pre { white-space: pre-wrap; word-break: break-word; max-width: 100%; }
.main-content .alert code, .main-content p code { word-break: break-all; }

.main-content .table-responsive { max-width: 100%; }

/* Modals fit small screens */
.modal-dialog { max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1rem)); }

/* Grids of pages whose class names do not say "grid" */
.main-content :is(.nx-hero, .nx-layout, .settings-grid, .lk-hero) > * { min-width: 0; }

/* Top bar on phones: the action buttons wrap onto their own line instead of running off the screen */
@media (max-width: 650px) {
  /* filter bars (Reports, Finance…): a dropdown sizes itself to its longest option — keep it inside the screen */
  .filter-bar > *, .bar-actions > * { max-width: 100%; min-width: 0; }
  .filter-bar select, .filter-bar .form-select, .bar-actions select { max-width: calc(100vw - 3.5rem); }
  /* date range (Reports, Finance…): the two dates and Apply wrap instead of pushing Apply past the card */
  .custom-range { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; max-width: 100%; }
  .custom-range input[type="date"] { flex: 1 1 8.5rem; min-width: 0; }
  /* sticky save bars sit left of the chat bubble (bottom right) so their button stays tappable */
  .nx-save { margin-right: 64px; }
  .nx-save .btn { white-space: nowrap; flex: none; }
  .nx-save > span { min-width: 0; }
  /* TapTap Link page: the connection diagram wraps instead of running off the screen */
  .lk-diag { flex-wrap: wrap; justify-content: center; }
  .lk-node { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .topbar { flex-wrap: wrap; gap: .6rem; }
  .topbar > :first-child { min-width: 0; flex: 1 1 auto; }
  .top-actions { flex-wrap: wrap; gap: .45rem; max-width: 100%; justify-content: flex-end; margin-left: auto; }
  .top-actions > * { min-width: 0; }
  .live-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-actions .btn, .page-actions .btn-group { max-width: 100%; }
  .page-actions > * { max-width: 100%; }
}