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

:root{

    --sidebar-width:270px;

    --sidebar-bg:#0B1527;
    --sidebar-card:#17263B;
    --sidebar-hover:#22344A;

    --sidebar-border:#243246;

    --sidebar-text:#E2E8F0;
    --sidebar-muted:#94A3B8;

    --primary:#22C55E;
    --primary-dark:#16A34A;

    --danger:#EF4444;
    --danger-dark:#DC2626;

}

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

.main{

    margin-left:270px;

    padding:30px;

    min-height:100vh;

    transition:.3s;

}

@media(max-width:992px){

.main{

    margin-left:0;

    padding:20px;

}

}

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

.sidebar{

    position:fixed;

    top:0;

    left:0;

    width:var(--sidebar-width);

    height:100vh;

    background:var(--sidebar-bg);

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

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    z-index:9999;

    overflow:hidden;

}

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

.sidebar{

    overflow-y:auto;

}

.sidebar::-webkit-scrollbar{

    width:6px;

}

.sidebar::-webkit-scrollbar-track{

    background:#101B2E;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#30445F;

    border-radius:20px;

}

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

    background:var(--primary);

}

/* ==========================================================
   LOGO
========================================================== */

.sidebar-logo{

    padding:30px 22px 20px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.sidebar-logo img{

    width:165px;

    display:block;

}

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

.sidebar-menu{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:0 18px;

}

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

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 18px;

    border-radius:16px;

    text-decoration:none;

    color:var(--sidebar-text);

    font-size:15px;

    font-weight:500;

    transition:.25s ease;

}

.sidebar-menu a i{

    width:22px;

    text-align:center;

    font-size:18px;

}

/* ==========================================================
   HOVER
========================================================== */

.sidebar-menu a:hover{

    background:var(--sidebar-hover);

    color:#fff;

    transform:translateX(5px);

}

/* ==========================================================
   ACTIVE
========================================================== */

.sidebar-menu a.active{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    box-shadow:
    0 12px 30px rgba(34,197,94,.22);

}

.sidebar-menu a.active i{

    transform:scale(1.12);

}

.sidebar-menu a i{

    transition:.25s;

}

.sidebar-menu a:hover i{

    transform:scale(1.1);

}

/* ==========================================================
   DIVIDER
========================================================== */

.sidebar hr{

    border:none;

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

    margin:20px;

}
/* ==========================================================
   SIDEBAR BOTTOM
========================================================== */

.sidebar-bottom{

    margin-top:auto;

    padding:20px 18px 25px;

}

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

.profile-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px;

    background:var(--sidebar-card);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    transition:.30s;

    margin-bottom:20px;

}

.profile-card:hover{

    border-color:var(--primary);

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(0,0,0,.25);

}

.avatar{

    width:54px;

    height:54px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

}

.profile-card h5{

    margin:0;

    color:#fff;

    font-size:15px;

    font-weight:600;

}

.profile-card small{

    display:block;

    margin-top:3px;

    color:var(--sidebar-muted);

    font-size:12px;

}

/* ==========================================================
   QUOTE CARD
========================================================== */

.quote-card{

    background:var(--sidebar-card);

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:18px;

    margin-bottom:20px;

    transition:.30s;

}

.quote-card:hover{

    border-color:var(--primary);

}

.quote-card i{

    display:block;

    color:var(--primary);

    font-size:24px;

    margin-bottom:12px;

}

.quote-card p{

    margin:0;

    line-height:1.7;

    color:var(--sidebar-text);

    font-size:14px;

}

/* ==========================================================
   LOGOUT
========================================================== */

.logout-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:15px;

    border-radius:16px;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        var(--danger),
        var(--danger-dark)
    );

    color:#fff;

    font-weight:600;

    transition:.30s;

}

.logout-btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 12px 28px rgba(239,68,68,.25);

}

.logout-btn i{

    font-size:18px;

}
/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.mobile-menu{

    display:none;

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:#17263B;

    color:#ffffff;

    cursor:pointer;

    justify-content:center;

    align-items:center;

    font-size:22px;

    transition:.30s;

}

.mobile-menu:hover{

    background:var(--primary);

}

/* ==========================================================
   OVERLAY
========================================================== */

#sidebarOverlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100%;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

#sidebarOverlay.active{

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   DESKTOP ANIMATION
========================================================== */

.sidebar{

    animation:sidebarFade .45s ease;

}

@keyframes sidebarFade{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

@media (max-width:1200px){

    :root{

        --sidebar-width:250px;

    }

}

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

@media (max-width:992px){

    .sidebar{

        left:-280px;

        width:270px;

        transition:.35s ease;

    }

    .sidebar.show{

        left:0;

    }

    .main{

        width:100%;

        margin-left:0;

        padding:20px;

    }

    .mobile-menu{

        display:flex;

    }

}

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

@media(max-width:576px){

    .sidebar{

        width:250px;

    }

    .sidebar-logo{

        padding:22px 18px;

    }

    .sidebar-logo img{

        width:145px;

    }

    .sidebar-menu{

        padding:0 14px;

    }

    .sidebar-menu a{

        padding:13px 15px;

        font-size:14px;

    }

    .profile-card{

        padding:14px;

    }

    .avatar{

        width:48px;

        height:48px;

        font-size:18px;

    }

    .quote-card{

        padding:16px;

    }

}

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

.sidebar::-webkit-scrollbar{

    width:7px;

}

.sidebar::-webkit-scrollbar-track{

    background:#101B2E;

}

.sidebar::-webkit-scrollbar-thumb{

    background:#2E425D;

    border-radius:30px;

}

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

    background:var(--primary);

}

/* ==========================================================
   GLASS EFFECT
========================================================== */

.profile-card,
.quote-card{

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

/* ==========================================================
   TRANSITIONS
========================================================== */

.sidebar *,
.sidebar a,
.sidebar i{

    transition:.25s ease;

}

/* ==========================================================
   FIXES
========================================================== */

.sidebar-menu a{

    white-space:nowrap;

}

.sidebar-menu{

    overflow-x:hidden;

}

.sidebar{

    overflow-x:hidden;

}
/* ===========================
   MOBILE HEADER
=========================== */

.mobile-header{
    display:none;
}

.mobile-menu-btn{
    background:none;
    border:none;
    color:#fff;
    font-size:30px;
    cursor:pointer;
}

.mobile-title{
    margin:0;
    color:#fff;
    font-size:18px;
    font-weight:600;
}

@media(max-width:992px){

.mobile-header{

display:flex;

align-items:center;

justify-content:space-between;

position:fixed;

top:0;

left:0;

right:0;

height:65px;

padding:0 20px;

background:#17263B;

border-bottom:1px solid #243246;

z-index:1200;

}

.main{

padding-top:80px;

}

}