#sidebar{

width:var(--sidebar-width);

background:#111827;

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

display:flex;

flex-direction:column;

padding:25px;

}

.brand{

margin-bottom:45px;

}

.brand h2{

font-size:34px;

font-weight:800;

letter-spacing:.5px;

}

.brand small{

color:var(--text-muted);

font-size:15px;

}

nav{

display:flex;

flex-direction:column;

gap:8px;

}

nav a{

display:flex;

align-items:center;

gap:14px;

padding:14px 18px;

border-radius:12px;

color:var(--text-light);

transition:var(--transition);

font-weight:600;

}

nav a:hover{

background:var(--bg-light);

color:white;

}

nav a.active{

background:var(--primary);

color:white;

}

nav i{

width:20px;

text-align:center;

}#sidebar{

width:var(--sidebar-width);

background:#111827;

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

display:flex;

flex-direction:column;

padding:25px;

}

.brand{

margin-bottom:45px;

}

.brand h2{

font-size:34px;

font-weight:800;

letter-spacing:.5px;

}

.brand small{

color:var(--text-muted);

font-size:15px;

}

nav{

display:flex;

flex-direction:column;

gap:8px;

}

nav a{

display:flex;

align-items:center;

gap:14px;

padding:14px 18px;

border-radius:12px;

color:var(--text-light);

transition:var(--transition);

font-weight:600;

}

nav a:hover{

background:var(--bg-light);

color:white;

}

nav a.active{

background:var(--primary);

color:white;

}

nav i{

width:20px;

text-align:center;

}

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

@media (max-width: 900px) {

    #sidebar {
        width: 100%;
        min-width: 0;
        padding: 16px 18px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .brand {
        margin-bottom: 16px;
    }

    .brand h2 {
        font-size: 28px;
    }

    .brand small {
        font-size: 13px;
    }

    #sidebar nav {
        display: flex;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    #sidebar nav a {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 11px 14px;
    }

}

@media (max-width: 600px) {

    #sidebar {
        padding: 14px;
    }

    .brand {
        margin-bottom: 12px;
    }

    .brand h2 {
        font-size: 24px;
    }

    #sidebar nav {
        gap: 6px;
    }

    #sidebar nav a {
        padding: 10px 12px;
        font-size: 13px;
    }

}