/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * MAP_STYLES.CSS - Centralized Styles for Map Components
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * This file contains all map-related styles including:
 * - CSS Variables (colors, fonts, sizes)
 * - Well layer styles
 * - Selection tool styles
 * - Measurement tool styles
 * - Drawing/annotation tool styles
 * - Legend styles
 * - Popup styles
 * - Toolbar styles
 * 
 * Usage: Import CSS variables in JS using getComputedStyle():
 *   const color = getComputedStyle(document.documentElement)
 *     .getPropertyValue('--well-project-color').trim();
 * 
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   CSS VARIABLES - Single source of truth for colors and styles
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────────
       WELL COLORS
       These are used in JS for well layer styling AND legend colors
       
       The system uses a BASE COLOR that gets automatically inverted for dark themes
       (same logic as modebar icons - no need to define separate light/dark colors)
       
       --well-project-color: Current computed color (updated by JS based on theme)
       --well-project-color-base: The base color you want to use
       ───────────────────────────────────────────────────────────────────────── */
    --well-project-color: #000000;
    /* Current color (computed by JS) */
    --well-project-color-base: #333333;
    /* BASE COLOR - change this to customize */
    --well-selected-color: #f7029e;
    /* Pink - selected wells */
    --well-custom-default-color: #2563eb;
    /* Blue - default for custom groups */

    /* ─────────────────────────────────────────────────────────────────────────
       WELL POPUP COLORS (auto-inverted for dark themes, like project wells)
       ───────────────────────────────────────────────────────────────────────── */
    --well-popup-bg: #ffffff;
    /* Current (updated by JS) */
    --well-popup-text: #333333;
    /* Current (updated by JS) */
    --well-popup-bg-base: #ffffff;
    /* BASE - change this to customize */
    --well-popup-text-base: #333333;
    /* BASE - change this to customize */
    --well-popup-bg-opacity: 0.8;
    /* Transparency control */

    /* ─────────────────────────────────────────────────────────────────────────
       MODEBAR ICON COLORS (for basemap theme switching)
       ───────────────────────────────────────────────────────────────────────── */
    --modebar-icon-filter-light: brightness(0) opacity(0.7);
    /* Dark icons for light basemaps */
    --modebar-icon-filter-dark: brightness(0) invert(1) opacity(0.9);
    /* White icons for dark basemaps */

    /* ─────────────────────────────────────────────────────────────────────────
       TOOL COLORS
       Active state colors for toolbar buttons
       ───────────────────────────────────────────────────────────────────────── */
    --tool-active-bg: #007bff;
    --tool-active-color: #ffffff;
    --tool-inactive-bg: transparent;
    --tool-inactive-color: inherit;

    /* ─────────────────────────────────────────────────────────────────────────
       DRAWING COLORS
       Selection shapes, lasso, etc.
       ───────────────────────────────────────────────────────────────────────── */
    --draw-stroke-color: #808080;
    --draw-fill-color: #808080;
    --draw-fill-opacity: 0.1;
    --draw-shape-color: #007bff;
    --draw-shape-selected-color: #ff6b6b;

    /* ─────────────────────────────────────────────────────────────────────────
       MEASUREMENT COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --measure-line-color: #4a5568;
    --measure-preview-color: #718096;
    --measure-fill-color: #4a5568;
    --measure-fill-opacity: 0.1;
    --measure-label-bg: rgba(55, 65, 81, 0.75);
    --measure-label-color: #ffffff;

    /* ─────────────────────────────────────────────────────────────────────────
       ANNOTATION COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --annotation-border-color: #007bff;
    --annotation-selected-border: #ff6b6b;
    --annotation-bg: rgba(255, 255, 255, 0.95);
    --annotation-selected-bg: rgba(255, 240, 240, 0.95);

    /* ─────────────────────────────────────────────────────────────────────────
       LEGEND COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --legend-bg: rgba(255, 255, 255, 0.5);
    --legend-header-bg: rgba(0, 0, 0, 0.03);
    --legend-border-color: rgba(0, 0, 0, 0.06);
    --legend-text-color: #374151;
    --legend-text-muted: #6b7280;
    --legend-text-disabled: #9ca3af;
    --legend-hover-bg: rgba(0, 0, 0, 0.05);
    --legend-drag-highlight: #3b82f6;

    /* ─────────────────────────────────────────────────────────────────────────
       POPUP COLORS
       ───────────────────────────────────────────────────────────────────────── */
    --popup-bg: rgba(31, 41, 55, 0.75);
    --popup-border: rgba(255, 255, 255, 0.1);
    --popup-text-color: #ffffff;
    --popup-text-muted: #9ca3af;
    --popup-accent-color: #60a5fa;

    /* ─────────────────────────────────────────────────────────────────────────
       FONT STACK
       ───────────────────────────────────────────────────────────────────────── */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   TOOLBAR BUTTON STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.toolbar-btn.active {
    background-color: var(--tool-active-bg) !important;
    color: var(--tool-active-color) !important;
}

