/*
 * Cross-page rules for phones and tablets (below the theme's xl breakpoint,
 * where the sidenav goes off-canvas). Anything specific to one page belongs in
 * that view's own <style> block, not here.
 */

@media (max-width: 1199.98px) {
  /* Safety net against stray horizontal scroll; real offenders should still be
     fixed at the source so nothing is clipped. */
  html,
  body {
    overflow-x: hidden;
  }

  .main-content .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .main-content img,
  .main-content svg,
  .main-content video,
  .main-content iframe {
    max-width: 100%;
  }

  /* Long unbroken tokens (URLs, IDs, emails) must wrap instead of pushing the
     card past the viewport edge. */
  .main-content .card,
  .main-content .alert,
  .main-content .modal-body {
    overflow-wrap: anywhere;
  }

  .main-content .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* Tables inside cards keep their natural width and scroll sideways rather than
     squeezing every column into unreadable slivers. */
  .main-content .table-responsive > .table {
    min-width: 640px;
  }

  /* The theme customiser (sidebar colours etc.) floats over content; hide it. */
  .fixed-plugin {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .main-content .container-fluid {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  .main-content .card-body.p-4 {
    padding: 1rem !important;
  }

  .main-content .card-header.p-4 {
    padding: 1rem 1rem 0.5rem !important;
  }

  /* Bootstrap modals: use the full width on phones. */
  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
  }

  /* Button groups that sit in page headers wrap instead of overflowing. */
  .main-content .d-flex.gap-2 > .btn,
  .main-content .d-flex.gap-2 > form > .btn {
    white-space: normal;
  }
}