/* =====================================================================
   RESPONSIVE-FIX.CSS — Sabillah POS
   Tambahkan SETELAH style.css di index.html:
   <link rel="stylesheet" href="responsive-fix.css">
   
   File ini HANYA menambal masalah responsif tanpa menyentuh logika
   yang sudah ada. Aman 100% untuk role, sidebar, dan semua fungsi JS.
   ===================================================================== */


/* =====================================================================
   🔴 FIX #1: PERLINDUNGAN ADMIN-ONLY (BUG PALING KRITIS)
   
   Masalah: CSS mobile pakai selector lebar `div[style*="grid-template-columns"]`
   yang ikut menimpa elemen .admin-only yang disembunyikan JS dengan
   `display: none`. Akibatnya menu admin muncul untuk semua role.
   
   Solusi: Pastikan .admin-only dengan inline style display:none tidak
   pernah diubah oleh media query apapun. Kita gunakan CSS variable trick
   dan specificity yang lebih tinggi.
   ===================================================================== */

/* Lindungi semua elemen yang JS sembunyikan (inline style = specificity tinggi)
   Ini bekerja karena inline style selalu menang vs class selector */
.admin-only[style*="display: none"] {
    display: none !important;
}

/* Pastikan saat JS kasih display: '' (dikembalikan), tetap bisa muncul */
.admin-only[style*="display: list-item"],
.admin-only[style*="display: block"],
.admin-only[style*="display: flex"],
.admin-only[style=""] {
    display: list-item !important; /* nav li default-nya list-item */
}


/* =====================================================================
   🔴 FIX #2: HALAMAN LOGIN DI HP — 3 TOMBOL TUMPANG TINDIH
   
   Masalah: Tombol "Jurnal" (left:20px), "Cek Harga" (left:50%/tengah),
   "Absensi" (right:20px) posisi absolute. Di layar kecil mereka saling
   tindih karena ruang tidak cukup.
   
   Solusi: Di HP, ubah jadi bar tipis di bagian paling atas layar.
   Masing-masing tombol tetap di posisinya (kiri/tengah/kanan) tapi
   lebih mungil. Teks disimpan dalam <span class="btn-login-top-text">
   agar bisa disembunyikan di layar sangat kecil.
   
   SYARAT: index.html sudah pakai class .btn-login-top (sudah diupdate).
   ===================================================================== */

