/* ==========================================
   Viewer Page - Scoped Styles
   Uses CSS variables from customTheme.css for theming
   ========================================== */


/* --- Report Button Progress Bar Styling --- */
.btn-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    /* A semi-transparent white overlay to create the "fill" effect */
    background-color: rgba(255, 255, 255, 0.25);
    z-index: -1;
    transition: width 0.4s ease-out;
}

.btn-text {
    position: relative;
    z-index: 2;
    display: inline-block;
}

/* Loading state styling */
button:disabled.btn-loading {
    cursor: not-allowed;
    opacity: 0.85;
}

/* Optional: Gentle pulse animation on the text while working */
.btn-loading .btn-text {
    animation: text-pulse 1.5s infinite ease-in-out;
}
       
@keyframes text-pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}


/* --- Legend Styling for Categorical Data --- */

/* Overwrite the gradient background when we are showing categories */
.legend-gradient.classified-legend {
    background: none !important;
    height: auto !important;
    max-height: 250px; /* Limit height so it doesn't take up the whole screen */
    overflow-y: auto; /* Add scrollbar if list is too long */
    padding-right: 5px; /* Space for scrollbar */
    display: block; /* Override flexbox used for thermometer */
}

/* Container for the list */
.legend-categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* Individual Row */
.legend-category-item {
    display: flex;
    align-items: flex-start; /* top-align swatch when label spans two lines */
    font-size: 0.85rem;
    color: #333;
    padding: 2px 0;
}

/* The Color Swatch */
.legend-color-box {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,0.2); /* Subtle border for light colors */
    flex-shrink: 0;
    margin-top: 1px; /* optically align with first line of text */
}

.legend-category-label {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Range sub-label shown under the class name for class-breaks layers */
.legend-range-label {
    font-size: 0.75rem;
    color: #888;
    margin-top: 1px;
}

/* Custom Scrollbar for the legend */
.legend-gradient.classified-legend::-webkit-scrollbar {
    width: 6px;
}

.legend-gradient.classified-legend::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.legend-gradient.classified-legend::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

    .legend-gradient.classified-legend::-webkit-scrollbar-thumb:hover {
        background: #bbb;
    }


/* Full-screen layout only for viewer page */
body.viewer-page,
html:has(body.viewer-page) {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* Main viewer container */
.viewer-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: #f5f5f5;
}

/* Content area below navbar - fixed side-by-side layout */
.viewer-content {
    flex: 1;
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: hidden;
}

/* Control Panel - always on the left side */
.control-panel {
    width: 340px;
    min-width: 340px;
    max-width: 500px;
    height: 100%;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-right: 2px solid var(--theme-border-dark);
    transition: all 0.3s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

    .control-panel.collapsed {
        width: 0;
        min-width: 0;
        overflow: hidden;
    }

    /* Elevate control panel above the welcome overlay backdrop
       so section headers are visible while the welcome message is showing */
    .control-panel.above-overlay {
        z-index: 2001;
    }

/* Control Panel Header */
.control-panel-header {
    background: var(--theme-gradient-header);
    color: white;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .control-panel-header h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .control-panel-header .controls {
        display: flex;
        gap: 8px;
    }

/* Control Panel Body */
.control-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

/* Map Container */
.map-container {
    flex: 1;
    position: relative;
    background: #e8f4f8;
    width: 100%;
    height: 100%;
}

#viewDiv {
    width: 100%;
    height: 100%;
}

/* Toggle buttons */
.toggle-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .toggle-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

    .toggle-btn:active {
        transform: translateY(0);
    }

/* Expand button - shown when panel is collapsed */
.expand-btn {
    position: absolute;
    top: 16px;
    left: 70px;
    z-index: 99;
    background: white;
    border: 2px solid var(--theme-secondary);
    color: var(--theme-secondary);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    font-size: 12px;
    transition: all 0.2s ease;
    display: none;
    align-items: center;
    gap: 6px;
}

    .expand-btn.visible {
        display: flex;
    }

    .expand-btn:hover {
        background: var(--theme-secondary);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--theme-shadow-secondary);
    }

/* ==========================================
   Collapsible Control Sections
   ========================================== */
.control-section {
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid var(--theme-border);
    overflow: hidden;
}

    .control-section:last-child {
        margin-bottom: 0;
    }

/* Section Header - Clickable toggle area */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s ease;
    user-select: none;
}

    .section-header:hover {
        background: #f0f0f0;
    }

    .section-header h3 {
        margin: 0;
        font-size: 13px;
        color: var(--theme-dark);
        font-weight: 600;
    }

