/**
 * Dupacutremur Application Styles
 */

:root {
    --sab: env(safe-area-inset-bottom, 0px);

    /* Semantic color tokens — light defaults */
    --bg-body: #ffffff;
    --bg-surface: #f8f9fa;
    --bg-elevated: #f0f0f0;
    --bg-input: #ffffff;
    --border-color: #ddd;
    --border-light: #eee;
    --border-medium: #e0e0e0;
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #767676;
    --text-on-surface: #555;
    --shadow-color: rgba(0,0,0,0.1);
    --shadow-medium: rgba(0,0,0,0.2);
    --popup-bg: #e8f4f8;
    --control-bg: #ffffff;
    --hover-bg: #f0f0f0;
    --card-bg: #ffffff;
    --diff-old-bg: #ffeef0;
    --diff-new-bg: #e6ffed;
    --search-hover: #f0f7ff;
    --ac-bg: #ffffff;
    --ac-hover: #e9ecef;
}

html, body {
    overflow: hidden;
}

/* Focus-visible — keyboard focus indicator (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid #3887be;
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Prevent browser touch gestures from interfering with map/Draw interactions */
.mapboxgl-canvas {
    touch-action: none;
}

/* Add-building placement cursor (pin icon, falls back to crosshair) */
.add-building-mode .mapboxgl-canvas {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 24 32'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12c0 8 12 20 12 20s12-12 12-20C24 5.4 18.6 0 12 0z' fill='%230d6efd' stroke='%23fff' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='11' r='4' fill='%23fff'/%3E%3C/svg%3E") 12 32, crosshair !important;
}
.add-building-mode .mapboxgl-canvas:active {
    cursor: grabbing !important;
}

/* ============================================
   Auth UI
   ============================================ */
.auth-toolbar {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-toolbar .user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 0 0 0 10px;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    height: 29px;
    box-sizing: border-box;
}

#loginBtn {
    min-height: 29px;
    height: 29px;
    box-sizing: border-box;
}

.auth-toolbar .user-name {
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
}

.auth-toolbar .user-menu .badge {
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
}

.auth-toolbar .user-menu .dropdown {
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: -2px;
    position: relative;
}

.auth-toolbar .user-menu .dropdown-toggle {
    width: 33px;
    height: 29px;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #555;
}

.auth-toolbar .user-menu .dropdown-toggle:hover,
.auth-toolbar .user-menu .dropdown-toggle:focus,
.auth-toolbar .user-menu .dropdown-toggle:active,
.auth-toolbar .user-menu .dropdown.show > .dropdown-toggle {
    color: #222 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Dropdown menu: match user-menu shadow */
.auth-toolbar .user-menu .dropdown-menu {
    border: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    position: absolute;
    top: calc(100% + 2px);
    right: 2px;
}

/* Hide Bootstrap caret — hamburger icon is sufficient */
.auth-toolbar .user-menu .dropdown-toggle::after {
    display: none;
}

/* Spacer in chart sidebar to avoid overlap with fixed auth toolbar */
.auth-toolbar-spacer {
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}
.auth-toolbar-spacer + .card {
    margin-top: 0 !important;
}

/* Chart sidebar: hide when viewport too narrow for auth user-menu */
#chartSidebar {
    min-width: 200px;
    contain: content;
}
#chartSidebar canvas {
    background: #fff;
}

/* Match geocoder width to layers sidebar (tracks in real-time via --sidebar-width) */
.mapboxgl-ctrl-geocoder {
    width: var(--sidebar-width, 240px) !important;
    max-width: var(--sidebar-width, 240px) !important;
    min-width: var(--sidebar-width, 240px) !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1) !important;
    height: 29px !important;
    transition: width 0.15s ease, min-width 0.15s ease, max-width 0.15s ease;
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
    height: 29px;
    padding: 4px 35px;
    line-height: 21px;
}

