.navbar[data-bs-theme=dark] {
    --tblr-navbar-bg: #00008B;
    --tblr-navbar-border-color: #00008B;
}

.semaforo {
    background-color: #333;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.luce {
    display: block;
    width: 80%;
    height: 100%;
    background-color: #111; /* Spento */
    text-align: center;
    font-weight: bold;
    color: white;
}

.rosso {
    background-color: var(--tblr-danger-darken);
}

.giallo {
    background-color: var(--tblr-warning-darken);
}

.verde {
    background-color: var(--tblr-success-darken);
}

.text-click {
    cursor: pointer;
    color: var(--tblr-body-color);
    font-weight: bold;
}

.align-row {
    display: flex;
    align-items: center;
}

.uti {
    border-top: 2px solid var(--tblr-body-color);
}

tr.grigio {
    background-color: var(--tblr-bg-surface-tertiary);
}

tr.bianco {
    /* Nessuno stile specifico */
}

.mrngrigio {
    font-weight: bold;
}

.mrnverde {
    font-weight: bold;
    color: #5cd65c;
}

.form-viaggio-closed {
    display: none;
}

@media (min-width: 992px) {
    .form-viaggio {
        display: block;
    }
    .form-viaggio-closed {
        display: none;
    }
    body.sidebar-toggled-closed .form-viaggio {
        display: none;
    }
    body.sidebar-toggled-closed .form-viaggio-closed {
        display: block;
    }
}

/* --- SEZIONE CONSOLIDATA E OTTIMIZZATA PER IL SIDEPANEL --- */

.sidepanel {
    height: 100%; /* L'altezza piena */
    width: 0; /* Larghezza 0 per nasconderlo (stato iniziale) */
    position: fixed; /* Rimane fisso quando si scorre la pagina */
    z-index: 1050; /* Z-index alto per essere sopra gli altri elementi */
    top: 0;
    right: 0; /* Posizionalo a destra */
    background-color: #f8f9fa; /* Colore di sfondo leggero */
    overflow-x: hidden; /* Disabilita lo scroll orizzontale */
    transition: width 0.5s; /* Animazione di transizione per la larghezza */
    padding-top: 60px; /* Spazio per il bottone di chiusura */
    border-left: 1px solid #dee2e6; /* Un bordo sottile a sinistra */
    box-shadow: -5px 0px 10px rgba(0,0,0,0.1); /* Ombra per profondità */
}

.sidepanel-content {
    padding: 20px;
}

.sidepanel .closebtn {
    position: absolute;
    top: 0;
    /* Posizionamento fisso per desktop: a sinistra del pannello, con margine. */
    left: 25px;
    font-size: 36px;
    margin-left: 50px;
    text-decoration: none;
    color: #818181;
    transition: 0.3s;
}

.sidepanel .closebtn:hover {
    color: #000;
}

/* Stile per quando il sidepanel è APERTO */
.sidepanel.open {
    max-width: 600px; /* Larghezza massima su desktop */
    width: 90vw; /* Larghezza fluida (90% della viewport width) */
}

/* Quando il sidepanel è aperto, si sovrappone al contenuto, NON lo sposta */
body.sidepanel-open {
    margin-right: 0; /* Annulla qualsiasi spostamento del body */
    overflow: hidden; /* Impedisce lo scroll del contenuto sottostante */
    transition: none; /* Non c'è più bisogno di transizione sul margin-right */
}

/* Media Query per schermi molto piccoli (mobile) */
@media (max-width: 576px) {
    .sidepanel.open {
        width: 100vw; /* Occupa l'intera larghezza dello schermo del dispositivo */
        max-width: 100vw; /* Assicurati che non superi mai la larghezza dello schermo */
        padding-top: 15px; /* Riduci il padding superiore per mobile */
    }
    .sidepanel .closebtn {
        right: 15px; /* Spostato a destra per mobile */
        left: auto; /* Annulla il 'left' per desktop */
        font-size: 30px;
        margin-left: 0; /* Annulla il 'margin-left' per desktop */
    }
    .sidepanel-content {
        padding: 10px; /* Riduci il padding interno su mobile */
    }
    /* body.sidepanel-open non ha bisogno di modifiche qui, è già impostato a margin-right: 0 */
}

