/* style.css */

/* --- RESET & LAYOUT BASE --- */
body { 
    margin: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
    overflow: hidden; 
}

/* --- NAVBAR --- */
#navbar { 
    background: #2c3e50; 
    color: white; 
    padding: 10px 20px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
    z-index: 1001; 
    flex-shrink: 0; 
}
#navbar a { 
    color: #ecf0f1; 
    text-decoration: none; 
    font-size: 0.95em; 
    transition: color 0.3s; 
}
#navbar a:hover { color: #3498db; }
.nav-right { margin-left: auto; display: flex; gap: 15px; align-items: center; }

/* --- CONTROLLI FILTRO --- */
.controls { display: flex; gap: 10px; }
input[type="text"], select { 
    padding: 6px 10px; 
    border-radius: 4px; 
    border: 1px solid #bdc3c7; 
    outline: none; 
    font-size: 14px;
}

/* --- MAPPA --- */
#map { flex: 1; width: 100%; z-index: 1; cursor: grab; }
.crosshair-cursor { cursor: crosshair !important; }

/* Layer Control Spacing */
.leaflet-bottom.leaflet-left .leaflet-control-layers {
    margin-bottom: 15px; border: none; box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

/* --- MARKER CUSTOM (Nuovo) --- */
/* Stile base per l'icona div */
.custom-div-icon {
    background: transparent;
    border: none;
}
/* Il cerchio contenitore */
.marker-pin {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3498db;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    transition: transform 0.2s;
}
/* Colori per stato */
.marker-pin.st-approvato { background: #3498db; } /* Blu */
.marker-pin.st-bozza { background: #e67e22; } /* Arancio */
.marker-pin.st-pausa { background: #7f8c8d; } /* Grigio */

/* Effetto hover sul marker */
.marker-pin:hover {
    transform: scale(1.1);
    z-index: 1000;
}

/* --- PULSANTE AGGIUNGI (+) --- */
#addBtn {
    position: absolute; bottom: 40px; right: 30px;
    width: 60px; height: 60px; 
    background-color: #e74c3c; color: white; 
    border-radius: 50%; font-size: 30px; border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer; z-index: 999;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s, background 0.3s;
}
#addBtn:hover { transform: scale(1.1); background-color: #c0392b; }
#addBtn.active { background-color: #27ae60; transform: rotate(45deg); }

/* --- POPUP --- */
.leaflet-popup-content { min-width: 300px !important; font-size: 14px; line-height: 1.5; color: #333; }
.popup-img { 
    width: 100%; height: auto; margin-top: 8px; 
    border-radius: 4px; border: 1px solid #ddd; 
    cursor: zoom-in; transition: opacity 0.2s;
}
.popup-img:hover { opacity: 0.8; }

/* Badge Stato */
.status-badge { 
    font-size: 0.75em; padding: 3px 6px; border-radius: 3px; 
    color: white; display: inline-block; margin-top: 5px; 
    text-transform: uppercase; font-weight: bold;
}
.st-bozza { background: #f39c12; }
.st-approvato { background: #27ae60; }
.st-pausa { background: #7f8c8d; }

/* --- MODALE --- */
#modal { 
    display: none; position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); z-index: 10000; 
    backdrop-filter: blur(2px);
}
.modal-content { 
    background: white; margin: 4% auto; padding: 25px; 
    width: 90%; max-width: 500px; border-radius: 8px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    max-height: 90vh; overflow-y: auto; 
}
.modal-content h3 { margin-top: 0; color: #2c3e50; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.modal-content label { display: block; margin-top: 15px; font-weight: bold; font-size: 0.9em; color: #555; }
.modal-content input[type="text"], .modal-content input[type="file"], .modal-content textarea, .modal-content select { 
    width: 100%; padding: 10px; margin-top: 5px; 
    border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: inherit;
}
.close-btn { float: right; font-size: 28px; cursor: pointer; color: #aaa; line-height: 20px; }
.close-btn:hover { color: #000; }
.btn-save { 
    width: 100%; margin-top: 25px; padding: 12px; 
    background: #2980b9; color: white; border: none; 
    border-radius: 4px; font-size: 16px; cursor: pointer; font-weight: bold;
}
.btn-save:hover { background: #3498db; }

/* --- LIGHTBOX --- */
#lightbox {
    display: none; position: fixed; z-index: 20000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
    justify-content: center; align-items: center; cursor: zoom-out;
}
#lightbox img {
    max-width: 90%; max-height: 90%; border: 3px solid white;
    border-radius: 2px; box-shadow: 0 0 20px rgba(0,0,0,0.5); cursor: default;
}

/* --- AUTOCOMPLETE --- */
.autocomplete-container { position: relative; display: inline-block; width: 100%; }
.autocomplete-items {
    position: absolute; border: 1px solid #d4d4d4; border-top: none;
    z-index: 10001; top: 100%; left: 0; right: 0;
    background-color: #fff; max-height: 150px; overflow-y: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #f1f1f1; font-size: 0.9em; }
.autocomplete-items div:hover { background-color: #e9e9e9; }
.autocomplete-active { background-color: #3498db !important; color: #ffffff !important; }