/*
 * BIT CHECK — global checkbox + radio control
 * ===========================================
 * Single source of truth for every plain checkbox and radio in the app.
 * No markup change is needed anywhere: Bootstrap already puts
 * `.form-check-input` on all of them, so this file reaches them all.
 *
 * WHY THIS EXISTS
 * A checked box is themed as a pair: --bit-primary fills it, --bit-primary-fg
 * inks the glyph. Bootstrap ships the checkmark as an SVG data URI with the
 * stroke hardcoded to WHITE, so the fg half used to be ignored — an org that
 * themes Primary to a light tint (#e0ebf2) got a white checkmark on a
 * near-white box, i.e. an invisible checkbox.
 *
 * Bootstrap exposes that glyph through --bs-form-check-bg-image, so the fix is
 * to re-point that variable at a glyph inked with --bit-primary-fg. The glyph
 * has to be built server-side (a CSS var can't be interpolated into a url()) —
 * see theme_check_glyph() in BitTwigExtensions, emitted as --bit-check-mark by
 * base.html.twig / sas_base.html.twig / cart_register_modal.html.twig.
 *
 * Overriding the variable rather than `background-image` is deliberate: the
 * pill-style checkboxes (.edit-info-item, .combined-field) and the On/Off
 * switches null out background-image themselves, so they are unaffected.
 *
 * SCOPE
 * Plain checkboxes and radios. Switches (.form-switch / [role="switch"]) are
 * drawn as On/Off pills by _form-toggles.css, .bit-seg controls by
 * _segmented-toggle.css; neither is touched here.
 *
 * TUNING — override on :root (or any ancestor) to restyle app-wide:
 *   --bit-check-fill     fill of a checked box/radio  (default: --bit-primary)
 *   --bit-check-ink      glyph color                  (default: --bit-primary-fg)
 *   --bit-check-border   border of an unchecked box/radio
 */

:root {
    --bit-check-fill: var(--bit-primary, #0d6efd);
    --bit-check-ink: var(--bit-primary-fg, #ffffff);

    /* Unchecked border. Secondary is a themed background, and it has no border
       counterpart to read from, so cap how light it may get: washing a pale
       Secondary (#e9ebef) toward white left the empty box with no visible edge. */
    --bit-check-border: color-mix(in srgb, var(--bit-secondary, #6c757d) 70%, white);

    /* Edge on a checked box. Mixing the fill toward its own ink keeps the box
       defined against the page whichever way the theme runs: a light fill gets a
       darker edge, a dark fill a lighter one. */
    --bit-check-edge: color-mix(in srgb, var(--bit-check-fill) 82%, var(--bit-check-ink));
    --bit-check-ring: color-mix(in srgb, var(--bit-check-fill) 25%, transparent);
}

@supports (color: oklch(from red l c h)) {
    :root {
        /* Keep the theme's hue and chroma, clamp only lightness. */
        --bit-check-border: color-mix(in srgb, oklch(from var(--bit-secondary, #6c757d) min(l, 0.72) c h) 70%, white);
    }
}

/* ===== unchecked ===== */

input.form-check-input[type="checkbox"]:not([role="switch"], .form-switch *),
input.form-check-input[type="radio"]:not([role="switch"], .form-switch *) {
    border: 1.5px solid var(--bit-check-border) !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input.form-check-input[type="checkbox"]:not([role="switch"], .form-switch *):not(:checked):not(:indeterminate):not(:disabled):hover,
input.form-check-input[type="radio"]:not([role="switch"], .form-switch *):not(:checked):not(:disabled):hover {
    border-color: var(--bit-secondary, #6c757d) !important;
}

/* ===== checked / indeterminate ===== */

input.form-check-input[type="checkbox"]:not([role="switch"], .form-switch *):checked,
input.form-check-input[type="checkbox"]:not([role="switch"], .form-switch *):indeterminate,
input.form-check-input[type="radio"]:not([role="switch"], .form-switch *):checked {
    background-color: var(--bit-check-fill) !important;
    border-color: var(--bit-check-edge) !important;
}

/* Re-ink Bootstrap's glyphs. Falling back to the stock white ones keeps any
   context that doesn't emit the theme vars (Sulu admin, emails) unchanged. */
input.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: var(--bit-check-mark, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"));
}

input.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: var(--bit-check-dot, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"));
}

input.form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: var(--bit-check-dash, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e"));
}

/* ===== focus ===== */

input.form-check-input[type="checkbox"]:not([role="switch"], .form-switch *):focus,
input.form-check-input[type="radio"]:not([role="switch"], .form-switch *):focus {
    border-color: var(--bit-check-edge) !important;
    box-shadow: 0 0 0 0.25rem var(--bit-check-ring) !important;
}