.section-toggle-icon {
    font-size: 10px;
    color: var(--theme-text-light);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.section-opacity-control {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    margin: 0 10px;
}

.opacity-eye-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--theme-text-light);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: 3px;
    transition: color 0.15s;
}

    .opacity-eye-btn:hover {
        color: var(--theme-dark);
    }

    .opacity-eye-btn .eye-open,
    .opacity-eye-btn .eye-closed {
        display: none;
    }

    .opacity-eye-btn[data-visible="true"] .eye-open {
        display: block;
    }

    .opacity-eye-btn[data-visible="false"] .eye-closed {
        display: block;
    }

    /* Dim the slider when the group is hidden */
    .opacity-eye-btn[data-visible="false"] ~ .opacity-slider {
        opacity: 0.35;
        pointer-events: none;
    }

.opacity-slider {
    flex: 1;
    height: 3px;
    cursor: pointer;
    accent-color: var(--theme-secondary);
}

/* Section Content - The collapsible part */
.section-content {
    padding: 0 14px 14px 14px;
    max-height: 1000px;
    opacity: 1;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
    overflow: hidden;
}

/* Collapsed state */
.control-section.collapsed .section-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.control-section.collapsed .section-header {
    border-bottom: none;
}

/* Visual indicator for collapsed sections */
.control-section.collapsed {
    background: #fff;
}

    .control-section.collapsed:hover {
        background: #fafafa;
    }

/* ==========================================
   Form Controls
   ========================================== */
.form-group {
    margin-bottom: 12px;
}

    .form-group:last-child {
        margin-bottom: 0;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
        color: #333;
        font-size: 12px;
    }

.form-control {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    font-size: 12px;
    transition: all 0.2s ease;
    background: white;
}

    .form-control:focus {
        border-color: var(--theme-secondary);
        outline: none;
        box-shadow: 0 0 0 3px var(--theme-focus-ring);
    }

/* ==========================================
   Buttons
   ========================================== */
.btn-primary {
    background: var(--theme-gradient-button);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--theme-shadow-secondary);
    }

    .btn-primary:active {
        transform: translateY(0);
    }

.btn-secondary {
    background: white;
    border: 2px solid var(--theme-secondary);
    color: var(--theme-secondary);
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

    .btn-secondary:hover {
        background: var(--theme-secondary);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--theme-shadow-secondary);
    }

    .btn-secondary:active {
        transform: translateY(0);
    }

/* Drawing tools specific styles */
.btn-primary.active-drawing {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    animation: pulse 2s infinite;
}

    .btn-primary.active-drawing:hover {
        background: linear-gradient(135deg, #c0392b 0%, #a93226 100%);
    }

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(231, 76, 60, 0.6);
    }
}

/* Draw Shape dropdown */
.draw-shape-dropdown {
    position: relative;
}

.draw-shape-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.draw-shape-chevron {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
    margin-left: 6px;
}

.draw-shape-dropdown.open .draw-shape-chevron {
    transform: rotate(180deg);
}

.draw-shape-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 500;
    overflow: hidden;
}

.draw-shape-option {
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    transition: background 0.1s ease;
}

.draw-shape-option:hover {
    background: #f0f4f8;
}

.draw-shape-option:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

/* CSS shape icons — no emojis */
.shape-icon {
    flex-shrink: 0;
}

.shape-icon--polygon {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.shape-icon--line {
    display: inline-block;
    width: 15px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform: rotate(-30deg);
    margin: 0 1px;
}

.shape-icon--point {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: currentColor;
    border-radius: 50%;
    margin: 0 2px;
}

.buffer-slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.85rem;
}

