/**
 * ============================================================================
 * SIDEBAR MINIMIZE MODE - CHROME & EDGE CONSISTENCY FIX
 * ============================================================================
 *
 * PURPOSE:
 * ========
 * Membuat sidebar minimize mode terlihat IDENTIK di Chrome dan Edge.
 * Fix perbedaan rendering browser pada sidebar width 70px (sm mode).
 *
 * PROBLEM IDENTIFIED:
 * ===================
 * 1. Width calculation: Chrome dan Edge calculate 70px berbeda (fractional pixels)
 * 2. Icon centering: Icons tidak centered perfectly di Chrome
 * 3. Text alignment: Menu title alignment berbeda
 * 4. Padding calculation: Padding menu items berbeda (sub-pixel rounding)
 * 5. Font rendering: Icon font size render berbeda
 * 6. Hover expansion: Sidebar expand width berbeda (70px → 250px transition)
 * 7. Main content margin: Tidak sync dengan sidebar width
 *
 * ROOT CAUSE:
 * ===========
 * - Chrome Blink engine vs Edge Chromium render sub-pixels berbeda
 * - Sidebar width: 70px dalam px units → fractional rounding issues
 * - Icon font-size: 22px → tidak divisible by 2 → centering issues
 * - Padding calculations using px → sub-pixel artifacts
 *
 * SOLUTION STRATEGY:
 * ==================
 * 1. Convert px to rem units untuk consistent scaling
 * 2. Force exact centering dengan flexbox + justify-content: center
 * 3. Use integer pixel values yang divisible by 2
 * 4. Apply box-sizing: border-box universally
 * 5. Force GPU rendering dengan translateZ(0)
 * 6. Normalize font rendering dengan antialiasing
 * 7. Exact width sync: sidebar 70px + border = main content margin
 *
 * PRIORITY: CRITICAL
 * Date: 2025-11-28
 * Version: 1.0 (Production Ready - Cross-Browser Fix)
 * Browser Support: Chrome 90+, Edge 90+, Firefox 88+, Safari 14+
 * ============================================================================
 */

/* ============================================================================
   SECTION 1: ROOT VARIABLES - REM UNITS FOR SIDEBAR MINIMIZE
   ============================================================================ */

:root {
    /**
     * CRITICAL: Convert sidebar minimize width dari px ke rem
     * Original: 70px → 4.375rem (70/16)
     *
     * Mengapa rem lebih baik:
     * - Consistent across browsers (tidak ada fractional pixel differences)
     * - Scales properly dengan zoom levels
     * - No sub-pixel rounding issues
     */

    /* Sidebar minimize width (sm mode) */
    --vz-vertical-menu-width-sm: 4.375rem;  /* 70px ÷ 16 = 4.375rem */

    /* Sidebar normal width (lg mode) */
    --vz-vertical-menu-width: 15.625rem;    /* 250px ÷ 16 = 15.625rem */

    /* Border width in rem */
    --vz-sidebar-border-width-sm: 0.0625rem; /* 1px ÷ 16 = 0.0625rem */

    /* Calculated main content margin (sidebar width + border) */
    --vz-main-content-margin-sm: calc(var(--vz-vertical-menu-width-sm) + var(--vz-sidebar-border-width-sm));
    /* 4.375rem + 0.0625rem = 4.4375rem = 71px */
}

/* ============================================================================
   SECTION 2: SIDEBAR MINIMIZE MODE - WIDTH NORMALIZATION
   ============================================================================ */

/**
 * Normalize sidebar width di minimize mode (sm dan sm-hover)
 */
:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

    /* ========================================================================
       2.1: SIDEBAR WIDTH - EXACT REM VALUE
       ======================================================================== */

    .navbar-menu {
        /* Force exact width: 4.375rem (70px) */
        width: var(--vz-vertical-menu-width-sm) !important;
        min-width: var(--vz-vertical-menu-width-sm) !important;
        max-width: var(--vz-vertical-menu-width-sm) !important;

        /* Box-sizing untuk include border dalam width */
        box-sizing: border-box !important;

        /* Force integer pixel rendering */
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;

        /* No padding that could affect width */
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* Smooth transition untuk hover expand */
        transition: width 0.1s ease-out !important;
    }

    /* ========================================================================
       2.2: MAIN CONTENT MARGIN - SYNC WITH SIDEBAR
       ======================================================================== */

    .main-content {
        @media (min-width: 768px) {
            /* Margin = sidebar width + border (4.375rem + 0.0625rem = 4.4375rem = 71px) */
            margin-left: var(--vz-main-content-margin-sm) !important;

            /* Width calculation */
            width: calc(100% - var(--vz-main-content-margin-sm)) !important;
            max-width: calc(100% - var(--vz-main-content-margin-sm)) !important;

            /* Force GPU rendering */
            transform: translateZ(0) !important;
            backface-visibility: hidden !important;

            /* Smooth transition */
            transition: margin-left 0.1s ease-out, width 0.1s ease-out !important;
        }
    }

    /* ========================================================================
       2.3: TOPBAR - ALIGN WITH MAIN CONTENT
       ======================================================================== */

    #page-topbar {
        @media (min-width: 768px) {
            left: var(--vz-main-content-margin-sm) !important;
            width: calc(100% - var(--vz-main-content-margin-sm)) !important;

            /* Force GPU rendering */
            transform: translateZ(0) !important;
            backface-visibility: hidden !important;
        }
    }

    /* ========================================================================
       2.4: FOOTER - ALIGN WITH MAIN CONTENT
       ======================================================================== */

    .footer {
        @media (min-width: 768px) {
            left: var(--vz-main-content-margin-sm) !important;
            width: calc(100% - var(--vz-main-content-margin-sm)) !important;

            /* Force GPU rendering */
            transform: translateZ(0) !important;
            backface-visibility: hidden !important;
        }
    }
}

/* ============================================================================
   SECTION 3: MENU ITEMS - PERFECT CENTERING
   ============================================================================ */

/**
 * Force perfect centering untuk menu items di minimize mode
 */
:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

    /* ========================================================================
       3.1: MENU TITLE - CENTER ALIGNMENT
       ======================================================================== */

    .navbar-menu .navbar-nav .menu-title {
        /* Force center alignment */
        text-align: center !important;

        /* Flexbox centering untuk icon */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* Full width */
        width: 100% !important;

        /* Padding: vertical only (horizontal auto-centered) */
        padding: 0.75rem 0 !important;  /* 12px 0 */

        /* Hide text span */
        span {
            display: none !important;
        }

        /* Icon styling */
        i {
            display: block !important;
            font-size: 1rem !important;  /* 16px - divisible by 2 */
            line-height: 1.5rem !important;  /* 24px - divisible by 2 */
            color: var(--vz-vertical-menu-item-color) !important;

            /* Center alignment */
            text-align: center !important;
            width: 100% !important;
        }
    }

    /* ========================================================================
       3.2: NAV LINKS - CENTER ALIGNMENT
       ======================================================================== */

    .navbar-menu .navbar-nav .nav-link {
        /* Flexbox perfect centering */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;

        /* Exact padding: 0.75rem (12px) vertical, 0 horizontal */
        padding: 0.75rem 0 !important;

        /* Width: full sidebar width */
        width: 100% !important;

        /* Box-sizing */
        box-sizing: border-box !important;

        /* Hide text spans */
        span {
            display: none !important;
        }

        /* Icon styling - CRITICAL: Use even pixel values */
        i {
            display: block !important;

            /* Font size: 1.375rem = 22px (prefer even: 1.5rem = 24px) */
            font-size: 1.5rem !important;  /* Changed dari 22px ke 24px untuk perfect centering */

            /* Line height: same as font size untuk square icon */
            line-height: 1.5rem !important;

            /* Center alignment */
            text-align: center !important;
            width: 100% !important;

            /* No margin */
            margin: 0 !important;
            margin-right: 0 !important;

            /* Font rendering */
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
        }

        /* SVG icons */
        svg {
            margin: 0 auto !important;
            margin-right: 0 !important;
        }

        /* Hide dropdown arrows */
        &:after,
        &:before {
            display: none !important;
        }
    }

    /* ========================================================================
       3.3: LOGO - CENTER ALIGNMENT
       ======================================================================== */

    .navbar-brand-box {
        /* Flexbox centering */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /* Width: full sidebar */
        width: var(--vz-vertical-menu-width-sm) !important;

        /* Padding: even values */
        padding: 1rem 0 !important;  /* 16px 0 */

        /* Text alignment fallback */
        text-align: center !important;

        /* Box-sizing */
        box-sizing: border-box !important;
    }

    .logo {
        /* Center alignment */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;

        /* Hide large logo, show small */
        span.logo-lg {
            display: none !important;
        }

        span.logo-sm {
            display: inline-block !important;

            /* Center img inside */
            img {
                display: block !important;
                margin: 0 auto !important;
                max-height: 1.5rem !important;  /* 24px */
            }
        }
    }
}

