body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}



/* Header Styling */
.dashboard-header {
    background-color: #FFFFFF; /* Bianco */
    padding: 0px 0px; /* Margini interni */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 35px;
}

/* Stile per contenitore dei pulsanti */
.button-container {
   display: flex;
   gap: 22px;
   align-items: center;
}

/* Pulsante Carica Esame dentro l'header */
.btn-add-header {
   all: unset; /* Resetta lo stile del pulsante */
   color: #0c0c39;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   text-decoration: none;
   transition: color 0.3s;
}

.btn-add-header:hover {
    color: #B22222; /* Grigio scuro al passaggio del mouse */
}

.btn-admin-panel-header {
    all: unset; /* Resetta lo stile */
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}

.btn-admin-panel-header:hover {
    color: #B22222; /* Grigio scuro al passaggio del mouse */
}

/* Pulsante Dashboard */
.btn-dashboard-header {
    all: unset; /* Resetta lo stile */
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}

.btn-dashboard-header:hover {
    color: #B22222; /* Grigio scuro al passaggio del mouse */
}


/* Pulsante archivio */
.btn-archive-header {
    all: unset; /* Resetta lo stile */
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}

.btn-archive-header:hover {
    color: #B22222; /* Grigio scuro al passaggio del mouse */
}

/* Pulsante account */
.btn-account-header {
    all: unset;
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s;
}

.btn-account-header:hover {
    color: #B22222;
}

.logout-link {
    all: unset; /* Resetta lo stile del bottone */
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin-right: 20px; /* Spazio dal bordo destro */
    transition: color 0.3s;
}

.logout-link:hover {
    color: #B22222; /* Grigio scuro al passaggio del mouse */
}


.logo-section {
    display: flex;
    align-items: center; /* Allinea verticalmente */
    margin-left: 0px; /* Spazio dal bordo sinistro */
}

.dashboard-logo {
    max-width: 35px; /* Limita la larghezza del logo */
    height: auto; /* Mantiene proporzioni corrette */
    margin-right: 5px; /* Spazio tra logo e testo */
    margin-left: 5px;
}

.site-title {
    font-size: 25px;
    color: #B22222;
    text-shadow: none;
    font-weight: bold;
    margin-top: 5px;
}




/* Contenuto della dashboard */
.dashboard-content {
    margin-top: 35px; /* Evita la sovrapposizione con l'header */
    padding: 20px;
}

/* POPUP styling */
#popup-container {
    position: fixed; /* Fisso per seguire lo scroll */
    top: 15px; /* Posizionamento dall'alto */
    right: 15px; /* Posizionamento dal lato destro */
    z-index: 1050; /* Davanti a tutti gli altri elementi */
    width: 300px; /* Larghezza del contenitore */
}

/* Stile di base di ogni singolo popup */
.popup {
    color: black;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.45);
    animation: overlayFadeIn 0.2s ease;
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.popup .popup-content {
    animation: popupScaleIn 0.22s ease;
}

@keyframes popupScaleIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


.popup-content {
    background-color: #fff;
    width: 50%;
    padding: 20px;
    position: fixed; /* Cambiato da relative a fixed per bloccare il popup al centro */
    top: 50%; /* Posiziona il centro del popup in verticale */
    left: 50%; /* Posiziona il centro del popup in orizzontale */
    transform: translate(-50%, -50%); /* Centra esattamente il popup */
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-height: 80%; /* Dimensione massima */
    overflow-y: auto; /* Barra di scorrimento verticale */
    scrollbar-width: thin; /* Renderizza una barra sottile */
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.3); /* Colore pollice e canale */
}


/* Animazione di apparizione */
@keyframes slideIn {
    from {
        transform: translateX(100%); /* Parte fuori dalla schermata */
        opacity: 0; /* Invisibile */
    }
    to {
        transform: translateX(0); /* Completa entrata */
        opacity: 0.9; /* Ritorna visibile */
    }
}



/* Diversi tipi di messaggi */
.alert-success {
    background-color: #fff; /* Verde per successo */
}

.alert-danger {
    background-color: #fff; /* Rosso per errore */
}

.alert-warning {
    background-color: #fff; /* Giallo per avvisi */
    color: #B22222; /* Testo scuro */
}

