/* =========================================================
   RESPONSIVE — SIMOPRO
   Supaya aplikasi tetap nyaman & tidak "kepotong" di tablet
   (iPad dkk, ≤1024px) dan HP (≤600px), tanpa mengubah tampilan
   desktop yang sudah baku di atas 1024px. Dimuat PALING TERAKHIR
   di index.html supaya aturan di sini menang atas file CSS lain.

   Catatan: sidebar sudah otomatis diciutkan jadi rail ikon 64px
   di layar ≤1024px lewat inline script di <head> index.html
   (lihat komentar di sana) + variables.css (matikan zoom 1.1).
   File ini merapikan sisanya: topbar, header halaman, tombol aksi,
   form input, dan tabel supaya tetap muat & enak disentuh (touch).
   ========================================================= */

/* ── TABLET (iPad potret/lanskap & sejenisnya, ≤1024px) ── */
@media (max-width:1024px){
  .topbar{padding:8px 14px}
  .topbar-title{font-size:13px}

  .page{padding:14px 14px}
  .pg-header{margin-bottom:14px;padding-bottom:12px}
  .pg-title{font-size:18px;white-space:normal}
  .pg-actions{gap:6px}
  .pg-actions .btn{font-size:11px;padding:6px 10px;white-space:nowrap}

  /* Kartu form Input Produksi — padding dipadatkan supaya lebih
     banyak ruang tersisa utk tabel di dalamnya */
  .inp-wrapper{padding:14px}
  .inp-topbar{flex-wrap:wrap;row-gap:8px}
  .inp-topbar-meta{flex-wrap:wrap}
  .op-row{flex-wrap:wrap;row-gap:10px}
  .op-field{min-width:200px;flex:1 1 200px}
  .sum-bar{flex-wrap:wrap;row-gap:10px}

  /* Tabel produksi/X-Pengganti: kolom dipadatkan sedikit supaya
     lebih banyak yang muat tanpa perlu digeser. Wrapper-nya sendiri
     (div style="overflow-x:auto" di index.html) tetap jadi jaring
     pengaman kalau memang belum cukup muat. */
  .inp-prod-table th,.inp-prod-table td,
  .xp-table th,.xp-table td{font-size:11px;padding:6px 8px}
}

/* Penanda halus (scrollbar tipis + momentum scroll) pada SEMUA
   pembungkus tabel yang bisa digeser ke samping — memakai selector
   atribut karena pembungkusnya ditulis sbg inline style di index.html
   (style="overflow-x:auto"), jadi tidak perlu ubah tiap baris HTML. */
[style*="overflow-x:auto"]{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* ── HP (≤600px) ── */
@media (max-width:600px){
  /* Sidebar rail 64px masih agak lebar di layar HP kecil — perkecil
     lagi jadi rail super ramping, ikon tetap kebaca & tetap bisa
     diperluas manual lewat tombol ciutkan/perluas. */
  html.sidebar-collapsed{ --sw:52px; }
  html.sidebar-collapsed #sidebar-toggle-btn{ left:52px; }
  html.sidebar-collapsed .nav-icon{ font-size:13px }

  .topbar{padding:8px 10px;gap:6px;row-gap:6px}
  .topbar-title{font-size:12px}
  .topbar-bread{display:none}

  .page{padding:10px 10px}
  .pg-header{flex-direction:column;align-items:flex-start;row-gap:8px}
  .pg-title{font-size:16px}
  .pg-sub{font-size:11px}
  .pg-actions{width:100%}
  .pg-actions .btn{flex:1 1 auto;justify-content:center;min-width:0}

  .inp-wrapper{padding:10px}
  .inp-topbar{flex-direction:column;align-items:flex-start;gap:8px}
  .inp-topbar-title{font-size:12px}
  .inp-topbar-meta{width:100%}
  .op-row{flex-direction:column;row-gap:8px}
  .op-field{width:100%;flex:1 1 auto}

  .sum-bar{flex-direction:column;align-items:flex-start;row-gap:8px}
  .sum-item{width:100%;justify-content:space-between;display:flex}

  .inp-prod-table th,.inp-prod-table td,
  .xp-table th,.xp-table td{font-size:10.5px;padding:5px 6px}
}