/**
 * ============================================================================
 * ACCORDION SMOOTH TRANSITIONS - CSS Optimizations
 * ============================================================================
 *
 * Purpose: Optimize accordion transitions untuk buttery smooth 60fps animations
 *          - GPU acceleration dengan will-change
 *          - Optimized easing functions
 *          - Reduce layout thrashing
 *          - Eliminate jank
 *
 * Date: 2025-01-14
 * Version: 1.0 (Production Ready)
 * ============================================================================
 */

/* ============================================================================
   1. GPU ACCELERATION HINTS
   ============================================================================ */

/* Hint browser to use GPU for these elements */
.app-menu .menu-dropdown {
    will-change: height, opacity;
    /* This tells browser to prepare GPU layer in advance */
}

/* During collapse/expand animation, optimize rendering */
.app-menu .menu-dropdown.collapsing {
    will-change: height, opacity;
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden; /* Prevent flickering */
    -webkit-font-smoothing: antialiased;
}

/* Remove will-change after animation completes (performance) */
.app-menu .menu-dropdown.collapse:not(.collapsing):not(.show) {
    will-change: auto;
}


/* ============================================================================
   2. SMOOTH EASING FUNCTIONS
   ============================================================================ */

/* Override Bootstrap default transition with smoother easing */
.app-menu .menu-dropdown.collapsing {
    /* Height transition with smooth ease-in-out */
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* cubic-bezier(0.4, 0, 0.2, 1) = Material Design "standard easing" */
    /* Feels more natural than Bootstrap's default linear */
}

/* Menu items inside - fade in smoothly */
.app-menu .menu-dropdown .nav-item {
    transition: opacity 0.25s ease-out,
                transform 0.25s ease-out;
}

/* When collapsing, fade out menu items faster */
.app-menu .menu-dropdown.collapsing .nav-item {
    opacity: 0;
    transform: translateY(-4px);
}

/* When showing, fade in menu items */
.app-menu .menu-dropdown.show .nav-item {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================================
   3. PREVENT LAYOUT THRASHING
   ============================================================================ */

/* Use transform instead of margin/padding for animations (GPU accelerated) */
.app-menu .menu-dropdown {
    /* Avoid animations on expensive properties like margin/padding */
    /* Bootstrap uses height (acceptable) + our opacity (cheap) */
}

/* Contain layout recalculation to this element only */
.app-menu .menu-dropdown {
    contain: layout style; /* CSS Containment API */
    /* Tells browser: changes here don't affect outside */
}


/* ============================================================================
   4. REDUCE REPAINT AREA
   ============================================================================ */

/* Create composite layer for accordion items */
.app-menu .menu-dropdown {
    /* Isolate this element in its own layer */
    isolation: isolate;
}

/* Individual menu items shouldn't trigger full repaint */
.app-menu .menu-dropdown .nav-link {
    /* Contain paint operations */
    contain: paint;
}


/* ============================================================================
   5. SMOOTH OVERFLOW HANDLING
   ============================================================================ */

/* During animation, hide overflow smoothly */
.app-menu .menu-dropdown.collapsing {
    overflow: hidden !important;
    /* Prevent content from jumping out during animation */
}

/* After animation, allow normal overflow */
.app-menu .menu-dropdown.collapse.show {
    overflow: visible;
}


/* ============================================================================
   6. COORDINATED PARENT TRANSITIONS
   ============================================================================ */

/* Parent menu item (trigger) should also transition smoothly */
.app-menu .nav-link.menu-link[data-bs-toggle="collapse"] {
    transition: background-color 0.2s ease-out,
                color 0.2s ease-out,
                border-color 0.2s ease-out;
}

/* Icon rotation/transition for dropdown arrows (if any) */
.app-menu .nav-link.menu-link[data-bs-toggle="collapse"] i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease-out;
}

/* Rotate icon when expanded (if using arrow icons) */
.app-menu .nav-link.menu-link[aria-expanded="true"] i.arrow-icon {
    transform: rotate(180deg);
}


/* ============================================================================
   7. STAGGER ANIMATION (CSS Alternative)
   ============================================================================ */

