#sidebar {
    transition: transform 0.3s ease;
    z-index: 50;
}

@media (max-width: 767px) {
    #sidebar {
        transform: translateX(-100%);
    }
    
    #sidebar.active {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-content.active {
    animation: fadeIn 0.3s ease-in;
}


.tablist { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 20px; 
}

.tab-btn { 
    padding: 10px 20px; 
    cursor: pointer; 
    background: #f0f0f0; 
    border: none; 
    border-radius: 5px; 
}

.tab-btn.active { 
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.tab-panel { 
    display: none; 
    
}

.tab-panel.active { 
    display: block; 
}