/* =========================================
   MOBILE CSS (Berlaku untuk layar di bawah 768px)
   ========================================= */
@media (max-width: 768px) {

    /* =========================================
       1. PERBAIKAN LAYOUT UTAMA
       ========================================= */
    body, html {
        overflow-x: hidden !important; 
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Mengembalikan area utama ke tengah dan memberi ruang di bawah */
    .main, .main-content {
        margin-left: 15px !important; 
        padding-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding-bottom: 90px !important; 
        box-sizing: border-box !important;
    }

	.form-group label,
    .form-stock-inline .form-group label {
        margin-bottom: 8px !important;
        font-size: 12px !important; /* Diperkecil sedikit agar terlihat rapi */
        font-weight: 600 !important;
        color: #94a3b8 !important; /* Warna abu-abu kebiruan terang (Pro Look) */
        text-transform: uppercase !important; /* Mengubah teks menjadi huruf kapital semua */
        letter-spacing: 0.5px !important; /* Memberi rongga antar huruf agar elegan */
        display: block !important;
    }

    /* Memastikan input field (kolom teks) juga selaras dengan tema gelap */
    .form-group input,
    .form-group select {
        color: #f1f5f9 !important; /* Warna teks ketikan menjadi putih terang */
        background-color: rgba(255, 255, 255, 0.05) !important; /* Latar kotak transparan gelap */
        border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Garis batas tipis elegan */
    }

    /* Mengubah warna teks placeholder (teks bayangan di dalam kotak) */
    .form-group input::placeholder {
        color: rgba(148, 163, 184, 0.5) !important;
    }

    /* Memastikan label kosong untuk tombol sejajar tetap tidak terlihat */
    .form-stock-inline .btn-group label {
        display: none !important; 
    }

    .sidebar-bottom {
        display: flex !important;
        justify-content: center !important; /* Paksa posisi tombol tepat di tengah layar HP */
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .sidebar-bottom .btn-export-mono {
        width: auto !important;
        min-width: 100px !important;
        height: 42px !important;
        flex-direction: row !important; /* Di mobile ikon sampingan dengan teks */
    }

    /* 3. Menyamakan Tombol Sinkron agar tidak Berbeda Sendiri */
    #syncStatus {
		display: none;
    }

	#btnLogout {
		display: none;
	}

	/* =========================================
       2. BOTTOM NAVIGATION (ANTI-BENTROK DESKTOP)
       ========================================= */
	.sidebar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important; 
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        height: 70px !important;
        overflow: hidden !important; 
        
        background: #0f172a !important; 
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
        box-shadow: 0 -10px 25px rgba(0,0,0,0.6) !important;
        z-index: 9999 !important;
        padding: 0 !important;
        transform: none !important;
		pointer-events: none !important;
    }

    .sidebar::after {
        display: none !important;
    }

    /* 2. Area Logo di Kiri */
    .sidebar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px 0 15px !important;
        margin: 0 !important;
        height: 100% !important;
        background: transparent !important;
		pointer-events: auto !important;
    }

    .brand, .sidebar-header small {
        display: none !important; 
    }

    .logo-img {
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    /* 3. Kontainer Menu: Wajib Flex Row dan bisa di-scroll ke samping */
    .menu, .sidebar-menu {
        display: flex !important;
        flex-direction: row !important; /* KUNCI: Memaksa menu berjejer menyamping */
        justify-content: flex-start !important;
        align-items: center !important;
        
        flex: 1 1 auto !important; /* Mengambil sisa ruang di kanan logo */
        height: 100% !important;
        margin: 0 !important;
        padding: 0 5px !important;
        
        overflow-x: auto !important; /* Izinkan geser kiri-kanan */
        overflow-y: hidden !important; /* Matikan geser atas-bawah */
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
		pointer-events: auto !important;
    }

    .menu::-webkit-scrollbar, 
    .sidebar-menu::-webkit-scrollbar {
        display: none !important;
    }

    /* 4. Item Menu (Ikon + Teks) */
    .menu-item {
        display: flex !important;
        flex-direction: column !important; /* Ikon di atas, teks di bawah */
        align-items: center !important;
        justify-content: center !important;
        
        flex: 0 0 auto !important; /* PENTING: Mencegah menu menyusut/tergencet */
        min-width: 72px !important;
        height: 100% !important;
        margin: 0 !important; 
        padding: 0 !important;
        
        background: transparent !important;
        border: none !important;
        transform: none !important;
		pointer-events: auto !important;
    }

    /* 5. Tampilan Ikon dan Teks */
    .menu-item:hover {
        transform: none !important;
        background: transparent !important;
    }

    .menu-item::before,
    .menu-item::after,
    .menu-item.active::after {
        display: none !important;
    }

    .menu-icon {
        width: 25px !important;
        height: 25px !important;
        stroke: #94a3b8 !important; 
        transition: stroke 0.3s ease !important;
        transform: none !important;
    }

    .menu-text {
        font-size: 7px !important;
        font-weight: 600 !important;
        white-space: nowrap !important; /* Larang teks patah ke bawah */
    }

    /* 6. Tampilan Saat Aktif */
    .menu-item.active {
        background: transparent !important; 
        border: none !important;
    }

    .menu-item.active .menu-icon {
        stroke: #38bdf8 !important; 
        transform: translateY(-2px) scale(1.1) !important; 
    }

    .menu-item.active .menu-text {
        color: #38bdf8 !important;
    }

	/* =========================================
       INDIKATOR SCROLL MENU (FADING EDGE & NUDGE)
       ========================================= */
       
    /* 1. Fading Edge: Bayangan Gradasi di Ujung Kanan */
    .sidebar::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 35px !important; /* Lebar area memudar */
        height: 100% !important;
        
        /* Gradasi dari transparan ke warna background #0f172a */
        background: linear-gradient(to right, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 1) 100%) !important;
        
        z-index: 10 !important;
        pointer-events: none !important; /* SANGAT PENTING: Agar menu di bawah bayangan tetap bisa di-klik */
    }

    /* 2. Nudge Animation: Animasi "Goyangan" saat pertama buka */
    @keyframes peekScroll {
        0% { transform: translateX(0); }
        50% { transform: translateX(-15px); } /* Bergeser 15px ke kiri */
        100% { transform: translateX(0); } /* Kembali ke awal */
    }

    /* Terapkan animasi goyangan pada seluruh deretan menu */
    .menu, .sidebar-menu {
        animation: peekScroll 1.2s ease-in-out 1 !important; /* Berjalan 1 kali saja */
        animation-delay: 1.5s !important; /* Menunggu 1.5 detik setelah web terbuka sebelum bergoyang */
    }

	.diagnostic-panel {
		display: none;
	}

	/* =========================================
       2. RESTRUKTURISASI DASHBOARD MOBILE
       ========================================= */

    .dashboard-sync {
        flex-direction: column !important;
        align-items: stretch !important; /* Paksa komponen melebar penuh */
        gap: 10px !important;
        padding: 12px !important;
    }

    /* Mengatur jarak aman bagian atas (Topbar) */
    .topbar-dashboard {
        padding: 5px 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .page-title {
        font-size: 22px;
        line-height: 1.2;
    }

    /* Melipat Grid KPI menjadi Vertikal 2 Kolom (Card Layout) */
    .kpi-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px;
    }

    .kpi-grid .luxury-card--noir {
        padding: 12px;
        margin-bottom: 0;
    }
    
    .card-icon-wrapper {
        font-size: 20px; /* Mengecilkan ikon sedikit */
    }

    .stat-value {
        font-size: 16px !important; /* Memastikan angka muat dalam kotak kecil */
        word-break: break-all;
    }

    /* Merombak Area Target Bulanan (Radial & Side KPI) */
    .target-main {
        display: flex;
        flex-direction: column !important; /* Memaksa radial dan side KPI menjadi atas-bawah */
        align-items: center;
        gap: 10px;
    }

    /* Menyesuaikan ukuran SVG Radial agar proporsional di layar HP */
    .radial-wrap {
        transform: scale(1); /* Memperkecil keseluruhan elemen radial 15% */
        margin: -10px 0;
    }

    /* Mengubah Side KPI (Profit, Rata-rata, Sisa Target) menjadi 2 kolom */
    .kpi-side {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px;
		width: 100%;
    }

    .kpi-side .luxury-card--noir {
        padding: 12px;
		align-items: center;
        margin-bottom: 0;
    }

	.kpi-side .luxury-card--noir:has(#dashboardProfitValue) {
		display: none !important;
	}

    /* Melipat Grid Charts (Donut & Bar) menjadi 1 kolom penuh */
    .charts-container {
        display: grid;
        grid-template-columns: 1fr !important; 
        gap: 15px;
    }

	/* =========================================
       PERBAIKAN AREA PENCARIAN & FILTER (CARD-SEARCH)
       ========================================= */
       
    .card-search {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    /* 1. Kotak Pencarian membentang penuh */
    .card-search .search-box,
    .card-search .search-box input {
        width: 100% !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }

    /* 2. Baris Label dan Dropdown (Urutkan & Filter by) */
    .card-search > div:not(.search-box) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .card-search > div:not(.search-box) label {
        white-space: nowrap !important; /* Mencegah teks patah */
        margin: 0 !important;
        font-size: 14px !important;
        min-width: 75px !important; /* Menyamakan lebar label agar kedua dropdown sejajar rata kiri */
    }

    .card-search > div:not(.search-box) select,
    .card-search > div:not(.search-box) .select-sm {
        flex: 1 !important; /* Memaksa dropdown mengisi sisa layar di kanan label */
        min-height: 48px !important;
        border-radius: 8px !important;
        font-size: 14px !important;
        
        /* Anti-Tindih agar bisa diklik */
        position: relative !important;
        z-index: 50 !important;
        pointer-events: auto !important;
        -webkit-appearance: auto !important;
        appearance: auto !important;
    }

    /* 3. Tombol Ekspor CSV membentang penuh */
    .card-search .btn-export-mono {
        width: 100% !important;
        min-height: 48px !important;
        margin-top: 5px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-size: 15px !important;
        border-radius: 8px !important;
    }


    /* =========================================
       3. TRANSFORMASI TABEL RESPONSIVE (Card View)
       ========================================= */
       
    /* Menyembunyikan header tabel bawaan karena tidak relevan di mobile */
    .modern-table thead {
        display: none;
    }

    .modern-table {
        display: block;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 10px; /* Jarak antar kartu data */
    }

    .modern-table tbody {
        display: block;
        width: 100%;
    }

    /* Mengubah setiap baris (<tr>) menjadi desain Kartu (Card) */
    .modern-table tr {
        display: flex;
        flex-direction: column;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        padding: 12px 15px;
        margin-bottom: 15px;
        position: relative;
    }

    /* Mengubah sel tabel (<td>) menjadi baris informasi */
    .modern-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px dashed #e2e8f0;
        font-size: 13px;
        text-align: right !important; /* Memaksa nilai data ke kanan */
    }

    /* Menghilangkan garis putus-putus pada baris terakhir kartu */
    .modern-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Menggunakan ::before untuk menyuntikkan judul kolom secara otomatis di sebelah kiri */
    .modern-table td::before {
        content: attr(data-label); /* Mengambil teks dari atribut data-label di HTML */
        font-weight: 600;
        color: #64748b;
        text-align: left;
        padding-right: 15px;
    }

    /* Styling khusus untuk Nama Barang (Baris pertama kartu) */
    .modern-table td:nth-child(2) {
        font-weight: bold;
        color: #00AEEF;
        font-size: 15px;
        border-bottom: 2px solid #00AEEF; /* Garis aksen Cyan */
        padding-bottom: 10px;
        margin-bottom: 5px;
    }
    
    /* Sembunyikan label otomatis untuk kolom Nama Barang */
    .modern-table td:nth-child(2)::before {
        content: none;
    }
    
    /* Menyembunyikan kolom "No" jika dirasa tidak perlu di mobile */
    .modern-table td:nth-child(1) {
        display: none;
    }

	/* =========================================
       4. RESTRUKTURISASI FORM STOCK OPNAME
       ========================================= */

	.topbar {
			padding: 5px 10px;
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

    /* Mengubah form berderet menjadi bertumpuk vertikal */
    .form-stock-inline {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Jarak antar input */
    }

    .form-stock-inline .form-group {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .form-stock-inline .form-group label {
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #231F20;
    }

    /* Menyembunyikan label kosong (&nbsp;) pada grup tombol */
    .form-stock-inline .btn-group label {
        display: none; 
    }

    /* Memaksa input dan tombol memenuhi lebar layar dengan tinggi standar ergonomi */
    .form-stock-inline input,
    .form-stock-inline button {
        width: 100%;
        min-height: 48px; /* Sedikit lebih tinggi agar sangat mudah diklik */
        font-size: 14px;
        border-radius: 8px;
    }

    /* =========================================
       5. OPTIMALISASI MODAL (POP-UP)
       ========================================= */
       
    .modal-content {
        width: 92%; /* Mengambil hampir seluruh lebar layar */
        max-width: 400px;
        margin: auto; /* Memastikan modal berada di tengah */
        border-radius: 16px;
        padding: 20px;
    }

    .modal-header h2 {
        font-size: 18px;
    }

    .modal-close {
        width: 40px;
        height: 40px;
        font-size: 20px;
        /* Memperbesar area sentuh tombol silang tanpa mengubah ukuran visualnya terlalu ekstrem */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Menyesuaikan form di dalam modal */
    .customer-detail-content .form-group {
        margin-bottom: 15px;
    }

    .customer-detail-content input,
    .customer-detail-content select,
    .customer-detail-content button {
        width: 100%;
        min-height: 48px;
        border-radius: 8px;
        font-size: 14px;
    }

	/* =========================================
       6. RESTRUKTURISASI MENU PENJUALAN (KASIR)
       ========================================= */
       
    /* Melipat susunan Form dan Keranjang dari bersampingan menjadi atas-bawah */
    .layout-penjualan-top {
        display: flex;
        flex-direction: column !important;
        gap: 20px;
    }

    /* Merapikan Form Input agar membentang penuh (Full Width) */
    .form-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .form-customer input,
    .form-customer select {
        width: 100%;
        min-height: 48px; /* Area sentuh optimal */
    }

    .form-actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    .btn-add-to-cart {
        width: 100%;
        min-height: 50px;
    }

    /* =========================================
       7. STYLING TOTAL KERANJANG (TFOOT)
       ========================================= */
       
    /* Mengubah <tfoot> menjadi kartu Total yang menonjol dan eksklusif */
    .modern-table tfoot {
        display: block;
        background-color: #231F20; /* Hitam pekat elegan (Key CMYK) */
        border-radius: 12px;
        margin-top: 15px;
        padding: 16px 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .modern-table tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent !important;
        box-shadow: none;
        border: none;
        padding: 0;
        margin: 0;
    }

    .modern-table tfoot td {
        border: none !important;
        padding: 0;
        text-align: right;
    }

    /* Label "TOTAL:" */
    .modern-table tfoot td:first-child {
        text-align: left !important;
        font-size: 15px;
        color: #f8fafc;
    }

    /* Nilai Angka "Rp 0" */
    .modern-table tfoot td:last-child strong {
        font-size: 22px;
        color: #00AEEF; /* Angka warna Cyan cerah agar sangat jelas di mata */
    }

    /* Matikan injeksi label otomatis di baris tfoot */
    .modern-table tfoot td::before {
        content: none !important;
    }

    /* =========================================
       8. TOMBOL AKSI KERANJANG
       ========================================= */
       
    #penjualan-page .card-search {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 10px;
    }

    #btnProsesCheckout, #btnKosongkanKeranjang {
        width: 100%;
        min-height: 50px;
        font-size: 15px;
        font-weight: bold;
    }

	/* =========================================
       9. HALAMAN HISTORY & FILTER
       ========================================= */
       
	.periode-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
		justify-content: flex-start !important;
        gap: 12px !important;
        margin: 15px 10px !important;
        
        /* 1. Paksa kontainer maju ke lapisan paling atas */
        position: relative !important;
        z-index: 50 !important; 
    }

	.periode-info select,
    .periode-info .select-sm {
        flex: 1 !important; /* KUNCI: Membuat kotak dropdown memanjang mengisi sisa ruang */
        width: auto !important;
        min-height: 44px !important; /* Area sentuh tetap aman untuk jempol */
        border-radius: 8px !important;
        font-size: 14px !important;
        
        /* Memastikan bisa di-klik (Anti-Tindih) */
        pointer-events: auto !important;
        position: relative !important;
        z-index: 51 !important;
        -webkit-appearance: auto !important;
        appearance: auto !important;
    }

	/* =========================================
       10. HALAMAN DATA CUSTOMER & FORM
       ========================================= */
       
    /* Melipat form input customer dari horizontal menjadi vertikal */
    .form-grid-customer {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-grid-customer .form-group input {
        width: 100%;
        min-height: 48px;
    }

    /* Merapikan susunan tombol Simpan dan Reset di HP */
    .form-actions-customer {
        display: flex;
        flex-direction: column; /* Tombol atas-bawah */
        gap: 10px;
        margin-top: 15px;
    }

    .form-actions-customer button {
        width: 100%;
        min-height: 50px;
        font-size: 15px;
    }

    /* Menyesuaikan Modal Lebar (Modal LG) khusus HP */
    .modal-lg {
        width: 95%;
        max-width: 100%; /* Memaksa modal besar tetap masuk ke layar kecil */
        padding: 15px;
        margin: 10px auto;
    }
    
    .customer-table {
        margin-top: 10px;
    }

	/* =========================================
       11. HALAMAN MASTER PRODUK
       ========================================= */
       
    /* Memaksa grid form produk menjadi vertikal di HP */
    .form-grid-master {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form-grid-master input,
    .form-grid-master select {
        width: 100%;
        min-height: 48px;
        border-radius: 8px;
    }

    /* Merapikan posisi tombol Simpan dan Reset */
    .form-grid-master .action-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }

    .form-grid-master .action-group button {
        width: 100%;
        min-height: 50px;
        font-size: 15px;
    }

    /* =========================================
       12. MODAL INVOICE & TOAST NOTIFICATION
       ========================================= */
       
    /* Merapikan header Invoice agar tombol aksi tidak saling bertabrakan */
    #invoiceModal .modal-header {
        flex-direction: column; /* Judul di atas, tombol-tombol di bawahnya */
        align-items: flex-start;
        gap: 15px;
    }

    .modal-actions {
        display: flex;
        flex-wrap: wrap; /* Izinkan tombol membungkus ke baris baru jika penuh */
        gap: 8px;
        width: 100%;
        justify-content: flex-end; /* Tombol ke sisi kanan */
    }

    .modal-actions button {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 38px;
    }

    /* Memastikan tombol X (Close) tetap menonjol */
    .modal-actions .modal-close {
        width: 38px;
        height: 38px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Memastikan konten invoice yang mungkin berupa tabel atau iframe bisa digeser jika melebar */
    .invoice-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }
    
    /* Mengatur notifikasi melayang agar pas di layar HP */
    #toastContainer {
        bottom: 80px; /* Dinaikkan sedikit agar tidak tertutup oleh Bottom Navigation Menu */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }

}