/* =========================================
   1. Stili Esistenti (Spostati da PHP)
   ========================================= */

.custom-div-icon { 
    background: transparent; 
    border: none; 
}

.leaflet-popup-content-wrapper { 
    border-radius: 8px; 
}

.leaflet-popup-content p {
    font-size: 18px !important;
    margin: 0 0 1em 0 !important;
    line-height: 1.6 !important;
}
.leaflet-popup-content strong {
    font-size: 20px !important;
    color: #333;
}
.leaflet-popup-content {
    min-width: 300px;
}


/* =========================================
   2. Nuovi Stili Layout (Sidebar + Mappa)
   ========================================= */

.mappa-container-flex {
    display: flex;
    flex-wrap: wrap; /* Permette alla sidebar di andare sopra su mobile */
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Mantiene i bordi arrotondati */
}

/* 2.1 Sidebar Sinistra */
.mappa-lista-sidebar {
    flex: 1; /* Occupa 1/4 dello spazio */
    min-width: 280px; /* Larghezza minima */
    max-height: 70vh; /* Stessa altezza della mappa */
    min-height: 600px; /* Altezza minima (come la mappa) */
    overflow-y: auto; /* Aggiunge scroll se la lista è lunga */
    background: #f9f9f9;
    padding: 15px;
    box-sizing: border-box; /* Include padding nel calcolo larghezza */
}

.mappa-lista-sidebar h3 {
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

#lista-organizzazioni-js {
    list-style: none;
    padding: 0;
    margin: 0;
}

.org-item {
    padding: 10px 8px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.org-item:hover {
    background-color: #ececec;
}

.org-item:last-child {
    border-bottom: none;
}

/* 2.2 Canvas Mappa Destra */
.mappa-canvas-main {
    flex: 3; /* Occupa 3/4 dello spazio */
    min-width: 70%; /* Occupa almeno 70% */
}

/* ID della Mappa */
#map {
    height: 70vh; /* Altezza relativa */
    min-height: 600px; /* Altezza minima (come la sidebar) */
    width: 100%;
}

/* Gestione Mobile Semplice */
@media (max-width: 768px) {
    .mappa-lista-sidebar {
        flex-basis: 100%; /* Occupa tutta la larghezza */
        max-height: 300px; /* Altezza limitata su mobile */
        min-height: auto;
    }
    .mappa-canvas-main {
        flex-basis: 100%; /* Occupa tutta la larghezza */
    }
}


/* =========================================
   3. Nuovi Stili Etichette (Tooltip)
   ========================================= */

.mappa-tooltip-label {
    background: rgba(255, 255, 255, 0.85); /* Sfondo più leggibile */
    border: none;
    box-shadow: none;
    padding: 2px 5px;
    border-radius: 4px;
    
    /* Stile testo */
    font-size: 11px;
    font-weight: bold;
    color: #333;
    
    /* Contorno al testo per leggibilità */
    text-shadow: 
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}