/* ============================================
   Form Switch (toggle) — refined alignment
   ============================================
   Bootstrap 5's default .form-check.form-switch uses a padding-left +
   negative-margin float trick. The result is the switch sitting at a
   slight vertical offset from the label baseline and minimal spacing
   between switch and text. We replace the trick with proper flexbox
   so the switch is truly centered with the label and there's enough
   breathing room.

   Applies globally — live forms (boolean / checkbox-style=toggle)
   AND the form-builder editor's settings panels.
*/

.form-check.form-switch {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);             /* breathing room between switch and label */
  padding-left: 0;           /* reset Bootstrap's float trick */
  min-height: auto;
  margin-bottom: 0;          /* container should manage outer spacing */
}

.form-check.form-switch .form-check-input {
  margin-left: 0;            /* reset the negative-margin float */
  margin-top: 0;
  flex-shrink: 0;            /* don't compress the switch when label wraps */
  cursor: pointer;
}

.form-check.form-switch .form-check-label {
  margin-bottom: 0;
  cursor: pointer;
  line-height: 1.4;          /* tighter line-height matches the switch height */
  /* Allow the label to wrap to multiple lines next to the switch — the
     parent's align-items: center keeps everything vertically centered. */
}

/* When stacking multiple switches in a panel (form-builder editor +
   section-level conditional toggles), keep them visually grouped with
   consistent vertical rhythm. */
.form-check.form-switch + .form-check.form-switch {
  margin-top: var(--spacing-sm);
}

/* ============================================
   Conditional editor — card layout
   ============================================
   Each condition is a self-contained card with a numbered header
   and three labeled sections (FIELD / OPERATOR / VALUE) stacked
   vertically. The card structure makes the stacking visually
   unambiguous in narrow editor panels (280-320px sidebar).
*/

.forms-conditional-builder {
  background-color: var(--color-page-bg);
  border: 1px solid var(--color-border);
}

.forms-conditional-builder__action {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}