/**
 * Map CSS - Leaflet map and marker styles
 */

/* ══════════════════════════════════════════════════════
   MAP CONTAINER
   ══════════════════════════════════════════════════════ */
#map {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #1a1a2e;
}

/* ══════════════════════════════════════════════════════
   LEAFLET OVERRIDES
   ══════════════════════════════════════════════════════ */
.leaflet-container {
  font-family: inherit;
}

/* Hit / sentry markers: DivIcon may use a shorter [iconSize] height than painted content (letter below house). */
.leaflet-marker-triangle-hit.leaflet-zoom-animated {
  overflow: visible !important;
}

.leaflet-marker-icon:has(.leaflet-marker-triangle-hit) {
  overflow: visible !important;
}

/* Hide Leaflet attribution watermark */
.leaflet-control-attribution {
  display: none !important;
}

/* Layer control */
.leaflet-control-layers {
  background: var(--color-toolbar-bg) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-md) !important;
}

.leaflet-control-layers-toggle {
  background-color: var(--color-toolbar-bg) !important;
  border-radius: 8px !important;
}

.leaflet-control-layers-expanded {
  padding: 8px 12px !important;
  color: var(--color-toolbar-text) !important;
}

/* Zoom control - Google Maps style */
.leaflet-control-zoom {
  border: none !important;
  border-radius: 2px !important;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px !important;
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}

.leaflet-control-zoom a {
  background: #fff !important;
  color: #666 !important;
  border: none !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 18px !important;
  font-weight: 400 !important;
}

.leaflet-control-zoom a:hover {
  background: #f5f5f5 !important;
  color: #333 !important;
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid #e6e6e6 !important;
}

.leaflet-control-zoom a.leaflet-disabled {
  background: #fff !important;
  color: #ccc !important;
}

/* ══════════════════════════════════════════════════════
   VERTEX MARKERS (Edit Mode - Polygons)
   ══════════════════════════════════════════════════════ */
.vertex-marker {
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -6px !important;
  background: #FF8400 !important;
  border: 2px solid rgba(0, 0, 0, 1) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: move !important;
}

.vertex-marker.active-vertex {
  background: #ff4444 !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 68, 68, 0.5), 0 0 8px rgba(255, 68, 68, 0.8) !important;
  transform: scale(1.3);
  z-index: 1000 !important;
}

/* ══════════════════════════════════════════════════════
   MIDPOINT MARKERS (Edit Mode)
   ══════════════════════════════════════════════════════ */
.midpoint-marker {
  width: 10px !important;
  height: 10px !important;
  margin-left: -5px !important;
  margin-top: -5px !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(0, 0, 0, 1) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: move !important;
}

/* ══════════════════════════════════════════════════════
   GEOMAN DEFAULT MARKERS OVERRIDE
   ══════════════════════════════════════════════════════ */
/* Override Geoman's default marker-icon - DEFAULT (edit mode): 12x12 orange */
.leaflet-marker-icon.marker-icon {
  width: 12px !important;
  height: 12px !important;
  margin-left: -6px !important;
  margin-top: -6px !important;
  background: #FF8400 !important;
  border: 2px solid rgba(0, 0, 0, 1) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: move !important;
}

.leaflet-marker-icon.marker-icon:hover {
  transform: scale(1.2);
}

/* Active vertex state for Geoman markers */
.leaflet-marker-icon.marker-icon.active-vertex {
  background: #ff4444 !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 68, 68, 0.5), 0 0 8px rgba(255, 68, 68, 0.8) !important;
  transform: scale(1.3);
  z-index: 1000 !important;
}

/* Override Geoman's midpoint marker (marker-icon-middle) */
.leaflet-marker-icon.marker-icon-middle {
  width: 10px !important;
  height: 10px !important;
  margin-left: -5px !important;
  margin-top: -5px !important;
  background: #FFFFFF !important;
  border: 2px solid rgba(0, 0, 0, 1) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  cursor: url("../assets/cursors.svg") 2 2, copy !important;
}

.leaflet-marker-icon.marker-icon-middle:hover {
  transform: scale(1.2);
}

