/* Noor Al-Iraq — mobile layout safety net (loaded on every page).
   Keeps every element inside the screen on phones: wide tables scroll sideways inside
   their own box, page containers never grow wider than the screen, grid items and
   selects may shrink, media never exceeds the screen. */
@media (max-width: 767px) {
  /* grid / flex children may shrink below their content width (long words, images, selects) */
  .grid > *, .flex-1 { min-width: 0; }
  /* "max-w-* mx-auto" page containers inside the flex-column body used to size to their
     content (e.g. a row of category buttons) and push half the page off-screen */
  .flex-col > .mx-auto[class*="max-w-"],
  body > .mx-auto[class*="max-w-"],
  main > .mx-auto[class*="max-w-"] { width: 100%; }
  .inline-flex { max-width: 100%; }
  select { max-width: 100%; text-overflow: ellipsis; }
  img, video, canvas, iframe, svg { max-width: 100%; }
  pre { white-space: pre-wrap; word-break: break-word; }
  input, textarea { max-width: 100%; }
}
/* added around wide tables by mobile-fixes.js */
.noor-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }