/* Redesigned Reports → Heatmap.
   Pixel spec extracted from the reference app (shipdayheatmap: ThemeContext.jsx, HeroCard.jsx,
   LocalesCard.jsx, ZoneDetailPanel.jsx, App.jsx LayerControl, index.css). */

:root {
    --hm-surface: #ffffff;
    --hm-surface-hover: #f9fafb;
    --hm-bg-tertiary: #f7f7fa;
    --hm-border: #e8e8e4;
    --hm-border-light: #f0f0ec;
    --hm-text: #0a0a0a;
    --hm-text-secondary: #404040;
    --hm-text-muted: #737373;
    --hm-accent: #008062;
    --hm-accent-hover: #006b52;
    --hm-accent-light: #ebfef6;
    --hm-up: #008062;
    --hm-up-bg: #ebfef6;
    --hm-down: #dc2626;
    --hm-down-bg: #fef2f2;
    --hm-warn: #b45309;
    --hm-warn-bg: #fef3e2;
    --hm-dot: #059669;
    --hm-dot-ring: rgba(5, 150, 105, 0.14);
    --hm-dot-glow: rgba(5, 150, 105, 0.45);
    --hm-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --hm-popover-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05), 0px 0px 50px rgba(0, 0, 0, 0.1);
    --hm-tooltip-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.14), 0 2px 8px -2px rgba(0, 0, 0, 0.06);
    /* Reference resolution order (index.css --font-main): macOS 'Avenir' first,
       then the app's bundled webfont for other platforms. NOT 'Avenir Next' —
       its weights render visibly heavier/wider. */
    --hm-font: 'Avenir', 'sd-avenir', system-ui, sans-serif;
}

[data-theme='dark'] {
    --hm-surface: #1a1a1a;
    --hm-surface-hover: #222222;
    --hm-bg-tertiary: #2a2a2a;
    --hm-border: #2e2e2e;
    --hm-border-light: #262626;
    --hm-text: #f5f5f5;
    --hm-text-secondary: #b0b0b0;
    --hm-text-muted: #808080;
    --hm-accent: #008062;
    --hm-accent-hover: #006b52;
    --hm-accent-light: rgba(1, 173, 133, 0.14);
    --hm-up: #34d399;
    --hm-up-bg: rgba(52, 211, 153, 0.12);
    --hm-down: #f87171;
    --hm-down-bg: rgba(248, 113, 113, 0.12);
    --hm-warn: #fbbf24;
    --hm-warn-bg: rgba(251, 191, 36, 0.12);
    --hm-dot: #34d399;
    --hm-dot-ring: rgba(52, 211, 153, 0.18);
    --hm-dot-glow: rgba(52, 211, 153, 0.6);
    --hm-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --hm-tooltip-shadow: 0 8px 28px -4px rgba(0, 0, 0, 0.5), 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}

/* ── Layout: 360px panel | map (App.jsx PANEL_W = 360, full-bleed, no outer chrome) ── */

/* Full-bleed: escape .reportAnalyticsSubContainer's 24px side padding so the
   panel + map run edge-to-edge like the reference app. The -30px bottom margin
   cancels .analytics-dashboard's margin-bottom so the layout ends flush with
   the viewport instead of adding scroll. */
.heatmap-report-container {
    position: relative;
    margin: 12px -24px -30px;
    font-family: var(--hm-font);
    /* neutralize the dashboard's global body line-height so spacing matches the reference */
    line-height: normal;
}

/* Material Symbols Rounded utilities matching the reference (fontWeight 300) */
.hm-ms {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
    line-height: 1;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}

.hm-ms--18 { font-size: 18px; }
.hm-ms--20 { font-size: 20px; }
.hm-ms--22 { font-size: 22px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 22; }

/* ── Action bar (reference ActionBar: filter pills + Create Campaign) ───────── */

/* Overlaid on the report breadcrumb row (its right half is empty on this tab)
   so the pills share the "Reports › Heatmap" line like the reference ActionBar.
   -53px lines the 34px pills up with the breadcrumb's vertical center; the bar
   is out of flow, so the map layout keeps its full height. */