/* Align geocoder search icon center with toggle button icon center */
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon-search {
    left: 3px !important;
    top: 50% !important;
    transform: translateY(-50%);
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--button {
    top: 50% !important;
    transform: translateY(-50%);
    height: auto;
    padding: 0;
    margin: 0;
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon-close {
    margin-top: 0;
}

/* Geocoder (top-left controls) above auth toolbar (z-index:10002) and sidebar toggle (z-index:4) */
.mapboxgl-ctrl-top-left {
    z-index: 10003 !important;
}

/* Push Mapbox controls (zoom, compass, fullscreen) below auth toolbar.
   Auth toolbar: top 10px + 29px height = bottom at 39px.
   40 + 10px Mapbox internal margin = 50px visual start on right. */
.mapboxgl-ctrl-top-right {
    top: 40px !important;
}


/* Language toggle — clean square in auth toolbar */
.lang-toggle {
    width: 29px;
    height: 29px;
    padding: 0;
    position: relative;
    border: none;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    font-size: 11px;
    font-weight: 700;
    font-family: sans-serif;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lang-toggle:hover {
    background: #f0f0f0;
}

/* Invisible 44px tap area for WCAG touch target compliance */
.theme-toggle::after, .lang-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* ============================================
   Review Modal — Two-Pane Layout
   ============================================ */
.review-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.review-list-pane {
    width: 260px;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.review-list-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.review-list-scroll {
    flex: 1;
    overflow-y: auto;
}

.review-detail-pane {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    min-width: 0;
}

/* Review List Items */
.review-item {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.15s;
}

.review-item:hover {
    background: #f8f9fa;
}

.review-item.active {
    background: #e8f4f8;
    border-left: 3px solid #0d6efd;
    padding-left: 9px;
}

.review-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.review-type-icon.type-point { background: #e3f2fd; color: #1565c0; }
.review-type-icon.type-polygon { background: #e8f5e9; color: #2e7d32; }
.review-type-icon.type-attributes { background: #fff3e0; color: #e65100; }
.review-type-icon.type-new { background: #f3e5f5; color: #7b1fa2; }

.review-item-address {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-item-meta {
    font-size: 11px;
    color: #888;
}

/* Diff View */
.review-diff-section {
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

.review-diff-section h6 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    margin-bottom: 10px;
}

.polygon-diff-summary {
    display: flex;
    gap: 16px;
    align-items: center;
}

.polygon-diff-stat .value {
    font-size: 20px;
    font-weight: 700;
}

.polygon-diff-stat .label {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
}

.review-actions {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px;
}

/* My Proposals Cards */
.my-proposal-card {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.my-proposal-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.my-proposal-card.expanded {
    border-color: #0d6efd;
    box-shadow: 0 2px 12px rgba(13,110,253,0.12);
}

.my-proposal-detail {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.my-proposal-card.expanded .my-proposal-detail {
    display: block;
}

/* ============================================
   Modals
   ============================================ */
.modal-backdrop {
    z-index: 10004 !important;
}
.modal {
    z-index: 10005 !important;
}

.modal-body .form-label {
    font-weight: 500;
    margin-bottom: 4px;
}

.modal-body .form-text {
    font-size: 11px;
    color: #6c757d;
}

/* ============================================
   Building Popup
   ============================================ */
.mapboxgl-popup-content {
    max-height: 400px;
    overflow-y: auto;
}

.mapboxgl-popup-content .btn-propose {
    width: 100%;
    margin-top: 10px;
}

/* ============================================
   Loading States
   ============================================ */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   Responsive Adjustments
   ============================================ */
/* Sidebar toggle button: always visible, toggles sidebar open/closed */
#mobileLayersToggle {
    display: flex;
}

/* Sidebar slide animation (both mobile and desktop) */
#layersSidebar {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
#layersSidebar.sidebar-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0s;
}

/* Smooth reposition for add-building button */
#addBuildingBtn {
    transition: top 0.3s ease;
}

/* Active state for toggle button — merge into sidebar header */
#mobileLayersToggle.active {
    background: #f8f9fa !important;
    border-radius: 4px 4px 0 0 !important;
    box-shadow: none !important;
    clip-path: inset(0 0 3px 0) !important;
}

@media (max-width: 768px) {
    /* Fix 3: Auth toolbar stays at top on mobile (not bottom, which overlaps popup) */
    .auth-toolbar {
        top: 10px;
        right: 10px;
        bottom: auto;
    }

    /* Sidebar uses position:fixed on mobile, below geocoder */
    #layersSidebar.sidebar-open {
        position: fixed !important;
        top: 50px !important;
        left: 10px !important;
        max-height: calc(100vh - 130px - env(safe-area-inset-bottom, 0px));
        max-height: calc(100dvh - 130px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        z-index: 3;
    }

    /* Toggle button: ensure top position and z-index on mobile */
    #mobileLayersToggle {
        display: flex !important;
        top: 50px !important;
        z-index: 4;
    }

    /* Fix 1: Building popup — width enforced, height set by JS for taskbar offset */
    .building-popup:not(.minimized) {
        width: calc(100vw - 20px) !important;
        border-radius: 12px 12px 8px 8px;
        resize: none !important;
    }

    /* Fix 1: Filters panel — full width, no resize on mobile, but NOT when minimized */
    #advancedFiltersPanel:not(.minimized) {
        width: calc(100vw - 20px) !important;
        border-radius: 12px 12px 8px 8px;
        resize: none !important;
    }

    /* Edit modal: edge-anchor on mobile so it doesn't extend behind nav bar */
    #editModal {
        width: calc(100vw - 20px) !important;
        top: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        max-height: none !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Mapbox popup width fix */
    .mapboxgl-popup-content {
        width: auto;
        max-width: calc(100vw - 40px);
    }
}

/* Mobile: collapsible geocoder icon */
@media (max-width: 640px) {
    .mapboxgl-ctrl-geocoder:not(.expanded) {
        width: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
        height: 29px;
        overflow: hidden;
        transition: all 0.25s ease;
    }
    .mapboxgl-ctrl-geocoder:not(.expanded) .mapboxgl-ctrl-geocoder--input {
        padding: 0;
        width: 0;
        opacity: 0;
    }
    .mapboxgl-ctrl-geocoder:not(.expanded) .mapboxgl-ctrl-geocoder--icon-close,
    .mapboxgl-ctrl-geocoder:not(.expanded) .suggestions {
        display: none;
    }
    .mapboxgl-ctrl-geocoder:not(.expanded) .mapboxgl-ctrl-geocoder--icon-search {
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);
    }
    .mapboxgl-ctrl-geocoder.expanded {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: calc(100vw - 20px) !important;
        transition: all 0.25s ease;
        z-index: 10004;
        height: 36px !important;
    }
    .mapboxgl-ctrl-geocoder.expanded .mapboxgl-ctrl-geocoder--input {
        height: 36px;
        padding: 6px 35px;
        line-height: 24px;
    }
    .mapboxgl-ctrl-geocoder.expanded .mapboxgl-ctrl-geocoder--icon-search {
        top: 8px;
    }
    .mapboxgl-ctrl-geocoder.expanded .mapboxgl-ctrl-geocoder--icon-close {
        width: 16px;
        height: 16px;
        margin-top: 3px;
        margin-right: 0;
    }
}

/* ============================================
   Hide elements by role
   ============================================ */
.admin-only,
.reviewer-only,
.auth-only {
    display: none;
}

/* ============================================
   Layers Sidebar
   ============================================ */
#layersSidebar .sidebar-section-title {
    font-weight: 600;
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.timelapse-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 6px 0 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#layersSidebar .sidebar-section-title .subtitle {
    font-weight: normal;
    font-size: 9px;
    color: #999;
    text-transform: none;
    letter-spacing: normal;
}

#layersSidebar .sidebar-divider {
    margin: 8px 0;
    border: none;
    border-top: 1px solid #aaa;
    opacity: 1;
}

.layer-item {
    padding: 3px 0;
    font-size: 12px;
    display: flex;
    align-items: center;
}
#layerList .layer-item {
    padding: 6px 0;
}
.layer-item label {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.layer-item .layer-color-btn {
    margin-left: auto;
}

.layer-item .drag-handle {
    cursor: grab;
    margin-right: 5px;
    color: #bbb;
    font-size: 11px;
}

/* Chart sidebar card drag-and-drop */
#chartSidebar [data-chart] {
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    position: relative;
    will-change: transform;
}
#chartSidebar [data-chart]:active { cursor: grabbing; }

/* Drag grip — faint, appears on hover */
.chart-drag-grip {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted, #999);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    user-select: none;
    line-height: 1;
}
#chartSidebar [data-chart]:hover .chart-drag-grip { opacity: 0.6; }

/* Hover lift */
#chartSidebar [data-chart]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Dragging card */
.chart-dragging {
    opacity: 0.5;
    transform: scale(0.97) rotate(0.5deg) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    z-index: 10;
}

/* Drop indicator — insertion line between cards */
.chart-drop-above,
.chart-drop-below {
    position: relative;
}
.chart-drop-above::after,
.chart-drop-below::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 3px;
    background: #3887be;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(56,135,190,0.5);
    pointer-events: none;
    z-index: 5;
}
.chart-drop-above::after {
    top: -9px;
}
.chart-drop-below::after {
    bottom: -9px;
}

/* Small circle accent on left end of insertion line */
.chart-drop-above::before,
.chart-drop-below::before {
    content: '';
    position: absolute;
    left: 2px;
    width: 9px;
    height: 9px;
    background: #3887be;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(56,135,190,0.5);
    pointer-events: none;
    z-index: 5;
}
.chart-drop-above::before {
    top: -12px;
}
.chart-drop-below::before {
    bottom: -12px;
}

/* Chart filter reset controls */
#clearAllChartFilters {
    text-align: right;
    padding: 0 4px;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transition: opacity .25s ease, visibility .25s ease, max-height .25s ease;
}
#clearAllChartFilters.visible {
    opacity: 1;
    visibility: visible;
    max-height: 40px;
}
#clearAllChartFilters button {
    font-size: .78rem;
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
#clearAllChartFilters button:hover {
    color: var(--text-primary);
}

.chart-filter-reset {
    float: right;
    /* Clear the drag grip (absolute, top:6px right:8px) so the ✕ and ⋮⋮ don't overlap */
    margin-right: 16px;
    cursor: pointer;
    font-size: .85rem;
    color: var(--text-secondary) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, color .15s ease;
}

/* Filter+viewport-aware summary line next to each chart title (e.g. "Median 4 · 78% above P+4"). */
.chart-summary {
    margin-left: 6px;
    font-weight: 400;
    font-size: .8rem;
    color: var(--text-secondary);
    opacity: 0.85;
}

/* Small breathing room between chart title and the canvas — prevents the donut
   chart's legend from kissing the title at narrow viewport widths. */
[data-chart] .card-text {
    margin-top: 6px;
}
.chart-filter-reset.visible {
    opacity: 1;
    visibility: visible;
}
.chart-filter-reset:hover {
    color: var(--text-primary) !important;
}

/* RAAPPS summary stat grid (v0.37.1) — big tweened numbers + tiny labels, zero prose.
   Theme-aware via tokens; the only literal colors are the house blue/red big-number pairs. */
