/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
    /* Sidebar jadi hamburger menu */
    .sidebar {
        position: fixed;
        left: -250px;
        transition: left 0.3s;
        z-index: 1000;
    }
    
    .sidebar.active {
        left: 0;
    }
    
    /* Overlay saat sidebar terbuka */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* Tombol hamburger */
    .hamburger-btn {
        display: block !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1001;
        background: #0d6efd;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    /* Tabel scrollable horizontal */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px; /* Paksa tabel bisa di-scroll */
    }
    
    /* Card padding lebih kecil */
    .card {
        margin: 10px;
    }
    
    .card-body {
        padding: 15px;
    }
    
    /* Form input full width */
    .form-control, .form-select {
        font-size: 16px; /* Mencegah zoom di iOS */
    }
    
    /* Tombol lebih besar untuk touch */
    .btn {
        padding: 10px 20px;
        font-size: 16px;
        margin: 5px 0;
    }
    
    .btn-sm {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    /* Navbar adjustments */
    .navbar {
        padding: 10px 15px;
    }
    
    /* Hide text di sidebar, tampilkan icon saja */
    .sidebar .nav-link span {
        display: none;
    }
    
    .sidebar .nav-link {
        text-align: center;
        padding: 15px;
    }
    
    /* Modal full screen di HP */
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    /* Badge lebih kecil */
    .badge {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    /* Search bar full width */
    #searchRiwayatKeluar,
    #searchRiwayatPembelian {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* Action buttons stack */
    .text-end {
        text-align: center !important;
    }
    
    .btn-success, .btn-danger {
        display: block;
        width: 100%;
        margin: 2px 0;
    }
}

/* ===== TABLET ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
        width: 200px;
    }
    
    table {
        font-size: 14px;
    }
    
    .btn {
        padding: 8px 15px;
    }
}

/* ===== DESKTOP ===== */
@media (min-width: 1025px) {
    .hamburger-btn {
        display: none !important;
    }
}