/* ============================================================
   Geospatial Explorer - Styles
   ============================================================ */

:root {
    --panel-bg: rgba(10, 10, 10, 0.82);
    --left-panel-width: 360px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Honor the HTML `hidden` attribute even on flex/grid containers. */
[hidden] {
    display: none !important;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Map ---- */
#map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ---- Global backdrop blur (applied consistently to all UI panels) ---- */
.panel,
.search-input,
.search-results,
.legend-card,
.stack-card {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* ---- Panels (shared) ---- */
.panel {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 2;
    background: var(--panel-bg);
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.panel-left {
    left: 0;
    width: var(--left-panel-width);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-right {
    right: 0;
    width: var(--left-panel-width);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-hidden.panel-left {
    transform: translateX(-100%);
}

.panel-hidden.panel-right {
    transform: translateX(100%);
}

/* ---- Panel header ---- */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.panel-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #f0f0f0;
}

/* ---- Panel body (scrollable) ---- */
.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* ---- Buttons ---- */
.panel-toggle-btn,
.panel-close-btn {
    background: transparent;
    border: 1px solid transparent;
    color: #9a9a9a;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease, border-radius 0.3s ease;
}

.panel-toggle-btn:hover,
.panel-close-btn:hover {
    color: #f0f0f0;
    background: rgba(255, 255, 255, 0.08);
}

/* Arrow flips direction when the parent panel is collapsed. */
.panel-toggle-btn .toggle-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.panel-hidden .panel-toggle-btn .toggle-arrow {
    transform: scaleX(-1);
}

/* When a panel slides offscreen, the toggle rides along with it but slows
   down so it comes to rest flush against the screen edge (not floating where
   the panel used to be). The counter-transform cancels out the panel's slide
   minus the toggle's own width and the header's horizontal padding, so the
   toggle's outer edge lands exactly at the viewport edge. Also switch to a
   solid appearance so the standalone button is readable against the map. */
.panel-left.panel-hidden .panel-toggle-btn {
    transform: translateX(calc(100% + 16px));
    background: var(--panel-bg);
    border-color: rgba(255, 255, 255, 0.08);
    border-left-color: transparent;
    border-radius: 0 6px 6px 0;
}

.panel-right.panel-hidden .panel-toggle-btn {
    transform: translateX(calc(-100% - 16px));
    background: var(--panel-bg);
    border-color: rgba(255, 255, 255, 0.08);
    border-right-color: transparent;
    border-radius: 6px 0 0 6px;
}

/* Right-panel toggle is hidden until the panel has something to show. */
#right-panel:not(.has-content) .panel-toggle-btn {
    display: none;
}

/* Basemap card radio options */
.basemap-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    color: #e0e0e0;
    font-size: 13px;
}

.basemap-option input[type="radio"] {
    accent-color: #8ab4f8;
    cursor: pointer;
}

.basemap-option:hover span {
    color: #f0f0f0;
}

.panel-open-left {
    left: 0;
}

.panel-open-right {
    right: 0;
    border-radius: 6px 0 0 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-right: none;
}

/* ---- Floating search bar ---- */
#search-section {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 320px;
}

.search-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: var(--panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: #e0e0e0;
    font-size: 13px;
    padding: 9px 16px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.search-input:focus {
    border-color: #9a9a9a;
    background: var(--panel-bg);
}

.search-input::placeholder {
    color: #707070;
}

.search-results {
    display: none;
    background: var(--panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
}

.search-results.visible {
    display: block;
}

.search-result-item {
    padding: 10px 16px;
    font-size: 13px;
    color: #e0e0e0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-result-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.search-result-item:first-child {
    border-radius: 8px 8px 0 0;
}

.search-result-item:last-child {
    border-radius: 0 0 8px 8px;
}

.search-no-results {
    padding: 10px 16px;
    font-size: 12px;
    color: #707070;
}

/* ---- Bottom-left stack (filters + legends) ---- */
#bottom-left-stack {
    position: absolute;
    top: 1rem;
    left: calc(var(--left-panel-width) + 8px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    transition: left 0.3s ease;
}

body.left-panel-collapsed #bottom-left-stack {
    left: 44px;
}

/* ---- Bottom-right stack (legends + pin bucket legend) ---- */
/* Default right offset = 44px to leave room for the right-panel toggle when
   the right panel is collapsed; mirrors body.left-panel-collapsed's
   left: 44px on #bottom-left-stack. When the right panel is open the whole
   stack slides left by the panel width. */
#bottom-right-stack {
    position: absolute;
    top: 1rem;
    right: 44px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: auto;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    transition: right 0.3s ease;
}

body:has(#right-panel:not(.panel-hidden)) #bottom-right-stack {
    right: calc(var(--left-panel-width) + 12px);
}

.stack-card {
    background: var(--panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    max-width: 220px;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.stack-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}

.stack-card-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #c0c0c0;
}

.stack-card-chevron {
    font-size: 9px;
    color: #707070;
}

.stack-card-body {
    padding: 8px 10px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

.stack-card.collapsed .stack-card-body {
    display: none;
}

/* ---- Filter card ---- */
#filter-card-body > div + div {
    margin-top: 10px;
}

#filter-card-body [id^="cat-filter-"] {
    width: 100%;
}

.filter-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #707070;
    margin-bottom: 6px;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.year-select {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #e0e0e0;
    font-size: 13px;
    padding: 6px 8px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.year-select:focus {
    border-color: #9a9a9a;
}

.year-select option {
    background: #1a1a1a;
    color: #e0e0e0;
}


.date-mode-row {
    margin-bottom: 6px;
    gap: 12px;
}

.date-mode-option {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #c0c0c0;
    cursor: pointer;
}

.date-mode-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.month-input {
    font-family: inherit;
    color-scheme: dark;
}

/* ---- Layer list ---- */
.layer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.layer-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.layer-drag-handle {
    color: #505050;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
}

.layer-row:active .layer-drag-handle {
    cursor: grabbing;
}

.layer-row.dragging {
    opacity: 0.4;
}

.layer-row.drag-over-top {
    box-shadow: inset 0 2px 0 0 #9a9a9a;
}

.layer-row.drag-over-bottom {
    box-shadow: inset 0 -2px 0 0 #9a9a9a;
}

.layer-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #505050;
    border-radius: 3px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.layer-row input[type="checkbox"]:checked {
    background: #9a9a9a;
    border-color: #9a9a9a;
}

.layer-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.layer-name {
    flex: 1;
    font-size: 13px;
    color: #c0c0c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.layer-color-swatch {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--swatch-color, #e0e0e0);
    clip-path: var(--swatch-clip, none);
}

.layer-years,
.layer-count {
    font-size: 11px;
    color: #707070;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 7px;
    border-radius: 10px;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
}

.layer-years:empty {
    display: none;
}

.layer-options-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 6px 48px;
    font-size: 11px;
    color: #9a9a9a;
}

.layer-options-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #707070;
}

