/* =========================
   FLUENT SWITCH (REFINED)
========================= */

.fluent-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--ms-space-sm);
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* hide native checkbox */
.fluent-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* =========================
   TRACK
========================= */

.fluent-switch__track {
    position: relative;
    width: 40px;
    height: 22px;

    background: var(--ms-color-neutral-400);
    border-radius: var(--ms-radius-pill);

    transition:
        background var(--ms-motion-base) var(--ms-ease),
        box-shadow var(--ms-motion-fast) var(--ms-ease);

    flex-shrink: 0;
}

/* subtle border feel (Fluent style) */
.fluent-switch__track::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--ms-color-border-subtle);
    pointer-events: none;
}

/* =========================
   THUMB
========================= */

.fluent-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;

    width: 18px;
    height: 18px;

    background: var(--ms-color-bg-canvas);
    border-radius: 50%;

    box-shadow: var(--ms-shadow-2);

    transition:
        transform var(--ms-motion-base) var(--ms-ease),
        background var(--ms-motion-fast) var(--ms-ease);
}

/* =========================
   CHECKED
========================= */

.fluent-switch input:checked + .fluent-switch__track {
    background: var(--ms-color-primary);
}

.fluent-switch input:checked + .fluent-switch__track .fluent-switch__thumb {
    transform: translateX(18px);
}

/* =========================
   HOVER (Fluent style subtle)
========================= */

.fluent-switch:hover .fluent-switch__track {
    background: var(--ms-color-neutral-500);
}

.fluent-switch input:checked:hover + .fluent-switch__track {
    background: var(--ms-color-primary-hover);
}

/* =========================
   ACTIVE (pressed feel)
========================= */

.fluent-switch:active .fluent-switch__thumb {
    transform: scale(0.95);
}

/* =========================
   FOCUS (Fluent focus ring)
========================= */

.fluent-switch input:focus-visible + .fluent-switch__track {
    box-shadow:
        0 0 0 var(--ms-focus-ring-width) var(--ms-focus-ring-color),
        var(--ms-shadow-2);
}

/* =========================
   DISABLED
========================= */

.fluent-switch.is-disabled {
    cursor: not-allowed;
    opacity: var(--ms-opacity-disabled);
}

.fluent-switch.is-disabled .fluent-switch__track {
    background: var(--ms-color-neutral-300);
}

.fluent-switch.is-disabled .fluent-switch__thumb {
    background: var(--ms-color-bg-disabled);
}

/* =========================
   LABEL
========================= */

.fluent-switch__label {
    font-size: var(--ms-font-size-body);
    color: var(--ms-color-text-primary);
    line-height: var(--ms-line-height-normal);
}

/* disabled label */
.fluent-switch.is-disabled .fluent-switch__label {
    color: var(--ms-color-text-disabled);
}