.sidebar-nav { position: fixed; top: var(--topbar-height); left: 0; width: var(--sidebar-width); height: calc(100vh - var(--topbar-height)); background: var(--secondary); z-index: 1020; border-right: 1px solid var(--glass-border); transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 1.5rem 0; } body.light-theme .sidebar-nav { background: #eef2f7; } .sidebar-nav.open { transform: translateX(0); } .sidebar-menu { list-style: none; padding: 0; margin: 0; } .sidebar-menu .nav-link { display: flex; align-items: center; gap: 1.2rem; color: var(--text-secondary); font-weight: 500; padding: 0.9rem 1.8rem; transition: var(--transition); border-left: 4px solid transparent; } .sidebar-menu .nav-link i { font-size: 1.1rem; width: 20px; text-align: center; } .sidebar-menu .nav-link:hover { color: var(--text-primary); background-color: var(--glass); } .sidebar-menu .nav-link.active { color: var(--accent); font-weight: 600; background: var(--glass); border-left-color: var(--accent); } @media (min-width: 992px) { .sidebar-nav { transform: translateX(0); } #main-container { padding-left: var(--sidebar-width); } } @media (max-width: 991px) { #sidebar-toggle { display: inline-flex; } } @media (max-width: 576px) { .sidebar-nav { width: 100%; transform: translateX(-105%); } } body.sidebar-open .sidebar-nav { transform: translateX(0); } body.sidebar-collapsed .sidebar-nav { transform: translateX(-100%); } body.sidebar-collapsed #main-container { padding-left: 0; }