* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variabili CSS per i temi */
:root {
    /* Tema chiaro (default) */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f0;
    --bg-header: #003366;
    --text-primary: #333333;
    --text-secondary: #555555;
    --text-light: #ffffff;
    --text-muted: #666666;
    --border-color: #cccccc;
    --border-light: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.25);
    --hover-bg: #e0e0e0;
    --input-bg: #ffffff;
    --button-bg: #f0f0f0;
    --button-text: #003366;
    --link-hover: #0066cc;
    --map-bg: #e0e0e0;
    /* Icone & sistema */
    --icon-color: #333333;
    --color-scheme: light;
    --date-icon-space: 50px;
    /* Scrollbar (light theme) */
    --scrollbar-track: var(--bg-secondary);
    --scrollbar-thumb: var(--border-color);
    /* Resizer (light theme) */
    --resizer-color: var(--border-color);
    --resizer-border: var(--border-light);
    --resizer-hover: #bdbdbd;
}

/* Tema scuro */
[data-theme="dark"] {
    --bg-primary: #202A36;
    --bg-secondary: #273447;
    --bg-tertiary: #2D3B52;
    --bg-header: #1B2430;
    --text-primary: #e0e0e0;
    --text-secondary: #b8c1cc;
    --text-light: #ffffff;
    --text-muted: #96a0ad;
    --border-color: #3A4A5C;
    --border-light: #46576B;
    --shadow-color: rgba(0, 0, 0, 0.35);
    --shadow-strong: rgba(0, 0, 0, 0.55);
    --hover-bg: #2E3A4C;
    --input-bg: #273447;
    --button-bg: #2D3B52;
    --button-text: #e0e0e0;
    --link-hover: #9ec3ff;
    --map-bg: #273447;
    /* Icone & sistema */
    --icon-color: #e0e0e0;
    --color-scheme: dark;
    --date-icon-space: 50px;
    /* Scrollbar (dark theme) */
    --scrollbar-track: var(--bg-tertiary);
    --scrollbar-thumb: var(--border-light);
    /* Resizer (dark theme) */
    --resizer-color: var(--border-light);
    --resizer-border: var(--border-color);
    --resizer-hover: #566780;
}

body, html { /* Added html selector */
    font-family: Arial, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh; /* Ensure body takes full viewport height */
    overflow: hidden; /* Prevent body from scrolling */
}

header {
    background-color: var(--bg-header);
    color: var(--text-light);
    padding: 10px 20px;
    box-shadow: 0 2px 4px var(--shadow-color);
}

.header-content {
    display: flex;
    align-items: center;
    /* justify-content: space-between; Rimosso o commentato per permettere a flex-grow di funzionare come previsto */
    gap: 15px;
}

.logo {
    height: 40px;
    width: 40px;
}

h1 {
    font-size: 18px;
    font-weight: bold;
    flex-grow: 1; /* Permette al titolo di occupare lo spazio disponibile, spingendo gli elementi successivi a destra */
    /* margin-right: auto; Rimosso */
}

.app-name-header {
    font-weight: bold;
    font-size: 1.1em; /* Leggermente più grande o uguale al titolo h1 */
    color: #f0f0f0; /* Colore bianco o leggermente off-white per contrasto */
}

.language-switch-btn {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-text);
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    margin-right: 10px; /* Adds some space before 'RecSec' */
}

.language-switch-btn:hover {
    background-color: var(--hover-bg);
}

.theme-toggle-btn {
    background-color: var(--button-bg);
    color: var(--icon-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.theme-toggle-btn:hover {
    background-color: var(--hover-bg);
    transform: scale(1.05);
}

/* App fullscreen button styled like theme toggle */
.app-fullscreen-btn {
    background-color: var(--button-bg);
    color: var(--icon-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.app-fullscreen-btn:hover {
    background-color: var(--hover-bg);
    transform: scale(1.05);
}

.theme-icon {
    color: var(--icon-color);
    fill: currentColor;
    transition: transform 0.2s ease;
}

.info-btn {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-text);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-left: auto; Rimosso: l'h1 con flex-grow ora gestisce il posizionamento */
}

.container {
    display: flex;
    height: calc(100vh - 70px); /* Altezza del header + padding */
    padding: 10px;
    /* Aggiungiamo overflow: hidden qui per evitare che il container stesso possa scrollare inaspettatamente */
    overflow: hidden;
}

.left-panel {
    display: flex;
    flex-direction: column;
    flex-basis: 60%; 
    min-width: 300px;
    overflow: hidden; 
}

#map-container {
    flex-basis: 60%; /* Altezza iniziale per la mappa principale */
    min-height: 150px; 
    background-color: var(--map-bg); 
    position: relative; 
    overflow: hidden;
    display: flex; /* Aggiunto per layout interno */
    flex-direction: column; /* Mappa e footer in colonna */
}

#map {
    width: 100%;
    /* height: 100%; Rimosso, sarà gestito da flex-grow */
    flex-grow: 1; /* La mappa occupa lo spazio rimanente */
    min-height: 0; /* Necessario per il corretto funzionamento di flex-grow in alcuni scenari */
}

#map-main-footer {
    height: 25px; /* Altezza fissa per il footer */
    flex-shrink: 0; /* Impedisce al footer di restringersi */
    background-color: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px; /* Aggiunto spazio tra gli elementi del footer */
    padding: 0 10px;
    font-size: 0.75em;
    color: var(--text-secondary);
}

/* Stili per il nuovo gruppo di controlli "Area Box" nel footer */
.footer-area-box-controls {
    display: flex;
    align-items: center;
    gap: 8px; /* Spazio tra "Area Box:", toggle "Italy", toggle "Med" */
    /* margin-right: auto; Toglierlo se si vuole che "RS in popup" sia l'unico a spingersi a destra */
}

.footer-area-box-controls > .checkbox-label { /* Etichetta "Area Box:" */
    font-weight: normal; /* Meno enfasi rispetto alle label dei filtri */
    margin-bottom: 0; /* Rimuove eventuale margine inferiore ereditato */
}


/* Stile per il checkbox-group specificamente nel footer della mappa principale 
   Rimosso margin-left: auto; per permettere al pulsante fullscreen di essere l'ultimo a destra.
#map-main-footer .checkbox-group {
    margin-left: auto; 
}
*/

/* Pulsante fullscreen mappa */
#map-main-footer .fullscreen-toggle-group {
    display: flex;
    align-items: center;
    gap: 5px; /* Spazio tra label e pulsante */
    margin-left: auto; /* Spinge il gruppo label + pulsante all'estrema destra */
}

.map-control-label { /* Stile per la nuova label */
    font-size: 0.9em; /* Coerente con altre label nel footer */
    color: var(--text-primary);
    white-space: nowrap; /* Evita che la label vada a capo */
}

#toggleFullscreenMapBtn {
    background-color: var(--button-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px; /* Adattato per icona */
    font-size: 1.1em; /* Dimensione icona */
    cursor: pointer;
    /* margin-left: auto; Rimosso: ora è sul genitore .fullscreen-toggle-group */
    line-height: 1;
    flex-shrink: 0; /* Impedisce al pulsante di restringersi */
    color: var(--text-primary);
}

#toggleFullscreenMapBtn:hover {
    background-color: var(--hover-bg);
}

/* Stili per la modalità fullscreen della mappa */
body.map-fullscreen-active header,
/* body.map-fullscreen-active .right-panel, */ /* Rimosso per permettere alla lista eventi di essere flottante */
body.map-fullscreen-active .left-panel > .resizer-h,
body.map-fullscreen-active #left-panel-bottom-content:not(#mappa_listaStazioni_container),
body.map-fullscreen-active .resizer { /* Resizer principale tra left e right panel */
    display: none !important;
}

body.map-fullscreen-active .container {
    padding: 0;
    height: 100vh; /* Occupa tutta l'altezza del viewport */
}

.resizer-h {
    background-color: var(--resizer-color);
    height: 3px; /* Altezza del ridimensionatore orizzontale - Ridotta */
    cursor: ns-resize; 
    flex-shrink: 0; 
}

.resizer-h:hover {
    background-color: var(--resizer-hover);
}

/* Spazio sotto il resizer principale sotto la mappa eventi */
#resizerHorizontalMain {
    margin-bottom: 6px; /* Lascia un po' di spazio dai box sottostanti */
}

/* Tema scuro: rendi più evidenti i resizer tra mappa eventi, mappa stazioni e box RS */
[data-theme="dark"] .resizer-h {
    height: 5px;
    border-top: 1px solid var(--resizer-border);
    border-bottom: 1px solid var(--resizer-border);
}
[data-theme="dark"] .resizer-v {
    flex-basis: 5px;
    border-left: 1px solid var(--resizer-border);
    border-right: 1px solid var(--resizer-border);
}
[data-theme="dark"] .resizer {
    flex-basis: 5px;
    border-left: 1px solid var(--resizer-border);
    border-right: 1px solid var(--resizer-border);
}
/* Tema scuro: uniforma il colore di tutti i resizer */
[data-theme="dark"] .resizer-h,
[data-theme="dark"] .resizer-v,
[data-theme="dark"] .resizer,
[data-theme="dark"] .resizer-v-right {
    background-color: var(--resizer-color);
}
[data-theme="dark"] .resizer-h:hover,
[data-theme="dark"] .resizer-v:hover,
[data-theme="dark"] .resizer:hover,
[data-theme="dark"] .resizer-v-right:hover {
    background-color: var(--resizer-hover);
}
 
body.map-fullscreen-active .left-panel {
    flex-basis: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
}

body.map-fullscreen-active #map-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000; 
    flex-basis: 100% !important; 
    min-height: 100% !important;
    background-color: #fff; 
}

body.map-fullscreen-active #map {
    height: 100% !important; 
}

body.map-fullscreen-active #map-main-footer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2010; /* Sopra la mappa, sotto i popup Leaflet */
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 5px;
}

/* Tema scuro: migliora visibilità del footer mappa fullscreen */
[data-theme="dark"] body.map-fullscreen-active #map-main-footer {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
[data-theme="dark"] body.map-fullscreen-active #map-main-footer .checkbox-label,
[data-theme="dark"] body.map-fullscreen-active #map-main-footer .map-control-label {
    color: var(--text-primary);
}
[data-theme="dark"] body.map-fullscreen-active #map-main-footer .slider {
    background-color: var(--border-light);
}

/* Tema scuro: migliora visibilità del footer mappa stazioni in fullscreen */
[data-theme="dark"] body.map-fullscreen-active #station-map-footer {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-top: 1px solid var(--border-light);
}
[data-theme="dark"] body.map-fullscreen-active #station-map-footer .checkbox-label,
[data-theme="dark"] body.map-fullscreen-active #station-map-footer .station-count-footer {
    color: var(--text-primary);
}
[data-theme="dark"] body.map-fullscreen-active #station-map-footer .slider {
    background-color: var(--border-light);
}

/* style.css (or your main CSS file) */
.leaflet-control-home-button {
    background-color: white !important;            /* Stesso sfondo del controllo layers */
    color: #333 !important;                        /* Colore testo standard Leaflet */
    border: 2px solid rgba(0,0,0,0.2) !important;  /* Bordo standard Leaflet */
    border-radius: 4px !important;                 /* Raggio del bordo standard */
    width: 36px !important;                        /* Stessa larghezza del controllo layers */
    height: 36px !important;                       /* Stessa altezza del controllo layers */
    font-size: 18px !important;                    /* Dimensione icona simile al controllo layers */
    font-weight: normal !important;                /* Peso normale */
    cursor: pointer !important;
    display: flex !important;                      /* Per centrare l'icona */
    align-items: center !important;                /* Centra verticalmente */
    justify-content: center !important;            /* Centra orizzontalmente */
    line-height: 1 !important;                     /* Evita spazio extra */
    box-sizing: border-box !important;
    text-decoration: none !important;              /* Rimuove sottolineatura del link */
    padding: 0 !important;                         /* Rimuove padding predefinito */
    margin: 0 !important;                          /* Rimuove margini predefiniti */
}

.leaflet-control-home-button:hover {
    background-color: #f4f4f4 !important;          /* Effetto hover simile al controllo layers */
    color: #333 !important;
}

.leaflet-control-home {
    box-shadow: 0 1px 5px rgba(0,0,0,0.65) !important;  /* Ombra standard Leaflet */
    border-radius: 4px !important;
    margin-bottom: 10px !important;                /* Spazio tra i controlli */
    background: transparent !important;            /* Sfondo trasparente per il contenitore */
    padding: 0 !important;                         /* Rimuove padding del contenitore */
}

/* Stile per il pulsante "Centra su Evento Selezionato" */
.leaflet-control-center-event-button {
    background-color: white !important;            /* Stesso sfondo del controllo layers */
    color: #333 !important;                        /* Colore testo standard Leaflet */
    border: 2px solid rgba(0,0,0,0.2) !important;  /* Bordo standard Leaflet */
    border-radius: 4px !important;                 /* Raggio del bordo standard */
    width: 36px !important;                        /* Stessa larghezza del controllo layers */
    height: 36px !important;                       /* Stessa altezza del controllo layers */
    font-size: 18px !important;                    /* Dimensione icona simile al controllo layers */
    font-weight: normal !important;                /* Peso normale */
    cursor: pointer !important;
    display: flex !important;                      /* Per centrare l'icona */
    align-items: center !important;                /* Centra verticalmente */
    justify-content: center !important;            /* Centra orizzontalmente */
    line-height: 1 !important;                     /* Evita spazio extra */
    box-sizing: border-box !important;
    text-decoration: none !important;              /* Rimuove sottolineatura del link */
    padding: 0 !important;                         /* Rimuove padding predefinito */
    margin: 0 !important;                          /* Rimuove margini predefiniti */
}

.leaflet-control-center-event-button:hover {
    background-color: #f4f4f4 !important;          /* Effetto hover simile al controllo layers */
    color: #333 !important;
}

.leaflet-control-center-event { /* Contenitore del pulsante */
    box-shadow: 0 1px 5px rgba(0,0,0,0.65);
    border-radius: 4px;
    margin-top: 5px; /* Aggiunge spazio sopra, separandolo dal pulsante Home */
    position: relative; /* Consente l'uso dello z-index */
    z-index: 2025;      /* Sopra pannelli laterali e overlay della mappa */
}

/* Stato disabilitato quando non c'è un evento selezionato */
.leaflet-control-center-event-button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Rimuovi o commenta la regola che nasconde .controls in fullscreen */
/*
body.map-fullscreen-active .right-panel .controls,
body.map-fullscreen-active .right-panel .resizer-v-right {
    display: none !important;
}



/* Scritta RecSec in modalità fullscreen */
.map-fullscreen-recsec-text {
    position: fixed;
    top: 10px;
    right: 100px; /* Aumentato il valore per spostarla più a sinistra */
    z-index: 500;
    background-color: rgba(0, 51, 102, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    user-select: none;
}
*/

/* Mantieni nascosto il resizer se necessario */
body.map-fullscreen-active .right-panel .resizer-v-right {
    display: none !important;
}

/* Scritta RecSec in modalità fullscreen */
.map-fullscreen-recsec-text {
    position: fixed;
    top: 10px;
    right: 100px; /* Diminuito il valore per spostarla più a destra */
    z-index: 500;
    background-color: var(--bg-header);
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    user-select: none;
}

/* Nuovi stili per i controlli flottanti quando la mappa è fullscreen */
body.map-fullscreen-active .controls {
    position: fixed; /* Posizionamento fisso rispetto al viewport */
    top: 70px; /* Esempio: sotto l'header se fosse visibile, o un valore a tua scelta */
    left: 20px; /* Esempio: distanza dal lato sinistro */
    width: 350px; /* Larghezza desiderata per la finestra flottante */
    max-height: calc(100vh - 90px); /* Altezza massima, lascia un po' di spazio */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    z-index: 2010; /* Assicurati che sia sopra la mappa ma sotto eventuali altri elementi modali se necessario */
    overflow: hidden; /* Cambiato da auto a hidden per evitare barre di scorrimento antiestetiche */
    display: block !important; /* Assicura che sia visibile */
    opacity: 0.7; /* Semitrasparente di default quando flottante e non attiva */
    transition: opacity 0.3s ease-in-out; /* Transizione fluida per l'opacità */
    resize: none; /* Disabilita il ridimensionamento nativo del browser */
}

/* Aggiungi overflow-y auto solo al contenuto interno quando necessario */
body.map-fullscreen-active .controls .filter-grid {
    overflow-y: auto;
    max-height: calc(100% - 80px); /* Lascia spazio per header e pulsante refresh */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ccc transparent; /* Firefox */
}

/* Webkit scrollbar styling per Chrome/Safari */
body.map-fullscreen-active .controls .filter-grid::-webkit-scrollbar {
    width: 6px;
}

body.map-fullscreen-active .controls .filter-grid::-webkit-scrollbar-track {
    background: transparent;
}

body.map-fullscreen-active .controls .filter-grid::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

body.map-fullscreen-active .controls .filter-grid::-webkit-scrollbar-thumb:hover {
    background-color: #999;
}

/* Rende i controlli opachi quando ci si passa sopra con il mouse o durante interazioni */
body.map-fullscreen-active .controls:hover,
body.map-fullscreen-active .controls.controls-dragging,
body.map-fullscreen-active .controls.controls-resizing {
    opacity: 1;
}

/* Stili per le maniglie di ridimensionamento dei controlli flottanti */
.controls-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent;
    z-index: 2011; /* Sopra .controls (2010) */
    display: none; /* Nascoste di default */
}

body.map-fullscreen-active .controls .controls-resize-handle {
    display: block; /* Mostra le maniglie solo quando i controlli sono flottanti */
}

/* Posizionamento e cursori specifici per ogni maniglia dei controlli */
.controls-resize-handle-n {
    top: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    width: auto;
    cursor: ns-resize;
}
.controls-resize-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.controls-resize-handle-e {
    top: 10px;
    bottom: 10px;
    right: -5px;
    width: 10px;
    height: auto;
    cursor: ew-resize;
}
.controls-resize-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.controls-resize-handle-s {
    bottom: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    width: auto;
    cursor: ns-resize;
}
.controls-resize-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.controls-resize-handle-w {
    top: 10px;
    bottom: 10px;
    left: -5px;
    width: 10px;
    height: auto;
    cursor: ew-resize;
}
.controls-resize-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }

/* Stile per l'header dei controlli quando è trascinabile */
body.map-fullscreen-active .controls #eventCriteriaStats {
    cursor: move; /* Indica che l'header è trascinabile */
    background-color: var(--bg-tertiary); /* Sfondo per l'header quando flottante */
    padding: 8px;
    margin: -8px -8px 5px -8px; /* Estende l'area cliccabile ai bordi del pannello */
    border-radius: 5px 5px 0 0; /* Arrotonda solo gli angoli superiori */
}

/* Stili per la lista eventi quando è flottante in modalità mappa fullscreen */
body.map-fullscreen-active .events-list {
    position: fixed;
    top: 20px; /* Posizione iniziale dall'alto */
    right: 20px; /* Posizione iniziale da destra */
    width: 380px; /* Larghezza fissa per il pannello flottante */
    height: auto; /* Altezza basata sul contenuto */
    max-height: calc(100vh - 40px); /* Altezza massima per lasciare un po' di margine */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    z-index: 2005; /* Sopra la mappa (z-index 2000 per #map-container), 
                      ma sotto il footer della mappa (z-index 2010 per #map-main-footer) 
                      e i popup Leaflet (che hanno z-index più alti). */
    display: flex; /* Mantiene la sua struttura flex interna */
    flex-direction: column;
    opacity: 0.7; /* Semitrasparente di default quando flottante e non attiva */
    transition: opacity 0.3s ease-in-out; /* Transizione fluida per l'opacità */
}

/* Assicurati che il container della mappa stazioni sia visibile in modalità fullscreen */
body.map-fullscreen-active #mappa_listaStazioni_container {
    display: block; /* Cambiato da 'none' a 'block' per renderla visibile di default */
    position: fixed;
    z-index: 2003; /* Sopra la mappa ma sotto la lista eventi */
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    min-height: 200px;
    max-width: 80vw;
    max-height: 80vh;
    opacity: 0.95;
    transition: opacity 0.2s ease;
    /* Posizione di default */
    top: 100px;
    left: 100px;
    width: 400px;
    height: 300px;
}

body.map-fullscreen-active #mappa_listaStazioni_container:hover,
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-dragging {
    opacity: 1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

body.map-fullscreen-active #mappa_listaStazioni_container #station-map-footer {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    cursor: move;
    user-select: none;
}

body.map-fullscreen-active #mappa_listaStazioni_container #station-map-footer:hover {
    background: var(--hover-bg);
}

/* Resize handles per la mappa stazioni flottante */
body.map-fullscreen-active .station-map-resize-handle {
    position: absolute;
    background: transparent !important;
    opacity: 0 !important;
    transition: none;
    border: none !important;
}

body.map-fullscreen-active #mappa_listaStazioni_container:hover .station-map-resize-handle,
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-resizing .station-map-resize-handle {
    background: transparent !important;
    opacity: 0 !important;
    border: none !important;
}

/* Corner handles */
body.map-fullscreen-active .station-map-resize-nw {
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    cursor: nw-resize;
}

body.map-fullscreen-active .station-map-resize-ne {
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    cursor: ne-resize;
}

body.map-fullscreen-active .station-map-resize-sw {
    bottom: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    cursor: sw-resize;
}

body.map-fullscreen-active .station-map-resize-se {
    bottom: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    cursor: se-resize;
}

/* Edge handles */
body.map-fullscreen-active .station-map-resize-n {
    top: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    cursor: n-resize;
}

body.map-fullscreen-active .station-map-resize-s {
    bottom: -5px;
    left: 10px;
    right: 10px;
    height: 10px;
    cursor: s-resize;
}

body.map-fullscreen-active .station-map-resize-e {
    top: 10px;
    bottom: 10px;
    right: -5px;
    width: 10px;
    cursor: e-resize;
}

body.map-fullscreen-active .station-map-resize-w {
    top: 10px;
    bottom: 10px;
    left: -5px;
    width: 10px;
    cursor: w-resize;
}

/* Mantieni visibili gli handle degli angoli per il ridimensionamento */
body.map-fullscreen-active .station-map-resize-nw,
body.map-fullscreen-active .station-map-resize-ne,
body.map-fullscreen-active .station-map-resize-sw,
body.map-fullscreen-active .station-map-resize-se {
    /* Questi rimangono visibili e funzionali */
    position: absolute;
    background: transparent !important;
    opacity: 0 !important;
    transition: none;
    width: 10px;
    height: 10px;
    border: none !important;
}

/* Mantieni gli handle degli angoli invisibili anche al hover */
body.map-fullscreen-active #mappa_listaStazioni_container:hover .station-map-resize-nw,
body.map-fullscreen-active #mappa_listaStazioni_container:hover .station-map-resize-ne,
body.map-fullscreen-active #mappa_listaStazioni_container:hover .station-map-resize-sw,
body.map-fullscreen-active #mappa_listaStazioni_container:hover .station-map-resize-se,
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-resizing .station-map-resize-nw,
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-resizing .station-map-resize-ne,
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-resizing .station-map-resize-sw,
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-resizing .station-map-resize-se {
    background: transparent !important;
    opacity: 0 !important;
    border: none !important;
}

/* Stile durante il ridimensionamento */
body.map-fullscreen-active #mappa_listaStazioni_container.station-map-resizing {
    opacity: 1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Pulsante di minimizzazione/espansione */