.alert-info {
    background-color: #fff; /* Blu per messaggi informativi */
}

.popup-messages {
    position: fixed;
    top: 40px;
    right: 10px;
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.popup-messages .alert {
    padding: 16px;
    font-size: 14px;
    color: #333;
}

.popup-messages .alert-success {
    background-color: #fff;
    border-left: 5px solid #B22222;
}

.popup-messages .alert-danger {
    background-color: #fff;
    border-left: 5px solid #B22222;
}

.popup-messages .alert-warning {
    background-color: #fff;
    border-left: 5px solid #B22222;
}

.popup-messages .alert-info {
    background-color: #fff;
    border-left: 5px solid #B22222;
}




/* Personalizzazione della barra di scorrimento solo per il contenuto del popup */
.popup-content::-webkit-scrollbar {
    width: 10px; /* Larghezza della barra */
    background-color: rgba(255, 255, 255, 0.1); /* Colore di sfondo della barra */
    border-radius: 5px; /* Angoli arrotondati */
}

.popup-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5); /* Colore del "pollice" (parte mobile) */
    border-radius: 5px; /* Arrotondamento del pollice */
    border: 2px solid black; /* Aggiunge un bordo per creare un aspetto fluttuante */
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.8); /* Colore del pollice al passaggio del mouse */
}

/* Alternativa per il canale (track della scrollbar) */
.popup-content::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.3); /* Sfondo del canale */
    border-radius: 5px;
}

/* Stile per il pulsante chiudi (X) */
.popup-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: darkred;
    cursor: pointer;

}

.popup-close:hover {
    color: red;
}



/* Stile della tabella */
.dashboard-table {
    width: 100%; /* Occupare larghezza piena */
    border-collapse: collapse; /* Rimuove spazio tra bordi */
    margin: 20px 0; /* Margine tra tabella e testo */
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333; /* Testo grigio scuro */
}

/* Intestazioni della tabella */
.dashboard-table th {
    background-color: #f4f4f4; /* Colore di sfondo grigio chiaro */
    color: #555; /* Testo grigio medio */
    text-align: left; /* Allinea testo a sinistra */
    padding: 12px 15px; /* Spaziatura interna */
    border-bottom: 2px solid #ddd; /* Bordi delle intestazioni */
    font-weight: bold;
}

/* Celle della tabella */
.dashboard-table td {
    border-bottom: 1px solid #ddd; /* Linea divisoria tra righe */
    padding: 12px 15px; /* Spaziatura interna */
    text-align: left; /* Allineamento testo */
    vertical-align: middle; /* Allinea contenuto verticalmente */
}

/* Stile righe alternate */
.dashboard-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Alterna sfondo per migliorare leggibilità */
}

.dashboard-table tr:nth-child(odd) {
    background-color: #ffffff; /* Sfondo righe dispari */
}

/* Stile per riga al passaggio del mouse */
.dashboard-table tr:hover {
    background-color: #e9f4fb; /* Azzurro chiaro per evidenziare */
    transition: background-color 0.2s ease-in-out;
}

/* Per celle vuote/assenza di contenuti */
.dashboard-table td[colspan] {
    text-align: center; /* Centra testo */
    color: #888; /* Testo grigio chiaro */
    font-style: italic;
}

/* Rendere i bordi arrotondati nella tabella */
.dashboard-table {
    border-radius: 8px; /* Arrotonda i bordi */
    overflow: hidden; /* Taglia angoli sporgenti */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leggera ombra */
}



/* Aumentare spazio tra righe */
.dashboard-table tr {
    height: 50px; /* Effetto più ampio tra righe */
}

/* Stile del timer nella tabella */
.dashboard-table .timer {
    background-color: #e7f3fe; /* Sfondo blu chiaro */
    color: #0066cc; /* Testo blu scuro */
    font-weight: bold;
    padding: 5px 10px; /* Piccolo padding interno */
    border-radius: 5px; /* Arrotonda il blocco */
    display: inline-block; /* Rendere blocco inline */
}

/* Stati della tabella */
.dashboard-table .status-in-attesa {
    color: #ffc107; /* Giallo */
    font-weight: bold;
}