.layer-options-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.layer-options-group input[type="radio"] {
    margin: 0 2px 0 0;
    cursor: pointer;
}

.layer-options-choice {
    cursor: pointer;
    color: #c0c0c0;
}

/* ---- Per-layer categorical filters (under each layer row) ---- */
.layer-cat-filters {
    padding: 6px 16px 10px 44px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.layer-cat-filter + .layer-cat-filter {
    margin-top: 8px;
}

.layer-cat-filter .filter-label {
    margin-bottom: 4px;
}

/* ---- Custom tooltip (shared, fixed-position to escape panel overflow) ---- */
#vdp-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: 260px;
    padding: 8px 10px;
    background: rgba(20, 20, 20, 0.96);
    color: #e0e0e0;
    font-size: 12px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    white-space: normal;
    word-wrap: break-word;
}

#vdp-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

[data-vdp-tip] {
    cursor: help;
}

.layer-row [data-vdp-tip] {
    cursor: pointer;
}

/* ---- Placeholder / empty state ---- */
.panel-placeholder {
    padding: 24px 16px;
    color: #707070;
    font-size: 13px;
    text-align: center;
}

/* ---- Right-panel key-value table ---- */
.right-panel-table {
    width: 100%;
    border-collapse: collapse;
}

.right-panel-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.right-panel-table td {
    padding: 8px 16px;
    font-size: 12px;
    vertical-align: top;
}

.right-panel-table .prop-key {
    color: #9a9a9a;
    font-weight: 500;
    width: 40%;
    word-break: break-word;
}

.right-panel-table .prop-val {
    color: #e0e0e0;
    word-break: break-word;
}

.right-panel-layer-header {
    padding: 10px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9a9a9a;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.right-panel-layer-header:first-child {
    border-top: none;
}

.right-panel-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 2px 16px;
}

/* ---- Scrollbar styling ---- */
.panel-body::-webkit-scrollbar,
#bottom-right-stack::-webkit-scrollbar,
#bottom-left-stack::-webkit-scrollbar {
    width: 5px;
}

