/* ═══════════════════════════════════════════════════════ */
/* US Coverage Map — Light Theme                          */
/* ═══════════════════════════════════════════════════════ */

.map-page { display: flex; flex-direction: column; gap: 1.5rem; }
.map-stats-bar { display: flex; gap: 1rem; flex-wrap: wrap; }
.map-stat-card { flex: 1; min-width: 160px; padding: 0.875rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
.map-stat-value { font-size: 1.375rem; font-weight: 700; }
.map-stat-label { font-size: 0.6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* Coverage Progress */
.map-coverage-bar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.map-coverage-label { font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.map-coverage-bar .progress-bar { flex: 1; }
.map-coverage-pct { font-size: 0.875rem; font-weight: 700; color: var(--accent-blue); white-space: nowrap; }

/* Search */
.map-search { margin-bottom: 1rem; }
.map-search input { width: 100%; max-width: 300px; }

.map-container { display: flex; gap: 1.5rem; }
.us-map-wrapper { flex: 1; position: relative; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); }
.us-map-wrapper svg { width: 100%; height: auto; }
.us-map-wrapper svg path.state-path {
  fill: #e2e8f0; stroke: #fff; stroke-width: 1.5;
  cursor: pointer; transition: all var(--transition-normal);
}
.us-map-wrapper svg path.state-path.covered { fill: #10b981; }
.us-map-wrapper svg path.state-path.covered:hover { fill: #059669; filter: brightness(1.05); }
.us-map-wrapper svg path.state-path.hot { fill: #059669; }
.us-map-wrapper svg path.state-path.warm { fill: #34d399; }
.us-map-wrapper svg path.state-path.partial { fill: #fbbf24; }
.us-map-wrapper svg path.state-path.partial:hover { fill: #f59e0b; }
.us-map-wrapper svg path.state-path.cold { fill: #93c5fd; }
.us-map-wrapper svg path.state-path.untouched { fill: #e2e8f0; }
.us-map-wrapper svg path.state-path.untouched:hover { fill: #cbd5e1; }
.us-map-wrapper svg path.state-path.selected { stroke: var(--accent-blue); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(79,70,229,0.3)); }

/* Tooltip */
.map-tooltip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.75rem 1rem;
  box-shadow: var(--shadow-lg); animation: fadeIn 0.1s ease;
  max-width: 220px;
}
.map-tooltip-name { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.map-tooltip-count { font-size: 0.75rem; color: var(--text-secondary); }
.map-tooltip-niches { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Legend */
.map-legend { display: flex; gap: 1.5rem; align-items: center; justify-content: center; padding: 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.map-legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-secondary); }
.map-legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.map-legend-dot.hot { background: #059669; }
.map-legend-dot.covered { background: var(--accent-emerald); }
.map-legend-dot.warm { background: #34d399; }
.map-legend-dot.partial { background: #fbbf24; }
.map-legend-dot.cold { background: #93c5fd; }
.map-legend-dot.untouched { background: #e2e8f0; }

/* Sidebar Detail */
.map-sidebar {
  width: 320px; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 1.25rem;
  max-height: 550px; overflow-y: auto; box-shadow: var(--shadow-sm);
}
.map-sidebar-header { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); }
.map-sidebar-state { font-size: 1.25rem; font-weight: 700; }
.map-sidebar-count { font-size: 0.875rem; color: var(--text-secondary); }
.map-sidebar-section { margin-bottom: 1rem; }
.map-sidebar-section h5 { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; }
.map-sidebar-list { list-style: none; }
.map-sidebar-list li { padding: 0.375rem 0; font-size: 0.8125rem; display: flex; justify-content: space-between; }

/* Leaderboard */
.map-leaderboard { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.map-leaderboard h4 { margin-bottom: 0.75rem; font-size: 0.9375rem; }
.leaderboard-state-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); }
.leaderboard-state-item:last-child { border-bottom: none; }
.leaderboard-state-rank { width: 24px; font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); }
.leaderboard-state-rank.gold { color: #f59e0b; }
.leaderboard-state-rank.silver { color: #94a3b8; }
.leaderboard-state-rank.bronze { color: #d97706; }
.leaderboard-state-name { flex: 1; font-size: 0.8125rem; font-weight: 500; }
.leaderboard-state-count { font-size: 0.8125rem; font-weight: 600; color: var(--accent-blue); }

/* Suggestions */
.map-suggestion-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.map-suggestion-panel h4 { margin-bottom: 0.75rem; }
.suggestion-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.8125rem; border-bottom: 1px solid var(--border-color); }
.suggestion-item:last-child { border-bottom: none; }
.suggestion-icon { font-size: 1rem; flex-shrink: 0; }

@media (max-width: 1024px) {
  .map-container { flex-direction: column; }
  .map-sidebar { width: 100%; }
}

/* Non-US Grid & State Cards */
.non-us-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  max-height: 500px;
  overflow-y: auto;
  padding: 0.5rem;
}
.map-state-card-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  background: var(--bg-card);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.map-state-card-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--text-muted);
}
.map-state-card-item.selected {
  border-color: var(--accent-blue) !important;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.25) !important;
}
.map-state-card-item.hot { border-left: 5px solid #059669; }
.map-state-card-item.covered { border-left: 5px solid var(--accent-emerald); }
.map-state-card-item.warm { border-left: 5px solid #34d399; }
.map-state-card-item.partial { border-left: 5px solid #fbbf24; }
.map-state-card-item.untouched { border-left: 5px solid #cbd5e1; }