.hm-action-bar {
    position: absolute;
    top: -53px;
    left: 0;
    right: 0;
    /* Above .hm-zone-detail (220) so its dropdown menus open over the detail panel,
       but still below the top nav (300 in nav.css) so the #adminMenu covers it.
       Note: .hm-action-bar forms a stacking context, so its menus' internal z-index
       is relative to THIS value — it must beat zone-detail here, not in the menu. */
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 24px;
    pointer-events: none;
}

.hm-action-bar > * {
    pointer-events: auto;
}

.hm-pill-wrap {
    position: relative;
}

/*
 * Starter-plan paywall (`.restrict-page-blur`, toggled in render.controller.js
 * `updateViewBasedOnPlan`). The overlay blurs with `backdrop-filter`, which only affects what is
 * painted BEHIND it, and this bar sits above it — so it stayed sharp and fully clickable on top of
 * the upgrade card. Blur and dim it directly, and put it back under the overlay.
 *
 * `pointer-events` is set twice on purpose: `.hm-action-bar` is `none` by default with
 * `.hm-action-bar > * { pointer-events: auto }` re-enabling the pills, so the children need their
 * own override or the pills stay clickable through the paywall.
 */
.reportAnalyticsSubContainer.is-plan-restricted .hm-action-bar {
    z-index: 1;
    opacity: 0.5;
    filter: blur(1px);
    pointer-events: none;
}

.reportAnalyticsSubContainer.is-plan-restricted .hm-action-bar .hm-pill-wrap {
    pointer-events: none;
}

.hm-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    height: 34px;
    border: 1px solid var(--hm-border);
    border-radius: 8px;
    background: var(--hm-surface);
    color: var(--hm-text);
    font-size: 14px;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.12s;
}

.hm-pill:hover {
    background: var(--hm-bg-tertiary);
}

.hm-pill-icon,
.hm-pill-chevron {
    display: flex;
    color: var(--hm-text-muted);
}

.hm-pill-chevron {
    transition: transform 0.12s;
}

.hm-pill[aria-expanded='true'] .hm-pill-chevron {
    transform: rotate(180deg);
}

.hm-pill-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1300;
    min-width: 100%;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 12px;
    box-shadow: var(--hm-popover-shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* display:flex above would otherwise beat the UA's [hidden] rule */
.hm-pill-menu[hidden] {
    display: none;
}

.hm-pill-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--hm-text);
    cursor: pointer;
    white-space: nowrap;
}

.hm-pill-option:hover {
    background: var(--hm-bg-tertiary);
}

.hm-pill-option--selected,
.hm-pill-option--selected:hover {
    background: var(--hm-accent-light);
    color: var(--hm-accent);
    font-weight: 600;
}

/* "Custom range…" row — trailing chevron like the reference */
.hm-pill-option-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.hm-pill-option-flex svg {
    color: var(--hm-text-muted);
    flex-shrink: 0;
}

.hm-action-divider {
    width: 1px;
    height: 20px;
    background: var(--hm-border);
    margin: 0 4px;
}

.hm-create-campaign-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: var(--hm-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.12s;
}

.hm-create-campaign-btn:hover {
    background: var(--hm-accent-hover);
}

/* ── Compare dropdown ────────────────────────────────────────────────────────── */

/* Active pill: accent border/fill/text (reference CompareDropdown). */
.hm-compare-wrap--active .hm-compare-btn {
    border-color: var(--hm-accent);
    background: var(--hm-accent-light);
    color: var(--hm-accent);
    font-weight: 600;
}

.hm-compare-wrap--active .hm-compare-btn .hm-pill-icon,
.hm-compare-wrap--active .hm-compare-btn .hm-pill-chevron {
    color: var(--hm-accent);
}

.hm-compare-menu {
    min-width: 240px;
    left: calc(-100% + 10px);
}

/* Custom range open: the two native date inputs have a wide intrinsic minimum, so the menu
   grows well past its 240px min-width. Left-anchored that extra width spills off the right
   edge of the screen, so while the panel is open anchor the menu by its RIGHT edge instead
   and let it expand leftward. Toggled from HeatmapActionBar#openCustomPanel/#closeCustomPanel. */
.hm-compare-menu--wide {
    left: auto;
    right: 0;
    min-width: 330px;
}

.hm-compare-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--hm-text);
    cursor: pointer;
    white-space: nowrap;
}

.hm-compare-option:hover {
    background: var(--hm-bg-tertiary);
}