.buffer-value-label {
    font-weight: 600;
    color: var(--theme-secondary);
    font-size: 0.85rem;
}

.drawing-status {
    background: white;
    border: 2px solid var(--theme-border);
    padding: 8px 10px;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    color: var(--theme-text-muted);
    font-size: 11px;
}

.drawing-help {
    background: #f0f8ff;
    border: 1px solid #d4e9ff;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

    .drawing-help small {
        color: #555;
        font-size: 11px;
        line-height: 1.5;
    }

    .drawing-help strong {
        color: var(--theme-dark);
        display: block;
        margin-bottom: 4px;
        font-size: 11px;
    }

/* ==========================================
   Legend Container
   ========================================== */
.legend-container {
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 70px;
}

.legend-header {
    margin-bottom: 5px;
    text-align: center;
}

.legend-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.legend-header h6 {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    color: var(--theme-dark);
}

.legend-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 9px;
    color: var(--theme-text-muted);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    min-width: 16px;
    min-height: 16px;
}

    .legend-toggle-btn:hover {
        background: #f0f0f0;
        color: #333;
    }

.legend-header small {
    color: var(--theme-text-muted);
    font-size: 9px;
    display: block;
    margin-top: 2px;
}

.legend-gradient {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .legend-gradient.collapsed {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
    }

.thermometer {
    width: 18px;
    height: 100px;
    border-radius: 9px;
    border: 2px solid var(--theme-dark);
}

.max-value,
.min-value {
    font-size: 9px;
    font-weight: 600;
    color: var(--theme-dark);
}

/* ==========================================
   Layer Selection Styles
   ========================================== */
.layer-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

    .layer-group:last-child {
        margin-bottom: 0;
    }

/* --- Layer Sub-Groups (within Map Layers section) --- */
.layer-subgroup {
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    background: #fff;
}

.layer-subgroup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    background: #f0f4f8;
    user-select: none;
    transition: background 0.2s ease;
}

.layer-subgroup-header:hover {
    background: #e4eaf0;
}

.subgroup-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.subgroup-toggle-icon {
    font-size: 9px;
    color: var(--theme-text-light);
}

.layer-subgroup-content {
    padding: 8px 10px;
    max-height: 600px;
    transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
    opacity: 1;
    overflow: hidden;
}

.layer-subgroup.collapsed .layer-subgroup-content {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

.layer-item {
    background: white;
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    padding: 10px;
    transition: all 0.2s ease;
}

/* --- Boundary Layer Legend --- */
.boundary-legend {
    margin-top: 6px;
    border-top: 1px solid var(--theme-border);
    padding-top: 4px;
}

.boundary-legend-toggle {
    background: none;
    border: none;
    padding: 2px 0;
    font-size: 11px;
    color: var(--theme-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.boundary-legend-toggle:hover {
    text-decoration: underline;
}

.boundary-legend-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.boundary-legend.collapsed .boundary-legend-items {
    display: none;
}

.boundary-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--theme-dark);
}

.boundary-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.boundary-legend-swatch.boundary-legend-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.state-outline-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--theme-border, #e0e0e0);
    margin-top: 6px;
    padding: 6px 8px 2px;
    cursor: pointer;
    user-select: none;
}

.state-outline-toggle:hover {
    opacity: 0.8;
}

.state-outline-toggle.state-outline-off {
    opacity: 0.4;
}

.state-outline-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-dark);
}

.state-outline-swatch {
    display: inline-block;
    width: 18px;
    height: 0;
    border-top: 2px dashed rgba(90, 90, 90, 0.7);
    flex-shrink: 0;
}

    .layer-item:hover {
        border-color: var(--theme-secondary);
        box-shadow: 0 2px 8px var(--theme-shadow-secondary);
    }

    /* Active/checked state for layer items */
    .layer-item:has(input[type="radio"]:checked) {
        border-color: var(--theme-secondary);
        background: linear-gradient(135deg, rgba(var(--theme-secondary), 0.08) 0%, rgba(var(--theme-primary), 0.08) 100%);
        box-shadow: 0 2px 8px var(--theme-shadow-secondary);
    }

