/* ==========================================================================
   Form controls, validation, form-group spacing.
   Owning feature: shared / components
   Load order is defined in Views/Shared/_CssIncludes.cshtml — do not reorder.
   ========================================================================== */

/* --- Forms ----------------------------------------------------------------
   Form controls use a crisp white resting surface with a defined slate border
   to provide clear visual affordance and avoid appearing disabled or read-only.
   Hover transitions to a darkened border with appropriate cursor cues, and
   focus maintains the active primary ring. Truly disabled or readonly inputs
   are explicitly differentiated with a muted background, dimmed text, subdued
   border, and not-allowed cursor. */
.form-label, label { font-size: var(--fh-text-base); font-weight: var(--fh-weight-medium); color: var(--fh-text); }
.form-control, .form-select {
  background-color: var(--fh-form-bg, #ffffff);
  border: 1px solid var(--fh-form-border, #cbd5e1);
  border-radius: var(--fh-radius);
  font-size: var(--fh-text-base);
  color: var(--fh-text);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control {
  padding: 0.5rem 0.75rem;
  cursor: text;
}
.form-control[type="file"],
.form-control[type="color"] {
  cursor: pointer;
}
.form-control-sm {
  padding: 0.25rem 0.55rem;
  font-size: var(--fh-text-sm, 0.875rem);
  border-radius: var(--fh-radius-sm, 0.375rem);
}
.form-control-lg {
  padding: 0.65rem 1rem;
  font-size: var(--fh-text-lg, 1.125rem);
  border-radius: var(--fh-radius-lg, 0.5rem);
}
.form-select {
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  cursor: pointer;
}
.form-select-sm {
  padding: 0.25rem 1.85rem 0.25rem 0.55rem;
  font-size: var(--fh-text-sm, 0.875rem);
  border-radius: var(--fh-radius-sm, 0.375rem);
  background-position: right 0.55rem center;
  background-size: 12px 10px;
}
.form-select-lg {
  padding: 0.65rem 2.5rem 0.65rem 1rem;
  font-size: var(--fh-text-lg, 1.125rem);
  border-radius: var(--fh-radius-lg, 0.5rem);
  background-position: right 0.85rem center;
  background-size: 18px 14px;
}
.form-control::placeholder {
  color: var(--fh-muted);
  opacity: 1;
}
.form-control:hover:not(:disabled):not([readonly]):not(:focus) {
  border-color: var(--fh-form-border-hover, #94a3b8);
  cursor: text;
}
.form-control[type="file"]:hover:not(:disabled):not([readonly]):not(:focus),
.form-control[type="color"]:hover:not(:disabled):not([readonly]):not(:focus) {
  cursor: pointer;
}
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--fh-form-border-hover, #94a3b8);
  cursor: pointer;
}
.form-control:focus, .form-select:focus {
  background-color: #ffffff;
  border-color: var(--fh-primary);
  box-shadow: var(--fh-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.15));
  outline: 0;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly],
fieldset:disabled .form-control,
fieldset:disabled .form-select {
  background-color: var(--fh-soft, #f1f5f9);
  color: var(--fh-muted, #94a3b8);
  border-color: var(--fh-form-border-disabled, #e2e8f0);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
.form-control:disabled::placeholder,
.form-control[readonly]::placeholder {
  color: var(--fh-muted, #94a3b8);
  opacity: 0.7;
}
.form-control:disabled:focus,
.form-control[readonly]:focus,
.form-select:disabled:focus,
.form-select[readonly]:focus {
  background-color: var(--fh-soft, #f1f5f9);
  border-color: var(--fh-form-border-disabled, #e2e8f0);
  box-shadow: none;
  outline: 0;
}
.form-control.is-invalid, .form-select.is-invalid,
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--fh-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.form-control.is-invalid:hover:not(:disabled):not([readonly]):not(:focus),
.form-select.is-invalid:hover:not(:disabled):not(:focus) {
  border-color: var(--fh-danger);
}
.form-control.is-valid, .form-select.is-valid {
  border-color: var(--fh-success);
}
.form-control.is-valid:hover:not(:disabled):not([readonly]):not(:focus),
.form-select.is-valid:hover:not(:disabled):not(:focus) {
  border-color: var(--fh-success);
}
.form-control.is-valid:focus, .form-select.is-valid:focus {
  border-color: var(--fh-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
textarea.form-control { min-height: 5.5rem; line-height: var(--fh-leading-normal); resize: vertical; }
.form-text { font-size: var(--fh-text-xs); color: var(--fh-muted); margin-top: 0.3rem; }
.invalid-feedback { font-size: var(--fh-text-xs); color: var(--fh-danger); }
.valid-feedback { font-size: var(--fh-text-xs); color: var(--fh-success); }

/* Autofilled inputs (browser password managers, saved credentials on the
   login form) paint their own yellow/blue background over ours — repaint it
   back to pure white surface via the long-transition trick, and keep our text
   color so contrast/readability doesn't regress. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fh-text);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Input groups (e.g. the "temporary password" copy field) — Bootstrap 5
   only auto-joins direct-child `.form-control`/`.btn` siblings; the app's
   BS4-style `.input-group-append` wrapper divs need the join rules
   reapplied manually so the seam matches the rest of the fh-* surfaces. */
.input-group > .form-control,
.input-group > .form-select {
  background-color: var(--fh-form-bg, #ffffff);
}
.input-group > .form-control:disabled,
.input-group > .form-control[readonly],
.input-group > .form-select:disabled,
.input-group > .form-select[readonly] {
  background-color: var(--fh-soft, #f1f5f9);
}
.input-group-prepend, .input-group-append { display: flex; }
.input-group-text {
  background-color: var(--fh-soft);
  border: 1px solid var(--fh-form-border, #cbd5e1);
  color: var(--fh-muted);
  font-size: var(--fh-text-base);
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  border-radius: var(--fh-radius);
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child),
.input-group > .input-group-prepend + .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Tag Helper validation spans render as `.text-danger` next to each field
   rather than Bootstrap's `.invalid-feedback`, so match the same small,
   breathing-room treatment. */
.form-group .text-danger, .form-group + .text-danger,
form .text-danger:not(.btn):not(.dropdown-item) {
  display: block;
  font-size: var(--fh-text-xs);
  margin-top: 0.25rem;
}
div[asp-validation-summary] ul, .validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.form-group { margin-bottom: 1rem; }