/* ====== Toggle Switch (slider) ======
   Toegankelijk, met focus states en labels "Aan/Uit"
*/
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

    /* Visueel verbergen van de checkbox, maar toegankelijk houden */
    .switch input[type="checkbox"] {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        padding: 0;
        margin: -1px;
    }

/* Track + knop */
.slider {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    background: #cfd8e3; /* uit: grijs/blauw */
    border-radius: 999px;
    transition: background-color 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

    /* Knopje */
    .slider::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
        transition: transform 0.25s ease;
    }

/* Aan: kleur + knop naar rechts */
.switch input[type="checkbox"]:checked + .slider {
    background: #0077cc;
}

    .switch input[type="checkbox"]:checked + .slider::before {
        transform: translateX(20px);
    }

/* Focus-ring voor toetsenbordnavigatie */
.switch input[type="checkbox"]:focus-visible + .slider {
    outline: 2px solid #1e90ff;
    outline-offset: 2px;
}

/* Disabled state (optioneel) */
.switch input[type="checkbox"]:disabled + .slider {
    background: #e5e7eb;
    cursor: not-allowed;
}

.switch input[type="checkbox"]:disabled ~ .switch-label {
    color: #9ca3af;
}

/* Tekstlabel "Aan/Uit" rechts van de switch (visueel) */
.switch-label {
    font-size: 0.875rem;
    color: #0f172a;
}

.switch input[type="checkbox"]:checked ~ .switch-label::before {
    content: attr(data-on);
}

.switch input[type="checkbox"]:not(:checked) ~ .switch-label::before {
    content: attr(data-off);
}

/* Reduced motion ondersteuning */
@media (prefers-reduced-motion: reduce) {
    .panel {
        transition: none;
    }

    .slider,
    .slider::before {
        transition: none;
    }
}