/* app/assets/stylesheets/components/forms.css
   ─────────────────────────────────────────────────────────────────────────────
   Form controls. Used on sign-in, invitation acceptance, and admin edit forms.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Field wrapper ───────────────────────────────────────────────────────── */

.field {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-1);
  margin-bottom: var(--space-4);
}

.field:last-of-type {
  margin-bottom: 0;
}

/* ── Label ───────────────────────────────────────────────────────────────── */

.field__label {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    600;
  color:          var(--text-primary);
  letter-spacing: var(--tracking-wide);
}

.field__label--required::after {
  content: " *";
  color:   var(--color-red-600);
}

/* ── Input, select, textarea ─────────────────────────────────────────────── */

.field__input,
.field__select,
.field__textarea {
  width:         100%;
  font-family:   var(--font-sans);
  font-size:     var(--text-base);
  color:         var(--text-primary);
  background:    var(--bg-surface);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  height:        40px;
  transition:    border-color var(--transition-fast);
}

.field__textarea {
  height:     auto;
  min-height: 96px;
  resize:     vertical;
}

.field__input:hover,
.field__select:hover,
.field__textarea:hover {
  border-color: var(--color-gray-400);
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-color: var(--color-blue-600);
  outline:        2px solid var(--color-blue-600);
  outline-offset: 1px;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-muted);
}

/* ── Hint text ───────────────────────────────────────────────────────────── */

.field__hint {
  font-size: var(--text-xs);
  color:     var(--text-secondary);
  margin-top: var(--space-1);
}

/* ── Error state ─────────────────────────────────────────────────────────── */

.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea {
  border-color: var(--color-red-600);
}

.field--error .field__input:focus,
.field--error .field__select:focus,
.field--error .field__textarea:focus {
  outline:        2px solid var(--color-red-600);
  outline-offset: 1px;
}

.field__error-message {
  font-size:  var(--text-xs);
  color:      var(--color-red-600);
  font-weight: 500;
  margin-top: var(--space-1);
}

/* ── Fieldset / group ────────────────────────────────────────────────────── */

fieldset {
  border:        1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding:       var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

legend {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-secondary);
  padding:        0 var(--space-2);
}

/* ── Checkbox / radio ────────────────────────────────────────────────────── */

.field--check {
  flex-direction: row;
  align-items:    center;
  gap:            var(--space-2);
}

.field--check input[type="checkbox"],
.field--check input[type="radio"] {
  width:  16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-blue-600);
}

/* ── Form actions strip ──────────────────────────────────────────────────── */

.form-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  margin-top:  var(--space-6);
  padding-top: var(--space-6);
  border-top:  1px solid var(--border-color);
}

/* ── Error summary (Devise-style) ────────────────────────────────────────── */

#error_explanation {
  background:    var(--color-red-100);
  border:        1px solid var(--color-red-600);
  border-radius: var(--radius-md);
  padding:       var(--space-4);
  margin-bottom: var(--space-5);
}

#error_explanation h2 {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  font-weight:  600;
  color:        var(--color-red-700);
  margin-bottom: var(--space-2);
}

#error_explanation ul {
  list-style:  disc;
  padding-left: var(--space-5);
}

#error_explanation li {
  font-size: var(--text-sm);
  color:     var(--color-red-700);
  margin-bottom: var(--space-1);
}