/* ═══════════════════════════════════════════════════════════════════
   FeatureControl.razor.css  —  pill toggle only
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pill track ───────────────────────────────────────────────────── */
.feature-toggle__switch {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: none;
    position: relative;
    display: inline-block;
    width: 3.4rem;
    height: 1.75rem;
    border-radius: 999px;
    flex-shrink: 0;
    background-color: #1c2e42;
    border: 2px solid #2e4a66;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.4);
    transition: background-color 0.22s, border-color 0.22s, box-shadow 0.22s;
}

    /* Knob */
    .feature-toggle__switch::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0.25rem;
        transform: translateY(-50%);
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        background-color: #4a6080;
        box-shadow: 0 1px 4px rgba(0,0,0,0.5);
        transition: left 0.22s ease, background-color 0.22s;
    }

    /* ── ON state ─────────────────────────────────────────────────────── */
    .feature-toggle__switch.is-on {
        background-color: #0e3d6b;
        border-color: #2d7dd2;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.2), 0 0 10px rgba(45,125,210,0.4);
    }

        .feature-toggle__switch.is-on::after {
            left: calc(100% - 0.25rem - 1.1rem);
            background-color: #2d7dd2;
            box-shadow: 0 0 8px rgba(45,125,210,0.8);
        }

/* ── Icon knob overlay ────────────────────────────────────────────── */
.feature-toggle__knob {
    position: absolute;
    top: 50%;
    left: 0.25rem;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: left 0.22s ease;
    z-index: 1;
}

.feature-toggle__switch.is-on .feature-toggle__knob {
    left: calc(100% - 0.25rem - 1.1rem);
}

.feature-toggle__icon {
    width: 0.5rem;
    height: 0.5rem;
    color: #7a90a8;
    flex-shrink: 0;
    transition: color 0.2s;
}

.feature-toggle__switch.is-on .feature-toggle__icon {
    color: #c8e6ff;
}

/* ── Hover ────────────────────────────────────────────────────────── */
.feature-toggle__switch:hover:not(:disabled) {
    border-color: #3a7ac0;
    background-color: #1e3550;
}

    .feature-toggle__switch:hover:not(:disabled)::after {
        background-color: #5a7898;
    }

.feature-toggle__switch.is-on:hover:not(:disabled)::after {
    background-color: #4090e0;
}

/* ── Disabled ─────────────────────────────────────────────────────── */
.feature-toggle__switch:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}

/* ── Spinner (while processing) ──────────────────────────────────── */
.feature-toggle__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid #2d7dd2;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ft-spin 0.65s linear infinite;
    z-index: 2;
}

@keyframes ft-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ── Label & token hint ───────────────────────────────────────────── */
.feature-toggle__label {
    font-size: 0.82rem;
    font-weight: 500;
    color: #a0b8cc;
    letter-spacing: 0.04em;
    user-select: none;
    white-space: nowrap;
}

.feature-toggle__tokens {
    font-size: 0.68rem;
    color: #5a7a96;
    margin-left: 0.2rem;
}

/* ── Running state ────────────────────────────────────────────────── */
.feature-toggle--running {
    opacity: 0.6;
    pointer-events: none;
}