/* /public/css/centro-operativo.css - Riorganizzato */

/* ==========================================================================
   1. Variabili CSS e Stili Globali di Base
   ========================================================================== */
:root {
    /* Light Mode Defaults */
    --bg-color: #ffffff;
    --text-color: #212529;
    --secondary-bg-color: #f8f9fa;
    --border-color: #dee2e6;
    --link-color: #007bff;
    --button-bg: #007bff;
    --button-text: #ffffff;
    --button-hover-bg: #0056b3;
    --button-cancel-bg: #6c757d;
    --button-cancel-hover-bg: #5a6268;
    --button-disabled-bg: #ccc;
    --button-disabled-text: #666;
    --list-item-hover-bg: #e9ecef;
    --list-item-border: #eee;
    --header-bg: #f8f9fa;
    --map-border-color: #ccc;
    --modal-bg: #ffffff;
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --form-input-bg: #ffffff;
    --form-input-border: #ced4da;
    --form-input-focus-border: #80bdff;
    --form-input-focus-shadow: rgba(0, 123, 255, 0.25);
    --priority-high-border: #dc3545;
    --priority-medium-border: #ffc107;
    --priority-low-border: #28a745;
    --status-error-color: #dc3545; /* Es. New, Verified */
    --status-active-color: #007bff; /* Es. Assigned, InProgress */
    --status-success-color: #28a745; /* Es. Resolved */
    --status-muted-color: #6c757d;  /* Es. Closed, Cancelled */
    --status-available-bg: #d4edda;    /* Verde chiaro per Libera */
    --status-available-border: #c3e6cb;
    --status-available-text: #155724;   /* Verde scuro testo */
    --status-assigned-bg: #f8d7da;     /* <<< ROSSO CHIARO per Assegnata */
    --status-assigned-border: #f5c6cb;
    --status-assigned-text: #721c24;    /* <<< Rosso scuro testo */
    --blink-red-light: rgba(255, 0, 0, 0.85);
    --blink-red-dark: rgba(222, 0, 0, 0.85);
    --button-secondary-hover-bg: #f0f0f0;
}

body {
    min-height: 100vh;
    display: flex; 
    flex-direction: column;
    margin: 0;
    font-family: sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    padding-bottom: 55px;
    box-sizing: border-box;
}

/* Stile base pulsanti */
button, .button-style {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
button:hover, .button-style:hover {
    background-color: var(--button-hover-bg);
}
button:disabled {
    background-color: var(--button-disabled-bg) !important;
    color: var(--button-disabled-text) !important;
    cursor: not-allowed;
    opacity: 0.65;
}

/* Stile base per elementi form (verrà sovrascritto per modali se necessario) */
input[type="text"],
input[type="number"],
input[type="search"],
textarea,
select {
    padding: 8px 10px;
    border: 1px solid var(--form-input-border);
    border-radius: 4px;
    background-color: var(--form-input-bg);
    color: var(--text-color);
    font-size: 1em;
    box-sizing: border-box; /* Importante */
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--form-input-focus-border);
    box-shadow: 0 0 0 3px var(--form-input-focus-shadow);
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 15px 0;
}

.button-style.button-secondary {
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.button-style.button-secondary:hover {
    background-color: var(--list-item-hover-bg);
}

/* ==========================================================================
   2. Layout Principale
   ========================================================================== */
header {
    flex-shrink: 0;
    padding: 5px 15px;
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
   /* Opzionale: per allineare meglio titolo e link su una riga */
    display: flex;
    align-items: center;
    gap: 15px;
}

header span[style*="margin: 0 15px;"] { margin: 0 !important; }

header h1 {
    margin: 0;
    font-size: 1.3em;
}

.layout-container {
    display: flex;
    flex-grow: 1;
    gap: 15px;
    padding: 15px;
    align-items: stretch;
  /*  overflow: hidden; */
}

/* NUOVO: Colonna Sinistra (Mappa + Pannello Dettagli) */
/*
.left-column {
    flex: 1; 
    display: flex;
    flex-direction: column; 
    min-width: 0; */
    /* L'altezza è determinata dal flex-grow del genitore .layout-container */


/* Colonna Mappa */
#map-container {
    flex: 1; /* Occupa lo spazio rimanente */
    display: flex;
    min-width: 300px; /* Larghezza minima per la mappa */
    border: 1px solid var(--map-border-color);
    border-radius: 8px;
    position: relative;
}

#map-segnalazioni {
    flex-grow: 1;
    border-radius: 8px;
    width: 100%;
    background-color: #ddd; /* Placeholder */
}

/* Colonna Gestione Report (Pannello Laterale) */
#reports-management {
    flex: 0 1 600px; /* Larghezza fissa (base 450px), non cresce, può ridursi */
    min-width: 400px; /* Larghezza minima */
    max-width: 40%; /* Limite massimo per schermi larghi */
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--secondary-bg-color);
    padding: 15px;
    overflow: hidden;
    /*overflow-y: auto;*/ /* Scrollbar se contenuto eccede */
}

#reports-management h2,
#reports-management h3 {
    margin-top: 0;
    margin-bottom: 5px;
    flex-shrink: 0;
    color: var(--text-color);
}

#report-list-container {
    margin-top: 0; /* Rimuovi spazio sopra il contenitore lista */
    /* Assicurati che le regole flex per farlo crescere siano ancora qui */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Necessario per far funzionare overflow su wrapper tabella */
}

#createNewReportBtn {
    width: auto; /* Rimuovi larghezza 100% */
    margin: 0; /* Rimuovi margini precedenti */
    flex-shrink: 0;
    /* Opzionale: aggiusta padding/font-size se necessario */
    padding: 3px 6px;
    font-size: 0.9em;
}

#createNewReportBtn i {
    margin-right: 5px; /* Spazio tra icona e testo */
}