.toolbar-btn:not(.active) {
    background-color: var(--tool-inactive-bg);
    color: var(--tool-inactive-color);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MODEBAR STYLES (Plotly-inspired, overlays map)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* CSS Variable for modebar transparency - adjust this to change opacity */
:root {
    --modebar-bg-opacity: 0.7;
    --modebar-dropdown-bg-opacity: 0.7;

    /* Modebar icon color - use CSS filter values
       Common colors:
       - Black:      brightness(0)
       - Dark gray:  brightness(0) opacity(0.7)
       - White:      brightness(0) invert(1)
       - Blue:       brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(206deg) brightness(100%) contrast(97%)
       - Red:        brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(2255%) hue-rotate(346deg) brightness(91%) contrast(95%)
       - Green:      brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)
    */
    --modebar-icon-filter: brightness(0) opacity(0.7);
}

.modebar {
    position: absolute;
    top: 10px;
    left: 250px;
    /* transform: translateX(-50%); */
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, var(--modebar-bg-opacity));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
    padding: 2px;
}

.modebar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
    position: relative;
    padding: 4px;
    outline: none;
}

.modebar-btn:focus {
    outline: none;
}

.modebar-btn:hover {
    background: rgba(68, 68, 68, 0.15);
}

.modebar-btn:active {
    transform: scale(0.95);
}

.modebar-btn.active {
    background: rgba(68, 68, 68, 0.25);
}

.modebar-btn.active:hover {
    background: rgba(68, 68, 68, 0.35);
}

/* Loading state for save button - grayed out */
.modebar-btn.loading {
    pointer-events: none;
}

.modebar-btn.loading .modebar-icon {
    opacity: 0.3;
}

/* Danger/clear button hover effect */
.modebar-btn.modebar-btn-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.modebar-btn.modebar-btn-danger:hover .modebar-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(2255%) hue-rotate(346deg) brightness(91%) contrast(95%);
}

/* Icon styling - crisp rendering */
.modebar-icon {
    width: 18px;
    height: 18px;
    transition: opacity 0.15s ease, filter 0.15s ease;
    /* Apply the icon color filter */
    filter: var(--modebar-icon-filter);
    /* Crisp SVG rendering */
    shape-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.modebar-btn:hover .modebar-icon {
    filter: var(--modebar-icon-filter) brightness(1.2);
}

.modebar-btn.active .modebar-icon {
    filter: var(--modebar-icon-filter) brightness(1.2);
}

/* Tooltip for modebar buttons (using data-tooltip) */
.modebar-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    font-family: var(--font-family);
}