.toggle-controls-btn {
    background: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    /* display: flex !important; Rimosso: la visibilità è gestita da regole più specifiche */
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Impedisce al pulsante di rimpicciolirsi */
    z-index: 10; /* Assicura che sia sopra altri elementi */
}

.toggle-controls-btn:hover {
    background: #0056b3;
}

/* Assicura visibilità del pulsante minimizza */
#toggleControlsBtn {
    display: none; /* Nascosto di default */
    /* Visibilità e opacità saranno gestite dalla regola specifica per il fullscreen */
    background: #007cba;
    color: white;
    border: 1px solid #005a8b;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 8px; /* Spazio a destra del pulsante */
    order: -1; /* Mostra il pulsante come primo elemento a sinistra */
    min-width: 20px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1000;
}

#toggleControlsBtn:hover {
    background: #005a8b;
    border-color: #004066;
}

/* Assicura che il container sia flex per allineare correttamente */
#eventCriteriaStats {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-primary);
    padding: 8px;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.8em;
    display: flex;
    justify-content: flex-start; /* Allinea gli elementi a sinistra */
    align-items: center;
    width: 100%;
    background: var(--bg-secondary);
    cursor: move;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Stile per il pulsante minimizza quando i controlli sono flottanti (mappa in fullscreen) */
body.map-fullscreen-active .controls #toggleControlsBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important; /* Mantiene il flusso normale dentro l'header dei controlli */
    background: #007bff !important; /* Colore blu standard per il pulsante */
    color: white !important;
    border: 2px solid #fff !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    margin-left: 0 !important;
    margin-right: 10px !important; /* Posiziona il pulsante a sinistra con spazio */
    order: -1 !important;
    min-width: 30px !important;
    height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Assicura che l'header sia flex */
body.map-fullscreen-active .controls #eventCriteriaStats {
    display: flex !important;
    justify-content: flex-start !important; /* Allinea gli elementi a sinistra anche in fullscreen */
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
}

/* Contenuto dei controlli con transizione */
#controlsContent {
    transition: max-height 0.3s ease, opacity 0.3s ease;
    overflow: hidden;
}

/* Stato minimizzato - nasconde il contenuto e riduce l'altezza */
.controls.minimized {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    overflow: hidden;
}

.controls.minimized #controlsContent {
    display: none !important;
}

.controls.minimized #refreshBtn {
    display: none !important;
}

/* Stato espanso */
.controls:not(.minimized) {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible;
}

.controls:not(.minimized) #controlsContent {
    display: block;
    opacity: 1;
}

/* Stili specifici per modalità fullscreen */
body.map-fullscreen-active .controls {
    min-height: 50px;
}

body.map-fullscreen-active .controls.minimized {
    height: 50px !important;
    max-height: 50px !important;
}

/* Consenti agli stili inline ripristinati di prevalere: rimuovi !important */
body.map-fullscreen-active .controls:not(.minimized) {
    height: auto;
    max-height: none;
    min-height: 50px; /* allinea la minima altezza a quella della lista eventi */
}

/* In modalità fullscreen */
body.map-fullscreen-active #toggleControlsBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mostra il pulsante toggle lista eventi solo in fullscreen */
body.map-fullscreen-active #toggleEventsListBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Stile base del pulsante toggle eventi */
#toggleEventsListBtn {
    display: none; /* Nascosto di default fuori fullscreen */
    background: #007cba;
    color: white;
    border: 1px solid #005a8b;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 0; /* all'estrema sinistra */
    margin-right: 10px; /* spazio tra pulsante e titolo */
    order: -1; /* mostrato come primo elemento nell'header */
    min-width: 20px;
    height: 24px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1000;
}
#toggleEventsListBtn:hover {
    background: #005a8b;
    border-color: #004066;
}

/* Stato minimizzato: nascondi contenuto della lista eventi */
.events-list.minimized #eventsListContent {
    display: none !important;
}

body.map-fullscreen-active .events-list .events-list-header {
    cursor: move; /* Indica che l'header è trascinabile */
    background-color: var(--bg-tertiary); /* Sfondo per l'header quando flottante */
}

/* Comportamento di altezza in fullscreen */
body.map-fullscreen-active .events-list {
    display: flex;
    flex-direction: column;
}
body.map-fullscreen-active .events-list.minimized {
    height: 50px !important; /* Altezza pari all'header */
    min-height: 50px !important;
    max-height: 50px !important;
    overflow: hidden;
}
/* Consenti agli stili inline ripristinati di prevalere: rimuovi !important */
body.map-fullscreen-active .events-list:not(.minimized) {
    height: auto;
    max-height: calc(100vh - 80px); /* Valore già usato per default */
}
/* Nascondi le maniglie quando ridotta */
body.map-fullscreen-active .events-list.minimized .resize-handle {
    display: none !important;
}

/* Rende la lista eventi opaca quando ci si passa sopra con il mouse o durante interazioni */
body.map-fullscreen-active .events-list:hover,
body.map-fullscreen-active .events-list.events-list-dragging,
body.map-fullscreen-active .events-list.events-list-resizing {
    opacity: 1;
}
/* Stili per le maniglie di ridimensionamento della lista eventi flottante */
.resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: transparent; /* o un colore per debug: rgba(0,0,255,0.2); */
    z-index: 2006; /* Sopra .events-list (2005) ma sotto l'header se avesse uno z-index più alto */
    display: none; /* Nascoste di default */
}

body.map-fullscreen-active .events-list .resize-handle {
    display: block; /* Mostra le maniglie solo quando la lista è flottante */
}

/* Posizionamento e cursori specifici per ogni maniglia */
.resize-handle-n {
    top: -5px;          /* Sporge di 5px sopra */
    left: 10px;         /* Inizia 10px dal bordo sinistro (per non sovrapporsi alla maniglia NW) */
    right: 10px;        /* Finisce 10px prima del bordo destro (per non sovrapporsi alla maniglia NE) */
    height: 10px;       /* Altezza della zona cliccabile */
    width: auto;        /* La larghezza è determinata da left e right */
    cursor: ns-resize;
}
.resize-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.resize-handle-e {
    top: 10px;          /* Inizia 10px dal bordo superiore */
    bottom: 10px;       /* Finisce 10px prima del bordo inferiore */
    right: -5px;        /* Sporge di 5px a destra */
    width: 10px;        /* Larghezza della zona cliccabile */
    height: auto;       /* L'altezza è determinata da top e bottom */
    cursor: ew-resize;
}
.resize-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.resize-handle-s {
    bottom: -5px;       /* Sporge di 5px sotto */
    left: 10px;         /* Inizia 10px dal bordo sinistro */
    right: 10px;        /* Finisce 10px prima del bordo destro */
    height: 10px;       /* Altezza della zona cliccabile */
    width: auto;        /* La larghezza è determinata da left e right */
    cursor: ns-resize;
}
.resize-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.resize-handle-w {
    top: 10px;          /* Inizia 10px dal bordo superiore */
    bottom: 10px;       /* Finisce 10px prima del bordo inferiore */
    left: -5px;         /* Sporge di 5px a sinistra */
    width: 10px;        /* Larghezza della zona cliccabile */
    height: auto;       /* L'altezza è determinata da top e bottom */
    cursor: ew-resize;
}
.resize-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }

/* Per evitare che il contenuto di .events-list (come la scrollbar di .events-container)
   copra le maniglie di ridimensionamento laterali e inferiori, potremmo
   dare a .events-list un piccolo padding quando è flottante,
   e posizionare le maniglie all'interno di quel padding.
   Oppure, assicurarsi che lo z-index delle maniglie sia sufficiente.
   L'approccio attuale con posizionamento leggermente "fuori" (-5px) dovrebbe funzionare.
*/

/* Opzionale: rendere le maniglie più visibili durante il debug */
/*
body.map-fullscreen-active .events-list .resize-handle {
    background-color: rgba(255, 0, 0, 0.3);
    border: 1px solid red;
}
*/




#left-panel-bottom-content {
    flex-basis: 40%; /* Altezza iniziale per il contenuto inferiore */
    min-height: 200px; /* Altezza minima per il contenuto inferiore */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Per contenere gli elementi flessibili interni */
}

/* Assicuriamoci che .split-container e .chart-container si comportino bene dentro #left-panel-bottom-content */
.split-container {
    /* height: 400px; Rimuoviamo altezza fissa, o la mettiamo come flex-basis */
    flex-basis: 300px; /* Altezza base per split-container, può essere modificata o diventare min-height */
    flex-shrink: 0; /* Non si restringe di default */
    flex-grow: 1; /* Ora questo contenitore crescerà per riempire lo spazio */
    /* ... stili esistenti ... */
}

#details-title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

#details-content {
    flex-grow: 1;
    font-size: 0.8em;
    line-height: 1.4;
}

#details-content p {
    margin-top: 0;
}

.resizer {
    background-color: var(--resizer-color);
    flex-basis: 3px; /* Width of the resizer handle - Ridotta */
    flex-shrink: 0;
    flex-grow: 0;
    cursor: col-resize; /* Cursor to indicate it's draggable */
    margin: 0 5px; /* Optional margin around the resizer */
    border-radius: 5px;
}

.resizer:hover {
    background-color: var(--resizer-hover);
}

.right-panel {
    /* flex: 1; */ /* Initial flex value, will be controlled by JS */
    flex-basis: 40%; /* Example initial basis */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Ridotto da 10px */
    overflow: hidden; 
    min-width: 250px; /* Minimum width */
}

.controls {
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--shadow-color); /* Usa variabile tema */
    padding: 8px; /* Ridotto da 10px */
    border: 1px solid var(--border-light);
    /* Impostiamo un'altezza massima per i controlli, circa 1/3 dell'altezza del viewport */
    /* max-height: calc(33vh - 20px); Rimosso: l'altezza sarà gestita da flex-basis e min-height */
    overflow-y: auto; /* Abilita lo scroll se il contenuto eccede */
    min-height: 100px; /* Altezza minima per i controlli */
    position: relative; /* Necessario per posizionare #refreshBtn in modo assoluto al suo interno */
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}



/* Stili specifici per modalità fullscreen */
body.map-fullscreen-active .controls #eventCriteriaStats {
    background: var(--bg-tertiary);
    margin: -8px -8px 5px -8px;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid var(--border-light);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Ridotto da 220px */
    gap: 8px; /* Ridotto da 12px */
    margin-bottom: 8px; /* Ridotto da 12px */
}

.filter-column {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Ridotto da 8px */
}

.filter-group {
    margin: 0;
    /* Prova a mettere alcuni gruppi di filtri in linea se possibile */
    /* display: flex; */ /* Decommenta e adatta se vuoi elementi in linea */
    /* flex-wrap: wrap; */
    /* align-items: center; */
    /* gap: 5px; */
}

.filter-group label {
    display: block;
    margin-bottom: 2px; /* Ridotto da 3px */
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.75em; /* Ridotto da 0.85em */
}

/* Nuovo stile per arrangiare gruppi di filtri in una riga */
.filter-group-row {
    display: flex;
    gap: 8px; /* Spazio tra i gruppi di filtri nella riga, allineato con filter-grid gap */
    align-items: flex-start; /* Allinea gli elementi all'inizio dell'asse trasversale (verticale) */
}

.filter-group-row .filter-group {
    flex: 0 1 auto; /* Modificato da flex: 1 per permettere il restringimento */
    min-width: 0; /* Permette agli elementi flex di restringersi correttamente se necessario */
}

/* Assicura che gli input all'interno dei gruppi in riga si comportino bene */
.filter-group-row .filter-group input[type="number"] {
    width: 100%; /* Gli input dovrebbero riempire il loro contenitore .filter-group */
}