.leaflet-control-logo {
    background-color: transparent !important; /* Forza sfondo trasparente */
    padding: 5px !important; /* Nessun padding */
    border-radius: 0 !important; /* Nessun arrotondamento */
    box-shadow: none !important; /* Nessuna ombra */
    border: none !important; /* Nessun bordo */
    margin: 0 !important; /* Rimuovi eventuali margini di default dei controlli */
}

/* Mantieni lo stile per l'immagine stessa per controllarne la dimensione */
.leaflet-control-logo img {
    max-width: 80px; /* O la dimensione che preferisci */
    height: auto;
    display: block;
}

.leaflet-control-layers-toggle {

    width: 30px !important;  /* Larghezza simile ai pulsanti zoom/geocoder standard */
    height: 30px !important; /* Altezza simile */
    padding: 0 !important; 
    background-position: center center !important;
    line-height: 30px !important; 
}

/* --- Stili per Marker Personalizzati con DivIcon --- */

/* Contenitore base per le nostre icone DivIcon */
.report-marker-div-icon {
    position: relative; /* Permette posizionamento assoluto del numero */
    width: 30px;  /* <<< DEVE CORRISPONDERE a iconSize[0] */
    height: 42px; /* <<< DEVE CORRISPONDERE a iconSize[1] */
    background-size: contain; /* Adatta immagine di sfondo */
    background-repeat: no-repeat;
    background-position: center bottom; /* Posiziona sfondo correttamente */
    font-weight: bold;
    font-size: 10px; /* Dimensione base testo ID */
    text-align: center;
    line-height: 1;
}

/* Immagine di sfondo di default e per stati specifici */
/* Usa le classi aggiunte dinamicamente nel JS */
.report-marker-div-icon {
    background-image: url('/leaflet/images/marker-icon.png'); /* Fallback blu standard */
}
.report-marker-div-icon.status-new,
.report-marker-div-icon.status-verified {
    background-image: url('/assets/icons/marker-icon-red.png'); /* <<< IMMAGINE PER STATO NEW */
}
.report-marker-div-icon.status-assigned,
.report-marker-div-icon.status-inprogress {
    background-image: url('/assets/icons/marker-icon-red.png'); /* <<< IMMAGINE PER STATO ASSIGNED */
}
.report-marker-div-icon.status-resolved {
    background-image: url('/assets/icons/marker-icon-grey.png'); /* <<< IMMAGINE PER STATO RESOLVED */
}
.report-marker-div-icon.status-closed,
.report-marker-div-icon.status-cancelled {
    background-image: url('/assets/icons/marker-icon-grey.png'); /* <<< IMMAGINE PER STATO CLOSED */
}

/* Stile e Posizionamento del numero ID */
.report-marker-div-icon .marker-id {
    position: absolute;
    top: 7px;   /* <<< AGGIUSTA: Distanza dall'alto per centrare sulla parte tonda */
    left: 0;
    width: 100%; /* Occupa tutta la larghezza per centrare il testo */
    color: black; /* Colore testo ID (bianco?) */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Ombra per leggibilità */
    font-size: 17px; /* Dimensione ID (aggiusta) */
    font-weight: normal; 
   line-height: 1;    /* Evita altezza extra */
    pointer-events: none; /* Evita che il testo blocchi il click sul marker */
}

.team-marker-div-icon {
    position: relative; /* Necessario per posizionare elementi interni */
    background-color: #F28100; /* Arancione PC */
    border: 1.5px solid #0B233F;  /* Bordo Blu Scuro PC */
    border-radius: 50%; /* Cerchio */
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    /* Dimensioni Cerchio (DEVONO CORRISPONDERE a iconSize in JS) */
    width: 30px; 
    height: 30px; 
    box-sizing: border-box; 
    overflow: hidden; /* Nasconde eccessi triangolo */
    /* Rimosse le proprietà di testo da qui */
}

/* Triangolo blu interno (::before) - INVARIATO */
.team-marker-div-icon::before {
    content: '';
    position: absolute;
    width: 0; 
    height: 0; 
    border-style: solid;
    /* Dimensioni triangolo */
    border-width: 0 13px 22.5px 13px; 
    border-color: transparent transparent #0B233F transparent; 
    /* Posizionamento */
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 0; /* Sta sotto lo span della lettera */
}

/* --- NUOVA REGOLA PER LO SPAN DELLA LETTERA --- */
.team-marker-div-icon .marker-letter {
    position: absolute; /* Posiziona rispetto al cerchio */
    top: 0;
    left: 0;
    width: 100%; /* Occupa tutto il cerchio */
    height: 100%;
    
    display: flex; /* Usa Flexbox per centrare facilmente */
    align-items: center; /* Allinea verticalmente */
    justify-content: center; /* Allinea orizzontalmente */

    /* Stili testo */
    color: white; 
    font-weight: bold;
    font-size: 16px; 
    font-family: Arial, Helvetica, sans-serif; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
    line-height: 1; /* Importante con Flexbox per centrare bene */
    
    z-index: 1; /* Metti sopra il ::before */
    pointer-events: none; /* Non bloccare click sul marker */

    /* Evita selezione testo lettera */
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
}

.team-marker-div-icon::after {
    display: none; 
    content: none;
}

.team-marker-div-icon.team-marker-stale {
    opacity: 0.6; /* Rende il marker semitrasparente */
    /* Alternativa: filtro scala di grigi */
    /* filter: grayscale(80%); */
    /* Alternativa: cambia colore bordo/sfondo se preferisci */
    /* border-color: #aaa; */
    /* background-color: #ccc; */
}

/* ==========================================================================
   3. Tabella Segnalazioni (Pannello Laterale)
   ========================================================================== */
#report-table-container { /* Nuovo contenitore per scroll tabella */
    flex-grow: 1; /* Occupa spazio rimanente nel pannello laterale */
    overflow-y: auto; /* Scrollbar solo per la tabella */
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

#report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

