/* ===========================================================================
   FlowVerse — mobile polish layer
   Loaded LAST on every page, so it wins the cascade for the few things that
   must be enforced on phones. Intentionally conservative: it fixes the
   universal mobile foot-guns without restructuring any page's existing
   (already responsive) layout.
   =========================================================================== */

/* iOS/Android: never auto-inflate text, never bounce sideways. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { max-width: 100%; overflow-x: hidden; }

/* Media never blows out its container on a narrow screen. */
img, svg, video, canvas { max-width: 100%; height: auto; }

@media (max-width: 768px) {

  /* ── THE big one ───────────────────────────────────────────────────────
     Any form control under 16px makes iOS silently zoom the whole page in
     when the field is focused (and never zoom back out). Forcing 16px is the
     single most important mobile fix. !important because most controls set an
     inline/utility 13px. */
  input, select, textarea,
  .form-control, .input {
    font-size: 16px !important;
  }

  /* Comfortable, thumb-friendly tap targets for form controls. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select, textarea {
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Controls should not spill past their cell. */
  input, select, textarea { max-width: 100%; }

  /* Horizontal tab strips (admin) scroll instead of clipping their last tab. */
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Date navigator (dashboard queues) wraps instead of squeezing the label. */
  .date-nav { flex-wrap: wrap; gap: 8px; }

  /* Wide data tables scroll inside their card rather than stretch the page.
     Scoped to a wrapper so the W11 card-first tables are untouched. */
  .table-wrap, .table-scroll, .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals/sheets: never wider than the screen, never taller than it either. */
  .modal, .modal-card, .modal-content, [class*="modal"] > div {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
}