/* Phone + laptop rules shared by every Caterer Portal page (owner, 1 Oct 2026:
   "Has to be mobile friendly... Optimise for mobile phone and laptop for
   every section"). Loaded LAST on each page, so it only adjusts. */

/* Nothing may push the page sideways on a phone. `clip`, not `hidden`:
   hidden turns the page into a scroll box and breaks sticky panels. */
html, body { max-width: 100%; overflow-x: clip; }
img, video { max-width: 100%; height: auto; }

/* Wide tables scroll inside their box instead of overflowing the screen. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x > table { min-width: 520px; }

/* Long names, links and references wrap instead of overflowing. */
.card, td, li, .hint, .msg { overflow-wrap: anywhere; }

@media (max-width: 560px) {
  /* 16px stops iPhone Safari zooming into a field when it's tapped. */
  input, select, textarea { font-size: 16px !important; }
  .wrap { padding: 10px !important; }
  .card { padding: 12px !important; }
  h1 { font-size: 20px !important; }
  /* Action rows: big, full-width, easy to tap. */
  .acts > .btn, .acts > a.btn, .actions > .btn { flex: 1 1 auto; text-align: center; padding-top: 11px; padding-bottom: 11px; }
  .btn.small { padding: 7px 11px; }
  /* Header: brand + "Caterer Portal" on one line, account links in one row under it. */
  .console-top { padding: 6px 10px 4px !important; gap: 4px 10px !important; }
  .console .cp-right { margin-left: 0 !important; width: 100%; gap: 4px 12px !important; font-size: 12.5px !important; }
  /* Checkbox rows stay one tap target each. */
  label.dish, .bf-check { min-height: 40px; }
}

@media print {
  .scroll-x { overflow: visible; }
  .scroll-x > table { min-width: 0; }
}