/*
 * Admin checkbox / radio skin — one consistent, custom-drawn control for every checkbox and radio
 * in the admin panel: plain <input type="checkbox|radio">, daisyUI .checkbox / .radio, and Mary
 * <x-checkbox> (which renders .checkbox.checkbox-primary).
 *
 * Linked ONLY from components/layouts/admin.blade.php, right after ui-skin.css (it reuses its
 * --ui-* tokens). To use it on tenant pages too, add the same <link> to that layout.
 *
 * Why: plain inputs fell back to the native control (forced to 1.5rem by tailwind.config.js, dark
 * tick, thick dark radio ring), daisy ones were 1.3rem with an indigo edge from checkbox-primary,
 * so a single form mixed three looks and sizes.
 *
 * Not touched: toggles (.toggle), Mary radio button groups (input.btn), daisy helpers
 * (.modal-toggle, .drawer-toggle, .tab, .swap / .collapse inputs), visually hidden inputs
 * (.hidden, .sr-only, [hidden]) and anything marked .ui-native (opt-out).
 *
 * Sizes: xs .875rem · sm 1rem · default 1.125rem · lg 1.375rem; controls inside a <table> or
 * .ui-dense use 1rem so list/permission grids stay compact.
 */

:root {
    --ui-choice-size: 1.125rem;
    --ui-choice-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    --ui-choice-dash: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='white' stroke-linecap='round' stroke-width='2.2' d='M4.5 8h7'/%3e%3c/svg%3e");
}

/* ---------- base: every checkbox + radio ---------- */
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input) {
    -webkit-appearance: none !important;
    appearance: none !important;
    flex-shrink: 0;
    display: inline-grid;
    place-content: center;
    width: var(--ui-choice-size) !important;
    height: var(--ui-choice-size) !important;
    min-width: var(--ui-choice-size);
    margin: 0;
    padding: 0 !important;
    vertical-align: -0.2em;
    cursor: pointer;
    border: 1.5px solid var(--ui-border-hover) !important;
    background-color: var(--ui-surface) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    box-shadow: 0 1px 2px rgb(15 23 42 / .06) !important;
    color: transparent;
    animation: none !important;
    outline: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

html body input[type="checkbox"]:not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input) {
    border-radius: .35rem !important;
}
html body input[type="radio"]:not(.btn, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input) {
    border-radius: 9999px !important;
}

/* ---------- hover / focus ---------- */
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):hover:not(:disabled) {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    box-shadow: 0 0 0 3px var(--ui-accent-ring) !important;
}
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):focus-visible {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    box-shadow: 0 0 0 3px rgb(var(--ui-brand-rgb) / .3) !important;
}
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):active:not(:disabled) {
    transform: scale(.9);
}

/* ---------- checked ---------- */
html body input[type="checkbox"]:not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):is(:checked, [aria-checked="true"]) {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    background-color: rgb(var(--ui-brand-rgb)) !important;
    background-image: var(--ui-choice-check) !important;
    box-shadow: 0 2px 6px -2px rgb(var(--ui-brand-rgb) / .65) !important;
}
html body input[type="checkbox"]:not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):indeterminate {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    background-color: rgb(var(--ui-brand-rgb)) !important;
    background-image: var(--ui-choice-dash) !important;
}
html body input[type="radio"]:not(.btn, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):is(:checked, [aria-checked="true"]) {
    border-color: rgb(var(--ui-brand-rgb)) !important;
    background-color: rgb(var(--ui-brand-rgb)) !important;
    /* white ring inside the green disc = the dot */
    box-shadow: inset 0 0 0 .22rem var(--ui-surface), 0 2px 6px -2px rgb(var(--ui-brand-rgb) / .65) !important;
}
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):is(:checked, :indeterminate):hover:not(:disabled) {
    border-color: rgb(var(--ui-brand-strong-rgb)) !important;
    background-color: rgb(var(--ui-brand-strong-rgb)) !important;
}

/* checked radio keeps its dot (inset shadow) when the hover / focus ring is added */
html body input[type="radio"]:not(.btn, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):checked:is(:hover, :focus-visible):not(:disabled) {
    box-shadow: inset 0 0 0 .22rem var(--ui-surface), 0 0 0 3px var(--ui-accent-ring) !important;
}

/* ---------- error (daisy *-error class or aria-invalid) ---------- */
html body input:is([type="checkbox"], [type="radio"]):is(.checkbox-error, .radio-error, [aria-invalid="true"]):not(:checked) {
    border-color: var(--ui-danger) !important;
}
html body input:is([type="checkbox"], [type="radio"]):is(.checkbox-error, .radio-error, [aria-invalid="true"]):checked {
    border-color: var(--ui-danger) !important;
    background-color: var(--ui-danger) !important;
}

/* ---------- disabled ---------- */
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):disabled {
    cursor: not-allowed;
    opacity: .5;
    background-color: var(--ui-surface-2) !important;
    box-shadow: none !important;
}
html body input:is([type="checkbox"], [type="radio"]):not(.toggle, .btn, .modal-toggle, .drawer-toggle, .tab, .hidden, .sr-only, .ui-native, [hidden], .swap > input, .collapse > input):disabled:is(:checked, :indeterminate) {
    background-color: rgb(var(--ui-brand-rgb)) !important;
}

/* ---------- sizes ---------- */
html body input:is(.checkbox-xs, .radio-xs) { --ui-choice-size: .875rem; }
html body input:is(.checkbox-sm, .radio-sm) { --ui-choice-size: 1rem; }
html body input:is(.checkbox-lg, .radio-lg) { --ui-choice-size: 1.375rem; }
html body :is(table, .ui-dense) input:is([type="checkbox"], [type="radio"]):not(.checkbox-lg, .radio-lg) { --ui-choice-size: 1rem; }

/* ---------- labels that wrap a control ---------- */
html body label:has(> input:is([type="checkbox"], [type="radio"]):not(:disabled)) {
    cursor: pointer;
}
html body label:has(> input:is([type="checkbox"], [type="radio"]):disabled) {
    cursor: not-allowed;
    opacity: .75;
}