/* ══════════════════════════════════════════════════════════════
   TERAGEST DEV — Map View
   ══════════════════════════════════════════════════════════════ */

#map-container {
  flex: 1; position: relative; background: var(--surface2);
}
#map-canvas {
  width: 100%; height: 100%;
}
#map-controls {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
}
#map-controls button {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 16px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh); transition: all .15s;
}
#map-controls button:hover { border-color: var(--accent); color: var(--accent); }

#map-legend {
  position: absolute; bottom: 10px; left: 10px; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-family: var(--mono); font-size: 9px; color: var(--text2);
  box-shadow: var(--sh); display: flex; flex-direction: column; gap: 4px;
}
.map-legend-item { display: flex; align-items: center; gap: 6px; }
.map-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

#map-search {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  display: flex; gap: 6px; align-items: center;
}
#map-search input {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 11px; font-family: var(--sans);
  outline: none; width: 200px; box-shadow: var(--sh);
}
#map-search input:focus { border-color: var(--accent); }

/* Map info popup */
.map-popup {
  position: absolute; z-index: 10; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; box-shadow: var(--sh); max-width: 280px;
  font-family: var(--mono); font-size: 10px;
}
.map-popup .popup-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.map-popup .popup-detail { color: var(--text3); font-size: 9px; }
.map-popup .popup-close {
  position: absolute; top: 4px; right: 6px; cursor: pointer; color: var(--text3);
  font-size: 14px; background: none; border: none;
}

/* Map fallback when no API key */
.map-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; color: var(--text3); font-family: var(--mono); font-size: 11px;
}
.map-fallback-icon { font-size: 48px; opacity: .3; }