/* ============================================================================
   SECTION 4: HOVER EXPANSION - SMOOTH & CONSISTENT
   ============================================================================ */

/**
 * Saat hover, sidebar expand dari 70px (4.375rem) ke 250px (15.625rem)
 * Harus smooth dan consistent di Chrome dan Edge
 */
:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] {

    .navbar-menu:hover {
        /* Expand width: 15.625rem (250px) */
        width: var(--vz-vertical-menu-width) !important;
        min-width: var(--vz-vertical-menu-width) !important;
        max-width: var(--vz-vertical-menu-width) !important;

        /* Keep GPU rendering */
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;

        /* Smooth transition (inherit dari section 2) */
        transition: width 0.1s ease-out !important;

        /* ====================================================================
           4.1: EXPANDED STATE - SHOW TEXT
           ==================================================================== */

        .navbar-nav {
            .nav-link {
                /* Switch to horizontal layout */
                flex-direction: row !important;
                justify-content: flex-start !important;

                /* Padding: normal */
                padding: 0.5rem 1.25rem !important;  /* 8px 20px */

                /* Show text */
                span {
                    display: inline-block !important;
                    margin-left: 0.5rem !important;  /* 8px */
                }

                /* Icon: smaller */
                i {
                    font-size: 1.125rem !important;  /* 18px (even number) */
                    line-height: 1.125rem !important;
                    width: auto !important;
                    text-align: left !important;
                }

                /* SVG margin */
                svg {
                    margin-right: 0.665rem !important;
                }

                /* Show dropdown arrows */
                &:after {
                    display: inline-block !important;
                }
            }

            .menu-title {
                /* Left alignment */
                justify-content: flex-start !important;
                text-align: left !important;

                /* Padding: normal */
                padding: 0.75rem 1.25rem !important;  /* 12px 20px */

                /* Show text */
                span {
                    display: inline-block !important;
                }

                /* Hide icon */
                i {
                    display: none !important;
                }
            }

            .menu-dropdown.show {
                display: block !important;
            }
        }

        .navbar-brand-box {
            /* Left alignment */
            justify-content: flex-start !important;
            text-align: left !important;

            /* Padding: normal */
            padding: 0 1.3rem !important;
        }

        .logo {
            /* Left alignment */
            justify-content: flex-start !important;

            /* Show large logo */
            span.logo-lg {
                display: inline-block !important;
            }

            /* Hide small logo */
            span.logo-sm {
                display: none !important;
            }
        }

        .btn-vertical-sm-hover {
            display: inline-block !important;
        }
    }
}

/* ============================================================================
   SECTION 5: SM MODE (PERMANENT MINIMIZE) - DROPDOWN HOVER
   ============================================================================ */

