/* ═══════════════════════════════════════════════════════════════════════════════
   JEP OS — shared phone stylesheet
   ═══════════════════════════════════════════════════════════════════════════════
   Linked by the standalone pages (quote builder, cost settings, expenses, receiving,
   performance, suppliers, compliance, production dashboard…). Each of those was written
   for a desktop window: fixed-width side panels, single-row tab strips, tables far wider
   than a phone, and form controls at 12–14px. The last one matters most — iOS Safari
   zooms the whole page in when you focus a control under 16px and never zooms back, which
   is what made every form on this system feel broken on a phone.

   Nothing here applies above 860px, so desktop is untouched. Load it AFTER the page's own
   <style> block so these rules win on equal specificity.

   The main app (shop-floor.html) does NOT use this file — its phone layout is inline,
   because it also has to restructure the nav into a bottom tab bar.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* ── Form controls: the anti-zoom rule ──
     Anything below 16px triggers iOS Safari's focus zoom. This is the single highest-value
     line in the file. */
  input, select, textarea,
  .form-input, .form-select, .input, .sel,
  .form-group input, .form-group select, .form-group textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { min-height: 40px; }
  /* Table cells hold a lot of small inputs; keep those compact but still non-zooming. */
  td input, td select, th input, th select { min-height: 34px; }

  /* ── Tap targets ── */
  button, .btn, .tab, .main-tab, .sub-tab { min-height: 36px; }

  /* ── Anything laid out as fixed side-by-side panels stacks ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"],
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Tab strips scroll sideways instead of running off the edge ──
     cost-settings (.tab) and performance (.main-tab) both overflowed by 300–480px. */
  .tabs, .main-tabs, .tab-row, .tab-bar, .sub-tabs, .nav-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .main-tabs::-webkit-scrollbar, .tab-row::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar, .sub-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
  .tab, .main-tab, .sub-tab, .nav-tab { flex-shrink: 0; white-space: nowrap; }

  /* ── Tables scroll within their own box rather than crushing every column ── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  table > thead, table > tbody, table > tfoot { display: table; width: 100%; min-width: max-content; }
  th, td { white-space: nowrap; }
  th:first-child, td:first-child { white-space: normal; min-width: 100px; max-width: 50vw; }

  /* ── Fixed-width panels go full width ──
     quote-builder's #summaryPanel (280px, pinned right) and receiving's .form-panel (500px)
     both hung off the screen. */
  .panel-right, .panel-left, .side-panel, .form-panel, .inventory-panel, .sidebar {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    position: static !important; float: none !important;
  }

  /* Two-column shells stack. Deliberately does NOT set `display` — forcing flex on a
     container that is actually a CSS grid would destroy its layout. Setting both
     flex-direction and grid-template-columns is a no-op for whichever one doesn't apply. */
  .split, .two-col, .cols, .page-grid, .main-grid, .content-grid {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  /* Toolbars / button rows wrap instead of marching off the right edge (expenses). */
  .toolbar, .btn-row, .actions, .filters, .filter-bar, .controls, .header-actions {
    flex-wrap: wrap !important;
  }

  /* ── Page chrome ── */
  body { padding-bottom: env(safe-area-inset-bottom); }
  .container, .wrap, .page, main { padding-left: 12px !important; padding-right: 12px !important; max-width: 100% !important; }

  /* Modals become near-full-screen sheets. */
  .modal, .modal-box, .dialog { max-width: 100% !important; width: 100% !important; max-height: 94dvh; }
  .overlay, .modal-overlay { padding: 0 !important; }

  /* Hover tooltips have no meaning without a cursor and stick after a tap. */
  [data-tip]::after, [data-tip]::before, .tooltip { display: none !important; }

  /* ── Page-specific shells ──
     These are pixel-column grids named per page, so no generic selector reaches them.
     They also pin height to calc(100vh - N) and scroll each column independently, which
     on a phone traps content in a short inner box; auto height lets the page scroll once. */

  /* Quote Builder: 320px | 1fr | 280px  → one column, panels in reading order. */
  .main { grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; }
  .panel-left, .panel-mid, .panel-right {
    height: auto !important; max-height: none !important; overflow: visible !important;
    border-left: none !important; border-right: none !important;
    border-top: 1px solid #e0e8f0;
  }

  /* Receiving: 500px | 1fr → stack the form above the inventory list. */
  .layout { grid-template-columns: 1fr !important; height: auto !important; }
  .form-panel { border-right: none !important; }
  .form-panel, .inventory-panel { height: auto !important; overflow: visible !important; }

  /* Expense Ledger: a header of eight buttons in one nowrap row. */
  header { flex-wrap: wrap !important; height: auto !important; row-gap: 6px; }
  header .sp { display: none !important; }          /* spacer that forces the row wide */

  /* Production dashboard: KPI strip with fixed dividers. */
  .stats-bar { flex-wrap: wrap !important; }
  .stat { border-right: none !important; border-bottom: 1px solid #e0e8f0; flex: 1 1 45% !important; }
}

@media (max-width: 860px) {
  /* Same generic fix as the main app: inline flex rows written for a wide window wrap
     rather than squeezing their last controls into slivers. Only applies where the
     markup hasn't already chosen a wrap behaviour or a column direction. */
  [style*="display:flex"]:not([style*="flex-wrap"]):not([style*="flex-direction:column"]) { flex-wrap: wrap; }
}