#report-table th,
#report-table td {
    border-bottom: 1px solid var(--border-color);
    padding: 8px 10px; /* Padding leggermente ridotto */
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* Evita a capo per ora */
}
#report-table td:nth-child(2) { /* Colonna Titolo */
   white-space: normal; /* Permetti a capo per titolo */
   min-width: 100px;
}

#report-table td:nth-child(5) {
    white-space: normal; /* Permette al testo di andare a capo */
   /* word-break: break-word;*/ /* Opzionale: forza l'a capo anche per parole/nomi lunghissimi senza spazi */
    /* Potresti voler dare una larghezza minima/massima a questa colonna se necessario */
    /* min-width: 120px; */
}

#report-table th {
    background-color: var(--secondary-bg-color);
    font-weight: bold;
    position: sticky; /* Intestazione fissa allo scroll */
    top: 0;
    z-index: 10; /* Sopra le righe */
}

#report-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#report-table tbody tr:hover {
    background-color: var(--list-item-hover-bg);
}

#report-table tbody tr.selected-row {
    background-color: var(--link-color) !important; /* Usa colore link come highlight */
    color: var(--button-text) !important; /* Testo chiaro su sfondo scuro */
    font-weight: bold;
}

/* Stili Priorità */
#report-table .priority-high { border-left: 4px solid var(--priority-high-border); }
#report-table .priority-medium { border-left: 4px solid var(--priority-medium-border); }
#report-table .priority-low { border-left: 4px solid var(--priority-low-border); }
/* Aggiungi padding-left alle celle se usi border-left */
#report-table td { padding-left: 12px; }
#report-table td:first-child { padding-left: 8px; } /* Ripristina padding prima cella */

/* Stili Stato (sul testo della cella stato) */
#report-table .status-new td:nth-child(3),
#report-table .status-verified td:nth-child(3) { color: var(--status-error-color); font-weight: bold; }
#report-table .status-assigned td:nth-child(3),
#report-table .status-inprogress td:nth-child(3) { color: var(--status-active-color); }
#report-table .status-resolved td:nth-child(3) { color: var(--status-success-color); }
#report-table .status-closed td:nth-child(3),
#report-table .status-cancelled td:nth-child(3) { color: var(--status-muted-color); text-decoration: line-through; }

/* Stili per fade out/in tabella report */
#report-table-wrapper { /* Applichiamo al contenitore con scroll */
   flex-grow: 1;
   overflow-y: auto;
   transition: opacity 0.4s ease-in-out; /* Durata media per fade */
}

#report-table-wrapper.loading-data {
    opacity: 0.6; /* Opacità ridotta (non troppo bassa) durante il caricamento/redraw */
    /* pointer-events: none; */ /* Opzionale: blocca interazione durante fade */
}

#reports-management h2 {
    margin: 0; /* Rimuove margini default H2 */
    font-size: 1.3em; /* Opzionale: Riduci leggermente dimensione */
    color: var(--text-color); /* Assicura colore corretto */
}

.panel-section-header {
    display: flex; /* Mette gli elementi in riga */
    justify-content: space-between; /* Spinge titolo a sx e bottone a dx */
    align-items: center; /* Allinea verticalmente */
    margin-bottom: 10px; /* Spazio sotto prima della tabella */
    padding-bottom: 10px; /* Spazio sotto gli elementi */
    border-bottom: 1px solid var(--border-color); /* Sostituisce l'effetto dell'hr */
    flex-shrink: 0; /* Non farlo restringere */
}

/* --- Stile per Segnalazioni Senza Coordinate --- */
#report-table tbody tr.missing-coords {
    background-color: #fff0f1; /* Sfondo rosa/rosso molto chiaro */
    /* Alternativa: bordo laterale rosso */
    border-left: 4px solid var(--status-error-color, #dc3545);
}

/* Rende l'ID più evidente per queste righe */
#report-table tbody tr.missing-coords td:first-child {
    color: #a3111f; /* Rosso scuro per ID */
    font-weight: bold;
}

@media (prefers-color-scheme: dark) {
    #report-table-wrapper.loading-data {
         opacity: 0.5; /* Opacità leggermente diversa per dark? */
     }

   #report-table tbody tr.missing-coords {
        background-color: #4d2f31; /* Sfondo rosso scuro/desaturato */
    }
     #report-table tbody tr.missing-coords td:first-child {
         color: #f48fb1; /* Rosa/Rosso chiaro per ID */
     }
     /* Assicura che il testo normale rimanga leggibile */
     #report-table tbody tr.missing-coords td {
          /* Il colore testo generale dovrebbe andare bene,
             ma puoi forzarlo se necessario */
         /* color: var(--text-color); */
     }
     /* Sovrascrive l'hover per mantenere l'evidenza */
     #report-table tbody tr.missing-coords:hover {
          background-color: #6b4548; /* Rosso scuro leggermente più chiaro al hover */
     }
     /* Sovrascrivi riga selezionata se in conflitto col rosso */
      #report-table tbody tr.selected-row.missing-coords {
           background-color: #5a4266 !important; /* Es: Viola scuro? O mantieni il blu di selezione? */
      }
}

/* ==========================================================================
   4. Pannello Dettagli Inferiore
   ========================================================================== */
#report-detail-bottom-panel {
    /* RIMUOVI position:fixed, bottom, left, width:100% */
    position: fixed;
    flex-shrink: 0; /* Non farlo restringere verticalmente */
    height: 30vh; /* Altezza desiderata (aggiustabile) */
    max-height: 40vh; /* Limite altezza */
    left: 0;
    bottom: 0;
    width: 100%; /* Occupa larghezza di left-column */
    background-color: var(--bg-color);
    border-top: 2px solid var(--border-color);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 0px; /* Spazio tra mappa e pannello */
    display: none; /* Nascosto di default, JS lo mostra con 'flex' */
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    z-index: 1010; /* z-index basso ora è ok */
}
#report-detail-bottom-panel.visible { display: flex; }

