/* Shared selection controls. Keep the real inputs and their native keyboard/form behavior. */
body {
    --bk-selection-accent: var(--bk-accent, #182c46);
    --bk-selection-line: #a9b6c8;
    --bk-selection-surface: var(--bk-surface, #fff);
    --bk-selection-ink: var(--bk-ink, #14243b);
    --bk-selection-muted: var(--bk-muted, #617087);
    --bk-selection-on-accent: var(--bk-on-accent, #fff);
    --bk-selection-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E");
    --bk-selection-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}

body.dark-mode {
    --bk-selection-accent: var(--bk-accent, #b7cae5);
    --bk-selection-line: #6e819b;
    --bk-selection-surface: var(--bk-surface, #283046);
    --bk-selection-ink: var(--bk-ink, #e2e9f3);
    --bk-selection-muted: var(--bk-muted, #a6b4c8);
    --bk-selection-on-accent: var(--bk-on-accent, #102137);
    --bk-selection-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23102137' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8 3 3 6-6'/%3E%3C/svg%3E");
    --bk-selection-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23102137' stroke-width='1.8' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
}

/* Existing custom-control/switch inputs have their own adjacent visual track. */
body input:is([type="checkbox"], [type="radio"]):not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input, .radio input)) {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    min-height: 16px;
    padding: 0;
    margin: 2px 0;
    border: 1px solid var(--bk-selection-line);
    border-radius: 4px;
    background-color: var(--bk-selection-surface);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    box-shadow: 0 1px 2px rgba(20, 36, 59, .05);
    vertical-align: middle;
    accent-color: var(--bk-selection-accent);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

body input:is([type="checkbox"], [type="radio"]):not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input, .radio input)):hover:not(:disabled) {
    border-color: var(--bk-selection-accent);
}

body input:is([type="checkbox"], [type="radio"]):not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input, .radio input)):is(:checked, :indeterminate) {
    border-color: var(--bk-selection-accent);
    background-color: var(--bk-selection-accent);
    box-shadow: none;
}

body input[type="checkbox"]:not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input)):checked {
    background-image: var(--bk-selection-check);
}

body input[type="checkbox"]:not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input)):indeterminate {
    background-image: var(--bk-selection-dash);
}

body input[type="radio"]:not(:where(.custom-control-input, .form-control-custom, .radio input)) {
    border-radius: 50%;
}

body input[type="radio"]:not(:where(.custom-control-input, .form-control-custom, .radio input)):checked {
    background-image: radial-gradient(circle, var(--bk-selection-on-accent) 0 3px, transparent 3.4px);
}

body input:is([type="checkbox"], [type="radio"]):not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input, .radio input)):focus-visible {
    outline: 2px solid var(--bk-selection-accent)!important;
    outline-offset: 3px;
    box-shadow: none;
}

body input:is([type="checkbox"], [type="radio"]):not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input, .radio input)):disabled {
    opacity: .48;
    cursor: not-allowed;
    box-shadow: none;
}

/* Low specificity allows richer user cards, multi-line choices and radio groups to keep their layout. */
body label:where(:has(> input:is([type="checkbox"], [type="radio"]))):not(:where(.bk-module-switch, .switch, .custom-switch, .custom-control-label)) {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 20px;
    cursor: pointer;
}

body label:where(:has(> input:is([type="checkbox"], [type="radio"]):disabled)) {
    cursor: not-allowed;
}

/* Align compact check rows even when a generic form-label rule sets a full-width field. */
body .bookkeeping :is(.bk-item-check, .bk-settings-check, .bk-module-radio) > input:is([type="checkbox"], [type="radio"]) {
    flex-shrink: 0;
    margin-block: 2px;
}

body .bookkeeping .bk-item-check {
    gap: 8px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
}

body .bookkeeping .bk-item-status {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--bk-line, #dce3ed);
    border-radius: var(--bk-control-radius, 6px);
    background: var(--bk-selection-surface);
}

body .bookkeeping .bk-item-status strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--bk-selection-ink);
}

body .bookkeeping .bk-item-status small {
    display: block;
    margin-top: 1px;
    color: var(--bk-selection-muted);
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
}

/* Keep Bootstrap/legacy custom checkboxes visually consistent without adding a second control. */
body .custom-checkbox .custom-control-label::before,
body input.form-control-custom[type="checkbox"] + label::before,
body .checkbox label::before {
    border: 1px solid var(--bk-selection-line);
    border-radius: 4px!important;
    background-color: var(--bk-selection-surface);
    box-shadow: 0 1px 2px rgba(20, 36, 59, .05);
}

body .custom-checkbox .custom-control-input:is(:checked, :indeterminate) ~ .custom-control-label::before,
body input.form-control-custom[type="checkbox"]:is(:checked, :indeterminate) + label::before,
body .checkbox input[type="checkbox"]:is(:checked, :indeterminate) + label::before {
    border-color: var(--bk-selection-accent);
    background-color: var(--bk-selection-accent);
}

body .checkbox input[type="checkbox"]:checked + label::after,
body input.form-control-custom[type="checkbox"]:checked + label::after {
    color: var(--bk-selection-on-accent);
}

body .custom-checkbox .custom-control-input:disabled ~ .custom-control-label,
body input.form-control-custom[type="checkbox"]:disabled + label,
body .checkbox input[type="checkbox"]:disabled + label {
    color: var(--bk-selection-muted);
    cursor: not-allowed;
}

body .custom-checkbox .custom-control-input:disabled ~ .custom-control-label::before,
body .custom-checkbox .custom-control-input:disabled ~ .custom-control-label::after,
body input.form-control-custom[type="checkbox"]:disabled + label::before,
body input.form-control-custom[type="checkbox"]:disabled + label::after,
body .checkbox input[type="checkbox"]:disabled + label::before,
body .checkbox input[type="checkbox"]:disabled + label::after {
    opacity: .48;
    cursor: not-allowed;
}

body .custom-control-input:focus-visible ~ .custom-control-label::before,
body input.form-control-custom:focus-visible + label::before,
body .checkbox input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid var(--bk-selection-accent)!important;
    outline-offset: 3px;
    box-shadow: none;
}

/* Older templates used display:none; visually hide them while restoring keyboard access. */
body input.form-control-custom,
body .checkbox input[type="checkbox"] {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

@media (prefers-reduced-motion: reduce) {
    body input:is([type="checkbox"], [type="radio"]) { transition: none; }
}

@media (forced-colors: active) {
    body input:is([type="checkbox"], [type="radio"]):not(:where(.custom-control-input, .form-control-custom, [role="switch"], .bk-module-switch input, .switch input, .custom-switch input, .checkbox input, .radio input)) {
        -webkit-appearance: auto;
        appearance: auto;
        background-image: none;
        forced-color-adjust: auto;
    }
}