/**
 * ============================================================================
 * MOBILE SIDEBAR OVERLAY - STANDALONE SOLUTION
 * ============================================================================
 *
 * PURPOSE:
 * ========
 * Membuat sidebar menjadi overlay (melayang) di mobile, bukan push content.
 * Sidebar default hidden di mobile, muncul dengan slide animation saat toggle.
 *
 * PROBLEM SOLVED:
 * ===============
 * - Sidebar memakan space di mobile, merusak layout konten
 * - Main content ter-push saat sidebar muncul
 * - Tidak ada backdrop untuk menutup sidebar
 *
 * SOLUTION STRATEGY:
 * ==================
 * 1. Sidebar position: fixed dengan z-index tinggi (overlay, bukan push)
 * 2. Default state: translateX(-100%) di mobile (hidden)
 * 3. Active state: translateX(0) di mobile (visible)
 * 4. Backdrop: Layar gelap transparan saat sidebar aktif
 * 5. Main content: TIDAK bergerak sama sekali (margin-left: 0 di mobile)
 *
 * ARCHITECTURE:
 * =============
 * - Mobile breakpoint: < 768px
 * - Sidebar class: .app-menu atau .navbar-menu
 * - Active class: .sidebar-mobile-active (ditambahkan via JavaScript)
 * - Backdrop class: .mobile-sidebar-backdrop (ditambahkan via JavaScript)
 *
 * PRIORITY: CRITICAL
 * Date: 2025-11-28
 * Version: 1.0 (Production Ready - Mobile Overlay)
 * Author: Senior UI Developer
 * ============================================================================
 */

/* ============================================================================
   SECTION 1: MOBILE BREAKPOINT - RESET DESKTOP BEHAVIOR
   ============================================================================ */

/**
 * Mobile: < 768px
 * Tablet & Desktop: >= 768px
 */
