/* Uiverse "Checkbox" (minimal rounded check)
   Source:  https://uiverse.io/adamgiebl/proud-donkey-24
   Author:  adamgiebl
   Licence: uiverse.io element page footer reads "MIT License" (verified 2026-10-07). Original CSS: proud-donkey-24.orig.css
   Adapted for the contractor app:
   - selectors scoped with .uv-checkbox (original .container/.checkmark are too generic to ship globally; class names kept);
   - label row: inline-flex with the box + text, min-height --tap so the whole row is a >= 44px target;
   - #ccc -> --surface-2 with an inset 2px --border-strong ring (>= 3:1); checked #47da99 -> --accent-fill (tenant), tick #fff -> --on-accent;
   - the inset ring is used instead of a border so the tick keeps its original absolute offsets;
   - :focus-visible ring on the box (input is visually hidden but real, so Space toggles it); [disabled] state;
   - prefers-reduced-motion: no "pop" animation and no transitions. */

/* Hide the default checkbox */
.uv-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.uv-checkbox.container {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  min-width: var(--tap);
  position: relative;
  cursor: pointer;
  font-size: 20px;
  user-select: none;
}

.uv-checkbox__text {
  font-size: var(--fs-base);
  color: var(--text);
  line-height: var(--lh-snug);
}

/* Create a custom checkbox */
.uv-checkbox .checkmark {
  position: relative;
  display: block;
  flex: none;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: var(--surface-2);
  box-shadow: inset 0 0 0 2px var(--border-strong);
  transition: all var(--dur-base) var(--ease-out);
  border-radius: var(--radius-xs);
}

/* When the checkbox is checked, fill with the tenant accent */
.uv-checkbox.container input:checked ~ .checkmark {
  background-color: var(--accent-fill);
  box-shadow: inset 0 0 0 2px var(--accent); /* --accent is >= 3:1 on the ground (theme.js), keeps the checked boundary visible in dark */
  animation: pop 0.5s;
  animation-direction: alternate;
}

/* Create the checkmark/indicator (hidden when not checked) */
.uv-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.uv-checkbox.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.uv-checkbox.container .checkmark:after {
  left: 0.45em;
  top: 0.25em;
  width: 0.25em;
  height: 0.5em;
  border: solid var(--on-accent);
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.uv-checkbox.container input:focus-visible ~ .checkmark {
  outline: var(--ring-w) solid var(--focus);
  outline-offset: var(--ring-offset);
}

.uv-checkbox.container input:disabled ~ .checkmark,
.uv-checkbox.container input:disabled ~ .uv-checkbox__text { opacity: 0.5; }
.uv-checkbox.container:has(input:disabled) { cursor: not-allowed; }

@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .uv-checkbox .checkmark { transition: none; }
  .uv-checkbox.container input:checked ~ .checkmark { animation: none; }
}