.hm-compare-divider {
    height: 1px;
    background: var(--hm-border);
    margin: 4px 6px;
}

.hm-compare-custom-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--hm-text);
    cursor: pointer;
}

.hm-compare-custom-toggle:hover {
    background: var(--hm-bg-tertiary);
}

.hm-compare-custom-chevron {
    color: var(--hm-text-muted);
    transition: transform 0.15s;
}

.hm-compare-custom-toggle--open .hm-compare-custom-chevron {
    transform: rotate(180deg);
}

.hm-compare-custom {
    padding: 4px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* display:flex above would otherwise beat the UA [hidden] rule */
.hm-compare-custom[hidden] {
    display: none;
}

.hm-compare-custom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.hm-compare-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hm-compare-field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--hm-text-muted);
}

.hm-compare-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 10px;
    border-radius: 7px;
    border: 1px solid var(--hm-border);
    background: var(--hm-surface);
    color: var(--hm-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}

.hm-compare-apply {
    width: 100%;
    padding: 7px 0;
    border: none;
    border-radius: 7px;
    background: var(--hm-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.12s;
}

.hm-compare-apply:hover:not(:disabled) {
    opacity: 0.88;
}

.hm-compare-apply:disabled {
    background: var(--hm-bg-tertiary);
    color: var(--hm-text-muted);
    cursor: default;
}

.hm-compare-clear {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--hm-text-muted);
    cursor: pointer;
}

.hm-compare-clear:hover {
    background: var(--hm-bg-tertiary);
}

/* ── Delta chips (KPIs / list / zone detail) ─────────────────────────────────── */

.hm-delta {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.hm-delta--up {
    color: var(--hm-up);
    background: var(--hm-up-bg);
}

.hm-delta--down {
    color: var(--hm-down);
    background: var(--hm-down-bg);
}

.hm-delta--flat {
    color: var(--hm-text-muted);
    background: var(--hm-bg-tertiary);
}

.hm-kpi-card .hm-delta {
    margin-top: 8px;
}

/* Neighborhoods list in compare mode: keep the Orders/Revenue values, with a ±% chip
   (or "+{value}") stacked underneath each value. */
.hm-zone-stats--cmp {
    gap: 20px;
}

.hm-zone-stats--cmp .hm-zone-stat-value {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-direction: column;
    align-items: self-start;
}

.hm-zone-stats--cmp .hm-zone-stat .hm-delta {
    font-size: 12px;
    font-weight: 700;
    padding: 1px 7px;
}

/* Zone detail compare bits. */
.hm-detail-stat-compare {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.hm-detail-stat-prev {
    font-size: 13px;
    color: var(--hm-text-muted);
    text-decoration: line-through;
}

/* ── Compare legend overlay (map, top-left) ──────────────────────────────────── */

.hm-compare-legend {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hm-surface);
    border-radius: 10px;
    padding: 8px 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    color: var(--hm-text-muted);
}

/* display:flex above would otherwise beat the UA [hidden] rule */
.hm-compare-legend[hidden] {
    display: none;
}

.hm-compare-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hm-compare-legend-dot--down { background: var(--hm-down); }
.hm-compare-legend-dot--up { background: var(--hm-up); }

.hm-compare-legend-label {
    font-weight: 500;
}

.hm-compare-legend-bar {
    width: 40px;
    height: 5px;
    border-radius: 3px;
    flex-shrink: 0;
    background: linear-gradient(to right, var(--hm-down), var(--hm-border), var(--hm-up));
}

.hm-compare-legend-sep {
    width: 1px;
    height: 14px;
    background: var(--hm-border);
}

.hm-compare-legend-period {
    color: var(--hm-text-muted);
}

/* 152px = dispatch nav + report breadcrumb row + the container's own top margin,
   measured on the live dashboard (the action bar overlays the breadcrumb row, so
   it costs no height). The layout fills the rest of the viewport exactly,
   matching the reference's full-height shell. */
.hm-layout {
    display: flex;
    height: calc(100vh - 152px);
    min-height: 480px;
    border-top: 1px solid var(--hm-border);
    overflow: hidden;
    background: var(--hm-surface);
}

.hm-left-panel {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--hm-surface);
    border-right: 1px solid var(--hm-border);
    transition: width 0.25s ease;
}

