/* 
 * MOBILE DROPDOWN FIX
 * CSS khusus untuk memperbaiki interaksi dropdown di perangkat mobile
 */

@media screen and (max-width: 768px) {
    /* Pastikan dropdown dapat diklik dengan baik */
    .dropdown-toggle {
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        z-index: 2 !important;
    }
    
    /* Pastikan toggle dapat diakses dengan baik */
    .dropdown {
        position: relative !important;
        width: 100% !important;
    }
    
    /* Pastikan dropdown menu dapat diklik dan muncul di area yang benar */
    .dropdown-menu {
        pointer-events: auto !important; /* Sangat penting untuk memastikan klik berfungsi */
        overflow: hidden !important;
        position: static !important; /* Penting: pastikan muncul di bawah toggle, bukan di samping */
        width: 92% !important; /* Untuk sedikit margin di kedua sisi */
        margin: 0 auto !important; /* Tengahkan submenu */
        left: 0 !important;
        right: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        border-radius: 8px !important;
        transform: none !important; /* Hindari transformasi yang mungkin menggeser posisi */
    }
    
    /* Pastikan item dalam dropdown dapat diklik */
    .dropdown-menu li {
        pointer-events: auto !important;
    }
    
    .dropdown-menu li a {
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
        z-index: 3 !important;
    }
    
    /* Memperbaiki tampilan dropdown terbuka */
    .dropdown.active .dropdown-menu {
        pointer-events: auto !important;
        display: block !important;
        max-height: 500px !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important; /* Memastikan posisi tetap statis ketika aktif */
        transform: none !important; /* Hindari transformasi yang bisa menggeser posisi */
    }
    
    /* Memperbaiki transisi dropdown */
    .dropdown-menu {
        transition: all 0.3s ease !important;
        max-height: 0 !important;
        overflow: hidden !important;
        display: none !important;
        background-color: #f8f9fa !important; /* Warna latar belakang yang jelas */
    }
    
    /* Menambahkan area yang lebih besar untuk diklik */
    .dropdown-toggle {
        padding: 1rem 0 !important;
    }
    
    /* Memperbaiki posisi ikon dropdown */
    .dropdown-toggle i {
        position: absolute !important;
        right: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Menambahkan highlight ketika di-tap */
    .dropdown-menu li a:active {
        background-color: rgba(37, 99, 235, 0.1) !important;
    }
}