/* Checkbox Component Styles */
/* Styled to match the design system checkbox component */
/* Works with dmc.Checkbox */

.custom-checkbox {
  /* Container for the checkbox */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Style the checkbox input element from dmc.Checkbox */
.custom-checkbox .mantine-Checkbox-input {
  /* Base checkbox styling - matches h-5 w-5 (20px x 20px) */
  height: 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  border: 1px solid hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important; /* Accent brand color */
  background-color: transparent !important;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Unchecked state - transparent background, accent-brand border */
.custom-checkbox .mantine-Checkbox-input:not(:checked) {
  background-color: transparent !important;
  border-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
}

/* Checked state - accent-brand background */
.custom-checkbox .mantine-Checkbox-input:checked {
  background-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
  border-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
}

/* Brand variant - uses accent-brand when checked */
.custom-checkbox-brand .mantine-Checkbox-input:checked {
  background-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
  border-color: hsl(var(--accent-brand-h, 23), var(--accent-brand-s, 90%), var(--accent-brand-l, 54%)) !important;
}

/* Checkmark icon styling - absolutely centered */
.custom-checkbox .mantine-Checkbox-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure the SVG icon is centered within the icon container */
.custom-checkbox .mantine-Checkbox-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  margin: 0 !important;
}

/* Disabled state */
.custom-checkbox .mantine-Checkbox-input:disabled,
.custom-checkbox .mantine-Checkbox-input[disabled] {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.custom-checkbox .mantine-Checkbox-input:disabled:not(:checked),
.custom-checkbox .mantine-Checkbox-input[disabled]:not(:checked) {
  background-color: transparent !important;
  border-color: hsl(var(--muted) / 0.5) !important;
}

.custom-checkbox .mantine-Checkbox-input:disabled:checked,
.custom-checkbox .mantine-Checkbox-input[disabled]:checked {
  background-color: hsl(var(--muted) / 0.3) !important;
  border-color: hsl(var(--muted) / 0.3) !important;
}

/* Disabled state via CSS class */
.custom-checkbox-disabled .mantine-Checkbox-input {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

.custom-checkbox-disabled .mantine-Checkbox-input:not(:checked) {
  background-color: transparent !important;
  border-color: hsl(var(--muted) / 0.5) !important;
}

.custom-checkbox-disabled .mantine-Checkbox-input:checked {
  background-color: hsl(var(--muted) / 0.3) !important;
  border-color: hsl(var(--muted) / 0.3) !important;
}

/* Checkbox label styling */
.custom-checkbox .mantine-Checkbox-label {
  cursor: pointer !important;
  font-family: var(--font-family, 'Sora', sans-serif) !important;
  font-size: 14px !important;
  color: hsl(var(--foreground)) !important;
  user-select: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.custom-checkbox .mantine-Checkbox-input:disabled ~ .mantine-Checkbox-label,
.custom-checkbox .mantine-Checkbox-input[disabled] ~ .mantine-Checkbox-label {
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

/* Ensure proper spacing between checkbox and label */
.custom-checkbox .mantine-Checkbox-body {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Remove margin-left from label since we're using gap */
.custom-checkbox .mantine-Checkbox-label {
  margin-left: 0 !important;
}