/* Nuova classe per un gruppo di filtri in colonna con sfondo boxed */
.filter-group-column-boxed {
    background: var(--bg-secondary); /* Sfondo usare variabile tema */
    padding: 8px;              /* Padding interno, come .boxed-filter-row */
    border-radius: 4px;        /* Angoli arrotondati, come .boxed-filter-row */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Spazio verticale tra i .filter-group interni */
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Stile per il box grigio attorno a una riga di filtri specifici */
.boxed-filter-row {
    background: var(--bg-secondary); /* Grigio chiaro usando variabile tema */
    padding: 8px;              /* Spazio interno al box */
    border-radius: 4px;        /* Angoli arrotondati per il box */
    border: 1px solid var(--border-light);
    /* Il gap esistente in .filter-group-row gestirà lo spazio tra gli elementi interni */
}

.filter-group input[type="number"],
.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group select {
    width: 100%;
    padding: 3px; /* ulteriormente ridotto */
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.1;
    min-height: 28px; /* ulteriormente ridotta */
    background: var(--input-bg);
    color: var(--text-primary);
    box-sizing: border-box;
    overflow: visible; /* evita che pseudo-elementi vengano tagliati */
}
/* Spazio per l'icona calendario personalizzata */
.filter-group input[type="date"] {
    padding-right: var(--date-icon-space);
}
/* Spazio aggiuntivo coerente per il campo data fine */
#endDate {
    padding-right: var(--date-icon-space);
}

/* Allinea i bottoni all'interno di .input-group all'altezza degli input (più contenuti) */
.input-group .clear-filter-btn,
.input-group .refresh-icon-btn,
.date-preset-btn {
    padding: 3px 8px;
    height: 28px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* Correzione per le spin buttons (WebKit) per evitare punte tagliate */
input[type="number"] {
    appearance: textfield; /* standard property for compatibility */
    -webkit-appearance: textfield; /* rende l'aspetto più prevedibile */
    -moz-appearance: textfield; /* Firefox compatibility */
    padding-right: 26px; /* lascia spazio alle frecce */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0; /* reset margini */
    padding: 0; /* reset padding */
    width: 18px; /* larghezza fissa per evitare clipping orizzontale */
    height: auto; /* lascia che la dimensione si adatti verticalmente */
    transform: scale(0.95); /* leggero ridimensionamento per evitare punte tagliate */
    transform-origin: center;
    opacity: 1;
}

/* Mantieni l'inversione colore per tema scuro, ma senza alterare le dimensioni */
[data-theme="dark"] input[type="number"]::-webkit-inner-spin-button,
[data-theme="dark"] input[type="number"]::-webkit-outer-spin-button {
    filter: invert(1) brightness(1.2);
}

/* Adattamento icona calendario per il tema scuro */
/* Adatta lo schema di colore al tema (fallback cross-browser) */
input[type="date"] {
    color-scheme: var(--color-scheme);
}
/* Stile indicatore calendario generico (WebKit) per evitare sovrapposizioni visive */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent; /* evita quadrati scuri/chiari di sfondo */
    width: 16px;
    height: 16px;
    margin-right: 6px; /* piccolo margine dal bordo destro */
    padding: 0;
}

/* Adattamento icona calendario per il tema scuro su WebKit */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    filter: invert(1) brightness(1.1) contrast(1.1);
    opacity: 0.9;
}

/* Stile specifico per restringere gli input di magnitudo e profondità */
.filter-group .input-group input[type="number"]#magnitudeMin,
.filter-group .input-group input[type="number"]#magnitudeMax,
.filter-group .input-group input[type="number"]#depthMin,
.filter-group .input-group input[type="number"]#depthMax {
    width: 70px; /* Larghezza ridotta per i campi magnitudo e profondità */
    flex-grow: 0; /* Impedisce all'input di espandersi per riempire lo spazio nel .input-group */
}

.input-group {
    display: flex;
    align-items: center;
}

.input-group input {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .clear-filter-btn,
.input-group .refresh-icon-btn {
    padding: 3px; /* Ridotto da 4px */
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    /* border-left: none; Rimosso */
}

.input-group .clear-filter-btn + input {
    /* border-top-left-radius: 0; Rimosso */
    /* border-bottom-left-radius: 0; Rimosso */
    /* border-left: none; Rimosso */
    border-radius: 3px; /* Aggiunto per angoli arrotondati su tutti i lati dell'input */
}.input-group .clear-filter-btn {
    /* border-right: none; Rimosso */
    /* border-top-right-radius: 0; Rimosso */
    /* border-bottom-right-radius: 0; Rimosso */
    /* border-top-left-radius: 3px; Redundant if border-radius: 3px is used for all corners */
    /* border-bottom-left-radius: 3px; Redundant if border-radius: 3px is used for all corners */
    border-radius: 3px; /* Assicura che tutti gli angoli siano arrotondati */
    margin-right: 5px; /* Aggiunge spazio tra il pulsante e l'input */
    /* Rimuoviamo border-left: none se presente per errore da copia-incolla precedente */
    /* border-left: 1px solid #ddd; */ /* Assicuriamo che ci sia un bordo sinistro */
}

/* Styles for the new "set start date to year start" button */
.date-preset-btn {
    padding: 2px 4px; /* Mantenuto piccolo come da richiesta precedente */
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    font-size: 11px; /* Consistent with input font size */
    line-height: 1; /* For better vertical alignment of text/icon */
    /* Rimosse le proprietà per la fusione con l'input, ora è un pulsante standalone */
    /* border-right: none; */
    /* border-top-left-radius: 3px; */
    /* border-bottom-left-radius: 3px; */
    border-radius: 3px; /* Arrotondamento standard per tutti gli angoli */
    height: 28px; /* Allineato con gli input */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.date-preset-btn:hover {
    background: var(--hover-bg);
}

/* Pulsante icona per aprire il calendario (esterno all'input) */
.date-open-btn {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--border-light);
    border-left: none; /* si aggancia all'input */
    height: 28px;
    min-width: 32px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.date-open-btn:hover {
    background-color: var(--hover-bg);
}

/* Nasconde l'indicatore nativo solo per i due campi principali */
#startDate::-webkit-calendar-picker-indicator,
#endDate::-webkit-calendar-picker-indicator {
    display: none;
}

/* Ripristino: padding destro e larghezza fissa (non adattiva) */
#startDate,
#endDate {
    padding-right: 12px !important;
    width: 83px;          /* larghezza target del campo */
    flex: 0 0 83px;       /* non espandere nel flex container */
    min-width: 30px;      /* limite minimo per leggibilità */
}


.area-buttons {
    display: flex;
    gap: 3px; /* Ridotto da 4px */
    margin-bottom: 4px; /* Ridotto da 6px */
}

.area-btn {
    padding: 4px 8px; /* Ridotto da 6px 10px */
    border: 1px solid #007bff;
    background-color: white;
    color: #007bff;
    border-radius: 3px; /* Ridotto */
    cursor: pointer;
    /* flex-grow: 1; Rimosso per permettere ai bottoni di avere una larghezza basata sul contenuto e padding */
    font-size: 0.75em; /* Ridotto da 0.85em */
}

.area-btn.active {
    background: var(--primary);
    color: var(--button-text);
}

/* Icona SVG per il pulsante "Filtra per stazione" */
#toggleStationSearchPanelBtn::before {
    content: "";
    display: inline-block;
    width: 1.25em; /* Ingrossa l'icona */
    height: 1.25em; /* Ingrossa l'icona */
    margin-right: 0; /* Nessun testo accanto all'icona */
    vertical-align: middle;
    opacity: 0.95;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* Funnel + pin (monocolore), usa currentColor per adattarsi al tema */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M3%204h18l-7%208v6l-4%202v-8z%22/%3E%3Ccircle%20cx=%2219%22%20cy=%228%22%20r=%223%22/%3E%3Cpath%20d=%22M19%2011v7%22/%3E%3C/svg%3E");
}

/* Rende il pulsante icon-only coerente con i temi */
#toggleStationSearchPanelBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 4px 6px; /* Compatto ma cliccabile */
    background-color: var(--button-bg);
    color: var(--icon-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

#toggleStationSearchPanelBtn:hover {
    background-color: var(--hover-bg);
}

/* Stile per il filter-group che contiene il pulsante data, la label e l'input data */
#startDateFilterGroup {
    display: flex;
    align-items: center; /* Allinea verticalmente il pulsante, la label e l'input */
    gap: 5px; /* Spazio tra pulsante, label e input */
}

/* Stile per allineare l'altezza dei pulsanti nella modale di ricerca stazione */
#stationSearchModal .input-group .area-btn {
    height: 34px; /* Allineata all'altezza dell'input (font-size: 1em + padding: 8px*2 + border: 1px*2) */
    display: inline-flex; /* Abilita flexbox per il contenuto del pulsante */
    align-items: center; /* Centra verticalmente il testo/contenuto */
    justify-content: center; /* Opzionale: centra orizzontalmente il testo se necessario */
    padding-top: 0; /* Rimuove il padding superiore per un controllo preciso dell'altezza */
    padding-bottom: 0; /* Rimuove il padding inferiore */
    /* Mantieni gli altri stili .area-btn che vuoi conservare o sovrascrivi se necessario */
}

.latlon-grid {
    display: grid;
    /* grid-template-columns: 1fr auto 1fr; Rimosso per layout a colonna singola */
    grid-template-columns: auto minmax(0, 1fr); /* Limita la larghezza massima */
    gap: 1px; /* Ridotto da 2px per rendere la griglia più stretta */
    align-items: center;
}

.latlon-grid input {
    width: 40px; /* Ulteriore riduzione */
    min-width: 20px;
    padding: 2px; /* Ridotto da 3px */
    font-size: 10px;
}

/* New styles for label and input groups */
.latlon-input-group {
    display: contents; /* Fa in modo che label e input siano figli diretti della griglia */
}

.latlon-input-group label {
    grid-column: 1; /* Posiziona la label nella prima colonna */
    font-size: 0.75em;
    font-weight: bold;
    color: var(--text-primary);
    transition: color 0.15s ease;
}

/* Specific placement for lat/lon groups */
/* Rimosse le regole di posizionamento specifiche per grid-row e justify-self, 
   l'ordine nel DOM e il nuovo grid-template-columns gestiranno il layout.
   Ogni input sarà nella seconda colonna della sua riga. */
.latlon-input-group input {
    grid-column: 2; /* Posiziona l'input nella seconda colonna */
}

/* Text alignment for text INSIDE specific input boxes */
/* L'allineamento del testo di default (left) va bene per questa configurazione.
   Rimuoviamo text-align: center se non più desiderato. */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 8px; /* Spazio tra label testuale e switch */
    margin-bottom: 3px; /* Ridotto */
}

/* Rimosso: .checkbox-group input[type="checkbox"] { transform: scale(0.8); } perché l'input è ora nascosto */

.checkbox-label {
    font-weight: normal;
    font-size: 0.75em; /* Ridotto da 0.8em */
}

/* Wrapper per l'input filterString e il pulsante Aggiorna principale */
.filter-string-and-refresh-wrapper {
    display: flex;
    align-items: center; /* Allinea verticalmente l'input group e il pulsante */
    /* justify-content: space-between; Rimosso per usare margin-left: auto sul pulsante */
    gap: 8px; /* Spazio tra l'input group e il pulsante "Aggiorna" */
}

.filter-string-and-refresh-wrapper .input-group {
    flex-grow: 1; /* L'input group prende lo spazio disponibile */
}

