/* checkbox.css — THE APP CHECKBOX: the one definition for the whole web app.
 * Owner ruling 2026-10-09: one drawn box app wide, never the browser's default.
 *
 * Pattern sources: md-billed-table.css:111-118 @ 1.0.811 (the Billing tick this
 * generalises: 18px, radius 5, brand fill, the on-fill check);
 * templates/auth_base.html:190-193 (a pseudo-element drawn ON an
 * `appearance: none` input); md-lists.css:292-301 (a transparent inset overlay
 * buys the touch target, so the box itself never grows); md-tokens.css (the
 * link-it-from-the-shell shape: one small sheet both shells load).
 *
 * - Linked by the two shells only, right after styles.css: base.html (every md
 *   and classic page) and auth_base.html. No page links it. It replaces the
 *   `input[type="checkbox"] { accent-color }` rule styles.css carried there
 *   (that sheet is past the 700-line ceiling and may not grow).
 * - The box's IDENTITY (appearance, size, border, radius, fill) is !important:
 *   generic field rules (`.md-fld input`, `.md-modal input`, a 48px
 *   `min-height` on a phone sheet, Bootstrap's `.form-check-input`) and inline
 *   `style=""` attributes would otherwise stretch or repaint it. A surface may
 *   still PLACE the box (margin, align-self, position, display); it may not
 *   restyle it. tests/test_app_checkbox.py fails a second definition.
 * - NOT a checkbox, so left alone (the :not list): switches (`.form-switch`,
 *   `[role="switch"]`, the YES / NO `.toggle-switch`, the sign-in page's
 *   `.checkbox-input`) and controls that hide the input and draw their own
 *   mark (`.multiselect-picker-option`, `.sr-employee-checkbox`,
 *   `.ujf-stdwage`, `.permission-item`). Radios are not touched.
 * - Tokens carry a literal fallback: auth_base.html does not link md-tokens.css.
 * - Forced colours (Windows high contrast): back to the native control.
 */
input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)) {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    flex: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--md-ink-3, #8b919a) !important;
    border-radius: 5px !important;
    background: var(--md-surface, #fff) !important;
    box-shadow: none !important;
    /* placement stays the page's: no margin is set here (Bootstrap's reboot
       already zeroes an input's, as it did for the native box) */
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;      /* a printed page keeps the fill, or the check prints white on white */
}
input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)):is(:checked, :indeterminate) {
    border-color: var(--md-brand, #8A2A2B) !important;
    background: var(--md-brand, #8A2A2B) !important;
}
input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)):checked::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    width: 6px;
    height: 10px;
    margin: -6.5px 0 0 -3px;
    border: solid var(--md-ink-on-fill, #fff);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    pointer-events: none;
}
/* some of a group is ticked: a dash, and it wins over the check */
input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)):indeterminate::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 2px;
    margin: -1px 0 0 -4px;
    border: 0;
    border-radius: 1px;
    background: var(--md-ink-on-fill, #fff);
    transform: none;
    pointer-events: none;
}
input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)):focus-visible {
    outline: 2px solid var(--md-focus, #8A2A2B) !important;
    outline-offset: 2px !important;
}
input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)):disabled {
    opacity: .5;
    cursor: default;
}
/* The controls the box leaves alone keep what this sheet always gave every
   checkbox (the brand accent, the brand fill on an `appearance: none` input
   such as Bootstrap's switch, the focus glow): same declarations, same weight,
   so a switch paints exactly as it did before 2026-10-09. */
input[type="checkbox"]:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *) {
    accent-color: #8A2A2B;
}
input[type="checkbox"]:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *):checked {
    background-color: #8A2A2B;
    border-color: #8A2A2B;
}
input[type="checkbox"]:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *):focus {
    outline: none;
    box-shadow: 0 0 5px 2px rgba(138, 42, 43, 0.5);
}
/* Bootstrap hangs its own 16px box from the top of a 24px line with .25em; the
   18px box needs 3px to sit on the same centre (and the same row height). */
.form-check-input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)) { margin-top: 3px; vertical-align: top; }
/* Phones, tablets and any touch screen: the box stays 18px, the finger gets
   48px (gloved field users). The overlay is the input's own pseudo-element, so
   a tap on it is a tap on the box. */
@media (pointer: coarse), (max-width: 991.98px) {
    input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)):not(:disabled)::before {
        content: '';
        position: absolute;
        inset: -16.5px;
    }
}
@media (forced-colors: active) {
    input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *)) {
        -webkit-appearance: auto !important;
        appearance: auto !important;
        width: revert !important;
        height: revert !important;
        padding: revert !important;
        border: revert !important;
        border-radius: revert !important;
        background: revert !important;
    }
    input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *))::before,
    input[type="checkbox"]:not(:where([role="switch"], .form-switch *, .toggle-switch *, .checkbox-input, .multiselect-picker-option *, .sr-employee-checkbox, .ujf-stdwage *, .permission-item *))::after { content: none !important; }
}