#report-detail-bottom-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 6px;
    background-color: var(--secondary-bg-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
#report-detail-bottom-panel .panel-header h3 { margin: 0; font-size: 1.1em; }
#report-detail-bottom-panel .panel-header h3 span { font-weight: bold; }

#close-bottom-panel-btn { /* Pulsante chiusura pannello */
    background: none; border: none; font-size: 1.5em; line-height: 1;
    color: var(--text-color); cursor: pointer; padding: 0 3px;
}
#close-bottom-panel-btn:hover { color: #e60000; }

#report-detail-bottom-panel .panel-content {
    display: flex;
    gap: 20px;
    padding: 15px;
   /* overflow-y: auto; */
    flex-grow: 1;
    height: auto;
    overflow: hidden;
}

#bottom-detail-main { flex: 1; min-width: 0; overflow-y: auto; height: 100%; }
#bottom-detail-main p, #bottom-detail-main div { margin-bottom: 8px; }
#bottom-detail-main strong { display: inline-block; min-width: 110px; font-weight: bold; } /* Etichette */

#bottom-detail-updates { flex: 0 0 500px; display: flex; flex-direction: column; height: 100%; }
#bottom-detail-updates h4 { margin-top: 0; margin-bottom: 8px; font-size: 1.1em; }

#bottom-updates-list {
    list-style: none; padding: 8px; margin: 0 0 10px 0;
    flex-grow: 1; overflow-y: auto; border: 1px solid var(--list-item-border);
    background-color: var(--bg-color); border-radius: 4px;
    min-height: 100px;
}
#bottom-updates-list li {
    font-size: 0.95em; padding: 5px 2px; border-bottom: 1px dotted var(--list-item-border);
    overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;
}
#bottom-updates-list li:last-child { border-bottom: none;}
#bottom-updates-list li p { margin: 0 0 3px 0; line-height: 1.4; } /* Paragrafo update */
#bottom-updates-list li small { display: block; color: #888; font-size: 0.8em; margin-top: 2px; } /* Info utente/data */

#bottom-add-update-form { display: flex; flex-direction: column; flex-shrink: 0; }
#bottom-add-update-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
    padding: 5px 8px; /* Padding leggermente aumentato */
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 0.95em; /* Allinea font size con lista log */
    line-height: 1.4;
    min-height: 38px; /* Altezza minima circa per una riga + padding */
    height: auto; /* L'attributo rows="1" dovrebbe controllare l'altezza iniziale */
    resize: vertical; /* Opzionale: permette all'utente di ridimensionare verticalmente */
}
#bottom-add-update-form button { align-self: flex-end; }

/* Stili per Anteprime Immagini Report */
#detail-image-previews {
    display: flex;
    flex-wrap: wrap; /* Manda a capo se non ci stanno */
    gap: 8px; /* Spazio tra anteprime */
    margin-top: 5px;
    padding: 5px;
    min-height: 40px; /* Altezza minima anche se vuoto */
    /* background-color: var(--secondary-bg-color); */ /* Sfondo opzionale */
    /* border: 1px dashed var(--border-color); */ /* Bordo opzionale */
}

.report-image-thumbnail {
    max-height: 70px; /* Altezza massima anteprima */
    max-width: 100px; /* Larghezza massima */
    width: auto;
    height: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    object-fit: cover; /* Scala mantenendo proporzioni, taglia se serve */
    cursor: pointer; /* Indica che è cliccabile (per lightbox futura) */
    transition: transform 0.2s ease;
}
.report-image-thumbnail:hover {
     transform: scale(1.05); /* Leggero ingrandimento al hover */
}

.action-buttons .button-style {
    padding: 8px;
    font-size: 1.2em; /* Dimensione base icona */
    line-height: 1;
   /* min-width: 38px;
    min-height: 38px; */
    margin: 5px;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
/* --- MODIFICATO: Regola più specifica per l'icona e ::before --- */
/* Applica a tutti gli elementi <i> con classe che inizia per "las" DENTRO .action-buttons .button-style */
.action-buttons .button-style i.fas {
    /* Proprietà Font */
    /*font-family: "Line Awesome Free", sans-serif !important;  Forza il font corretto */
    font-weight: 900 !important; /* Necessario per 'las' (Solid) */
    font-style: normal !important; /* Assicura stile normale */
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased;
    /* Proprietà Layout e Aspetto */
    display: inline-block !important; /* Forza display corretto per font icona */
    line-height: 1 !important; /* Centra verticalmente */
    color: inherit !important; /* Eredita colore dal bottone */
  /*  margin: 0 !important;  Rimuovi margini */
 /*   padding: 0 !important;  Rimuovi padding */
    font-size: inherit !important; /* Usa dimensione font del bottone */
    /* Rimuovi width/height auto, lascia che sia il font a determinare */
  /*  width: auto;
    height: auto; */
    vertical-align: middle; /* Allineamento verticale */
}

/* ==========================================================================
   4.1. Pannello Dettagli Inferiore Squadre
   ========================================================================== */
#team-status-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px; /* Altezza ridotta per una barra di stato (aggiustabile) */
    background-color: var(--secondary-bg-color, #e9ecef); /* Sfondo leggermente diverso */
    border-top: 1px solid var(--border-color, #ccc);
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Livello base per overlay fissi */
    display: flex;
    align-items: center; /* Allinea verticalmente titolo e contenuto */
    padding: 0 15px; /* Padding orizzontale */
    box-sizing: border-box;
    overflow: hidden; /* Nasconde overflow orizzontale */
}

#team-status-header {
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0; /* Non far restringere il titolo */
    color: var(--text-color);
}

#team-status-content {
    display: flex; /* Mette gli elementi squadra in riga */
    flex-grow: 1; /* Occupa lo spazio rimanente */
    gap: 10px; /* Spazio tra elementi squadra */
    overflow-x: auto; /* Scrollbar orizzontale se le squadre non ci stanno */
    padding: 8px 0; /* Padding verticale per gli elementi interni */
    /* Nasconde scrollbar standard se vuoi un look più pulito (opzionale) */
    /* scrollbar-width: none;  Firefox */
    /* -ms-overflow-style: none; IE/Edge */
}
/* #team-status-content::-webkit-scrollbar { display: none; } Chrome/Safari/Opera */


