/**
 * COMPONENTI RIUTILIZZABILI
 * 
 * Questo file raccoglie componenti di stile riutilizzabili tra diverse pagine dell'applicazione.
 * Quando si crea una nuova interfaccia, fare riferimento a queste classi per mantenere
 * la coerenza visiva in tutta l'applicazione.
 */

/**************************************
 * PULSANTI DI AZIONE
 *
 * Stili per pulsanti di azione comuni utilizzati in tabelle, liste e cards.
 * Utilizzare la classe .action-buttons come contenitore e .action-btn 
 * insieme alle classi specifiche per tipo di azione.
 *
 * Esempio:
 * <div class="action-buttons">
 *   <a href="#" class="action-btn view-btn" title="Visualizza">
 *     <i class="fas fa-eye"></i>
 *   </a>
 * </div>
 **************************************/

/* Contenitore per i pulsanti di azione */
.action-buttons {
    display: flex !important;
    gap: 8px !important; /* Spazio tra pulsanti */
    justify-content: flex-end !important;
}

/* Classe di base per tutti i pulsanti di azione */
.action-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}

/* Effetto hover comune */
.action-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    color: white !important; /* Mantiene il testo bianco anche in hover */
}

/* Effetto active comune */
.action-btn:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Pulsante di visualizzazione (rosso) */
.action-btn.view-btn {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8f6b 100%) !important;
}

/* Pulsante di eliminazione (rosso scuro) */
.action-btn.delete-btn {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b6b 100%) !important;
}

