/**

 * Lumina Sidebar — Glassmorphism theme

 * Uses CSS variables from general_libary (:root)

 */



/* ── Page canvas (gives backdrop-filter something to blur) ── */

body {

    background-color: #eef1f6;

    background-image:

        radial-gradient(ellipse 90% 60% at 0% 0%, rgba(40, 199, 111, 0.14) 0%, transparent 55%),

        radial-gradient(ellipse 70% 50% at 100% 80%, rgba(105, 108, 255, 0.07) 0%, transparent 50%),

        linear-gradient(165deg, #edf7f1 0%, #f0f2f8 45%, #f5f5f9 100%);

    background-attachment: fixed;

}



.layout-content-navbar .layout-page {

    background: rgba(255, 255, 255, 0.42);

    border-left: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow: inset 1px 0 0 rgba(15, 23, 42, 0.04);

}



/* ── Kill vendor solid-white menu shell ── */

aside#layout-menu.lumina-sidebar.bg-menu-theme,

#layout-menu.lumina-sidebar.bg-menu-theme.menu-vertical {

    background: transparent !important;

    background-color: transparent !important;

    box-shadow:
        6px 0 36px rgba(15, 23, 42, 0.07),
        inset -1px 0 0 rgba(40, 199, 111, 0.08) !important;

}



/* ── Glass layer (pseudo so backdrop-filter isn't clipped) ── */

#layout-menu.lumina-sidebar {

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: visible;

    font-family: 'Public Sans', sans-serif;

    border-right: 1px solid rgba(255, 255, 255, 0.72);

    isolation: isolate;

}



#layout-menu.lumina-sidebar::after {

    content: '';

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background: linear-gradient(

        165deg,

        rgba(255, 255, 255, 0.58) 0%,

        rgba(255, 255, 255, 0.42) 50%,

        rgba(248, 252, 250, 0.48) 100%

    );

    backdrop-filter: blur(22px) saturate(185%);

    -webkit-backdrop-filter: blur(22px) saturate(185%);

}



/* Brand tint overlay */

#layout-menu.lumina-sidebar::before {

    content: '';

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background: linear-gradient(

        180deg,

        rgba(40, 199, 111, 0.07) 0%,

        rgba(255, 255, 255, 0) 32%,

        rgba(255, 255, 255, 0) 100%

    );

}



@supports not (backdrop-filter: blur(1px)) {

    #layout-menu.lumina-sidebar::after {

        background: rgba(255, 255, 255, 0.94);

    }

}



#layout-menu.lumina-sidebar > * {

    position: relative;

    z-index: 1;

}



/* ── Sticky brand / logo ── */

#layout-menu.lumina-sidebar .lumina-sidebar-brand {

    flex: 0 0 auto;

    position: sticky;

    top: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    min-height: 72px;

    padding: 1rem 1.25rem;

    margin: 0;

    overflow: visible;

    background: rgba(255, 255, 255, 0.35);

    backdrop-filter: blur(14px) saturate(160%);

    -webkit-backdrop-filter: blur(14px) saturate(160%);

    border-bottom: 1px solid rgba(255, 255, 255, 0.55);

    box-shadow: 0 1px 0 rgba(40, 199, 111, 0.06);

}



#layout-menu.lumina-sidebar .lumina-sidebar-brand .app-brand-logo img {

    max-height: 40px;

    width: auto;

    display: block;

    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.06));

}



/* ── Scrollable body ── */

#layout-menu.lumina-sidebar .lumina-sidebar-body {

    flex: 1 1 auto;

    min-height: 0;

    position: relative;

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



#layout-menu.lumina-sidebar .menu-inner {

    flex: 1 1 auto;

    min-height: 0;

    height: auto !important;

    overflow: hidden;

    padding-top: 0.5rem !important;

    padding-bottom: 1rem !important;

    background: transparent !important;

}



#layout-menu.lumina-sidebar .menu-inner-shadow {

    top: 0;

    background: linear-gradient(

        rgba(255, 255, 255, 0.55) 30%,

        rgba(255, 255, 255, 0)

    ) !important;

}



/* ── Section headers ── */

#layout-menu.lumina-sidebar .menu-header {

    margin: 1.25rem 0 0.5rem;

    padding: 0 1.25rem;

}



#layout-menu.lumina-sidebar .menu-header::before {

    display: none !important;

    background-color: transparent !important;

}