/* Stile per singolo elemento squadra nella barra */
.team-status-item {
    display: inline-block; /* O flex se vuoi più controllo interno */
    padding: 5px 10px;
    border-radius: 15px; /* Forma a pillola */
    font-size: 0.85em;
    white-space: nowrap; /* Non mandare a capo il nome */
    cursor: pointer;
    border: 1px solid transparent; /* Bordo base trasparente */
}

.team-status-item.team-available { /* Squadra libera */
    background-color: var(--status-available-bg);
    border-color: var(--status-available-border);
    color: var(--status-available-text);
}

.team-status-item.team-assigned { /* Squadra assegnata */
    background-color: var(--status-assigned-bg); /* <<< USA VARIABILE ROSSA */
    border-color: var(--status-assigned-border);
    color: var(--status-assigned-text);
}
.team-status-item strong { /* Evidenzia ID target */
    font-weight: bold;
}

/* --- Aggiustamento Padding Body --- */
/* Aggiunge spazio sotto il contenuto principale per non essere coperto
   dal pannello fisso #team-status-panel */
body {
    /* ... (display: flex, ecc. come prima) ... */
    padding-bottom: 55px; /* <<< AGGIUNGI: Deve corrispondere all'altezza di #team-status-panel */
    box-sizing: border-box; /* Assicura che il padding sia incluso nell'altezza totale */
}

/* --- Verifica Z-index Pannello Dettagli Report --- */
/* Assicurati che il pannello dettagli report abbia uno z-index SUPERIORE
   a quello del pannello stato squadre (es. 1010 vs 1000) */
#report-detail-bottom-panel {
    /* ... (position: fixed, ecc.) ... */
    z-index: 1010; /* << Verifica sia > 1000 */
}

/* --- Z-index Modali --- */
/* Assicurati che i modali abbiano z-index SUPERIORE a entrambi i pannelli */
.modal {
    /* ... */
    z-index: 1050; /* << Verifica sia > 1010 */
}
.modal-content {
     /* ... */
     z-index: 1051;
}


/* ==========================================================================
   4.2. Pannello Documenti Emergenza
   ========================================================================== */
#emergency-docs-management {
    margin-top: 20px;
    border-top: 2px solid var(--border-color);
    padding-top: 10px;
    display: none; /* Nascosto di default */
    flex-direction: column;
    max-height: 30vh; 
}

/* Classe per mostrare il pannello via JS */
#emergency-docs-management.is-visible {
    display: flex;
}

#emergency-docs-list-container {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px; /* Spazio per la scrollbar */
}

/* Stile per il pulsante quando il pannello è attivo */
#toggle-docs-panel-btn.is-active {
    background-color: var(--button-bg);
    color: var(--button-text);
    border-color: var(--button-bg);
}
#toggle-docs-panel-btn.is-active:hover {
    background-color: var(--button-hover-bg);
}

/* Stile per ogni elemento della lista documenti */
.doc-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid var(--list-item-border);
    transition: background-color 0.2s;
}

.doc-list-item:hover {
    background-color: var(--list-item-hover-bg);
}

.doc-list-item a.doc-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex-grow: 1;
    overflow: hidden;
}

.doc-icon {
    font-size: 1.8em; /* Leggermente più piccolo */
    color: #6c757d;
    margin-right: 12px;
}

.doc-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.doc-filename {
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-meta {
    font-size: 0.8em;
    color: #888;
}

.delete-doc-btn {
    background: none;
    border: none;
    color: var(--status-error-color);
    font-size: 1.5em;
    cursor: pointer;
    padding: 0 5px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.delete-doc-btn:hover {
    opacity: 1;
}

/* Placeholder per lista vuota o in caricamento */
#emergency-docs-list-container .placeholder-text {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

/* Quando il contenitore principale ha la classe 'showing-docs'... */
#reports-management.showing-docs #report-list-container {
    display: none; /* ...nascondi la lista delle segnalazioni... */
}

#reports-management.showing-docs #emergency-docs-management {
    display: flex; /* ...e mostra quella dei documenti. */
    flex-grow: 1; /* Permetti al pannello documenti di occupare lo spazio */
}

/* ==========================================================================
   5. Stili Generali Modali
   ========================================================================== */
.modal {
    display: none; position: fixed; z-index: 1050; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: var(--modal-overlay-bg);
    display: flex; justify-content: center; align-items: center;
}

.modal-content {
    position: relative; background-color: var(--modal-bg); color: var(--text-color);
    padding: 25px; border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    min-width: 400px; max-width: 600px; /* Default */
    width: 90%; max-height: 90vh; overflow-y: auto;
    z-index: 1051;
}
.modal-content h2 { margin-top: 0; margin-bottom: 15px; }