.layer-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    width: 100%;
}

    .layer-checkbox input[type="radio"] {
        margin-top: 2px;
        width: 16px;
        height: 16px;
        cursor: pointer;
        flex-shrink: 0;
        accent-color: var(--theme-secondary);
    }

.layer-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.layer-name-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

    .layer-name strong {
        color: var(--theme-dark);
        font-size: 12px;
        font-weight: 600;
    }

.layer-description {
    color: var(--theme-text-muted);
    font-size: 12px;
    line-height: 1.4;
    display: block;
}

.desc-more {
    cursor: help;
    color: var(--theme-accent, #4a7fb5);
    font-weight: 700;
    margin-left: 2px;
    user-select: none;
}

.layer-desc-tooltip {
    position: fixed;
    background: #fff;
    border: 1px solid var(--theme-border, #d0d9e4);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 340px;
    color: var(--theme-text-muted);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    pointer-events: none;
}

.layer-year-badge {
    font-size: 10px;
    color: var(--theme-text-light);
    margin-left: 6px;
    opacity: 0.8;
}

.layer-info-box {
    background: #f0f8ff;
    border: 1px solid #d4e9ff;
    border-radius: 5px;
    padding: 10px;
    margin-top: 8px;
}

    .layer-info-box strong {
        color: var(--theme-dark);
        display: block;
        margin-bottom: 6px;
        font-size: 11px;
    }

    .layer-info-box ul {
        margin: 0;
        padding-left: 16px;
    }

    .layer-info-box li {
        color: #555;
        font-size: 10px;
        line-height: 1.5;
        margin-bottom: 3px;
    }

        .layer-info-box li:last-child {
            margin-bottom: 0;
        }

/* ==========================================
   Loading Indicator for Boundary Layers
   ========================================== */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--theme-text-light);
    font-size: 12px;
}

.loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-secondary);
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}

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

/* No layers / error messages */
.no-layers-message,
.error-message {
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: var(--theme-text-light);
    background: #f8f8f8;
    border-radius: 6px;
    margin: 0;
}

.error-message {
    color: #c0392b;
    background: #fdf0f0;
    border: 1px solid #f5c6cb;
}

/* Utility classes */
.d-none {
    display: none !important;
}

/* ==========================================
   Welcome Popup Styles
   ========================================== */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(3px);
    animation: fadeIn 0.3s ease;
}

    .welcome-overlay.hidden {
        display: none;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.welcome-popup {
    background: white;
    border-radius: 16px;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.welcome-popup h3 {
    margin: 0 0 12px 0;
    font-size: 22px;
    color: var(--theme-dark);
    font-weight: 700;
}

.welcome-popup p {
    margin: 0 0 24px 0;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}

.welcome-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    text-align: left;
}

.welcome-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
}

    .welcome-feature:hover {
        background: #f0f4f8;
        transform: translateX(4px);
    }

.feature-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.welcome-feature span:last-child {
    color: var(--theme-dark);
    font-size: 13px;
    font-weight: 500;
}

.welcome-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
    margin-bottom: 16px;
}

.welcome-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--theme-text-light);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .welcome-dismiss:hover {
        color: #555;
    }

    .welcome-dismiss input[type="checkbox"] {
        width: 14px;
        height: 14px;
        accent-color: var(--theme-secondary);
        cursor: pointer;
    }

/* ==========================================
   Statistics Panel
   ========================================== */
.stats-panel {
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    width: 280px;
    max-height: calc(100vh - 120px);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .stats-panel.visible {
        display: flex;
    }

.stats-panel-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .stats-panel-header h4 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
    }

    .stats-panel-header .polygon-id {
        font-size: 10px;
        opacity: 0.8;
        margin-top: 2px;
    }

.stats-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1;
}

    .stats-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

.stats-panel-body {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
}

.stats-info {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border);
}