/* Pulsante di approvazione (verde) */
.action-btn.approve-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Pulsante di risposta (blu violetto) */
.action-btn.reply-btn {
    background: linear-gradient(135deg, #5468ff 0%, #7b68ee 100%) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Pulsante di modifica (giallo) */
.action-btn.edit-btn {
    background: linear-gradient(135deg, #feca57 0%, #ffdd59 100%) !important;
}

/* Pulsante di download (blu) */
.action-btn.download-btn {
    background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%) !important;
}

/* Pulsante di salvataggio (gradiente principale) */
.action-btn.save-btn {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
}

/* Pulsante di grafico/analisi (blu) */
.action-btn.chart-btn {
    background: linear-gradient(135deg, #36b9cc 0%, #5468ff 100%) !important;
}

/* Pulsante di archiviazione (arancione/ambra) */
.action-btn.archive-btn {
    background: linear-gradient(135deg, #ff9500 0%, #ffb347 100%) !important;
}

/* Pulsante applica orario standard (blu-viola professionale) */
.action-btn.primary-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Pulsante impostazioni/configurazione (turchese) */
.action-btn.settings-btn {
    background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%) !important;
}

/* Stile per pulsanti disabilitati */
.action-btn.disabled {
    background: #e9ecef !important; /* Già importante nel file originale */
    color: #adb5bd !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Dimensione icone all'interno dei pulsanti */
.action-btn i {
    font-size: 1rem !important;
}

/* Variante più piccola dei pulsanti di azione */
.action-btn.action-btn-sm {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.85rem !important;
}

/* Variante più grande dei pulsanti di azione */
.action-btn.action-btn-lg {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.15rem !important;
}

/* Pulsante con etichetta di testo a lato dell'icona */
.action-btn.action-btn-text {
    width: auto !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    gap: 8px !important;
}
.action-btn.action-btn-text i {
    margin-right: 3px !important;
}

/**************************************
 * SELETTORI A PILLOLA
 *
 * Stili per selettori a pillola utilizzati per navigazione, filtri e selezione di periodi.
 * Due varianti principali:
 * 1. .pill-tabs - Per navigazione a tab (sia orizzontale che verticale)
 * 2. .pill-filter - Per filtri come selezione di periodi
 *
 * Esempio navigazione:
 * <ul class="pill-tabs">
 *   <li class="pill-item">
 *     <button class="pill-link active">
 *       <i class="fas fa-list"></i> Tutti
 *     </button>
 *   </li>
 * </ul>
 * 
 * Esempio filtro periodo:
 * <div class="pill-filter">
 *   <button class="pill-option active" data-period="all">Tutti</button>
 *   <button class="pill-option" data-period="mese-corrente">Mese Corrente</button>
 * </div>
 **************************************/

/* Selettore a pillola per navigazione a tab (orizzontale) */
.pill-tabs {
    display: flex !important;
    background-color: var(--color-grey-100) !important;
    border-radius: 50px !important;
    padding: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin-bottom: 20px !important;
    list-style-type: none !important;
}

/* Stile per singolo elemento del selettore a pillola */
.pill-tabs .pill-item {
    margin-right: 4px !important;
}
.pill-tabs .pill-item:last-child {
    margin-right: 0 !important;
}

/* Stile per link/pulsante all'interno del selettore a pillola */
.pill-tabs .pill-link {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    color: #636e7b !important;
    font-weight: 500 !important;
    border-radius: 30px !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.pill-tabs .pill-link.active {
    color: white !important;
    background: var(--gradient-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.pill-tabs .pill-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.5) !important;
    color: var(--color-grey-800) !important;
}

.pill-tabs .pill-link i {
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* Animazione pill attiva */
@keyframes pill-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); }
}

.pill-tabs .pill-link.active {
    animation: pill-pulse 1.5s infinite !important;
}

/* Selettore a pillola per filtri temporali o altri filtri */
.pill-filter {
    display: flex !important;
    align-items: center !important;
    background-color: var(--color-grey-100) !important;
    border-radius: 50px !important;
    padding: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    min-width: 350px !important; /* Aumentata da 300px per garantire spazio sufficiente per le opzioni */
    white-space: nowrap !important; /* Impedisce che il testo vada a capo */
}

.pill-filter .pill-option {
    border: none !important;
    background: #00d68f !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 0.9rem !important;
    position: relative !important;
    z-index: 1 !important;
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important; /* Impedisce che il testo vada a capo */
    /*verflow: hidden !important;*/
    text-overflow: ellipsis !important; /* Aggiunge puntini di sospensione se il testo è troppo lungo */
}

.pill-filter .pill-option i {
    margin-right: 12px !important; /* Aggiungiamo lo stesso margine applicato a pill-tabs .pill-link i */
    font-size: 16px !important;
}

.pill-filter .pill-option.active {
    color: white !important;
    background: var(--gradient-primary) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

.pill-filter .pill-option:hover:not(.active) {
    color: var(--color-grey-800) !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* Effetto click per i selettori a pillola */
.pill-filter .pill-option:active {
    transform: scale(0.96) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Animazione pill attiva per filtri */
@keyframes pill-filter-pulse {
    0% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(var(--primary-color-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0); }
}

.pill-filter .pill-option.active {
    animation: pill-filter-pulse 1.5s infinite !important;
}

/* Selettore a pillola verticale (per navigazione laterale) */
.pill-tabs.vertical {
    flex-direction: column !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.pill-tabs.vertical .pill-item {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 5px !important;
}
.pill-tabs.vertical .pill-item:last-child {
    margin-bottom: 0 !important;
}

.pill-tabs.vertical .pill-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px !important;
    color: #636e7b !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: #f5f7fa !important;
    border-left: 4px solid transparent !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: left !important;
}

.pill-tabs.vertical .pill-link.active {
    color: var(--color-primary) !important;
    background: linear-gradient(to right, rgba(var(--primary-color-rgb), 0.1), rgba(var(--primary-color-rgb), 0.03)) !important;
    border-left: 4px solid var(--color-primary) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

.pill-tabs.vertical .pill-link:hover:not(.active) {
    background-color: #eef1f6 !important;
    color: var(--color-grey-800) !important;
}

.pill-tabs.vertical .pill-link i {
    margin-right: 10px !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

/* Stile contenitore per centrare i tab */
.pill-container {
    display: flex !important;
    justify-content: flex-start !important; /* Cambiato da center a flex-start per allineare a sinistra */
    margin-bottom: 1rem !important;
}

/* Responsive per selettori a pillola orizzontali */
@media (max-width: 768px) {
    .pill-tabs {
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .pill-tabs .pill-link {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }
    
    .pill-tabs .pill-link i {
        margin-right: 4px !important;
    }
    
    /* Responsive per filtri a pillola */
    .pill-filter {
        flex-direction: column !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 100% !important; /* Occupa tutto lo spazio disponibile in modalità mobile */
    }
    
    .pill-filter .pill-option {
        width: 100% !important;
        margin: 4px 0 !important;
        border-radius: var(--border-radius) !important;
        background-color: var(--color-grey-100) !important;
    }
}

/* Responsive per selettori a pillola verticali */
@media (max-width: 991px) {
    .pill-tabs.vertical {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .pill-tabs.vertical .pill-item {
        width: auto !important;
        margin: 0 5px 5px 0 !important;
    }
    
    .pill-tabs.vertical .pill-link {
        border-left: none !important;
        border-bottom: 3px solid transparent !important;
    }
    
    .pill-tabs.vertical .pill-link.active {
        border-left: none !important;
        border-bottom: 3px solid var(--color-primary) !important;
    }
}

/**************************************
 * BADGE DI STATO
 *
 * Stili standardizzati per i badge di stato utilizzati in tutte le tabelle
 * dell'applicazione. Utilizzare la classe .status-badge insieme alla classe
 * del tipo specifico di stato.
 *
 * Esempio:
 * <span class="status-badge pending">In attesa</span>
 * <span class="status-badge approved">Approvato</span>
 * <span class="status-badge cancelled">Cancellato</span>
 **************************************/

/* Base per tutti i badge di stato */
.status-badge {
    display: inline-block !important;
    padding: 0.35em 0.8em !important;
    font-size: 0.75em !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 50rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}

/* Variante per stato "in attesa" (arancione sfumato) */
.status-badge.pending {
    background-color: rgba(255, 170, 0, 0.1) !important;
    color: #ffaa00 !important;
}

/* Variante per stato "approvato" o "pagato" (verde sfumato) */
.status-badge.approved,
.status-badge.paid {
    background-color: rgba(0, 214, 143, 0.1) !important;
    color: #00d68f !important;
}

/* Variante per stato "completato" (verde blu sfumato) */
.status-badge.completed {
    background-color: rgba(0, 178, 157, 0.1) !important;
    color: #00b29d !important;
}

/* Variante per stato "in corso" (blu sfumato) */
.status-badge.in-progress {
    background-color: rgba(0, 149, 255, 0.1) !important;
    color: #0095ff !important;
}

/* Variante per stato "inattivo" (rosso sfumato) */
.status-badge.inactive {
    background-color: rgba(255, 71, 87, 0.1) !important;
    color: #ff4757 !important;
}

/* Variante per stato "annullato" o "rifiutato" (rosso sfumato) */
.status-badge.cancelled,
.status-badge.rejected {
    background-color: rgba(255, 71, 87, 0.1) !important;
    color: #ff4757 !important;
}

/* Variante per stato "scaduto" (grigio sfumato) */
.status-badge.expired {
    background-color: rgba(108, 117, 125, 0.1) !important;
    color: #6c757d !important;
}

/* Variante per stato "bozza" (grigio chiaro sfumato) */
.status-badge.draft {
    background-color: rgba(173, 181, 189, 0.1) !important;
    color: #adb5bd !important;
}

/* Variante per stato "in ritardo" (rosso arancio sfumato) */
.status-badge.late {
    background-color: rgba(255, 107, 107, 0.1) !important;
    color: #ff6b6b !important;
}

/* Variante generica un po' più scura per gli stati "in sospeso" */
.status-badge.on-hold {
    background-color: rgba(108, 117, 125, 0.15) !important;
    color: #495057 !important;
}

/* Compatibilità con i vecchi badge di Bootstrap */
.status-badge.bg-success {
    background-color: rgba(0, 214, 143, 0.1) !important;
    color: #00d68f !important;
}

.status-badge.bg-warning {
    background-color: rgba(255, 170, 0, 0.1) !important;
    color: #ffaa00 !important;
}

.status-badge.bg-danger {
    background-color: rgba(255, 71, 87, 0.1) !important;
    color: #ff4757 !important;
}

.status-badge.bg-info {
    background-color: rgba(0, 149, 255, 0.1) !important;
    color: #0095ff !important;
}

.status-badge.bg-secondary {
    background-color: rgba(108, 117, 125, 0.1) !important;
    color: #6c757d !important;
}

/* Varianti per ruoli utente */
.status-badge.role-admin {
    background-color: rgba(255, 170, 0, 0.1) !important;
    color: #ffaa00 !important;
}

.status-badge.role-manager {
    background-color: rgba(0, 149, 255, 0.1) !important;
    color: #0095ff !important;
}

.status-badge.role-staff {
    background-color: rgba(0, 214, 143, 0.1) !important;
    color: #00d68f !important;
}

.status-badge.role-delivery {
    background-color: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

/**************************************
 * BADGE DELLA DASHBOARD - PRODOTTI PIÙ VENDUTI
 *
 * Stili specifici per i badge utilizzati nella dashboard e nei componenti
 * come la sezione "prodotti più venduti". Questi badge hanno uno stile
 * arrotondato più elegante e colori coordinati con il design system.
 **************************************/

/* Classe base per i badge della dashboard */
.top-product-badge {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s ease !important;
}

/* Badge primario - rosso coordinato */
.top-product-badge.badge-primary {
    background-color: rgba(255, 90, 95, 0.1) !important;
    color: #ff5a5f !important;
    border: 1px solid rgba(255, 90, 95, 0.2) !important;
}

/* Badge secondario - grigio elegante */
.top-product-badge.badge-secondary {
    background-color: rgba(108, 117, 125, 0.1) !important;
    color: #495057 !important;
    border: 1px solid rgba(108, 117, 125, 0.2) !important;
}

/* Badge accent 1 - blu turchese */
.top-product-badge.badge-accent1 {
    background-color: rgba(54, 209, 220, 0.1) !important;
    color: #36D1DC !important;
    border: 1px solid rgba(54, 209, 220, 0.2) !important;
}

/* Badge accent 2 - arancione */
.top-product-badge.badge-accent2 {
    background-color: rgba(255, 170, 0, 0.1) !important;
    color: #ffaa00 !important;
    border: 1px solid rgba(255, 170, 0, 0.2) !important;
}

/* Badge accent 3 - verde */
.top-product-badge.badge-accent3 {
    background-color: rgba(0, 214, 143, 0.1) !important;
    color: #00d68f !important;
    border: 1px solid rgba(0, 214, 143, 0.2) !important;
}

/* Badge info - blu */
.top-product-badge.badge-info {
    background-color: rgba(0, 149, 255, 0.1) !important;
    color: #0095ff !important;
    border: 1px solid rgba(0, 149, 255, 0.2) !important;
}

/* Badge success - verde */
.top-product-badge.badge-success {
    background-color: rgba(0, 214, 143, 0.1) !important;
    color: #00d68f !important;
    border: 1px solid rgba(0, 214, 143, 0.2) !important;
}

/* Badge warning - giallo/arancione */
.top-product-badge.badge-warning {
    background-color: rgba(255, 170, 0, 0.1) !important;
    color: #e67e00 !important;
    border: 1px solid rgba(255, 170, 0, 0.2) !important;
}

/* Badge danger - rosso */
.top-product-badge.badge-danger {
    background-color: rgba(255, 71, 87, 0.1) !important;
    color: #ff4757 !important;
    border: 1px solid rgba(255, 71, 87, 0.2) !important;
}

/* Effetto hover per tutti i badge della dashboard */
.top-product-badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/**************************************
 * MODALI STANDARDIZZATI
 *
 * Stili standard per i modali dell'applicazione.
 * Utilizzare queste classi per mantenere un aspetto coerente.
 **************************************/

/* Stile base del modal */
.modal-content {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: none !important;
}

/* Modifica dell'overlay del modale per renderlo meno scuro */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Header del modal con sfondo sfumato */
.modal-header-bg {
    height: 70px !important; /* Ridotto da 100px a 70px per uniformare la dimensione all'header del modal dettagli ristorante */
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    border-radius: 10px 10px 0 0 !important;
    z-index: 0 !important;
}

/* Forza il gradiente corretto su tutti i modali */
.modal .modal-header-bg,
#driversManagementModal .modal-header-bg,
#autoAssignModal .modal-header-bg,
#restaurantDetailsModal .modal-header-bg,
#allDriversDistancesModal .modal-header-bg {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
}

/* REGOLA DI FORZA BRUTALE - SOVRASCRIVE TUTTO */
div[id*="Modal"] .modal-header-bg,
.modal[id*="Modal"] .modal-header-bg,
.modal-content .modal-header-bg,
*[class*="modal"] .modal-header-bg {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    background-color: #ff5a5f !important;
    background-image: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
}

/* FORZA ATOMICA - MASSIMA SPECIFICITÀ POSSIBILE */
html body .modal-dialog .modal-content .modal-header-bg,
html body div#driversManagementModal.modal .modal-dialog .modal-content .modal-header-bg,
html body div#autoAssignModal.modal .modal-dialog .modal-content .modal-header-bg,
html body div#allDriversDistancesModal.modal .modal-dialog .modal-content .modal-header-bg,
html body div#restaurantDetailsModal.modal .modal-dialog .modal-content .modal-header-bg {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    background-color: #ff5a5f !important;
    background-image: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    /* Nullifica qualsiasi altro background */
    background-attachment: initial !important;
    background-blend-mode: initial !important;
    background-clip: initial !important;
    background-origin: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    background-size: initial !important;
}

/* Contenitore per il titolo del modal */
.modal-title-container {
    z-index: 1 !important;
    color: #fff !important;
    position: relative !important;
}

/* Icona del modal in un cerchio */
.modal-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    color: white !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.modal-icon-wrapper i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
}

/* Stili per i tab del modal */
.custom-tabs {
    border-bottom: none !important;
    background-color: #f9fafb !important;
    padding: 0.5rem 1rem 0 !important;
}

.custom-tabs .nav-link {
    border: none !important;
    color: #64748b !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.custom-tabs .nav-link:after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    transform: scaleX(0) !important;
    transition: transform 0.3s ease !important;
}

.custom-tabs .nav-link.active {
    color: #ff5a5f !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

.custom-tabs .nav-link.active:after {
    transform: scaleX(1) !important;
}

.custom-tabs .nav-link:hover:not(.active) {
    color: #ff5a5f !important;
}

/* Pulsanti del modale */
.driver-modal-button {
    transition: all 0.3s ease !important;
}

.btn-primary.driver-modal-button {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    border: none !important;
}

.btn-primary.driver-modal-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(255, 90, 95, 0.3) !important;
}

.btn-success.driver-modal-button {
    background: linear-gradient(135deg, #00d68f 0%, #00a2c0 100%) !important;
    border: none !important;
}

.btn-success.driver-modal-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 214, 143, 0.3) !important;
}

.btn-light.driver-modal-button {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    color: #64748b !important;
}

.btn-light.driver-modal-button:hover {
    background: #e9ecef !important;
    color: #495057 !important;
}

@media (max-width: 768px) {
    .custom-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    .modal .modal-footer {
        flex-direction: column-reverse !important;
        gap: 1rem !important;
    }
    
    .modal .modal-footer button {
        width: 100% !important;
    }
}

/**************************************
 * ICONE CIRCOLARI CON SFONDI COLORATI
 *
 * Stili per icone circolari con sfondi colorati tono su tono
 * utilizzate nei titoli delle sezioni.
 **************************************/

/* Icone nei titoli - contenitore circolare base */
.icon-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
}

/* Varianti di dimensione per icon-circle */
.icon-circle-sm {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.7rem !important;
}

.icon-circle-md {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.875rem !important;
}

.icon-circle-lg {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
}

/* Assicura che le icone dentro icon-circle abbiano il colore corretto */
.icon-circle i {
    color: inherit !important;
}

/* Varianti di colore per sfondi chiari */
.bg-primary-light {
    background-color: rgba(255, 90, 95, 0.1) !important;
}

.bg-info-light {
    background-color: rgba(54, 209, 220, 0.1) !important;
}

.bg-warning-light {
    background-color: rgba(255, 170, 0, 0.1) !important;
}

.bg-success-light {
    background-color: rgba(0, 214, 143, 0.1) !important;
}

.bg-secondary-light {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

.bg-danger-light {
    background-color: rgba(255, 71, 87, 0.1) !important;
}

/* Varianti di colore per il testo nelle icone */
.text-primary {
    color: #ff5a5f !important;
}

.text-info {
    color: #36D1DC !important;
}

.text-warning {
    color: #FFA500 !important;
}

.text-success {
    color: #00d68f !important;
}

.text-secondary {
    color: #6c757d !important;
}

.text-danger {
    color: #ff4757 !important;
}

/* Varianti più soft per sfondi */
.bg-primary-soft {
    background-color: rgba(255, 90, 95, 0.1) !important;
}

.bg-info-soft {
    background-color: rgba(54, 209, 220, 0.1) !important;
}

.bg-success-soft {
    background-color: rgba(0, 214, 143, 0.1) !important;
}

.bg-warning-soft {
    background-color: rgba(255, 170, 0, 0.1) !important;
}

.bg-secondary-soft {
    background-color: rgba(108, 117, 125, 0.1) !important;
}

.bg-danger-soft {
    background-color: rgba(255, 71, 87, 0.1) !important;
}

/**************************************
 * STAT CARD - CARD METRICHE
 * 
 * Stili per card di metriche/statistiche con icone ed effetti di animazione
 **************************************/

/* Griglia per metriche */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Forza esattamente 4 colonne uguali */
    gap: 1rem !important;
    margin-bottom: 1rem !important;
}

/* Card statistica base */
.stat-card {
    position: relative !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0.8rem !important; /* Ridotto padding per renderle più compatte */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: row !important; /* Forza layout orizzontale */
    align-items: center !important;
    justify-content: flex-start !important; /* Allinea gli elementi a sinistra */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: none !important;
    width: 100% !important; /* Assicura che la card occupi tutta la larghezza disponibile */
    min-height: 80px !important; /* Altezza fissa per uniformità */
}

/* Pattern di sfondo */
.stat-pattern {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    opacity: 0.1 !important;
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g fill="white"><circle cx="3" cy="3" r="1"/><circle cx="13" cy="13" r="1"/></g></svg>') !important;
    z-index: 0 !important;
}

/* Varianti di colore */
.stat-card-primary {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    color: white !important;
}

.stat-card-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    color: white !important;
}

.stat-card-accent-1 {
    background: linear-gradient(135deg, #36D1DC 0%, #5B86E5 100%) !important;
    color: white !important;
}

.stat-card-accent-2 {
    background: linear-gradient(135deg, #ffaa00 0%, #ff6a00 100%) !important;
    color: white !important;
}

.stat-card-danger {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b6b 100%) !important;
    color: white !important;
}

.stat-card-success {
    background: linear-gradient(135deg, #00d68f 0%, #00a2c0 100%) !important;
    color: white !important;
}

/* Icona della statistica */
.stat-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important; /* Imposta una larghezza minima per mantenere le dimensioni dell'icona */
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin-right: 1rem !important;
}

/* Sovrascrivi esplicitamente i colori delle icone per assicurarci che rimangano bianche */
.stat-card-primary .stat-icon, 
.stat-card-secondary .stat-icon, 
.stat-card-accent-1 .stat-icon, 
.stat-card-accent-2 .stat-icon, 
.stat-card-danger .stat-icon {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

/* Contenuto della statistica */
.stat-content {
    flex: 1 !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.stat-title {
    font-size: 0.8rem !important;
    opacity: 0.8 !important;
    margin-bottom: 0.25rem !important;
}

.stat-value {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
    line-height: 1 !important;
}

.stat-change {
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
}

.stat-change i {
    font-size: 0.7rem !important;
    margin-right: 0.25rem !important;
}

.stat-change.positive {
    color: rgba(255, 255, 255, 0.9) !important;
}

.stat-change.negative {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Animazione float */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

.animate-float {
    animation: float 5s ease-in-out infinite !important;
}

.animate-float:nth-child(1) { animation-delay: 0s !important; }
.animate-float:nth-child(2) { animation-delay: 1s !important; }
.animate-float:nth-child(3) { animation-delay: 2s !important; }
.animate-float:nth-child(4) { animation-delay: 3s !important; }

/* Stili responsive per le card */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/**************************************
 * TITOLI DELLE SEZIONI
 *
 * Stili standardizzati per i titoli delle sezioni all'interno dei modali e cards.
 * Utilizzare con <h6 class="section-title"> con un'icona opzionale all'interno.
 *
 * Esempio:
 * <h6 class="section-title">
 *   <div class="icon-circle bg-primary-light text-primary me-2">
 *     <i class="fas fa-user"></i>
 *   </div>
 *   Titolo della Sezione
 * </h6>
 **************************************/

/* Stile base per i titoli delle sezioni */
.section-title {
    display: flex !important;
    align-items: center !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--color-grey-800) !important;
    margin-bottom: 0.875rem !important;
    line-height: 1.4 !important;
}

/* Variante più piccola per titoli di sezione */
.section-title.section-title-sm {
    font-size: 0.875rem !important;
    margin-bottom: 0.75rem !important;
}

/* Variante più grande per titoli di sezione */
.section-title.section-title-lg {
    font-size: 1.1rem !important;
    margin-bottom: 1rem !important;
}

/* Contenitore per le sezioni di dettaglio */
.detail-section {
    margin-bottom: 1.25rem !important;
}
.detail-section:last-child {
    margin-bottom: 0 !important;
}

/**************************************
 * TABELLE DATI STANDARDIZZATE
 *
 * Stili per le tabelle di dati utilizzate in diverse sezioni dell'applicazione.
 * Includono container, header con filtri, corpo tabella e footer con paginazione.
 *
 * Esempio:
 * <div class="data-table-container">
 *   <div class="data-table-header">
 *     <!-- Filtri e controlli -->
 *   </div>
 *   <div class="data-table-body">
 *     <table class="data-table">
 *       <!-- Contenuto tabella -->
 *     </table>
 *   </div>
 *   <div class="data-table-footer">
 *     <!-- Paginazione e info -->
 *   </div>
 * </div>
 **************************************/

/* Container principale per le tabelle dati */
.data-table-container {
    background-color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

/* Header con filtri e controlli */
.data-table-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px !important;
    border-bottom: 1px solid var(--color-grey-200) !important;
    background-color: #fdfdfd !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Gruppo di filtri nell'header */
.filter-group {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

/* Stile per i filtri individuali */
.filter-container {
    margin-bottom: 0.5rem !important;
}

/* Box di ricerca nei filtri */
.search-box {
    max-width: 350px !important;
    flex-grow: 1 !important;
}

/* Stile migliorato per searchbox e icona lente - basato sulla search bar della pagina ingredienti */
.input-group .input-group-text {
    background-color: white !important;
    border-right: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #adb5bd !important;
}

.input-group .input-group-text i.fa-search {
    font-size: 1rem !important;
    color: #6c757d !important; /* text-muted color */
}

.input-group .form-control {
    /*border-left: none !important;*/
}

/* Manteniamo anche il selettore precedente per retrocompatibilità */
.search-box .input-group-text {
    background-color: white !important;
    border-right: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #adb5bd !important;
}

.search-box .input-group-text i {
    font-size: 1rem !important;
    color: #6c757d !important; /* text-muted color */
}

.search-box .form-control {
    border-left: none !important;
}

/* Corpo della tabella con scroll orizzontale */
.data-table-body {
    overflow-x: auto !important;
}

/* Tabella dati */
.data-table {
    width: 100% !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

.data-table th, 
.data-table td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
}

.data-table th {
    font-weight: 600 !important;
    border-bottom: 1px solid var(--color-grey-200) !important;
    background-color: #f9fafb !important;
    color: #64748b !important;
    white-space: nowrap !important;
}

.data-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    white-space: nowrap !important; /* Impedisce che il testo vada a capo */
}

.data-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Stili per righe con hover */
.data-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Stili per righe attive o selezionate */
.data-table tr.active {
    background-color: rgba(var(--primary-color-rgb), 0.05) !important;
}

/* Footer con paginazione e info */
.data-table-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background-color: #fdfdfd !important;
    border-top: 1px solid var(--color-grey-200) !important;
}

.data-table-footer .pagination {
    margin-bottom: 0 !important;
}

/* Stile per le celle con valori monetari */
.data-table .cell-money {
    font-weight: 600 !important;
    text-align: right !important;
}

/* Stile per le celle con valori numerici */
.data-table .cell-number {
    text-align: right !important;
}

/* Stile per le celle con valori data/ora */
.data-table .cell-datetime {
    white-space: nowrap !important;
}

/* Stile per le righe espandibili */
.data-table tr.expandable {
    cursor: pointer !important;
}

.data-table tr.expandable:hover {
    background-color: rgba(var(--primary-color-rgb), 0.05) !important;
}

/* Stile per il contenuto espanso */
.data-table tr.expanded-content {
    background-color: rgba(var(--color-grey-rgb), 0.03) !important;
    display: none; /* Nascosto di default, modificato via JS */
}

.data-table tr.expanded-content > td {
    padding: 0 !important;
}

.data-table .expanded-inner {
    padding: 15px !important;
}

/* Stile per le tabelle vuote */
.data-table-empty {
    text-align: center !important;
    padding: 2rem 0 !important;
    color: var(--color-grey-600) !important;
}

.data-table-empty i {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
    color: var(--color-grey-400) !important;
}

/* Stili per l'autocompletamento nelle ricerche */
.autocomplete-results {
    position: absolute !important;
    z-index: 1050 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    background-color: white !important;
    border: 1px solid #ced4da !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
    max-height: 130px !important;
    overflow-y: auto !important;
    display: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    font-size: 0.85rem !important;
}

.search-container {
    position: relative !important;
}

.autocomplete-item {
    padding: 6px 10px !important;
    cursor: pointer !important;
    border-bottom: 1px solid #f1f1f1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.autocomplete-item:hover {
    background-color: rgba(var(--primary-color-rgb), 0.05) !important;
}

/* Media queries per responsività */
@media (max-width: 992px) {
    .data-table-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .data-table-header > div:first-child {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .search-box {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .data-table-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .filter-group {
        width: 100% !important;
    }
}

.stat-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1) !important;
}

/**************************************
 * OVERRIDE GLOBALI PER BOOTSTRAP
 *
 * Questi override garantiscono che tutti i modali
 * utilizzino il gradiente personalizzato invece 
 * dei colori Bootstrap di default
 **************************************/

/* Override globale per tutti gli header dei modali Bootstrap */
.modal .modal-header.bg-primary,
.modal-header.bg-primary,
.modal-header[style*="background-color: var(--bs-primary)"],
.modal-header[style*="background: var(--bs-primary)"] {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    color: white !important;
    border-bottom: none !important;
}

/* Override per modali con sfondo inline style */
.modal-header[style*="background"] {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
}

/* Override specifico per header con classi Bootstrap text */
.modal .modal-header.text-white {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    color: white !important;
}

/* Classe helper per forzare il gradiente standard */
.modal-header-force-gradient,
.modal-header.force-gradient {
    background: linear-gradient(135deg, #ff5a5f 0%, #ff8f6b 100%) !important;
    color: white !important;
    border-bottom: none !important;
}