/* ==========================================================
   SDME SIDEBAR - ENTERPRISE SAAS STYLE
========================================================== */


/* ==========================================================
   MAIN SIDEBAR
========================================================== */


aside{

    width:280px;

    height:100vh;

    background:#071320;

    color:#ffffff;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border-right:

    1px solid rgba(255,255,255,.08);

    transition:

    width .25s ease;

    overflow:visible;

}




/* ==========================================================
   SIDEBAR SCROLL AREA
========================================================== */


.sidebar-top{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

}




.sidebar-top::-webkit-scrollbar{

    width:8px;

}



.sidebar-top::-webkit-scrollbar-track{

    background:#050c14;

}



.sidebar-top::-webkit-scrollbar-thumb{

    background:#315d8a;

    border-radius:8px;

}



.sidebar-top::-webkit-scrollbar-thumb:hover{

    background:#4b8bd6;

}




/* Firefox */

.sidebar-top{

    scrollbar-width:thin;

    scrollbar-color:#315d8a #050c14;

}







/* ==========================================================
   BRAND
========================================================== */


.brand-container{


    display:flex;

    align-items:center;

    gap:14px;


    padding:

    22px 20px;


    border-bottom:

    1px solid rgba(255,255,255,.06);


}



.brand-logo{


    width:42px;

    height:42px;


    border-radius:8px;


    background:#0066ff;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:18px;

    font-weight:800;


    flex-shrink:0;


}




.brand-text h1{


    font-size:18px;

    font-weight:700;


    letter-spacing:.3px;


}



.brand-text p{


    margin-top:3px;


    color:#94a3b8;


    font-size:10px;


    letter-spacing:1.4px;


}







/* ==========================================================
   NAVIGATION
========================================================== */


.nav-links{


    list-style:none;


    padding:

    16px 12px;


}



.nav-item,
.menu-group{


    margin-bottom:6px;


}




.nav-content{


    display:flex;

    align-items:center;


    gap:14px;


}




.nav-links i{


    width:18px;

    min-width:18px;


    text-align:center;


}







/* ==========================================================
   NORMAL LINKS
========================================================== */


.nav-item a{


    display:flex;

    align-items:center;


    padding:

    12px 14px;


    color:#cbd5e1;


    text-decoration:none;


    font-size:14px;


    font-weight:500;


    border-left:

    3px solid transparent;


    transition:.2s ease;


}




.nav-item a:hover{


    background:#102033;


    color:white;


}




/* ==========================================
   ACTIVE TOP LEVEL NAVIGATION
========================================== */

.nav-item a.active{


    background:
    linear-gradient(
        135deg,
        #0b84ff,
        #0066ff
    );


    color:#fff;


    border-radius:14px;


    box-shadow:
    0 10px 24px rgba(0,102,255,.35);


    font-weight:600;


    transform:translateX(2px);


}



.nav-item a.active i{


    color:#fff;


}


.nav-item a.active i{


    color:white;


}







/* ==========================================================
   MODULE BUTTONS
========================================================== */


.menu-toggle{


    width:100%;


    display:flex;


    justify-content:space-between;


    align-items:center;


    padding:

    12px 14px;


    background:none;


    border:none;


    color:#cbd5e1;


    cursor:pointer;


    font-size:14px;


    font-weight:500;


    border-left:

    3px solid transparent;


    transition:.2s ease;


}




.menu-toggle:hover{


    background:#102033;


    color:white;


}







/* ==========================================
   OPEN MODULE
========================================== */

.menu-group.open > .menu-toggle{


    color:white;


    background:
    rgba(0,102,255,.12);


    border-radius:14px;


    border-left:
    3px solid #0b84ff;


}






/* ==========================================================
   ARROW
========================================================== */


.arrow{


    font-size:12px;


    transition:.25s ease;


}



.menu-group.open .arrow{


    transform:rotate(90deg);


}







/* ==========================================================
   SUBMENU
========================================================== */


.submenu{


    list-style:none;


    margin:

    5px 0 5px 22px;


    padding-left:

    12px;


    border-left:

    1px solid rgba(255,255,255,.12);


    max-height:0;


    overflow:hidden;


    transition:

    max-height .35s ease;


}




.menu-group.open .submenu{


    max-height:700px;


}




.submenu li{


    margin:3px 0;


}




.submenu a{


    display:flex;


    align-items:center;


    gap:12px;


    padding:

    10px 12px;


    color:#94a3b8;


    text-decoration:none;


    font-size:13px;


    border-left:

    3px solid transparent;


    transition:.2s;


}




.submenu a:hover{


    background:
    rgba(255,255,255,.06);


    border-radius:10px;


    color:white;


}




/* ==========================================
   ACTIVE SUBMENU
========================================== */

.submenu a.active{


    background:
    linear-gradient(
        135deg,
        #0b84ff,
        #0066ff
    );


    color:white;


    border-radius:12px;


    border-left:none;


    box-shadow:
    0 8px 20px rgba(0,102,255,.30);


    font-weight:600;


    transform:translateX(4px);


}



.submenu a.active i{


    color:white;


}








.submenu-text{


    white-space:nowrap;


}


/* ==========================================================
   COLLAPSED SIDEBAR
========================================================== */

#sidebar.collapsed{

    width:82px;

}