.modal .close { /* Pulsante chiusura 'x' */
    position: absolute; top: 8px; right: 12px; font-size: 2em; font-weight: bold;
    color: var(--text-color, #aaa); cursor: pointer; line-height: 1; padding: 0;
    background: none; border: none; transition: color 0.2s ease;
}
.modal .close:hover { color: #e60000; }

/* Stili elementi form DENTRO i modali */
.modal-content form label { display: block; margin-bottom: 5px; font-weight: bold; }
.modal-content form input[type="text"],
.modal-content form input[type="number"],
.modal-content form input[type="search"],
.modal-content form textarea,
.modal-content form select {
    width: 100% !important; /* Full width */
    padding: 10px 12px; /* Padding migliorato */
    margin-bottom: 15px; /* Spazio sotto */
    border: 1px solid var(--form-input-border);
    border-radius: 5px;
    background-color: var(--form-input-bg);
    color: var(--text-color);
    font-size: 1em;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
}
.modal-content form input::placeholder,
.modal-content form textarea::placeholder { color: #999; }

.modal-content form input:focus,
.modal-content form textarea:focus,
.modal-content form select:focus {
    outline: none; border-color: var(--form-input-focus-border);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.075), 0 0 0 3px var(--form-input-focus-shadow);
}
.modal-content form select[multiple] { min-height: 180px; }

/* Contenitore bottoni finali modale */
.modal-content form div[style*="text-align: right"] {
     padding-top: 15px; border-top: 1px solid var(--border-color); margin-top: 15px; text-align: right;
}
.modal-content form div[style*="text-align: right"] button {
    padding: 10px 20px; margin-left: 10px;
}
.modal-content form button[type="button"]:not(#enableEditBtn) { /* Stile bottone 'Annulla' */
     background-color: var(--button-cancel-bg);
     color: var(--button-text);
 }
 .modal-content form button[type="button"]:not(#enableEditBtn):hover {
     background-color: var(--button-cancel-hover-bg);
 }


/* ==========================================================================
   6. Stili Specifici Modale Assegnazione Squadre
   ========================================================================== */
#assignTeamModal .modal-content { max-width: 800px; } /* Più largo */
#assign-team-container { display: flex; gap: 20px; margin-top: 15px; }
#assign-team-container > div { /* Colonne */
    flex: 1; border: 1px solid var(--border-color); border-radius: 5px;
    padding: 10px; display: flex; flex-direction: column;
    background-color: var(--secondary-bg-color);
}
#assign-team-container h4 { /* Titoli colonne */
    margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px; flex-shrink: 0; font-size: 1.1em;
}
#assign-team-search { margin-bottom: 10px; } /* Input ricerca */

