/* Responsive migliorato - Material Design */
@media (max-width: 768px) {
    body {
        padding: var(--spacing-md);
    }
    
    .container {
        padding: var(--spacing-lg);
        border-radius: var(--radius-sm);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.05);
    }
    
    h1 {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-lg);
    }
    
    .btn {
        border-radius: var(--radius-sm);
    }
    
    .card {
        margin-bottom: var(--spacing-md);
    }
    
    .liste-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--spacing-md);
    }
    
    .btn-icon-only {
        width: 56px;
        height: 56px;
        border-radius: 50%;
    }
    
    .btn-icon-only i {
        font-size: 1.2rem;
    }
    
    .action-buttons {
        display: flex;
        justify-content: center;
        gap: var(--spacing-md);
    }
    
    .prodotto {
        padding: var(--spacing-md);
    }
    
    .config-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    
    .config-tab {
        min-width: auto;
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

@media (max-width: 600px) {
    body {
        padding: var(--spacing-sm);
        background-color: var(--background-color);
    }
    
    .container {
        padding: var(--spacing-md);
        border-radius: var(--radius-sm);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    
    h1 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-md);
    }
    
    .action-buttons .main-buttons {
        gap: var(--spacing-md);
    }
    
    .action-buttons .btn-icon-only {
        width: 45px;
        height: 45px;
    }
    
    .action-buttons .btn-icon-only i {
        font-size: 1.1rem;
    }
    
    .liste-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .lista-card {
        margin-bottom: var(--spacing-md);
    }
    
    .lista-card:hover {
        transform: translateY(-5px) scale(1.01);
    }
    
    .aggiungi-prodotto {
        margin: var(--spacing-md) 0 var(--spacing-lg) 0;
        padding: var(--spacing-md);
    }
    
    /* Stile per i pulsanti di azione su mobile */
    .action-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }
    
    .tabs-nav {
        gap: 0;
    }
    
    .tab-item {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }
    
    .prodotto {
        padding: var(--spacing-sm);
    }
    
    .prodotto:hover {
        transform: translateY(-3px) scale(1.01);
    }
    
    .azioni-prodotto {
        gap: var(--spacing-xs);
    }
    
    .azioni-prodotto .btn {
        width: 32px;
        height: 32px;
    }
    
    /* Fix per i nomi prodotto troppo lunghi su mobile */
    .nome-prodotto {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
        max-height: none !important;
        display: block !important;
    }
    
    .config-tabs {
        flex-wrap: wrap;
    }
    
    .config-tab {
        flex-basis: 50%;
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-sm);
    }
}