/* Keep content at full width while the panel animates shut (reference wraps the
   panel in a fixed-width child for the same reason). */
.hm-left-panel > * {
    min-width: 360px;
}

.hm-layout--collapsed .hm-left-panel {
    width: 0;
    border-right: none;
}

/* Collapse toggle — reference App.jsx: 24x48 pill on the panel edge, visible on
   panel hover or while collapsed, chevron flips (180° = pointing left to close). */
.hm-panel-collapse-btn {
    position: absolute;
    left: 348px; /* PANEL_W - 12 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 500;
    width: 24px;
    height: 48px;
    border-radius: 8px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--hm-text-muted);
    opacity: 0;
    transition: opacity 0.15s, background 0.1s, left 0.25s ease;
}

.hm-panel-collapse-btn:hover {
    background: var(--hm-bg-tertiary);
    opacity: 1;
}

.hm-left-panel:hover ~ .hm-panel-collapse-btn {
    opacity: 1;
}

.hm-layout--collapsed .hm-panel-collapse-btn {
    left: 8px;
    opacity: 1;
}

.hm-panel-collapse-btn .hm-ms {
    transform: rotate(180deg);
    transition: transform 0.25s ease;
}

.hm-layout--collapsed .hm-panel-collapse-btn .hm-ms {
    transform: rotate(0deg);
}

.hm-map-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.hm-map {
    width: 100%;
    height: 100%;
}

/* ── KPI hero cards (HeroCard.jsx) ─────────────────────────────────────────── */

.hm-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 24px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--hm-border);
}

.hm-kpi-card {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--hm-bg-tertiary);
}

.hm-kpi-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--hm-text-muted);
    margin-bottom: 6px;
}

.hm-kpi-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--hm-text);
}

/* ── Neighborhoods list (LocalesCard.jsx) ──────────────────────────────────── */

.hm-zones {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 24px 0 32px;
}

.hm-zones-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 24px;
}

.hm-zones-title {
    font-size: 17px;
    font-weight: 500;
    color: var(--hm-text);
}

.hm-zones-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-text-muted);
    background: var(--hm-bg-tertiary);
    border-radius: 999px;
    padding: 2px 10px;
}

.hm-zone-row {
    display: block;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-bottom: 1px solid var(--hm-border);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background 0.12s ease;
}

.hm-zone-row:last-child {
    border-bottom: none;
}

.hm-zone-row:hover {
    background: var(--hm-bg-tertiary);
}

.hm-zone-row--selected,
.hm-zone-row--selected:hover {
    background: var(--hm-accent-light);
}

.hm-zone-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.hm-zone-row-id {
    min-width: 0;
}

.hm-zone-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--hm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-zone-row--selected .hm-zone-name {
    color: var(--hm-accent);
}

.hm-zone-zip {
    font-size: 14px;
    color: var(--hm-text-muted);
    margin-top: 3px;
}

.hm-zone-stats {
    display: flex;
    gap: 28px;
    flex-shrink: 0;
}

.hm-zone-stat {
    text-align: right;
}

.hm-zone-stat-label {
    font-size: 14px;
    color: var(--hm-text-muted);
    margin-bottom: 4px;
}

.hm-zone-stat-value {
    font-size: 18px;
    font-weight: 500;
    color: var(--hm-text);
}

.hm-empty {
    text-align: center;
    padding: 20px 24px;
    color: var(--hm-text-muted);
    font-size: 16px;
}

/* ── Zone detail panel (ZoneDetailPanel.jsx: 380px full-height slide-in) ───── */

.hm-zone-detail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100%;
    background: var(--hm-surface);
    border-left: 1px solid var(--hm-border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    /* Above the map chrome (layers 200, zoom 99, legend 6) so the panel covers them,
       but below .hm-action-bar (250) so the action-bar dropdowns open over the panel. */
    z-index: 220;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.hm-zone-detail--visible {
    transform: translateX(0);
}

.hm-detail-head {
    padding: 24px 24px 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--hm-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.hm-detail-zip {
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.hm-detail-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--hm-text);
    line-height: 1.2;
}

.hm-detail-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-text-muted);
    font-size: 22px;
    line-height: 1;
    transition: background 0.1s;
}