@media (max-width: 767.98px) {

    /* ========================================================================
       1.1: MAIN CONTENT - NO MARGIN, NO PUSH
       ======================================================================== */

    /**
     * CRITICAL: Main content TIDAK BOLEH ter-push di mobile
     * Set margin-left: 0 untuk semua layout modes
     */
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        transition: none !important; /* No animation saat sidebar toggle */
    }

    /**
     * Page content - full width di mobile
     */
    .page-content {
        padding-left: calc(var(--vz-gutter-x, 1.5rem) * 0.5) !important;
        padding-right: calc(var(--vz-gutter-x, 1.5rem) * 0.5) !important;
    }

    /* ========================================================================
       1.2: TOPBAR - FULL WIDTH DI MOBILE
       ======================================================================== */

    /**
     * Topbar harus full width di mobile (tidak terpengaruh sidebar)
     */
    #page-topbar {
        left: 0 !important;
        width: 100% !important;
        right: 0 !important;
    }

    /* ========================================================================
       1.3: FOOTER - FULL WIDTH DI MOBILE
       ======================================================================== */

    /**
     * Footer harus full width di mobile
     */
    .footer {
        left: 0 !important;
        width: 100% !important;
        right: 0 !important;
    }

    /* ========================================================================
       1.4: SIDEBAR - FIXED OVERLAY POSITION
       ======================================================================== */

    /**
     * CRITICAL: Sidebar menjadi fixed overlay di mobile
     * Default state: Hidden (translateX(-100%))
     */
    .app-menu,
    .navbar-menu {
        /* Fixed positioning - melayang di atas konten */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        /* Full height mobile viewport */
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;

        /* Width: 280px (lebih lebar sedikit untuk mobile) */
        width: 280px !important;
        max-width: 80vw !important; /* Max 80% dari viewport width */

        /* Z-index: Di atas semua konten, di bawah backdrop */
        z-index: 1050 !important;

        /* Default state: HIDDEN (slide dari kiri) */
        transform: translateX(-100%) !important;

        /* Smooth slide animation */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

        /* No margin di mobile */
        margin: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;

        /* Overflow scrolling untuk menu panjang */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;

        /* Background solid (tidak transparan) */
        background: var(--vz-vertical-menu-bg, #ffffff) !important;

        /* Shadow untuk depth */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;

        /* Smooth rendering */
        backface-visibility: hidden !important;
        -webkit-font-smoothing: antialiased !important;
        will-change: transform !important;
    }

    /**
     * Dark mode sidebar background
     */
    [data-bs-theme="dark"] .app-menu,
    [data-bs-theme="dark"] .navbar-menu {
        background: var(--vz-vertical-menu-bg, #212529) !important;
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5) !important;
    }

    /* ========================================================================
       1.5: SIDEBAR ACTIVE STATE - VISIBLE
       ======================================================================== */

    /**
     * Saat class .sidebar-mobile-active ditambahkan ke body
     * Sidebar slide masuk (translateX(0))
     */
    body.sidebar-mobile-active .app-menu,
    body.sidebar-mobile-active .navbar-menu {
        transform: translateX(0) !important;
    }

    /**
     * Prevent body scroll saat sidebar aktif
     */
    body.sidebar-mobile-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* ========================================================================
       1.6: MOBILE BACKDROP - OVERLAY GELAP
       ======================================================================== */

    /**
     * Backdrop: Layar gelap transparan di belakang sidebar
     * Default: hidden (opacity: 0, visibility: hidden)
     */
    .mobile-sidebar-backdrop {
        /* Fixed full screen */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        /* Z-index: Di atas konten, di bawah sidebar */
        z-index: 1049 !important;

        /* Background: Semi-transparent black */
        background-color: rgba(0, 0, 0, 0.5) !important;

        /* Default state: HIDDEN */
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        /* Smooth fade transition */
        transition: opacity 0.3s ease, visibility 0s 0.3s !important;

        /* Smooth rendering */
        backface-visibility: hidden !important;
        will-change: opacity !important;
    }

    /**
     * Backdrop ACTIVE state - visible
     */
    body.sidebar-mobile-active .mobile-sidebar-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity 0.3s ease !important;
    }

    /* ========================================================================
       1.7: SIDEBAR BRAND BOX - MOBILE ADJUSTMENT
       ======================================================================== */

    /**
     * Logo area di mobile (tetap visible di sidebar)
     */
    .navbar-brand-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid var(--vz-border-color, rgba(0, 0, 0, 0.1)) !important;
    }

    /**
     * Logo sizing di mobile
     */
    .logo .logo-lg {
        display: inline-block !important;
        max-height: 24px !important;
    }

    .logo .logo-sm {
        display: none !important;
    }

    /* ========================================================================
       1.8: SIDEBAR MENU - MOBILE STYLING
       ======================================================================== */

    /**
     * Menu container scrolling
     */
    #scrollbar {
        height: calc(100vh - 70px) !important; /* Full height minus logo area */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /**
     * Menu items - bigger touch target untuk mobile
     */
    .navbar-nav .nav-link {
        padding: 0.875rem 1.5rem !important; /* Bigger padding untuk touch */
        font-size: 0.9375rem !important; /* Slightly larger font */
    }

    /**
     * Submenu items - indent lebih jelas
     */
    .navbar-nav .nav-sm .nav-link {
        padding: 0.75rem 1rem 0.75rem 3rem !important;
        font-size: 0.875rem !important;
    }

    /**
     * Menu icons - bigger untuk mobile
     */
    .navbar-nav .nav-link i {
        font-size: 1.25rem !important;
        min-width: 2rem !important;
    }

    /* ========================================================================
       1.9: HAMBURGER ICON - MOBILE ACTIVE STATE
       ======================================================================== */

    /**
     * Hamburger icon animation saat sidebar aktif
     */
    body.sidebar-mobile-active .hamburger-icon {
        transform: rotate(-90deg) !important;
    }

    /**
     * Hamburger icon spans transformation
     */
    body.sidebar-mobile-active .hamburger-icon span:nth-child(1) {
        top: 5px !important;
        width: 20px !important;
        transform: rotate(90deg) !important;
    }

    body.sidebar-mobile-active .hamburger-icon span:nth-child(2) {
        left: 3px !important;
        top: 13px !important;
        width: 10px !important;
        transform: rotate(45deg) !important;
    }

    body.sidebar-mobile-active .hamburger-icon span:nth-child(3) {
        left: 9px !important;
        top: 13px !important;
        width: 10px !important;
        transform: rotate(-45deg) !important;
    }

    /* ========================================================================
       1.10: VERTICAL OVERLAY - REMOVE EXISTING OVERLAY
       ======================================================================== */

    /**
     * Disable default Velzon vertical overlay (kita pakai backdrop sendiri)
     */
    .vertical-overlay {
        display: none !important;
    }

    /**
     * Remove default sidebar enable class behavior
     */
    body.vertical-sidebar-enable .app-menu {
        /* Override default behavior, gunakan .sidebar-mobile-active instead */
        margin-left: 0 !important;
        transform: translateX(-100%) !important;
    }

    body.vertical-sidebar-enable.sidebar-mobile-active .app-menu {
        transform: translateX(0) !important;
    }

    /* ========================================================================
       1.11: LAYOUT WRAPPER - NO OVERFLOW
       ======================================================================== */

    /**
     * Layout wrapper - prevent horizontal scroll di mobile
     */
    #layout-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ========================================================================
       1.12: SEMIBOX LAYOUT - MOBILE OVERRIDE
       ======================================================================== */

    /**
     * Semibox layout di mobile - sama behavior seperti vertical
     */
    [data-layout="semibox"] .app-menu,
    [data-layout="semibox"] .navbar-menu {
        position: fixed !important;
        transform: translateX(-100%) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    [data-layout="semibox"].sidebar-mobile-active .app-menu,
    [data-layout="semibox"].sidebar-mobile-active .navbar-menu {
        transform: translateX(0) !important;
    }

    [data-layout="semibox"] .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }

}

