/* ------------------------------------------------------------------
   Penyesuaian tablet (iPad mini dst) untuk kasir Stanley.

   Dimuat SETELAH stylesheet aplikasi supaya menimpa, dan sengaja
   dipisah agar bundel aplikasi tidak perlu disentuh.

   Masalah yang diperbaiki:
   Pada lebar >= 768px aplikasi beralih ke tata letak bersidebar.
   <main> memakai "flex-1" tanpa "min-w-0". Item flex tidak boleh
   menyusut di bawah lebar min-content isinya kecuali min-width:0
   diberikan, sehingga grid menu memaksa main melebar 1140px di
   layar 768px — isinya terpotong di kanan dan halaman bisa digeser
   horizontal. Terukur: scrollWidth 1395px pada viewport 768px.
   ------------------------------------------------------------------ */
main { min-width: 0; }

/* Pengaman tambahan: apa pun tidak boleh memaksa halaman melebar. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ------------------------------------------------------------------
   Sidebar menyusut otomatis saat membuka Kasir (lebar tablet ke atas).

   Di >=768px navigasi bawah disembunyikan aplikasi (md:hidden), jadi
   sidebar adalah satu-satunya jalan pindah halaman. Karena itu ia
   TIDAK dihilangkan, melainkan disusutkan jadi rel 44px berisi tombol
   buka — layar kasir dapat tambahan ~244px tanpa kehilangan navigasi.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  aside { transition: width .22s ease; }

  html.kasir-rapat aside {
    width: 44px !important;
    min-width: 44px !important;
    overflow: hidden;
  }
  /* sembunyikan seluruh isi sidebar kecuali tombol yang kita sisipkan */
  html.kasir-rapat aside > *:not(#tombolRel) { display: none !important; }

  #tombolRel {
    display: none;
    position: sticky; top: 10px;
    align-self: center;
    width: 34px; height: 34px; flex: 0 0 34px;
    margin: 10px auto 4px;
    border: none; border-radius: 10px; cursor: pointer;
    background: rgba(255,255,255,.12); color: #fff;
    align-items: center; justify-content: center;
    transition: background .16s;
  }
  #tombolRel:hover { background: rgba(255,255,255,.22); }
  #tombolRel svg { width: 19px; height: 19px; display: block; }
  aside #tombolRel { display: flex; }
  html.kasir-rapat #tombolRel { margin: 10px auto; }
}

/* ------------------------------------------------------------------
   Grid menu kasir: lebih banyak kolom, kartu lebih kecil.

   Aslinya: grid-cols-2 sm:3 md:2 lg:3 xl:4 — perhatikan md:grid-cols-2,
   jumlah kolom justru TURUN di 768px karena dulu sidebar memakan 288px.
   Sidebar kini menyusut jadi 44px di layar kasir, jadi ruangnya tersedia.

   Diganti ke auto-fill: jumlah kolom mengikuti lebar yang benar-benar
   ada, bukan tebakan breakpoint. Lebar minimal 148px -> pada grid 677px
   menghasilkan 4 kolom; pada ruang lebih sempit turun sendiri ke 3.

   Rasio gambar 4/3 dipendekkan jadi 3/2 supaya tinggi kartu berkurang
   dan lebih banyak baris terlihat tanpa menggulir.
   ------------------------------------------------------------------ */
/* Jumlah kolom ditetapkan eksplisit, bukan auto-fill. Lebar area menu
   berbeda jauh antar ukuran (372px di potret 768 karena panel Checkout
   muncul, 677px di lanskap 1133). Satu nilai minimum tidak bisa melayani
   keduanya: cukup kecil untuk 3 kolom di 372px akan menghasilkan 5 kolom
   kesempitan di 677px. */
@media (min-width: 700px) {
  [class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  [class*="xl:grid-cols-4"] [class*="aspect-"] {
    aspect-ratio: 3 / 2 !important;
  }
}
/* Ambang 4 kolom diturunkan ke 820px setelah diukur di perangkat asli:
   Lenovo TB300FU lanskap = viewport 853x453 CSS. Ambang 900px meleset
   tepat di atasnya, sehingga tablet ini hanya dapat 3 kolom. Tinggi
   layarnya cuma 453px, jadi menambah kolom adalah cara paling efektif
   menampilkan lebih banyak menu tanpa menggulir. */
@media (min-width: 820px) {
  [class*="xl:grid-cols-4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}