/* Union Events Map - Marker Styles */

.marker {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  z-index: 10;
  user-select: none;
  pointer-events: auto;
}

.marker:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.marker.selected {
  transform: translate(-50%, -50%) scale(1.25);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--primary), 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 30;
}

.marker.multi-selected {
  transform: translate(-50%, -50%) scale(1.15);
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--warning), 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 25;
}

.marker.dragging {
  opacity: 0.8;
  cursor: grabbing;
  z-index: 100;
}

.marker.hidden {
  display: none;
}

.marker.highlight {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 8px transparent; }
}

/* Marker icons */
.marker svg {
  width: 60%;
  height: 60%;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Category colors - default set */
.marker[data-category="network"] { background: var(--cat-network); }
.marker[data-category="camera"] { background: var(--cat-camera); }
.marker[data-category="fire"] { background: var(--cat-fire); }
.marker[data-category="audio"] { background: var(--cat-audio); }
.marker[data-category="security"] { background: var(--cat-security); }
.marker[data-category="signage"] { background: var(--cat-signage); }
.marker[data-category="power"] { background: var(--cat-power); }
.marker[data-category="lighting"] { background: var(--cat-lighting); }
.marker[data-category="door"] { background: var(--cat-door); }
.marker[data-category="video"] { background: var(--cat-video); }

/* Multi-select box */
.selection-box {
  display: none;
  position: absolute;
  border: 2px dashed var(--primary);
  background: rgba(59, 130, 246, 0.15);
  pointer-events: none;
  z-index: 50;
}

/* Add marker mode */
.map-box.add-mode {
  cursor: crosshair;
}

.map-box.add-mode .marker {
  pointer-events: none;
}

/* Marker placement preview */
.marker-preview {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  pointer-events: none;
  border: 2px dashed var(--primary);
  background: rgba(59, 130, 246, 0.3);
}

/* Draggable device card (for nmap import) */
.device-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: all 0.15s;
}

.device-card:hover {
  border-color: var(--primary);
}

.device-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.device-card .ip {
  font-family: monospace;
  font-size: 12px;
  font-weight: 600;
}

.device-card .mac {
  font-family: monospace;
  font-size: 10px;
  color: var(--text-muted);
}

.device-card .hostname {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.device-card .services {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.device-card .service-tag {
  font-size: 9px;
  padding: 2px 6px;
  background: var(--bg);
  border-radius: 3px;
  color: var(--text-muted);
}

/* Drop target indicator (for nmap device assignment) */
.marker.drop-target {
  transform: translate(-50%, -50%) scale(1.4);
  box-shadow: 0 0 0 4px var(--success), 0 0 20px var(--success);
  z-index: 1000;
}