.stats-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

    .stats-info-item .label {
        font-size: 11px;
        color: var(--theme-text-muted);
        font-weight: 500;
    }

    .stats-info-item .value {
        font-size: 12px;
        color: var(--theme-dark);
        font-weight: 600;
    }

.stats-chart-section {
    margin-top: 8px;
}

    .stats-chart-section h5 {
        margin: 0 0 8px 0;
        font-size: 12px;
        color: var(--theme-dark);
        font-weight: 600;
    }

.chart-container {
    position: relative;
    height: 180px;
    width: 100%;
}

.class-dominant-callout {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
}

.class-dominant-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Stats Content Container */
.stats-content {
    margin-bottom: 12px;
}

.stats-placeholder,
.loading-message,
.error-message,
.no-analysis-message {
    text-align: center;
    padding: 16px;
    color: var(--theme-text-muted);
    font-size: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
}

.loading-message {
    color: var(--theme-primary);
}

.error-message {
    color: #dc3545;
    background: #fff5f5;
}

/* Stats Summary Box */
.stats-summary {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 12px;
}

.stats-summary h4 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--theme-primary);
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--theme-border);
}

/* Stats Grid Layout */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: white;
    border-radius: 4px;
    border: 1px solid var(--theme-border);
}

.stat-label {
    font-size: 9px;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 2px;
}

.stat-value {
    font-size: 13px;
    color: var(--theme-dark);
    font-weight: 600;
}

/* Polygon Meta in Header */
.polygon-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.polygon-meta .polygon-id,
.polygon-meta .polygon-created {
    font-size: 10px;
    opacity: 0.8;
}

.polygon-meta .polygon-buffer {
    font-size: 10px;
    font-weight: 600;
    color: var(--theme-secondary);
}

.stats-loading {
    text-align: center;
    padding: 30px 16px;
    color: #999;
    font-size: 12px;
}

    .stats-loading::before {
        content: "⏳";
        display: block;
        font-size: 28px;
        margin-bottom: 8px;
        animation: spin 2s linear infinite;
    }

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

    100% {
        transform: rotate(360deg);
    }
}

.legend-container {
    transition: top 0.3s ease, right 0.3s ease;
}

    .legend-container.with-stats-panel {
        right: 310px;
    }

/* ==========================================
   Report Modal
   ========================================== */
.report-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(3px);
    animation: fadeIn 0.3s ease;
    padding: 24px;
    box-sizing: border-box;
}

    .report-overlay.hidden {
        display: none;
    }

.report-popup {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: slideUp 0.35s ease;
    overflow: hidden;
}

