/* Keuzes (checkboxes) als "keuze-chips" in plaats van vierkante vakjes. Vlakke kleuren, geen verlopen.
   - Een label met een checkbox wordt een chip: hij kleurt in zodra je kiest en een ronde vinkbadge springt erin.
   - Een losse checkbox (in een tabel of kaart) is dezelfde ronde badge.
   Schakelaars (.kw-switch, .form-switch, role="switch") en de eigen keuzes (.kw-day, .kw-tone, .kw-salka-del, .kw-pick) blijven zoals ze zijn. */
@keyframes kw-badge-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes kw-badge-ring { 0% { box-shadow: 0 0 0 0 rgba(26, 167, 232, .45); } 100% { box-shadow: 0 0 0 10px rgba(26, 167, 232, 0); } }

/* ---- de ronde badge zelf (de checkbox) ---- */
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input) {
    -webkit-appearance: none; appearance: none;
    flex: none; box-sizing: border-box; position: relative;
    width: 1.4rem; height: 1.4rem; margin: 0; vertical-align: -.3em;
    border: 2px solid #b4c3d2; border-radius: 50%; background-color: #fff;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4.2 8.4l2.6 2.6 5-5.6'/%3E%3C/svg%3E") center / 78% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .26s cubic-bezier(.22, 1, .36, 1);
}
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):hover:not(:disabled) { border-color: var(--kw-blue-500, #1aa7e8); }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):active:not(:disabled) { transform: scale(.88); }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(26, 167, 232, .28); border-color: var(--kw-blue-500, #1aa7e8); }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):checked { background-color: var(--kw-navy-800, #0b3a66); border-color: var(--kw-navy-800, #0b3a66); }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):checked::after { clip-path: inset(0 0 0 0); transition-delay: .06s; }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):indeterminate { background-color: var(--kw-navy-800, #0b3a66); border-color: var(--kw-navy-800, #0b3a66); }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):indeterminate::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' d='M4.6 8h6.8'/%3E%3C/svg%3E");
    clip-path: inset(0 0 0 0);
}
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):disabled { opacity: .45; cursor: not-allowed; background-color: var(--kw-bg, #f4f7fb); }
input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):checked:disabled { background-color: var(--kw-navy-800, #0b3a66); }

/* ---- het label wordt de chip ---- */
label:has(> input[type="checkbox"]:not([role="switch"])):not(.kw-day):not(.kw-tone):not(.kw-salka-del):not(.kw-check):not(.kw-switch):not(.kw-switch-lbl):not(.kw-note-done):not(.kw-pick-forgot),
.form-check:has(> .form-check-input[type="checkbox"]:not([role="switch"])) {
    display: inline-flex; align-items: center; gap: .65rem; position: relative;
    width: fit-content; max-width: 100%; min-height: 0; margin: 0 .4rem .4rem 0; padding: .5rem 1rem .5rem .55rem;
    border: 1.5px solid var(--kw-line, #e4eaf1); border-radius: 14px; background: #fff; color: var(--kw-ink-2, #4a5b73);
    font-size: .88rem; line-height: 1.3; cursor: pointer; user-select: none;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .25s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.form-check:has(> .form-check-input[type="checkbox"]:not([role="switch"])) { padding-left: .55rem; }
.form-check > .form-check-input[type="checkbox"]:not([role="switch"]) { float: none; margin: 0; }
.form-check > .form-check-input[type="checkbox"] ~ .form-check-label { margin: 0; cursor: pointer; }
.form-check > .form-check-input[type="checkbox"] ~ .form-check-label::after { content: ""; position: absolute; inset: 0; }
label:has(> input[type="checkbox"]:not([role="switch"])):not(.kw-day):not(.kw-tone):not(.kw-salka-del):not(.kw-check):not(.kw-switch):not(.kw-switch-lbl):not(.kw-note-done):not(.kw-pick-forgot):hover:not(:has(> input:disabled)),
.form-check:has(> .form-check-input[type="checkbox"]:not([role="switch"])):hover:not(:has(> input:disabled)) { border-color: var(--kw-blue-400, #4bbcf0); background: var(--kw-blue-50, #f3f8fd); color: var(--kw-navy-900, #0a2f55); }
label:has(> input[type="checkbox"]:checked):not(.kw-day):not(.kw-tone):not(.kw-salka-del):not(.kw-check):not(.kw-switch):not(.kw-switch-lbl):not(.kw-note-done):not(.kw-pick-forgot),
.form-check:has(> .form-check-input[type="checkbox"]:checked) { border-color: var(--kw-navy-800, #0b3a66); background: var(--kw-blue-50, #f3f8fd); color: var(--kw-navy-900, #0a2f55); box-shadow: 0 0 0 3px rgba(11, 58, 102, .08); }
label:has(> input[type="checkbox"]:focus-visible), .form-check:has(> .form-check-input[type="checkbox"]:focus-visible) { border-color: var(--kw-blue-500, #1aa7e8); }
label:has(> input[type="checkbox"]:disabled), .form-check:has(> input[type="checkbox"]:disabled) { cursor: not-allowed; opacity: .7; }
/* de chip bevat al een tekst of een span: geen extra marge */
label:has(> input[type="checkbox"]) > span:not(.kw-switch) { margin: 0; }

/* rijen in filtermenu's blijven rijen, met dezelfde ronde badge */
.kw-check:has(input:checked) { background: var(--kw-blue-50, #f3f8fd); color: var(--kw-navy-900, #0a2f55); }

@media (prefers-reduced-motion: no-preference) {
    input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input):checked {
        animation: kw-badge-pop .34s cubic-bezier(.22, 1, .36, 1), kw-badge-ring .6s ease-out;
    }
    @media (hover: hover) {
        label:has(> input[type="checkbox"]:not([role="switch"])):not(.kw-day):not(.kw-tone):not(.kw-salka-del):not(.kw-check):not(.kw-switch):not(.kw-switch-lbl):not(.kw-note-done):not(.kw-pick-forgot):hover:not(:has(> input:disabled)),
        .form-check:has(> .form-check-input[type="checkbox"]:not([role="switch"])):hover:not(:has(> input:disabled)) { transform: translateY(-1px); }
    }
}
@media (prefers-reduced-motion: reduce) { input[type="checkbox"]::after { transition: none !important; } }
@media (pointer: coarse) {
    input[type="checkbox"]:not([role="switch"]):not([data-kw-native]):not(.kw-switch input):not(.form-switch .form-check-input):not(.kw-day input):not(.kw-salka-del input):not(.kw-tone input) { width: 1.55rem; height: 1.55rem; }
    label:has(> input[type="checkbox"]:not([role="switch"])):not(.kw-day):not(.kw-tone):not(.kw-salka-del):not(.kw-check):not(.kw-switch):not(.kw-switch-lbl):not(.kw-note-done):not(.kw-pick-forgot) { min-height: 44px; }
}