.sidebar { position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background-color: #ffffff; border-right: 1px solid #dee2e6; display: flex; flex-direction: column; z-index: 1030; transition: transform 0.3s ease-in-out; } .sidebar.collapsed { transform: translateX(-280px); width: 60px; } .sidebar .sidebar-header { border-bottom: 1px solid #e9ecef; padding-top: 1rem; padding-bottom: 0.5rem; background-color: white; z-index: 1040; } .sidebar.collapsed .sidebar-header { justify-content: center !important; } .sidebar h4.section-title { font-size: 0.875rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .sidebar .nav-link { display: flex; align-items: center; padding: 0.5rem 1.25rem; color: #495057; text-decoration: none; border-radius: 4px; transition: all 0.2s ease; } .sidebar .nav-link:hover { background-color: #f8f9fa; color: #1b6ec2; } .sidebar .nav-link.active { background-color: #1b6ec2; color: white; font-weight: 500; } .sidebar.collapsed .nav-link { justify-content: center; padding: 0.75rem 0.625rem; } .sidebar.collapsed .nav-link span.me-2, .sidebar.collapsed .sidebar-user-info > div, .sidebar.collapsed .sidebar-footer button { display: none !important; } .sidebar .section-title { margin-left: 1.25rem; margin-right: 1.25rem; } .sidebar.collapsed h4.section-title { display: none; } .sidebar .sidebar-user-info { font-size: 0.875rem; word-break: break-word; } .sidebar .sidebar-footer form { margin-top: auto; } @media (max-width: 768px) { .sidebar:not(.collapsed) { transform: translateX(-280px); } .sidebar.collapsed { transform: none !important; } } .bi { display: inline-block; font-style: normal; font-variant: normal; line-height: 1; }