/* Store Performance Map — d3 SVG choropleth (April 2026 rewrite).
   No Leaflet selectors. Layout for the host, the legend, the side panel,
   the hover tooltip, and the in-SVG label/callout chrome. */

/* ── Host & SVG ───────────────────────────────────────────────────────── */
/* Inherit height from .chart-wrap so the map and the trend chart card render
   at identical heights via the .charts-row grid (no min-height override). */
#storeMap {
  height: 100%; width: 100%;
  border-radius: 8px;
  background: #fafaf7;
  position: relative;
  overflow: hidden;
}
#storeMap .map-svg {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* ── Card-head sizing tweaks (defers to segmented-pills.css for the
       pill / chip surfaces themselves) ────────────────────────────────── */
/* Single-row layout: title + seg-group + metric-row stay on ONE line at
   any viewport. The metric-row is the flexible piece — it shrinks first
   and scrolls horizontally if the chips don't fit (scrollbar hidden, the
   bar itself fades at the edges via component padding). min-height pins
   the head to the same height across cards regardless of chip count, so
   the chart-wrap below starts at the same Y in every chart-card. */
.card-head { padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid #f3f4f6;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0;
  min-height: 36px; box-sizing: content-box; }
.card-head h3 {
  margin: 0; flex-shrink: 0; margin-right: auto;
  font-size: 14px; font-weight: 600; color: var(--navy);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.card-head .seg-group { flex-shrink: 0; }
.card-head .seg-group .seg-btn { padding: 3px 8px; font-size: 10px; }
.card-head .metric-row {
  flex: 0 1 auto; min-width: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
}
.card-head .metric-row .metric-chip { padding: 2px 7px; font-size: 10px; flex-shrink: 0; }
.card-head .metric-row::-webkit-scrollbar { display: none; }

/* Force grid columns to honor 1fr 1fr literally. Without min-width:0, grid
   items default to min-width:auto which respects the content's intrinsic
   min-content size. The map's metric chips ("Net sales vs LY", etc.) have
   longer text than the trend chart's chips ("Net Sales"), so the map card
   reports a bigger min-content and the grid gives it a wider column at the
   trend chart's expense. min-width:0 unties that. */
.charts-row > .chart-card { min-width: 0; }

/* Belt-and-suspenders: align both cards explicitly even though grid stretch
   is the default for align-items. */
.chart-card:has(#storeMap),
.chart-card:has(#trendChart) {
  align-self: stretch;
}

/* ── Recenter button (top-right overlay) ──────────────────────────────── */
.map-recenter-btn {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  background: #fff; border: 0.5px solid #d1d5db; border-radius: 999px;
  padding: 5px 12px; font-size: 11px; font-weight: 500; color: #475569;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-family: var(--font-stack);
  transition: background 0.15s, border-color 0.15s;
}
.map-recenter-btn:hover { background: #f1f5f9; border-color: #94a3b8; }

/* ── Zoom +/- buttons (top-right, below Recenter) ────────────────────── */
.map-zoom-stack {
  position: absolute; top: 48px; right: 12px; z-index: 10;
  display: flex; flex-direction: column; gap: 4px;
}
.map-zoom-btn {
  width: 28px; height: 28px;
  background: #fff; border: 0.5px solid #d1d5db; border-radius: 6px;
  font-size: 16px; font-weight: 500; line-height: 1; color: #475569;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  font-family: var(--font-stack);
  transition: background 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.map-zoom-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.map-zoom-btn:active { background: var(--icy-blue); }

/* ── Legend (bottom-left overlay) ─────────────────────────────────────── */
.map-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 10;
  background: rgba(255,255,255,0.96); border: 0.5px solid #d1d5db; border-radius: 8px;
  padding: 7px 12px; font-size: 11px; font-family: var(--font-stack);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.map-legend .ml-label { color: var(--navy); font-weight: 500; }
.map-legend .ml-bar { display: inline-block; width: 110px; height: 8px; border-radius: 4px; border: 0.5px solid rgba(0,0,0,0.1); }
.map-legend .ml-min, .map-legend .ml-max { font-size: 10px; color: #6b7280; }

/* ── Hover tooltip (rendered into <body>, positioned by JS) ──────────── */
.map-store-tip {
  position: absolute; z-index: 10000;
  background: #fff; border: 0.5px solid #d1d5db; border-radius: 10px;
  padding: 8px 12px; min-width: 180px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: var(--font-stack); font-size: 12px; color: #1e293b;
  pointer-events: none;
}
.map-store-tip .mst-name { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.map-store-tip .mst-meta { font-size: 11px; color: #6b7280; margin-bottom: 6px; }
.map-store-tip .mst-stat {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; padding: 1px 0;
}
.map-store-tip .mst-stat span:first-child { color: #6b7280; }
.map-store-tip .mst-stat span:last-child  { color: var(--navy); font-weight: 500; }
.map-store-tip .pos { color: #2d6a4a; }
.map-store-tip .neg { color: #b85547; }

/* ── Side panel (slides over the right side of the map on click) ─────── */
.map-side-panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 12;
  width: 232px;
  background: #fff; border: 0.5px solid #d1d5db; border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  font-family: var(--font-stack);
  overflow-y: auto;
  box-sizing: border-box;
}
.map-side-panel[hidden] { display: none; }

.msp-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px;
  background: transparent; border: none;
  font-size: 18px; line-height: 1; color: #94a3b8;
  cursor: pointer; border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.msp-close:hover { background: #f1f5f9; color: #475569; }

.msp-eyebrow {
  font-size: 10px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.msp-title {
  font-size: 16px; font-weight: 600; color: var(--navy);
  margin: 0 0 4px; line-height: 1.2;
}
.msp-sub { font-size: 11px; color: #6b7280; margin-bottom: 14px; }

.msp-headline { font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1; }
.msp-headline-sub { font-size: 12px; margin: 6px 0 14px; }
.msp-headline-sub.pos { color: #2d6a4a; }
.msp-headline-sub.neg { color: #b85547; }

.msp-table { width: 100%; font-size: 12px; border-collapse: collapse; margin-bottom: 4px; }
.msp-table td { padding: 4px 0; }
.msp-table td:first-child { color: #6b7280; }
.msp-table td:last-child  { text-align: right; font-weight: 500; color: var(--navy); }

.msp-section-label {
  font-size: 10px; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 12px 0 4px;
}
.msp-list-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 2px 0; color: var(--navy);
}
.msp-list-row .pos { color: #2d6a4a; font-weight: 500; }
.msp-list-row .neg { color: #b85547; font-weight: 500; }

/* ── In-SVG element classes (set by d3.attr('class', …)) ──────────────── */
.map-svg .state-base   { /* fill set inline */ }
.map-svg .territory    { transition: fill 200ms; }
.map-svg .territory:hover { fill-opacity: 0.92; }
.map-svg .state-line   { /* stroke set inline */ }
.map-svg .terr-mesh    { /* stroke set inline */ }
.map-svg .store-dot    { transition: r 200ms, fill 200ms; }
.map-svg .store-dot:hover { stroke-width: 2.4; }
.map-svg .territory-label { /* positioned by transform */ }
.map-svg .map-callout  { /* anchored by transform on inner g */ }