/* Stile modificato per #refreshBtn per renderlo più piccolo e in linea */
#refreshBtn {
    position: absolute; /* Posizionamento assoluto rispetto a .controls */
    bottom: 10px;       /* Distanza dal basso di .controls */
    right: 10px;        /* Distanza da destra di .controls */
    width: 36px;        /* Larghezza del pulsante */
    height: 36px;       /* Altezza del pulsante */
    padding: 0;         /* Rimuoviamo il padding per far centrare l'icona */
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%; /* Pulsante rotondo */
    cursor: pointer;
    font-size: 1.2em;   /* Dimensione dell'icona, da aggiustare se necessario */
    display: flex;      /* Per centrare l'icona */
    align-items: center;/* Centra verticalmente l'icona */
    justify-content: center; /* Centra orizzontalmente l'icona */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombra per dare profondità */
    transition: background-color 0.2s ease-in-out; /* Transizione per hover */
}

#refreshBtn:hover {
    background-color: #0056b3;
}

.events-list {
    position: relative; /* Necessario per posizionare il pulsante "torna su" rispetto a questo contenitore */
    /* flex: 1; Rimosso: l'altezza sarà gestita da flex-basis e min-height */
    background: var(--bg-secondary);
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--shadow-color); /* Usa variabile tema */
    padding: 8px; /* Ridotto da 15px */
    display: flex;
    flex-direction: column;
    /* min-height: 0; Rimosso */
    min-height: 150px; /* Altezza minima per la lista eventi */
    overflow: hidden; /* Per gestire lo scroll interno di .events-container */
    border: 1px solid var(--border-light);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Rende #eventsListContent un contenitore flessibile verticale, così
   .events-container può occupare lo spazio rimanente e scorrere correttamente */
#eventsListContent {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* Consente ai figli flessibili di ridursi e abilitare lo scroll */
}

#scrollToTopBtn {
    position: absolute; 
    bottom: 15px; /* Leggermente aggiustato per estetica */
    right: 15px;  /* Leggermente aggiustato per estetica */
    background: var(--button-bg);
    color: var(--button-text);
    border: none;
    width: 40px;  /* Dimensione fissa per renderlo rotondo */
    height: 40px; /* Dimensione fissa per renderlo rotondo */
    border-radius: 50%; /* Per renderlo rotondo */
    padding: 0; /* Rimuoviamo il padding per controllare meglio le dimensioni con width/height */
    cursor: pointer;
    display: none; 
    z-index: 1000;
    font-size: 20px; /* Dimensione dell'icona/freccia */
    line-height: 40px; /* Per centrare verticalmente la freccia (se è testo) */
    text-align: center; /* Per centrare orizzontalmente la freccia (se è testo) */
    box-shadow: 0 2px 5px var(--shadow-strong); /* Usa variabile tema */
    transition: background-color 0.3s ease; /* Transizione per hover */
}

#scrollToTopBtn:hover {
    background-color: rgba(100, 100, 100, 0.9); /* Grigio leggermente più scuro e meno trasparente in hover */
}

.right-panel .controls {
    flex-basis: 250px; /* Altezza base iniziale per i controlli, può essere modificata da JS */
    flex-shrink: 0; /* Non deve restringersi */
    /* min-height e overflow-y già presenti e utili */
}

.right-panel .events-list {
    position: relative; /* Necessario per posizionare il pulsante "torna su" rispetto a questo contenitore */
    /* flex-grow: 1; Rimosso: l'altezza sarà gestita da flex-basis e dal resizer */
    flex-basis: calc(100% - 250px - 5px); /* Altezza base iniziale, calcolata sottraendo .controls e resizer. Sarà modificata da JS */
    /* Se .controls ha flex-basis: 250px e il resizer è 5px, questo è un esempio.
       La gestione effettiva sarà fatta da JavaScript. */
    /* min-height: 150px; è già definito sopra */
    /* overflow: hidden; e display:flex; flex-direction:column; già presenti */
}



.events-list-header {
    display: flex;
    /* justify-content: space-between; Rimosso per un controllo più granulare con margin-left: auto e order */
    /* Se non specificato, il default è flex-start, che va bene con la logica di margin-left: auto */
    align-items: center;
    gap: 10px; /* Aggiunto gap per spaziare il titolo, il pulsante CSV e i controlli di ordinamento */
    margin-bottom: 8px; /* Adjust as needed for spacing below the header */
}

.events-list-header h3 {
    margin: 0; /* Remove default h3 margins to prevent alignment issues */
    font-size: 0.95em; /* Ridotto per rendere la label meno prominente */
}

/* Tooltip icon next to the events list title */
.events-list-header .events-tooltip-icon {
    margin-left: 8px;
    cursor: help;
    font-size: 0.95em;
    color: var(--icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--button-bg);
    border: 1px solid var(--border-color);
    user-select: none;
}

.events-list-header .events-tooltip-icon:hover {
    background: var(--hover-bg);
}

/* Ensure sorting-controls within events-list-header doesn't have conflicting bottom margin if not desired */
/* .events-list-header .sorting-controls { margin-bottom: 0; } */

/* Stile per il nuovo pulsante Download CSV */
.download-btn {
    padding: 5px 6px; /* Leggermente aggiustato per l'icona */
    font-size: 1.1em;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--button-text);
    cursor: pointer;
    line-height: 1;
    min-width: 30px; /* Larghezza minima per non farlo diventare troppo piccolo */
}
.sorting-controls {
    display: flex;
    gap: 5px; /* Ridotto */
    align-items: center;
    /* margin-bottom: 5px; Rimosso, il margin-bottom di .events-list-header è sufficiente */
}

.sorting-controls label {
    font-size: 0.8em; /* Ridotto */
    font-weight: bold;
}

.sorting-controls select,
.sorting-controls button {
    padding: 4px; /* Ridotto */
    font-size: 0.8em; /* Ridotto */
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    color: var(--text-primary);
}

/* Label ultimo aggiornamento: usa colori del tema */
#lastRefreshTime {
    color: var(--text-secondary);
}

/*
 Specifiche per l'allineamento nell'header della lista eventi.
 Assumendo che nell'HTML .download-btn sia prima di .sorting-controls come figlio di .events-list-header.
 Se l'ordine HTML è diverso, la proprietà 'order' potrebbe non essere necessaria o diversa.
*/
.events-list-header > .sorting-controls {
    order: 1; /* Assicura che i controlli di ordinamento vengano prima del pulsante CSV (se necessario) */
    margin-left: auto; /* Spinge questo elemento (e quelli che lo seguono nell'ordine flex) a destra */
}
.events-list-header > .download-btn {
    order: 2; /* Assicura che il pulsante CSV venga dopo i controlli di ordinamento */
}

.events-container {
    flex: 1;
    overflow-y: auto; 
    margin-top: 5px; /* Ridotto da 10px */
    /* Scrollbar cross-browser */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); /* Firefox */
}
/* WebKit/Chromium scrollbar for events list */
.events-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.events-container::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
.events-container::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid var(--scrollbar-track); /* crea effetto più sottile e distaccato */
}

.event-item {
    padding: 6px; /* Ridotto da 10px */
    margin-bottom: 4px; /* Ridotto da 8px */
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

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

.event-item.selected {
    background-color: var(--bg-tertiary);
    border-left: 3px solid var(--button-text);
}
/* Rimosso .event-main-info e .event-header dato che la struttura è cambiata */

.event-line-1 {
    display: flex;
    justify-content: space-between; /* Allinea location a sx e magnitude a dx */
    align-items: center; /* Allineamento verticale al centro */
    margin-bottom: 3px; /* Spazio prima della riga dell'ora */
    font-size: 0.9em; /* Dimensione font per la prima riga informativa */
}

.event-location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px; /* Spazio per non toccare la magnitudo */
    flex-grow: 1; /* Permette alla location di prendere spazio disponibile */
    min-width: 0; /* Necessario per flexbox e text-overflow: ellipsis */
    /* font-weight: bold; Rimosso: ora condizionale tramite classe */
}

.event-magnitude-info {
    /* font-weight: bold; Rimosso per non avere il grassetto */
    white-space: nowrap; /* Evita che la magnitudo vada a capo */
    flex-shrink: 0; /* Impedisce alla magnitudo di restringersi */
}

/* Stile per magnitudo >= 4, applicato a location e magnitude-info */
.event-location.magnitude-highlight,
.event-magnitude-info.magnitude-highlight {
    font-weight: bold;
}

.event-line-2 {
    margin-bottom: 4px; /* Spazio prima dei dettagli lat/lon/prof */
}

.event-time {
    font-size: 0.8em; /* Dimensione font per l'ora */
    color: var(--text-secondary); /* Adattato al tema per contrasto in dark */
}

.event-details {
    font-size: 0.75em; /* Ridotto da 0.8em */
    color: var(--text-muted); /* Adattato al tema per migliore leggibilità */
    line-height: 1.3; /* Ridotto */
    clear: both; /* Assicura che i dettagli vadano sotto se ci fossero float, anche se qui usiamo flex */
}

.event-details span {
    margin-right: 5px; /* Ridotto da 8px */
}

/* Specific adjustments for filter buttons if needed */
#applyFiltersBtn, #clearAllFiltersBtn {
    padding: 4px 10px; /* ulteriormente ridotto per abbassare i pulsanti */
    font-size: 0.85em; /* invariato */
    border: 1px solid var(--border-color);
    background: var(--button-bg);
    color: var(--button-text);
    border-radius: 3px;
}


.event-details span:last-child {
    margin-right: 0;
}

.loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.error {
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto;
    }
    
    .left-panel {
        order: 2;
    }
    
    .right-panel {
        order: 1;
    }
    
    .map-container {
        height: 400px;
    }
}

/* Stili per la modalità fullscreen dell'immagine RS */
body.rs-image-fullscreen-active header,
body.rs-image-fullscreen-active .right-panel,
body.rs-image-fullscreen-active .left-panel > #map-container,
body.rs-image-fullscreen-active .left-panel > .resizer-h,
body.rs-image-fullscreen-active .resizer, /* Resizer principale tra left e right panel */
body.rs-image-fullscreen-active #mappa_listaStazioni_container:not(.station-map-dragging):not(.station-map-resizing),
body.rs-image-fullscreen-active #left-panel-bottom-content > .split-container > .resizer-v {
    display: none !important;
}

/* NEL TUO FILE CSS */
body.rs-image-fullscreen-active #rsImage:hover {
    cursor: none; /* O un altro cursore personalizzato */
}


body.rs-image-fullscreen-active .container {
    padding: 0;
    height: 100vh; /* Occupa tutta l'altezza del viewport */
}

body.rs-image-fullscreen-active .left-panel {
    flex-basis: 100% !important;
    height: 100% !important;
}

body.rs-image-fullscreen-active #left-panel-bottom-content {
    flex-basis: 100% !important;
    height: 100% !important;
}

body.rs-image-fullscreen-active .split-container {
    flex-basis: 100% !important;
    height: 100% !important;
}

body.rs-image-fullscreen-active #rsImage_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2500; /* Sopra altri elementi fullscreen e modali */
    background-color: #000; /* Sfondo nero */
    display: flex;
    flex-direction: column;
    padding: 0;
    border: none;
    border-radius: 0;
    flex-basis: 100% !important;
}

body.rs-image-fullscreen-active #rsImage {
    flex-grow: 1;
    background-color: #000;
    border: none;
    padding: 20px; /* Padding attorno all'immagine */
    display: flex;
    justify-content: center;
    align-items: center;
}

body.rs-image-fullscreen-active #rsImage img {
    max-width: calc(100% - 40px); /* Considera il padding */
    max-height: calc(100% - 40px); /* Considera il padding */
    object-fit: contain;
    cursor: zoom-out; /* Indica che si può cliccare per uscire */
}

body.rs-image-fullscreen-active #rs-image-footer {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2510;
    background-color: rgba(50, 50, 50, 0.7);
    border-radius: 5px;
    padding: 5px 10px;
}