/* Drawing mode markers (smaller, white) */
body.is-drawing .leaflet-marker-icon.marker-icon {
  width: 10px !important;
  height: 10px !important;
  margin-left: -5px !important;
  margin-top: -5px !important;
  background: var(--color-handle-white) !important;
  border: var(--handle-border-width) solid var(--color-handle-border) !important;
}

.drawing-vertex-marker {
  width: 10px !important;
  height: 10px !important;
  background: var(--color-handle-white) !important;
  border: var(--handle-border-width) solid var(--color-handle-border) !important;
  border-radius: 50% !important;
}

/* ══════════════════════════════════════════════════════
   TRANSFORM MODE HANDLES
   ══════════════════════════════════════════════════════ */
/* Corner handles (squares) */
.transform-corner-handle {
  width: var(--handle-size-corner) !important;
  height: var(--handle-size-corner) !important;
  background: var(--color-handle-white) !important;
  border: var(--handle-border-width) solid var(--color-transform-frame) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Edge handles (squares) */
.transform-edge-handle {
  width: var(--handle-size-edge) !important;
  height: var(--handle-size-edge) !important;
  background: var(--color-handle-white) !important;
  border: var(--handle-border-width) solid var(--color-transform-frame) !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}

/* Rotation handle (circle) */
.transform-rotate-handle {
  width: var(--handle-size-corner) !important;
  height: var(--handle-size-corner) !important;
  background: var(--color-handle-white) !important;
  border: var(--handle-border-width) solid var(--color-transform-frame) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════
   EDIT MODE HANDLES (Rectangles/Circles)
   ══════════════════════════════════════════════════════ */
/* Corner handles (circles) */
.edit-corner-handle {
  width: var(--handle-size-corner) !important;
  height: var(--handle-size-corner) !important;
  background: var(--color-handle-orange) !important;
  border: var(--handle-border-width) solid var(--color-handle-border) !important;
  border-radius: 50% !important;
  cursor: move !important;
}

/* Edge handles (circles) */
.edit-edge-handle {
  width: var(--handle-size-edge) !important;
  height: var(--handle-size-edge) !important;
  background: var(--color-handle-white) !important;
  border: var(--handle-border-width) solid var(--color-handle-border) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════
   CURSOR STATES
   ══════════════════════════════════════════════════════ */
/* Transform mode - shape draggable */
body.is-transform-mode .leaflet-interactive.transform-draggable {
  cursor: grab !important;
}

body.is-transform-mode.is-dragging .leaflet-interactive.transform-draggable {
  cursor: grabbing !important;
}

/* Drawing mode cursor */
body.is-drawing .leaflet-container,
body.is-drawing .leaflet-interactive,
body.is-drawing .leaflet-marker-icon {
  cursor: crosshair !important;
}

/* ══════════════════════════════════════════════════════
   HIDE ELEMENTS DURING DRAWING
   ══════════════════════════════════════════════════════ */
/* Hide tooltips when drawing */
body.is-drawing .leaflet-tooltip {
  display: none !important;
}

/* Hide cursor marker and center point when drawing circle */
body.is-drawing-circle .leaflet-marker-icon.cursor-marker,
body.is-drawing-circle .leaflet-marker-icon.marker-icon {
  display: none !important;
}

/* Hide all vertex/corner markers when drawing rectangle */
body.is-drawing-rectangle .leaflet-marker-icon.rect-start-marker,
body.is-drawing-rectangle .leaflet-marker-icon.rect-style-marker,
body.is-drawing-rectangle .leaflet-marker-icon.cursor-marker {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   GEOMAN CONTROLS OVERRIDE
   ══════════════════════════════════════════════════════ */
.leaflet-pm-toolbar {
  display: none !important;
}

.leaflet-pm-actions-container {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   UNDO BUTTON (Google Maps undo_poly.png sprite)
   ══════════════════════════════════════════════════════ */
.undo-button-marker {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.leaflet-div-icon.undo-button-marker {
  background: none !important;
  border: none !important;
}

.undo-btn-google {
  width: 30px;
  height: 27px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.undo-btn-google>img {
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 27px;
  max-width: none;
  border: 0;
  padding: 0;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.undo-btn-google:hover>img {
  left: -30px;
}

.undo-btn-google:active>img {
  left: -60px;
}