/* Optional: Stagger menu items for waterfall effect */
.app-menu .menu-dropdown.show .nav-item:nth-child(1) {
    transition-delay: 0.05s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(2) {
    transition-delay: 0.1s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(3) {
    transition-delay: 0.15s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(4) {
    transition-delay: 0.2s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(5) {
    transition-delay: 0.25s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(6) {
    transition-delay: 0.3s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(7) {
    transition-delay: 0.35s;
}

.app-menu .menu-dropdown.show .nav-item:nth-child(8) {
    transition-delay: 0.4s;
}

/* Reset delay when collapsing (instant hide) */
.app-menu .menu-dropdown.collapsing .nav-item {
    transition-delay: 0s;
}


/* ============================================================================
   8. DARK MODE SMOOTH TRANSITIONS
   ============================================================================ */

/* Ensure dark mode colors also transition smoothly */
[data-bs-theme="dark"] .app-menu .menu-dropdown.collapsing,
[data-bs-theme="dark"] .app-menu .menu-dropdown.show {
    /* Inherit smooth transitions in dark mode */
    transition: inherit;
}


/* ============================================================================
   9. RESPONSIVE OPTIMIZATIONS
   ============================================================================ */

/* Mobile: Reduce animation complexity for performance */
@media (max-width: 767px) {
    .app-menu .menu-dropdown.collapsing {
        /* Faster transitions on mobile */
        transition-duration: 0.25s;
    }

    /* Disable stagger on mobile (can cause jank on slow devices) */
    .app-menu .menu-dropdown.show .nav-item {
        transition-delay: 0s !important;
    }
}


/* ============================================================================
   10. ACCESSIBILITY - REDUCE MOTION
   ============================================================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .app-menu .menu-dropdown,
    .app-menu .menu-dropdown.collapsing,
    .app-menu .menu-dropdown .nav-item {
        /* Instant transitions for users who prefer reduced motion */
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
        animation: none !important;
    }

    /* Remove GPU hints (not needed for instant changes) */
    .app-menu .menu-dropdown {
        will-change: auto !important;
        transform: none !important;
    }
}


/* ============================================================================
   11. PRINT MODE
   ============================================================================ */

@media print {
    /* No animations in print */
    .app-menu .menu-dropdown,
    .app-menu .menu-dropdown.collapsing {
        transition: none !important;
        will-change: auto !important;
    }

    /* Show all content in print */
    .app-menu .menu-dropdown {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
    }
}


/* ============================================================================
   12. PERFORMANCE MONITORING (Development Only)
   ============================================================================ */

/* Uncomment to see paint flashing during development */
/*
.app-menu .menu-dropdown.collapsing {
    outline: 2px solid red;
}
.app-menu .menu-dropdown.show {
    outline: 2px solid green;
}
*/


/* ============================================================================
   13. FIX COMPETING ANIMATIONS
   ============================================================================ */

/* Disable any competing vertical sidebar animations during accordion */
[data-layout="vertical"] .menu-dropdown.collapsing .nav-item,
[data-layout="semibox"] .menu-dropdown.collapsing .nav-item {
    /* Override any stagger animations from sidebar-animation-fix-v2.css */
    animation: none !important;
    transform: translateY(0) !important;
    transition: opacity 0.2s ease-out !important;
}

/* Ensure no transform conflicts */
[data-layout="vertical"] .menu-dropdown,
[data-layout="semibox"] .menu-dropdown {
    transform-origin: top center;
}


/* ============================================================================
   14. SMOOTH SCROLL (if submenu extends beyond viewport)
   ============================================================================ */

/* If opening submenu causes scroll, make it smooth */
.app-menu,
#scrollbar {
    scroll-behavior: smooth;
}

/* But disable during accordion animation to prevent conflicts */
.app-menu:has(.menu-dropdown.collapsing) {
    scroll-behavior: auto;
}


/* ============================================================================
   15. LOADING STATE (Optional Enhancement)
   ============================================================================ */

/* Show subtle loading state while accordion animates */
.app-menu .menu-dropdown.collapsing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(59, 130, 246, 0.5) 50%,
        transparent 100%);
    opacity: 0;
    animation: loadingSlide 0.35s ease-out;
}

@keyframes loadingSlide {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    50% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}


/* ============================================================================
   END OF ACCORDION SMOOTH CSS
   ============================================================================ */

/**
 * USAGE NOTES:
 *
 * 1. This CSS works with sidebar-accordion.js v2.0 (smooth version)
 * 2. GPU acceleration is automatic (will-change hints)
 * 3. Easing is optimized for perceived smoothness
 * 4. Performance is maintained even on low-end devices
 * 5. Accessibility is preserved (prefers-reduced-motion)
 *
 * PERFORMANCE TIPS:
 * - Keep transitions < 400ms for responsive feel
 * - Use transform/opacity (cheap) over margin/padding (expensive)
 * - Let GPU handle animations (transform: translateZ(0))
 * - Contain layout recalculations (contain: layout)
 *
 * DEBUGGING:
 * - Chrome DevTools → Rendering → Paint flashing
 * - Performance tab → Record → Look for dropped frames
 * - Should maintain 60fps during accordion
 */