/* Brand */

#sidebar.collapsed .brand-container{

    justify-content:center;

    padding:22px 0;

}



#sidebar.collapsed .brand-text{

    display:none;

}



/* Navigation */

#sidebar.collapsed .nav-text{

    display:none;

}



#sidebar.collapsed .nav-content{

    justify-content:center;

}



#sidebar.collapsed .menu-toggle{

    justify-content:center;

}



#sidebar.collapsed .arrow{

    display:none;

}



#sidebar.collapsed .submenu{

    display:none;

}



/* ==========================================
   COLLAPSED PROFILE CARD
========================================== */

#sidebar.collapsed .sidebar-footer{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:14px 0;

}



#sidebar.collapsed .user-profile{

    width:52px;

    height:52px;

    padding:0;

    gap:0;

    justify-content:center;

    align-items:center;

    border-radius:14px;

}



#sidebar.collapsed .user-info,

#sidebar.collapsed .profile-arrow{

    display:none;

}



#sidebar.collapsed .user-avatar{

    width:40px;

    height:40px;

    margin:0;

}


/* ==========================================
   COLLAPSED PROFILE DROPDOWN
========================================== */

#sidebar.collapsed .profile-dropdown{

    position:fixed;

    left:92px;

    bottom:20px;

    width:240px;

    right:auto;

    border-radius:14px;

    z-index:5000;

}






/* ==========================================================
   FLOATING SUBMENU WHEN COLLAPSED
========================================================== */


.floating-submenu{


    position:fixed;


    width:200px;


    background:#071320;


    border:

    1px solid rgba(255,255,255,.1);


    padding:8px;


    z-index:2000;


    box-shadow:

    0 15px 35px rgba(0,0,0,.4);


}




.floating-submenu li{


    list-style:none;


}




.floating-submenu a{


    display:flex;


    gap:12px;


    padding:

    10px;


    color:#94a3b8;


    text-decoration:none;


}



.floating-submenu a:hover{


    background:#102033;


    color:white;


}



/* ==========================================================
   TOOLTIP
========================================================== */


#sidebarTooltip{


    position:fixed;


    background:#111827;


    color:white;


    padding:

    8px 12px;


    border-radius:6px;


    font-size:13px;


    pointer-events:none;


    opacity:0;


    z-index:999999;


    transition:.15s;


    box-shadow:

    0 8px 20px rgba(0,0,0,.35);


}




#sidebarTooltip.show{


    opacity:1;


}



/* ==========================================
   SIDEBAR FOOTER
========================================== */

.sidebar-footer{

    padding:16px;

    position:relative;

    border-top:1px solid rgba(255,255,255,.08);

}



.user-profile{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:14px 16px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.10);

    border-radius:18px;

    cursor:pointer;

    transition:all .25s ease;

}


.user-profile:hover{

    background:rgba(255,255,255,.14);

    border-color:rgba(255,255,255,.18);

}



.user-profile:active{

    transform:scale(.98);

}



/* Avatar */

.user-avatar{

    width:40px;

    height:40px;

    border-radius:12px;

    background: #0000FF;

    color:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:700;

    flex-shrink:0;

}



/* User Details */

.user-info{

    flex:1;

    min-width:0;

    overflow:hidden;

}



.user-info h4{

    margin:0;

    font-size:11px;

    font-weight:700;

    color:#FFFFFF;

    line-height:18px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



.user-info p{

    margin-top:3px;

    font-size:11px;

    color:#CBD5E1;

    line-height:16px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



/* Arrow */

.profile-arrow{

    font-size:12px;

    color:rgba(255,255,255,.65);

    flex-shrink:0;

    transition:transform .25s ease;

}



/* rotate arrow when open */

.user-profile.active .profile-arrow{

    transform:rotate(180deg);

}



/* ==========================================
   SIDEBAR PROFILE DROPDOWN
========================================== */


.profile-dropdown{

    position:absolute;

    left:12px;

    right:12px;

    bottom:calc(100% + 8px);

    background:#ffffff;

    border-radius:14px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.15);

    border:1px solid #E2E8F0;

    padding:10px;

    display:none;

    z-index:1000;

    animation:
        profileDrop .18s ease;

}



.profile-dropdown.show{

    display:block;

}



/* dropdown animation */

@keyframes profileDrop{

    from{

        opacity:0;

        transform:translateY(-6px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}




.profile-dropdown a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:11px 12px;

    text-decoration:none;

    color:#334155;

    font-size:14px;

    border-radius:10px;

    transition:
        background .2s ease,
        color .2s ease;

}



.profile-dropdown a:hover{

    background:#F1F5F9;

}



.profile-dropdown a i{

    width:18px;

    text-align:center;

    color:#64748B;

}



.profile-dropdown hr{

    border:none;

    border-top:1px solid #E2E8F0;

    margin:8px 0;

}



.profile-dropdown .logout{

    color:#DC2626;

}



.profile-dropdown .logout i{

    color:#DC2626;

}



/* ==========================================================
   MOBILE
========================================================== */


@media(max-width:768px){


    aside{


        position:fixed;


        left:-280px;


        top:0;


        height:100vh;


        z-index:1000;


        transition:left .3s;


    }



    aside.open{


        left:0;


    }


}