/**
 * ============================================================================
 * SIDEBAR MENU ANIMATION FIX V2 - AGGRESSIVE APPROACH
 * ============================================================================
 *
 * Problem: Menu masih "berkedip" karena stagger animation dari custom.css
 * Root Cause: Stagger delays (0.05s, 0.1s, etc) + transform animations
 *
 * Solution: DISABLE SEMUA animation untuk vertical sidebar dengan !important
 * Approach: Aggressive override dengan maximum specificity
 *
 * Date: 2025-10-14 (Updated)
 * ============================================================================
 */

/* ============================================================================
   STEP 1: DISABLE STAGGER ANIMATION - HIGHEST PRIORITY
   ============================================================================ */

/**
 * Target ALL nav-items dalam menu-dropdown untuk vertical layout
 * Gunakan body selector untuk maximum specificity
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item,
body[data-layout="vertical"] .navbar-nav .menu-dropdown .collapse .nav-item,
body[data-layout="vertical"] .navbar-nav .menu-dropdown.collapse .nav-item,
body[data-layout="vertical"] .navbar-nav .menu-dropdown.show .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .collapse .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown.collapse .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown.show .nav-item {
    /* KILL ALL ANIMATIONS */
    animation: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
    will-change: auto !important;
}

/**
 * Target nth-child stagger animations specifically
 * REMOVED: Membiarkan semua menu items (1-8) menggunakan stagger animation dari custom.css
 * Ini memastikan animasi konsisten untuk semua menu termasuk yang baru ditambahkan
 */
/* COMMENTED OUT - Allow stagger animation for all items
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item:nth-child(1),
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item:nth-child(2),
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item:nth-child(3),
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item:nth-child(4),
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item:nth-child(5),
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item:nth-child(6),
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item:nth-child(1),
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item:nth-child(2),
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item:nth-child(3),
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item:nth-child(4),
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item:nth-child(5),
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-item:nth-child(6) {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
}
*/

/* ============================================================================
   STEP 2: BOOTSTRAP COLLAPSE - SMOOTH HEIGHT-ONLY TRANSITION
   ============================================================================ */

/**
 * Bootstrap's .collapsing class - optimize for smooth height change
 */
body[data-layout="vertical"] .navbar-nav .collapsing,
body[data-layout="vertical"] .navbar-nav .menu-dropdown.collapsing,
body[data-layout="semibox"] .navbar-nav .collapsing,
body[data-layout="semibox"] .navbar-nav .menu-dropdown.collapsing {
    /* ONLY animate height - nothing else */
    transition: height 0.2s ease !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: hidden !important;
}

/**
 * Menu dropdown container - no transform animations
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown,
body[data-layout="vertical"] .navbar-nav .collapse.menu-dropdown,
body[data-layout="semibox"] .navbar-nav .menu-dropdown,
body[data-layout="semibox"] .navbar-nav .collapse.menu-dropdown {
    transform: none !important;
    transform-origin: unset !important;
    transition: none !important;
}

/**
 * Show state - ensure no animations
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown.show,
body[data-layout="vertical"] .navbar-nav .collapse.show,
body[data-layout="semibox"] .navbar-nav .menu-dropdown.show,
body[data-layout="semibox"] .navbar-nav .collapse.show {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* ============================================================================
   STEP 3: NAV LINKS - SMOOTH HOVER ONLY
   ============================================================================ */

/**
 * Nav links - allow only background/color transition for hover
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-link,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-link {
    transition: background-color 0.15s ease, color 0.15s ease !important;
    transform: none !important;
    opacity: 1 !important;
}

/**
 * Disable any transform on nav links
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-link:hover,
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-link.active,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-link:hover,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-link.active {
    transform: none !important;
}

/* ============================================================================
   STEP 4: NESTED NAV ITEMS - INSTANT APPEARANCE
   ============================================================================ */