/**
 * SM mode: Sidebar permanent 70px, dropdown muncul di samping saat hover
 */
:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm"] {

    @media (min-width: 768px) {

        /* ====================================================================
           5.1: NAV ITEM HOVER - SHOW DROPDOWN
           ==================================================================== */

        .navbar-menu .navbar-nav .nav-item {
            position: relative !important;

            &:hover > .menu-link {
                /* Expanded menu link saat hover */
                position: relative !important;

                /* Width: expand ke kanan (sidebar 70px + dropdown 200px) */
                width: calc(var(--vz-vertical-menu-width-sm) + 12.5rem) !important;  /* 4.375rem + 12.5rem = 270px total */

                /* Background */
                background: var(--vz-vertical-menu-bg) !important;

                /* Z-index */
                z-index: 1000 !important;

                /* Padding: add space untuk text */
                padding-left: 1.5rem !important;  /* 24px */
                padding-right: 1.5rem !important;

                /* Show text */
                span {
                    display: inline-block !important;
                    margin-left: 0.5rem !important;
                    white-space: nowrap !important;
                }

                /* Icon adjustment */
                i {
                    text-align: left !important;
                    width: auto !important;
                }

                /* Flexbox: horizontal */
                flex-direction: row !important;
                justify-content: flex-start !important;

                /* Box shadow untuk depth */
                box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;

                /* Show dropdown arrow */
                &:after {
                    display: block !important;
                    margin-left: auto !important;
                }
            }

            &:hover > .menu-dropdown {
                /* Show dropdown di samping kanan sidebar */
                display: block !important;

                /* Positioning */
                position: absolute !important;
                left: var(--vz-vertical-menu-width-sm) !important;  /* 4.375rem = 70px */
                top: 0 !important;

                /* Width */
                width: 12.5rem !important;  /* 200px */

                /* Background */
                background: var(--vz-vertical-menu-bg) !important;

                /* Height */
                height: auto !important;

                /* Padding */
                padding: 0.5rem 0 !important;  /* 8px 0 */

                /* Border radius */
                border-radius: 0 0.5rem 0.5rem 0 !important;  /* Right side rounded */

                /* Box shadow */
                box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15) !important;

                /* Z-index */
                z-index: 999 !important;

                /* Nav links inside dropdown */
                .nav-link {
                    /* Horizontal layout */
                    flex-direction: row !important;
                    justify-content: flex-start !important;

                    /* Padding */
                    padding: 0.625rem 1.25rem !important;  /* 10px 20px */

                    /* Show text */
                    span {
                        display: inline-block !important;
                        white-space: nowrap !important;
                    }

                    /* Icon size */
                    i {
                        font-size: 1rem !important;
                        width: auto !important;
                        text-align: left !important;
                        margin-right: 0.5rem !important;
                    }

                    /* Show dropdown indicator */
                    &:before {
                        display: inline-block !important;
                    }
                }
            }
        }
    }
}

/* ============================================================================
   SECTION 6: BROWSER-SPECIFIC FIXES
   ============================================================================ */

/**
 * Chrome-specific sub-pixel rendering fix
 */
@supports (-webkit-appearance: none) {
    :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

        .navbar-menu {
            /* Force Chrome to use exact pixels */
            -webkit-transform: translateZ(0) translate3d(0, 0, 0);
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000px;
        }

        .main-content {
            -webkit-transform: translateZ(0) translate3d(0, 0, 0);
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000px;
        }

        .navbar-nav .nav-link i {
            /* Force Chrome antialiasing */
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
    }
}

/**
 * Edge-specific fixes
 */
@supports (-ms-ime-align: auto) {
    :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

        .navbar-menu {
            /* Force Edge to use exact pixels */
            -ms-transform: translateZ(0);
        }

        .navbar-nav .nav-link i {
            /* Edge font rendering */
            font-smoothing: antialiased;
            -ms-text-size-adjust: 100%;
        }
    }
}

