:root{
    --primary:#9e0b0f;
    --primary-light:#fef2f2;
    --bg:#f8fafc;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e2e8f0;
}
.dashboard{
    display:flex;
}

.sidebar{
    width:260px;
    min-height:100vh;
    background:#fff;
    border-right:1px solid var(--border);
    transition:.3s;
}

.sidebar.collapsed{
    width:80px;
}

.sidebar.collapsed .logo,
.sidebar.collapsed .sidebar-menu span{
    display:none;
}

.main-content{
    flex:1;
    padding:25px;
}

.topbar{
    display:flex;
    align-items:center;
    margin-bottom:25px;
}

.toggle-btn{
    border:none;
    width:45px;
    height:45px;
    border-radius:12px;
    background:white;
}

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

.sidebar-menu li{
    margin:5px 0px;
    
}

.sidebar-menu li a{
    text-decoration:none;
    color:inherit;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    padding-left: 25px;
}

.sidebar-menu li.active a{
    background:var(--primary-light);
    color:var(--primary);
}

.sidebar-menu i{
    width:20px;
}

.close-sidebar{
    display:none;
}

.sidebar-overlay{
    display:none;
}

@media(max-width:991px){

    .sidebar{

        position:fixed;
        left:-260px;
        top:0;

        width:260px;
        height:100vh;

        z-index:999;
    }

    .sidebar.show{
        left:0;
    }

    .close-sidebar{

        display:flex;

        position:absolute;

        top:15px;
        right:15px;

        width:40px;
        height:40px;

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

        border:none;
        border-radius:10px;
    }

    .sidebar-overlay.show{

        display:block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.4);

        z-index:998;
    }

}
.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.user-info img{
    width:45px;
    height:45px;
    border-radius:50%;
}


.profile-dropdown-container{

    position:relative;
}

.profile-trigger{

    border:none;
    background:none;
    padding:0;
    cursor:pointer;
}

.profile-trigger img{

    width:45px;
    height:45px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #e2e8f0;
}

.profile-dropdown{

    position:absolute;

    top:60px;
    right:0;

    width:280px;

    background:#060a0e;

    border-radius:18px;

    box-shadow:
    0 10px 40px rgba(0,0,0,.12);

    border:1px solid #e2e8f0;

    overflow:hidden;

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:.25s ease;

    z-index:1000;
}

.profile-dropdown.show{

    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

.profile-dropdown-header{

    text-align:center;

    padding:25px;

    background:#060a0e;
}

.profile-dropdown-header img{

    width:80px;
    height:80px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:12px;

    border:4px solid white;
}

.profile-dropdown-header h6{

    margin:0;

    font-weight:700;

    color:#ffffff;
}

.profile-dropdown-header p{

    margin-top:5px;
    margin-bottom:0;

    color:#ffffff;

    font-size:14px;

    word-break:break-word;
}

.profile-dropdown-body{

    padding:15px;
}

.dropdown-btn{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:14px 16px;

    text-decoration:none;

    border-radius:12px;

    font-weight:600;

    transition:.2s;

    margin-bottom:8px;
}

.profile-btn{

    background:#fef2f2;

    color:#9e0b0f;
}

.profile-btn:hover{

    background:#9e0b0f;

    color:white;
}

.logout-btn{

    background:#f8fafc;

    color:#ef4444;
}

.logout-btn:hover{

    background:#ef4444;

    color:white;
}

.dropdown-btn:last-child{

    margin-bottom:0;
}