/* =====================================================
   GYM MANAGEMENT SYSTEM
   PROFESSIONAL SIDEBAR
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

.sidebar{

    position:fixed;

    top:56px;

    left:0;

    width:260px;

    height:calc(100vh - 56px);

    background:#111827;

    display:flex;

    flex-direction:column;

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

    transition:.35s ease;

    z-index:1000;

    overflow:hidden;

}

/* ================= Logo ================= */

.sidebar-logo{

    text-align:center;

    padding:28px 20px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-logo img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:15px;

}

.sidebar-logo h4{

    color:#fff;

    font-size:28px;

    font-weight:700;

    margin-bottom:5px;

}

.sidebar-logo p{

    color:#9ca3af;

    font-size:14px;

}

/* ================= Menu ================= */

.sidebar-menu{

    flex:1;

    overflow-y:auto;

    padding:18px 14px;

}

.sidebar-menu::-webkit-scrollbar{

    width:5px;

}

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

    background:#374151;

    border-radius:20px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    color:#d1d5db;

    text-decoration:none;

    padding:14px 18px;

    margin-bottom:10px;

    border-radius:14px;

    transition:.3s;

    font-size:15px;

    font-weight:500;

}

.sidebar-menu a i{

    width:24px;

    text-align:center;

    font-size:18px;

}

.sidebar-menu a:hover{

    background:#1d4ed8;

    color:#fff;

    transform:translateX(5px);

}

.sidebar-menu a.active{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

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

}
/* ================= User ================= */

.sidebar-user{

    padding:20px;

    border-top:1px solid rgba(255,255,255,.08);

    background:#0f172a;

}

.sidebar-user .d-flex{

    align-items:center;

}

.user-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

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

}

.sidebar-user h6{

    color:#fff;

    margin:0;

    font-size:16px;

    font-weight:600;

}

.sidebar-user small{

    color:#9ca3af;

    font-size:13px;

}

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

.main-content{

    margin-left:260px;
    margin-top:56px;

    padding:20px;
    width:calc(100% - 260px);

    min-height:calc(100vh - 56px);

    background:#f5f7fb;

    transition:.35s ease;

}

/* ================= Collapse ================= */

.sidebar.collapsed{

    width:80px;

}

.sidebar.collapsed .sidebar-logo h4,

.sidebar.collapsed .sidebar-logo p,

.sidebar.collapsed .sidebar-menu span,

.sidebar.collapsed .sidebar-user .ms-3{

    display:none;

}

.sidebar.collapsed .sidebar-logo{

    padding:20px 10px;

}

.sidebar.collapsed .sidebar-logo img{

    width:42px;

    height:42px;

    margin-bottom:0;

}

.sidebar.collapsed .sidebar-menu a{

    justify-content:center;

    padding:14px;

    gap:0;

}

.sidebar.collapsed .sidebar-menu a i{

    width:auto;

    margin:0;

    font-size:20px;

}

.main-content.expanded{

    margin-left:80px;
    width:calc(100% - 80px);

}

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

@media (max-width:992px){

    .sidebar{
        left:-260px;
        width:260px;
    }

    .sidebar.show{
        left:0;
    }

    .main-content{
        margin-left:0;
        width:100%;
        padding:15px;
    }

    .main-content.expanded{
        margin-left:0;
        width:100%;
    }

}
@media (max-width:992px){

    .sidebar{
        left:-260px;
        width:260px;
    }

    .sidebar.show{
        left:0;
    }

    .main-content{
        margin-left:0;
        width:100%;
        padding:15px;
    }

}