.map-panel { position: relative; background: #05070a; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); overflow: hidden; flex: 1; min-height: 220px; box-shadow: var(--shadow-sm); }
.map-panel canvas { display: block; width: 100%; height: 100%; }

.map-toolbar {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: flex; gap: 8px; z-index: 5;
}
.map-toolbar .input {
  background: rgba(18,21,28,0.92); border: 1px solid var(--border-strong); font-size: 12px; padding: 8px 11px;
  box-shadow: var(--shadow-sm);
}
.map-toolbar #map-search { flex: 1; }
.map-legend-title {
  font-size: 9.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px;
  padding-bottom: 4px; margin-bottom: 3px; border-bottom: 1px solid var(--border-soft);
}
.map-zoom { position: absolute; bottom: 12px; right: 12px; display: flex; flex-direction: column; gap: 5px; z-index: 5; }
.map-zoom button {
  width: 30px; height: 30px; background: rgba(19,21,33,0.94); border: 1px solid rgba(255,255,255,0.16);
  color: #eceef5; border-radius: var(--radius-xs); cursor: pointer; font-size: 14px; line-height: 1;
  transition: background 0.12s ease;
  box-shadow: var(--shadow-sm);
}
.map-zoom button:hover { background: rgba(40,44,64,0.98); border-color: var(--accent-border); }
.map-zoom #map-recenter { font-size: 13px; margin-top: 3px; border-top: 1px solid var(--border-soft); padding-top: 2px; }

.map-compass {
  position: absolute; top: 12px; z-index: 5; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(18,21,28,0.88); border: 1px solid var(--border-strong);
  color: var(--text-1); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; user-select: none;
  box-shadow: var(--shadow-sm);
}
.map-compass::before {
  content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent;
  border-bottom: 4px solid var(--chrome, #7fa1ff);
}

.map-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 5;
  background: rgba(19,21,33,0.94); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-sm);
  padding: 9px 11px; font-size: 10.5px; color: #b4b9cc; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.map-legend-row { display: flex; align-items: center; gap: 7px; }
.map-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.map-tooltip {
  position: absolute; pointer-events: none; z-index: 6;
  background: rgba(18,21,28,0.97); border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  padding: 7px 10px; font-size: 11px; color: var(--text-0);
  white-space: nowrap; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translate(-50%, -122%);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.map-tooltip.visible { opacity: 1; visibility: visible; transform: translate(-50%, -130%); }

/* Call + unit popups - both styled like an in-world map callout (light
   card, colored left rail, labeled fields) rather than the MDT's own dark
   theme. Call is a warm cream card keyed to the call's priority; unit is
   a grey card keyed to the unit's on-duty status color. --mt-accent is
   set inline per-target in map.js. */
.map-tooltip-call,
.map-tooltip-unit {
  color: #1e2024;
  border: none;
  border-left: 4px solid var(--mt-accent, #8a8d94);
  border-radius: 4px;
  padding: 9px 13px 10px;
  white-space: normal;
  min-width: 190px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.map-tooltip-call { background: #f2efe6; }
.map-tooltip-unit { background: #d9dbe0; }
.map-tooltip-call .mt-callhead, .map-tooltip-unit .mt-callhead { font-weight: 700; font-size: 12.5px; }
.map-tooltip-call .mt-calltitle { font-size: 12px; margin: 1px 0 5px; }
.map-tooltip-call .mt-callrow, .map-tooltip-unit .mt-callrow { font-size: 11px; color: #33343a; }
.map-tooltip-call .mt-callrow span, .map-tooltip-unit .mt-callrow span { font-weight: 600; color: #202124; }