/* ============================================================================
 * DATA-DROP — css/20-overlay.css
 * The floorplan overlay engine: pan/zoom stage, floor image, SVG element layer.
 * Blueprint aesthetic: dark drawing area, crisp high-contrast marks, big hits.
 * OWNED by the overlay agent.
 * ==========================================================================*/

/* ---- drawing surface (host passed to DDOverlay.init) --------------------- */
.dd-overlay-host {
  position: absolute;
  inset: 48px 0 0 0;              /* leave 48px chrome bar clearance */
  overflow: hidden;
  background-color: #0c1626;
  /* faint blueprint grid so an image-less floor still reads as a canvas */
  background-image:
    linear-gradient(rgba(90, 150, 220, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 150, 220, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(90, 150, 220, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 150, 220, 0.05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.dd-overlay-host:active { cursor: grabbing; }

/* the transformed pan/zoom layer (transform set inline by JS) */
.dd-stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* floor background image */
.dd-floor-img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;         /* clicks handled by host/SVG, not the img */
  -webkit-user-drag: none;
  user-select: none;
  image-rendering: auto;
  background: #0f1c30;
}

/* SVG element overlay, sized to natural image px, sits above the img */
.dd-svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
  pointer-events: none;         /* group elements opt back in below */
}

/* every element group is clickable with a comfortable hit area */
.dd-svg .dd-el {
  pointer-events: auto;
  cursor: pointer;
}

/* ---- generic / fallback element rendering ------------------------------- */
.dd-fallback-pin {
  fill: #1b64f2;
  stroke: #eaf2ff;
  stroke-width: 2;
  paint-order: stroke;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.dd-fallback-num {
  fill: #ffffff;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 3;
  pointer-events: none;
}

/* ---- selection highlight ------------------------------------------------- */
.dd-sel-ring {
  stroke: #ffd21e;              /* high-vis selection yellow */
  stroke-width: 3;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;  /* crisp ring at any zoom */
  animation: dd-sel-spin 1.4s linear infinite;
  pointer-events: none;
}
@keyframes dd-sel-spin { to { stroke-dashoffset: -24; } }

.dd-el.dd-selected { filter: drop-shadow(0 0 6px rgba(255, 210, 30, 0.9)); }

/* keep type-renderer strokes crisp regardless of zoom unless they opt out */
.dd-svg .dd-el [stroke] { }     /* type renderers control their own strokes */