.hm-detail-close:hover {
    background: var(--hm-surface-hover);
}

.hm-detail-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 24px;
}

.hm-detail-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.hm-detail-stat {
    border: 1.5px solid var(--hm-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.hm-detail-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hm-text-muted);
    margin-bottom: 8px;
}

.hm-detail-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--hm-text);
    line-height: 1;
}

.hm-detail-rows {
    border-top: 1px solid var(--hm-border);
}

.hm-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--hm-border);
}

.hm-detail-row-label {
    font-size: 15px;
    color: var(--hm-text-muted);
}

.hm-detail-row-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--hm-text);
}

.hm-detail-foot {
    padding: 16px 24px;
    border-top: 1px solid var(--hm-border);
    flex-shrink: 0;
}

.hm-campaign-btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--hm-accent);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    font-family: inherit;
    transition: background 0.15s;
}

.hm-campaign-btn:hover {
    background: var(--hm-accent-hover);
}

/* ── Map chrome: zoom (MapControls) + layers (LayerControl) ────────────────── */

.hm-zoom-ctrls {
    position: absolute;
    bottom: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hm-border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 99;
}

.hm-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--hm-surface);
    color: var(--hm-text-secondary);
    cursor: pointer;
    padding: 0;
}

.hm-zoom-btn:first-child {
    border-bottom: 1px solid var(--hm-border);
}

#hm-layers-anchor {
    position: absolute;
    top: 16px;
    right: 16px;
    /* Below the top nav (z-index 300 in nav.css) so the #adminMenu dropdown, which
       opens over this top-right corner, stacks above the layers button. Still well
       above the map tiles/overlays. */
    z-index: 200;
}

.hm-layers-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: var(--hm-surface);
    color: var(--hm-text-muted);
    border: 1px solid var(--hm-border);
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(51, 51, 51, 0.04), 0px 10px 15px -3px rgba(51, 51, 51, 0.08);
    cursor: pointer;
    padding: 0;
}

.hm-layers-btn:hover {
    background: var(--hm-bg-tertiary);
}

.hm-layers-btn[aria-expanded='true'] {
    border-color: var(--hm-accent);
    color: var(--hm-accent);
    background: var(--hm-surface);
}

/* Amber indicator on the layers button when any layer is off (reference LayerControl) */
.hm-layers-popover {
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 30;
    width: 280px;
    background: var(--hm-surface);
    box-shadow: var(--hm-popover-shadow);
    border-radius: 16px;
    overflow: hidden;
}

.hm-layers-group {
    padding: 10px 0 6px;
}

.hm-layers-divider {
    height: 4px;
    background: var(--hm-bg-tertiary);
}

.hm-layers-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 4px 24px;
    height: 48px;
    box-sizing: border-box;
    cursor: pointer;
}

/* Disabled layer row (e.g. Delivery zone when none is configured) */
.hm-layers-row.hm-layers-row--disabled {
    opacity: 0.5;
    cursor: default;
}

.hm-layers-row-id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hm-layers-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--hm-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--hm-text-muted);
}

.hm-layers-label {
    font-weight: 400;
    font-size: 16px;
    color: var(--hm-text);
}

.hm-layers-subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 4px 24px;
    height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 15px;
    color: var(--hm-text);
}

.hm-layers-subrow[data-on='true'] {
    font-weight: 500;
}

.hm-toggle {
    width: 36px;
    height: 20px;
    border-radius: 12px;
    padding: 2px;
    box-sizing: border-box;
    background: var(--hm-border);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.hm-toggle::after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    transition: transform 0.2s ease;
}

.hm-toggle[data-on='true'] {
    background: var(--hm-accent);
}

.hm-toggle[data-on='true']::after {
    transform: translateX(16px);
}

.hm-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid var(--hm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.hm-radio[data-on='true'] {
    border-color: var(--hm-accent);
}

.hm-radio[data-on='true']::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--hm-accent);
}

/* ── Customer dots + tooltip (CustomerPins.jsx / index.css .customer-tooltip) ── */

.hm-html-layer {
    position: absolute;
    top: 0;
    left: 0;
    /* the Google Maps pane sets Roboto — tooltips must render in the app font */
    font-family: var(--hm-font);
    line-height: normal;
}

.hm-dot-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

