/* cores base */
:root {
  --accent: #0057B7;
  --cb-bg: #ffffff;
  --cb-border: 100 116 139; /* slate-500 */
}
.dark {
  --cb-bg: rgb(17 24 39);   /* gray-900 aprox */
  --cb-border: 75 85 99;    /* gray-600 aprox */
}

/* aparência nativa p/ resto */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* checkbox custom com svg */
input[type="checkbox"].with-svg {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  display: inline-block; vertical-align: middle; user-select: none; flex-shrink: 0;
  width: 1.25rem; height: 1.25rem; border-radius: 0.375rem;
  border: 1px solid rgb(var(--cb-border));
  background: var(--cb-bg);
  background-origin: border-box;
  cursor: pointer;
}

input[type="checkbox"].with-svg:hover {
  /* leve realce no hover */
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

input[type="checkbox"].with-svg:active {
  transform: translateY(0.5px);
}

input[type="checkbox"].with-svg:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"].with-svg:disabled {
  opacity: .5;
  cursor: not-allowed;
}

input[type="checkbox"].with-svg:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
}

/* tri-state para "Selecionar todos" */
input[type="checkbox"].with-svg:indeterminate {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='7.25' width='10' height='1.5' rx='0.75'/%3e%3c/svg%3e");
  background-position: center; background-repeat: no-repeat; background-size: 100% 100%;
}

/* alto contraste (Windows) */
@media (forced-colors: active) {
  input[type="checkbox"].with-svg {
    forced-color-adjust: none;
    border-color: ButtonText;
    background: Canvas;
  }
  input[type="checkbox"].with-svg:checked,
  input[type="checkbox"].with-svg:indeterminate {
    background: Highlight;
    background-image: none; /* deixa o sistema desenhar */
    border-color: Highlight;
  }
}