/* style.css - Styles ONLY for Leaflet map elements */

#map { /* Basic map container sizing reference */
    height: 750px;
    width: 100%;
    box-sizing: border-box;
}

/* --- Custom Markers --- */
.custom-div-icon { position: relative; text-align: center; }
.marker-pin {
    width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #ccc; /* Fallback */
    position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -15px 0 0 -15px;
    border: 1px solid #555; overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.marker-pin.highlighted-marker {
    transform: rotate(-45deg) scale(1.3); border-color: #000000;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
.pie-slice { /* Optional: Add stroke if desired */ /* stroke: #fff; stroke-width: 0.5; */ }

/* --- Leaflet Popup General Styles --- */
.leaflet-popup-content-wrapper { border-radius: 8px; }
.leaflet-popup-content {
    color: #333; font-family: 'Fira Sans', sans-serif; margin: 10px 15px;
}
.leaflet-popup-content label {
    display: block; margin-top: 8px; margin-bottom: 3px; font-weight: bold; font-size: 0.95em;
}
.leaflet-popup-content input[type="text"],
.leaflet-popup-content textarea,
.leaflet-popup-content select {
    width: 95%; margin-bottom: 8px; padding: 6px 8px; border: 1px solid #ccc;
    border-radius: 4px; font-family: inherit; font-size: 0.95em; box-sizing: border-box;
}
.leaflet-popup-content select { cursor: pointer; }
.leaflet-popup-content select:disabled { background-color: #e9ecef; cursor: not-allowed; }
.color-picker-container { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.leaflet-popup-content input[type="color"] {
    width: 40px; height: 30px; padding: 0; border: 1px solid #ccc; cursor: pointer; border-radius: 4px;
}
.leaflet-popup-content input[type="text"].hex-input {
    width: 70px; font-family: monospace; text-transform: uppercase;
}
.leaflet-popup-content button {
    margin-top: 10px; padding: 6px 12px; cursor: pointer; background-color: #007bff; color: white;
    border: none; border-radius: 4px; font-family: inherit; font-weight: bold;
    transition: background-color 0.2s ease;
}
.leaflet-popup-content button:hover { background-color: #0056b3; }
.leaflet-popup-content button.remove-pin-btn { /* Specific style for remove buttons in popup */
    font-size: 0.8em !important; padding: 1px 4px !important; margin-top: 2px !important;
    background-color: #dc3545 !important; color: white !important; border: none !important; border-radius: 3px !important;
}
#popupError { color: red; font-size: 0.9em; margin-top: 5px; }
.leaflet-popup-content hr { border: none; border-top: 1px solid #eee; margin: 10px 0; }

/* --- Popup Search Result Styling --- */
#popupSearchResults {
    border: 1px solid #ccc; background: #f8f9fa; max-height: 80px; overflow-y: auto;
    margin-top: -5px; margin-bottom: 10px; border-radius: 0 0 4px 4px;
}
#popupSearchResults div {
    padding: 4px 8px; cursor: pointer; font-size: 0.9em; color: #333; border-bottom: 1px solid #eee;
}
#popupSearchResults div:last-child { border-bottom: none; }
#popupSearchResults div:hover { background-color: #e9ecef; }

/* --- Inverted Popup Styles --- */
.leaflet-popup.popup-inverted { bottom: auto !important; }
.leaflet-popup.popup-inverted .leaflet-popup-content-wrapper {
    margin-top: 0; position: relative; top: 10px; border-radius: 8px;
}
.leaflet-popup.popup-inverted .leaflet-popup-tip-container {
    position: absolute; width: 40px; height: 10px; left: 50%; margin-left: -20px;
    overflow: hidden; pointer-events: none; bottom: auto; top: 0; z-index: 1;
}
.leaflet-popup.popup-inverted .leaflet-popup-tip {
    width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; transform: rotate(45deg);
    box-shadow: none; border-top: 1px solid #ccc; border-left: 1px solid #ccc;
    border-bottom: none; border-right: none; background: #fff;
}

/* --- Marker Popup Member List Scroll --- */
.popup-member-list {
    max-height: 160px; /* Adjust height as desired */
    overflow-y: auto;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #eee; /* Optional visual separator */
}
/* Style individual items within the scrollable list if needed */
.popup-member-list > div {
    margin-bottom: 8px !important; /* Ensure spacing is consistent */
    line-height: 1.3 !important;
}
.popup-member-list > div:last-child {
     margin-bottom: 0 !important; /* Remove extra space after last item */
}