/* Sinapsi UI — checkbox as pill toggle (global) */

:root {
  --ui-toggle-width: 44px;
  --ui-toggle-height: 24px;
  --ui-toggle-knob-size: 20px;
  --ui-toggle-track-off: #e5e5e5;
  --ui-toggle-track-on: var(--theme-button-bg, #141414);
  --ui-toggle-knob: #ffffff;
  --ui-toggle-knob-offset: 2px;
  --ui-toggle-knob-travel: calc(var(--ui-toggle-width) - var(--ui-toggle-knob-size) - (var(--ui-toggle-knob-offset) * 2));
}

input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  position: relative;
  flex: 0 0 auto;
  width: var(--ui-toggle-width) !important;
  min-width: var(--ui-toggle-width) !important;
  max-width: var(--ui-toggle-width) !important;
  height: var(--ui-toggle-height) !important;
  min-height: var(--ui-toggle-height) !important;
  max-height: var(--ui-toggle-height) !important;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--ui-toggle-track-off) !important;
  cursor: pointer;
  transition: background-color 0.2s ease;
  vertical-align: middle;
  line-height: 1 !important;
}

input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--ui-toggle-knob-offset);
  width: var(--ui-toggle-knob-size);
  height: var(--ui-toggle-knob-size);
  border-radius: 50%;
  background: var(--ui-toggle-knob);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

input[type="checkbox"]:checked {
  background: var(--ui-toggle-track-on) !important;
}

input[type="checkbox"]:checked::before {
  transform: translate(var(--ui-toggle-knob-travel), -50%);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-border-strong, #d4d4d4) 70%, white);
}

input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

label:has(> input[type="checkbox"]:only-of-type),
label:has(> input[type="checkbox"]:first-child),
label:has(> input[type="checkbox"]:last-child) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

label:has(> input[type="checkbox"]:disabled) {
  cursor: not-allowed;
}

.admin-form-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--ui-field-height, 28px);
}

.admin-form-toggle > span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--theme-text);
}

.admin-form-toggle > input[type="checkbox"] {
  margin-left: auto;
}