/* ============================================================
   ELEGANT MINIMALIST UI KIT — Checkbox, Radio & Groups
   checkbox.css

   ANATOMY — CHECKBOX
   ─────────────────────────────────────────────────────────────
   Structure:
     <label class="checkbox checkbox-md">
       <input type="checkbox" class="checkbox-native" />
       <span class="checkbox-box">
         <svg class="checkbox-check">...</svg>
         <svg class="checkbox-indeterminate">...</svg>
       </span>
       <span class="checkbox-label">Label text</span>
     </label>

   Class layers:
     1. .checkbox             → Wrapper label, flex layout
     2. .checkbox-{size}      → Box size (sm/md/lg)
     3. .checkbox-{variant}   → Style (filled/card)
     4. .checkbox-label-{pos} → Label position (right/left/bottom)
     5. .checkbox-native      → Hidden native input (accessible)
     6. .checkbox-box         → Visible box element
     7. .checkbox-check       → Checkmark SVG (animated)
   ─────────────────────────────────────────────────────────────

   ANATOMY — RADIO
   ─────────────────────────────────────────────────────────────
   Structure:
     <label class="radio radio-md">
       <input type="radio" class="radio-native" />
       <span class="radio-circle">
         <span class="radio-dot"></span>
       </span>
       <span class="radio-label">Label text</span>
     </label>
   ─────────────────────────────────────────────────────────────
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — Base wrapper (label)
   ═══════════════════════════════════════════════════════════ */

.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--control-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  line-height: var(--leading-tight);
  position: relative;
}

/* Hide native input — accessible but invisible */
.checkbox-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

/* ── The visible box ────────────────────────────────────── */
.checkbox-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--checkbox-md);
  height: var(--checkbox-md);
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--radius-sm);
  background-color: var(--select-bg);
  transition: background-color var(--duration-normal) var(--ease-in-out),
              border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}

/* ── Checkmark SVG ──────────────────────────────────────── */
.checkbox-check,
.checkbox-indeterminate {
  position: absolute;
  width: 60%;
  height: 60%;
  stroke: var(--color-neutral-50);
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--duration-normal) var(--ease-out);
}

.checkbox-indeterminate {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
}

/* Checked: animate checkmark */
.checkbox-native:checked ~ .checkbox-box .checkbox-check {
  stroke-dashoffset: 0;
}

/* Indeterminate: animate minus */
.checkbox-native:indeterminate ~ .checkbox-box .checkbox-indeterminate,
.checkbox-box.is-indeterminate .checkbox-indeterminate {
  stroke-dashoffset: 0;
}

/* ── Unchecked: hide icons ──────────────────────────────── */
.checkbox-check,
.checkbox-indeterminate {
  opacity: 0;
}

.checkbox-native:checked ~ .checkbox-box .checkbox-check {
  opacity: 1;
}

.checkbox-native:indeterminate ~ .checkbox-box .checkbox-indeterminate,
.checkbox-box.is-indeterminate .checkbox-indeterminate {
  opacity: 1;
}

/* ── Checked state ──────────────────────────────────────── */
.checkbox-native:checked ~ .checkbox-box,
.checkbox-native:indeterminate ~ .checkbox-box {
  background-color: var(--control-checked-bg);
  border-color: var(--control-checked-border);
}

/* ── Sizes ──────────────────────────────────────────────── */
.checkbox-sm {
  font-size: var(--text-sm);
}

.checkbox-sm .checkbox-box {
  width: var(--checkbox-sm);
  height: var(--checkbox-sm);
}

.checkbox-md {
  font-size: var(--text-sm);
}

.checkbox-md .checkbox-box {
  width: var(--checkbox-md);
  height: var(--checkbox-md);
}

.checkbox-lg {
  font-size: var(--text-base);
}

.checkbox-lg .checkbox-box {
  width: var(--checkbox-lg);
  height: var(--checkbox-lg);
}

