/* Shared checkbox visibility. Keep native controls and switch widgets intact. */
input[type="checkbox"] {
  accent-color: #54231b;
  flex-shrink: 0;
}

input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])) {
  width: 1.125em;
  height: 1.125em;
  border-width: 2px;
  border-color: #766e6b;
  cursor: pointer;
}

input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])):checked,
input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])):indeterminate {
  background-color: #54231b;
  border-color: #54231b;
}

/* Retain Bootstrap's check / indeterminate images and validation colors. */
input.form-check-input[type="checkbox"].is-invalid:not(:where(.form-switch *, [role="switch"])),
.was-validated input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])):invalid {
  border-color: #dc3545;
}

input.form-check-input[type="checkbox"].is-valid:not(:where(.form-switch *, [role="switch"])),
.was-validated input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])):valid {
  border-color: #198754;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid #54231b;
  outline-offset: 3px;
}

input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])):disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (forced-colors: active) {
  input.form-check-input[type="checkbox"]:not(:where(.form-switch *, [role="switch"])) {
    appearance: auto;
    background-image: none;
  }

  input[type="checkbox"]:focus-visible {
    outline-color: Highlight;
  }
}