/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require leaflet
 *= require components/map
 *= require custom
 *= require_self
 */

/* Mission Planning CSS temporarily disabled - drone system paused */
/* *= require pages/mission_planning */

/* Global Leaflet Control Styling */
/* Add spacing between zoom control buttons */
.leaflet-control-zoom a:first-child {
  margin-bottom: 2px !important;
}

.leaflet-control-zoom a,
.leaflet-control-zoomtofit a,
.heatmap-legend-toggle {
  background-color: var(--color-background-card) !important;
  color: var(--color-foreground) !important;
  border-color: var(--color-border) !important;
  font-weight: bold !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* Override Leaflet's default border removal on zoom control buttons */
.leaflet-bar a {
  border: 1px solid var(--color-border) !important;
  border-top: 1px solid var(--color-border) !important;
  border-right: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-left: 1px solid var(--color-border) !important;
}

.leaflet-bar a:last-child {
  border-bottom: 1px solid var(--color-border) !important;
}

.leaflet-control-zoom a,
.leaflet-control-zoomtofit a {
  font-size: 18px !important;
  font-family: 'Lucida Console', Monaco, monospace !important;
  text-indent: 1px !important;
}

.heatmap-legend-toggle {
  font-size: 16px !important;
  padding: 0 !important;
}

.leaflet-control-zoom a:hover,
.leaflet-control-zoomtofit a:hover,
.heatmap-legend-toggle:hover {
  background-color: var(--color-background-muted) !important;
}

/* Ensure zoom-to-fit control matches zoom control styling */
.leaflet-control-zoomtofit {
  margin-bottom: 20px !important;
  margin-right: 20px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  z-index: 900 !important;
}

/* Map Theming - Dark/Light Mode Support */
.leaflet-container {
  /* Map background will be handled by tile layer selection */
  background-color: var(--color-background) !important;
}

/* Map attribution styling */
.leaflet-control-attribution {
  background-color: var(--color-background-card) !important;
  color: var(--color-foreground-muted) !important;
  border-color: var(--color-border) !important;
}

/* Map popup styling */
.leaflet-popup-content-wrapper {
  background-color: var(--color-background-card) !important;
  color: var(--color-foreground) !important;
  border-color: var(--color-border) !important;
}

.leaflet-popup-tip {
  background-color: var(--color-background-card) !important;
}

/* Map marker cluster styling */
.marker-cluster-small {
  background-color: var(--color-background-card) !important;
  border-color: var(--color-border) !important;
}

.marker-cluster-small div {
  background-color: var(--color-foreground) !important;
  color: var(--color-background-card) !important;
}

/* No direct imports needed - already included via require directives above */