/* ============================================================================
   SECTION 2: TABLET & DESKTOP - KEEP NORMAL BEHAVIOR
   ============================================================================ */

/**
 * >= 768px: Sidebar tetap normal (static/fixed di desktop)
 * Jangan override behavior desktop
 */
@media (min-width: 768px) {

    /**
     * Backdrop hanya untuk mobile, hide di desktop
     */
    .mobile-sidebar-backdrop {
        display: none !important;
    }

    /**
     * Body class .sidebar-mobile-active tidak berpengaruh di desktop
     */
    body.sidebar-mobile-active {
        overflow: auto !important;
        position: static !important;
    }

    /**
     * Sidebar tidak menggunakan transform di desktop
     */
    .app-menu,
    .navbar-menu {
        transform: none !important;
        will-change: auto !important;
    }

}

/* ============================================================================
   SECTION 3: ACCESSIBILITY - FOCUS MANAGEMENT
   ============================================================================ */

/**
 * Focus trap di sidebar saat aktif (untuk keyboard navigation)
 */
@media (max-width: 767.98px) {

    /**
     * Saat sidebar aktif, main content tidak bisa di-focus
     */
    body.sidebar-mobile-active .main-content {
        pointer-events: none !important;
    }

    body.sidebar-mobile-active .main-content * {
        pointer-events: none !important;
    }

    /**
     * Sidebar dapat di-focus
     */
    body.sidebar-mobile-active .app-menu,
    body.sidebar-mobile-active .navbar-menu {
        pointer-events: auto !important;
    }

    body.sidebar-mobile-active .app-menu *,
    body.sidebar-mobile-active .navbar-menu * {
        pointer-events: auto !important;
    }

}

/* ============================================================================
   SECTION 4: PERFORMANCE OPTIMIZATION
   ============================================================================ */