body.rs-image-fullscreen-active #rs-image-footer .rs-image-btn {
    background-color: #f0f0f0; /* Sfondo chiaro per il pulsante */
    color: #333;             /* Testo scuro per contrasto con lo sfondo chiaro del pulsante */
    border: 1px solid #ccc;   /* Bordo grigio chiaro */
    padding: 3px 8px;         /* Leggero aumento del padding per migliore cliccabilità */
}
body.rs-image-fullscreen-active #rs-image-footer .rs-image-btn:hover {
    background-color: #e0e0e0; /* Sfondo leggermente più scuro in hover */
    color: #000;             /* Testo nero in hover per mantenere il contrasto */
}

/* Stile per i pulsanti RS/Zoom attivi nel footer fullscreen (escluso toggleMagnifierBtn che ha la sua .active) */
body.rs-image-fullscreen-active #rs-image-footer .rs-image-btn.active {
    background-color: #007bff; /* Sfondo blu quando attivo */
    color: white;              /* Testo bianco quando attivo */
    border-color: #007bff;     /* Bordo blu quando attivo */
}

body.rs-image-fullscreen-active #rs-image-footer .rs-image-btn:disabled {
    background-color: #dcdcdc; /* Sfondo grigio chiaro per disabilitato */
    color: #888;             /* Testo grigio scuro */
    border-color: #bbb;
    cursor: not-allowed;
}

.rs-image-fullscreen-toggle-group {
    display: flex;
    align-items: center;
    gap: 5px; /* Spazio tra label e pulsante */
    margin-left: auto; /* Spinge questo gruppo all'estrema destra del footer */
}


body.rs-image-fullscreen-active #toggleFullscreenMapBtn { /* Nasconde il pulsante fullscreen della mappa */
    display: none !important;
}

body.rs-image-fullscreen-active .exit-fullscreen-btn { /* Assicura visibilità del pulsante X generico */
    display: flex !important;
    z-index: 2520; /* Sopra il footer dell'immagine RS */
}

/* Stili per la lente di ingrandimento */
.magnifier-lens {
    position: absolute;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    /* Rimuovi background-size: 300% 300%; - sarà impostato dinamicamente dal JavaScript */
    pointer-events: none;
    z-index: 2600;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    display: none;
}

.magnifier-active {
    cursor: crosshair; /* Cambiato da 'none' a 'crosshair' per un cursore più preciso */
}

.magnifier-active .magnifier-lens {
    display: block;
}

body.rs-image-fullscreen-active #toggleMagnifierBtn {
    color: #fff;
    border-color: #aaa;
}

body.rs-image-fullscreen-active #toggleMagnifierBtn.active {
    background-color: #007bff;
    border-color: #007bff;
}

/* Marker colors based on magnitude */
.magnitude-low {
    background-color: #28a745 !important;
}

.magnitude-medium {
    background-color: #ffc107 !important;
}

.magnitude-high {
    background-color: #fd7e14 !important;
}

.magnitude-very-high {
    background-color: #dc3545 !important;
}
.split-container {
    display: flex;
    /* gap: 10px; Rimosso gap per far aderire il resizer ai pannelli */
    /* height: 400px;  Rimosso, ora è flex-basis */
    overflow: hidden; /* Necessario per contenere i pannelli flessibili */
}



#mappa_listaStazioni_container,
#rsImage_container {
    display: flex;
    flex-direction: column;
    /* flex: 1; */ /* Sarà controllato da JS */
    flex-basis: 50%; /* Base iniziale */
    min-width: 150px; /* Larghezza minima per la mappa stazioni */
    /* Mantieni sempre visibile il footer anche con altezza ridotta del box */
    min-height: 35px; /* Altezza minima pari all'altezza del footer */
    position: relative; /* Per posizionare il footer assoluto al fondo */
    padding-bottom: 35px; /* Riserva spazio per il footer fisso in fondo */
    overflow: hidden; /* Per contenere la mappa Leaflet */
}

#mappa_listaStazioni { /* Div effettivo della mappa */
    flex-grow: 1;
    min-height: 0; /* Per corretto flex-grow */
    position: relative; /* Per il corretto funzionamento di Leaflet */
}

.resizer-v {
    flex-basis: 3px; /* Larghezza del ridimensionatore - Ridotta */
    flex-shrink: 0;
    flex-grow: 0;
    background-color: var(--resizer-color);
    cursor: col-resize;
    /* margin: 0 5px; Se si vuole spazio attorno al resizer */
    border-left: 1px solid var(--resizer-border);
    border-right: 1px solid var(--resizer-border);
}

.resizer-v:hover {
    background-color: var(--resizer-hover);
}

#rsImage { /* Div effettivo per il contenuto dell'immagine RS */
    flex-grow: 1;
    min-height: 0; /* Per corretto flex-grow */
    min-width: 0; /* Per corretto flex-grow in larghezza se necessario */
    display: flex; /* Per centrare il contenuto (immagine o testo) */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    background-color: var(--bg-secondary); /* Adattato al tema */
    padding: 5px; /* Piccolo padding interno */
    overflow: hidden; /* Assicura che l'immagine non debordi */
    border: 1px solid var(--border-light); /* Bordo coerente */
    border-radius: 4px; /* Angoli arrotondati */
    cursor: pointer; /* Cursore a forma di dito per indicare che è cliccabile */
}

#station-map-footer,
#rs-image-footer {
    height: 35px; /* Altezza fissa del footer */
    background-color: var(--bg-secondary); /* Adatta al tema */
    border-top: 1px solid var(--border-color); /* Bordo superiore coerente */
    display: flex; /* Usa flexbox per allineare i contenuti */
    align-items: center; /* Allinea verticalmente al centro */
    /* justify-content: flex-start; Rimosso per permettere l'allineamento personalizzato */
    gap: 8px; /* Spazio tra i pulsanti e lo span */
    padding: 0 8px;
    font-size: 0.7em; /* Testo più piccolo per i footer secondari */
    color: var(--text-primary);
    position: absolute; /* Fissa il footer al fondo del contenitore */
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

/* Stile per il conteggio delle stazioni nei footer delle mappe stazioni */
.station-count-footer {
    margin-right: auto; /* Spinge il conteggio a sinistra, lasciando spazio per i toggle a destra */
    font-weight: bold;
}

#rs-image-footer .rs-image-btn {
    padding: 2px 6px; /* Padding ridotto per pulsanti piccoli */
    font-size: 0.9em; /* Dimensione font relativa al genitore (0.7em * 0.9) */
    border: 1px solid var(--border-color); /* Bordo coerente col tema */
    background-color: var(--button-bg); /* Sfondo coerente col tema */
    color: var(--button-text); /* Testo coerente col tema */
    border-radius: 3px;
    cursor: pointer;
}

#rs-image-footer .rs-image-btn:disabled {
    background-color: #e9ecef; /* Sfondo più scuro per disabilitato */
    color: #adb5bd; /* Testo più chiaro */
    cursor: not-allowed;
}

#rs-image-footer .rs-image-btn.active {
    background-color: #007bff; /* Blu per il pulsante attivo */
    color: white;
    border-color: #007bff;
}

/* Allinea il pulsante toggle fullscreen dell'immagine RS a destra */
#rs-image-footer #toggleRsImageFullscreenBtn {
    margin-left: auto;
}

/* Stili per l'immagine dentro #rsImage e per i messaggi di testo */
#rsImage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Scala l'immagine per adattarsi mantenendo le proporzioni */
    display: block; /* Rimuove eventuale spazio extra sotto l'immagine */
    cursor: pointer; /* Cursore a forma di dito anche sull'immagine */
}

/* Tooltip per l'immagine RS */
#rsImage {
    position: relative; /* Assicuriamoci che il div abbia position relative */
}

#rsImage::after {
    content: attr(data-tooltip); /* Useremo un attributo data per il testo */
    display: none; /* Nascosto di default */
    position: fixed; /* Posizione fissa rispetto alla viewport */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8em;
    pointer-events: none; /* Permette di cliccare attraverso il tooltip */
    z-index: 1000; /* Assicura che il tooltip sia sopra altri elementi */
    transform: translate(10px, 10px); /* Piccolo offset dal cursore */
}

#rsImage:hover::after {
    display: block; /* Mostra il tooltip al passaggio del mouse */
}

#rsImage p { /* Stile per i messaggi di caricamento/errore/segnaposto */
    text-align: center;
    color: var(--text-primary);
    font-size: 0.9em;
}

/* Stili per il contenuto del popup della mappa principale */
.popup-content {
    max-width: 280px; /* Limita la larghezza massima del popup */
    font-size: 13px;
}

.popup-content h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1em;
}

.popup-content p {
    margin: 4px 0;
}

.popup-rs-image-container {
    margin-top: 10px;
    text-align: center; /* Centra l'immagine se è più piccola del contenitore */
}
.popup-rs-image {
    max-width: 100%; /* Assicura che l'immagine sia responsiva all'interno del popup */
    max-height: 150px; /* Limita l'altezza dell'immagine per evitare popup troppo grandi */
    height: auto; /* Mantiene le proporzioni */
    border: 1px solid #ddd;
    border-radius: 3px;
}

/* Stile per i marker triangolari delle stazioni */
/* Regola generale per elementi con classe .station-triangle-marker (usata dal divIcon nella mappa principale e dallo span nella modale) */
.station-triangle-marker { 
    font-size: 20px; /* Dimensione base del triangolo */
    /* color: #0056b3;  Rimosso colore fisso, sarà gestito da variabile CSS o selettori più specifici */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Ombra per migliore leggibilità */
    /* transition: color 0.2s ease, transform 0.2s ease, font-size 0.2s ease; Rimosso da qui */
    line-height: 1; /* Assicura che il carattere sia ben posizionato verticalmente */
    text-align: center; /* Centra il carattere ▲ orizzontalmente */
    font-weight: bold; 
    cursor: pointer; 
}



/* Stili per lo SPAN effettivo che contiene il triangolo (▲) */
/* Questa regola si applicherà sia allo span nella mappa principale che a quello nella modale */
.triangle-element {
    display: inline-block; /* Necessario per un corretto funzionamento di transform su elementi inline come span */
    transition: color 0.2s ease, transform 0.2s ease, font-size 0.2s ease; /* Transizione applicata qui */
}

