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

/* ============================================================
   SVG Display
   ============================================================ */
#svgDisplay {
    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;
}