.raapps-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.raapps-stat-grid .rsg-tile {
    min-width: 0;
    padding: 5px 7px 4px;
    background: var(--bg-elevated, #f0f0f0);
    border-radius: 6px;
}
.raapps-stat-grid .rsg-tile[title] { cursor: help; }
.raapps-stat-grid .rsg-wide {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.raapps-stat-grid .rsg-val {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: #3887be;            /* house big-number blue (lodging/dedup heroes) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.raapps-stat-grid .rsg-label {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary, #666);
}
.raapps-stat-grid .rsg-wide .rsg-label { margin-top: 0; text-align: right; }
.raapps-stat-grid .rsg-warn .rsg-val { color: #e53935; }
.raapps-stat-grid .rsg-note {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-secondary, #666);
}
/* ⓘ caveat affordance in the RAAPPS summary title */
.rsg-info {
    cursor: help;
    font-size: 12px;
    color: var(--text-secondary, #666);
    opacity: 0.7;
}
.rsg-info:hover, .rsg-info:focus { opacity: 1; color: var(--text-primary, #333); }

/* Active chart filter accent */
.chart-filter-active {
    border-left: 3px solid #3887be !important;
}

/* Suppress duplicate line when adjacent cards both show indicators */
.chart-drop-below + .chart-drop-above::after,
.chart-drop-below + .chart-drop-above::before {
    display: none;
}

/* Landed animation after drop */
@keyframes chartLanded {
    0%   { transform: scale(0.97); box-shadow: 0 0 0 2px rgba(56,135,190,0.5); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0px rgba(56,135,190,0); }
}
.chart-landed {
    animation: chartLanded 0.3s ease-out;
}

.layer-item .badge-ondemand {
    background: #6c757d;
    color: #fff;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 6px;
    margin-right: 4px;
}

.section-toggle .toggle-chevron {
    float: right;
    font-size: 10px;
    color: #999;
}

.collapsible {
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.collapsible.collapsed {
    max-height: 0 !important;
}

.layer-item .badge-count {
    font-size: 9px;
    color: #999;
    margin-left: 8px;
    margin-right: 6px;
    flex-shrink: 0;
}
.layer-item .badge-count + .badge-ondemand {
    margin-left: 2px;
}

/* ============================================
   Layer Color Picker
   ============================================ */

/* Swatch Button */
.layer-color-btn {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin-left: 6px;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
    background: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.layer-color-btn .lcb-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: none;
    transition: box-shadow 0.15s ease;
}
.layer-color-btn:hover { transform: scale(1.3); }
.layer-color-btn:hover .lcb-swatch {
    box-shadow: none;
}
.layer-color-btn.lcp-active { transform: scale(1.3); }
.layer-color-btn.lcp-active .lcb-swatch {
    box-shadow: 0 0 0 2px #0d6efd;
}

/* Popover Container + Arrow */
.lcp {
    position: fixed;
    width: var(--sidebar-width, 240px);
    z-index: 10006;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    padding: 12px;
    font-size: 11px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}
.lcp.lcp-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.lcp-arrow {
    position: absolute;
    top: -6px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #fff;
    box-shadow: -2px -2px 0 0 rgba(0,0,0,0.1);
    border: none;
    transform: rotate(45deg);
}

/* Header + Preview Strip */
.lcp-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 8px;
}
.lcp-preview {
    height: 24px;
    border-radius: 4px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.lcp-preview::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: var(--lcp-color, #95a5a6);
    opacity: var(--lcp-opacity, 0.3);
    transition: background 0.1s ease, opacity 0.1s ease;
}

/* Palette Swatches */
.lcp-palette {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}
.lcp-sw {
    width: 100%;
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lcp-sw:hover {
    transform: scale(1.25);
    z-index: 1;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15), inset 0 0 0 1px rgba(0,0,0,0.08);
}
.lcp-sw:active { transform: scale(1.1); }
.lcp-sw.lcp-sw-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0d6efd;
}
.lcp-sw.lcp-sw-active:hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0d6efd;
}

/* Custom Color Row */
.lcp-custom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.lcp-custom-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 11px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.lcp-custom-btn:hover {
    border-color: #0d6efd;
    color: #0d6efd;
    background: rgba(13, 110, 253, 0.04);
}
.lcp-custom-btn i { font-size: 12px; }
.lcp-custom-row input[type="color"] {
    position: absolute;
    width: 0; height: 0;
    padding: 0; border: 0;
    opacity: 0;
    pointer-events: none;
}
.lcp-hex {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    color: #555;
    margin-left: auto;
    width: 62px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    padding: 1px 4px;
    text-align: right;
    outline: none;
}
.lcp-hex:hover {
    border-color: #ccc;
}
.lcp-hex:focus {
    border-color: #4a90d9;
    background: #fff;
    color: #333;
}

/* Opacity Slider */
.lcp-opacity-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lcp-opacity-label {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
}
.lcp-opacity-val {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #555;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    font-family: 'Consolas', 'Monaco', monospace;
    width: 38px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    padding: 1px 4px;
    text-align: right;
    outline: none;
}
.lcp-opacity-val:hover {
    border-color: #ccc;
}
.lcp-opacity-val:focus {
    border-color: #4a90d9;
    background: #fff;
    color: #333;
}
.lcp-opacity-track {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}
.lcp-opacity-track::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 4px;
    background-image:
        linear-gradient(45deg, #ddd 25%, transparent 25%),
        linear-gradient(-45deg, #ddd 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ddd 75%),
        linear-gradient(-45deg, transparent 75%, #ddd 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.lcp-opacity-track::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 4px;
    background: linear-gradient(to right, transparent, var(--lcp-color, #95a5a6));
    pointer-events: none;
}
.lcp-opacity-track input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background: transparent;
    position: relative;
    z-index: 1;
    margin: 0;
    cursor: pointer;
}
.lcp-opacity-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.lcp-opacity-track input[type="range"]::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}
.lcp-opacity-track input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 1px 6px rgba(13, 110, 253, 0.3);
    transform: scale(1.15);
}
.lcp-opacity-track input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: transparent;
    border-radius: 4px;
}
.lcp-opacity-track input[type="range"]::-moz-range-track {
    height: 8px;
    background: transparent;
    border-radius: 4px;
    border: none;
}

/* Mobile */
@media (max-width: 768px) {
    .lcp {
        width: calc(100vw - 20px);
        max-width: var(--sidebar-width, 240px);
        left: 50% !important;
        transform: translateX(-50%) translateY(-4px) scale(0.97);
        top: 52px !important;
        padding: 14px;
    }
    .lcp.lcp-visible {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    .lcp-arrow { display: none; }
    .lcp-palette { gap: 6px; }
    .lcp-sw { min-width: 28px; min-height: 28px; }
    .lcp-opacity-track input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
    .lcp-opacity-track input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
}

/* ============================================
   Heatmaps section
   ============================================ */

/* Empty state */
.hm-empty {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    padding: 8px 4px 10px;
    text-align: center;
}

/* --- Per-heatmap card --- */
.hm-row {
    --hm-low: #fed976;          /* JS overrides per config; matches default ramp */
    --hm-high: #bd0026;
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 8px;
    overflow: hidden;           /* clips the accent strip to the radius */
}
.hm-row:last-of-type { margin-bottom: 6px; }

/* 3px gradient strip across the top — live preview of the low->high ramp */
.hm-row-accent {
    height: 3px;
    background: linear-gradient(to right, var(--hm-low), var(--hm-high));
}

/* Header strip */
.hm-row-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 7px;
}
.hm-vis {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.hm-vis input { cursor: pointer; margin: 0; }
.hm-row-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hm-color-pair {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
/* .hm-color-btn rides on .layer-color-btn (20px circle swatch); only size tweak: */
.hm-color-btn { width: 18px; height: 18px; margin-left: 0; }
.hm-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.hm-remove:hover { background: rgba(220,53,69,0.12); color: #dc3545; }

/* Body */
.hm-row-body {
    padding: 2px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* Label + select fields */
.hm-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.hm-field-label {
    flex-shrink: 0;
    width: 46px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}
.hm-select {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 3px 4px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
}
.hm-select:focus { border-color: #4a90d9; }

/* --- Sliders (namespaced clone of .lcp-opacity-*) --- */
.hm-slider {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hm-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.hm-slider-val {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-on-surface);
    width: 40px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    padding: 1px 4px;
    text-align: right;
    outline: none;
}
.hm-slider-val:hover { border-color: var(--border-color); }
.hm-slider-val:focus {
    border-color: #4a90d9;
    background: var(--bg-input);
    color: var(--text-primary);
}
.hm-slider-track {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
}
/* rail */
.hm-slider-track::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--border-medium);
}
.hm-slider-track input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    background: transparent;
    position: relative;
    z-index: 1;
    margin: 0;
    cursor: pointer;
}
.hm-slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.hm-slider-track input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}
.hm-slider-track input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 1px 6px rgba(13,110,253,0.3);
    transform: scale(1.15);
}
.hm-slider-track input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; background: transparent; border-radius: 2px;
}
.hm-slider-track input[type="range"]::-moz-range-track {
    height: 4px; background: transparent; border-radius: 2px; border: none;
}

/* --- Add-heatmap button --- */
.hm-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px 8px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.hm-add-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.hm-add-btn i { font-size: 12px; }

/* "Show below other layers" — labeled checkbox row in the body */
.hm-below {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    cursor: pointer;
}
.hm-below input { margin: 0; cursor: pointer; flex-shrink: 0; }

/* --- Disabled (stale source) state --- */
.hm-row.hm-disabled .hm-row-body,
.hm-row.hm-disabled .hm-color-pair {
    opacity: 0.45;
    pointer-events: none;
}
.hm-row.hm-disabled .hm-row-title { color: #dc3545; }

/* --- The only explicit dark-mode overrides needed --- */
[data-theme="dark"] .hm-slider-track input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] .hm-slider-track input[type="range"]::-moz-range-thumb {
    background: var(--bg-elevated);
    border-color: #3b82f6;
}
[data-theme="dark"] .hm-remove:hover {
    background: rgba(220,53,69,0.22);
}

/* ============================================================
   H3 hexagon layers — mirror of the .hm-* heatmap styles
   ============================================================ */
.h3-empty {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    padding: 8px 4px 10px;
    text-align: center;
}
.h3-row {
    --h3-low: #ffffb2;
    --h3-high: #bd0026;
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 8px;
    overflow: hidden;
}
.h3-row:last-of-type { margin-bottom: 6px; }
.h3-row-accent {
    height: 3px;
    background: linear-gradient(to right, var(--h3-low), var(--h3-high));
}
.h3-row-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 7px;
}
.h3-vis {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}
.h3-vis input { cursor: pointer; margin: 0; }
.h3-row-title {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.h3-color-pair {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.h3-color-btn { width: 18px; height: 18px; margin-left: 0; }
.h3-remove {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 11px;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.h3-remove:hover { background: rgba(220,53,69,0.12); color: #dc3545; }
.h3-row-body {
    padding: 2px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.h3-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.h3-field-label {
    flex-shrink: 0;
    width: 56px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}
.h3-select {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 3px 4px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--bg-input);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
}
.h3-select:focus { border-color: #4a90d9; }
.h3-slider {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.h3-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.h3-slider-val {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-on-surface);
    width: 40px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    padding: 1px 4px;
    text-align: right;
    outline: none;
}
.h3-slider-val:hover { border-color: var(--border-color); }
.h3-slider-val:focus {
    border-color: #4a90d9;
    background: var(--bg-input);
    color: var(--text-primary);
}
.h3-slider-track {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
}
.h3-slider-track::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--border-medium);
}
.h3-slider-track input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    background: transparent;
    position: relative;
    z-index: 1;
    margin: 0;
    cursor: pointer;
}
.h3-slider-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}
.h3-slider-track input[type="range"]::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0d6efd;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
}
.h3-slider-track input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 1px 6px rgba(13,110,253,0.3);
    transform: scale(1.15);
}
.h3-slider-track input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; background: transparent; border-radius: 2px;
}
.h3-slider-track input[type="range"]::-moz-range-track {
    height: 4px; background: transparent; border-radius: 2px; border: none;
}
.h3-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 5px 8px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.h3-add-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--text-muted);
    color: var(--text-primary);
}
.h3-add-btn i { font-size: 12px; }
.h3-below {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    cursor: pointer;
}
.h3-below input { margin: 0; cursor: pointer; flex-shrink: 0; }
/* per-layer computed value range (cheap legend) */
.h3-caption {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    text-align: right;
    letter-spacing: 0.3px;
    min-height: 12px;
}
.h3-row.h3-disabled .h3-row-body,
.h3-row.h3-disabled .h3-color-pair {
    opacity: 0.45;
    pointer-events: none;
}
.h3-row.h3-disabled .h3-row-title { color: #dc3545; }
[data-theme="dark"] .h3-slider-track input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] .h3-slider-track input[type="range"]::-moz-range-thumb {
    background: var(--bg-elevated);
    border-color: #3b82f6;
}
[data-theme="dark"] .h3-remove:hover {
    background: rgba(220,53,69,0.22);
}

