/* ========================================
   Measurement Tool Styling
   Matches your existing dark theme
   ======================================== */

/* Style the default polyline measure control to match your theme */
.leaflet-control-polyline-measure {
  background: #0f1520 !important;
  border: 1px solid #1b2330 !important;
  border-radius: 4px !important;
}

.leaflet-control-polyline-measure a {
  background: #0f1520 !important;
  color: #e8eef7 !important;
  border-radius: 4px !important;
  border: none !important;
}

.leaflet-control-polyline-measure a:hover {
  background: #1b2330 !important;
  color: #e8eef7 !important;
}

.leaflet-control-polyline-measure a.polyline-measure-toggle {
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
}

.leaflet-control-polyline-measure .polyline-measure-control-clearAllMeasurements {
  background: #0f1520 !important;
  color: #e8eef7 !important;
  border-top: 1px solid #1b2330 !important;
}

.leaflet-control-polyline-measure .polyline-measure-control-clearAllMeasurements:hover {
  background: #1b2330 !important;
}

.leaflet-control-polyline-measure .polyline-measure-control-unitToggle {
  background: #0f1520 !important;
  color: #e8eef7 !important;
  border-top: 1px solid #1b2330 !important;
  font-size: 10px !important;
  font-weight: bold !important;
}

.leaflet-control-polyline-measure .polyline-measure-control-unitToggle:hover {
  background: #1b2330 !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .leaflet-control-measure a {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .leaflet-control-measure .unit-btn {
    font-size: 8px;
  }
}

/* Custom styling for the measurement polylines */
.polyline-measure-popuptext {
  background: #0f1520 !important;
  border: 1px solid #1b2330 !important;
  color: #e8eef7 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Custom markers for measurement points */
.polyline-measure-marker {
  background: #007bff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
}

/* Measurement line styling */
.polyline-measure {
  stroke: #007bff !important;
  stroke-width: 3 !important;
  stroke-dasharray: 5, 5 !important;
  fill: none !important;
}

/* Tooltip styling for measurements */
.leaflet-tooltip.polyline-measure-tooltip {
  background: #0f1520 !important;
  border: 1px solid #1b2330 !important;
  color: #e8eef7 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: normal !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-tooltip.polyline-measure-tooltip::before {
  border-top-color: #1b2330 !important;
}

/* Help text styling */
.polyline-measure-help {
  background: rgba(15, 21, 32, 0.95) !important;
  border: 1px solid #1b2330 !important;
  color: #9ad1ff !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  max-width: 200px !important;
}

/* Override default Leaflet control styling to match your theme */
.leaflet-control-measure {
  margin-bottom: 0 !important;
}

/* Ensure controls stack properly */
.leaflet-top.leaflet-right .leaflet-control-measure {
  margin-top: 5px;
  margin-right: 10px;
}

/* Make sure controls are positioned correctly */
.leaflet-top.leaflet-right .leaflet-control-polyline-measure {
  margin-top: 5px;
  margin-right: 10px;
}