.team-assignment-list { /* Liste UL */
    list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1;
    min-height: 200px; max-height: 40vh; background-color: var(--bg-color);
    border-radius: 3px; border: 1px solid var(--list-item-border);
}
.team-assignment-list li { /* Elementi lista */
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-bottom: 1px solid var(--list-item-border); font-size: 0.95em;
}
.team-assignment-list li:last-child { border-bottom: none; }
.team-assignment-list button { /* Bottoni Assegna/Rimuovi */
    padding: 3px 8px; font-size: 0.85em; cursor: pointer; margin-left: 10px;
    color: white; border: none; border-radius: 3px;
}
.team-assignment-list .remove-team-btn { background-color: #dc3545; }
.team-assignment-list .remove-team-btn:hover { background-color: #c82333; }
.team-assignment-list .remove-team-btn:disabled { background-color: #efa9b0; cursor: not-allowed;}
.team-assignment-list .assign-team-btn { background-color: #28a745; }
.team-assignment-list .assign-team-btn:hover { background-color: #218838; }
.team-assignment-list .assign-team-btn:disabled { background-color: #a3d3b0; cursor: not-allowed;}

#teamMembersModal .modal-content {
    /* Usa la classe .small definita sopra o imposta max-width qui */
    /* max-width: 450px; */
}
#teamMembersModalList {
    list-style: none;
    padding: 10px 0; /* Aggiunto padding sopra/sotto */
    margin: 0 0 15px 0;
    max-height: 60vh;
    overflow-y: auto;
    border-top: 1px solid var(--border-color); /* Separatore sopra la lista */
    border-bottom: 1px solid var(--border-color); /* Separatore sotto la lista */
}
#teamMembersModalList li {
    padding: 8px 5px; /* Padding interno elementi lista */
    border-bottom: 1px dotted var(--list-item-border);
    font-size: 0.95em;
}
#teamMembersModalList li:last-child {
    border-bottom: none;
}
#teamMembersModalList li:empty { /* Nasconde li se vuoto (es. caricamento) */
    display: none;
}

/* ==========================================================================
   7. Dark Mode Overrides
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Ridefinisci TUTTE le variabili per dark mode */
        --bg-color: #1a1a1a;
        --text-color: #f8f9fa;
        --secondary-bg-color: #2c2c2c;
        --border-color: #444;
        --link-color: #64b5f6;
        --button-bg: #64b5f6;
        --button-text: #1a1a1a; /* Testo scuro su bottone chiaro */
        --button-hover-bg: #8bc3f7;
        --button-cancel-bg: #555;
        --button-cancel-hover-bg: #777;
        --button-disabled-bg: #444;
        --button-disabled-text: #888;
        --list-item-hover-bg: #3a3a3a;
        --list-item-border: #444;
        --header-bg: #2c2c2c;
        --map-border-color: #555;
        --modal-bg: #303030;
        --modal-overlay-bg: rgba(0, 0, 0, 0.7);
        --form-input-bg: #424242;
        --form-input-border: #666;
        --form-input-focus-border: #64b5f6;
        --form-input-focus-shadow: rgba(100, 181, 246, 0.3);
        --priority-high-border: #f48fb1; /* Rosa */
        --priority-medium-border: #ffe082; /* Giallo paglierino */
        --priority-low-border: #a5d6a7; /* Verde chiaro */
        --status-error-color: #f48fb1;
        --status-active-color: #90caf9;
        --status-success-color: #a5d6a7;
        --status-muted-color: #9e9e9e;
        --status-available-bg: #2a4a34;    /* Verde scuro */
        --status-available-border: #3c6a4a;
        --status-available-text: #c3e6cb;   /* Verde chiaro testo */
        --status-assigned-bg: #5a2b31;     /* <<< ROSSO SCURO/BORDEAUX */
        --status-assigned-border: #84353f;
        --status-assigned-text: #f5c6cb;    /* <<< Rosso chiaro testo */
        --button-secondary-hover-bg: #303d5e;
    }

    /* Stili generali dark mode (es. link) */
    a { color: var(--link-color); }

    /* Tabella Segnalazioni Dark */
    #report-table tbody tr.selected-row { background-color: #3b5a8a !important; color: #fff !important; }

    /* Pannello Dettagli Inferiore Dark */
    #report-detail-bottom-panel #close-bottom-panel-btn { color: var(--text-color, #888); }
    #report-detail-bottom-panel #close-bottom-panel-btn:hover { color: #eee; }
    #bottom-updates-list li small { color: #aaa; }

    /* Modali Generali Dark */
    .modal .close { color: var(--text-color, #888); }
    .modal .close:hover { color: #eee; }
    .modal-content form input::placeholder,
    .modal-content form textarea::placeholder { color: #bbb; }
    .modal-content form button[type="button"]:not(#enableEditBtn) { color: #eee; } /* Testo Annulla */

    /* Modale Assegnazione Dark */
    #assign-team-container > div { background-color: var(--secondary-bg-color); }
    #assign-team-container h4 { border-bottom-color: var(--border-color); }
    .team-assignment-list { background-color: var(--form-input-bg); border-color: var(--form-input-border); }
    .team-assignment-list li { border-bottom-color: var(--list-item-border); }
    .team-assignment-list .remove-team-btn { background-color: #c82333; }
    .team-assignment-list .remove-team-btn:hover { background-color: #a71d2a; }
    .team-assignment-list .remove-team-btn:disabled { background-color: #8f4c54; }
    .team-assignment-list .assign-team-btn { background-color: #218838; }
    .team-assignment-list .assign-team-btn:hover { background-color: #19692c; }
    .team-assignment-list .assign-team-btn:disabled { background-color: #557e60; }


   #team-status-panel {
        background-color: var(--secondary-bg-color, #2c2c2c);
        border-top-color: var(--border-color, #444);
    }
    #team-status-header {
        color: var(--text-color);
    }
     /* Nascondi scrollbar standard in dark mode */
     /* #team-status-content { scrollbar-color: #555 #333; } */

    .team-status-item.team-assigned {
        background-color: var(--status-assigned-bg);
        border-color: var(--status-assigned-border);
        color: var(--status-assigned-text);
    }
    .team-status-item.team-available {
        background-color: var(--status-available-bg);
        border-color: var(--status-available-border);
        color: var(--status-available-text);
    }

     #bottom-updates-list li small { /* Già presente, ma verifica */
        color: #aaa;
    }
     /* Stili Leaflet Dark (esempio, potrebbero servire altri) */
   
    /* Pulsante di chiusura/collasso (se appare) 
    .leaflet-control-geocoder-collapse {
         background-color: var(--secondary-bg-color);
    }
     .leaflet-control-geocoder-collapse:hover {
          background-color: var(--list-item-hover-bg);
     }*/

   .button-style.button-secondary {
        color: var(--text-color);
        border-color: var(--border-color);
    }
    .button-style.button-secondary:hover {
        background-color: var(--list-item-hover-bg);
    }
    #toggle-docs-panel-btn.is-active {
        background-color: var(--button-bg);
        color: var(--button-text);
        border-color: var(--button-bg);
    }
    #toggle-docs-panel-btn.is-active:hover {
        background-color: var(--button-hover-bg);
    }
    .doc-icon {
        color: #9e9e9e;
    }
    .doc-meta {
        color: #aaa;
    }
    .delete-doc-btn {
        color: var(--status-error-color);
    }
}



/* ==========================================================================
   8. Media Query per Responsive Design
   ========================================================================== */
@media (max-width: 1200px) {

    #report-detail-bottom-panel {
        /* Opzionale: potresti volerlo un po' più alto su schermi medi? */
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
    }

    #report-detail-bottom-panel .panel-content {
        flex-direction: column; /* <<< Impila le colonne verticalmente */
        gap: 15px; /* Riduci un po' il gap verticale? */
        overflow-y: visible;
        height: auto;
    }

    #bottom-detail-updates {
        order: 1; /* <<< Mette la colonna degli aggiornamenti PER PRIMA */
        flex-basis: auto; /* Occupa la larghezza necessaria */
        width: 100%; /* Occupa tutta la larghezza del pannello */
        height: auto;
        flex-direction: column;
        display: flex;
        /* Potresti voler regolare l'altezza della lista log qui */
        /* max-height: 180px; */ /* Esempio */
    }
     #bottom-detail-updates h4 {
         margin-bottom: 5px; /* Riduci margine sotto titolo */
         flex-shrink: 0;
     }
     #bottom-updates-list {
         flex-grow: 0; /* Non farla crescere indefinitamente */
         overflow-y: auto;
          min-height: 100px; /* Altezza minima */
          max-height: 180px; /* Esempio altezza fissa per log */
     }
      #bottom-add-update-form {
          margin-top: 8px; /* Spazio sopra il form */
          flex-shrink: 0;
      }


    #bottom-detail-main {
        order: 2; /* <<< Mette la colonna dei dettagli DOPO gli aggiornamenti */
        flex-basis: auto; /* Occupa la larghezza necessaria */
        width: 100%; /* Occupa tutta la larghezza del pannello */
      /*  overflow-y: visible; */
        height: auto;
        margin-top: 20px;
        /* Riduci margini o padding se necessario */
    }
    #bottom-detail-main h4 {
        margin-top: 0; /* Rimuovi spazio sopra titolo "Informazioni Principali" */
         margin-bottom: 10px;
    }
     #bottom-detail-main p { margin-bottom: 6px; } /* Riduci spazio tra paragrafi */
     #bottom-detail-main strong { min-width: unset; } /* Rimuovi larghezza minima etichette */

}

/* ==========================================================================
   9. Blink Animation
   ========================================================================== */

/* 1. Definizioni Keyframes Separate */