/* H3 hexagon value popup (shown on click when a layer is 'clickable') */
/* override the global `.mapboxgl-popup-content { width: 400px }` (index_dev.html) so the hex
   popup sizes to its content instead of a fixed 400px */
.h3-popup-wrap .mapboxgl-popup-content { width: auto; max-width: 150px; padding: 0; overflow: hidden; border-radius: 8px; }
.h3-popup { min-width: 78px; padding: 7px 9px 8px; position: relative; }
.h3-popup-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.h3-popup-label {
    font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-secondary); margin-bottom: 1px; padding-right: 16px;
}
.h3-popup-value {
    font-size: 17px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.h3-popup-count {
    margin-top: 2px; font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.h3-popup .stat-grid { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-color); font-size: 11px; gap: 2px 10px; grid-template-columns: auto auto; justify-content: space-between; }
.h3-popup-label { word-break: break-word; }
/* Close button — integrated, sits clear of the 3px accent */
.h3-popup-wrap .mapboxgl-popup-close-button {
    top: 2px; right: 3px; width: 22px; height: 22px; padding: 0;
    font-size: 16px; line-height: 20px; border: none; border-radius: 5px;
    color: var(--text-secondary); background: none;
}
.h3-popup-wrap .mapboxgl-popup-close-button:hover {
    color: var(--text-primary); background: rgba(127,127,127,0.14);
}

/* Touch / small-screen: larger tap targets + viewport-safe popover */
@media (max-width: 768px) {
    .h3-info-btn, .hm-info-btn { padding: 4px 6px; font-size: 15px; }
    .layer-stats-popover { max-width: calc(100vw - 24px); }
    .h3-popup-wrap .mapboxgl-popup-close-button { width: 28px; height: 28px; font-size: 18px; line-height: 26px; }
}

/* Shared stat grid (hex popup + layer-stats popover) */
.stat-grid {
    display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; align-items: baseline;
    font-size: 12px;
}
.stat-grid .sg-label { color: var(--text-secondary); }
.stat-grid .sg-val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-primary); }

/* Layer-stats popover (anchored to the row ⓘ button) */
.layer-stats-popover {
    position: fixed; z-index: 10006; display: none;
    min-width: 158px; max-width: 230px; padding: 10px 12px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    color: var(--text-primary, #333);
}
.layer-stats-popover .lsp-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-secondary); margin-bottom: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ⓘ info button in H3 / heatmap rows */
.h3-info-btn, .hm-info-btn {
    background: none; border: none; cursor: pointer; padding: 0 3px;
    color: var(--text-secondary); font-size: 13px; line-height: 1; opacity: 0.7;
}
.h3-info-btn:hover, .hm-info-btn:hover { opacity: 1; color: var(--text-primary); }

/* ============================================
   Filter Buttons
   ============================================ */
.filter-btn {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 11px;
    font-weight: normal;
    transition: all 0.15s ease;
}

.filter-btn.active {
    background-color: #3887be !important;
    color: #fff !important;
    border-color: #3887be !important;
    font-weight: bold !important;
}

/* ============================================
   Satellite Loading & Progress
   ============================================ */
.sat-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px 14px;
    gap: 10px;
}
.sat-orbit-ring {
    position: relative;
    width: 40px;
    height: 40px;
}
.sat-orbit-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1.5px dashed var(--text-muted, #bbb);
    border-radius: 50%;
    opacity: 0.5;
}
.sat-orbit-ring::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}
.sat-orbit-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #7c3aed;
    border-radius: 50%;
    top: -3px;
    left: 50%;
    margin-left: -3px;
    box-shadow: 0 0 4px rgba(124, 58, 237, 0.6), 0 0 1px #fff;
    animation: sat-orbit 1.8s linear infinite;
    transform-origin: 3px 23px;
}
@keyframes sat-orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.sat-loader-text {
    font-size: 10px;
    color: var(--text-muted, #888);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.sat-loader-phase {
    font-size: 11px;
    color: var(--text-secondary, #666);
    font-weight: 500;
}

/* Progress track */
.sat-progress-wrap {
    padding: 0 4px;
    margin: 2px 0 6px;
}
.sat-progress-track {
    position: relative;
    height: 3px;
    background: var(--border-color, #e0e0e0);
    border-radius: 2px;
    overflow: hidden;
}
.sat-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #3b82f6);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
}
.sat-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    width: 8px;
    height: 5px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.8);
    opacity: 0.9;
}
.sat-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 9px;
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Satellite Pass Cards
   ============================================ */
.sat-pass-card {
    padding: 8px 10px;
    margin: 2px 4px;
    border-radius: 6px;
    border: 1px solid var(--border-light, #e8e8e8);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 11px;
}
.sat-pass-card:hover {
    background: var(--hover-bg, #f0f7ff);
    border-color: var(--border-medium, #ccc);
}
.sat-pass-card.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.06);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}
.sat-pass-card.sat-night {
    border-left: 3px solid #6366f1;
}
.sat-weather-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sat-category-badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    line-height: 1.4;
}

