/* ══════════════════════════════════════════════════════════════════════════
   Perbaikan tampilan mobile (HP ≤480px, tablet ≤768px) -- 2026-09-25.
   HANYA CSS: tidak ada fitur/data/alur/logika yang diubah. Mengikuti teknik
   yang sudah dipakai lebih dulu di index.html (attribute-selector `[style*="..."]`
   menimpa inline style React tanpa menyentuh JS -- lihat blok di index.html,
   baris 1-43 & ~548-564). Sidebar drawer mobile (hamburger, overlay, auto-close saat
   ganti rute) SUDAH ADA & wired penuh di app.compiled.4.js (breakpoint 820px)
   -- blok ini TIDAK membuat mekanisme baru, hanya menyetel ukurannya.

   WAJIB dipasang ulang (file ini + tag <link> yang memanggilnya di index.html)
   setiap ada export baru dari Claude Design -- lihat CLAUDE.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* Rule 9 -- tidak boleh ada scroll horizontal di level halaman (body) */
@media (max-width:768px){
  html, body, #root { max-width:100%; overflow-x:hidden; }
}

/* Rule 1 -- tombol hamburger (title="Buka menu", sudah ada di app.compiled.4.js)
   dan tombol "‹" tutup sidebar: pastikan target sentuh ≥40px di HP/tablet
   (desainnya sekarang 38px). Selector by [title] karena tidak ada class/id. */
@media (max-width:768px){
  #root [title="Buka menu"] { width:40px !important; height:40px !important; min-width:40px; min-height:40px; }
}

/* Rule 2 -- grid kartu (repeat 3-6 kolom): tablet 2 kolom, HP 1 kolom.
   Selector [style*="repeat(N"] IDENTIK dengan yang sudah dipakai di blok
   701-1330px di index.html (baris 16-17) -- diperluas ke rentang tablet/HP di sini.
   repeat(2 SENGAJA tidak disentuh di tablet (form/tombol 2-kolom masih wajar
   selebar itu); di HP repeat(2 ikut ditumpuk lewat aturan form terpisah di
   bawah supaya form tetap 1 kolom tanpa memaksa SEMUA grid 2-kolom (mis. grup
   2 tombol) ikut runtuh di tablet. */
@media (min-width:481px) and (max-width:768px){
  #root [style*="repeat(6"], #root [style*="repeat(5"], #root [style*="repeat(4"],
  #root [style*="repeat(3"] { grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:480px){
  #root [style*="repeat(6"], #root [style*="repeat(5"], #root [style*="repeat(4"],
  #root [style*="repeat(3"], #root [style*="repeat(2"] { grid-template-columns:repeat(1,1fr) !important; }
}

/* Rule 3 -- tabel: font 12px, wadah yang geser (sudah ada lewat data-sxauto /
   `main div:has(> table)` di index.html), kolom Aksi beku di kanan. Stickiness asli
   (position:sticky;right:0) cuma di-hardcode di 2 tabel (app.compiled.4.js) --
   di sini dibuat berlaku umum untuk SEMUA tabel dalam wadah geser (data-sxauto)
   supaya kolom terakhir (hampir selalu "Aksi" di ERP ini) tetap terlihat saat
   digeser, tanpa menambah kode di JS. */
@media (max-width:768px){
  table { font-size:12px; }
  [data-sxauto="1"] table th:last-child, [data-sxauto="1"] table td:last-child,
  #root main div:has(> table) table th:last-child, #root main div:has(> table) table td:last-child {
    position:sticky; right:0; background:var(--panel,#fff);
    box-shadow:-6px 0 8px -6px rgba(0,0,0,.18);
  }
}

/* Rule 4 -- header halaman/kartu: judul & tombol boleh turun baris (Card
   sudah flex-wrap secara default, lihat komponen Card), tombol min. 40px.
   index.html baris 35-38 MEMAKSA tombol/select/input header kartu ke 32px utk
   desktop -- ditimpa di sini KHUSUS mobile supaya tidak bentrok. */
@media (max-width:768px){
  #root section > header select, #root section > header input,
  #root section > header button {
    height:auto !important; min-height:40px !important;
    padding-top:8px !important; padding-bottom:8px !important; box-sizing:border-box !important;
  }
  #root section > header { row-gap:10px; }
}

/* Rule 5 -- popup/modal jadi layar penuh di HP/tablet, tombol simpan/batal
   menempel di bawah. Semua modal di app ini berpola sama: overlay
   position:fixed;inset:0 (dipastikan lewat pengecekan DOM nyata: React
   menulis "position: fixed; inset: 0px;") berisi SATU div panel langsung.
   Overlay drawer sidebar mobile JUGA position:fixed;inset:0 tapi tanpa isi
   (cuma backdrop kosong, onClick tutup) -- aturan `> div` di bawah otomatis
   tidak match apa pun di situ, aman. */
@media (max-width:768px){
  #root [style*="position: fixed"][style*="inset: 0"] { padding:0 !important; }
  #root [style*="position: fixed"][style*="inset: 0"] > div {
    width:100% !important; max-width:100% !important;
    height:100% !important; max-height:100% !important;
    border-radius:0 !important; margin:0 !important;
    display:flex !important; flex-direction:column !important;
  }
  /* Body modal yang bisa digulir (overflowY:auto) diberi flex:1 supaya header
     & footer modal tetap di atas/bawah, cuma isinya yang menggulir. */
  #root [style*="position: fixed"][style*="inset: 0"] > div [style*="overflow-y: auto"],
  #root [style*="position: fixed"][style*="inset: 0"] > div [style*="overflow: auto"] {
    flex:1 !important; min-height:0 !important;
  }
}

/* Rule 6 -- form: input 1 kolom lebar penuh, font ≥16px (cegah auto-zoom
   iOS -- mayoritas input di app ini 12-13.5px, di bawah ambang 16px). */
@media (max-width:768px){
  #root input:not([type="checkbox"]):not([type="radio"]), #root select, #root textarea {
    font-size:16px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important;
  }
}

/* Rule 7 -- strip tab (data-tabstrip, diinjeksi runtime oleh app.compiled.3.js)
   digeser horizontal, bukan turun ke baris baru. */
@media (max-width:768px){
  [data-tabstrip] { flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  [data-tabstrip] > button { flex-shrink:0 !important; }
}

/* Rule 8 -- peta Leaflet & grafik: tinggi menyesuaikan layar pendek (mis.
   HP landscape / SE 375x667) supaya kartu peta versi "diperluas" tidak
   memenuhi lebih dari layar yang tersisa setelah header. Tinggi tetap dalam
   px/calc (BUKAN % -- Leaflet butuh tinggi eksplisit, lihat komentar asli). */
@media (max-width:480px){
  #root [style*="calc(100vh - 260px)"] { height:min(calc(100vh - 200px), 420px) !important; }
}