/* ── Label positions ────────────────────────────────────── */

/* Label left (checkbox on right) */
.checkbox-label-left {
  flex-direction: row-reverse;
  align-items: flex-start;
}

/* Label bottom (card style) */
.checkbox-label-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.checkbox-label-bottom .checkbox-box {
  margin-bottom: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — Variant: Filled
   Background accent when checked, no border change.
   ═══════════════════════════════════════════════════════════ */

.checkbox-filled .checkbox-box {
  border-color: transparent;
  background-color: var(--control-bg);
}

.checkbox-filled .checkbox-native:checked ~ .checkbox-box,
.checkbox-filled .checkbox-native:indeterminate ~ .checkbox-box {
  background-color: var(--control-checked-bg);
  border-color: transparent;
}

.checkbox-filled .checkbox-native:hover ~ .checkbox-box {
  background-color: var(--color-neutral-200);
}

.checkbox-filled .checkbox-native:checked ~ .checkbox-box:hover,
.checkbox-filled .checkbox-native:indeterminate ~ .checkbox-box:hover {
  background-color: var(--color-accent-600);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — Variant: Card
   Entire card clickable, highlighted border on check.
   ═══════════════════════════════════════════════════════════ */

.checkbox-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}

.checkbox-card .checkbox-box {
  order: -1;
  align-self: flex-start;
}

.checkbox-card .checkbox-native:checked ~ .checkbox-box {
  background-color: var(--control-checked-bg);
  border-color: var(--control-checked-border);
}

.checkbox-card:has(.checkbox-native:checked),
.checkbox-card:has(.checkbox-native:indeterminate) {
  border-color: var(--control-checked-border);
  background-color: var(--color-accent-50);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-accent-200);
}

.checkbox-card:hover {
  border-color: var(--border-color-strong);
}

.checkbox-card .checkbox-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.checkbox-card .checkbox-desc {
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-0-5);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX — States
   ═══════════════════════════════════════════════════════════ */

/* Focus */
.checkbox-native:focus-visible ~ .checkbox-box {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled unchecked */
.checkbox.is-disabled {
  opacity: var(--control-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

/* Disabled checked — keep visual */
.checkbox.is-disabled .checkbox-native:checked ~ .checkbox-box,
.checkbox.is-disabled .checkbox-native:indeterminate ~ .checkbox-box {
  opacity: 0.8;
}

/* Error */
.checkbox-error .checkbox-box {
  border-color: var(--color-error);
}

.checkbox-error .checkbox-native:checked ~ .checkbox-box,
.checkbox-error .checkbox-native:indeterminate ~ .checkbox-box {
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.checkbox-error .checkbox-label {
  color: var(--color-error);
}

.checkbox-error.checkbox-card:has(.checkbox-native:checked) {
  border-color: var(--color-error);
  background-color: var(--color-error-light);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-error-border);
}

/* ═══════════════════════════════════════════════════════════
   RADIO — Base wrapper (label)
   ═══════════════════════════════════════════════════════════ */

.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--control-gap);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--input-text-color);
  line-height: var(--leading-tight);
  position: relative;
}

/* Hide native input */
.radio-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

/* ── The visible circle ─────────────────────────────────── */
.radio-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--checkbox-md);
  height: var(--checkbox-md);
  border: var(--border-width) solid var(--control-border);
  border-radius: var(--radius-pill);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  position: relative;
}

/* ── Inner dot ──────────────────────────────────────────── */
.radio-dot {
  width: 45%;
  height: 45%;
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-50);
  transform: scale(0);
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Selected: show dot */
.radio-native:checked ~ .radio-circle .radio-dot {
  transform: scale(1);
}

/* Selected state */
.radio-native:checked ~ .radio-circle {
  border-color: var(--control-checked-border);
  background-color: var(--control-checked-bg);
}

/* ── Sizes ──────────────────────────────────────────────── */
.radio-sm {
  font-size: var(--text-sm);
}

