/* ─── DANTI CHECKBOX SYSTEM ──────────────────────────────────────────────
   One look for every checkbox / on-off selector in the web panel — the
   Payroll Rules design: a 20px white circle with a soft shadow and a 12px
   inner dot, grey when off and teal when on.

   Use it in any of these forms (all render identically):
     <input type="checkbox" class="dcheck">               native, :checked
     <div class="dcheck" role="checkbox" aria-checked="true|false">
     <div class="dcheck is-on">                           JS toggles .is-on
     <div class="checkbox-card checkbox-on|checkbox-off"> legacy Payroll Rules
                                                          classes (kept so the
                                                          existing JS works)
   Size: .dcheck-sm (16px) for dense lists. Disabled: [disabled] /
   aria-disabled="true" / .is-disabled. Partial (native :indeterminate or
   aria-checked="mixed"): a smaller teal dot.
   Link it on every page that shows a checkbox and don't restyle it per
   page (layout only: placement, margins). Per-page rules with a higher
   specificity (e.g. `.row input`) override it — don't add those.
   ───────────────────────────────────────────────────────────────────── */
@import url("../colours.css");

:root {
  --dcheck-size: 20px;
  --dcheck-dot: 12px;
  --dcheck-bg: var(--white, #ffffff);
  --dcheck-off: var(--highlighted-off, #A1A1A1);
  --dcheck-on: var(--highlighted-on, #076A89);
  --dcheck-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  --dcheck-shadow-hover: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.dcheck,
.checkbox-card {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--dcheck-size);
  height: var(--dcheck-size);
  min-width: var(--dcheck-size);
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--dcheck-bg);
  box-shadow: var(--dcheck-shadow);
  vertical-align: middle;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.dcheck::after,
.checkbox-card::after {
  content: "";
  width: var(--dcheck-dot);
  height: var(--dcheck-dot);
  border-radius: 50%;
  background-color: var(--dcheck-off);
  transition: background-color 0.15s ease;
}

/* ON */
.dcheck:checked::after,
.dcheck.is-on::after,
.dcheck[aria-checked="true"]::after,
.checkbox-card.checkbox-on::after {
  background-color: var(--dcheck-on);
}

/* Partial ("select all" with some rows ticked): a smaller teal dot */
.dcheck:indeterminate:not(:checked)::after,
.dcheck[aria-checked="mixed"]::after {
  width: calc(var(--dcheck-dot) / 2);
  height: calc(var(--dcheck-dot) / 2);
  background-color: var(--dcheck-on);
}

/* OFF (explicit, for the legacy classes) */
.checkbox-card.checkbox-off::after { background-color: var(--dcheck-off); }

.dcheck:hover,
.checkbox-card:hover { box-shadow: var(--dcheck-shadow-hover); }

.dcheck:focus,
.checkbox-card:focus { outline: none; }
.dcheck:focus-visible,
.checkbox-card:focus-visible {
  outline: 2px solid var(--dcheck-on);
  outline-offset: 2px;
}

/* Disabled */
.dcheck:disabled,
.dcheck[aria-disabled="true"],
.dcheck.is-disabled,
.checkbox-card.is-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Small */
.dcheck.dcheck-sm { --dcheck-size: 16px; --dcheck-dot: 10px; }

/* Label + box on one line */
.dcheck-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}