/* ============================================================
   SVG Wiring Editor; Wiring Diagram Styles
   SVG element interactions, highlights, wire tracing
   ============================================================ */

/* ============================================================
   SVG Display
   ============================================================ */
#svgDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    image-rendering: optimizeQuality;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}

#svgDisplay * {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
    transition: none;
}

#svgDisplay text {
    text-rendering: geometricPrecision;
    shape-rendering: crispEdges;
}

/* Interactive SVG elements */
#svgDisplay path,
#svgDisplay line,
#svgDisplay polyline,
#svgDisplay polygon,
#svgDisplay circle,
#svgDisplay ellipse,
#svgDisplay rect {
    transition: stroke 0.25s ease, fill 0.25s ease, filter 0.25s ease;
    cursor: pointer;
}

/* ============================================================
   Wire Tracing
   ============================================================ */
.wire-trace {
    stroke: #ff6b6b !important;
    filter: drop-shadow(0 0 3px rgba(255, 107, 107, 0.7)) !important;
}

@keyframes wire-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* ============================================================
   Component Highlight
   ============================================================ */
.component-highlight {
    fill: rgba(255, 215, 0, 0.35) !important;
    stroke: #ffa500 !important;
}

/* ============================================================
   Wire Hitbox (invisible wider click target over each wire)
   ============================================================ */
.wire-hitbox {
    pointer-events: stroke;
    cursor: pointer;
    stroke-width: 8px;
    stroke-opacity: 0 !important;
    fill: none;
}

/* ============================================================
   Component Hitbox (invisible fill target over each component)
   ============================================================ */
.component-hitbox {
    pointer-events: all;
    cursor: pointer;
    fill-opacity: 0 !important;
    stroke-opacity: 0 !important;
}

/* ============================================================
   Selection
   ============================================================ */
.selected-element {
    stroke: #4facfe !important;
    stroke-width: 2 !important;
}

/* ============================================================
   Dimming (non-active elements)
   ============================================================ */
.dimmed {
    opacity: 0.2 !important;
}

/* ============================================================
   Edit handles (for future edit mode)
   ============================================================ */
.element-editing {
    stroke: #00f2fe !important;
    stroke-width: 2 !important;
    filter: drop-shadow(0 0 5px #00f2fe) !important;
}

.edit-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #4facfe;
    border: 1px solid white;
    border-radius: 50%;
    cursor: move;
    z-index: 2001;
}

.edit-handle.rotate {
    cursor: crosshair;
    background: #00f2fe;
}

/* ============================================================
   Layer panel hover; highlights corresponding SVG element
   ============================================================ */
.layer-hover-highlight:hover path {
    stroke: rgba(79, 172, 254, 0.9);
    stroke-width: 2px;
    paint-order: stroke;
    /* Ensures the stroke is behind the fill */
}

/* ============================================================
   Canvas-mode overlays (PDF, TIFF, raster files)
   Invisible by default; revealed through interaction states.
   Visual layer = rasterized <image>. Interaction layer = SVG overlays.
   ============================================================ */

/* Wire overlays; invisible until highlighted */
.canvas-wire-overlay {
    stroke-opacity: 0;
    fill: none;
    pointer-events: none;
    /* hitbox sibling handles pointer events */
    transition: stroke-opacity 0.2s ease;
}

.canvas-wire-hitbox {
    pointer-events: stroke;
    cursor: pointer;
    stroke-opacity: 0 !important;
}

/* States that reveal the wire overlay on the canvas */
.canvas-wire-overlay.wire-trace {
    stroke-opacity: 0.85 !important;
    stroke: #ff6b6b !important;
    filter: drop-shadow(0 0 4px rgba(255, 107, 107, 0.8)) !important;
}

.canvas-wire-overlay.selected-element {
    stroke-opacity: 0.85 !important;
}

