/* ===================================
   CHECKBOX ATOM - Custom Checkbox Component
   ===================================
   
   CSS-native checkbox with custom styling.
   Professional, clean, accessible.
*/

/* Checkbox wrapper */
.checkbox-wrapper {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Hide native checkbox visually but keep it interactive and accessible */
/* Position it over the custom checkbox so clicks hit the actual input */
.checkbox-input {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

/* Custom checkbox visual - Chunky for easy clicking, Layer 4 */
.checkbox-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: var(--border-width-2) solid var(--border-default);
  border-radius: var(--border-radius-sm);
  background-color: var(--bg-surface);      /* #ffffff - Top layer */
  transition: all var(--duration-150) var(--easing-out);
  margin-top: 0.125em; /* Align with text baseline */
}

/* Checkmark (hidden by default) */
.checkbox-custom::after {
  content: '';
  display: none;
  width: var(--space-1_5);
  height: var(--space-2_5);
  border: solid var(--text-inverse);
  border-width: 0 var(--border-width-2) var(--border-width-2) 0;
  transform: rotate(45deg);
  margin-bottom: var(--border-width-2);
}

/* ===================================
   CHECKBOX STATES - Pure CSS
   =================================== */

/* Checked state */
.checkbox-input:checked + .checkbox-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-input:checked + .checkbox-custom::after {
  display: block;
}

/* Indeterminate state (requires JS to set on element) */
.checkbox-input[data-indeterminate="true"] + .checkbox-custom {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-input[data-indeterminate="true"] + .checkbox-custom::after {
  display: block;
  width: var(--space-2_5);
  height: 0;
  border-width: 0 0 var(--border-width-2) 0;
  transform: none;
  margin-bottom: 0;
}

/* Hover state */
.checkbox-wrapper:hover .checkbox-custom {
  border-color: var(--border-strong);
}

.checkbox-input:checked + .checkbox-custom:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Focus state - pure CSS */
.checkbox-input:focus-visible + .checkbox-custom {
  outline: var(--border-width-2) solid var(--border-focus);
  outline-offset: var(--border-width-2);
}

/* Disabled state */
.checkbox-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.checkbox-input:disabled + .checkbox-custom {
  background-color: var(--bg-panel);        /* Use panel color for disabled */
  border-color: var(--border-subtle);
  cursor: not-allowed;
}

/* ===================================
   CHECKBOX LABEL
   =================================== */

.checkbox-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-0_5);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--line-height-normal);
}

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

.checkbox-description {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--line-height-normal);
}

.checkbox-disabled .checkbox-label {
  cursor: not-allowed;
  color: var(--text-muted);
}

/* ===================================
   CHECKBOX SIZES
   =================================== */

.checkbox-sm .checkbox-custom {
  width: calc(var(--checkbox-size) * 0.9);
  height: calc(var(--checkbox-size) * 0.9);
}

.checkbox-sm .checkbox-custom::after {
  width: var(--space-1);
  height: var(--space-2);
}

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

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

.checkbox-lg .checkbox-custom {
  width: calc(var(--checkbox-size) * 1.2);
  height: calc(var(--checkbox-size) * 1.2);
}

.checkbox-lg .checkbox-custom::after {
  width: var(--space-1_5);
  height: var(--space-3);
}

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

/* ===================================
   CHECKBOX GROUPS
   =================================== */

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

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

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 640px) {
  .checkbox-wrapper {
    gap: var(--space-1_5);
  }
  
  .checkbox-custom {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
  }
  
  .checkbox-label {
    font-size: var(--text-sm);
  }
}

/* ===================================
   ACCESSIBILITY
   =================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .checkbox-custom {
    transition: none;
  }
}