/* ═══════════════════════════════════════════════════════════════════
   NINISINA — Tablet Responsive Styles
   Target: iPad landscape (1024px)
   Strategy: adjust padding, collapse sidebars, stack grids
═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {

  /* ── Global spacing ── */
  main {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  nav {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  nav .flex.gap-7 {
    gap: 16px !important;
  }

  /* ── Dashboard top 3-col → 2-col + stacked ── */
  .grid.grid-cols-3.gap-5.mt-10 {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Dashboard SOP card becomes full-width row */
  .grid.grid-cols-3.gap-5.mt-10 > div:nth-child(3),
  .grid.grid-cols-3.gap-5.mt-10 > div:last-child {
    grid-column: 1 / -1 !important;
  }

  /* ── Formulae 3-col grid → 2-col ── */
  #grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Formula Detail [1fr 420px] → single col ── */
  .grid-cols-\\[1fr_420px\\] {
    grid-template-columns: 1fr !important;
  }

  /* ── Sidebar pages: experiment-log, qc, batch-detail ──
     These are rendered via JS with inline grid-template-columns.
     We target the specific parent selectors. */

  /* experiment-log main grid (1fr 280px) */
  #main > div[style*="grid-template-columns:1fr 280px"],
  #main > div[style*="grid-template-columns: 1fr 280px"] {
    grid-template-columns: 1fr !important;
  }
  /* qc main grid */
  #main > div[style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
  }

  /* batch-detail content grid (1fr 320px) */
  #content > div[style*="grid-template-columns:1fr 320px"],
  #content > div[style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* sidebars become horizontal strips at bottom */
  #sidebar,
  #qc-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Sticky save card inside sidebar loses sticky */
  #sidebar > div[style*="sticky"],
  #qc-sidebar > div[style*="sticky"] {
    position: static !important;
  }

  /* ── 4-col form grids → 2-col ── */
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── 3-col form grids inside cards → 2-col ── */
  .s-card .grid.grid-cols-3,
  .grid.grid-cols-3.gap-x-8 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Inline 4-col grids (batch setup env row) ── */
  div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── pH test 3-col → single col ── */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Weigh table narrow columns stay but allow scroll ── */
  .wt-table, .coa-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Batch records table ── */
  #batch-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── SOP detail 2-col layout ── */
  .grid.grid-cols-\\[1fr_320px\\] {
    grid-template-columns: 1fr !important;
  }
  .grid[style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── QC disposition cards ── */
  .disp-opt {
    padding: 10px 14px !important;
  }

  /* ── COA document padding ── */
  .coa-doc {
    padding: 32px 28px !important;
  }
  .coa-table td, .coa-table th {
    padding-right: 8px !important;
  }

  /* ── Formula editor right panel (props) ── */
  .grid.grid-cols-\\[1fr_420px\\] > div:last-child {
    position: static !important;
  }

}


  /* ── Formula detail [1fr 420px] → stack ── */
  .grid.grid-cols-\[1fr_420px\] {
    grid-template-columns: 1fr !important;
  }
  /* Make right prop panel un-sticky on tablet */
  .grid.grid-cols-\[1fr_420px\] > div:last-child {
    position: static !important;
  }

  /* ── Nav gap ── */
  nav .gap-7 {
    gap: 14px !important;
  }
  nav .gap-10 {
    gap: 20px !important;
  }

/* ── Extra tight at exactly 1024px ── */
@media (max-width: 1024px) {
  nav .flex.gap-7 a {
    font-size: 12px !important;
  }
  h1[style*="font-size:32px"] {
    font-size: 26px !important;
  }
  h1[style*="font-size:28px"] {
    font-size: 24px !important;
  }
}