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

#sidebar{

    position:fixed;

    top:0;
    left:0;

    width:260px;
    height:100vh;

    background:linear-gradient(
        180deg,
        #0f172a 0%,
        #1e293b 100%
    );

    color:#fff;

    transition:.3s ease;

    z-index:1050;

    overflow-y:auto;

    overflow-x:hidden;

}

/* =========================================================
SCROLLBAR
========================================================= */

#sidebar::-webkit-scrollbar{

    width:6px;

}

#sidebar::-webkit-scrollbar-thumb{

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

    border-radius:10px;

}

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

#sidebar.collapsed{

    width:90px;

}

/* =========================================================
LOGO
========================================================= */

.sidebar-logo{

    padding:24px;

    display:flex;

    align-items:center;

    gap:14px;

}

.sidebar-logo img{

    width:46px;
    height:46px;

    object-fit:cover;

    border-radius:14px;

}

.sidebar-logo-text{

    transition:.3s;

}

#sidebar.collapsed .sidebar-logo-text{

    opacity:0;

    visibility:hidden;

    width:0;

}

/* =========================================================
MENU
========================================================= */

.sidebar-menu{

    padding:10px 14px 30px;

}

.sidebar-menu-label{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:1px;

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

    padding:14px 16px 8px;

}

/* =========================================================
LINK
========================================================= */

.sidebar-link{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:16px;

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

    text-decoration:none;

    transition:.2s ease;

    margin-bottom:6px;

}

/* ICON */

.sidebar-link i{

    font-size:20px;

    min-width:24px;

}

/* HOVER */

.sidebar-link:hover{

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

    color:#fff;

}

/* ACTIVE */

.sidebar-link.active{

    background:#2563eb;

    color:#fff;

    box-shadow:
        0 8px 20px rgba(37,99,235,.35);

}

/* =========================================================
COLLAPSE TEXT
========================================================= */

.sidebar-link span{

    transition:.3s;

    white-space:nowrap;

}

#sidebar.collapsed .sidebar-link span{

    opacity:0;

    visibility:hidden;

    width:0;

}

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

.main{

    margin-left:260px;

    min-height:100vh;

    transition:.3s ease;

}

/* EXPANDED */

.main.expanded{

    margin-left:90px;

}

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

@media(max-width:992px){

    #sidebar{

        left:-100%;

    }

    #sidebar.mobile-show{

        left:0;

    }

    .main{

        margin-left:0;

    }

    .main.expanded{

        margin-left:0;

    }

}