/* circuitGenerator.css - styling for circuit diagrams (Mermaid) */

/* Mermaid diagram container */
.circuit-container-mermaid {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

.circuit-container-mermaid .mermaid {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    max-width: 100%;
}

.circuit-container-mermaid .mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Mermaid node and text styling */
.circuit-container-mermaid .mermaid text {
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 12px;
    fill: var(--color-text);
}

.circuit-container-mermaid .mermaid .node rect,
.circuit-container-mermaid .mermaid .node polygon,
.circuit-container-mermaid .mermaid .node ellipse,
.circuit-container-mermaid .mermaid .node circle {
    stroke: var(--color-primary);
    stroke-width: 2px;
    fill: var(--color-bg);
}

.circuit-container-mermaid .mermaid .edgePath path {
    stroke: var(--color-primary);
    stroke-width: 2px;
    fill: none;
}

.circuit-container-mermaid .mermaid .edgeLabel {
    background-color: var(--color-bg);
}

/* Legacy SVG styling (if needed) */
.circuit-svg {
    font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: transparent;
    color: var(--color-text);
}

.gate {
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.gate:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.12));
}

.and-gate {
    fill: var(--color-bg);
}

.or-gate {
    fill: var(--color-bg);
}

.gate-group:hover .circuit-wire {
    stroke: var(--color-primary);
    stroke-width: 3px;
}

.circuit-wire {
    stroke: currentColor;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.circuit-input-label, .circuit-output-label {
    font-size: 12px;
    fill: var(--color-text);
}

.inverter-bubble {
    stroke: currentColor;
    stroke-width: 1.5px;
    fill: var(--color-bg);
}

.circuit-constant {
    font-size: 14px;
    fill: var(--color-text);
}

.circuit-container {
    display: block;
}