.panel-body::-webkit-scrollbar-track,
#bottom-right-stack::-webkit-scrollbar-track,
#bottom-left-stack::-webkit-scrollbar-track {
    background: transparent;
}

.panel-body::-webkit-scrollbar-thumb,
#bottom-right-stack::-webkit-scrollbar-thumb,
#bottom-left-stack::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.panel-body::-webkit-scrollbar-thumb:hover,
#bottom-right-stack::-webkit-scrollbar-thumb:hover,
#bottom-left-stack::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ---- Logo / header ---- */
.floating-logo {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    max-height: 28px;
    width: auto;
    pointer-events: none;
}

/* ---- Spider cluster points ---- */
.spider-point {
    width: 18px;
    height: 18px;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    transition: transform 0.1s ease;
    background-color: var(--swatch-color, #e0e0e0);
    clip-path: var(--swatch-clip, none);
}

.spider-point:hover {
    transform: scale(1.4);
    z-index: 10;
}

/* ---- Pin marker ---- */
.pin-marker {
    width: 24px;
    height: 24px;
    background: #e0e0e0;
    border: 3px solid #1a1a1a;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---- County stats ---- */
.county-stats-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.county-stats-section {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.county-stats-layer-name {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #9a9a9a;
    margin-bottom: 6px;
}

.county-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
    font-size: 12px;
}

.county-stats-breakdown-label {
    margin-top: 8px;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #c8c8c8;
}

.county-stats-key {
    color: #9a9a9a;
}

.county-stats-val {
    color: #e0e0e0;
    text-align: right;
    max-width: 55%;
    word-break: break-word;
}

.county-stats-sub {
    padding: 10px 16px 4px 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7f8ea3;
}

.pin-section-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 8px 0 0 0;
}

.pin-rings-header {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: 6px;
    padding: 6px 16px 4px 16px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9a9a9a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pin-rings-col-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.pin-ring-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background: var(--swatch-color);
}

.hail-pin-tooltip {
    font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.pin-rings-row {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr 1fr;
    gap: 6px;
    align-items: baseline;
    padding: 3px 0;
    font-size: 12px;
}

.pin-rings-key {
    color: #9a9a9a;
    text-align: left;
    word-break: break-word;
}

.pin-rings-cell {
    color: #e0e0e0;
    text-align: right;
    word-break: break-word;
}

.pin-rings-skipped {
    padding: 6px 16px 10px 16px;
    font-size: 10px;
    color: #6b7280;
    font-style: italic;
}

/* ---- Legend ---- */
#legend-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend-card {
    background: var(--panel-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    max-width: 220px;
    pointer-events: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* ---- Pin bucket + ring legend sections (inside a .legend-card) ---- */
.pin-bucket-section + .pin-bucket-section {
    margin-top: 8px;
}

.pin-bucket-section-title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #707070;
    margin: 0 0 4px;
}

/* Override .legend-swatch's square look — hail buckets map to circular dots. */
.pin-bucket-swatch {
    border-radius: 50%;
}

.pin-ring-dash {
    width: 12px;
    height: 0;
    flex-shrink: 0;
    border-top: 2px dashed var(--swatch-color);
}

.legend-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    user-select: none;
}

.legend-card-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #c0c0c0;
}

.legend-chevron {
    font-size: 9px;
    color: #707070;
    transition: transform 0.15s ease;
}

.legend-card-body {
    padding: 6px 10px 8px;
}

.legend-card.collapsed .legend-card-body {
    display: none;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
    background-color: var(--swatch-color, transparent);
}

.legend-label {
    font-size: 11px;
    color: #c0c0c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legend-gradient {
    height: 12px;
    border-radius: 3px;
    width: 100%;
    background: var(--gradient-stops, transparent);
}

.legend-gradient-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #9a9a9a;
    margin-top: 3px;
}

/* Legend scrollbar */
.legend-card-body::-webkit-scrollbar {
    width: 4px;
}
.legend-card-body::-webkit-scrollbar-track {
    background: transparent;
}
.legend-card-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    :root {
        --left-panel-width: 240px;
    }

    .panel-right {
        width: var(--left-panel-width);
    }

    #bottom-left-stack {
        left: calc(var(--left-panel-width) + 8px);
    }

    #search-section {
        width: 260px;
    }
}

@media (max-width: 480px) {
    .panel-left {
        width: 100%;
        border-right: none;
    }

    .panel-right {
        width: 100%;
        border-left: none;
    }

    #bottom-left-stack {
        left: 10px;
        bottom: 40px;
    }

    #search-section {
        width: 220px;
    }
}