/* Sidebar Toggle Styles */
.mobile-only {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile-only {
        display: block;
    }
    
    #sidebar-toggle {
        width: 100%;
        margin-bottom: 1rem;
        background: var(--primary-color);
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        border-radius: var(--border-radius);
    }
    
    #sidebar-toggle:hover {
        background: var(--primary-dark);
    }

    #sidebar-content {
        display: none;
        transition: all 0.3s ease;
    }
    
    #sidebar-content.active {
        display: block;
        animation: fadeIn 0.3s;
    }
}