/* ===== Checkbox Component ===== */

.ui-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ui-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    position: relative;
}

/* ADO 11309: was `display: none`, which takes the native input out of the tab order, so the keyboard
   focus ring below could never show. Visually hidden but focusable instead (the same clip-rect pattern
   as radio.css); the click target is unaffected because .ui-checkbox is the <label>. */
.ui-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

/* --- Checkbox box --- */

.checkbox-box {
    width: 18px;
    height: 18px;
    background: var(--checkbox-background, var(--meb-surface-input, var(--meb-surface-card)));
    border: 1px solid var(--checkbox-border, var(--meb-border-input, var(--meb-border-subtle)));
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.ui-checkbox input:checked + .checkbox-box {
    background: var(--checkbox-border-focus, var(--meb-accent-primary));
    border-color: var(--checkbox-border-focus, var(--meb-border-accent));
}

/* Checkmark indicator */
.ui-checkbox input:checked + .checkbox-box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: solid var(--checkbox-checkmark, var(--meb-text-inverse));
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* --- Label and error --- */

.checkbox-label {
    color: var(--checkbox-foreground, var(--meb-text-default));
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    user-select: none;
}

.checkbox-error {
    color: var(--checkbox-border-error, var(--meb-accent-danger));
    font-size: var(--text-xs);
}

/* --- Focus ring --- */

.ui-checkbox input:focus-visible + .checkbox-box {
    /* Transparent, not none: forced-colors mode strips the box-shadow ring and repaints this outline in a system colour (ADO 11309). */
    outline: var(--meb-focus-ring-width) solid transparent;
    outline-offset: var(--meb-focus-ring-offset);
    border-color: var(--checkbox-border-focus, var(--meb-border-accent));
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow));
}

/* --- Variant: Default --- */

.ui-checkbox-wrapper.variant-default .checkbox-box {
    background: var(--checkbox-background, var(--meb-surface-input, var(--meb-surface-card)));
    border: 1px solid var(--checkbox-border, var(--meb-border-input, var(--meb-border-subtle)));
}

/* --- Variant: Outlined --- */

.ui-checkbox-wrapper.variant-outlined .checkbox-box {
    background: transparent;
    border: 1px solid var(--checkbox-border, var(--meb-border-input, var(--meb-border-subtle)));
}

/* --- Variant: Filled --- */

.ui-checkbox-wrapper.variant-filled .checkbox-box {
    background: var(--checkbox-background, var(--meb-surface-input-filled));
    border: 1px solid transparent;
}

/* --- Variant: RoundPill (game-list filter pills, GL-6/GL-7) --- */
/* 48x48 circular checkbox: white unchecked with the small comic shadow; Bingo-Orange when checked
   with the full comic shadow. Shadows reuse the shared comic tokens (no raw literals). Surface +
   border route through the resolver's --checkbox-* chain so per-theme component overrides apply;
   the checkmark is brand ink (border-checkbox) so it reads on the amber fill. */
.ui-checkbox-wrapper.variant-roundpill .checkbox-box {
    width: 48px;
    height: 48px;
    border-radius: var(--meb-radius-full);
    background: var(--checkbox-background, var(--meb-surface-checkbox, var(--meb-surface-card)));
    border: 1px solid var(--checkbox-border, var(--meb-border-checkbox, var(--meb-border-subtle)));
    box-shadow: var(--meb-shadow-surface-comic-sm);
}

.ui-checkbox-wrapper.variant-roundpill .ui-checkbox input:checked + .checkbox-box {
    background: var(--meb-palette-orange-bingo);
    border-color: var(--checkbox-border, var(--meb-border-checkbox, var(--meb-border-subtle)));
    box-shadow: var(--meb-shadow-surface-comic);
}

/* Re-assert the keyboard focus ring on top of the variant's comic shadow. The variant box-shadow
   outranks the base :focus-visible rule, so without this the focus indicator vanishes when focused. */
.ui-checkbox-wrapper.variant-roundpill .ui-checkbox input:focus-visible + .checkbox-box {
    box-shadow: var(--focus-ring-shadow, var(--meb-button-primary-focus-shadow)), var(--meb-shadow-surface-comic-sm);
}

.ui-checkbox-wrapper.variant-roundpill .ui-checkbox input:checked + .checkbox-box::after {
    width: 11px;
    height: 20px;
    margin-bottom: 0;
    border-color: var(--meb-border-checkbox, var(--meb-text-default));
    border-width: 0 3px 3px 0;
}

.ui-checkbox-wrapper.variant-roundpill.disabled .checkbox-box {
    box-shadow: none;
}

/* --- Disabled state --- */

.ui-checkbox-wrapper.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ui-checkbox-wrapper.disabled .checkbox-box {
    background: var(--checkbox-surface-disabled, var(--meb-surface-disabled));
    border-color: var(--checkbox-surface-disabled, var(--meb-surface-disabled));
}

.ui-checkbox-wrapper.disabled .checkbox-label {
    color: var(--checkbox-text-disabled, var(--meb-text-muted));
}

/* --- Error state --- */

.ui-checkbox-wrapper.error .checkbox-box {
    border-color: var(--checkbox-border-error, var(--meb-accent-danger));
}