/* Modern Windows-like checkbox styling for blue checkmark */
input[type="checkbox"].appearance-none:checked + svg {
  /* This ensures the SVG is blue when checked */
  color: var(--win-accent, #2563eb) !important;
  stroke: var(--win-accent, #2563eb) !important;
}

/* If you want the checkmark itself to be blue regardless of background */
input[type="checkbox"].appearance-none:checked ~ .checkbox-checkmark {
  color: var(--win-accent, #2563eb) !important;
  stroke: var(--win-accent, #2563eb) !important;
}

/* Optional: force white background for contrast, blue border when checked */
input[type="checkbox"].appearance-none:checked {
  background-color: #fff !important;
  border-color: var(--win-accent, #2563eb) !important;
}

/* Optional: blue background for checked, white checkmark */
input[type="checkbox"].appearance-none:checked {
  background-color: var(--win-accent, #2563eb) !important;
  border-color: var(--win-accent, #2563eb) !important;
}
input[type="checkbox"].appearance-none:checked + svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* For the checkmark SVG, add a class for easier targeting if needed */
.checkbox-checkmark {
  pointer-events: none;
  transition: color 0.2s, stroke 0.2s;
}

input[type="checkbox"].appearance-none {
  box-shadow: 0 0 0 2px transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.375rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input[type="checkbox"].appearance-none:enabled {
  border-color: var(--win-accent, #2563eb);
  box-shadow: 0 0 0 2px var(--win-accent, #2563eb33);
  cursor: pointer;
}
input[type="checkbox"].appearance-none:disabled {
  border-color: #bdbdbd;
  background: #f3f3f3;
  box-shadow: 0 0 0 2px #e5e7eb;
  cursor: not-allowed;
  opacity: 0.7;
}
input[type="checkbox"].appearance-none:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--win-accent, #2563eb66);
}