@keyframes hmDotFadeIn {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

.hm-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hm-dot-ring);
    box-shadow: 0 0 3px rgba(5, 150, 105, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: hmDotFadeIn 0.3s ease both;
}

.hm-dot-core {
    border-radius: 50%;
    background: var(--hm-dot);
}

/* Size tiers by order count: 1–4 / 5–15 / 16+ */
.hm-dot--sm .hm-dot { width: 12px; height: 12px; }
.hm-dot--sm .hm-dot-core { width: 5px; height: 5px; }
.hm-dot--md .hm-dot { width: 18px; height: 18px; }
.hm-dot--md .hm-dot-core { width: 8px; height: 8px; }
.hm-dot--lg .hm-dot { width: 24px; height: 24px; }
.hm-dot--lg .hm-dot-core { width: 10px; height: 10px; }

.hm-dot-wrap:hover .hm-dot {
    box-shadow: 0 0 6px var(--hm-dot-glow);
}

.hm-dot--sm:hover .hm-dot { transform: scale(1.5); }
.hm-dot--md:hover .hm-dot { transform: scale(1.3); }
.hm-dot--lg:hover .hm-dot { transform: scale(1.2); }

.hm-dot-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    /* fixed card width like the reference — long addresses wrap */
    width: 280px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 14px;
    box-shadow: var(--hm-tooltip-shadow);
    padding: 14px 16px;
    z-index: 20;
}

.hm-dot-wrap:hover .hm-dot-tooltip {
    display: block;
}

.hm-dot-tooltip-head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.hm-dot-tooltip-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--hm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 8px;
    flex-shrink: 0;
}

.hm-badge--repeat {
    font-weight: 600;
    color: var(--hm-up);
    background: var(--hm-up-bg);
}

.hm-badge--vip {
    font-weight: 700;
    color: var(--hm-warn);
    background: var(--hm-warn-bg);
}

.hm-dot-tooltip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 14px;
    color: var(--hm-text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
}

.hm-dot-tooltip-row:last-of-type {
    margin-bottom: 0;
}

.hm-dot-tooltip-row b {
    color: var(--hm-text);
    font-weight: 600;
}

.hm-dot-tooltip-addr {
    border-top: 1px solid var(--hm-border-light);
    padding-top: 8px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--hm-text-muted);
}

/* ── Store marker + popup (MapView.jsx createStoreIcon / StorePopup) ───────── */

.hm-store-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hm-store-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #2563eb;
    border: 3px solid #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px -2px rgba(37, 99, 235, 0.5), 0 4px 14px -2px rgba(0, 0, 0, 0.15);
}

[data-theme='dark'] .hm-store-pin {
    border-color: #333;
}

.hm-store-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 248px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 14px;
    box-shadow: 0px 4px 20px -4px rgba(0, 0, 0, 0.12), 0px 2px 8px -2px rgba(0, 0, 0, 0.06);
    padding: 18px 20px;
    z-index: 20;
}

.hm-store-wrap:hover .hm-store-tooltip {
    display: block;
}

.hm-store-tooltip-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--hm-text);
    line-height: 130%;
    margin-bottom: 2px;
}

.hm-store-tooltip-addr {
    font-size: 14px;
    color: var(--hm-text-muted);
    font-weight: 400;
}

/* ── ZIP zone label pills (MapView.jsx createZonePill) ────────────────────────── */

.hm-zone-pill-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hm-zone-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--hm-surface);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    color: var(--hm-accent);
}

