:root {
                    --sidebar-bg: #2c3e50;
                    --secondary-dark-blue: #1a252f;
                }
                
                #sidebar-wrapper {
                    min-height: 100vh;
                    margin-left: -15rem;
                    transition: margin 0.25s ease-out;
                    background-color: var(--sidebar-bg);
                    color: white;
                }
                
                #sidebar-wrapper .sidebar-heading {
                    font-size: 1.2rem;
                    background-color: var(--secondary-dark-blue);
                }
                
                #sidebar-wrapper .sidebar-user-info {
                    padding: 1rem;
                    text-align: center;
                    border-bottom: 1px solid rgba(255,255,255,0.1);
                }
                
                #sidebar-wrapper .nav-link {
                    color: rgba(255,255,255,0.8);
                    padding: 0.75rem 1rem;
                    border-left: 3px solid transparent;
                }
                
                #sidebar-wrapper .nav-link:hover {
                    color: white;
                    background-color: rgba(255,255,255,0.1);
                    border-left: 3px solid #3498db;
                }
                
                #sidebar-wrapper .nav-link.active {
                    color: white;
                    background-color: rgba(255,255,255,0.1);
                    border-left: 3px solid #3498db;
                }
                
                #sidebar-wrapper .nav-link i {
                    margin-right: 0.5rem;
                    width: 20px;
                    text-align: center;
                }
                
                #wrapper.toggled #sidebar-wrapper {
                    margin-left: 0;
                }
                
                #page-content-wrapper {
                    min-width: 100vw;
                    background-color: #f8f9fa;
                }
                
                #wrapper.toggled #page-content-wrapper {
                    margin-left: 0;
                    min-width: calc(100vw - 15rem);
                }
                
                @media (min-width: 768px) {
                    #sidebar-wrapper {
                        margin-left: 0;
                    }
                    
                    #page-content-wrapper {
                        min-width: 0;
                        width: 100%;
                    }
                    
                    #wrapper.toggled #sidebar-wrapper {
                        margin-left: -15rem;
                    }
                }