/**
 * ============================================================================
 * SIDEBAR SM-HOVER MODE FIX - Velzon Template Bug Fix
 * ============================================================================
 *
 * Problem:
 * 1. Saat sidebar minimize (sm-hover mode), dropdown submenu tidak muncul saat hover
 * 2. Menu selain Dashboard tidak bisa diklik
 *
 * Root Cause:
 * - Tidak ada CSS yang mengatur positioning dropdown untuk sm-hover mode
 * - Dropdown tidak memiliki z-index yang cukup tinggi
 * - Tidak ada style untuk hover behavior pada sidebar minimize
 *
 * Solution:
 * - Tambahkan positioning absolute untuk dropdown di sm-hover mode
 * - Set z-index tinggi agar dropdown muncul di atas konten lain
 * - Enable hover behavior untuk menampilkan dropdown
 *
 * Date: 2025-01-17
 * ============================================================================
 */

/* ============================================================================
   1. SIDEBAR CONTAINER - FIXED POSITION & OVERFLOW VISIBLE
   ============================================================================ */

/**
 * CRITICAL FIX: Sidebar harus tetap fixed saat minimize mode
 * Masalah: Sidebar ikut scroll saat minimize (sm-hover mode)
 * Solusi: Force position:fixed untuk semua sidebar minimize states
 */
[data-sidebar-size="sm"] .app-menu,
[data-sidebar-size="sm-hover"] .app-menu,
[data-sidebar-size="sm-hover-active"] .app-menu,
[data-sidebar-size="sm"] .vertical-menu,
[data-sidebar-size="sm-hover"] .vertical-menu,
[data-sidebar-size="sm-hover-active"] .vertical-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1002 !important;
    overflow: visible !important;
}

/**
 * Pastikan sidebar container tidak memotong dropdown yang muncul di luar
 */
[data-sidebar-size="sm"] .app-menu,
[data-sidebar-size="sm-hover"] .app-menu,
[data-sidebar-size="sm-hover-active"] .app-menu {
    overflow: visible !important;
}

/**
 * Scrollbar di dalam sidebar - tetap enable scroll tapi allow overflow untuk dropdown
 */
[data-sidebar-size="sm"] #scrollbar,
[data-sidebar-size="sm-hover"] #scrollbar,
[data-sidebar-size="sm-hover-active"] #scrollbar {
    overflow-x: visible !important; /* Allow horizontal overflow for dropdown */
    overflow-y: auto !important; /* Keep vertical scroll */
    position: relative !important; /* Relative to fixed parent */
    height: 100% !important; /* Full height of sidebar */
}

/**
 * Navbar menu container juga harus fixed
 */
[data-sidebar-size="sm"] .navbar-menu,
[data-sidebar-size="sm-hover"] .navbar-menu,
[data-sidebar-size="sm-hover-active"] .navbar-menu {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 70px !important; /* Width sidebar minimize */
}

/* ============================================================================
   2. NAV ITEM - RELATIVE POSITIONING FOR DROPDOWN ANCHOR
   ============================================================================ */

/**
 * Nav item harus relative agar dropdown bisa absolute terhadapnya
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item {
    position: relative !important;
}

/* ============================================================================
   3. MENU DROPDOWN - HIDE BY DEFAULT IN MINIMIZED MODE
   ============================================================================ */

/**
 * Sembunyikan dropdown by default saat sidebar minimize
 * CRITICAL: Override Bootstrap .collapse class dengan !important
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown.collapse,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown.collapse,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown.collapse,
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown {
    display: none !important;
    position: absolute !important;
    left: 70px !important; /* Position di samping sidebar (70px = sidebar width) */
    top: 0 !important;
    min-width: 240px !important;
    max-width: 280px !important;
    background-color: var(--vz-vertical-menu-bg) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15) !important;
    z-index: 1050 !important; /* High z-index agar muncul di atas konten */
    padding: 12px 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    transform: translateX(-10px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    pointer-events: auto !important; /* PENTING: Enable klik pada dropdown */
    height: auto !important; /* Override Bootstrap collapse height */
    visibility: hidden !important; /* Hide by default */
}