[data-theme='dark'] .hm-zone-pill {
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hm-zone-pill-arrow {
    font-size: 12px;
    line-height: 1;
}

/* Tone-coloured text, matching the polygon fill tiers. */
.hm-zone-pill--hot,
.hm-zone-pill--good { color: var(--hm-accent); }
.hm-zone-pill--warn { color: #b45309; }
.hm-zone-pill--down { color: #dc2626; }

[data-theme='dark'] .hm-zone-pill--hot,
[data-theme='dark'] .hm-zone-pill--good { color: #34d399; }
[data-theme='dark'] .hm-zone-pill--warn { color: #fbbf24; }
[data-theme='dark'] .hm-zone-pill--down { color: #f87171; }

/* Compare mode: filled green/red pill carrying the ±% (or "+{value}"). */
.hm-zone-pill--cmp-up {
    background: #d1fae5;
    border: 1.5px solid #6ee7b7;
    color: #065f46;
}

.hm-zone-pill--cmp-down {
    background: #fee2e2;
    border: 1.5px solid #fca5a5;
    color: #991b1b;
}

.hm-zone-pill--cmp-flat {
    background: var(--hm-bg-tertiary);
    border: 1.5px solid var(--hm-border);
    color: var(--hm-text-muted);
}

/* Selected pill inverts, like the reference. */
.hm-zone-pill--selected {
    background: #0a0a0a;
    border-color: #0a0a0a;
    color: rgba(255, 255, 255, 0.85);
}

[data-theme='dark'] .hm-zone-pill--selected {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #0a0a0a;
}

.hm-zone-pill--selected .hm-zone-pill-arrow {
    color: inherit;
}

/* ── Pickup-location pins + detail card ───────────────────────────────────────── */

.hm-pickup-wrap {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hm-pickup-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #2563eb;
    border: 3px solid #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.5), 0 3px 10px -2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

[data-theme='dark'] .hm-pickup-pin {
    border-color: #333;
}

.hm-pickup-wrap:hover .hm-pickup-pin {
    transform: scale(1.12);
}

.hm-pickup-card {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    background: var(--hm-surface);
    border: 1px solid var(--hm-border);
    border-radius: 14px;
    box-shadow: var(--hm-tooltip-shadow);
    padding: 16px 18px;
    z-index: 20;
}

.hm-pickup-wrap:hover .hm-pickup-card {
    display: block;
}

.hm-pickup-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--hm-text);
    line-height: 130%;
}

.hm-pickup-card-sub {
    margin-top: 2px;
    font-size: 13px;
    color: var(--hm-text-muted);
    line-height: 135%;
}

.hm-pickup-card-peak {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hm-accent);
}

.hm-pickup-card-body {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--hm-border-light);
}

.hm-pickup-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hm-pickup-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* min-height is shared by text + skeleton rows so both keep the same line rhythm
       (a text row is ~17px; the thin skeleton bars stay centered within it). */
    min-height: 17px;
    font-size: 14px;
    color: var(--hm-text-muted);
    white-space: nowrap;
}

.hm-pickup-stat-value {
    color: var(--hm-text);
    font-weight: 600;
}

.hm-pickup-card-err {
    font-size: 13px;
    color: var(--hm-text-muted);
}

/* Skeleton placeholders while the detail is being fetched */
@keyframes hmSkelShimmer {
    0%   { opacity: 0.55; }
    50%  { opacity: 1; }
    100% { opacity: 0.55; }
}

.hm-skel {
    display: inline-block;
    height: 12px;
    border-radius: 6px;
    background: var(--hm-bg-tertiary);
    animation: hmSkelShimmer 1.2s ease-in-out infinite;
}

.hm-skel--label { width: 74px; }
.hm-skel--value { width: 40px; }

/* KPI grid skeleton — matches .hm-kpi-card label + 32px value block */
.hm-kpi-card--skel .hm-skel {
    display: block;
}

.hm-skel--kpi-label {
    width: 56px;
    height: 14px;
    margin-bottom: 8px;
}

.hm-skel--kpi-value {
    width: 88px;
    height: 30px;
}

/* Neighborhoods-list skeleton — matches the name/zip + right-aligned stats layout */
.hm-zone-row--skel {
    cursor: default;
}

.hm-zone-row--skel .hm-zone-row-id .hm-skel {
    display: block;
}

.hm-skel--zone-name {
    width: 140px;
    height: 16px;
    margin-bottom: 7px;
}

.hm-skel--zone-zip {
    width: 84px;
    height: 12px;
}

.hm-skel--zone-stat {
    width: 44px;
    height: 20px;
}

.hm-skel--count {
    width: 16px;
    height: 11px;
    vertical-align: middle;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .hm-layout {
        flex-direction: column;
        height: auto;
        /* the desktop min-height would clip the stacked panel+map (overflow: hidden) */
        min-height: 0;
    }

    .hm-left-panel {
        width: 100%;
        max-height: 380px;
        border-right: none;
        border-bottom: 1px solid var(--hm-border);
    }

    .hm-map-wrap {
        height: 480px;
    }
}