/* ============================================================================
   Component: form field
   ----------------------------------------------------------------------------
   Wraps a Bootstrap control with the parts that were being forgotten: a label
   bound by `for`/`id`, help text and an error message linked through
   aria-describedby, and a required marker that is not colour-only.

   The audit found 30 of 72 fields unlabeled on the admission form, 18 of 23
   in settings, and both login fields with no id, no label and no autocomplete.
   ========================================================================== */
.aq-field{ margin-bottom: var(--gap-field); }

.aq-field__label{
  display: inline-block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: var(--fw-medium);
  color: var(--label-fg);
}

/* Required is marked with a glyph AND the word, not a red asterisk alone. */
.aq-field__required{
  color: var(--danger);
  font-weight: var(--fw-bold);
  margin-left: 2px;
}

.aq-field__help{
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--help-fg);
}

.aq-field__error{
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--danger);
  font-weight: var(--fw-medium);
}
.aq-field__error .bi{ line-height: var(--lh-xs); }

/* Invalid state: border + icon + text, never colour alone. */
.aq-field--invalid .form-control,
.aq-field--invalid .form-select{
  border-color: var(--input-invalid);
}