/* ============================================================================
   SECTION 7: DARK MODE - CONSISTENCY
   ============================================================================ */

/**
 * Dark mode adjustments
 */
[data-bs-theme="dark"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

    .navbar-menu {
        /* Dark mode background */
        background: var(--vz-vertical-menu-bg) !important;
    }

    .navbar-menu .navbar-nav .nav-item:hover > .menu-link,
    .navbar-menu .navbar-nav .nav-item:hover > .menu-dropdown {
        /* Dark mode dropdown background */
        background: var(--vz-vertical-menu-bg) !important;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.4) !important;
    }
}

/* ============================================================================
   SECTION 8: HIGH DPI DISPLAYS - CRISP RENDERING
   ============================================================================ */

/**
 * Retina/High DPI display optimization
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

        .navbar-menu .navbar-nav .nav-link i {
            /* Force sub-pixel antialiasing on Retina */
            -webkit-font-smoothing: subpixel-antialiased !important;
            -moz-osx-font-smoothing: auto !important;

            /* Crisp edges untuk icons */
            image-rendering: crisp-edges !important;
            image-rendering: -webkit-optimize-contrast !important;
        }
    }
}

/* ============================================================================
   SECTION 9: REDUCED MOTION ACCESSIBILITY
   ============================================================================ */

/**
 * Respect user's reduced motion preference
 */
@media (prefers-reduced-motion: reduce) {
    :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar-size="sm"], [data-sidebar-size="sm-hover"]) {

        .navbar-menu,
        .main-content,
        #page-topbar,
        .footer {
            transition: none !important;
        }
    }
}

/* ============================================================================
   END OF SIDEBAR MINIMIZE CHROME & EDGE CONSISTENCY FIX
   ============================================================================ */

/**
 * IMPLEMENTATION CHECKLIST:
 *
 * ✅ Converted sidebar width dari px ke rem (70px → 4.375rem)
 * ✅ Force exact centering dengan flexbox (justify-content: center)
 * ✅ Use even pixel values untuk icons (24px instead of 22px)
 * ✅ Apply box-sizing: border-box untuk prevent width overflow
 * ✅ Force GPU rendering dengan translateZ(0)
 * ✅ Normalize font rendering dengan antialiasing
 * ✅ Sync main content margin dengan sidebar width + border
 * ✅ Smooth hover expansion (70px → 250px)
 * ✅ SM mode dropdown hover positioning
 * ✅ Browser-specific fixes (Chrome, Edge)
 * ✅ Dark mode compatibility
 * ✅ High DPI display optimization
 * ✅ Reduced motion support
 *
 * EXPECTED RESULT:
 * ================
 * Chrome:
 * - Sidebar width: 70px (4.375rem) exact
 * - Icons: Perfectly centered
 * - Main content margin: 71px (70px sidebar + 1px border)
 * - Hover expand: Smooth 70px → 250px
 *
 * Edge:
 * - Sidebar width: 70px (4.375rem) exact
 * - Icons: Perfectly centered (IDENTICAL to Chrome)
 * - Main content margin: 71px (IDENTICAL to Chrome)
 * - Hover expand: Smooth 70px → 250px (IDENTICAL to Chrome)
 *
 * Result: CHROME === EDGE (Pixel-perfect match)
 *
 * TESTING PROCEDURE:
 * ==================
 * 1. Open dashboard di Chrome
 * 2. Klik minimize sidebar button (switch to sm-hover mode)
 * 3. Verify sidebar width = 70px exact
 * 4. Verify icons centered perfectly
 * 5. Verify main content margin = 71px
 * 6. Hover sidebar → Verify smooth expand to 250px
 * 7. Open dashboard di Edge
 * 8. Repeat steps 2-6
 * 9. Compare screenshots: Chrome vs Edge → MUST BE IDENTICAL
 * 10. Test zoom levels: 90%, 100%, 110%, 125%, 150%
 * 11. Test dark mode
 */