/* mobile-utils.css — shared phone-layout utilities.
 *
 * There is NO native mobile app: growers use every page in their phone's
 * browser (360–430px wide), so these patterns recur on every surface. The
 * 2026-06-04 mobile audit fixed ~86 instances of the same three mistakes;
 * use these utilities in NEW code so the next page is mobile-correct by
 * default. (Older per-surface equivalents — .mfg-hscroll, .data-table-wrap,
 * .table-wrap — predate this file and are fine to leave as-is.)
 *
 * Linked from: index.html, admin.html, orders.html, manufacturing.html,
 * install.html, troubleshoot.html. Conventions + the 390px overflow gate:
 * .claude/rules/frontend.md "Mobile" section.
 */

/* ── Horizontal scroll container ─────────────────────────────────────────
 * Wrap any table/grid that legitimately can't reflow at 390px. Give the
 * inner table/grid a min-width so columns stay legible — it scrolls inside
 * the wrapper instead of clipping or widening the page. NEVER contain a wide
 * table with overflow:hidden (clips data with no way to reach it).
 *   <div class="u-hscroll"><table style="min-width:720px">…</table></div>
 */
.u-hscroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Touch targets ───────────────────────────────────────────────────────
 * Put on small interactive controls (icon buttons, close ✕, steppers,
 * checkboxes) so fingers get ≥40px without changing mouse-driven desktop sizing.
 */
@media (pointer: coarse) {
  .u-touch-target {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ── iOS focus-zoom guard ────────────────────────────────────────────────
 * iOS Safari auto-zooms the page when a focused text control renders below
 * 16px. Add .u-no-zoom to a form/container (or a control itself) and every
 * text-entry control inside renders 16px on phones/tablets; desktop is
 * untouched. New forms should just use 16px inputs everywhere instead.
 */
@media (max-width: 820px) {
  .u-no-zoom input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .u-no-zoom select,
  .u-no-zoom textarea,
  input.u-no-zoom,
  select.u-no-zoom,
  textarea.u-no-zoom {
    font-size: 16px;
  }
}

/* ── Viewport edge clamp ─────────────────────────────────────────────────
 * For JS-positioned popovers/menus (position:fixed/absolute with computed
 * left): guarantees the element can never extend past the phone's right
 * edge, regardless of anchor position. Clamps only when oversized.
 */
.u-vw-clamp {
  max-width: calc(100vw - 16px);
}