/* ── Responsive breakpoints (Galaxy Z Fold 7 + general) ────────────────
   Three tiers driven entirely by viewport width:
     <500px        Folded phone (Z Fold 7 outer screen, single col)
     500–900px     Unfolded tablet (Z Fold 7 inner screen, 2 col)
     >900px        Desktop / laptop (current default, multi-col auto-fill)

   Layout switches automatically when the user folds/unfolds — no toggles.
*/

/* ═══════════════ FOLDED PHONE: < 500px ═══════════════════════════════ */
@media (max-width: 499px) {

  /* Prevent iOS Safari from auto-zooming on input focus */
  input, select, textarea { font-size: 16px !important; }

  /* ── Topbar — pack into 2 rows so action buttons stay reachable ── */
  .topbar { flex-wrap: wrap; padding: 8px 10px; gap: 6px; }
  .topbar h1, .topbar .h1 { font-size: 16px; }
  .topbar .btns { flex-wrap: wrap; gap: 4px; }
  .topbar .btns .btn-sm,
  .topbar .btn-sm { font-size: 12px; padding: 6px 8px; min-height: 38px; }

  /* ── Job Site entry bar — wrap into 2 rows, big tap targets ─────── */
  .chem-entry-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
    align-items: stretch !important;
  }
  .chem-entry-bar > div { min-width: 0; }
  .chem-entry-bar label {
    font-size: 11px !important;
    color: #555 !important;
    font-weight: bold;
    margin-bottom: 2px !important;
  }
  .chem-entry-bar input,
  .chem-entry-bar select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 6px 8px !important;
  }
  .chem-entry-bar .ce-btn {
    font-size: 14px !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    flex: 1 1 auto;
  }
  /* Chem name input stretches full width on its own row */
  .chem-entry-bar #jsChemName,
  .chem-entry-bar [id$="ChemName"] { flex: 1 1 100% !important; }

  /* ── Drum cards: single column, larger touch targets ────────────── */
  .drum-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .drum-card { font-size: 13px; }
  .drum-card .btn-sm,
  .drum-card .add-to-drum-btn {
    font-size: 13px !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
  }
  .drum-card .drum-no { font-size: 14px !important; }

  /* ── Dashboard cards: single column ─────────────────────────────── */
  .grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .card { padding: 14px !important; }
  .card .label { font-size: 15px !important; }
  .card .desc { font-size: 12px !important; }

  /* ── Entry Form / Bulk Entry: collapse multi-col grids ──────────── */
  .fg-2, .fg-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
  .container, .page { padding: 8px !important; }

  /* ── Tab bar — horizontal scroll instead of wrapping (preserves UX) */
  .tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .tab-bar .tab { flex: 0 0 auto; font-size: 13px !important; padding: 8px 12px !important; }

  /* ── Inline drum editor: stack the e-grid columns ───────────────── */
  .drum-edit .e-grid { grid-template-columns: 1fr !important; }
  .drum-edit input, .drum-edit select, .drum-edit textarea { font-size: 16px !important; }
  .drum-edit .e-lines { font-size: 12px !important; }
  .drum-edit .e-actions .btn,
  .drum-edit .e-actions a { min-height: 40px; padding: 8px 12px !important; }

  /* Modals shouldn't be tiny on phone */
  .modal { width: 95vw !important; max-width: 95vw !important; }
}

/* ═══════════════ UNFOLDED TABLET: 500–900px ═══════════════════════════ */
@media (min-width: 500px) and (max-width: 900px) {

  /* Job Site drum grid: exactly 2 columns ─ tablet workstation feel */
  .drum-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  /* When a card is being edited, it still spans both columns for room */
  .drum-card.editing { grid-column: 1 / -1 !important; }

  /* Dashboard cards: 2 columns */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* Entry form: 2-col where 3-col was, keep 2-col where 2 was */
  .fg-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Entry bar: single row but a touch larger for finger use */
  .chem-entry-bar input,
  .chem-entry-bar select { font-size: 13px !important; min-height: 36px; }
  .chem-entry-bar .ce-btn { font-size: 12px !important; min-height: 36px; padding: 6px 12px !important; }
  .chem-entry-bar label { font-size: 10px !important; }

  /* Topbar: keep buttons single row but tighten */
  .topbar .btns .btn-sm { font-size: 12px; padding: 5px 9px; }

  /* Inline editor: 2-col field grid (instead of auto-fit's 4+ cramped cols) */
  .drum-edit .e-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════ DESKTOP: > 900px ═════════════════════════════════════ */
/* No overrides — current page styles already target this default. The
   auto-fill drum grid, three-column entry-form layout, single-row entry
   bar all work as-is. */