/* ==========================================
   DASHBOARD LAYOUT
========================================== */

.dashboard-wrapper{
    flex:1;
    width:100%;
    background-color:var(--bg-primary);
}

.dashboard-container{
    max-width:1440px;
    margin:0 auto;
    padding:60px 40px;
    display:flex;
    gap:60px;
}

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

.sidebar{
    width:240px;
    flex-shrink:0;
    border-right:1px solid var(--border-color);
    padding-right:20px;
}

.sidebar-title{
    font-family:var(--font-primary);
    font-weight:600;
    font-size:1.125rem;
    color:var(--text-main);
    margin-bottom:24px;
    letter-spacing:-0.01em;
}

.sidebar-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar-link{
    display:flex;
    align-items:center;
    gap:16px;

    padding:12px 20px;

    border-radius:8px;

    font-family:var(--font-primary);
    font-size:.875rem;
    font-weight:500;

    color:var(--text-muted);

    text-decoration:none;

    transition:var(--transition-smooth);
}

.sidebar-link:hover{
    background-color:var(--input-bg);
    color:var(--text-main);
}

.sidebar-link.active{
    background-color:var(--active-pill);
    color:var(--text-main);
    font-weight:500;
}

.sidebar-icon{
    width:18px;
    height:18px;
    stroke-width:1.5;
}

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

.main-content{
    flex:1;
    max-width:800px;
}

/* ==========================================
   TABLET
========================================== */

@media(max-width:992px){

    .dashboard-container{
        gap:40px;
        padding:40px 24px;
    }

    .sidebar{
        width:200px;
    }

}

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

@media(max-width:768px){

    .dashboard-container{
        flex-direction:column;
        gap:30px;
        padding:30px 20px;
    }

    .sidebar{

        width:100%;

        border-right:none;

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

        padding-right:0;

        padding-bottom:20px;

    }

    .sidebar-title{

        margin-bottom:16px;

    }

    .sidebar-nav{

        flex-direction:row;

        overflow-x:auto;

        gap:8px;

        padding-bottom:8px;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .sidebar-nav::-webkit-scrollbar{

        display:none;

    }

    .sidebar-link{

        flex-shrink:0;

        padding:10px 16px;

    }

    .main-content{

        width:100%;

        max-width:none;

    }

}


#temp
.sidebar-link.disabled{
    opacity:.6;
    cursor:default;
}

.sidebar-link.disabled:hover{
    background:transparent;
    color:#666;
}

.logout-link{
    margin-top:16px;
    border-top:1px solid var(--border-color);
    padding-top:18px;
}

.logout-link:hover{
    background:#fef2f2;
    color:#dc2626;
}

.logout-link:hover .sidebar-icon{
    color:#dc2626;
}

.dashboard-container.no-sidebar{
    display:block;
}

.dashboard-container.no-sidebar .main-content{
    max-width:1200px;
    width:100%;
    margin:0 auto;
}