/**
 * Global form control fixes (load after style.css).
 *
 * watsof style.css applies `input, textarea { width: 100%; padding: 12px 25px; }` to every
 * input, which breaks radio buttons, checkboxes, and file inputs (huge hit area / flex gaps).
 * This file restores native sizing and consistent “control first, label after” alignment.
 */

/* --- Non–text inputs: undo global 100% width / padding from theme --- */
input[type="radio"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="range"],
input[type="color"] {
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Explicit flex rows: control stays compact, caption fills remaining space */
label.d-flex > input[type="radio"],
label.d-flex > input[type="checkbox"] {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: center;
}

label.d-flex > .form-check-input {
  flex: 0 0 auto !important;
  width: auto !important;
}

label.d-flex > span:not(.checkbox-custom):not(.checkbox-label) {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

/* --- Bootstrap 4 .form-check: row layout, gap, no absolute offset clash --- */
.form-check {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.625rem;
  padding-left: 0 !important;
}

.form-check .form-check-input {
  position: relative !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0.2rem !important;
  top: 0 !important;
  left: auto !important;
  flex: 0 0 auto;
}

.form-check .form-check-label {
  cursor: pointer;
  line-height: 1.45;
  padding-left: 0 !important;
  margin-bottom: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* Combined pattern used across admin blades */
.form-group.form-check {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.625rem;
}

.form-group.form-check > .form-check-input {
  order: 0;
}

.form-group.form-check > .form-check-label {
  order: 1;
}

/* Sensible default sizes when theme/Bootstrap fight */
.form-check-input[type="checkbox"]:not([style*="width"]) {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem;
  min-height: 1.125rem;
}

.form-check-input[type="radio"] {
  width: 1.125rem !important;
  height: 1.125rem !important;
  min-width: 1.125rem;
  min-height: 1.125rem;
}

/* Large switch-style checkboxes keep author intent */
.form-check-input[type="checkbox"][style*="width: 3rem"],
.form-check-input[type="checkbox"][style*="width:3rem"] {
  width: 3rem !important;
  height: auto !important;
  min-width: 3rem;
}

/* Inline check/radio groups */
.form-check-inline {
  display: inline-flex !important;
  align-items: flex-start;
  vertical-align: middle;
  margin-right: 1rem;
}

/* Flex utility rows that mix checkbox + label (common in SaaS modules) */
.d-flex.align-items-start:has(> .form-check-input[type="checkbox"]),
.d-flex.align-items-center:has(> .form-check-input[type="checkbox"]) {
  gap: 0.75rem;
}

.d-flex.align-items-start .form-check-input[type="checkbox"],
.d-flex.align-items-center .form-check-input[type="checkbox"] {
  margin-top: 0.15rem !important;
}

/* Rows that use d-flex + form-check classes without a .form-check wrapper */
.d-flex.align-items-start:has(> .form-check-input),
.d-flex.align-items-center:has(> .form-check-input) {
  justify-content: flex-start;
}

.d-flex > .form-check-input[type="checkbox"] + .form-check-label,
.d-flex > .form-check-input[type="radio"] + .form-check-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  cursor: pointer;
}

.form-check-input[type="checkbox"],
.form-check-input[type="radio"] {
  cursor: pointer;
}