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

.sidebar{

    width:280px;

    min-width:280px;

    height:100vh;

    position:sticky;

    top:0;

    overflow-y:auto;

    background:#ffffff;

    border-right:1px solid var(--border);

    display:flex;

    flex-direction:column;

    padding:1.5rem;

}

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

.sidebar-brand{

    display:flex;

    align-items:center;

    gap:1rem;

    text-decoration:none;

    margin-bottom:2rem;

    padding-bottom:1.5rem;

    border-bottom:1px solid var(--border);

}

.sidebar-brand img{

    width:54px;

    height:54px;

    object-fit:contain;

}

.sidebar-brand h3{

    margin:0;

    font-size:1.1rem;

    color:var(--secondary);

}

.sidebar-brand small{

    color:var(--text-light);

    font-size:.82rem;

}

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

.sidebar-link{

    display:flex;

    align-items:center;

    gap:.8rem;

    text-decoration:none;

    color:var(--text);

    font-weight:600;

    padding:1rem 1rem;

    border-radius:12px;

    transition:.3s;

    margin-bottom:1rem;

}

.sidebar-link:hover{

    background:#f8fafc;

    color:var(--primary);

}

.sidebar-link.active{

    background:var(--primary);

    color:#ffffff;

}

/* ==========================================================
   ACCORDION
========================================================== */

.accordion{

    border-radius:12px;

    margin-bottom:.8rem;

    overflow:hidden;

    border:1px solid transparent;

}

.accordion.active{

    border-color:var(--border);

    background:#fafafa;

}

/* ==========================================================
   BUTTON
========================================================== */

.accordion-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:none;

    background:none;

    cursor:pointer;

    padding:1rem;

    font-size:.95rem;

    font-weight:600;

    color:var(--text);

    transition:.3s;

}

.accordion-btn:hover{

    color:var(--primary);

    background:#f8fafc;

}

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

.arrow{

    transition:.3s;

    font-size:1rem;

}

.accordion.active .arrow{

    transform:rotate(180deg);

}

/* ==========================================================
   CONTENT
========================================================== */

.accordion-content{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    display:flex;

    flex-direction:column;

}

.accordion.active .accordion-content{

    max-height:500px;

}

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

.accordion-content a{

    text-decoration:none;

    color:var(--text-light);

    padding:.85rem 1rem .85rem 2.5rem;

    transition:.3s;

    border-left:3px solid transparent;

    font-size:.92rem;

}

.accordion-content a:hover{

    color:var(--primary);

    background:#ffffff;

    border-left-color:var(--primary);

}

.accordion-content a.active{

    color:var(--primary);

    background:#ffffff;

    border-left-color:var(--primary);

    font-weight:600;

}

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

.sidebar::-webkit-scrollbar{

    width:7px;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#d4d4d8;

    border-radius:20px;

}

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

    background:var(--primary);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .sidebar{

        position:fixed;

        top:0;

        left:-100%;

        width:280px;

        z-index:1000;

        transition:left .35s ease;

        box-shadow:0 20px 50px rgba(0,0,0,.15);

    }

    .sidebar.open{

        left:0;

    }

}

@media(max-width:576px){

    .sidebar{

        width:260px;

        min-width:260px;

    }

    .sidebar-brand img{

        width:48px;

        height:48px;

    }

}