/* Native checkbox recipe for forms that cannot mount the React UI components. */
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"] {
  appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--crm-line-strong);
  border-radius: 5px;
  background: var(--crm-surface);
  color: var(--crm-accent-ink);
  cursor: pointer;
}
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]::after {
  content: "";
  width: 8px;
  height: 5px;
  margin-top: -2px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: rotate(-45deg);
}
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]:checked {
  border-color: var(--crm-accent);
  background: var(--crm-accent);
}
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]:checked::after { opacity: 1; }
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]:hover:not(:disabled):not(:checked) { border-color: var(--crm-ink); }
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]:focus-visible {
  outline: 2px solid var(--hub-detail-ink, var(--crm-ink));
  outline-offset: 2px;
}
[data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
@media (forced-colors: active) {
  [data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"] { appearance: auto; }
  [data-crm-shadcn] input[type="checkbox"][data-slot="checkbox"]::after { display: none; }
}