/* Component overlays; transparent bounding boxes */
.canvas-component-overlay {
    fill-opacity: 0;
    stroke-opacity: 0;
    pointer-events: fill;
    cursor: pointer;
    transition: fill-opacity 0.2s ease, stroke-opacity 0.2s ease;
}

.canvas-component-overlay.component-highlight {
    fill: rgba(255, 215, 0, 0.25) !important;
    stroke: #ffa500 !important;
    stroke-width: 2 !important;
    stroke-opacity: 1 !important;
}

.canvas-component-overlay.selected-element {
    stroke: #4facfe !important;
    stroke-width: 2 !important;
    stroke-opacity: 1 !important;
}

/* ============================================================
   File Upload Drop Zone (inside side panel)
   ============================================================ */
.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-input-wrapper input {
    position: absolute;
    left: -9999px;
}

.file-input-wrapper label {
    display: block;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.file-input-wrapper label:hover {
    opacity: 0.88;
}

/* ============================================================
   PHASE 1 — Canvas Engine: Selection & Handles
   ============================================================ */

.selection-rect {
    fill: none;
    stroke: #4facfe;
    stroke-width: 1.5;
    stroke-dasharray: 5, 3;
    pointer-events: none;
}

.selection-handle {
    fill: #1a1a2e;
    stroke: #4facfe;
    stroke-width: 1.5;
    pointer-events: all;
    transition: fill 0.15s ease;
}

.selection-handle:hover {
    fill: #4facfe;
}

.selection-handle[data-handle="n"],
.selection-handle[data-handle="s"] {
    cursor: ns-resize;
}

.selection-handle[data-handle="e"],
.selection-handle[data-handle="w"] {
    cursor: ew-resize;
}

.selection-handle[data-handle="nw"],
.selection-handle[data-handle="se"] {
    cursor: nwse-resize;
}

.selection-handle[data-handle="ne"],
.selection-handle[data-handle="sw"] {
    cursor: nesw-resize;
}

.rotation-line {
    stroke: #4facfe;
    stroke-width: 1;
    stroke-dasharray: 3, 2;
    pointer-events: none;
}

.rotation-handle {
    fill: #00f2fe;
    stroke: #1a1a2e;
    stroke-width: 1.5;
    cursor: crosshair;
    pointer-events: all;
    transition: fill 0.15s ease;
    filter: drop-shadow(0 0 4px rgba(0, 242, 254, 0.5));
}

.rotation-handle:hover {
    fill: #fff;
}

.se-selected {
    filter: drop-shadow(0 0 3px rgba(79, 172, 254, 0.6)) !important;
}

/* ============================================================
   PHASE 1 — SnapGrid: Guide lines
   ============================================================ */
.snap-guide {
    stroke: #4facfe;
    stroke-width: 0.8;
    stroke-dasharray: 4, 4;
    pointer-events: none;
    opacity: 0.6;
}

/* ============================================================
   PHASE 1 — Drawing Tools: Preview ghost
   ============================================================ */
.draw-preview {
    pointer-events: none;
    opacity: 0.7;
    stroke-dasharray: 6, 3;
    animation: draw-preview-pulse 1.2s ease-in-out infinite;
}

@keyframes draw-preview-pulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 0.4;
    }
}

/* ============================================================
   PHASE 1 — Draw tool active state
   ============================================================ */
.draw-tool-btn.active {
    background: rgba(79, 172, 254, 0.35) !important;
    border-color: #4facfe !important;
    color: #4facfe !important;
    box-shadow: 0 0 8px rgba(79, 172, 254, 0.3);
}

.toolbar-sep {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.3);
    padding: 0 6px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    flex-shrink: 0;
}

body:not(.dark-mode) .toolbar-sep {
    color: rgba(0, 0, 0, 0.3);
}

/* ============================================================
   PHASE 1 — Pin marker
   ============================================================ */
.pin-point {
    fill: #1a1a2e;
    stroke: #4facfe;
    stroke-width: 1.5;
    cursor: crosshair;
    transition: fill 0.15s;
}

.pin-point.connected {
    fill: #4facfe;
}