/* css/responsive.css */
@media (max-width: 992px) {
    .app-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
        padding: var(--space-md);
        gap: var(--space-md);
    }
    
    .main-content {
        padding: var(--space-md);
        max-height: none;
    }
}

@media (max-width: 576px) {
    .header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .btn {
        width: 100%;
    }
}