/* Stili per lo SPAN effettivo che contiene il triangolo (▲) nella MAPPA PRINCIPALE */
.station-triangle-marker .triangle-element { /* .triangle-element è lo span dentro al div.station-triangle-marker */
    color: var(--station-marker-color, #0056b3); /* Colore base dalla variabile CSS, fallback blu */
    font-size: inherit; /* Eredita font-size dal genitore .station-triangle-marker (20px) */
}

/* Hover per lo SPAN nella MAPPA PRINCIPALE (quando si passa sopra il divIcon genitore) */
.station-triangle-marker:hover .triangle-element {
    /* color: #dc3545; */ /* Rimosso: Non cambia più colore su hover */
    transform: scale(1.5); /* Aumenta ulteriormente la dimensione */
}

/* Stile per il contenitore dell'icona personalizzata (triangolo + label) nella mappa modale */
.leaflet-station-icon > div { /* Selettore per il div wrapper interno all'html dell'icona */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Allinea il contenuto (triangolo) in alto */
    line-height: 1; /* Per un controllo più stretto dell'altezza */
    text-align: center;
    width: 100%;
    height: 100%;
}

/* Stili per lo SPAN effettivo che contiene il triangolo (▲) nella MAPPA MODALE */
/* Lo span ha entrambe le classi: .station-triangle-marker e .triangle-element */
#modalStationMap .leaflet-station-icon .station-triangle-marker.triangle-element {
    color: var(--station-marker-color, #0056b3); /* Colore base dalla variabile CSS, fallback blu */
    /* Eredita font-size (20px) da .station-triangle-marker e transition da .triangle-element */
    /* Eredita font-size (20px), text-shadow, transition, etc. dalla regola generale .station-triangle-marker */
}

/* Stile per l'etichetta sotto il triangolo */
.station-marker-label {
    font-size: 9px;
    font-weight: bold;
    color: #222; /* Colore scuro per buona leggibilità */
    margin-top: 0; /* Spazio tra la base del triangolo e l'inizio dell'etichetta */
    white-space: nowrap; /* Evita che l'etichetta vada a capo */
}

/* Styles for station map messages */
.station-map-message {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px 12px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    font-size: 0.9em;
    color: #333;
}

.station-map-message.error {
    background-color: rgba(248, 215, 218, 0.95); /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

/* Stili per i nuovi toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 28px;  /* Larghezza dello switch - Ulteriormente ridotta */
    height: 16px; /* Altezza dello switch - Ulteriormente ridotta */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Colore dello slider quando non attivo */
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10px; /* Altezza del pallino - Ulteriormente ridotta */
    width: 10px;  /* Larghezza del pallino - Ulteriormente ridotta */
    left: 3px;    /* Posizione iniziale del pallino - Mantenuta per padding */
    bottom: 3px;  /* Posizione iniziale del pallino - Mantenuta per padding */
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #007bff; /* Colore dello slider quando attivo */
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff; /* Effetto focus */
}

input:checked + .slider:before {
    -webkit-transform: translateX(12px); /* Spostamento del pallino quando attivo - Ridotto e aggiustato */
    -ms-transform: translateX(12px);
    transform: translateX(12px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 16px; /* Per rendere lo slider arrotondato - Aggiustato all'altezza */
}

.slider.round:before {
    border-radius: 50%; /* Per rendere il pallino rotondo */
}

/* Classe per disabilitare temporaneamente le transizioni CSS sugli slider */
.slider.no-transition,
.slider.no-transition:before {
    transition: none !important;
}

/* Modal Styles */
.modal {
    display: none; /* Nascosto di default */
    position: fixed; /* Rimane fisso durante lo scroll */
    z-index: 2100; /* Aumentato da 1000 a 2100 per essere sopra la mappa fullscreen (z-index: 2000) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; RIMOSSO o commentato per evitare scroll sulla modale esterna */
    background-color: rgba(0,0,0,0.6); /* Sfondo scuro semi-trasparente */
}

.modal-content {
    background-color: var(--bg-secondary);
    margin: 0; /* Rimosso offset verticale, sarà centrata via transform */
    padding: 25px;
    border: 1px solid var(--border-color);
    width: 90%; /* Larghezza della modale aumentata */
    max-width: 1200px; /* Larghezza massima aumentata per schermi più grandi */
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--shadow-color);
    position: absolute; /* Posizionamento rispetto all'overlay .modal */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrata orizzontalmente e verticalmente */
    max-height: 95vh; /* Evita che superi l'altezza del viewport */
    overflow: auto; /* Abilita scroll interno se necessario */
}

/* Stile per l'header della modale, usato per il trascinamento */
.modal-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    cursor: move; /* Cursore per indicare che è trascinabile */
    display: flex;
    justify-content: space-between; /* Titolo a sinistra, X a destra */
    align-items: center;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    flex-shrink: 0; /* Impedisce che l'header si riduca */
}

.modal-header h2 {
    margin: 0;
    font-size: 1.2em;
    flex-grow: 1; /* Il titolo occupa lo spazio disponibile */
}
.modal-info-logo {
    display: block; /* Elemento a blocco per controllo layout */
    max-width: 300px; /* Aumentata la larghezza massima del logo */
    height: auto;     /* Mantiene le proporzioni */
    margin: 0 0 20px 0; /* Allinea a sinistra e aggiunge spazio sotto */
}


.modal-text-content {
    max-height: 60vh; /* Altezza massima per il contenuto testuale */
    overflow-y: auto; /* Scroll verticale se il testo eccede */
    line-height: 1.6;
    white-space: pre-wrap; /* Mantiene gli a capo e gli spazi del file di testo */
}

/* Scrollbar della finestra informazioni come lista eventi */
#infoModal .modal-text-content {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
#infoModal .modal-text-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#infoModal .modal-text-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
#infoModal .modal-text-content::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid var(--scrollbar-track);
}

.modal-text-content p {
    margin-bottom: 1em; /* Spazio tra i paragrafi se usiamo i tag <p> */
}

.modal-close-btn {
    color: var(--text-secondary);
    font-size: 28px;
    font-weight: bold;
    flex-shrink: 0; /* Impedisce che il pulsante si riduca */
    margin-left: 10px; /* Piccolo spazio dal titolo */
}

.modal-close-btn:hover,
.modal-close-btn:focus {
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
}

/* Event Detail Modal Styles */
.event-detail-modal-content {
    width: 96%;
    max-width: min(1800px, 96vw);
    height: 94vh;
    margin: 0; /* Usa il centramento della regola generica .modal-content */
    padding: 0; /* Rimuoviamo il padding generale */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Previene overflow del contenitore principale */
}

.event-detail-modal-content .modal-header {
    padding: 20px; /* Padding specifico per l'header */
    border-bottom: 1px solid var(--border-color);
}

.event-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Due colonne */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); /* Due righe che si dividono lo spazio disponibile */
    gap: 15px;
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px; /* Padding per il contenuto */
}

.event-detail-info-panel,
.event-detail-station-panel,
.event-detail-rs-panel,
.event-detail-rszoom-panel {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ogni pannello gestisce il proprio overflow */
}

.event-detail-info-panel h3,
.event-detail-station-panel h3,
.event-detail-rs-panel h3,
.event-detail-rszoom-panel h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 5px;
}
/* Hover per i marker nella MAPPA MODALE */
/* Quando si passa sopra il divIcon (.leaflet-station-icon), cambia il colore dello span figlio */
#modalStationMap .leaflet-station-icon:hover .station-triangle-marker.triangle-element {
    /* color: #dc3545; */ /* Rimosso: Non cambia più colore su hover */
    transform: scale(1.5); /* Aumentato: Ingrandisce ulteriormente il triangolo */
    /* L'ingrandimento è ora applicato anche nella modale per coerenza. */
}


#modalEventInfoContent {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 0.85em;
    line-height: 1.3; /* righe più compatte */
}
#modalEventInfoContent p {
    margin: 2px 0; /* riduce lo spazio tra le righe */
    display: flex;
    align-items: baseline;
    padding: 2px 6px; /* riduce l'altezza della riga */
    border-radius: 2px;
    background: var(--bg-tertiary);
    border-left: 2px solid var(--border-color); /* bordo meno spesso */
}
#modalEventInfoContent strong {
    color: var(--text-primary);
    font-weight: 600;
    width: 120px;
    margin-right: 6px; /* avvicina valore alla label */
    flex-shrink: 0;
    text-align: left;
}
#modalEventInfoContent .event-value {
    color: var(--button-text);
    font-weight: 500;
    font-family: 'Courier New', monospace;
    background: var(--bg-secondary);
    padding: 1px 4px; /* badge più compatto */
    border-radius: 2px;
    text-align: left;
    min-width: 80px;
}
/* Stile per il contenitore del link INGV nella modale dettagli evento */
.modal-event-link-container {
    margin-top: 15px; /* Spazio sopra il link */
    padding-top: 10px; /* Spazio interno sopra il link */
    border-top: 1px solid var(--border-light); /* Linea separatrice leggera */
    /* text-align: center; Rimosso: il link sarà allineato a sinistra */
}

.modal-event-link-container a {
    font-size: 0.9em;
    color: var(--button-text);
    text-decoration: none;
    font-weight: bold;
}

/* Icona a sinistra per indicare chiaramente che è un link web */
.modal-event-link-container a::before {
    content: "🔗";
    display: inline-block;
    margin-right: 6px;
}

/* Colore in hover per evidenziare che è un oggetto attivo */
.modal-event-link-container a:hover {
    color: var(--link-hover);
}

.station-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.station-view-header h3 {
    margin-bottom: 0; /* Rimuovi il margine inferiore dall'h3 qui */
    /* margin-top: 0; è già gestito da .event-detail-station-panel h3 */
    border-bottom: none; /* Rimuovi il bordo inferiore se non desiderato qui */
    /* font-size e color sono ereditati da .event-detail-station-panel h3 */
}

.station-header-actions {
    display: flex; /* Allinea i pulsanti al suo interno */
    align-items: center; /* Allineamento verticale se i pulsanti avessero altezze diverse */
    gap: 8px; /* Spazio tra i pulsanti */
}


#toggleStationViewBtn { /* Stile per il pulsante switch nella modale dettagli */
    padding: 4px 8px;
    font-size: 0.8em;
    /* Eredita altri stili da .rs-image-btn se necessario o definiscili qui */
}

/* Stile per il pulsante di toggle colorazione tabella stazioni */
#toggleStationTableColorBtn {
    padding: 4px 8px; /* Mantieni lo stesso padding del pulsante "Visualizza Tabella/Mappa" */
    font-size: 0.8em; /* Mantieni la stessa dimensione font */
}

#modalStationMapContainer {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#modalStationMap {
    flex-grow: 1;
    min-height: 150px;
    background-color: #e9e9e9;
}

#modalStationTableContainer {
    flex-grow: 1; /* Occupa lo spazio disponibile quando visibile */
    overflow-y: auto;
    display: none; /* Nascosto di default */
    min-height: 0; /* Aiuta flexbox a calcolare correttamente l'altezza */
}

#modalStationTableContainer table { width: 100%; border-collapse: collapse; font-size: 0.8em; }
/* #modalStationTableContainer th, #modalStationTableContainer td { border: 1px solid #ddd; padding: 4px; text-align: left; } */
/* #modalStationTableContainer th { background-color: #f2f2f2; } */

#modalStationTableContainer th,
#modalStationTableContainer td {
    border: 1px solid #ddd;
    padding: 6px 8px; 
    text-align: left;
    white-space: nowrap; /* Evita che il contenuto delle celle vada a capo */
}

#modalStationTableContainer th {
    position: sticky; /* Rende l'header fisso */
    top: 0;           /* Lo attacca alla parte superiore del contenitore scrollabile */
    background-color: #e0e0e0; /* Un grigio leggermente più scuro per l'header */
    z-index: 1;       /* Assicura che l'header stia sopra il contenuto scrollabile */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Ombra leggera per separazione */
    cursor: pointer; /* Indica che l'header è cliccabile per l'ordinamento */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard */
}

/* Stili per gli indicatori di ordinamento (frecce) */
#modalStationTableContainer th::after {
    content: '';
    display: inline-block;
    margin-left: 7px; /* Spazio a sinistra della freccia */
    opacity: 0.5;     /* Freccia di default leggermente trasparente */
    font-size: 0.8em; /* Dimensione della freccia */
}

#modalStationTableContainer th.sort-asc::after {
    content: '▲';
    opacity: 1;
}

#modalStationTableContainer th.sort-desc::after {
    content: '▼';
    opacity: 1;
}

.modal-image-container { flex-grow: 1; display: flex; justify-content: center; align-items: center; background-color: var(--bg-secondary); overflow: hidden; padding: 5px; border: 1px solid var(--border-light); border-radius: 3px; }
.modal-image-container a {
    display: flex; /* Usa flex per centrare l'immagine al suo interno se necessario */
    justify-content: center;
    align-items: center;
    width: 100%;   /* Fai in modo che l'ancora occupi tutta la larghezza disponibile */
    height: 100%;  /* Fai in modo che l'ancora occupi tutta l'altezza disponibile */
}
.modal-image-container img { max-width: 100%; max-height: 100%; object-fit: contain; }

.map-footer-small { height: 20px; flex-shrink: 0; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 8px; font-size: 0.7em; color: var(--text-primary); }

/* Event Processing Alert in Header */
/* Stili per l'alert di elaborazione eventi nell'header */
.event-processing-alert {
    background-color: #FFEB3B; /* Giallo */
    color: #333333; /* Testo scuro per contrasto */
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 0.85em;
    margin: 0 10px; /* Spazio attorno */
    text-align: center;
    animation: pulse-yellow 2s infinite ease-in-out;
    flex-grow: 0.8; /* Permette di crescere ma non dominare h1 */
    flex-shrink: 1;
    min-width: 150px; /* Larghezza minima */
    display: none; /* Nascosto di default, gestito da JS */
    border: 1px solid #FBC02D; /* Bordo giallo più scuro */
}

