/*
 * Mobile safety net, loaded on admin AND public pages.
 *
 * These are broad, low-risk rules for the things that most often break on a narrow phone
 * screen: rows of buttons/fields that don't wrap, long unbroken strings (URLs, emails,
 * codes), and media wider than the screen. They only kick in where content would
 * otherwise overflow or overlap — on a wide screen nothing here changes the layout.
 *
 * Kept as a plain CSS file (not Tailwind classes) so one place covers every page.
 */

html { -webkit-text-size-adjust: 100%; }

/* No page-level sideways scrolling; wide tables still scroll inside their own wrapper. */
body { overflow-x: hidden; }

img, video, iframe { max-width: 100%; }
input, select, textarea { max-width: 100%; }

/* Long unbroken text (webhook URLs, emails, voucher codes) wraps instead of overflowing. */
main, .wrap, .card { overflow-wrap: break-word; }
code, pre { white-space: pre-wrap; word-break: break-all; }

@media (max-width: 767px) {
  /* Rows of buttons / fields / badges wrap onto a new line instead of squashing together
     or running off the screen. Excluded on purpose: columns, rows that already declare
     wrapping behaviour, horizontal scrollers, and fixed-height bar charts. */
  main .flex:not(.flex-col):not(.flex-col-reverse):not(.flex-nowrap):not(.overflow-x-auto):not([class*="h-32"]),
  body > nav.flex:not(.flex-col):not(.flex-nowrap) {
    flex-wrap: wrap;
  }
}