body { margin: 0; display: flex; height: 100vh; font-family: sans-serif; }

#sidebar {
    width: 300px;
    background: #f4f4f4;
    padding: 15px;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

#sidebar h2 {
    margin-top: 10px;
    margin-bottom: 0;      /* Rimuove lo spazio sotto il titolo */
    padding-bottom: 0;
}

.author-credit {
    font-size: 0.75em;     /* Leggermente più piccolo */
    color: #888;           /* Grigio più chiaro per dare profondità */
    margin-top: 0;         /* Attacca la scritta al titolo */
    padding-top: 0;
    display: block;        /* Assicura che si comporti come un blocco */
    margin-bottom: 25px;   /* Crea spazio rispetto all'albero dei file */
    font-style: italic;
    font-weight: normal;
}

#file-tree {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 15px;
}

#map { flex-grow: 1; }

.folder { font-weight: bold; cursor: pointer; margin-top: 5px; }
.folder::before { content: "📁 "; }

#btn-center {
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#btn-center:hover { background: #0056b3; }

.folder-wrapper {
    display: flex;
    align-items: center;
    margin-top: 8px;
    font-weight: bold;
}

.folder-label {
    cursor: default;
    margin-left: 5px;
}

.file-item {
    display: flex;
    align-items: center;
    margin-left: 10px;
    padding: 2px 0;
    font-weight: normal;
    font-size: 0.9em;
    cursor: pointer;
}

.file-item input {
    margin-right: 8px;
}

.folder-group {
    margin-top: 5px;
}

.folder-header {
    display: flex;
    align-items: center;
    font-weight: bold;
    cursor: pointer; /* Fa capire che è cliccabile */
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.folder-header:hover {
    background: #e0e0e0; /* Effetto al passaggio del mouse */
}

/* Aggiungiamo una freccina prima del testo */
.folder-header::after {
    content: '▼';
    font-size: 0.7em;
    margin-left: auto;
    transition: transform 0.2s;
    color: #888;
}

/* Ruota la freccia quando la cartella è chiusa */
.folder-header.closed::after {
    transform: rotate(-90deg);
}

input[type="checkbox"]:indeterminate {
    accent-color: #ff9800; /* Un arancione per indicare "parziale" */
}

/* Miglioriamo l'allineamento */
.folder-header input, .file-item input {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    cursor: pointer;
}

.folder-children {
    margin-left: 20px;
    border-left: 1px solid #ddd;
    /* Rimuovi display: none se vuoi che siano aperte all'avvio */
}

.file-item {
    display: flex;
    align-items: center;
    padding: 2px 0;
    cursor: pointer;
}

/* Stile del bottone fluttuante (nascosto su PC) */
#mobile-menu-btn {
    display: none;
    position: absolute;
    top: 10px;
    left: 50px; /* Spostato a destra per non coprire i tasti zoom della mappa */
    z-index: 1000; /* Sopra la mappa */
    padding: 10px 15px;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.mobile-only {
    display: none;
}

/* ------------------------------------- */
/* REGOLE PER SMARTPHONE                 */
/* ------------------------------------- */
@media (max-width: 768px) {
    #mobile-menu-btn {
        display: block; /* Mostra il bottone menu */
    }

    #sidebar {
        position: absolute;
        top: 0;
        left: -320px; /* Nasconde la sidebar fuori dallo schermo a sinistra */
        height: 100%;
        z-index: 2000; /* Sopra a tutto, anche ai controlli mappa */
        transition: left 0.3s ease; /* Animazione di scorrimento fluida */
        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    }

    /* Quando aggiungiamo la classe "open" via JS, la sidebar entra nello schermo */
    #sidebar.open {
        left: 0;
    }

    /* Mostra il tastino per chiudere dentro la sidebar */
    .mobile-only {
        display: block;
        background: none;
        border: none;
        color: #ff4444;
        font-weight: bold;
        font-size: 1.1em;
        text-align: right;
        width: 100%;
        margin-bottom: 10px;
        cursor: pointer;
    }
}

.custom-marker {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-marker div {
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* Stile per i popup dei marker */
.leaflet-popup-content {
    font-family: sans-serif;
    font-weight: bold;
}

.leaflet-popup-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.4;
    min-width: 150px;
}

.leaflet-popup-content hr {
    margin: 5px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.leaflet-popup-content strong {
    color: #2c3e50;
}

#btn-select-visible {
    margin-top: 10px;
    padding: 10px;
    background: #27ae60; /* Verde */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    transition: background 0.3s;
}

#btn-select-visible:hover {
    background: #1e8449;
}

#btn-clear-all {
    margin-top: 10px;
    padding: 10px;
    background: #e74c3c; /* Rosso soft */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    transition: background 0.3s;
}

#btn-clear-all:hover {
    background: #c0392b;
}

/* Opzionale: un po' di spazio tra i bottoni principali */
#btn-center, #btn-select-visible, #btn-clear-all {
    margin-bottom: 5px;
}

#sidebar {
    width: 320px;
    height: 100vh;
    display: flex;
    flex-direction: column; /* Dispone gli elementi in verticale */
    background: #f8f9fa;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
}

.sidebar-header {
    padding: 15px 15px 0 15px;
    flex-shrink: 0; /* Impedisce al titolo di restringersi */
}

#file-tree {
    flex-grow: 1;      /* Occupa tutto lo spazio centrale disponibile */
    overflow-y: auto;  /* Abilita lo scorrimento verticale solo qui */
    padding: 10px 15px;
    border-top: 1px solid #eee;
}

.sidebar-controls {
    padding: 15px;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    gap: 8px;          /* Spazio uniforme tra i pulsanti */
    flex-shrink: 0;    /* Impedisce ai bottoni di sparire o restringersi */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Effetto profondità */
}

/* Rendi i pulsanti più compatti per farli stare bene nel pannello */
.sidebar-controls button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Il contenitore trasparente (il vero bersaglio per il dito) */
.touch-friendly-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; 
    border-radius: 50%;
    /* Opzionale: decommenta la riga sotto per vedere temporaneamente l'area cliccabile */
    /* background-color: rgba(0,0,0,0.1); */ 
}

/* Il pallino colorato vero e proprio */
.touch-friendly-marker div {
    width: 16px;          /* Leggermente più grande per visibilità */
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Ombra per staccarlo dalla mappa */
    transition: transform 0.2s; /* Piccola animazione */
}

/* Effetto di ingrandimento quando ci passi sopra o lo tocchi */
.touch-friendly-marker:hover div {
    transform: scale(1.2);
}