.dashboard-table .status-scaduto {
    color: #dc3545; /* Rosso accesso per avvisi */
    font-weight: bold;
}

.dashboard-table .status-refertato {
    color: #28a745; /* Verde successo */
    font-weight: bold;
}

/* Icone accanto */
.dashboard-table .status-icon {
    margin-right: 5px; /* Spaziatura accanto al testo */
    vertical-align: middle; /* Centra insieme al testo */
}

/* Stile del pulsante "Dettaglio" */
.detail-button {
    background-color: #B22222; /* Verde */
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    border-radius: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: background-color 0.3s, transform 0.2s;
}

/* Hover effetto */
.detail-button:hover {
    background-color: #0c0c39;
    transform: scale(1.05); /* Leggero ingrandimento */
}


/* Tooltip (sovraimpressione) per il pulsante Dettaglio */
.detail-button::after {
    content: "Dettaglio"; /* Testo del tooltip */
    position: absolute; /* Posizionamento assoluto rispetto al pulsante */
    bottom: calc(100% + 5px); /* Posiziona sopra il pulsante */
    left: 50%; /* Allinea il tooltip al centro del pulsante */
    transform: translateX(-50%); /* Centra perfettamente */
    background-color: #333; /* Sfondo del tooltip (nero scuro) */
    color: white; /* Colore del testo */
    font-size: 12px; /* Dimensione del testo */
    padding: 5px 8px; /* Spazi interni del tooltip */
    border-radius: 5px; /* Angoli arrotondati */
    white-space: nowrap; /* Evita il testo a capo */
    opacity: 0; /* Tooltip nascosto di default */
    pointer-events: none; /* Non interagisce con il mouse */
    transition: opacity 0.2s ease-in-out; /* Animazione di visibilità */
    z-index: 10; /* Sopra gli altri elementi */
}

/* Mostra il tooltip quando si passa sopra */
.detail-button:hover::after {
    opacity: 1; /* Tooltip visibile su hover */
}

.archive-button {
    background-color: #B22222;
    color: white;
    border: none;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    transition: background-color 0.3s, transform 0.2s;
    box-sizing: border-box; /* Assicura che margini e bordi siano inclusi */
}

/* Stile dell'icona (cartella) */
.archive-button::before {
    content: "\f07b"; /* Codice per icona FA folder */
    font-family: "Font Awesome 5 Free"; /* Font-family di FontAwesome */
    font-weight: 900; /* Imposta il peso necessario per l'icona */
    font-size: 16px; /* Dimensione dell'icona */
    color: white; /* Colore bianco dell'icona */
    display: block; /* Evita spazi indesiderati */
    line-height: 1; /* Mantiene proporzioni compatte */
}

/* Tooltip (sovraimpressione) */
.archive-button::after {
    content: "Archivia"; /* Testo del tooltip */
    position: absolute; /* Posizionato sopra il pulsante */
    bottom: calc(100% + 5px); /* Sopra il pulsante */
    left: 50%; /* Centrato orizzontalmente */
    transform: translateX(-50%); /* Perfetto centraggio del tooltip */
    background-color: #333; /* Sfondo scuro */
    color: white; /* Testo bianco */
    font-size: 12px; /* Tooltip più piccolo */
    padding: 5px 10px; /* Padding tooltip */
    border-radius: 5px; /* Angoli arrotondati */
    white-space: nowrap; /* Evita il testo a capo */
    opacity: 0; /* Tooltip invisibile di default */
    pointer-events: none; /* Non cliccabile */
    transition: opacity 0.2s ease-in-out; /* Animazione apparizione */
    z-index: 10; /* Mostra il tooltip sopra altri elementi */
}

/* Hover del pulsante */
.archive-button:hover {
    background-color: #0c0c39; /* Cambia lo sfondo su hover */
    transform: scale(1.05); /* Leggero effetto ingrandimento */
}

/* Hover del tooltip */
.archive-button:hover::after {
    opacity: 1; /* Il tooltip diventa visibile */
}

