/* mobile-ui.css - shared phone layer for the whole panel (2026-08-20).
   Loaded by all three page families: fresh pages (lib/fresh_nav.php), the ~111
   legacy Smarty pages (templates/index.tpl) and the vendor portal
   (lib/vendor_chrome.php + the standalone vendor pages).

   EVERY rule lives inside a max-width media query, so the desktop panel is byte
   for byte unchanged. Keep it generic: it lands on ~150 pages that were all
   built desktop-first, so it must fix shared structure (overflow, tap targets,
   iOS zoom, modals) and never assume one page's markup. */

@media (max-width: 900px) {
  html, body { max-width: 100%; }
  body { -webkit-text-size-adjust: 100%; }
  img, video, canvas, iframe { max-width: 100%; }

  /* iOS Safari zooms the whole page when a focused field is under 16px. Every
     one of these pages sets 12-13px inputs, so this was the single biggest
     "the panel is unusable on a phone" cause. */
  input, select, textarea { font-size: 16px !important; max-width: 100%; }
  input[type=text], input[type=password], input[type=number], input[type=search],
  input[type=email], input[type=tel], input[type=date], select, textarea { min-height: 38px; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 18px; height: 18px; }

  /* finger-sized controls */
  button, .btn, .chip, .upd, input[type=submit], input[type=button], input[type=reset] {
    min-height: 38px; }

  /* applied by mobile-ui.js to anything measured wider than the screen */
  .mui-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; overscroll-behavior-x: contain; }

  /* modals become sheets instead of hanging off the side */
  .modal-dialog { margin: 8px !important; max-width: calc(100vw - 16px) !important; }
  .modal-content { max-height: calc(100vh - 20px); overflow-y: auto; }
  .modal-ov, .sheet, .ssp-rm-card, .pair-modal-shell {
    max-width: 96vw !important; max-height: 92vh; overflow: auto; }

  /* shared page shells must not force a fixed desktop width */
  .wrap, .container, .content, .page, .card, .panel { max-width: 100% !important; }

  /* filter/toolbar rows wrap instead of overflowing */
  .rail, .filters, .toolbar, .sect-h, .mini { flex-wrap: wrap !important; }
}

/* phones proper */
@media (max-width: 600px) {
  .modal-dialog { margin: 0 !important; max-width: 100vw !important; }
  .modal-content { border-radius: 0; min-height: 100vh; }
  /* KPI/stat grids collapse to one or two columns */
  .cards, .cats, .conns, .duo { grid-template-columns: 1fr !important; }
}