/* Dark mode overrides */
[data-theme="dark"] .sat-pass-card {
    border-color: var(--border-color);
}
[data-theme="dark"] .sat-pass-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}
[data-theme="dark"] .sat-pass-card.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
[data-theme="dark"] .sat-pass-card.sat-night {
    border-left-color: #818cf8;
}
[data-theme="dark"] .sat-orbit-ring::before {
    border-color: var(--text-muted);
}
[data-theme="dark"] .sat-progress-fill::after {
    background: var(--bg-elevated);
}
.sat-ext-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted, #888);
    text-decoration: none;
    flex-shrink: 0;
    transition: color 0.15s;
}
.sat-ext-link:hover {
    color: #3b82f6;
}
[data-theme="dark"] .sat-ext-link:hover {
    color: #60a5fa;
}
/* Satellite controls dark mode */
[data-theme="dark"] .sat-controls label {
    color: var(--text-secondary);
}
[data-theme="dark"] .sat-controls input.form-control {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] #satPosHeader {
    color: var(--text-secondary);
}
[data-theme="dark"] #satStatus {
    color: var(--text-muted);
}
.sat-error-msg {
    font-size: 11px;
    color: #ef4444;
    text-align: center;
    padding: 8px;
}

/* Satellite Controls — Responsive Layout */
.sat-controls {
    overflow: hidden;
    min-width: 0;
}
.sat-row-datetime {
    flex-wrap: wrap !important;
}
.sat-row-datetime label {
    flex-basis: 100%;
    margin-bottom: 2px;
}
.sat-row-datetime input[type="datetime-local"] {
    min-width: 0;
}
.sat-row-pos input[type="number"] {
    min-width: 0;
    width: 0;
}
.sat-card-details {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
}
.sat-card-details .sat-ext-link:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sat-pass-list {
    overflow-x: hidden;
    min-width: 0;
}

/* ============================================
   Verification Timelapse
   ============================================ */