.report-header {
    background: var(--theme-gradient-header);
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .report-header h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

.report-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-print-btn {
    font-size: 13px;
    padding: 7px 14px;
}

.report-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Report sections */
.report-section {
    margin-bottom: 32px;
}

.report-disclaimer {
    background: var(--theme-bg-subtle, #f8f8f6);
    border-left: 3px solid var(--theme-border-dark);
    padding: 12px 16px;
    border-radius: 4px;
}

.report-disclaimer p {
    font-size: 12px;
    color: var(--theme-text-muted);
    margin: 6px 0 0 0;
    line-height: 1.6;
}

.report-disclaimer p:first-of-type {
    margin-top: 8px;
}

.report-geometry-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-dark);
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--theme-bg, #f5f5f5);
    border-left: 4px solid var(--theme-secondary, #ff8c00);
    border-radius: 2px;
}

.report-geometry-label:has(+ .report-geometry-meta) {
    margin-bottom: 0;
}
.report-geometry-meta {
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    color: var(--theme-text-muted, #555);
    line-height: 1.4;
}
.report-meta-line {
    margin: 0;
}

/* Compare-mode title: two color-coded shape labels separated by "vs",
   colors match the polygon highlights on the embedded report map. */
.report-geometry-label--compare {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-left-color: #0E7490;
}
.report-geom-shape {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    color: #fff;
    font-size: 13px;
    /* Force background to render in printed PDFs — most browsers strip
       backgrounds by default. Same trick used by other report header colors. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.report-geom-shape--aoi  { background: #0E7490 !important; }
.report-geom-shape--comp { background: #B45309 !important; }
.report-geom-vs {
    color: var(--theme-text-muted, #666);
    font-style: italic;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Below-map legend for compare-mode reports — explicitly maps the
   teal/amber polygons to their labels using the same chip style as the
   report title, so the connection is visible at both the title and the
   map level (especially important in PDF where the on-map tooltips
   don't render). */
.report-compare-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-top: 8px;
    background: #fafafa;
    border-radius: 4px;
    font-size: 13px;
}
.report-compare-legend-label {
    color: var(--theme-text-muted, #666);
    font-weight: 600;
    margin-right: 4px;
}

/* Permanent center tooltips on the report map's compared polygons.
   Color-keyed to match the report title chips so users can connect
   the on-map shape with the label in the title and table headers. */
.leaflet-tooltip.compare-poly-label {
    font-weight: 700;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}
.leaflet-tooltip.compare-poly-label::before { display: none; }
.leaflet-tooltip.compare-poly-label--aoi  { color: #0E7490; border-color: #0E7490; }
.leaflet-tooltip.compare-poly-label--comp { color: #B45309; border-color: #B45309; }

.report-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-dark);
    margin: 0 0 6px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--theme-border-dark);
}

.report-section-desc {
    font-size: 12px;
    color: var(--theme-text-muted);
    margin: 0 0 14px 0;
}

/* Extra figures appended from the in-viewer chart panel via the user's
   "Add to Report" toggles. Each entry gets its own title + image (or
   cloned summary-table HTML). page-break-inside on the inner block keeps
   a single figure from splitting across printed pages. */
.report-extra-figures .report-extra-figure {
    margin-bottom: 18px;
    page-break-inside: avoid;
}
.report-extra-figures .report-extra-figure:last-child {
    margin-bottom: 0;
}
.report-extra-figure-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-dark);
    margin: 0 0 6px 0;
}
.report-extra-figure-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--theme-border-light, #e3e3e3);
    border-radius: 4px;
    background: #fff;
}
.report-extra-figure-html table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.report-extra-figure-html th,
.report-extra-figure-html td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--theme-border-light, #e3e3e3);
    text-align: left;
}

/* Report table */
.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .report-table th {
        background: var(--theme-gradient-header);
        color: white;
        padding: 9px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        white-space: nowrap;
    }

    .report-table td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--theme-border);
        color: var(--theme-dark);
    }

    .report-table tbody tr:nth-child(even) {
        background: #f8f9fa;
    }

    .report-table tbody tr:hover {
        background: #f0f4f8;
    }

    .report-table .report-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.report-pos {
    color: #27ae60;
    font-weight: 600;
}

.report-neg {
    color: #e74c3c;
    font-weight: 600;
}

/* ── Report Maps (Leaflet) ──────────────────────────────── */
.report-map {
    height: 260px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--theme-border);
    position: relative;
    background: #f0f4f8;
}

/* Static snapshot inserted just before window.print() and removed in afterprint.
   Not hidden — it lives in the DOM only for the instant between insertion and
   the print dialog opening, so it's imperceptible in the live UI. */
.report-map-snapshot {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #ddd;
    margin-top: 8px;
}

.report-map-container {
    position: relative;
}

/* The standalone legend is for print only — the interactive map has its own
   L.control legend. Hide on screen, show in print (see @media print below). */
.report-map-container > .report-map-legend {
    display: none;
}

.report-map-legend {
    position: absolute;
    bottom: 32px;          /* clear Leaflet attribution bar */
    right: 8px;
    z-index: 800;          /* above map tiles, below Leaflet controls */
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.rml-title {
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 2px;
    color: var(--theme-dark);
}

.rml-year {
    font-size: 10px;
    color: var(--theme-text-muted);
    margin-bottom: 6px;
}

.rml-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
    white-space: nowrap;
}

.rml-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.rml-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
}

.rml-grid .rml-row {
    font-size: 10px;
    margin-bottom: 0;
}

