:root {
  color-scheme: light;
  --navy: #12243a;
  --ink: #192b3e;
  --muted: #64758a;
  --line: #dce4eb;
  --paper: #ffffff;
  --canvas: #f4f7f8;
  --stopped: #c83f46;
  --potential: #d58b1a;
  --regular: #138365;
  --insufficient: #8191a2;
  --inactive: #5f6078;
  --trend: #7755b0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { color: var(--ink); background: var(--canvas); font: 14px/1.42 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #84b9ea; outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, a { -webkit-tap-highlight-color: transparent; }

.app-shell { display: flex; flex-direction: column; height: 100dvh; min-height: 650px; }
.topbar { z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 12px 24px; background: var(--navy); color: white; box-shadow: 0 3px 14px #14283b24; }
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark { display: flex; align-items: flex-end; gap: 3px; width: 41px; height: 41px; padding: 10px 8px; border: 1px solid #ffffff35; border-radius: 11px; background: #ffffff13; }
.brand-mark span { flex: 1; border-radius: 3px 3px 1px 1px; background: #59d3a7; }
.brand-mark span:nth-child(1) { height: 39%; }
.brand-mark span:nth-child(2) { height: 68%; }
.brand-mark span:nth-child(3) { height: 100%; background: #f1b856; }
.eyebrow, .section-caption { display: block; margin: 0; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: #9fb7ca; margin-bottom: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: 21px; line-height: 1.15; letter-spacing: -.028em; }
h2 { margin: 3px 0 0; font-size: 25px; line-height: 1.16; letter-spacing: -.04em; }
h3 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.02em; }
.topbar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.snapshot { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; color: #bed0dc; font-size: 11px; white-space: nowrap; }
.snapshot-dot { width: 7px; height: 7px; border-radius: 50%; background: #4fc79a; box-shadow: 0 0 0 3px #4fc79a28; }
.topbar-link { padding: 7px 10px; border: 1px solid #ffffff3b; border-radius: 7px; color: #eef7fb; text-decoration: none; font-size: 11px; font-weight: 700; white-space: nowrap; }
.topbar-link:hover { background: #ffffff18; }

.workspace { display: grid; grid-template-columns: minmax(370px, 430px) minmax(0, 1fr); flex: 1; min-height: 0; }
.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--paper); border-right: 1px solid var(--line); box-shadow: 5px 0 18px #12243a12; z-index: 500; }
.sidebar-head { padding: 18px 20px 15px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.sidebar .section-caption { color: #73849a; }
.view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 10px; border-radius: 10px; background: #e8eef2; }
.view-button { min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: #566a7d; font-weight: 760; }
.view-button.is-active { background: white; color: var(--navy); box-shadow: 0 2px 6px #182d4226; }
.view-button span { margin-left: 3px; color: #7a8a9a; font-size: 11px; }
.focus-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
.focus-chip { min-width: 0; min-height: 31px; padding: 5px 7px; border: 1px solid #cdd9e3; border-radius: 7px; background: white; color: #455c71; font-size: 11px; font-weight: 750; }
.focus-chip:hover, .focus-chip.is-active { border-color: #577d9e; background: #eaf3f9; color: #173d5d; }
.sidebar-scroll { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.summary-panel, .controls-panel, .results-panel { padding: 17px 20px; border-bottom: 1px solid var(--line); }
.summary-panel { background: linear-gradient(158deg, #ffffff, #f7fafb); }
.summary-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.view-subtitle { color: #75869a; font-size: 11px; text-align: right; white-space: nowrap; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 15px; }
.kpi { min-height: 68px; padding: 10px 8px; border: 1px solid #e0e8ee; border-radius: 9px; background: white; }
.kpi span { display: block; color: #63778b; font-size: 10px; font-weight: 680; line-height: 1.1; }
.kpi strong { display: block; margin-top: 7px; color: #1b3147; font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.kpi-stopped { border-color: #f1cfd0; background: #fff9f9; }
.kpi-stopped strong { color: var(--stopped); }
.kpi-trend { border-color: #e4d8f3; background: #fcfaff; }
.kpi-trend strong { color: var(--trend); }
.scope-note { margin: 12px 0 0; color: #6c7e8e; font-size: 11px; line-height: 1.4; }
.control-heading, .results-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.control-actions { display: flex; align-items: center; gap: 12px; }
.clear-button { padding: 0; border: 0; background: transparent; color: #216a96; font-size: 11px; font-weight: 800; }
.clear-button:hover { text-decoration: underline; }
.advanced-filters[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; color: #4c6278; font-size: 11px; font-weight: 720; }
.field input, .field select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #cfdae4; border-radius: 7px; background: white; color: #233b50; font-size: 12px; font-weight: 500; }
.field input::placeholder { color: #91a0ad; }
.select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.control-line { display: flex; align-items: flex-end; gap: 10px; }
.metric-field { flex: 0 0 155px; }
.decline-toggle { display: flex; align-items: center; gap: 6px; min-height: 36px; color: #6c518f; font-size: 10px; font-weight: 800; cursor: pointer; }
.decline-toggle input { margin: 0; accent-color: var(--trend); }
.decline-toggle-visible { min-height: 29px; margin-top: 8px; padding: 4px 7px; border: 1px solid #e5d9f0; border-radius: 6px; background: #fbf8ff; }
.status-heading { display: flex; justify-content: space-between; margin-top: 15px; color: #4d6175; font-size: 11px; font-weight: 800; }
.status-heading span { color: #95a2af; font-size: 10px; font-weight: 600; }
.status-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.status-filter { display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 6px 8px; border: 1px solid #dce5eb; border-radius: 7px; background: white; color: #4b6176; font-size: 11px; text-align: left; font-weight: 680; }
.status-filter:hover, .status-filter.is-active { border-color: #6b95b1; background: #edf6fa; color: #173b58; }
.status-filter:first-child { grid-column: 1 / -1; }
.status-filter b { margin-left: auto; color: #6c7d8e; font-size: 10px; }
.status-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.status-filter-all .status-dot { background: conic-gradient(var(--stopped) 0 25%, var(--regular) 25% 50%, var(--potential) 50% 75%, var(--insufficient) 75%); }
.results-panel { padding-top: 15px; }
.results-description { margin: 6px 0 13px; color: #728498; font-size: 11px; }
.result-group { margin-top: 12px; }
.result-group:first-child { margin-top: 0; }
.group-title { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #52677a; font-size: 11px; font-weight: 800; }
.group-title span:last-child { margin-left: auto; color: #8595a5; }
.store-card, .state-card { display: block; width: 100%; padding: 10px 11px; margin-bottom: 6px; border: 1px solid #e0e7ec; border-left: 4px solid var(--status-color, #aab5c1); border-radius: 8px; background: #fff; color: inherit; text-align: left; }
.store-card:hover, .state-card:hover { border-color: #8caac0; background: #fbfdff; }
.store-card.is-selected, .state-card.is-selected { background: #eff7fa; box-shadow: 0 0 0 2px #7cb7cf50; }
.store-card-top, .state-card-top { display: flex; justify-content: space-between; gap: 9px; align-items: flex-start; }
.store-card-name, .state-card-name { color: #20364b; font-size: 12px; font-weight: 800; line-height: 1.2; }
.store-card-code { color: #8a98a5; font-size: 10px; font-weight: 750; white-space: nowrap; }
.store-card-meta, .state-card-meta { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 6px; color: #6c8092; font-size: 10px; }
.status-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; padding: 3px 5px; color: var(--status-color); background: var(--status-bg); font-size: 10px; font-weight: 800; }
.trend-badge { border-radius: 5px; padding: 3px 5px; color: #704da1; background: #f2eafa; font-size: 10px; font-weight: 800; }
.store-card-bottom, .state-card-bottom { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: #536a7d; font-size: 10px; }
.store-card-bottom strong, .state-card-bottom strong { color: #1d3b54; font-size: 12px; }
.empty-results { padding: 17px; border: 1px dashed #cad7e1; border-radius: 8px; color: #738598; font-size: 12px; }

.map-pane { position: relative; min-width: 0; min-height: 0; background: #e6eef0; }
#map { width: 100%; height: 100%; background: #e6eef0; }
.leaflet-tile-pane { filter: saturate(.55) contrast(.95) brightness(1.025); }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 9px !important; }
.leaflet-control-zoom a { color: #254259 !important; }
.map-location-card, .map-legend, .map-footnote { position: absolute; z-index: 600; border: 1px solid #dce5e9; background: #ffffffed; box-shadow: 0 5px 20px #1c3b4f1c; backdrop-filter: blur(8px); }
.map-location-card { top: 17px; left: 17px; display: flex; flex-direction: column; gap: 3px; min-width: 190px; max-width: 260px; padding: 11px 13px; border-radius: 9px; }
.map-location-card .section-caption { color: #7e91a0; }
.map-location-card strong { color: #1e3850; font-size: 16px; line-height: 1.2; }
.map-location-card > span:last-child { color: #6e8192; font-size: 11px; }
.map-legend { right: 17px; bottom: 44px; width: 210px; border-radius: 10px; }
.map-legend:not([open]) { width: max-content; }
.legend-toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; color: #21394d; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; white-space: nowrap; }
.legend-toggle::-webkit-details-marker { display: none; }
.legend-toggle::after { content: ''; width: 6px; height: 6px; flex: none; margin-left: auto; border-right: 2px solid #72879a; border-bottom: 2px solid #72879a; transform: rotate(45deg); }
.map-legend[open] .legend-toggle::after { transform: rotate(225deg); }
.legend-toggle:focus-visible { outline: 3px solid #84b9ea; outline-offset: -3px; border-radius: 8px; }
.legend-swatches { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; }
.legend-swatch { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.legend-content { padding: 0 12px 10px; }
.legend-unit { margin-bottom: 3px; color: #8798a5; font-size: 10px; }
.legend-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #4b6477; font-size: 11px; }
.legend-row b { margin-left: auto; color: #254157; font-size: 10px; }
.legend-dot { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1px #aebcc6; }
.legend-note { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #e4e9ed; color: #788b9b; font-size: 10px; line-height: 1.4; }
.map-footnote { left: 17px; bottom: 14px; max-width: min(510px, calc(100% - 255px)); padding: 7px 10px; border-radius: 7px; color: #6d7d8b; font-size: 10px; }
.map-message { position: absolute; z-index: 700; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 420px; padding: 15px 18px; border-radius: 9px; background: white; color: #7d3d35; box-shadow: 0 8px 30px #132e4440; }
.map-message[hidden] { display: none; }

.activity-pin { background: transparent; border: 0; }
.pin-core { display: block; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--status-color); box-shadow: 0 2px 7px #0d273d6b, 0 0 0 1px #12243a1c; }
.activity-pin.is-selected .pin-core { box-shadow: 0 0 0 5px #254c7755, 0 2px 7px #0d273d80; transform: scale(1.2); }
.activity-pin.status-stopped .pin-core { width: 27px; height: 27px; border-width: 4px; box-shadow: 0 0 0 4px #c83f4636, 0 2px 9px #0d273d75; }
.activity-pin.status-potential .pin-core { width: 25px; height: 25px; border-width: 4px; box-shadow: 0 0 0 4px #d58b1a35, 0 2px 9px #0d273d75; }
.pin-label { position: absolute; top: -5px; left: 29px; padding: 3px 6px; border: 1px solid #e2e8ec; border-radius: 5px; background: #fffffff2; color: #a9272e; font-size: 10px; font-weight: 830; white-space: nowrap; box-shadow: 0 2px 8px #162e3f30; }
.activity-cluster { background: transparent; }
.cluster-core { display: grid; place-items: center; width: 41px; height: 41px; border: 4px solid white; border-radius: 50%; background: var(--cluster-color); color: white; font-size: 12px; font-weight: 850; box-shadow: 0 2px 11px #122f4366; }
.state-area-pin { background: transparent; border: 0; }
.state-area-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 43px; width: max-content; min-height: 32px; padding: 3px 5px; border: 1.5px solid var(--state-color); border-radius: 6px; background: #fffffff2; color: #244055; line-height: 1.05; text-align: center; box-shadow: 0 2px 7px #112d4250; }
.state-area-tag span { font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.state-area-tag strong { margin-top: 2px; font-size: 11px; font-weight: 850; }
.state-area-pin.is-selected .state-area-tag { background: var(--state-color); color: white; box-shadow: 0 0 0 3px #ffffffa8, 0 2px 8px #112d425a; }
.leaflet-popup-content-wrapper { border-radius: 10px; }
.leaflet-popup-content { min-width: 230px; max-width: 280px; margin: 14px 16px; }
.popup-heading { margin: 0 20px 2px 0; color: #1d354b; font-size: 15px; line-height: 1.25; }
.popup-location { margin: 0 0 10px; color: #687e90; font-size: 11px; }
.popup-status { display: inline-block; padding: 4px 7px; border-radius: 5px; color: var(--status-color); background: var(--status-bg); font-size: 11px; font-weight: 800; }
.popup-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.popup-metrics > div { padding: 7px; border: 1px solid #e2e9ec; border-radius: 6px; }
.popup-metrics small { display: block; color: #798c99; font-size: 9px; }
.popup-metrics strong { color: #223d52; font-size: 14px; }
.popup-note { margin: 9px 0 0; color: #6a7e8d; font-size: 10px; }
.popup-link { display: inline-block; margin-top: 10px; color: #246e9a; font-size: 11px; font-weight: 750; text-decoration: none; }
.popup-link:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .workspace { grid-template-columns: minmax(340px, 390px) minmax(0, 1fr); }
  .topbar { padding-inline: 16px; }
  .topbar-link { display: none; }
  .map-footnote { display: none; }
}
@media (max-width: 720px) {
  .app-shell { height: auto; min-height: 100dvh; }
  .topbar { min-height: 69px; }
  h1 { font-size: 18px; }
  .snapshot { font-size: 10px; }
  .workspace { display: flex; flex-direction: column; }
  .map-pane { order: 0; height: clamp(480px, 68dvh, 700px); }
  .sidebar { order: 1; min-height: 0; }
  .sidebar-scroll { overflow: visible; }
  .map-location-card { top: 10px; left: 10px; padding: 8px 10px; min-width: 150px; }
  .map-legend { right: auto; left: 10px; bottom: 14px; width: 210px; max-width: calc(100% - 20px); }
  .map-legend[open] { max-height: min(72%, 340px); overflow-y: auto; }
  .legend-toggle { min-height: 42px; padding: 9px 11px; }
  .legend-row { padding: 2px 0; font-size: 10px; }
}