/* --------------------------------------------------------------------------
   Checkbox → switch
   js/form-switch.js adds .form-check.form-switch around every checkbox; these
   rules size the track, give it the brand colour, and repair the layouts that
   assumed a square checkbox.
   -------------------------------------------------------------------------- */

/* Bootstrap reserves a 2.5em gutter (.form-switch padding-inline-start) and
   sizes the track at 2em, leaving .5em before the label. Widening the track to
   fill the gutter would butt the text against the switch, so the track stays
   at 2em and only the height changes. */
.form-switch .form-check-input {
    width: 2em;
    height: 1.35em;
    margin-top: .1em;
    background-color: rgba(0, 0, 0, .12);
    border-color: rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: background-color .2s ease-in-out, background-position .2s ease-in-out;
}

.form-switch .form-check-input:checked {
    background-color: #965f26;
    border-color: #965f26;
}

.form-switch .form-check-input:focus {
    border-color: rgba(150, 95, 38, .45);
    box-shadow: 0 0 0 .2rem rgba(150, 95, 38, .2);
}

.form-switch .form-check-input:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.form-switch .form-check-label {
    cursor: pointer;
    padding-top: .1em;
}

/* Html::checkbox(['label' => ...]) renders <label><input> text</label>; the
   script marks that label itself as the .form-check host, so the text needs
   the same breathing room a .form-check-label would have had */
label.form-check.form-switch {
    cursor: pointer;
    margin-bottom: .35rem;
}

/* a bare checkbox wrapped by the script — keep it inline in table cells */
span.form-check.form-switch {
    min-height: auto;
}

/* The admin layers bootstrap.rtl.min.css over the LTR build, so the LTR
   padding-left / margin-left survive in the cascade and the gutter ends up on
   the wrong side. Restate both in logical properties, which win by coming
   later and being direction-aware. */
html[dir="rtl"] .form-switch {
    padding-left: 0;
    padding-inline-start: 2.5em;
}

html[dir="rtl"] .form-switch .form-check-input {
    margin-left: 0;
    margin-inline-start: -2.5em;
}

@media (prefers-reduced-motion: reduce) {
    .form-switch .form-check-input {
        transition: none;
    }
}