/* ============================================================
   DRMS Jamaica — global responsive / mobile safety layer.
   Loaded last on every page. Eliminates sideways page-scroll
   and makes wide content (tables, filter bars, media, long
   strings) fit phone screens. Desktop layout is untouched.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* media never widens the layout */
img, svg, video, canvas { max-width: 100%; }

/* the page itself must never scroll sideways. overflow-x:clip
   (unlike :hidden) does not break position:sticky headers. */
html, body { overflow-x: clip; }

@media (max-width: 760px) {
  /* wide tables scroll inside their own box — not the whole page */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rep-tablewrap, .matrix-wrap, .table-wrap, .tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }

  /* filter bars wrap; their controls take the available width */
  .filterbar { flex-wrap: wrap; }
  .filterbar select, .filterbar input { flex: 1 1 150px; min-width: 0; }

  /* long unbroken strings (URLs, codes, emails) can't push the layout wide */
  body { overflow-wrap: break-word; word-wrap: break-word; }

  /* trim portal page padding so cards use the full phone width */
  .wrap { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
  .wrap { padding-left: 11px; padding-right: 11px; }
  .page-head h1 { font-size: 22px; }
}