/* Perbaikan layout & responsif WBR.
 *
 * KENAPA FILE OVERRIDE, BUKAN PERBAIKAN SOURCE
 * Source WBR TIDAK ADA di server. Dibuktikan:
 *   - 11 arsip .tar.gz di ~/warung-bu-rizky/  -> 0 file .jsx/.tsx
 *   - find seluruh /home/pengelola            -> 0 file source React
 *   - dist/assets/*.map (sourcemap)           -> tidak ada
 * Tanpa source dan tanpa sourcemap, tidak ada yang bisa di-rebuild.
 * Jadi ini memang fallback, dan saya tidak mengklaim source sudah diperbaiki.
 *
 * TEMUAN DARI MEMBACA BUNDLE (bukan tebakan):
 *   - WBR memakai Tailwind lewat CDN (dist/index.html), bukan file CSS build.
 *   - `mx-auto` hanya muncul SATU kali di bundle, dan container terbesar
 *     adalah `max-w-4xl` = 896px. Di layar 1920px konten karena itu
 *     menggantung di kiri — persis keluhan "berhenti di setengah layar".
 *   - Layout memakai SIDEBAR + overlay `fixed inset-0 ... z-40 md:hidden`,
 *     jadi navigasi mobile-nya SUDAH ADA. Tidak perlu menambah hamburger
 *     kedua yang kosong.
 *
 * File ini dimuat SETELAH Tailwind CDN sehingga menang tanpa perlu !important
 * di sebagian besar aturan; !important hanya dipakai saat menimpa utility
 * Tailwind yang spesifisitasnya sama.
 */

/* ==========================================================================
   1. LEBAR KONTEN DESKTOP — inti keluhan
   ========================================================================== */
.max-w-4xl {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1440px) {
    .max-w-4xl { max-width: 1320px !important; }
}

@media (min-width: 1800px) {
    .max-w-4xl { max-width: 1440px !important; }
}

/* Container lain ikut dipusatkan supaya tidak ada blok yang menepi kiri. */
.max-w-3xl,
.max-w-5xl,
.max-w-6xl,
.max-w-7xl {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ruang sisi supaya konten tidak menempel tepi layar besar. */
@media (min-width: 1024px) {
    #root > div > main,
    #root main {
        padding-left: clamp(1rem, 2vw, 2rem);
        padding-right: clamp(1rem, 2vw, 2rem);
    }
}

/* ==========================================================================
   2. HEADER STICKY DESKTOP
   Sticky (bukan fixed) supaya header ikut alur dokumen dan TIDAK menutupi
   konten di bawahnya.
   ========================================================================== */
@media (min-width: 768px) {
    #root header,
    #root [class*="border-b"]:first-child > header,
    #root main > header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 30;
        /* Latar solid wajib; kalau tembus pandang, konten terbaca di baliknya. */
        background-color: inherit;
        backdrop-filter: saturate(180%) blur(8px);
    }
}

/* Sidebar ikut sticky supaya menu tetap terjangkau saat menggulir daftar
   produk yang panjang. */
@media (min-width: 768px) {
    #root aside,
    #root [class*="md:relative"] {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        align-self: flex-start;
        max-height: 100dvh;
        overflow-y: auto;
    }
}

/* ==========================================================================
   3. GRID PRODUK — manfaatkan lebar layar
   ========================================================================== */
@media (min-width: 1280px) {
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1600px) {
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.md\:grid-cols-2 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Tablet: dua kolom, jangan dipaksa satu. */
@media (min-width: 700px) and (max-width: 1023px) {
    .grid.grid-cols-1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================================
   4. PENCARIAN & FILTER — ikut lebar container
   ========================================================================== */
input[type="search"],
input[type="text"][placeholder*="ari"],
input[placeholder*="Cari"] {
    width: 100%;
}

@media (min-width: 1024px) {
    .relative > input[type="text"],
    .relative > input[type="search"] {
        max-width: none;
    }
}

/* ==========================================================================
   5. MOBILE & TABLET
   Sidebar + overlay mobile sudah disediakan bundle (md:hidden), jadi TIDAK
   ada hamburger tambahan yang dibuat di sini — hanya dirapikan.
   ========================================================================== */
@media (max-width: 767px) {
    .grid { grid-template-columns: 1fr !important; }

    /* Target sentuh nyaman. */
    button, a[role="button"], .btn { min-height: 40px; }

    /* Cegah auto-zoom iOS/Android saat fokus input. */
    input, select, textarea { font-size: 16px !important; }
}

/* Tabel panjang: hanya tabelnya yang menggulir, bukan seluruh halaman. */
table { width: 100%; }

.overflow-x-auto,
[class*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   6. Jaring pengaman: tidak ada scroll horizontal seluruh halaman.
   ========================================================================== */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

#root { max-width: 100%; overflow-x: hidden; }


/* Shared site scrollbar: narrow, visible, theme-aware. */
html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb,var(--accent,#2D3D50)) var(--scroll-track,transparent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--scroll-track,transparent)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb,var(--accent,#2D3D50));border:2px solid var(--scroll-track,transparent);border-radius:999px;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{filter:brightness(.88)}
::-webkit-scrollbar-corner{background:var(--scroll-track,transparent)}