/* Dark mode background */
[data-bs-theme="dark"][data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown,
[data-bs-theme="dark"][data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown,
[data-bs-theme="dark"][data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown {
    background-color: #212529 !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================================================
   4. HOVER BEHAVIOR - SHOW DROPDOWN ON HOVER
   ============================================================================ */

/**
 * CRITICAL FIX: Tampilkan dropdown saat nav-item di-hover
 * IMPORTANT: Juga berlaku untuk mode "sm" biasa, tidak hanya "sm-hover"
 * CRITICAL: Harus override Bootstrap .collapse class!
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown.collapse,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item:hover > .menu-dropdown.collapse,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item:hover > .menu-dropdown.collapse,
[data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item:hover > .menu-dropdown,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item:hover > .menu-dropdown,
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown.collapse,
[data-layout="semibox"][data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown.collapse,
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown,
[data-layout="semibox"][data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    height: auto !important;
}

/**
 * Keep dropdown visible saat dropdown sendiri di-hover
 * Ini penting agar dropdown tidak hilang saat kursor pindah dari nav-item ke dropdown
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown.collapse:hover,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown.collapse:hover,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown.collapse:hover,
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown:hover,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown:hover,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown:hover {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    height: auto !important;
}

/* ============================================================================
   5. PARENT MENU LINK - HIGHLIGHT ON HOVER
   ============================================================================ */

/**
 * Highlight parent menu saat di-hover di minimize mode
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-link,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item:hover > .menu-link,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item:hover > .menu-link {
    background-color: rgba(var(--vz-primary-rgb), 0.1) !important;
    color: rgb(var(--vz-primary)) !important;
}

/* Dark mode hover */
[data-bs-theme="dark"][data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-link,
[data-bs-theme="dark"][data-sidebar-size="sm-hover"] .navbar-nav > .nav-item:hover > .menu-link,
[data-bs-theme="dark"][data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item:hover > .menu-link {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

/* ============================================================================
   6. DROPDOWN MENU ITEMS - STYLING
   ============================================================================ */

/**
 * Style untuk menu items di dalam dropdown
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-item,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-item,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-item {
    padding: 0 !important;
    margin: 0 !important;
}

[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link {
    padding: 10px 20px !important;
    color: var(--vz-vertical-menu-item-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-radius: 4px !important;
    margin: 2px 8px !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    pointer-events: auto !important; /* PENTING: Enable klik */
}

/* Hover state untuk dropdown items */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link:hover,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link:hover,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link:hover {
    background-color: rgba(var(--vz-primary-rgb), 0.1) !important;
    color: rgb(var(--vz-primary)) !important;
    padding-left: 24px !important;
}

/* Active state untuk dropdown items */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link.active,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link.active,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link.active {
    background-color: rgba(var(--vz-primary-rgb), 0.15) !important;
    color: rgb(var(--vz-primary)) !important;
    font-weight: 500 !important;
}

/* Dark mode untuk dropdown items */
[data-bs-theme="dark"][data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link,
[data-bs-theme="dark"][data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link,
[data-bs-theme="dark"][data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-bs-theme="dark"][data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link:hover,
[data-bs-theme="dark"][data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link:hover,
[data-bs-theme="dark"][data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

[data-bs-theme="dark"][data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link.active,
[data-bs-theme="dark"][data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link.active,
[data-bs-theme="dark"][data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link.active {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

/* ============================================================================
   7. ICON STYLING IN DROPDOWN
   ============================================================================ */

/**
 * Style untuk icon di dalam dropdown menu
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-link i,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-link i,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-link i {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

/* ============================================================================
   8. FIRST ITEM SEPARATOR (OPTIONAL)
   ============================================================================ */

/**
 * Optional: Add subtle separator after first item for visual grouping
 * Disabled by default - uncomment to enable
 */
/*
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown .nav-item:first-child,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown .nav-item:first-child,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown .nav-item:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
    padding-bottom: 8px;
}
*/

/* ============================================================================
   9. DISABLE BOOTSTRAP COLLAPSE BEHAVIOR IN SM-HOVER MODE
   ============================================================================ */

/**
 * Di sm-hover mode, kita tidak menggunakan Bootstrap collapse
 * Semuanya diatur dengan CSS hover
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown.show,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown.show,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown.show {
    display: none !important; /* Override Bootstrap's show class */
}

[data-sidebar-size="sm"] .navbar-nav > .nav-item:hover > .menu-dropdown.show,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item:hover > .menu-dropdown.show,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item:hover > .menu-dropdown.show {
    display: block !important; /* Show on hover even with .show class */
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ============================================================================
   10. REMOVE COLLAPSE ARROW IN SM-HOVER MODE
   ============================================================================ */

/**
 * Sembunyikan collapse arrow karena tidak relevan di sm-hover mode
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-link[data-bs-toggle="collapse"]::after,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-link[data-bs-toggle="collapse"]::after,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-link[data-bs-toggle="collapse"]::after {
    display: none !important;
}

/* ============================================================================
   11. SMOOTH TRANSITIONS
   ============================================================================ */

/**
 * Smooth entrance/exit animations
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item {
    transition: background-color 0.15s ease !important;
}

/* ============================================================================
   12. ACCESSIBILITY - KEYBOARD NAVIGATION
   ============================================================================ */

/**
 * Ensure dropdown is accessible via keyboard (focus)
 */
[data-sidebar-size="sm"] .navbar-nav > .nav-item:focus-within > .menu-dropdown,
[data-sidebar-size="sm-hover"] .navbar-nav > .nav-item:focus-within > .menu-dropdown,
[data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item:focus-within > .menu-dropdown {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ============================================================================
   13. RESPONSIVE - MOBILE HANDLING
   ============================================================================ */

/**
 * Di mobile, gunakan behavior default (no hover dropdown)
 */
@media (max-width: 767px) {
    [data-sidebar-size="sm"] .navbar-nav > .nav-item > .menu-dropdown,
    [data-sidebar-size="sm-hover"] .navbar-nav > .nav-item > .menu-dropdown,
    [data-sidebar-size="sm-hover-active"] .navbar-nav > .nav-item > .menu-dropdown {
        position: static !important;
        left: auto !important;
        top: auto !important;
        min-width: auto !important;
        max-width: 100% !important;
        box-shadow: none !important;
        transform: none !important;
        border-radius: 0 !important;
    }
}

/* ============================================================================
   NOTES & BEST PRACTICES
   ============================================================================

   ✅ WHAT WE FIXED:
   1. Enabled overflow:visible pada sidebar container
   2. Added absolute positioning untuk dropdown di sm-hover mode
   3. Implemented CSS-based hover behavior untuk show/hide dropdown
   4. Set high z-index untuk ensure dropdown muncul di atas konten
   5. Enabled pointer-events untuk ensure dropdown bisa diklik
   6. Added smooth transitions untuk better UX
   7. Supported dark mode
   8. Added keyboard accessibility

   ✅ WHY IT WORKS:
   1. Position:absolute + left:70px = dropdown muncul di samping sidebar
   2. Display:none by default, display:block on :hover = dropdown appear on hover
   3. Z-index:1050 = dropdown muncul di atas semua konten
   4. Pointer-events:auto = dropdown bisa diklik
   5. Opacity + transform transition = smooth entrance/exit

   ❌ ORIGINAL BUG:
   1. Tidak ada positioning untuk dropdown di sm-hover mode
   2. Dropdown tidak punya z-index yang cukup
   3. Tidak ada hover behavior yang diimplementasi

   ============================================================================ */