.download-button {
    background-color: #B22222; /* Colore sfondo */
    color: white; /* Colore testo/icona */
    border: none; /* Nessun bordo */
    padding: 10px 15px; /* Stesso padding del detail-button */
    font-size: 18px; /* Stessa dimensione del testo */
    text-align: center; /* Centra testo/icona */
    border-radius: 5px; /* Angoli arrotondati */
    cursor: pointer; /* Puntatore cliccabile */
    transition: background-color 0.3s, transform 0.2s; /* Animazione hover */
    display: inline-flex; /* Per centrare icona e testo */
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box; /* Assicura che margini e bordi siano inclusi */
}

.download-button:hover {
    background-color: #0c0c39; /* Cambia il colore sul passaggio del mouse */
    transform: scale(1.1); /* Ingrandimento leggero sull'hover */
}

.download-button-container {
    position: relative; /* Imposta un contesto per il tooltip */
}

/* Tooltip per il pulsante "Download" */
.download-button::after {
    content: "Scarica Referto"; /* Testo del tooltip */
    position: absolute;
    bottom: calc(100% + 5px); /* Posizionato sopra il pulsante */
    right: 0;
    background-color: #333; /* Sfondo del tooltip */
    color: white; /* Colore del testo */
    font-size: 12px; /* Dimensione del testo */
    padding: 5px 10px; /* Spaziatura interna */
    border-radius: 5px; /* Angoli arrotondati */
    white-space: nowrap; /* FORZA tutto il testo su una sola riga */
    text-align: left; /* Allinea il testo */
    max-width: none; /* Rimuove limite alla larghezza */
    word-break: normal; /* Evita di spezzare le parole */
    overflow: hidden; /* Non mostra nulla oltre i limiti del box */
    text-overflow: ellipsis; /* Aggiungi i puntini di sospensione in caso di overflow */
    opacity: 0; /* Invisibile di default */
    pointer-events: none; /* Tooltip non cliccabile */
    z-index: 1000; /* Priorità sopra altri elementi */
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ombreggiatura */
}

/* Mostra il tooltip quando si passa col mouse */
.download-button:hover::after {
    opacity: 1; /* Lo rende visibile */
}


.dashboard-table td:last-child, /* Colonna dell'ultimo bottone */
.dashboard-table td:nth-last-child(2), /* Penultima colonna */
.dashboard-table td:nth-last-child(3) { /* Terzultima colonna */
    text-align: center; /* Centra il contenuto */
    width: 10px; /* Dimensione specifica per la colonna */
    padding: 5px; /* Riduce il padding */
}


.dashboard-table .detail-button,
.dashboard-table .archive-button,
.dashboard-table .download-button {
    margin: 0 auto; /* Centrare i pulsanti nelle celle */
    display: block;
    padding: 5px 10px; /* Riduci padding interno per risparmiare spazio */
    position: relative; /* Imposta la base relativa per il tooltip */
}
/* Stile base per il pulsante "btn btn-primary" */
.btn-primary {
    display: inline-block; /* Rende il pulsante un blocco inline */
    background-color: #B22222; /* Blu primario */
    color: #ffffff; /* Testo in bianco */
    font-size: 16px; /* Dimensione del testo */
    font-weight: bold;
    padding: 10px 20px; /* Spaziatura interna */
    border: none; /* Rimuove il bordo di default */
    border-radius: 5px; /* Angoli arrotondati */
    text-align: center; /* Centra il testo */
    text-decoration: none; /* Rimuove la sottolineatura per i link */
    cursor: pointer; /* Mostra il puntatore cliccabile */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leggera ombra */
    transition: all 0.3s ease-in-out; /* Animazioni morbide */
}

.collapsible {
    background-color: #f1f1f1;
    color: #333;
    cursor: pointer;
    padding: 10px 15px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    width: 100%;
    transition: background-color 0.3s;
}

.collapsible:hover {
    background-color: #ddd;
}

.collapsible + .content {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    border-top: none;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* ── MODAL CREDITI ──────────────────────────────────────────────────────── */

.btn-crediti-header {
    all: unset;
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.btn-crediti-header:hover {
    color: #B22222;
}

.crediti-content {
    width: 380px;
    max-width: 90vw;
    padding: 28px 28px 20px;
}

.crediti-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 12px;
}

.crediti-header h2 {
    margin: 0;
    font-size: 20px;
    color: #0c0c39;
}

.crediti-icon {
    font-size: 22px;
    color: #B22222;
}

.crediti-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.credito-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}

