/* CSS Global untuk Responsif Layar HP */
@media (max-width: 768px) {
    /* 1. Atur Padding dan Lebar Kontainer Umum */
    body {
        padding: 10px !important;
        margin: 0 !important;
    }

    .container, .card, .wrapper {
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        margin: 5px 0 !important;
    }

    /* 2. Jadikan Tabel Bisa di-Swipe (Geser Kanan-Kiri) */
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 3. Atur Lebar Form Input agar Tidak Keluar Layar */
    input, select, textarea, button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Khusus untuk form group agar label dan input sejajar baik */
    .form-group, .filter-section {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .filter-section div {
        width: 100% !important;
    }

    .filter-section select {
        width: 100% !important;
    }

    /* 4. Sesuaikan Tombol agar Mudah Ditekan */
    .btn, .btn-simpan, .btn-masal, .btn-satuan {
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }

    /* Header di halaman umum */
    .header {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
}