/**
 * Canvas & SVG Rendering Styles
 */
#canvas-workspace {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  user-select: none;
}

#main-svg {
  width: 100%;
  height: 100%;
  display: block;
}

#canvas-world-group {
  will-change: transform;
  transform-origin: 0 0;
  backface-visibility: hidden;
}

/* Base Canvas Paper Graphic - Optimized for 60fps pan/zoom */
.canvas-paper {
  fill: #ffffff;
  stroke: #cbd5e1;
  stroke-width: 1.5px;
}

/* ==================== SCHEMATIC STYLES ==================== */
.schematic-component {
  cursor: grab;
  transition: opacity 0.1s ease;
}

.schematic-component:active {
  cursor: grabbing;
}

.schematic-component .pin-hitbox {
  cursor: crosshair;
}

.schematic-component .pin-dot {
  transition: transform 0.15s ease, fill 0.15s ease;
}

.schematic-component:hover .pin-dot {
  transform: scale(1.3);
}

.schematic-wire {
  cursor: pointer;
}

.schematic-wire .wire-hitbox {
  cursor: pointer;
  pointer-events: stroke !important;
}

.schematic-wire:hover .wire-main {
  stroke: #2563eb !important;
  stroke-width: 2.8px;
}

.schematic-shape {
  cursor: pointer;
}

.schematic-text {
  cursor: pointer;
}

/* Selection Indicators */
.selected {
  outline: none;
}

/* ==================== BREADBOARD STYLES ==================== */
.bb-hole-socket {
  cursor: crosshair;
}

.bb-hole-socket:hover .bb-hole-halo {
  opacity: 0.6;
}

.bb-hole-halo {
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.bb-component {
  cursor: grab;
}

.bb-component:active {
  cursor: grabbing;
}

.bb-component.selected {
  filter: drop-shadow(0 0 4px #3b82f6);
}

.bb-jumper-wire {
  cursor: pointer;
}

.bb-jumper-wire:hover {
  filter: brightness(1.2);
}

.bb-jumper-wire.selected {
  filter: drop-shadow(0 0 6px #3b82f6);
}

/* Wire preview on drag/click */
#wire-preview-path, #bb-wire-preview {
  pointer-events: none;
  animation: dash 1s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -16;
  }
}