/* =============================================================
   toggle-neon.css  ·  shared/components/  ·  standalone
   Neon-glow ON/OFF switch — pure CSS, hidden checkbox + label trick.
   When checked: track lights up cyan with layered inset+outer glow,
   knob slides right and pulses. Tap-friendly (28px tall, full label
   is the hit target). Used on tab-2 forwarder rows for activate /
   deactivate. Touch behaviour stops propagation in JS so tapping the
   toggle doesn't trigger the chip's selection handler.
   ============================================================= */

.toggle-neon {
    --c: var(--brand-active);                /* cyan accent */
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
    justify-self: center;
    align-self: center;
}

.toggle-neon input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.toggle-neon .track {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: var(--brand);
    border: 1px solid rgba(34, 215, 255, 0.25);
    transition: border-color .25s, box-shadow .25s, background .25s;
    pointer-events: none;
}

.toggle-neon .knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2A3142;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform .25s ease, background .25s, box-shadow .25s;
    pointer-events: none;
}

.toggle-neon input:checked ~ .track {
    border-color: var(--c);
    background: rgba(34, 215, 255, 0.08);
    box-shadow:
        inset 0 0 8px rgba(34, 215, 255, 0.4),
        0 0 10px rgba(34, 215, 255, 0.5),
        0 0 24px rgba(34, 215, 255, 0.25);
}

.toggle-neon input:checked ~ .track .knob,
.toggle-neon input:checked ~ .knob {
    transform: translateX(28px);
    background: var(--c);
    box-shadow: 0 0 8px var(--c), 0 0 16px rgba(34, 215, 255, 0.6);
}