/**
 * @file
 * tpemis_portal form theming (#884).
 *
 * Token-driven styling for all form controls in the portal content area so
 * every form - not just the auth card - reads as part of the design system
 * rather than stock Drupal/Olivero. Scoped to .tp-main so the top nav and the
 * admin (Gin) theme are untouched, and limited to specific input types so
 * checkboxes/radios keep their native control.
 */

/* Field wrapper rhythm. */
.tp-main .form-item,
.tp-main .js-form-item {
  margin-block: 0 var(--tp-spacing-4, 1rem);
}

/* Labels. */
.tp-main label,
.tp-main .form-item__label {
  display: inline-block;
  margin-block-end: var(--tp-spacing-1, 0.25rem);
  font-weight: var(--tp-font-weight-bold, 700);
  font-size: var(--tp-font-size-sm, 0.875rem);
  color: var(--tp-color-text-default, #1a2230);
}
/* Required marker uses the brand, not Olivero red-on-blue. */
.tp-main .form-required::after,
.tp-main label .form-required {
  color: var(--tp-color-danger, #c0392b);
}

/* Text-like controls + textarea + select. */
.tp-main input[type="text"],
.tp-main input[type="email"],
.tp-main input[type="password"],
.tp-main input[type="tel"],
.tp-main input[type="number"],
.tp-main input[type="search"],
.tp-main input[type="url"],
.tp-main input[type="date"],
.tp-main textarea,
.tp-main select {
  width: 100%;
  max-width: 32rem;
  min-height: 44px;
  padding: 0 var(--tp-spacing-3, 0.75rem);
  border: 1px solid var(--tp-color-border-default, #d4dae3);
  border-radius: var(--tp-border-radius-md, 8px);
  background: var(--tp-color-surface-default, #fff);
  font-family: var(--tp-font-family-sans, system-ui, sans-serif);
  font-size: var(--tp-font-size-md, 1rem);
  color: var(--tp-color-text-default, #1a2230);
  box-shadow: none;
}
.tp-main textarea {
  min-height: 7rem;
  padding: var(--tp-spacing-3, 0.75rem);
  line-height: 1.5;
}
.tp-main input:focus,
.tp-main textarea:focus,
.tp-main select:focus {
  outline: 2px solid var(--tp-color-primary, #1b3a6b);
  outline-offset: 1px;
  border-color: var(--tp-color-primary, #1b3a6b);
}
.tp-main input::placeholder,
.tp-main textarea::placeholder {
  color: var(--tp-color-text-muted, #8a93a3);
}

/* Help/description text. */
.tp-main .description,
.tp-main .form-item__description {
  margin-block-start: var(--tp-spacing-1, 0.25rem);
  font-size: var(--tp-font-size-sm, 0.875rem);
  color: var(--tp-color-text-muted, #5b6473);
}

/* Inline error state. */
.tp-main .form-item--error input,
.tp-main .form-item--error textarea,
.tp-main .form-item--error select,
.tp-main input.error,
.tp-main textarea.error {
  border-color: var(--tp-color-danger, #c0392b);
}
.tp-main .form-item__error-message {
  margin-block-start: var(--tp-spacing-1, 0.25rem);
  font-size: var(--tp-font-size-sm, 0.875rem);
  color: var(--tp-color-danger, #c0392b);
}

/* Fieldsets (e.g. the CAPTCHA group on register). */
.tp-main fieldset {
  margin-block: 0 var(--tp-spacing-4, 1rem);
  padding: var(--tp-spacing-4, 1rem);
  border: 1px solid var(--tp-color-border-default, #d4dae3);
  border-radius: var(--tp-border-radius-md, 8px);
}
.tp-main legend {
  padding-inline: var(--tp-spacing-2, 0.5rem);
  font-weight: var(--tp-font-weight-bold, 700);
  font-size: var(--tp-font-size-sm, 0.875rem);
}

/* Buttons: primary navy, secondary outline; token radius + 44px target. */
.tp-main .button,
.tp-main input[type="submit"],
.tp-main button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--tp-spacing-5, 1.5rem);
  border: 1px solid transparent;
  border-radius: var(--tp-border-radius-md, 8px);
  background: var(--tp-color-primary, #1b3a6b);
  color: #fff;
  font-weight: var(--tp-font-weight-bold, 700);
  font-size: var(--tp-font-size-md, 1rem);
  text-decoration: none;
  cursor: pointer;
}
.tp-main .button:hover,
.tp-main input[type="submit"]:hover,
.tp-main button[type="submit"]:hover {
  background: var(--tp-color-brand-primary-light, #2a6496);
}
.tp-main .button--secondary,
.tp-main .button.secondary {
  background: transparent;
  border-color: var(--tp-color-border-default, #d4dae3);
  color: var(--tp-color-primary, #1b3a6b);
}

/* Webforms (#886): a comfortable centred form column + a token-driven wizard
   progress tracker that re-skins all webforms (admission, support, survey)
   without per-form work. */
.tp-main .webform-submission-form {
  max-width: 40rem;
}
.tp-main .webform-submission-form .form-actions {
  margin-top: var(--tp-spacing-5, 1.5rem);
}
/* Wizard progress (multi-step admission forms). */
.tp-main .webform-progress {
  margin-block-end: var(--tp-spacing-6, 2rem);
}
.tp-main .webform-progress .progress-step {
  color: var(--tp-color-text-muted, #5b6473);
}
.tp-main .webform-progress .progress-marker {
  background: var(--tp-color-surface-subtle, #eef1f5);
  color: var(--tp-color-text-muted, #5b6473);
  border-radius: 999px;
}
.tp-main .webform-progress .is-active .progress-marker,
.tp-main .webform-progress .progress-step.is-active .progress-marker {
  background: var(--tp-color-primary, #1b3a6b);
  color: #fff;
}
.tp-main .webform-progress .is-complete .progress-marker,
.tp-main .webform-progress .progress-step.is-complete .progress-marker {
  background: var(--tp-color-brand-accent, #e8a020);
  color: #fff;
}
.tp-main .webform-progress-bar__page--current .webform-progress-bar__page-label {
  color: var(--tp-color-primary, #1b3a6b);
  font-weight: var(--tp-font-weight-bold, 700);
}
.tp-main .button:focus-visible,
.tp-main input[type="submit"]:focus-visible,
.tp-main button[type="submit"]:focus-visible {
  outline: 2px solid var(--tp-color-primary, #1b3a6b);
  outline-offset: 2px;
}