/* EVT legend placed below the map instead of overlaying it */
.report-map-legend-below {
    position: static;
    max-height: none;
    overflow-y: visible;
    box-shadow: none;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 10px;
    border-radius: 0 0 6px 6px;
    font-size: 11px;
    line-height: 1.4;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.rml-stretch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.rml-stretch-bar {
    width: 16px;
    height: 80px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.rml-stretch-max,
.rml-stretch-min {
    font-size: 10px;
    color: var(--theme-dark);
    white-space: nowrap;
}

.report-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

/* ==========================================
   Print Styles
   ========================================== */
@media print {
    /* Unchain html/body so the static overlay can expand to full content height */
    html, body {
        height: auto !important;
        overflow: visible !important;
    }

    /* Hide everything that isn't the report */
    body.report-open .navbar,
    body.report-open .viewer-container {
        display: none !important;
    }

    body.report-open .report-overlay {
        position: static !important;
        background: none !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        display: block !important;
        animation: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    body.report-open .report-popup {
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        animation: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    body.report-open .report-header {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.report-open .report-header-actions {
        display: none !important;
    }

    /* Hide the live interactive map; the static snapshot img takes its place */
    .report-map {
        display: none !important;
    }

    .report-map-container > .report-map-legend {
        display: block;
    }

    .report-map-legend-below {
        display: block;
    }

    .report-map-legend,
    .report-map-legend .rml-swatch,
    .report-map-legend .rml-stretch-bar {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.report-open .report-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.report-open .report-body {
        overflow: visible !important;
        height: auto !important;
        flex: none !important;
    }

    /* Avoid splitting a section across pages */
    .report-section {
        page-break-inside: avoid;
    }
}

/* ==========================================
   Responsive Adjustments
   ========================================== */
@media (max-width: 768px) {
    .control-panel {
        width: 100%;
        max-width: 100%;
    }

    .control-panel-header h2 {
        font-size: 15px;
    }

    .expand-btn {
        left: 16px;
    }

    .legend-container {
        top: 10px;
        right: 10px;
    }

    .layer-group {
        gap: 6px;
    }

    .layer-item {
        padding: 8px;
    }

    .layer-name strong {
        font-size: 11px;
    }

    .layer-description {
        font-size: 11px;
    }

    .welcome-popup {
        padding: 24px;
    }

        .welcome-popup h3 {
            font-size: 18px;
        }

        .welcome-popup p {
            font-size: 13px;
        }

    .section-header {
        padding: 10px 12px;
    }

    .section-content {
        padding: 0 12px 12px 12px;
    }
}

@media (max-width: 480px) {
    .control-panel {
        width: 100%;
    }

    .control-panel-header {
        padding: 12px;
    }

    .control-panel-body {
        padding: 12px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .welcome-popup {
        padding: 20px;
        margin: 16px;
    }

    .welcome-features {
        gap: 8px;
    }

    .welcome-feature {
        padding: 10px 12px;
    }
}

/* ── Find X,Y Modal ─────────────────────────────────────── */
.findxy-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.findxy-overlay.hidden { display: none; }

.findxy-popup {
    background: #fff;
    border-radius: 12px;
    width: 360px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: slideUp 0.25s ease;
}

.findxy-header {
    background: var(--theme-gradient-header);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.findxy-title { margin: 0; font-size: 1rem; font-weight: 600; }
.findxy-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
}
.findxy-close:hover { opacity: 1; }

.findxy-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.findxy-field { display: flex; flex-direction: column; gap: 4px; }
.findxy-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.findxy-field select,
.findxy-field input[type="number"] {
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--theme-dark);
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.findxy-field select:focus,
.findxy-field input[type="number"]:focus {
    border-color: var(--theme-secondary);
    box-shadow: 0 0 0 3px var(--theme-focus-ring);
}

.findxy-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.findxy-error {
    color: #dc2626;
    font-size: 0.82rem;
    margin: 0;
    padding: 6px 10px;
    background: #fef2f2;
    border-radius: 6px;
    border-left: 3px solid #dc2626;
}
.findxy-error.hidden { display: none; }

.findxy-actions { display: flex; gap: 8px; }
.findxy-actions .btn-primary { flex: 1; }