/**
 * Nested navigation items - no stagger, no delay
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav .nav-item,
body[data-layout="vertical"] .navbar-nav .menu-dropdown .collapse .nav .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown .collapse .nav .nav-item {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    opacity: 1 !important;
}

/* ============================================================================
   STEP 5: KILL ALL POSSIBLE TRANSFORM/TRANSLATE ANIMATIONS
   ============================================================================ */

/**
 * Target any possible translateX, translateY, scale animations
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown *,
body[data-layout="semibox"] .navbar-nav .menu-dropdown * {
    transform: none !important;
}

/**
 * Exception: Allow hover transitions for nav-links only
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-link {
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

body[data-layout="semibox"] .navbar-nav .menu-dropdown .nav-link {
    transform: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* ============================================================================
   STEP 6: FORCE IMMEDIATE DISPLAY - NO FADE IN/OUT
   ============================================================================ */

/**
 * All elements within dropdown should be immediately visible
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown.show .nav-item,
body[data-layout="vertical"] .navbar-nav .menu-dropdown.show .nav-link,
body[data-layout="vertical"] .navbar-nav .collapse.show .nav-item,
body[data-layout="vertical"] .navbar-nav .collapse.show .nav-link,
body[data-layout="semibox"] .navbar-nav .menu-dropdown.show .nav-item,
body[data-layout="semibox"] .navbar-nav .menu-dropdown.show .nav-link,
body[data-layout="semibox"] .navbar-nav .collapse.show .nav-item,
body[data-layout="semibox"] .navbar-nav .collapse.show .nav-link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    animation: none !important;
}

/* ============================================================================
   STEP 7: DISABLE WILL-CHANGE TO PREVENT GPU LAYER ISSUES
   ============================================================================ */

/**
 * Reset will-change to prevent GPU layer issues
 */
body[data-layout="vertical"] .navbar-nav .menu-dropdown,
body[data-layout="vertical"] .navbar-nav .menu-dropdown *,
body[data-layout="semibox"] .navbar-nav .menu-dropdown,
body[data-layout="semibox"] .navbar-nav .menu-dropdown * {
    will-change: auto !important;
}

/* ============================================================================
   STEP 8: ACCESSIBILITY - REDUCED MOTION
   ============================================================================ */

/**
 * Respect user's motion preferences
 */
@media (prefers-reduced-motion: reduce) {
    body[data-layout="vertical"] .navbar-nav .menu-dropdown *,
    body[data-layout="vertical"] .navbar-nav .collapsing,
    body[data-layout="semibox"] .navbar-nav .menu-dropdown *,
    body[data-layout="semibox"] .navbar-nav .collapsing {
        animation: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* ============================================================================
   DEBUGGING HELPERS (Remove in production)
   ============================================================================ */

/**
 * Uncomment to debug which elements have animations
 */
/*
body[data-layout="vertical"] .navbar-nav .menu-dropdown .nav-item {
    border: 1px solid red !important;
}

body[data-layout="vertical"] .navbar-nav .menu-dropdown.collapsing {
    border: 2px solid blue !important;
}
*/

/* ============================================================================
   NOTES & WHY THIS APPROACH
   ============================================================================

   Why so aggressive?
   1. custom.css has stagger animations that leak to vertical layout
   2. Multiple CSS sources with conflicting rules
   3. Need maximum specificity to override everything

   Why body[data-layout="vertical"]?
   1. Maximum specificity without using inline styles
   2. Ensures vertical layout ONLY affected
   3. Won't break horizontal mega menu

   Why transform: none everywhere?
   1. Scale, translateX, translateY all cause "berkedip"
   2. Simple height transition is all we need
   3. Predictable, smooth behavior

   Why opacity: 1 and transition-delay: 0s?
   1. Stagger animation uses delay - we kill it
   2. Opacity fade causes "berkedip" - we prevent it
   3. Instant appearance = no flicker

   Performance Impact:
   - Positive: Simpler CSS = faster rendering
   - Positive: No complex animations = less GPU work
   - Positive: No layout thrashing from transforms

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