/* ===== HP (max 768px): Tombol jadi bar tipis di atas ===== */
@media screen and (max-width: 768px) {

    .btn-login-top {
        /* Tetap absolute, tapi reset ke koordinat yang tepat */
        position: fixed !important;
        top: 0 !important;
        transform: none !important;

        /* Tampilan mungil */
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        border-bottom: 2px solid #fecdd3 !important;
        z-index: 200 !important;
        white-space: nowrap !important;
    }

    /* Tombol Kiri (Jurnal) */
    .btn-login-top--left {
        left: 0 !important;
        right: auto !important;
        border-radius: 0 0 8px 0 !important;
    }

    /* Tombol Tengah (Cek Harga) */
    .btn-login-top--center {
        left: 50% !important;
        transform: translateX(-50%) !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Tombol Kanan (Absensi) */
    .btn-login-top--right {
        right: 0 !important;
        left: auto !important;
        border-radius: 0 0 0 8px !important;
    }

    /* Login box geser ke bawah agar tidak tertutup bar tombol */
    .login-box {
        margin-top: 50px !important;
    }
}

/* ===== HP SANGAT KECIL (max 380px): Sembunyikan teks, ikon saja ===== */
@media screen and (max-width: 380px) {
    .btn-login-top-text {
        display: none !important;
    }
    .btn-login-top {
        padding: 10px 14px !important;
    }
    .btn-login-top i {
        font-size: 1.1rem !important;
    }
}


/* =====================================================================
   🔴 FIX #3: TABLET (768px - 1024px) — SIDEBAR TERLALU LEBAR
   
   Masalah: Di tablet, sidebar tetap 260px sehingga konten utama sempit.
   Solusi: Perkecil sidebar jadi mode collapsed otomatis di tablet.
   ===================================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 80px !important;
        padding: 1.5rem 0.5rem !important;
    }
    
    /* Sembunyikan teks, tampilkan ikon saja seperti mode collapsed */
    .sidebar span,
    .sidebar .sidebar-logo {
        display: none !important;
    }
    
    .sidebar .sidebar-header {
        justify-content: center !important;
    }
    
    .sidebar .nav-item,
    .sidebar .btn-logout {
        justify-content: center !important;
        padding: 0.8rem 0 !important;
    }

    /* Toggle button tetap berfungsi — kalau klik, buka penuh */
    .sidebar.expanded-tablet {
        width: 240px !important;
        padding: 1.5rem 1rem !important;
    }
    .sidebar.expanded-tablet span,
    .sidebar.expanded-tablet .sidebar-logo {
        display: inline !important;
    }
    .sidebar.expanded-tablet .sidebar-logo {
        display: block !important;
        max-width: 130px !important;
    }
    .sidebar.expanded-tablet .sidebar-header {
        justify-content: space-between !important;
    }
    .sidebar.expanded-tablet .nav-item,
    .sidebar.expanded-tablet .btn-logout {
        justify-content: flex-start !important;
        padding: 0.8rem 1.2rem !important;
    }

    /* Konten utama dapat lebih banyak ruang */
    .main-content {
        padding: 1.5rem !important;
    }

    /* Grid 4 kolom → 2 kolom di tablet */
    div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Stats grid 2 kolom aman */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =====================================================================
   🔴 FIX #4: STICKY HEADER — MARGIN NEGATIF DI MOBILE RUSAK LAYOUT
   
   Masalah: .sticky-header pakai margin: -2.5rem -2.5rem 2rem -2.5rem
   yang cocok untuk desktop (padding 2.5rem), tapi di mobile (padding 15px)
   jadi berlebihan dan melorot keluar layar.
   ===================================================================== */

@media screen and (max-width: 768px) {
    .sticky-header {
        margin: -15px -15px 1.5rem -15px !important;
        padding: 1rem 15px 1rem 15px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .sticky-header {
        margin: -1.5rem -1.5rem 1.5rem -1.5rem !important;
        padding: 1.5rem 1.5rem 1.2rem 1.5rem !important;
    }
}


/* =====================================================================
   🔴 FIX #5: GRID INLINE STYLE DI DASHBOARD — OVERRIDE AMAN
   
   Masalah: Baris seperti style="grid-template-columns: repeat(4, 1fr)"
   atau style="grid-template-columns: repeat(3, 1fr)" tidak berubah di HP
   karena selector di style.css `div[style*="grid-template-columns"]` juga
   mengubah display ke flex yang kadang merusak beberapa komponen.
   
   Solusi: Override hanya untuk layar kecil, dengan selector yang LEBIH
   SPESIFIK agar tidak mempengaruhi .admin-only.
   ===================================================================== */

@media screen and (max-width: 768px) {
    /* Grid 4 kolom di dashboard (arus kas) → 2 kolom */
    .stat-card > div[style*="grid-template-columns: repeat(4"],
    section > div[style*="grid-template-columns: repeat(4"],
    .page-view > div[style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        display: grid !important;
    }
    
    /* Grid 3 kolom → 1 kolom */
    .page-view > div[style*="grid-template-columns: repeat(3"],
    .stat-card > div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* POS Layout: kolom kiri-kanan → atas-bawah */
    .pos-wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Tinggi area produk POS di HP dikurangi */
    .pos-wrapper > .stat-card:first-child {
        max-height: 45vh !important;
        overflow-y: auto !important;
    }

    /* Panel kanan POS (ringkasan bayar) tidak perlu max-height di HP */
    .pos-wrapper > .stat-card:last-child {
        max-height: none !important;
        overflow-y: visible !important;
    }
}


/* =====================================================================
   🔴 FIX #6: TABEL HORIZONTAL SCROLL YANG LEBIH HALUS DI HP
   ===================================================================== */

@media screen and (max-width: 768px) {
    /* Pastikan wadah tabel bisa digeser halus (swipe) */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch; /* Efek geser mulus di iOS */
        width: 100% !important;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem; /* Memberi ruang untuk scrollbar */
    }

    /* Teks tabel memanjang ke samping, ukuran font disesuaikan */
    .data-table th,
    .data-table td,
    .pos-table th,
    .pos-table td {
        padding: 0.8rem 0.6rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important; /* WAJIB: Cegah teks turun ke bawah */
        vertical-align: middle !important;
    }

    /* Pengecualian khusus kolom pertama (Nama Produk/Konsumen) agar boleh 2 baris */
    .data-table td:first-child,
    .pos-table td:first-child {
        white-space: normal !important;
        min-width: 140px; /* Lebar minimal agar teks tidak terlalu tergencet */
        line-height: 1.4;
    }
}


/* =====================================================================
   🔴 FIX #7: MODAL DI HP — PASTIKAN TIDAK MELEBIHI LAYAR
   ===================================================================== */

@media screen and (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end !important; /* Modal muncul dari bawah di HP */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    
    .modal-box {
        border-radius: 20px 20px 0 0 !important; /* Sudut atas membulat (sheet style) */
        max-height: 90vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }
    
    /* Kecuali alert notifikasi — tetap di tengah */
    #modernAlertModal {
        align-items: center !important;
    }
    
    #modernAlertModal .modal-box {
        border-radius: 16px !important;
        width: 90% !important;
    }
}


/* =====================================================================
   🔴 FIX #8: BOTTOM NAV — ADMIN-ONLY TERLINDUNGI DI SEMUA BREAKPOINT
   
   Ini adalah fix paling penting. Kita override selector berbahaya
   di style.css yang bisa menimpa display:none dari JavaScript.
   
   AKAR MASALAH di style.css line ~991:
   div[style*="grid-template-columns"] { display: flex !important; }
   
   Ini menimpa <li class="admin-only" style="display: none"> kalau li
   ada di dalam div dengan grid. Tapi yang lebih bahaya:
   Selector `.nav-links li` dan aturan flex di sidebar mobile juga bisa
   membuat li yang harusnya hidden jadi terlihat.
   ===================================================================== */

@media screen and (max-width: 768px) {
    /* Proteksi ketat: li yang sudah di-hide JS tetap tersembunyi */
    .nav-links li[style*="display: none"] {
        display: none !important;
    }
    
    /* Proteksi sidebar-footer juga */
    .sidebar-footer [style*="display: none"] {
        display: none !important;
    }
}

/* Berlaku di semua ukuran layar */
li.admin-only[style*="display: none"] {
    display: none !important;
}