/* Keyframes per blink ROSSO LEGGERO (Light Mode) - Usato sia per riga che per log */
@keyframes red-blink-intense-light {
  from { background-color: transparent; }
  to   { background-color: var(--blink-red-light, rgba(220, 53, 69, 0.35)); } /* Usa variabile, fallback rosso più opaco */
}
@keyframes red-blink-intense-dark {
  from { background-color: transparent; }
  to   { background-color: var(--blink-red-dark, rgba(244, 143, 177, 0.45)); } /* Usa variabile, fallback rosa/rosso più opaco */
}


/* 2. Applicazione Animazioni agli Elementi */

/* --- Riga Tabella Principale --- */

/* Applica BLINK persistente  */
#report-table tbody tr.report-updated-blink {
    animation: red-blink-intense-light 1.8s infinite alternate ease-in-out; /* Usa nuova animazione, durata 1.8s */
}
@media (prefers-color-scheme: dark) {
   #report-table tbody tr.report-updated-blink {
        animation-name: red-blink-intense-dark;
    }
   /* Disattiva blink su riga selezionata (dark) */
   #report-table tbody tr.selected-row.report-updated-blink {
     animation: none;
   }
}

/* Disattiva animazioni (flash e blink) su riga selezionata (anche light) */
#report-table tbody tr.selected-row.report-updated-blink,
#report-table tbody tr.selected-row.report-updated-flash {
    animation: none;
}

/* --- Log nel Pannello Dettagli --- */

/* Applica BLINK al nuovo log */
#bottom-updates-list li.new-log-blink {
    animation: red-blink-intense-light 1.8s infinite alternate ease-in-out; /* Usa nuova animazione */
    cursor: pointer;
    border-left: 3px solid var(--priority-high-border, #dc3545); /* Usa variabile per colore bordo */
    padding-left: 5px;
    margin-left: -8px;
    border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
   #bottom-updates-list li.new-log-blink {
        animation-name: red-blink-intense-dark;
        border-left-color: var(--priority-high-border, #f48fb1); /* Usa variabile per colore bordo */
    }
}

/* ==========================================================================
   10. Stili Specifici per la Stampa
   ========================================================================== */
@media print {

    /* Nascondi tutto tranne il contenuto del pannello dettagli */
    body > *:not(#report-detail-bottom-panel) {
        display: none !important;
    }
    /* Assicurati che anche eventuali elementi fissi residui siano nascosti */
    header, #map-container, #reports-management, #team-status-panel, .modal {
        display: none !important;
    }

    /* Forza il pannello dettagli ad essere visibile e statico */
    body {
        padding-bottom: 0 !important; /* Rimuovi padding per barra stato squadre */
        background-color: #fff !important; /* Sfondo bianco per stampa */
        color: #000 !important; /* Testo nero */
    }
    #report-detail-bottom-panel {
        display: block !important; /* Forza visualizzazione */
        position: static !important; /* Rimuovi posizionamento fisso */
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        border: none !important; /* Rimuovi bordi/ombre del pannello */
        box-shadow: none !important;
        overflow: visible !important; /* Non far scrollare il pannello */
        margin-top: 0 !important;
    }

    /* Nascondi header e pulsante chiusura del pannello */
    #report-detail-bottom-panel .panel-header {
        display: none !important;
    }

    /* Layout contenuto pannello per stampa (es. tutto in colonna) */
    #report-detail-bottom-panel .panel-content {
        display: block !important; /* Non usare flex qui */
        padding: 0 !important; /* Rimuovi padding extra */
    }

    #bottom-detail-main,
    #bottom-detail-updates {
        width: 100% !important; /* Occupa tutta larghezza pagina */
        flex-basis: auto !important; /* Rimuovi basi flex */
        margin-top: 0 !important;
        order: 0 !important; /* Resetta ordine */
        page-break-before: auto; /* Controllo interruzione pagina */
    }
    #bottom-detail-updates {
        margin-top: 20px; /* Spazio prima degli aggiornamenti */
        border-top: 1px solid #ccc; /* Separatore leggero */
        padding-top: 15px;
    }

    /* Nascondi elementi non necessari ALL'INTERNO del pannello */
    #detail-status-select,
    #detail-save-status-btn,
    #status-save-feedback,
    #bottom-add-update-form,
    .action-buttons { /* Nasconde TUTTI i bottoni azione (Edit, Assign, AddImg, Print) */
        display: none !important;
    }
    /* Nascondi anteprime immagini (occupano spazio, link non funzionano su carta) */
    /* Se vuoi stamparle, rimuovi questa regola e stile .report-image-thumbnail */
    #detail-image-previews {
         display: none !important;
    }
    /* Stile per elementi da stampare */
    #bottom-detail-main h4,
    #bottom-detail-updates h4 {
        font-size: 1.3em;
        margin-bottom: 10px;
        border-bottom: 1px solid #999;
        padding-bottom: 5px;
    }
    #bottom-detail-main p {
        margin-bottom: 6px;
        line-height: 1.4;
    }
    #bottom-detail-main strong { min-width: unset; } /* Evita allineamenti strani */

    #bottom-updates-list {
        list-style: none;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        max-height: none; /* Permetti alla lista di espandersi */
        overflow: visible; /* Non scrollare */
    }
    #bottom-updates-list li {
        font-size: 9pt; /* Dimensione font per stampa */
        padding: 4px 0;
        border-bottom: 1px dotted #ccc;
        page-break-inside: avoid; /* Evita di spezzare un singolo log tra due pagine */
    }
    #bottom-updates-list li p { margin: 0 0 2px 0; }
    #bottom-updates-list li small { color: #555; font-size: 8pt; }

    /* Evita margini pagina eccessivi (default browser) */
    @page {
        margin: 1.5cm;
    }
    body {
        margin: 0; /* Rimuovi margini body per controllo @page */
    }

}

.actions-panel a.button-secondary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
    color: var(--text-color); /* Eredita colore testo del tema */
}

.actions-panel a.button-secondary:hover {
    background-color: var(--button-secondary-hover-bg);
}