/**
 * GPU acceleration untuk smooth animation
 */
@media (max-width: 767.98px) {

    .app-menu,
    .navbar-menu,
    .mobile-sidebar-backdrop {
        /* Force GPU layer untuk smooth animation */
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

}

/* ============================================================================
   SECTION 5: REDUCED MOTION SUPPORT
   ============================================================================ */

/**
 * Respect user's reduced motion preference
 */
@media (prefers-reduced-motion: reduce) {

    .app-menu,
    .navbar-menu,
    .mobile-sidebar-backdrop {
        transition: none !important;
    }

}

/* ============================================================================
   SECTION 6: SAFE AREA INSETS (iPhone X+)
   ============================================================================ */

/**
 * Support for devices with notch (iPhone X, 11, 12, etc.)
 */
@media (max-width: 767.98px) {

    @supports (padding-top: env(safe-area-inset-top)) {

        .app-menu,
        .navbar-menu {
            padding-top: env(safe-area-inset-top) !important;
        }

        .navbar-brand-box {
            padding-top: calc(1rem + env(safe-area-inset-top)) !important;
        }

        #scrollbar {
            height: calc(100vh - 70px - env(safe-area-inset-top)) !important;
        }

    }

}

/* ============================================================================
   SECTION 7: DARK MODE ENHANCEMENTS
   ============================================================================ */

/**
 * Dark mode backdrop - darker untuk better contrast
 */
@media (max-width: 767.98px) {

    [data-bs-theme="dark"] .mobile-sidebar-backdrop {
        background-color: rgba(0, 0, 0, 0.7) !important;
    }

    /**
     * Dark mode sidebar border
     */
    [data-bs-theme="dark"] .navbar-brand-box {
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

}

/* ============================================================================
   SECTION 8: SMALL MOBILE DEVICES (< 576px)
   ============================================================================ */

/**
 * Extra small devices - sidebar full width
 */
@media (max-width: 575.98px) {

    .app-menu,
    .navbar-menu {
        width: 100% !important;
        max-width: 100% !important;
    }

}

/* ============================================================================
   END OF MOBILE SIDEBAR OVERLAY
   ============================================================================ */

/**
 * IMPLEMENTATION CHECKLIST:
 *
 * ✅ Sidebar position: fixed overlay di mobile (tidak push content)
 * ✅ Default state: translateX(-100%) - hidden
 * ✅ Active state: translateX(0) - visible
 * ✅ Backdrop: Semi-transparent overlay saat sidebar aktif
 * ✅ Main content: margin-left: 0 di mobile (tidak bergerak)
 * ✅ Smooth slide animation: 0.3s cubic-bezier
 * ✅ GPU acceleration: translateZ(0) untuk performance
 * ✅ Accessibility: Focus trap saat sidebar aktif
 * ✅ Reduced motion: Respect user preference
 * ✅ Safe area insets: Support iPhone X+ notch
 * ✅ Dark mode: Enhanced backdrop opacity
 * ✅ Small devices: Full width sidebar (< 576px)
 * ✅ Desktop: No changes, keep normal behavior
 *
 * EXPECTED RESULT:
 * ================
 * Mobile (< 768px):
 * - Sidebar default hidden (translateX(-100%))
 * - Klik hamburger → Sidebar slide masuk (overlay)
 * - Backdrop muncul di belakang sidebar
 * - Main content TIDAK bergerak
 * - Klik backdrop → Sidebar slide keluar
 *
 * Desktop (>= 768px):
 * - Sidebar tetap normal (static/fixed)
 * - Tidak ada perubahan behavior
 *
 * JAVASCRIPT INTEGRATION:
 * =======================
 * File: mobile-sidebar-toggle.js
 * - Toggle class: .sidebar-mobile-active di <body>
 * - Create backdrop: .mobile-sidebar-backdrop
 * - Event listener: hamburger button, backdrop click
 * - Close sidebar: ESC key, backdrop click
 */