/* ===========================================
   MAP AREA — Fills remaining viewport
   =========================================== */

#map-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* iPad: prevent bounce scroll and context menu on long-press */
    overscroll-behavior: none;
    -webkit-touch-callout: none;
}

#map {
    width: 100%;
    height: 100%;
    touch-action: none;
    background-color: #1c261c;              /* Dark forest green — blends with satellite vegetation */
    /* iPad: prevent text selection on long-press during dot editing */
    user-select: none;
    -webkit-user-select: none;
}

/* ===========================================
   ZOOM CONTROLS — Glass bar matching toolbar
   Overrides Leaflet's default .leaflet-bar styling
   with the same glass effect used by the toolbar.
   =========================================== */

.leaflet-control-zoom.leaflet-bar {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(40, 50, 40, 0.10),
                0 1px 6px rgba(40, 50, 40, 0.05),
                0 0 0 1px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
                inset 1px 0 0 0 rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.leaflet-control-zoom.leaflet-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--glass-noise);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: none;
    color: var(--text-primary);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 16px;
    font-weight: 400;
    transition: background var(--duration-fast) ease;
}

.leaflet-control-zoom a:last-child {
    border-bottom: none;
}

@media (hover: hover) {
    .leaflet-control-zoom a:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--text-primary);
    }
}

.leaflet-control-zoom a:active {
    background: rgba(0, 0, 0, 0.08);
}

/* Reset zoom button — appended to the zoom bar in map-manager.js */
.reset-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    text-decoration: none;
    color: var(--text-primary);
    background: none;
    cursor: pointer;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    transition: background var(--duration-fast) ease;
}

.reset-zoom-btn svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .reset-zoom-btn:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--text-primary);
    }
}

.reset-zoom-btn:active {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}


/* ===========================================
   NO IMAGERY INDICATOR — Centered glass chip
   Shows when lot has no drone imagery loaded.
   =========================================== */

/* Full-area glass overlay — blocks map interaction when no imagery.
   Toolbar (z-index 800) stays clickable above this (z-index 400). */
.no-imagery-indicator {
    position: absolute;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(4px) saturate(1.1);
    backdrop-filter: blur(4px) saturate(1.1);
    pointer-events: auto;              /* Blocks map panning/zooming */
    color: var(--accent);
}

.no-imagery-indicator svg {
    width: 80px;
    height: 80px;
    opacity: 0.7;
}


/* ===========================================
   MAP LOADING OVERLAY — Branded transition
   Dark green background + centered spinner.
   Shown during lot switch, fades out when tiles arrive.
   Uses ::before (background) and ::after (spinner)
   so no extra DOM elements are needed.
   =========================================== */

#map-area.map-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #1c261c;
    z-index: 400;
    opacity: 1;
    transition: opacity var(--duration-normal) ease;
    pointer-events: auto;
}

#map-area.map-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 401;
    opacity: 1;
    transition: opacity var(--duration-fast) ease;
}

/* When class is removed, the pseudo-elements don't exist — instant removal.
   For fade-OUT, we'd need a separate .map-loaded class with opacity:0.
   But the tile load is fast enough that instant removal is fine. */


/* Mass delete mode — red inset border replaces cursor:crosshair on touch.
   Gives spatial context that the map area is in a destructive selection mode. */
#map-area.mass-delete-active {
    box-shadow: inset 0 0 0 3px var(--danger), inset 0 0 12px rgba(239, 68, 68, 0.3);
}

/* ===========================================
   MAP OVERLAYS — Floating controls on the map
   =========================================== */



/* ===========================================
   COUNTS BUTTON (sidebar, next to map dropdown)
   Single dynamic button — shows unassigned or
   selected polygon count. Click to toggle dots.
   =========================================== */

#counts-bar {
    /* Override any inherited overlay styling — now lives in sidebar */
    position: static;
    z-index: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    display: flex;
    align-items: flex-end;
}

/* The single dynamic counts toggle button — fixed size for stability.
   Format: "○ 1234" (unassigned) or "● 1234" (polygon selected).
   Fixed width accommodates up to 4 digits + dot + spinner without resizing. */
.counts-toggle-btn {
    min-height: var(--touch-min);
    min-width: 70px;
    width: auto;
    max-width: 120px;
    padding: var(--space-sm) 0;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .counts-toggle-btn:hover {
        background: var(--bg-tertiary);
        border-color: var(--border-medium);
        color: var(--text-primary);
    }
}

.counts-toggle-btn:active {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

/* Active state — dots are visible on map */
.counts-toggle-btn.active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Reassigning spinner — shows while background dot assign/reassign runs */
.counts-toggle-btn.reassigning::after {
    content: '';
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-left: 4px;
    border: 2px solid var(--text-secondary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.counts-toggle-btn.active.reassigning::after {
    border-color: var(--accent);
    border-top-color: transparent;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* .row-toolbar-float CSS removed — tools moved to accordion toolbar */

/* Row count label shown on the map guide line */
.row-count-map-label {
    background: none !important;
    border: none !important;
}

.row-count-map-label span {
    background: var(--toolbar-bg);
    color: var(--toolbar-accent);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* Import Dots sync button — styled by modals.css sidebar footer rules */