/* ==========================================
   ALU Binary Adder - Page-specific Styles
   ========================================== */

/* Gate Legend */
.gate-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.gate-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.gate-symbol {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.8rem;
    font-family: var(--font-mono);
    color: #fff;
}

.gate-symbol.xor-color { background-color: #7c4dff; }
.gate-symbol.and-color { background-color: #00bfa5; }
.gate-symbol.or-color { background-color: #ff6d00; }

/* Simulator Panel (inputs/outputs) */
.sim-panel {
    background: var(--color-surface-dark);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 4px;
}

.input-row,
.output-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.input-row:last-child,
.output-row:last-child {
    margin-bottom: 0;
}

.input-label {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-accent);
    width: 50px;
    text-align: right;
    flex-shrink: 0;
}

/* (2.1) Raised contrast from #8899aa to #aabbcc */
.decimal-display {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: #aabbcc;
    white-space: nowrap;
    min-width: 60px;
}

/* Toggle Switches */
.bit-switches {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.bit-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    user-select: none;
}

/* (2.1) Raised contrast from #556 to #99aabb */
.bit-switch .bit-label {
    font-size: 0.65rem;
    color: #99aabb;
    font-weight: 600;
}

.bit-switch .switch-track {
    width: 28px;
    height: 44px;
    background: linear-gradient(to bottom, #2a2a3e 0%, #1e1e30 100%);
    border-radius: var(--radius-sm);
    border: 1px solid #3a3a5e;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.2s;
}

.bit-switch:hover .switch-track {
    border-color: #5a5a8e;
}

.bit-switch .switch-knob {
    width: 22px;
    height: 18px;
    background: linear-gradient(to bottom, #888 0%, #666 100%);
    border-radius: 3px;
    position: absolute;
    bottom: 3px;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.bit-switch.on .switch-knob {
    bottom: auto;
    top: 3px;
    background: linear-gradient(to bottom, #aaa 0%, #888 100%);
}

.bit-switch .switch-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #331a1a;
    margin-top: 2px;
    transition: all 0.2s;
}

.bit-switch.on .switch-led {
    background: #00ff66;
    box-shadow: 0 0 6px #00ff66, 0 0 12px rgba(0, 255, 102, 0.3);
}

/* Circuit Visualization Panel */
.circuit-panel {
    background: #0a0a16;
    border-radius: var(--radius-lg);
    margin-bottom: 4px;
    overflow: hidden;
    border: 1px solid #1a1a3e;
}

.circuit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #0f0f20;
    border-bottom: 1px solid #1a1a3e;
    font-size: 0.85rem;
    /* (2.1) Raised contrast from #667 to #99aabb */
    color: #99aabb;
}

/* (2.1) Raised contrast from #445 to #8899aa */
.circuit-hint {
    font-style: italic;
    font-size: 0.8rem;
    color: #8899aa;
}

.circuit-container {
    padding: 16px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

#circuit-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Detail Panel with transition (5.4) */
.detail-panel {
    border-top: 1px solid #1a1a3e;
    background: #0d0d1a;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.detail-panel.visible {
    max-height: 400px;
    opacity: 1;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #12122a;
    border-bottom: 1px solid #1a1a3e;
    font-size: 0.85rem;
    color: #889;
}

#detail-close {
    background: none;
    border: none;
    color: #889;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

#detail-close:hover {
    color: var(--color-accent);
}

.detail-container {
    padding: 16px;
    display: flex;
    justify-content: center;
}

#detail-svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Output Panel */
.output-panel {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.bit-leds {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.led-bit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* (2.1) Raised contrast from #556 to #99aabb */
.led-bit .bit-label {
    font-size: 0.65rem;
    color: #99aabb;
    font-weight: 600;
}

.led-bit .led {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a0a0a;
    border: 2px solid #2a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: #442;
    transition: all 0.3s;
}

.led-bit .led.on {
    background: radial-gradient(circle at 40% 35%, #33ff88 0%, #00cc55 60%, #009933 100%);
    border-color: #00cc55;
    color: #003311;
    box-shadow: 0 0 8px rgba(0, 255, 102, 0.4), 0 0 20px rgba(0, 255, 102, 0.15);
}

/* Output Flags */
.output-flags {
    display: flex;
    gap: 20px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #1a1a30;
}

.flag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    /* (2.1) Raised contrast from #667 to #99aabb */
    color: #99aabb;
}

.flag-led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #1a0a0a;
    border: 1px solid #2a1a1a;
    display: inline-block;
    transition: all 0.3s;
}

.flag.active .flag-led {
    background: radial-gradient(circle at 40% 35%, #ff6666 0%, #ff3333 60%, #cc0000 100%);
    border-color: #ff3333;
    box-shadow: 0 0 6px rgba(255, 50, 50, 0.5);
}

.flag.active {
    color: #ff6666;
    font-weight: 600;
}

/* Controls bar - uses shared .ctrl-btn, .speed-control, .control-buttons */
.sim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 12px 0;
    padding: 12px 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

/* Info Panel */
.info-panel {
    background: #fafafa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}

.info-header {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.info-content {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.step-counter {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #888;
    font-family: var(--font-mono);
}

/* SVG Styles (applied via classes in JavaScript) */

/* Wire colors */
.wire {
    fill: none;
    stroke: #2a2a4e;
    stroke-width: 2;
    transition: stroke 0.3s, filter 0.3s;
}

.wire.active-1 {
    stroke: #00ff88;
    filter: drop-shadow(0 0 3px rgba(0, 255, 136, 0.5));
}

.wire.active-0 {
    stroke: #445;
}

/* Gate shapes in SVG */
.gate-body {
    fill: #1e1e35;
    stroke: #3a3a6e;
    stroke-width: 1.5;
    transition: fill 0.3s, stroke 0.3s;
}

.gate-body.computed {
    fill: #252545;
    stroke: #5a5a9e;
}

.gate-text {
    fill: #778;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.gate-text.computed {
    fill: #aac;
}

/* Full adder block */
.fa-block {
    cursor: pointer;
    transition: filter 0.2s;
}

.fa-block:hover .fa-body {
    stroke: #5a7aae;
}

.fa-body {
    fill: #141428;
    stroke: #2a2a5e;
    stroke-width: 2;
    rx: 6;
    ry: 6;
    transition: stroke 0.2s, fill 0.3s;
}

.fa-body.active {
    fill: #1a1a38;
    stroke: #4a6aaa;
}

.fa-body.completed {
    fill: #151530;
    stroke: #3a5a3a;
}

.fa-label {
    fill: #667;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.fa-label.active {
    fill: #99bbff;
}

.fa-label.completed {
    fill: #88aa88;
}

/* Input/output labels in SVG */
.io-label {
    fill: #889;
    font-family: var(--font-mono);
    font-size: 10px;
    text-anchor: middle;
    dominant-baseline: central;
}

/* LED dots in SVG */
.svg-led {
    fill: #1a0a0a;
    stroke: #2a1a1a;
    stroke-width: 1;
    transition: fill 0.3s, filter 0.3s;
}

.svg-led.on {
    fill: #00ff66;
    stroke: #00cc44;
    filter: drop-shadow(0 0 4px rgba(0, 255, 102, 0.5));
}

/* Carry wire pulse animation */
@keyframes carry-pulse {
    0% { stroke-dashoffset: 12; }
    100% { stroke-dashoffset: 0; }
}

.wire.carry-animate {
    stroke-dasharray: 6 6;
    animation: carry-pulse 0.4s linear infinite;
}

/* Responsive (4.3: unified at 640px) */
@media (max-width: 640px) {
    .sim-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .sim-controls .control-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .sim-controls .speed-control {
        width: 100%;
    }

    .input-row,
    .output-row {
        flex-wrap: wrap;
    }

    .input-label {
        width: auto;
        text-align: left;
    }

    .decimal-display {
        width: 100%;
    }

    .bit-switch .switch-track {
        width: 32px;
        height: 48px;
    }

    .bit-switch .switch-knob {
        width: 26px;
        height: 20px;
    }
}