/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.crm-sidebar{
    position:fixed;
    top:0;
    left:0;
    width:var(--sidebar-width);
    height:100vh;
    z-index:1040;
    padding:22px 18px;
    display:flex;
    flex-direction:column;
    gap:20px;
    transition:all .35s ease;

    background:rgba(255,255,255,.58);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border-right:1px solid rgba(255,255,255,.45);
    box-shadow:
        8px 0 30px rgba(15,23,42,.05);
}

/*
|--------------------------------------------------------------------------
| BRAND
|--------------------------------------------------------------------------
*/

.brand-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
}

.brand-icon{
   
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    /* background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    ); */   
}
.logo-img{
    width: 32px;
}
.brand-text h4{
    margin:0;
    padding:0;
    font-size:18px;
    font-weight:700;
    color:var(--dark-color);
}

.brand-text p{
    margin:2px 0 0;
    font-size:12px;
    color:#64748b;
}

/*
|--------------------------------------------------------------------------
| QUICK CREATE
|--------------------------------------------------------------------------
*/

.create-btn{
    width:100%;
    border:none;
    outline:none;
    height:52px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    transition:.25s ease;

    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );

    box-shadow:0 12px 24px rgba(79,70,229,.25);
}

.create-btn:hover{
    transform:translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| SCROLL
|--------------------------------------------------------------------------
*/

.sidebar-scroll{
    flex:1;
    overflow:auto;
    padding-right:4px;
}

.sidebar-scroll::-webkit-scrollbar{
    width:6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb{
    background:rgba(100,116,139,.25);
    border-radius:20px;
}

/*
|--------------------------------------------------------------------------
| MENU
|--------------------------------------------------------------------------
*/

.sidebar-menu{
    list-style:none;
    padding:0;
    margin:0;
}

.sidebar-menu li{
    margin-bottom:8px;
}

.sidebar-menu a,
.menu-toggle{
    width:100%;
    border:none;
    background:none;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    border-radius:16px;
    text-decoration:none;
    color:#334155;
    font-weight:500;
    transition:.25s ease;
}

.sidebar-menu a:hover,
.menu-toggle:hover{
    background:rgba(255,255,255,.65);
    transform:translateX(3px);
}

.sidebar-menu a.active{
    color:#fff;
    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    box-shadow:0 10px 25px rgba(79,70,229,.28);
}

/*
|--------------------------------------------------------------------------
| SUBMENU
|--------------------------------------------------------------------------
*/

.has-submenu .submenu{
    display:none;
    padding-left:18px;
    margin-top:6px;
}

.has-submenu.open .submenu{
    display:block;
}

/*
|--------------------------------------------------------------------------
| COLLAPSED
|--------------------------------------------------------------------------
*/

body.sidebar-collapsed .crm-sidebar{
    width:88px;
}

body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .create-btn span,
body.sidebar-collapsed .sidebar-menu span:not(.material-symbols-outlined),
body.sidebar-collapsed .sidebar-menu div span:not(.material-symbols-outlined),
body.sidebar-collapsed .menu-arrow{
    display:none !important;
}

body.sidebar-collapsed .sidebar-menu a,
body.sidebar-collapsed .menu-toggle{
    justify-content:center !important;
    padding:14px;
}

body.sidebar-collapsed .sidebar-menu .menu-toggle div{
    justify-content:center;
    gap:0 !important;
}

body.sidebar-collapsed .has-submenu .submenu{
    display:none !important;
}

body.sidebar-collapsed .brand-wrap{
    justify-content:center;
}

/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.35);
    backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    z-index:1030;
}

.sidebar-overlay.active{
    opacity:1;
    visibility:visible;
}
/* mobile close */
.sidebar-close{
    display:none;
}
@media(max-width:991px){

    .sidebar-close{
        display:flex;
        position:absolute;
        top:18px;
        right:18px;

        width:42px;
        height:42px;

        border:none;
        border-radius:14px;
        cursor:pointer;

        align-items:center;
        justify-content:center;

        background:#fff;
        box-shadow:var(--shadow-sm);
    }

}