.credito-tipo {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.credito-badge {
    font-size: 15px;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 20px;
    min-width: 36px;
    text-align: center;
}

.badge-ok {
    background-color: #e6f4ea;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.badge-zero {
    background-color: #fdecea;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.crediti-empty {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 10px 0;
}

.crediti-info {
    background: #f0f4ff;
    border-left: 4px solid #0c0c39;
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
}

.crediti-info i {
    color: #0c0c39;
    margin-right: 6px;
}

.crediti-acquista {
    margin-top: 18px;
    text-align: center;
}

.btn-acquista-crediti {
    display: inline-block;
    background-color: #0c0c39;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-acquista-crediti:hover {
    background-color: #1a1a5e;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.btn-acquista-crediti:active {
    transform: translateY(0);
}


/* ── BOZZE BADGE (navbar) ───────────────────────────────────────────────── */

.btn-bozze-header {
    all: unset;
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-bozze-header:hover { color: #B22222; }

.bozze-count-badge {
    background: #B22222;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ── BOZZE DROPDOWN ─────────────────────────────────────────────────────── */

.bozze-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 2000;
    overflow: hidden;
}

.bozze-dropdown-title {
    padding: 12px 16px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #f0f0f0;
}

.bozza-drop-card {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.bozza-drop-card:last-child { border-bottom: none; }

.bozza-drop-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.bozza-drop-tipo {
    font-weight: 600;
    font-size: 0.92rem;
    color: #1a1a2e;
}

.bozza-drop-data {
    font-size: 0.78rem;
    color: #aaa;
}

.bozza-drop-stato {
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.bozza-drop-stato--pi   { color: #b45309; }
.bozza-drop-stato--nopi { color: #666; }

.bozza-drop-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bozza-drop-btn {
    all: unset;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    color: #444;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

.bozza-drop-btn:hover              { background: #f5f5f5; }
.bozza-drop-btn--riprova           { border-color: #0c0c39; color: #0c0c39; }
.bozza-drop-btn--riprova:hover     { background: #f0f0f8; }
.bozza-drop-btn--annulla           { border-color: #B22222; color: #B22222; }
.bozza-drop-btn--annulla:hover     { background: #fff0f0; }

.bozza-drop-dettagli {
    margin-top: 8px;
    background: #f9f9f9;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: #555;
    line-height: 1.7;
}

.bozza-drop-dettagli span { font-weight: 600; color: #333; }

/* ── IN LAVORAZIONE — pulsante navbar + dropdown ────────────────────────── */

.btn-il-header {
    all: unset;
    color: #0c0c39;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-il-header:hover { color: #B22222; }

.il-nav-badge {
    background: #B22222;
    color: #fff;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
}

.il-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    z-index: 2000;
    overflow: hidden;
}

.il-dropdown-title {
    padding: 12px 16px 8px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #f0f0f0;
}

.il-dropdown-empty {
    margin: 0;
    padding: 14px 16px;
    color: #aaa;
    font-size: 0.88rem;
}

.il-card {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.il-card:last-child { border-bottom: none; }

.il-card-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.il-card-id {
    font-size: 0.78rem;
    color: #aaa;
    font-weight: 600;
}

.il-card-tipo {
    font-weight: 700;
    font-size: 0.92rem;
    color: #0c0c39;
}

.il-card-data {
    font-size: 0.78rem;
    color: #aaa;
    margin-left: auto;
}

.il-card-motivo {
    font-size: 0.83rem;
    margin-bottom: 10px;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-block;
}

.il-motivo--attesa { background: #fff8e1; color: #7a5c00; }
.il-motivo--warn   { background: #fff0f0; color: #B22222; }

.il-card-actions {
    display: flex;
    gap: 6px;
}

.il-action-btn {
    all: unset;
    font-size: 0.82rem;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: opacity .15s;
    border: 1px solid transparent;
}

.il-action-btn:hover { opacity: .82; }

.il-action-btn--primary {
    background: #0c0c39;
    color: #fff;
}

.il-action-btn--danger {
    background: #fff0f0;
    color: #B22222;
    border-color: #f5c6cb;
}