.modebar-btn[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Separator between button groups */
.modebar-separator {
    width: 1px;
    height: 16px;
    background: rgba(68, 68, 68, 0.2);
    margin: 0 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MAP WATERMARK
   ═══════════════════════════════════════════════════════════════════════════════ */

.map-watermark {
    position: absolute;
    bottom: 15px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-family);
    pointer-events: none;
    user-select: none;
    z-index: 5;
}

.watermark-logo {
    width: 18px;
    /* height: 14px; */
    opacity: 0.9;
    /* filter: brightness(0) saturate(100%); */
}

.watermark-text {
    font-size: 10px;
    font-weight: 500;
    color: rgba(115, 115, 115, 0.75);
    letter-spacing: 0.3px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MEASUREMENT TOOL STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Preview label that follows cursor */
.measure-preview-label {
    background: var(--measure-label-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--measure-label-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: var(--font-family);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    line-height: 1.4;
}

.measure-preview-label small {
    display: block;
    font-size: 9px;
    color: var(--popup-text-muted);
    font-weight: 400;
}

/* Vertex distance labels */
.measure-vertex-label {
    background: rgba(55, 65, 81, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #e5e7eb;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-family: var(--font-family);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.3px;
}

/* Point markers - + symbol */
.measure-point-marker {
    font-size: 16px;
    font-weight: 300;
    color: var(--measure-line-color);
    line-height: 1;
    pointer-events: none;
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
}

/* Final result popup */
.measure-popup-modern .maplibregl-popup-content {
    background: var(--popup-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--popup-border);
    overflow: hidden;
}

.measure-popup-modern .maplibregl-popup-close-button {
    color: var(--popup-text-muted);
    font-size: 16px;
    padding: 4px 8px;
    right: 2px;
    top: 2px;
}

.measure-popup-modern .maplibregl-popup-close-button:hover {
    color: var(--popup-text-color);
    background: transparent;
}

.measure-popup-modern .maplibregl-popup-tip {
    border-top-color: var(--popup-bg);
}

.measure-result {
    padding: 12px 16px;
    font-family: var(--font-family);
}

.measure-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.measure-result-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.measure-result-row .measure-icon {
    font-size: 12px;
    color: var(--popup-accent-color);
    width: 18px;
    text-align: center;
}

.measure-result-row .measure-label {
    font-size: 10px;
    color: var(--popup-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 1;
}

.measure-result-row .measure-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--popup-text-color);
    font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   DRAWING TOOLS STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.draw-tools-container {
    position: relative;
    display: inline-flex;
}

/* Tooltip for drawing tools button - shown since it's in a container */
.draw-tools-container>.modebar-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    font-family: var(--font-family);
    display: block;
}

.draw-tools-container>.modebar-btn[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Hide tooltip when dropdown is open */
.draw-tools-container:has(.draw-tools-dropdown.show)>.modebar-btn[data-tooltip]::after {
    display: none;
}

.draw-tools-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(255, 255, 255, var(--modebar-dropdown-bg-opacity));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 4px;
    z-index: 1000;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    width: auto;
    min-width: 110px;
}

.draw-tools-dropdown.show {
    display: flex;
}

.draw-tool-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
    position: relative;
    outline: none;
}

.draw-tool-item:focus {
    outline: none;
}

.draw-tool-item:hover {
    background: rgba(0, 0, 0, 0.08);
}

.draw-tool-item.active {
    background: rgba(68, 68, 68, 0.2);
}

/* Dropdown icon styling - crisp rendering */
.dropdown-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    shape-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.draw-tool-item:hover .dropdown-icon {
    opacity: 0.9;
}

/* Tooltip for dropdown items */
.draw-tool-item[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    z-index: 1001;
    font-family: var(--font-family);
}

.draw-tool-item[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Danger/destructive action styling */
.draw-tool-item.draw-tool-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.draw-tool-item.draw-tool-danger:hover .dropdown-icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(94%) saturate(2255%) hue-rotate(346deg) brightness(91%) contrast(95%);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   BASEMAP SELECTOR DROPDOWN
   ═══════════════════════════════════════════════════════════════════════════════ */

.basemap-container {
    position: relative;
    display: inline-flex;
}

/* Tooltip for basemap button */
.basemap-container>.modebar-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    font-family: var(--font-family);
    display: block;
}

.basemap-container>.modebar-btn[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Hide tooltip when dropdown is open */
.basemap-container:has(.basemap-dropdown.show)>.modebar-btn[data-tooltip]::after {
    display: none;
}

.basemap-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(255, 255, 255, var(--modebar-dropdown-bg-opacity));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 8px;
    z-index: 1000;
    /* Grid layout like Google Maps */
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: auto;
}

.basemap-dropdown.show {
    display: grid;
}

.basemap-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.15s ease;
    font-family: var(--font-family);
    outline: none;
    width: 70px;
}

.basemap-item:focus {
    outline: none;
}

.basemap-item:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.basemap-item.active {
    /* border-color: #6b6b6b; */
    background: rgba(0, 0, 0, 0.05);
}

.basemap-preview {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    margin-bottom: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease;
}

.basemap-item:hover .basemap-preview {
    transform: scale(1.02);
}

/* .basemap-item.active .basemap-preview {
    border-color: #333;
} */

.basemap-label {
    font-size: 10px;
    color: #333;
    text-align: center;
    line-height: 1.2;
    font-weight: 400;
}

.basemap-item.active .basemap-label {
    color: #333;
    font-weight: 600;
}

/* Pro badge for API-based basemaps - Apple-style flat design */
.basemap-pro-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    pointer-events: none;
}

/* Make basemap-item relative for badge positioning */
.basemap-item {
    position: relative;
}


/* Annotation text input popup */
.annotation-input-popup {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.annotation-input-popup input {
    width: 200px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
}

.annotation-input-popup input:focus {
    border-color: var(--draw-shape-color);
}

/* Annotation markers on map */
.annotation-marker {
    background: var(--annotation-bg);
    border: 1px solid var(--annotation-border-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: var(--font-family);
    color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: move;
    max-width: 200px;
    word-wrap: break-word;
    user-select: none;
}

.annotation-marker:hover {
    border-color: #0056b3;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.annotation-marker.selected {
    border-color: var(--annotation-selected-border);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    background: var(--annotation-selected-bg);
}

/* Drawing preview styles */
.draw-preview-circle {
    border: 2px dashed var(--draw-shape-color);
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.1);
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, -50%);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   HOVER POPUP STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.maplibregl-popup-content {
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--font-family);
}