#layout-menu.lumina-sidebar .menu-header-text {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.6875rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--lumina-green-dark, #1d9753);

    opacity: 1;

}



#layout-menu.lumina-sidebar .menu-header-text::before {

    content: '';

    width: 3px;

    height: 13px;

    border-radius: 999px;

    background: linear-gradient(

        180deg,

        var(--lumina-green, #28c76f) 0%,

        var(--lumina-green-dark, #1d9753) 100%

    );

    box-shadow: 0 0 10px rgba(40, 199, 111, 0.4);

    flex-shrink: 0;

}



/* ── Menu links ── */

#layout-menu.lumina-sidebar .menu-item .menu-link {

    margin: 0.2rem 0.75rem !important;

    padding: 0.625rem 0.875rem !important;

    border-radius: 0.75rem !important;

    font-size: 0.875rem;

    font-weight: 500;

    color: var(--lumina-text, #566a7f) !important;

    border: 1px solid transparent;

    background-color: transparent !important;

    transition:

        background-color 0.2s ease,

        color 0.2s ease,

        box-shadow 0.2s ease,

        transform 0.15s ease,

        border-color 0.2s ease;

}



#layout-menu.lumina-sidebar .menu-item .menu-link .menu-icon {

    font-size: 1.2rem;

    margin-right: 0.625rem;

    color: #8592a3;

    transition: color 0.2s ease, transform 0.2s ease;

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item:not(.active) > .menu-link:hover {

    background: rgba(40, 199, 111, 0.12) !important;

    border-color: rgba(40, 199, 111, 0.16);

    color: var(--lumina-green-dark, #1d9753) !important;

    box-shadow: 0 2px 14px rgba(40, 199, 111, 0.1);

    transform: translateX(3px);

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon {

    color: var(--lumina-green, #28c76f) !important;

    transform: scale(1.05);

}



/* ── Active pill ── */

#layout-menu.lumina-sidebar .menu-inner > .menu-item.active > .menu-link {

    background: linear-gradient(

        135deg,

        var(--lumina-green, #28c76f) 0%,

        var(--lumina-green-dark, #1d9753) 100%

    ) !important;

    color: #fff !important;

    border-color: rgba(255, 255, 255, 0.4);

    box-shadow:

        0 8px 25px rgba(40, 199, 111, 0.5),

        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

    font-weight: 600;

    transform: translateY(-1px);

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item.active > .menu-link .menu-icon {

    color: #fff !important;

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item.active::before,

#layout-menu.lumina-sidebar .menu-inner > .menu-item.active::after {

    display: none !important;

    background: transparent !important;

}



/* ── Logout ── */

#layout-menu.lumina-sidebar .lumina-sidebar-logout .menu-link {

    color: var(--lumina-error, #ea5455) !important;

    border: 1px solid rgba(234, 84, 85, 0.22);

    background: rgba(234, 84, 85, 0.07) !important;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}



#layout-menu.lumina-sidebar .lumina-sidebar-logout .menu-link .menu-icon {

    color: var(--lumina-error, #ea5455) !important;

}



#layout-menu.lumina-sidebar .lumina-sidebar-logout .menu-link:hover {

    background: rgba(234, 84, 85, 0.14) !important;

    border-color: rgba(234, 84, 85, 0.3);

    color: #d63031 !important;

    box-shadow: 0 2px 14px rgba(234, 84, 85, 0.14);

    transform: translateX(3px);

}



/* ── Scrollbar (Perfect Scrollbar) ── */

#layout-menu.lumina-sidebar .ps__rail-y {

    opacity: 0.55;

}



#layout-menu.lumina-sidebar .ps__thumb-y {

    background: rgba(40, 199, 111, 0.4) !important;

    border-radius: 999px;

}



#layout-menu.lumina-sidebar .ps__rail-y:hover > .ps__thumb-y,

#layout-menu.lumina-sidebar .ps__rail-y:focus > .ps__thumb-y,

#layout-menu.lumina-sidebar .ps__rail-y.ps--clicking .ps__thumb-y {

    background: rgba(40, 199, 111, 0.6) !important;

}



/* ── Mobile ── */

@media (max-width: 1199.98px) {

    #layout-menu.lumina-sidebar::after {

        background: linear-gradient(

            165deg,

            rgba(255, 255, 255, 0.82) 0%,

            rgba(255, 255, 255, 0.72) 100%

        );

    }



    #layout-menu.lumina-sidebar.bg-menu-theme {

        box-shadow: 10px 0 48px rgba(15, 23, 42, 0.14) !important;

    }



    #layout-menu.lumina-sidebar .menu-inner.overflow-auto {

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;

    color: #8592a3;

    transition: color 0.2s ease, transform 0.2s ease;

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item:not(.active) > .menu-link:hover {

    background: rgba(40, 199, 111, 0.12) !important;

    border-color: rgba(40, 199, 111, 0.16);

    color: var(--lumina-green-dark, #1d9753) !important;

    box-shadow: 0 2px 14px rgba(40, 199, 111, 0.1);

    transform: translateX(3px);

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon {

    color: var(--lumina-green, #28c76f) !important;

    transform: scale(1.05);

}



/* ── Active pill ── */

#layout-menu.lumina-sidebar .menu-inner > .menu-item.active > .menu-link {

    background: linear-gradient(

        135deg,

        var(--lumina-green, #28c76f) 0%,

        var(--lumina-green-dark, #1d9753) 100%

    ) !important;

    color: #fff !important;

    border-color: rgba(255, 255, 255, 0.4);

    box-shadow:

        0 8px 25px rgba(40, 199, 111, 0.5),

        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

    font-weight: 600;

    transform: translateY(-1px);

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item.active > .menu-link .menu-icon {

    color: #fff !important;

}



#layout-menu.lumina-sidebar .menu-inner > .menu-item.active::before,

#layout-menu.lumina-sidebar .menu-inner > .menu-item.active::after {

    display: none !important;

    background: transparent !important;

}



/* ── Logout ── */

#layout-menu.lumina-sidebar .lumina-sidebar-logout .menu-link {

    color: var(--lumina-error, #ea5455) !important;

    border: 1px solid rgba(234, 84, 85, 0.22);

    background: rgba(234, 84, 85, 0.07) !important;

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}



#layout-menu.lumina-sidebar .lumina-sidebar-logout .menu-link .menu-icon {

    color: var(--lumina-error, #ea5455) !important;

}



#layout-menu.lumina-sidebar .lumina-sidebar-logout .menu-link:hover {

    background: rgba(234, 84, 85, 0.14) !important;

    border-color: rgba(234, 84, 85, 0.3);

    color: #d63031 !important;

    box-shadow: 0 2px 14px rgba(234, 84, 85, 0.14);

    transform: translateX(3px);

}



/* ── Scrollbar (Perfect Scrollbar) ── */

#layout-menu.lumina-sidebar .ps__rail-y {

    opacity: 0.55;

}



#layout-menu.lumina-sidebar .ps__thumb-y {

    background: rgba(40, 199, 111, 0.4) !important;

    border-radius: 999px;

}



#layout-menu.lumina-sidebar .ps__rail-y:hover > .ps__thumb-y,

#layout-menu.lumina-sidebar .ps__rail-y:focus > .ps__thumb-y,

#layout-menu.lumina-sidebar .ps__rail-y.ps--clicking .ps__thumb-y {

    background: rgba(40, 199, 111, 0.6) !important;

}



/* ── Mobile ── */

@media (max-width: 1199.98px) {

    #layout-menu.lumina-sidebar::after {

        background: linear-gradient(

            165deg,

            rgba(255, 255, 255, 0.82) 0%,

            rgba(255, 255, 255, 0.72) 100%

        );

    }



    #layout-menu.lumina-sidebar.bg-menu-theme {

        box-shadow: 10px 0 48px rgba(15, 23, 42, 0.14) !important;

    }



    #layout-menu.lumina-sidebar .menu-inner.overflow-auto {

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;

    }

}


/* ── Premium Floating Sidebar (Desktop) ── */
@media (min-width: 1200px) {
    .layout-menu-fixed .layout-menu.lumina-sidebar {
        width: 18.5rem !important; /* Membuat sidebar lebih lebar */
        top: 1.25rem !important;
        bottom: 1.25rem !important;
        left: 1.25rem !important;
        height: calc(100vh - 2.5rem) !important;
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 
            0 15px 50px rgba(15, 23, 42, 0.08), 
            inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
        overflow: hidden;
    }
    
    /* Adjust page padding to account for the floating sidebar gap & new width */
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page, 
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
        padding-left: 21rem !important; 
    }
}