.radio-sm .radio-circle {
  width: var(--checkbox-sm);
  height: var(--checkbox-sm);
}

.radio-md {
  font-size: var(--text-sm);
}

.radio-md .radio-circle {
  width: var(--checkbox-md);
  height: var(--checkbox-md);
}

.radio-lg {
  font-size: var(--text-base);
}

.radio-lg .radio-circle {
  width: var(--checkbox-lg);
  height: var(--checkbox-lg);
}

/* ── Label positions ────────────────────────────────────── */
.radio-label-left {
  flex-direction: row-reverse;
  align-items: flex-start;
}

.radio-label-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.radio-label-bottom .radio-circle {
  margin-bottom: var(--space-1-5);
}

/* ═══════════════════════════════════════════════════════════
   RADIO — Variant: Card
   ═══════════════════════════════════════════════════════════ */

.radio-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--select-bg);
  transition: border-color var(--duration-normal) var(--ease-in-out),
              background-color var(--duration-normal) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;
}

.radio-card .radio-circle {
  order: -1;
  align-self: flex-start;
}

.radio-card:has(.radio-native:checked) {
  border-color: var(--control-checked-border);
  background-color: var(--color-accent-50);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-accent-200);
}

.radio-card:hover {
  border-color: var(--border-color-strong);
}

.radio-card .radio-label {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
}

.radio-card .radio-desc {
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-0-5);
}

/* ═══════════════════════════════════════════════════════════
   RADIO — Variant: Button Group (Segmented Control)
   ═══════════════════════════════════════════════════════════ */

.radio-group-btn {
  display: inline-flex;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--control-bg);
}

.radio-group-btn .radio-btn {
  position: relative;
}

.radio-group-btn .radio-native {
  position: absolute;
  width: var(--space-0);
  height: var(--space-0);
  opacity: 0;
  pointer-events: none;
}

.radio-group-btn .radio-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1-5) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-neutral-600);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--duration-fast) var(--ease-in-out),
              background-color var(--duration-fast) var(--ease-in-out);
  white-space: nowrap;
}

.radio-group-btn .radio-btn:hover .radio-btn-label {
  color: var(--color-neutral-800);
  background-color: var(--color-neutral-200);
}

.radio-group-btn .radio-native:checked ~ .radio-btn-label {
  color: var(--color-neutral-50);
  background-color: var(--control-checked-bg);
}

.radio-group-btn .radio-btn + .radio-btn .radio-btn-label {
  border-left: var(--border-width) solid var(--border-color);
}

/* Focus on button group */
.radio-group-btn .radio-native:focus-visible ~ .radio-btn-label {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: -2px;
  z-index: var(--z-raised);
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   RADIO — States
   ═══════════════════════════════════════════════════════════ */

/* Focus */
.radio-native:focus-visible ~ .radio-circle {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled */
.radio.is-disabled {
  opacity: var(--control-disabled-opacity);
  cursor: var(--input-disabled-cursor);
  pointer-events: none;
}

/* Error */
.radio-error .radio-circle {
  border-color: var(--color-error);
}

.radio-error .radio-native:checked ~ .radio-circle {
  border-color: var(--color-error);
  background-color: var(--color-error);
}

.radio-error .radio-label {
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════
   CHECKBOX GROUP
   ═══════════════════════════════════════════════════════════ */

.checkbox-group,
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkbox-group-horizontal,
.radio-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.checkbox-group-label,
.radio-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--input-label-color);
  margin-bottom: var(--space-1);
  display: block;
}

.checkbox-group-helper,
.radio-group-helper {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--input-helper-color);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
}

.checkbox-group-error,
.radio-group-error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-error);
  line-height: var(--leading-tight);
}

.checkbox-group-error svg,
.radio-group-error svg {
  width: var(--space-3);
  height: var(--space-3);
  flex-shrink: 0;
  color: var(--color-error);
}