/* Well hover popup - uses theme-aware colors */
.well-popup {
    font-size: 12px;
    font-weight: 500;
    color: var(--well-popup-text);
}

/* Override popup container background for well popups */
.maplibregl-popup-content:has(.well-popup) {
    background: var(--well-popup-bg);
    padding: 6px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Arrow tip - must match popup background */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: var(--well-popup-bg);
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: var(--well-popup-bg);
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: var(--well-popup-bg);
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: var(--well-popup-bg);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   INTERACTIVE LEGEND STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.map-legend {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--legend-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: var(--font-family);
    z-index: 10;
    min-width: 100px;
    border: 1px solid var(--legend-border-color);
    overflow: visible;
    /* Remove transitions that cause lag during drag */
    will-change: left, top;
}

/* While dragging - disable backdrop-filter for performance */
.map-legend.dragging-legend {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0.95;
}

/* Legend header - draggable area */
.legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--legend-header-bg);
    border-bottom: 1px solid var(--legend-border-color);
    cursor: move;
    user-select: none;
}

.legend-header-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--legend-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legend-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    color: var(--legend-text-muted);
    line-height: 1;
}

.legend-toggle-btn:hover {
    color: var(--legend-text-color);
}

.legend-toggle-btn.collapsed {
    transform: rotate(180deg);
}

/* Legend content - collapsible */
.legend-content {
    padding: 6px 8px;
    max-height: 500px;
    opacity: 1;
    overflow: visible;
}

.legend-content.collapsed {
    max-height: 0;
    padding: 0 8px;
    opacity: 0;
    overflow: hidden;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    cursor: pointer;
    border-radius: 3px;
    margin: 1px 0;
    user-select: none;
}

.legend-item:hover {
    background: var(--legend-hover-bg);
}

.legend-item:active {
    transform: scale(0.98);
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Project wells color dot */
.legend-color.project-wells {
    background-color: var(--well-project-color);
}

/* Selected wells color dot */
.legend-color.selected-wells {
    background-color: var(--well-selected-color);
}

.legend-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--legend-text-color);
    transition: all 0.2s ease;
    flex: 1;
}

.legend-count {
    font-size: 9px;
    font-weight: 400;
    color: var(--legend-text-muted);
    margin-left: auto;
    transition: all 0.2s ease;
}

/* Dimmed (hidden) state - mimics Plotly legend toggle */
.legend-item:not(.active) {
    opacity: 0.4;
}

.legend-item:not(.active) .legend-color {
    background-color: #ccc !important;
    border-color: rgba(0, 0, 0, 0.05);
}

.legend-item:not(.active) .legend-label {
    color: var(--legend-text-disabled);
    text-decoration: line-through;
}

.legend-item:not(.active) .legend-count {
    color: var(--legend-text-disabled);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LEGEND ZOOM BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.legend-zoom-btn {
    background: none;
    border: none;
    cursor: pointer;
    /* Larger horizontal click area, keep vertical compact */
    padding: 2px 6px;
    margin-left: 4px;
    margin-right: -4px;  /* Compensate for padding on the right */
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    position: relative;
    border-radius: 4px;
    /* Ensure it's above legend-item for click events */
    z-index: 1;
}

.legend-zoom-btn:focus {
    outline: none;
}

.legend-zoom-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    /* Prevent icon from capturing clicks */
    pointer-events: none;
}

.legend-zoom-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.08);
}

.legend-zoom-btn:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.12);
}

.legend-zoom-btn:hover .legend-zoom-icon {
    opacity: 1;
}

.legend-item:not(.active) .legend-zoom-btn {
    opacity: 0.3;
}

/* Tooltip for legend zoom button */
.legend-zoom-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 1000;
    font-family: var(--font-family);
}

.legend-zoom-btn[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LEGEND DRAG & DROP REORDERING
   ═══════════════════════════════════════════════════════════════════════════════ */

.drag-handle {
    cursor: grab;
    color: var(--legend-text-disabled);
    font-size: 8px;
    letter-spacing: -2px;
    margin-right: 2px;
    padding: 1px;
    transition: color 0.2s ease;
}

.drag-handle:hover {
    color: #4b5563;
}

.legend-item[draggable="true"] {
    cursor: grab;
}

.legend-item.dragging {
    opacity: 0.5;
    background: rgba(59, 130, 246, 0.1);
    cursor: grabbing;
}

.legend-item.drag-over {
    border-top: 2px solid var(--legend-drag-highlight);
    padding-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LASSO SELECTION CURSOR
   ═══════════════════════════════════════════════════════════════════════════════ */

.cursor-crosshair {
    cursor: crosshair !important;
}