/* Shared form system: aliases real input classes — Bootstrap .form-control/
   .form-select (admin + both themes), SmmDadPrime's component-input,
   admin's admin-input. Additive only. */

.form-control,
.form-select,
.component-input,
.admin-input {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--table-border-color);
  border-radius: var(--ds-radius-sm);
  background: var(--table-body-bg);
  color: var(--table-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.form-control,
textarea.component-input,
textarea.admin-input {
  min-height: 96px;
  padding: var(--space-3);
}

.form-control:focus,
.form-select:focus,
.component-input:focus,
.admin-input:focus {
  outline: none;
  border-color: var(--table-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-primary) 20%, transparent);
}

/* ---- Checkbox / radio / switch: minimum 20x20 touch target ---- */
input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: var(--table-primary);
}

/* ---- Validation states ---- */
.form-control.is-invalid,
.component-input.is-invalid,
.admin-input.is-invalid,
.admin-field-error {
  border-color: var(--table-danger);
}

.form-control.is-valid,
.component-input.is-valid,
.admin-input.is-valid {
  border-color: var(--table-success);
}

.form-control.is-invalid:focus,
.component-input.is-invalid:focus,
.admin-input.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--table-danger) 20%, transparent);
}

.invalid-feedback,
.form-help-text,
.admin-field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
}

.invalid-feedback,
.admin-field-error {
  color: var(--table-danger);
}

.form-help-text {
  color: var(--table-text-muted);
}

/* ---- Form group vertical spacing ---- */
.form-group,
.admin-field {
  margin-bottom: var(--space-4);
}

/* ---- Read-only display fields (static data, not editable) ---- */
.component-input--readonly,
.component-input[readonly] {
  background: var(--table-row-stripe-bg);
  color: var(--table-text-muted);
  cursor: default;
}

.account-field-lock-icon {
  font-size: var(--font-size-xs);
  color: var(--table-text-muted);
  margin-right: 4px;
}

/* ---- Input with icon ---- */
.input-with-icon {
  position: relative;
}

.input-with-icon > .form-control,
.input-with-icon > .component-input,
.input-with-icon > .admin-input {
  padding-left: var(--space-8);
}

.input-with-icon > svg,
.input-with-icon > i {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--table-text-muted);
  pointer-events: none;
}

/* ---- Read-only summary/total field (e.g. neworder estimated charge) ---- */
.component-field--summary {
  padding: var(--space-3);
  border: 1px solid var(--table-border-color);
  border-radius: var(--ds-radius-sm);
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.component-field--summary > .control-label {
  font-weight: var(--font-weight-semibold, 600);
}

.component-field--summary > .form-control,
.component-field--summary > .component-input,
.component-field--summary > .admin-input {
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-semibold, 600);
  border-color: transparent;
  background: transparent;
  padding-left: 0;
}