.timelapse-controls {
    padding: 0 2px;
}
.timelapse-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.timelapse-play-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 3px;
    background: var(--bg-surface, #fff);
    color: var(--text-secondary, #666);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.timelapse-play-btn:hover {
    background: var(--bg-elevated, #f0f0f0);
    color: var(--text-primary, #333);
}
.timelapse-active .timelapse-play-btn {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}
.timelapse-active .timelapse-play-btn:hover {
    background: #218838;
    border-color: #218838;
}
.timelapse-speed-group {
    display: flex;
    flex-shrink: 0;
}
.timelapse-speed-btn {
    font-size: 10px;
    padding: 1px 5px;
    height: 22px;
    border: 1px solid var(--border-color, #ccc);
    background: var(--bg-surface, #fff);
    color: var(--text-secondary, #666);
    cursor: pointer;
    line-height: 1.4;
}
.timelapse-speed-btn:first-child {
    border-radius: 3px 0 0 3px;
}
.timelapse-speed-btn:last-child {
    border-radius: 0 3px 3px 0;
}
.timelapse-speed-btn + .timelapse-speed-btn {
    border-left: none;
}
.timelapse-speed-btn:hover {
    background: var(--bg-elevated, #f0f0f0);
}
.timelapse-speed-btn.active {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}
.timelapse-date {
    font-size: 10px;
    color: var(--text-muted, #888);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.timelapse-stop-btn {
    margin-left: auto;
    font-size: 10px;
    padding: 1px 8px;
    height: 22px;
    border: 1px solid #EE4D5A;
    border-radius: 10px;
    background: transparent;
    color: #EE4D5A;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.timelapse-stop-btn:hover {
    background: #EE4D5A;
    color: #fff;
}
.timelapse-scrubber {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color, #e0e0e0);
    border-radius: 3px;
    outline: none;
    margin: 4px 0 2px;
    cursor: pointer;
}
.timelapse-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #28a745;
    cursor: pointer;
    border: none;
}
.timelapse-scrubber::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #28a745;
    cursor: pointer;
    border: none;
}
.timelapse-counter {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary, #333);
    font-variant-numeric: tabular-nums;
    transition: color 0.15s ease;
}
.timelapse-active .timelapse-counter {
    color: #28a745;
}
.timelapse-no-events {
    font-size: 11px;
    color: var(--text-muted, #888);
    font-style: italic;
}
.timelapse-active {
    border-left: 2px solid #28a745;
    padding-left: 4px;
}
.spin-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Dark mode */
[data-theme="dark"] .timelapse-header {
    color: var(--text-secondary, #aaa);
}
[data-theme="dark"] .timelapse-play-btn {
    background: var(--bg-elevated, #262732);
    color: var(--text-primary, #dcdfe6);
    border-color: var(--border-color, #3a3b4a);
}
[data-theme="dark"] .timelapse-play-btn:hover {
    background: var(--bg-surface, #1e1f28);
}
[data-theme="dark"] .timelapse-active .timelapse-play-btn {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}
[data-theme="dark"] .timelapse-speed-btn {
    background: var(--bg-elevated, #262732);
    color: var(--text-secondary, #aaa);
    border-color: var(--border-color, #3a3b4a);
}
[data-theme="dark"] .timelapse-speed-btn:hover {
    background: var(--bg-surface, #1e1f28);
}
[data-theme="dark"] .timelapse-speed-btn.active {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}
[data-theme="dark"] .timelapse-scrubber {
    background: var(--border-color, #3a3b4a);
}
[data-theme="dark"] .timelapse-scrubber::-webkit-slider-thumb {
    background: #34d058;
}
[data-theme="dark"] .timelapse-scrubber::-moz-range-thumb {
    background: #34d058;
}
[data-theme="dark"] .timelapse-stop-btn {
    color: #ff6b7a;
    border-color: #ff6b7a;
}
[data-theme="dark"] .timelapse-stop-btn:hover {
    background: #ff6b7a;
    color: #fff;
}
[data-theme="dark"] .timelapse-active .timelapse-counter {
    color: #34d058;
}

/* ============================================
   Polygon Editing Toolbar
   ============================================ */
.polygon-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(30, 30, 38, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 8px 12px;
    max-width: 95vw;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.pt-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pt-sep {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* Menu wrapper — flows normally on desktop (display:contents) */
.pt-menu { display: contents; }
.pt-menu-label { display: none; }
.pt-menu-section { display: contents; }
.pt-menu-sep { width: 1px; height: 24px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
.pt-btn.pt-more-toggle { display: none; }

.pt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.pt-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.pt-btn:active {
    transform: scale(0.96);
}

.pt-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pt-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
}

.pt-btn:disabled:active {
    transform: none;
}

.pt-btn i {
    font-size: 14px;
    line-height: 1;
}

/* Source buttons — subtle blue tint */
.pt-src {
    color: rgba(130, 200, 255, 0.9);
    border-color: rgba(130, 200, 255, 0.2);
}

.pt-src:hover {
    background: rgba(130, 200, 255, 0.15);
    border-color: rgba(130, 200, 255, 0.35);
    color: rgb(160, 215, 255);
}

/* Tool buttons — neutral white */
.pt-tool {
    color: rgba(255, 255, 255, 0.85);
}

/* Warning button (Del Vertex) — amber */
.pt-warn {
    color: rgba(255, 200, 100, 0.9);
    border-color: rgba(255, 200, 100, 0.2);
}

.pt-warn:hover {
    background: rgba(255, 200, 100, 0.15);
    border-color: rgba(255, 200, 100, 0.35);
    color: rgb(255, 215, 130);
}

/* Blocaje button — purple accent */
.pt-blocaje {
    color: rgba(188, 138, 252, 0.9);
    border-color: rgba(188, 138, 252, 0.2);
}

.pt-blocaje:hover {
    background: rgba(188, 138, 252, 0.15);
    border-color: rgba(188, 138, 252, 0.35);
    color: rgb(200, 160, 255);
}

/* Cancel — subtle red */
.pt-cancel {
    color: rgba(255, 130, 130, 0.9);
    border-color: rgba(255, 130, 130, 0.2);
}

.pt-cancel:hover {
    background: rgba(255, 130, 130, 0.15);
    border-color: rgba(255, 130, 130, 0.35);
    color: rgb(255, 150, 150);
}

/* Confirm — solid green, most prominent */
.pt-confirm {
    background: rgba(40, 167, 69, 0.85);
    border-color: rgba(40, 167, 69, 0.6);
    color: #fff;
    font-weight: 600;
}

.pt-confirm:hover {
    background: rgba(40, 167, 69, 1);
    border-color: rgba(40, 167, 69, 0.8);
    color: #fff;
}

/* Status text */
.pt-status {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    line-height: 1.3;
}

.pt-status:empty {
    display: none;
}

/* Satellite: mobile adjustments */
@media (max-width: 768px) {
    .sat-pass-list,
    #satPassCards {
        max-height: calc(100vh - 300px) !important;
    }
    .sat-controls .btn {
        min-height: 32px;
    }
    .sat-controls .btn-group .btn {
        min-height: 28px;
    }
}

/* Mobile: slim bar + popover menu */
@media (max-width: 768px) {
    .polygon-toolbar {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: 10px;
        right: 10px;
        transform: none;
        padding: 4px 6px;
        gap: 4px;
        border-radius: 10px;
        flex-wrap: nowrap;
        max-width: none;
        justify-content: stretch;
    }

    /* Hide desktop separators */
    .polygon-toolbar > .pt-sep { display: none; }

    /* Menu container — popover above bar */
    .pt-menu {
        display: none;
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        right: 0;
        background: rgba(30, 30, 38, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
        flex-direction: column;
        gap: 8px;
    }
    .polygon-toolbar.pt-menu-open .pt-menu {
        display: flex;
    }

    /* Section headers */
    .pt-menu-label {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: rgba(255,255,255,0.4);
        margin-bottom: 2px;
    }
    .pt-menu-section { display: flex; flex-direction: column; gap: 4px; }
    .pt-menu-section .pt-group { display: flex; flex-wrap: wrap; gap: 6px; }
    .pt-menu-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.1); }

    /* Popover buttons: 44px touch targets with labels */
    .pt-menu .pt-btn { min-height: 44px; padding: 10px 14px; border-radius: 8px; font-size: 13px; gap: 6px; }
    .pt-menu .pt-btn i { font-size: 16px; }
    .pt-menu .pt-label { display: inline; }

    /* Actions group — horizontal in the slim bar */
    .pt-actions { display: flex; align-items: center; gap: 6px; flex: 1; }
    .pt-actions .pt-btn { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 13px; gap: 5px; }
    .pt-actions .pt-btn i { font-size: 16px; }
    .pt-actions .pt-label { display: inline; }
    .pt-actions .pt-confirm { margin-left: auto; }

    /* More toggle — visible on mobile */
    .pt-btn.pt-more-toggle { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; border-radius: 8px; }
    .polygon-toolbar.pt-menu-open .pt-more-toggle { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); }

    /* Status — inline, truncated, fills middle space */
    .polygon-toolbar .pt-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 10px; margin-top: 0; width: auto; }
}

/* Review/My Proposals modals: mobile stacking */
@media (max-width: 768px) {
    .review-modal-body {
        flex-direction: column;
    }

    .review-list-pane {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }
}

/* Search result hover (delegated — no JS listeners needed) */
.search-result-item:hover {
    background: #f0f7ff;
}

/* ============================================
   Autocomplete Dropdown (replaces native datalist)
   ============================================ */
.ac-dropdown {
    position: fixed;
    z-index: 10010;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 180px;
    overflow-y: auto;
    font-size: 13px;
}
.ac-dropdown .ac-item {
    padding: 5px 10px;
    cursor: pointer;
}
.ac-dropdown .ac-item:hover,
.ac-dropdown .ac-item.ac-active {
    background: var(--ac-hover);
}
/* Inline filter-input variant: per-input dropdown rendered as a sibling div.
   Pushes subsequent filter rows down naturally; scrolls with the panel; never
   floats over the panel boundary. Mirrors the in-flow "Search buildings" results list. */
.ac-inline-dropdown {
    margin-top: 2px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    max-height: 220px;
    overflow-y: auto;
    font-size: 13px;
}
.ac-inline-dropdown .ac-item {
    min-height: 44px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ac-inline-dropdown .ac-item:last-child { border-bottom: none; }
.ac-inline-dropdown .ac-item:hover,
.ac-inline-dropdown .ac-item.ac-active {
    background: var(--ac-hover);
}
.ac-inline-dropdown .ac-item.ac-empty,
.ac-inline-dropdown .ac-item.ac-loading {
    color: #999;
    cursor: default;
    font-style: italic;
}
[data-theme="dark"] .ac-inline-dropdown {
    background: var(--surface, #1e1f28);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
[data-theme="dark"] .ac-inline-dropdown .ac-item { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .ac-inline-dropdown .ac-item.ac-empty,
[data-theme="dark"] .ac-inline-dropdown .ac-item.ac-loading { color: #777; }

/* ============================================
   Theme Toggle
   ============================================ */
.theme-toggle {
    width: 29px;
    height: 29px;
    padding: 0;
    position: relative;
    border: none;
    border-radius: 4px;
    background: var(--control-bg);
    box-shadow: 0 0 0 2px var(--shadow-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
    color: var(--text-primary);
}
.theme-toggle:hover {
    background: var(--hover-bg);
}

/* ============================================
   Smooth theme transitions
   ============================================ */
html[data-theme] body,
html[data-theme] .sidebar,
html[data-theme] .card,
html[data-theme] .modal-content,
html[data-theme] .btn,
html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] .list-group-item,
html[data-theme] .polygon-toolbar,
html[data-theme] .auth-toolbar,
html[data-theme] #chartSidebar,
html[data-theme] .nav-link,
html[data-theme] .popup-content {
    transition: background-color 0.2s ease, color 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html.no-transition * { transition: none !important; }

[data-theme="light"] {
    color-scheme: light;
}

/* ============================================
   Dark Theme
   ============================================ */
[data-theme="dark"] {
    --bg-body: #16171e;
    --bg-surface: #1e1f28;
    --bg-elevated: #262732;
    --bg-input: #1e1f28;
    --border-color: #363743;
    --border-light: #2e2f3a;
    --border-medium: #363743;
    --text-primary: #dcdfe6;
    --text-secondary: #9ea2b3;
    --text-muted: #7a7e90;
    --text-on-surface: #8b8fa0;
    --shadow-color: rgba(0,0,0,0.4);
    --shadow-medium: rgba(0,0,0,0.5);
    --popup-bg: #262732;
    --control-bg: #1e1f28;
    --hover-bg: #262732;
    --card-bg: #1e1f28;
    --diff-old-bg: rgba(220,38,38,0.15);
    --diff-new-bg: rgba(34,197,94,0.15);
    --search-hover: rgba(56,135,190,0.15);
    --ac-bg: #1e1f28;
    --ac-hover: #262732;
    color-scheme: dark;
}

/* --- Auth UI --- */
[data-theme="dark"] .auth-toolbar .user-menu {
    background: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--shadow-color);
}
[data-theme="dark"] .auth-toolbar .user-menu .dropdown-toggle {
    color: var(--text-secondary);
}
[data-theme="dark"] .auth-toolbar .user-menu .dropdown-menu {
    background: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--shadow-color);
}
[data-theme="dark"] .auth-toolbar .user-menu .dropdown-item {
    color: var(--text-primary);
}
[data-theme="dark"] .auth-toolbar .user-menu .dropdown-item:hover {
    background: var(--bg-elevated);
}
[data-theme="dark"] .auth-toolbar .user-menu .dropdown-header {
    color: var(--text-muted);
}
[data-theme="dark"] .auth-toolbar .user-menu .dropdown-divider {
    border-color: var(--border-color);
}
[data-theme="dark"] .auth-toolbar .user-name {
    color: var(--text-primary);
}
[data-theme="dark"] .lang-toggle {
    background: var(--control-bg);
    box-shadow: 0 0 0 2px var(--shadow-color);
    color: var(--text-primary);
}
[data-theme="dark"] .lang-toggle:hover {
    background: var(--hover-bg);
}

/* --- Login button dark --- */
[data-theme="dark"] #loginBtn {
    background: #3b82f6 !important;
}

/* --- Geocoder --- */
[data-theme="dark"] .mapboxgl-ctrl-geocoder {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 2px var(--shadow-color) !important;
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
    color: var(--text-primary);
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input::placeholder {
    color: var(--text-muted);
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder .suggestions {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder .suggestions .active > a,
[data-theme="dark"] .mapboxgl-ctrl-geocoder .suggestions li > a:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder .suggestions li > a {
    color: var(--text-primary);
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder--icon-search,
[data-theme="dark"] .mapboxgl-ctrl-geocoder--icon-close {
    fill: var(--text-secondary);
}
[data-theme="dark"] .mapboxgl-ctrl-geocoder--button {
    background: transparent;
}

/* --- Mapbox Controls --- */
[data-theme="dark"] .mapboxgl-ctrl-group {
    background: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--shadow-color);
}
[data-theme="dark"] .mapboxgl-ctrl-group button {
    background: transparent;
}
[data-theme="dark"] .mapboxgl-ctrl-group button + button {
    border-top-color: var(--border-color);
}
[data-theme="dark"] .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
    filter: invert(0.8);
}
[data-theme="dark"] .mapboxgl-ctrl-attrib {
    background: rgba(30,31,40,0.7);
    color: var(--text-muted);
}
[data-theme="dark"] .mapboxgl-ctrl-attrib a {
    color: var(--text-secondary);
}

/* --- Popup --- */
[data-theme="dark"] .mapboxgl-popup-content {
    background: var(--bg-surface);
    color: var(--text-primary);
}
[data-theme="dark"] .mapboxgl-popup-tip {
    border-top-color: var(--bg-surface);
}
[data-theme="dark"] .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: var(--bg-surface);
}
[data-theme="dark"] .mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: var(--bg-surface);
}
[data-theme="dark"] .mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--bg-surface);
}
[data-theme="dark"] .mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--bg-surface);
}
[data-theme="dark"] [style*="background:#e8f4f8"],
[data-theme="dark"] [style*="background: #e8f4f8"] {
    background: var(--popup-bg) !important;
    color: var(--text-primary) !important;
}
/* ============================================
   Building popup — spec-sheet rebuild
   Risk-class hero + definition grid + prose notes.
   All colors via CSS vars so dark mode needs no patch; risk colors are
   theme-independent (they mirror the map) and set inline via --bld-risk.
   ============================================ */
/* Hero: colored placard (risk code) + accent spine + address + locality */
.bld-hero {
    position: relative;
    padding: 0 0 11px 13px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--border-color, #e3e6ea);
}
.bld-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--bld-risk, #6c757d);
}
.bld-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 7px;
}
.bld-placard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 11px;
    border-radius: 7px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.bld-addr {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}
.bld-loc {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

/* Definition grid: small uppercase labels, tabular values, no per-row borders */
.bld-spec {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 14px;
    align-items: baseline;
    font-size: 11px;
}
.bld-spec .bld-label {
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: var(--text-muted);
    white-space: nowrap;
}
.bld-spec .bld-value {
    margin-bottom: 7px;
    line-height: 1.4;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}
/* Section eyebrow: label + hairline rule extending right (document taxonomy) */
.bld-spec .bld-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-secondary);
}
.bld-spec .bld-group:first-child {
    margin-top: 1px;
}
.bld-spec .bld-group::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-color, #e3e6ea);
}
/* Technical group (logged-in only): dashed rule, no eyebrow */
.bld-spec .bld-techrule {
    grid-column: 1 / -1;
    margin: 12px 0 7px;
    border-top: 1px dashed var(--border-color, #ccd0d6);
}
/* Folded coordinate line */
.bld-spec .bld-coords {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    margin-bottom: 7px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.bld-spec .bld-coords .cl {
    margin-right: 5px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Prose blocks: full-width free-text with 3-line clamp + Show more/less toggle */
.bld-spec .bld-prose {
    grid-column: 1 / -1;
    margin: 2px 0 7px;
}
.bld-prose-label {
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.bld-prose-text {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.bld-prose.expanded .bld-prose-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.bld-prose-toggle {
    margin-top: 4px;
    padding: 0;
    border: none;
    background: none;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bs-primary, #0d6efd);
    cursor: pointer;
}
.bld-prose-toggle[hidden] {
    display: none;
}
.bld-prose-toggle:hover {
    text-decoration: underline;
}
.bld-prose-toggle:focus-visible {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Reviewer metadata line (created/updated by) — token-driven, dark-mode safe */
.bld-meta {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
    font-size: 10px;
    color: var(--text-muted);
}

/* Change-history box: neutral elevated surface (replaces the hardcoded #fff3cd
   placard). Per-change-type colored borders live on the entries themselves. */
.bld-history {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-elevated);
}
.bld-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.bld-history-title {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.bld-history-title i {
    color: var(--text-muted);
}
.bld-history-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bld-history-caret {
    font-size: 11px;
    color: var(--text-muted);
}

.building-popup .popup-scroll {
    transition: opacity 0.2s ease;
}
[data-theme="dark"] .building-popup {
    background: var(--bg-surface) !important;
    color: var(--text-primary);
}
[data-theme="dark"] .popup-header {
    background: var(--bg-elevated) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .popup-header-label {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .popup-footer {
    background: var(--bg-surface) !important;
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .popup-fade {
    background: linear-gradient(transparent, var(--bg-surface)) !important;
}
[data-theme="dark"] .popup-footer-inline {
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .popup-header button {
    color: var(--text-secondary);
}

/* ============================================
   Popup footer — tiered action hierarchy (Tooltip-polish #11)
   ONE dominant primary action (solid) leads; the quieter siblings follow;
   the contextual tools (Street View / AMCCRS / Share) become icon-first
   ghost buttons grouped to the right. All colors via tokens => dark-mode
   safe. On mobile / coarse pointers the tool group collapses into a single
   horizontal scroll strip so the footer stays one tidy band.
   ============================================ */
.popup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.popup-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;   /* push the tool cluster to the right edge */
}
.popup-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #666);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.popup-tool:hover,
.popup-tool:focus-visible {
    background: var(--hover-bg, #f0f0f0);
    color: var(--text-primary, #333);
    border-color: var(--border-medium, #e0e0e0);
}
.popup-tool i {
    font-size: 15px;
}
@media (max-width: 420px), (pointer: coarse) {
    .popup-tools {
        flex: 1 1 100%;        /* own line, full width */
        min-width: 0;
        margin-left: 0;
        flex-wrap: nowrap;     /* one strip, no ragged wrap */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .popup-tools::-webkit-scrollbar {
        display: none;         /* WebKit */
    }
    .popup-tool {
        flex: 0 0 auto;
        min-width: 38px;
        height: 38px;          /* >=36px touch target */
    }
    .popup-actions > .btn {
        min-height: 36px;      /* keep the lead actions tappable */
    }
}

/* History section in popup.
   The history box + reviewer metaLine are now token-driven (.bld-history / .bld-meta),
   so the #fff3cd attribute hack was removed. The rules below are still load-bearing:
   .popup-header uses inline background:#f8f9fa; the verification label uses color:#666;
   showBuildingHistory's "no changes" message uses color:#888 — all inside .building-popup. */
[data-theme="dark"] .building-popup [style*="background:#f8f9fa"] {
    background: var(--bg-elevated) !important;
}
[data-theme="dark"] .building-popup [style*="color:#555"],
[data-theme="dark"] .building-popup [style*="color:#666"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .building-popup [style*="color:#888"] {
    color: var(--text-muted) !important;
}

/* --- Sidebar --- */
[data-theme="dark"] #layersSidebar {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}
[data-theme="dark"] #layersSidebar .sidebar-section-title {
    color: var(--text-secondary);
}
[data-theme="dark"] #layersSidebar .sidebar-section-title .subtitle {
    color: var(--text-muted);
}
[data-theme="dark"] #layersSidebar .sidebar-divider {
    border-top-color: #555;
}
[data-theme="dark"] .layer-item .drag-handle {
    color: var(--text-muted);
}
[data-theme="dark"] .section-toggle .toggle-chevron {
    color: var(--text-muted);
}
[data-theme="dark"] .layer-item .badge-count {
    color: var(--text-muted);
}
[data-theme="dark"] #sidebarHeader {
    background: var(--bg-elevated) !important;
    border-bottom-color: var(--border-color) !important;
}

/* --- Sidebar Toggle Button --- */
[data-theme="dark"] #mobileLayersToggle {
    background: var(--bg-surface) !important;
    box-shadow: 0 0 0 2px var(--shadow-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] #mobileLayersToggle.active {
    background: var(--bg-elevated) !important;
}

/* --- Add Building Button --- */
[data-theme="dark"] #addBuildingBtn {
    background: var(--bg-surface) !important;
    box-shadow: 0 0 0 2px var(--shadow-color) !important;
    color: var(--text-primary) !important;
}

/* --- Review --- */
[data-theme="dark"] .review-list-pane {
    border-right-color: var(--border-color);
}
[data-theme="dark"] .review-list-header {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .review-item {
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .review-item:hover {
    background: var(--bg-elevated);
}
[data-theme="dark"] .review-item.active {
    background: var(--popup-bg);
}
[data-theme="dark"] .review-item-meta {
    color: var(--text-muted);
}
[data-theme="dark"] .review-type-icon.type-point { background: rgba(21,101,192,0.2); color: #5b9cf6; }
[data-theme="dark"] .review-type-icon.type-polygon { background: rgba(46,125,50,0.2); color: #66bb6a; }
[data-theme="dark"] .review-type-icon.type-attributes { background: rgba(230,81,0,0.2); color: #ff9800; }
[data-theme="dark"] .review-type-icon.type-new { background: rgba(123,31,162,0.2); color: #ce93d8; }
[data-theme="dark"] .review-diff-section {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}
[data-theme="dark"] .review-diff-section h6 {
    color: var(--text-secondary);
}
[data-theme="dark"] .polygon-diff-stat .label {
    color: var(--text-muted);
}
[data-theme="dark"] .review-actions {
    background: var(--bg-elevated);
    border-color: var(--border-color);
}

/* --- My Proposals --- */
[data-theme="dark"] .my-proposal-card {
    border-color: var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
}
[data-theme="dark"] .my-proposal-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .my-proposal-card.expanded {
    border-color: #3b82f6;
}
[data-theme="dark"] .my-proposal-detail {
    border-top-color: var(--border-color);
}

/* --- Filter Buttons --- */
[data-theme="dark"] .filter-btn {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* --- Modals --- */
[data-theme="dark"] .modal-content {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-header {
    background: var(--bg-elevated) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .modal-footer {
    background: var(--bg-elevated) !important;
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .modal-title {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Edit/Propose/Review/POI modals with inline styles */
[data-theme="dark"] #editModal,
[data-theme="dark"] #propModal,
[data-theme="dark"] #reviewModal,
[data-theme="dark"] #myProposalsModal,
[data-theme="dark"] #poiEditModal {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] #editModal [style*="background"],
[data-theme="dark"] #propModal [style*="background"],
[data-theme="dark"] #reviewModal [style*="background"],
[data-theme="dark"] #myProposalsModal [style*="background"],
[data-theme="dark"] #poiEditModal [style*="background"] {
    background: var(--bg-elevated) !important;
}
/* Edit modal history — amber wrapper + visible entry cards */
[data-theme="dark"] #editModal #historySection {
    background: rgba(255, 193, 7, 0.15) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
}
[data-theme="dark"] #editModal #historyList > div {
    background: #2d2e3a !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] #editModal #historyList [style*="color:#555"],
[data-theme="dark"] #editModal #historyList [style*="color:#666"] {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] #editModal [style*="border-bottom"],
[data-theme="dark"] #propModal [style*="border-bottom"],
[data-theme="dark"] #reviewModal [style*="border-bottom"],
[data-theme="dark"] #myProposalsModal [style*="border-bottom"],
[data-theme="dark"] #poiEditModal [style*="border-bottom"] {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] #editModal [style*="border-top"],
[data-theme="dark"] #propModal [style*="border-top"],
[data-theme="dark"] #reviewModal [style*="border-top"],
[data-theme="dark"] #myProposalsModal [style*="border-top"],
[data-theme="dark"] #poiEditModal [style*="border-top"] {
    border-top-color: var(--border-color) !important;
}

/* --- Forms --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 0.2rem rgba(59,130,246,0.25) !important;
}
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .form-text {
    color: var(--text-muted) !important;
}
[data-theme="dark"] .form-label {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}
[data-theme="dark"] .input-group-text {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* --- Status Badges — keep as-is, they work in dark --- */

/* --- Loading --- */
[data-theme="dark"] .loading-spinner {
    border-color: var(--border-color);
    border-top-color: #3b82f6;
}

/* --- Layer Color Picker --- */
[data-theme="dark"] .lcp {
    background: var(--bg-surface);
    box-shadow: 0 0 0 2px var(--shadow-color);
}
[data-theme="dark"] .lcp-arrow {
    background: var(--bg-surface);
    box-shadow: -2px -2px 0 0 var(--shadow-color);
}
[data-theme="dark"] .lcp-header {
    color: var(--text-secondary);
}
[data-theme="dark"] .lcp-custom-btn {
    border-color: var(--border-color);
    background: var(--bg-surface);
    color: var(--text-secondary);
}
[data-theme="dark"] .lcp-hex {
    color: var(--text-secondary);
}
[data-theme="dark"] .lcp-hex:focus {
    border-color: #3b82f6;
    background: var(--bg-elevated);
    color: var(--text-primary);
}
[data-theme="dark"] .lcp-opacity-label {
    color: var(--text-secondary);
}
[data-theme="dark"] .lcp-opacity-val {
    color: var(--text-secondary);
}
[data-theme="dark"] .lcp-opacity-val:focus {
    border-color: #3b82f6;
    background: var(--bg-elevated);
    color: var(--text-primary);
}
[data-theme="dark"] .lcp-custom-row {
    border-bottom-color: var(--border-color);
}

/* --- Search Results --- */
[data-theme="dark"] #buildingSearchInput {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #buildingSearchResults {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] .search-result-item {
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .search-result-item > div > div:first-child {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .search-result-item > div > div:last-child {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .search-result-item span[style*="background:#e9ecef"] {
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
}
[data-theme="dark"] .search-result-item:hover {
    background: var(--search-hover);
}

/* --- Autocomplete --- */
[data-theme="dark"] .ac-dropdown {
    background: var(--ac-bg);
    border-color: var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-medium);
    color: var(--text-primary);
}
[data-theme="dark"] .ac-dropdown .ac-item:hover,
[data-theme="dark"] .ac-dropdown .ac-item.ac-active {
    background: var(--ac-hover);
}

/* --- Chart Sidebar --- */
[data-theme="dark"] #chartSidebar {
    background: var(--bg-body) !important;
}
[data-theme="dark"] .auth-toolbar-spacer {
    background: var(--bg-body);
}
[data-theme="dark"] #chartSidebar .card {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] #chartSidebar .card-body {
    color: var(--text-primary);
}
[data-theme="dark"] #chartSidebar canvas {
    background: var(--bg-surface) !important;
}
[data-theme="dark"] #lodgingTotalValue {
    color: #5ba8d9 !important;
}
[data-theme="dark"] #lodgingExposedValue {
    color: #ff8a80 !important;
}
[data-theme="dark"] #blocajeStreetCount,
[data-theme="dark"] #blocajeKmRoad,
[data-theme="dark"] #collapseAreaValue {
    color: #5ba8d9 !important;
}
/* dedupCard inline-colored numbers + RAAPPS stat tiles — same dark blue/red pair */
[data-theme="dark"] #dedupListings,
[data-theme="dark"] #dedupProperties {
    color: #5ba8d9 !important;
}
[data-theme="dark"] #dedupCross {
    color: #ff8a80 !important;
}
[data-theme="dark"] .raapps-stat-grid .rsg-val { color: #5ba8d9; }
[data-theme="dark"] .raapps-stat-grid .rsg-warn .rsg-val { color: #ff8a80; }
[data-theme="dark"] #chartSidebar [data-chart]:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .chart-dragging {
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

/* --- Bootstrap overrides for dark --- */
[data-theme="dark"] .card {
    background: var(--card-bg);
    border-color: var(--border-color);
}
[data-theme="dark"] .card-header {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}
[data-theme="dark"] .table {
    color: var(--text-primary);
}
[data-theme="dark"] .table td, [data-theme="dark"] .table th {
    border-color: var(--border-color);
}
[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

/* Filter panel hr — override all Bootstrap hr defaults to match sidebar dividers */
#advancedFiltersPanel .filters-content hr {
    border: none !important;
    border-top: 1px solid #aaa !important;
    opacity: 1 !important;
    margin: 8px 0 !important;
    color: inherit !important;
}
[data-theme="dark"] #advancedFiltersPanel .filters-content hr {
    border-top-color: #555 !important;
}

/* --- Advanced Filters Panel --- */
[data-theme="dark"] #advancedFiltersPanel {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .filters-header {
    background: var(--bg-elevated) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-theme="dark"] .filters-footer {
    background: var(--bg-surface) !important;
    border-top-color: var(--border-color) !important;
}
[data-theme="dark"] .filters-fade {
    background: linear-gradient(transparent, var(--bg-surface)) !important;
}
[data-theme="dark"] .filters-header button {
    color: var(--text-secondary);
}

/* --- Scrollbars --- */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-body);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* --- Misc Bootstrap in dark --- */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
[data-theme="dark"] .dropdown-divider {
    border-top-color: var(--border-color);
}
[data-theme="dark"] .dropdown-header {
    color: var(--text-muted);
}

/* --- Mobile review pane dark --- */
@media (max-width: 768px) {
    [data-theme="dark"] .review-list-pane {
        border-bottom-color: var(--border-color);
    }
}

/* ============================================
   Reduced Motion — WCAG 2.1 SC 2.3.3
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}