#canvas-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  cursor: grab;
}

#canvas-viewport:active {
  cursor: grabbing;
}

#canvas-content {
  position: absolute;
  width: 693px;
  height: 603px;
  transform-origin: 0 0;
  will-change: transform;
}

.canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let clicks pass through if needed, though canvas handles drag */
}

/* Background image layer */
#canvas-bg-layer {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  filter: brightness(0.3) saturate(0.85); /* Dim image to make glowing overlay pins clearly visible */
}

/* Grid overlay layer to enhance depth perception when panning/zooming */
#canvas-grid-layer {
  display: none;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 2;
}

#canvas-grid-layer.visible {
  display: block;
}

/* Base style for elements added as layers later */
.canvas-custom-layer {
  z-index: 10;
  pointer-events: auto;
}