/**
 * Component Rendering Styles
 */

/* Component on Canvas */
.component-on-canvas {
    cursor: move;
    user-select: none;
}

.component-on-canvas:hover {
    filter: drop-shadow(0 0 5px rgba(0, 123, 255, 0.5));
}

.component-on-canvas.selected {
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.8));
}

.component-on-canvas.dragging {
    opacity: 0.7;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Component Body */
.component-body {
    fill: white;
    stroke: #2c3e50;
    stroke-width: 2;
}

.component-on-canvas.selected .component-body {
    stroke: #ffc107;
    stroke-width: 3;
}

/* Component Label */
.component-label-text {
    font-size: 12px;
    font-weight: 600;
    fill: #2c3e50;
    text-anchor: middle;
    pointer-events: none;
}

.component-value-text {
    font-size: 10px;
    fill: #6c757d;
    text-anchor: middle;
    pointer-events: none;
}

/* Component Ports */
.component-port {
    fill: #007bff;
    stroke: white;
    stroke-width: 1.5;
    cursor: crosshair;
    transition: all 0.2s;
}

.component-port:hover {
    fill: #0056b3;
    r: 5;
}

.component-port.port-highlighted {
    fill: #28a745;
    r: 6;
    filter: drop-shadow(0 0 4px rgba(40, 167, 69, 0.8));
}

.component-port.connected {
    fill: #28a745;
}

/* Connection Wires */
.connection-wire {
    stroke: #2c3e50;
    stroke-width: 2;
    fill: none;
    pointer-events: stroke;
}

.connection-wire:hover {
    stroke: #007bff;
    stroke-width: 3;
}

.connection-wire.selected {
    stroke: #ffc107;
    stroke-width: 3;
}

/* Temporary Wire (during connection) */
.temporary-wire {
    stroke: #999;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
    fill: none;
    pointer-events: none;
    animation: dash 0.5s linear infinite;
}

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

/* Selection Rectangle */
.selection-rect {
    fill: rgba(0, 123, 255, 0.1);
    stroke: #007bff;
    stroke-width: 2;
    stroke-dasharray: 5, 5;
}

/* Grid */
.grid-line {
    stroke: var(--grid-color);
    stroke-width: 0.5;
}

/* Component Type Specific Styles */

/* Inductor */
.component-inductor .component-body {
    fill: #e3f2fd;
}

/* Capacitor */
.component-capacitor .component-body {
    fill: #fff3e0;
}

/* Resistor */
.component-resistor .component-body {
    fill: #f3e5f5;
}

/* Transmission Line */
.component-transmission-line .component-body {
    fill: #e8f5e9;
}

/* Matching Networks */
.component-l-match .component-body,
.component-t-match .component-body {
    fill: #fce4ec;
}