/* ============================================
   DRAWING TOOLS STYLES
   ============================================ */

/* ---- CURSOR MODES ---- */
.tool-mode-select { cursor: default; }
.tool-mode-place-marker .leaflet-container,
.leaflet-container.tool-mode-place-marker { cursor: crosshair !important; }
.tool-mode-draw-polyline .leaflet-container,
.tool-mode-draw-polyline .leaflet-grab { cursor: crosshair !important; }
.tool-mode-draw-polygon .leaflet-container,
.tool-mode-draw-polygon .leaflet-grab { cursor: crosshair !important; }
.tool-mode-draw-arrow .leaflet-container,
.tool-mode-draw-arrow .leaflet-grab { cursor: crosshair !important; }
.tool-mode-draw-circle .leaflet-container,
.tool-mode-draw-circle .leaflet-grab { cursor: crosshair !important; }
.tool-mode-draw-rectangle .leaflet-container,
.tool-mode-draw-rectangle .leaflet-grab { cursor: crosshair !important; }
.tool-mode-measure .leaflet-container,
.tool-mode-measure .leaflet-grab { cursor: crosshair !important; }

.tool-mode-move .leaflet-container,
.tool-mode-move .leaflet-grab { cursor: move !important; }
.tool-mode-move .leaflet-interactive { cursor: move !important; }
.tool-mode-move .drawing-text-content { cursor: move !important; }

#map.tool-mode-draw-polyline,
#map.tool-mode-draw-polygon,
#map.tool-mode-draw-arrow,
#map.tool-mode-draw-circle,
#map.tool-mode-draw-rectangle,
#map.tool-mode-measure,
#map.tool-mode-place-marker {
    cursor: crosshair;
}
#map.tool-mode-move { cursor: move; }

/* ---- VERTEX MARKERS ---- */
.drawing-vertex {
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent-primary);
    background: var(--bg-elevated);
    border-radius: 50%;
    cursor: grab;
    transition: all 0.1s ease;
    z-index: 1000 !important;
}

.drawing-vertex:hover {
    background: var(--accent-primary);
    transform: scale(1.3);
}

.drawing-vertex-temp {
    width: 8px;
    height: 8px;
    border: 2px solid var(--accent-primary);
    background: var(--bg-base);
    border-radius: 50%;
    opacity: 0.8;
}

/* ---- ARROWHEAD ---- */
.drawing-arrowhead {
    background: none !important;
    border: none !important;
}

/* ---- MEASUREMENT LABELS ---- */
.measurement-label {
    background: rgba(20, 20, 22, 0.88) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--accent-primary) !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: var(--radius-xs, 4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
}

.measurement-label::before {
    display: none !important;
}

.measurement-total {
    font-size: 12px !important;
    border-color: var(--accent-primary) !important;
    padding: 3px 10px !important;
}

/* ---- DRAWING LABELS ---- */
.drawing-label {
    background: rgba(20, 20, 22, 0.85) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 2px 10px !important;
    border-radius: var(--radius-xs, 4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.drawing-label::before {
    display: none !important;
}

.drawing-label-rotated {
    white-space: nowrap !important;
    transform-origin: center center !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.drawing-label-text {
    white-space: nowrap !important;
    transform-origin: center center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--text-primary) !important;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.8),
         1px -1px 0 rgba(0, 0, 0, 0.8),
        -1px  1px 0 rgba(0, 0, 0, 0.8),
         1px  1px 0 rgba(0, 0, 0, 0.8),
         0    0   6px rgba(0, 0, 0, 0.6) !important;
}

.drawing-label-draggable {
    cursor: move !important;
}

.drawing-label-content {
    background: rgba(20, 20, 22, 0.85) !important;
    border: 1px solid var(--border-medium) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 2px 10px !important;
    border-radius: var(--radius-xs, 4px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
}

.drawing-label-area-draggable {
    cursor: move !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ---- EXTEND LINE BUTTON ---- */
.props-btn-extend {
    width: 100%;
    padding: 8px 0;
    background: var(--accent-primary-dim);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.props-btn-extend:hover {
    background: var(--accent-primary-glow);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* ---- TEXT TOOL ---- */
.tool-mode-draw-text .leaflet-container,
.tool-mode-draw-text .leaflet-grab { cursor: text !important; }
#map.tool-mode-draw-text { cursor: text; }

/* Inline text editor */
.drawing-text-editor {
    min-width: 120px;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-bottom: 2px solid var(--accent-primary, #D4AF37);
    color: var(--text-primary, rgba(255, 255, 255, 0.92));
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 600;
    outline: none;
    box-shadow: none;
    caret-color: var(--accent-primary, #D4AF37);
    letter-spacing: 0.2px;
    line-height: 1.3;
}

.drawing-text-editor::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Text marker on map */
.drawing-text-marker {
    background: none !important;
    border: none !important;
}

.drawing-text-content {
    font-family: var(--font-sans, 'Inter', sans-serif);
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 0;
    background: none;
    border: none;
    max-width: 400px;
    line-height: 1.3;
    letter-spacing: 0.2px;
    cursor: pointer;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.85),
         1px -1px 0 rgba(0, 0, 0, 0.85),
        -1px  1px 0 rgba(0, 0, 0, 0.85),
         1px  1px 0 rgba(0, 0, 0, 0.85),
         0    0   6px rgba(0, 0, 0, 0.7);
}

/* Selected text outline */
.drawing-text-marker.selected .drawing-text-content {
    outline: 1px dashed var(--accent-primary, #D4AF37);
    outline-offset: 3px;
}