@keyframes pulse-yellow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(251, 192, 45, 0.6); /* FBC02D con alpha */
    }
    50% {
        transform: scale(1.015); /* Leggero ingrandimento */
        box-shadow: 0 0 4px 7px rgba(251, 192, 45, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(251, 192, 45, 0);
    }
}

/* Stili per la Legenda delle Stazioni sulla Mappa */
.station-legend-control {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    font-size: 0.8em;
    color: #333;
    max-height: 200px; /* Altezza massima, poi scroll */
    /* overflow-y: auto;  Abilitato da JS quando il contenuto è visibile e potrebbe eccedere */
    transition: all 0.3s ease-in-out;
}

.station-legend-control h4 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.station-legend-control ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.station-legend-control li {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.legend-color-box {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 6px;
    border: 1px solid #777; /* Bordo per i quadratini colorati */
}

.legend-toggle-button {
    cursor: pointer;
    padding: 3px 6px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 5px; /* Spazio tra pulsante e contenuto legenda se visibile */
    text-align: center;
    font-size: 0.85em;
}
.legend-toggle-button:hover {
    background-color: #e0e0e0;
}

/* Stile per il pulsante di apertura modale ricerca stazione */
#openStationSearchModalBtn {
    margin-left: 10px; /* Spazio dal titolo "Lista Eventi" */
    background-color: #e0e0e0;
}

.legend-content.hidden {
    display: none;
}

/* Stile per il nuovo resizer nel pannello destro */
.resizer-v-right {
    background-color: var(--resizer-color);
    height: 3px;
    cursor: ns-resize;
    flex-shrink: 0; /* Non deve restringersi */
}

.resizer-v-right:hover {
    background-color: var(--resizer-hover);
}

/* Tema scuro: rendi più evidente il resizer nel pannello destro */
[data-theme="dark"] .resizer-v-right {
    height: 5px;
    border-top: 1px solid var(--resizer-border);
    border-bottom: 1px solid var(--resizer-border);
}

/* Container per raggruppare i toggle Class e Anim molto vicini */
.toggle-group-container {
    display: flex;
    align-items: center;
    gap: 5px; /* Distanza molto ridotta tra i due toggle */
    margin-left: auto;
}

/* Modifica ai footer per layout flex */
#station-map-footer,
#modal-station-map-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Rimuovi il margin-left: auto dai singoli checkbox-group nei footer */
#station-map-footer .checkbox-group,
#modal-station-map-footer .checkbox-group {
    margin-left: 0; /* Rimuovi il margin precedente */
    margin-bottom: 0; /* Rimuovi anche il margin bottom se presente */
}

/* Stili per la Legenda Magnitudo Eventi sulla Mappa Principale */
.event-legend-control {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.2);
    font-size: 0.8em;
    color: #333;
    line-height: 1.4;
}

.event-legend-control h4 {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 0.9em;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
    text-align: center;
}

.event-legend-control ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-legend-control li {
    margin-bottom: 4px;
}

/* Stili per il Pannello di Ricerca Stazione (Ex-Modal) */
.station-search-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    width: 70%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    display: none; /* Nascosto di default */
}

/* Assicura che il pannello di ricerca stazione sia sopra la mappa fullscreen e la lista eventi flottante */
body.map-fullscreen-active .station-search-panel {
    z-index: 2020; /* Più alto di #map-main-footer (2010) e .events-list (2005) in fullscreen */
}

/* Stili per il pannello trascinabile */
.station-search-panel.dragging {
    user-select: none;
    pointer-events: auto;
}

.station-search-panel-header {
    background-color: #003366;
    color: white;
    padding: 15px 20px;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move; /* Indica che l'header può essere usato per trascinare */
    user-select: none; /* Previene la selezione del testo durante il trascinamento */
}

.station-search-panel-header:active {
    cursor: grabbing; /* Cambia il cursore durante il trascinamento */
}

.station-search-panel-header h2 {
    margin: 0;
    font-size: 1.2em;
    color: white;
}

.panel-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.panel-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.station-search-panel-content {
    padding: 20px;
}

.station-search-panel .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 8px;
}

.station-search-panel .input-group label {
    min-width: 120px;
    font-weight: bold;
    font-size: 0.9em;
    text-align: right;
    margin-right: 8px;
}

.station-search-panel .input-group input[type="date"],
.station-search-panel .input-group input[type="text"] {
    flex-grow: 1;
    padding: 8px;
    padding-right: var(--date-icon-space); /* evita sovrapposizioni con l'icona calendario */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1em;
}

.station-search-panel .date-clear-btn {
    margin-left: 8px;
    padding: 6px 8px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.station-search-panel .date-clear-btn:hover {
    background-color: #c82333;
}

.panel-divider {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.station-code-input-group {
    flex-wrap: wrap;
    gap: 8px;
}

.station-code-input-group input[type="text"] {
    min-width: 200px;
}

.station-search-panel .stop-btn {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.station-search-panel .stop-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.panel-events-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--bg-secondary);
    margin-top: 15px;
}

/* Tema scuro: pannello "Filtra eventi per stazione" */
[data-theme="dark"] .station-search-panel {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 12px var(--shadow-strong);
}
[data-theme="dark"] .station-search-panel-header {
    background-color: var(--bg-header);
    color: var(--text-light);
}
[data-theme="dark"] .station-search-panel-header h2 {
    color: var(--text-light);
}
[data-theme="dark"] .panel-close-btn:hover {
    background-color: var(--hover-bg);
}
[data-theme="dark"] .station-search-panel .input-group label {
    color: var(--text-primary);
}
[data-theme="dark"] .station-search-panel .input-group input[type="date"],
[data-theme="dark"] .station-search-panel .input-group input[type="text"] {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-light);
}
[data-theme="dark"] .panel-events-container {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}
[data-theme="dark"] .panel-divider {
    border-top-color: var(--border-light);
}

.panel-events-container .event-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background-color 0.2s;
}

.panel-events-container .event-item:hover {
    background-color: var(--hover-bg);
}

.panel-events-container .event-item:last-child {
    border-bottom: none;
}

.panel-events-container .no-events {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

#stationSearchProgressAndCountContainerPanel {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Wrapper for "Eventi trovati" and "Applica Filtro" button in station search panel */
.found-count-and-apply-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.found-count-panel {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--text-primary);
}

.progress-bar-container {
    width: 100%;
    background-color: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    height: 20px;
    box-shadow: inset 0 1px 2px var(--shadow-color);
}

.progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--button-text);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
}

/* Stili per il loading del pannello */
#stationSearchResultsLoadingPanel {
    text-align: center;
    padding: 20px;
    color: #666;
    font-style: italic;
}

/* Pulsante per uscire dal fullscreen - flottante in alto al centro */
.exit-fullscreen-btn {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* Z-index molto alto */
    background-color: var(--bg-secondary);
    border: none; /* Rimosso il bordo nero */
    border-radius: 50%;
    width: 30px; /* Aumenta la dimensione per essere più facile da cliccare */
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.2s ease;
    color: var(--text-secondary); /* X grigia invece di nera */
    pointer-events: auto;
    user-select: none; /* Previeni la selezione del testo */
}

.exit-fullscreen-btn:hover {
    background-color: var(--hover-bg);
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    color: var(--text-primary); /* X leggermente più scura al hover */
}

.exit-fullscreen-btn:active {
    transform: translateX(-50%) scale(0.95);
}

/* Assicurati che sia visibile in fullscreen */
body.map-fullscreen-active .exit-fullscreen-btn,
body.app-fullscreen-active .exit-fullscreen-btn {
    display: flex !important;
}

/* Styles for custom event markers with magnitude text */
.leaflet-div-icon-event { /* This is the class Leaflet applies to the outermost divIcon element */
    background: transparent !important; /* Remove any default Leaflet styling */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.event-marker-content {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none; /* Removed border to fix positioning */
    box-shadow: none; /* Removed shadow to fix positioning */
    /* width, height, and background-color will be set via inline styles in JS */
}

.event-marker-magnitude-text {
    font-weight: bold;
    line-height: 1; /* Ensure text is vertically centered if it wraps (though it shouldn't) */
    -webkit-font-smoothing: antialiased; /* Improve text rendering on some screens */
    -moz-osx-font-smoothing: grayscale;
    /* color and font-size will be set via inline styles in JS */
}

/* Contenitore per il pulsante e la percentuale */
.station-search-button-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Aumentato leggermente il gap per compensare la rimozione dello spinner */
}

.search-progress-text {
    font-size: 0.9em;
    color: #666;
    font-weight: bold;
}

/* Stile per le notifiche toast */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none; /* Permette di cliccare attraverso il container */
}

.toast-notification {
    background-color: rgba(0, 51, 102, 0.9); /* Blu scuro coerente con il tema dell'app */
    color: white;
    padding: 12px 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: auto; /* Permette interazioni con la notifica stessa */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-notification .toast-close {
    margin-left: 15px;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
}

.toast-notification .toast-close:hover {
    opacity: 1;
}

/* Responsive per schermi più piccoli */
@media (max-width: 768px) {
    .toast-container {
        width: 90%;
        max-width: 400px;
    }
    
    .station-search-panel {
        width: 95%;
        max-width: none;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        max-height: calc(100vh - 20px);
    }
    
    .station-search-panel .input-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .station-search-panel .input-group label {
        text-align: left;
        min-width: auto;
        margin-bottom: 5px;
    }
    
    .station-code-input-group {
        flex-direction: column;
    }
}

/* Stili per il bounding box interattivo e i suoi marker di ridimensionamento */
.resize-handle-icon {
    background-color: #FF8C00;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: move;
}

/* Stile per rendere il rettangolo più visibile quando interattivo
   (limitato alla mappa stazioni per non influire sui marker eventi) */
#mappa_listaStazioni .leaflet-interactive {
    cursor: move;
}

/* Puntatore a mano sui marker (eventi e stazioni) */
.leaflet-div-icon-event,
.leaflet-div-icon-event:hover,
.leaflet-station-icon,
.leaflet-station-icon:hover {
    cursor: pointer;
}

/* Classi per label con testo ottimizzato per visibilità */
.magnitude-label-purple {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white; /* Testo bianco per sfondo viola scuro */
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}

/* Cursore a forma di mano per i marker degli eventi (circleMarker SVG) */
.leaflet-interactive.event-marker-clickable {
    cursor: pointer !important;
}

/* Cursore a forma di mano per i marker basati su icone DIV/IMG */
.leaflet-marker-icon,
.leaflet-marker-icon:hover,
.station-triangle-marker,
.station-triangle-marker:hover {
    cursor: pointer !important;
}

.magnitude-label-red {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white; /* Testo bianco per sfondo rosso scuro */
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}

.magnitude-label-orange {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white; /* Testo bianco per migliore visibilità sul marker arancione */
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Ombra scura per testo bianco */
    pointer-events: none;
}

/* Nuove classi per giallo e verde */
.magnitude-label-yellow {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white; /* Testo bianco per migliore visibilità sul marker giallo */
    font-weight: bold;
    font-size: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Ombra scura per testo bianco */
    pointer-events: none;
}

.magnitude-label-green {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: white; /* Testo bianco per sfondo verde scuro */
    font-weight: bold;
    font-size: 8px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}

/* Cursore a forma di mano per i marker degli eventi */
.event-marker-clickable {
    cursor: pointer !important;
}

/* Stato cursore globale durante operazioni di filtro/lavoro: mostra il cursore di attesa */
.cursor-wait,
.cursor-wait * {
    cursor: wait !important;
}