/*==================================
MAIN CONTENT
==================================*/
/*==================================
Dashboard Frame
==================================*/

.dashboard{

    min-height:100vh;

}

/*==================================
Sidebar
==================================*/

.sidebar{

    position:fixed;

    top:0;
    left:0;

    width:280px;
    height:100vh;

    overflow-y:auto;

}

/*==================================
Main Content
==================================*/

.main-content{

    margin-left:280px;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}

/*==================================
Header
==================================*/

.topbar{

    width:100%;

    height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 25px;

}

/*==================================
Breadcrumb
==================================*/

.breadcrumb{

    width:100%;

    padding:20px 25px;

}

/*==================================
Content Wrapper
==================================*/

.dashboard-content{

    flex:1;

    width:100%;

    padding:0 25px 25px;

}

/*==================================
Sections
==================================*/

.dashboard-content > section{

    width:100%;

    margin-bottom:25px;

}

/*==================================
Welcome
==================================*/

.welcome-card{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.welcome-left{

    flex:1;

}

.welcome-right{

    width:180px;

    height:180px;

    flex-shrink:0;

}

/*==================================
Responsive
==================================*/

@media(max-width:992px){

    .sidebar{

        left:-280px;

    }

    .main-content{

        margin-left:0;

    }

}


/*==================================
TOPBAR
==================================*/

.topbar{
    width:100%;
    height:70px;
    background:#fcfcfc;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 30px;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:1001;
}

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

.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:none;
    background:none;
    cursor:pointer;
    font-size:26px;
}

/*==================================
SEARCH
==================================*/

.search-form{
    width:100%;
    max-width:450px;
}

.search-form input{
    width:100%;
    height:45px;
    border:1px solid var(--border);
    border-radius:30px;
    padding:0 18px;
    outline:none;
    font-size:15px;
}

.search-form input:focus{
    border-color:var(--primary);
}

/*==================================
HEADER RIGHT
==================================*/

.topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
}

/*==================================
NOTIFICATION
==================================*/

.notification-btn{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#f3f4f6;
    cursor:pointer;
    transition:.3s;
}

.notification-btn:hover{
    background:var(--primary);
    color:#fff;
}

/*==================================
PROFILE
==================================*/

.profile-dropdown{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
}

.profile-dropdown img{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.profile-dropdown strong{
    display:block;
    font-size:15px;
}

.profile-dropdown span{
    display:block;
    font-size:13px;
    color:var(--text-light);
}

/*==================================
BREADCRUMB
==================================*/

.breadcrumb{
    padding:20px 30px;
    color:var(--text-light);
    font-size:14px;
}

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

.dashboard-content{
    width:100%;
    padding:0 30px 30px;
}

/*==================================
ALL SECTIONS
==================================*/

.dashboard-content > section{
    background:#fff;
    border-radius:var(--radius);
    padding:25px;
    margin-bottom:25px;
    box-shadow:var(--shadow);
}

/*==================================
WELCOME CARD
==================================*/

.welcome-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.welcome-left{
    flex:1;
}

.welcome-left h1{
    font-size:32px;
    margin-bottom:10px;
    color:var(--text);
}

.welcome-left p{
    color:var(--text-light);
}

.welcome-right{
    width:180px;
    height:180px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#eef4ff;
    color:var(--primary);
    font-weight:700;
}

/*==================================
EMPTY SECTIONS
==================================*/

.stats-grid,
.continue-learning,
.resources-grid,
.performance-section,
.activity-section,
.downloads-section,
.achievement-section{
    min-height:180px;
}

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

@media(max-width:992px){

    .main-content{
        margin-left:0;
    }

    .menu-toggle{
        display:block;
    }

    .welcome-card{
        flex-direction:column;
        text-align:center;
    }

}

@media(max-width:768px){

    .topbar{
        padding:0 15px;
    }

    .search-form{
        display:none;
    }

    .breadcrumb{
        padding:15px;
    }

    .dashboard-content{
        padding:0 15px 15px;
    }

    .profile-dropdown strong,
    .profile-dropdown span{
        display:none;
    }

    .welcome-left h1{
        font-size:26px;
    }

    .welcome-right{
        width:140px;
        height:140px;
    }

}