/* --- FINE SEZIONE CONSOLIDATA E OTTIMIZZATA PER IL SIDEPANEL --- */


/* Stile per il titolo del sidepanel, per staccarlo un po' */
#sidepanel-title {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

/* Stili per le intestazioni di sezione della form */
.form-section-title {
    margin-top: 25px;
    margin-bottom: 10px;
    color: #4a6c8a;
    font-size: 1.1em;
    font-weight: bold;
}

/* Stili per il divisore visivo tra le sezioni */
.divider {
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    margin-top: 5px;
}

/* Stile per il separatore HR prima dei bottoni finali */
hr.form-separator {
    border: none;
    border-top: 1px solid #ddd;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* --- STILI CONSOLIDATI E OTTIMIZZATI PER I DROPDOWN E I BOTTONI --- */

/* Assicurati che il contenitore del dropdown sia posizionato correttamente */
.dropdown {
    position: relative !important; /* Forza la posizione relativa per i dropdown */
    display: inline-block !important; /* Se il bottone di attivazione è inline */
}

/* Regola specifica per i dropdown all'interno delle celle di tabella */
td .dropdown {
    position: relative !important; /* Riconferma per le celle di tabella */
    /* Se la cella td fosse troppo stretta per il bottone, puoi aggiustare min-width qui */
    /* min-width: 40px; */
}

/* Stili per il dropdown menu */
/* Aumentiamo la specificità e forziamo il posizionamento */
.table .dropdown .dropdown-menu { /* Specificità maggiore: targettizza dropdown-menu all'interno di un dropdown dentro una tabella */
    min-width: 150px !important; 
    max-width: calc(100vw - 40px) !important; /* Larghezza massima con margini */
    box-sizing: border-box !important; 
    border-radius: 0.25rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
    padding: 0.5rem 0 !important;
    font-size: 0.875rem !important;
    overflow: hidden !important; /* Forza l'overflow nascosto per il menu */
    position: absolute !important; /* Forza il posizionamento assoluto */
    z-index: 1000 !important; /* Forza lo z-index per essere sopra tutto */
    background-color: #fff !important; 

    /* POSIZIONAMENTO PER DESKTOP: Allineato al bordo destro del genitore */
    left: auto !important; /* Assicurati che left sia auto per non interferire con right */
    right: 0 !important; /* Forza l'allineamento del bordo destro del menu al bordo destro del genitore */
    transform: none !important; /* Annulla qualsiasi trasformazione che potrebbe spostarlo */
}

/* Stili per le singole voci del dropdown */
.table .dropdown .dropdown-item { /* Specificità maggiore per gli item nella tabella */
    display: block !important;
    padding: 0.5rem 1rem !important;
    clear: both !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* ESTREMAMENTE IMPORTANTE: Forza il testo su una riga */
    overflow: hidden !important; /* Nasconde il testo che eccede */
    text-overflow: ellipsis !important; /* Aggiunge i puntini di sospensione (...) */
    background-color: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e2125 !important;
    background-color: #e9ecef !important;
}

/* Stili generali per tutti i pulsanti */
.btn {
    display: inline-flex; /* Usa flexbox per allineare contenuto e icona */
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto */
    padding: 8px 15px; /* Padding generico per bottoni con testo */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    border: 1px solid #ccc; /* Aggiungi un bordo per chiarezza visiva */
    white-space: nowrap; /* Evita che il testo vada a capo nel bottone */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Stili per bottoni con solo icona (es. il bottone con i puntini) */
.btn-icon {
    padding: 6px; /* Padding ridotto per bottoni con solo icona */
    width: 32px; /* Larghezza fissa per renderli quadrati */
    height: 32px; /* Altezza fissa per renderli quadrati */
    flex-shrink: 0; /* Evita che si rimpicciolisca troppo */
    border-radius: 4px; /* O 50% per un bottone rotondo */
}

/* Stili per le icone all'interno dei bottoni (se usi SVG o font icons) */
.btn-icon .icon {
    width: 18px; /* Dimensione standard per le icone */
    height: 18px;
    stroke: currentColor; /* Colore dell'icona basato sul colore del testo del bottone */
    stroke-width: 2;
    fill: none;
}

/* Stili per il dropdown-toggle (il bottone che apre il menu a tendina) */
.dropdown-toggle {
    padding-right: 1.25em; /* Spazio per la freccia a discesa */
    position: relative;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute; /* Posiziona la freccia in modo assoluto */
    right: 8px; /* Spostala leggermente a sinistra dal bordo */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
}

/* Stili per un elemento specifico come i puntini e la freccia (se applicabile) */
.btn-dots-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* O una larghezza sufficiente per i puntini e la freccia */
    height: 32px;
    padding: 4px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
    color: #495057;
    cursor: pointer;
    flex-shrink: 0;
}
.btn-dots-arrow:hover {
    background-color: #e9ecef;
}

/* Media query per la responsività dei bottoni e dropdown su schermi piccoli */
@media (max-width: 576px) {
    /* Il dropdown menu prende la larghezza quasi intera dello schermo */
    .dropdown-menu {
        min-width: 150px;
        width: calc(100vw - 30px); /* Prende la larghezza completa meno 15px per lato */
        left: 15px !important; /* Posiziona dal bordo sinistro */
        right: 15px !important; /* Posiziona dal bordo destro */
        transform: none !important; /* Annulla qualsiasi trasformazione */
    }

    /* .dropdown-menu-end su mobile */
    .dropdown-menu.dropdown-menu-end {
        left: 15px !important; /* Forza l'allineamento a sinistra con margine */
        right: auto !important; /* Rimuovi l'allineamento a destra */
    }

    .btn {
        font-size: 0.8em;
        padding: 6px 10px;
    }
    .btn-icon {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
    .btn-icon .icon {
        width: 16px;
        height: 16px;
    }
    .dropdown-toggle::after {
        right: 5px;
    }
}

/* Assicurati che il contenitore del dropdown sia posizionato correttamente */
.dropdown {
    position: relative !important; /* Forza la posizione relativa per il contesto del posizionamento assoluto */
    display: inline-block !important;
}

/* Regola specifica per i dropdown all'interno delle celle di tabella */
td .dropdown {
    position: relative !important; /* Riconferma per le celle di tabella */
    /* Non è necessario min-width/max-width qui per il dropdown */
}

/* Stili per il dropdown menu */
/* Aumentiamo la specificità e forziamo il posizionamento */
.table .dropdown .dropdown-menu { /* Specificità maggiore: targettizza dropdown-menu all'interno di un dropdown dentro una tabella */
    min-width: 150px !important; 
    /* La larghezza massima deve essere relativa alla viewport, non al 100% di un genitore stretto */
    max-width: calc(100vw - 40px) !important; /* Larghezza massima con margini da entrambi i lati */
    box-sizing: border-box !important; 
    border-radius: 0.25rem !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
    padding: 0.5rem 0 !important;
    font-size: 0.875rem !important;
    overflow: hidden !important; /* Forza l'overflow nascosto per il menu */
    position: absolute !important; /* Forza il posizionamento assoluto */
    z-index: 1000 !important; /* Forza lo z-index per essere sopra tutto */
    background-color: #fff !important; 

    /* POSIZIONAMENTO PER DESKTOP: Forza l'allineamento a destra del suo attivatore */
    left: auto !important; /* Assicurati che left sia auto per non interferire con right */
    right: 0 !important; /* Forza l'allineamento del bordo destro del menu al bordo destro del genitore (.dropdown) */
    transform: none !important; /* Annulla qualsiasi trasformazione (come translate3d) da Popper */
    top: auto !important; /* Lascia che Popper gestisca il posizionamento verticale se vuoi, altrimenti imposta un valore */
    bottom: auto !important; /* Lascia che Popper gestisca il posizionamento verticale se vuoi, altrimenti imposta un valore */
    margin: 0 !important; /* Rimuovi qualsiasi margine che Popper potrebbe aggiungere */
}

/* Stili per le singole voci del dropdown */
.table .dropdown .dropdown-item { /* Specificità maggiore per gli item nella tabella */
    display: block !important;
    padding: 0.5rem 1rem !important;
    clear: both !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* ESTREMAMENTE IMPORTANTE: Forza il testo su una riga */
    overflow: hidden !important; /* Nasconde il testo che eccede */
    text-overflow: ellipsis !important; /* Aggiunge i puntini di sospensione (...) */
    background-color: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e2125 !important;
    background-color: #e9ecef !important;
}

/* Stili generali per tutti i pulsanti */
.btn {
    display: inline-flex; /* Usa flexbox per allineare contenuto e icona */
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto */
    padding: 8px 15px; /* Padding generico per bottoni con testo */
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    border: 1px solid #ccc; /* Aggiungi un bordo per chiarezza visiva */
    white-space: nowrap; /* Evita che il testo vada a capo nel bottone */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Stili per bottoni con solo icona (es. il bottone con i puntini) */
.btn-icon {
    padding: 6px; /* Padding ridotto per bottoni con solo icona */
    width: 32px; /* Larghezza fissa per renderli quadrati */
    height: 32px; /* Altezza fissa per renderli quadrati */
    flex-shrink: 0; /* Evita che si rimpicciolisca troppo */
    border-radius: 4px; /* O 50% per un bottone rotondo */
}

/* Stili per le icone all'interno dei bottoni (se usi SVG o font icons) */
.btn-icon .icon {
    width: 18px; /* Dimensione standard per le icone */
    height: 18px;
    stroke: currentColor; /* Colore dell'icona basato sul colore del testo del bottone */
    stroke-width: 2;
    fill: none;
}

/* Stili per l'attivatore del dropdown con icona (il tuo .link-secondary con ti ti-dots) */
.dropdown .link-secondary .ti { /* Specificità per l'icona dentro l'attivatore del dropdown */
    font-size: 1.2em; /* Puoi regolare la dimensione dell'icona qui */
    vertical-align: middle; /* Allinea verticalmente l'icona */
}


/* Stili per il dropdown-toggle (il bottone che apre il menu a tendina) */
/* Il tuo <a> ha role="button" ma non class="dropdown-toggle" né "btn". 
   Se vuoi che sembri un bottone, dovresti aggiungere "btn btn-icon dropdown-toggle" al tuo <a>
   oppure usare un vero <button>. */
.dropdown-toggle {
    padding-right: 1.25em; /* Spazio per la freccia a discesa */
    position: relative;
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    position: absolute; /* Posiziona la freccia in modo assoluto */
    right: 8px; /* Spostala leggermente a sinistra dal bordo */
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
}

/* Stili per un elemento specifico come i puntini e la freccia (se applicabile) */
.btn-dots-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* O una larghezza sufficiente per i puntini e la freccia */
    height: 32px;
    padding: 4px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    background-color: #f8f9fa;
    color: #495057;
    cursor: pointer;
    flex-shrink: 0;
}
.btn-dots-arrow:hover {
    background-color: #e9ecef;
}

/* Media query per la responsività dei bottoni e dropdown su schermi piccoli */
@media (max-width: 576px) {
    .dropdown-menu { /* Questo si applica sia a .dropdown-menu che a .dropdown-menu-end */
        min-width: 150px;
        width: calc(100vw - 30px); /* Prende la larghezza completa meno 15px per lato */
        left: 15px !important; /* Posiziona dal bordo sinistro */
        right: 15px !important; /* Posiziona dal bordo destro */
        transform: none !important;
    }

    .dropdown-menu.dropdown-menu-end {
        /* Non ha bisogno di regole aggiuntive qui, la regola .dropdown-menu lo gestisce per mobile */
    }

    .btn {
        font-size: 0.8em;
        padding: 6px 10px;
    }
    .btn-icon {
        width: 28px;
        height: 28px;
        padding: 4px;
    }
    .btn-icon .icon {
        width: 16px;
        height: 16px;
    }
    .dropdown-toggle::after {
        right: 5px;
    }
}

/* Esempio di CSS per is-invalid e invalid-feedback (già presente in Bootstrap) */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545; /* Rosso */
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
    display: none; /* Di default nascosto */
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545; /* Rosso */
}

/* Quando l'input ha la classe is-invalid, mostra il feedback */
.form-control.is-invalid + .invalid-feedback,
.form-select.is-invalid + .invalid-feedback {
    display: block;
}

#select-ruoli {
  background-color: white !important;
  z-index: 9999 !important;
}