/* OficinaFlow Design System — Forms */
.of-field,
.form-field,
.form-group { display: grid; gap: 6px; }

.of-label,
.form-label,
.form-field > label,
.form-group > label {
  color: var(--text-secondary);
  font-size: var(--font-size-secondary);
  font-weight: var(--font-weight-semibold);
}

.of-input,
.of-select,
.of-textarea,
.form-control,
.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea,
.toolbar-input,
.toolbar-select {
  width: 100%;
  min-height: var(--control-height);
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.of-textarea,
.form-field textarea { min-height: 92px; resize: vertical; }

.of-input:hover,
.of-select:hover,
.of-textarea:hover,
.form-control:hover,
.form-field input:not([type="checkbox"]):not([type="radio"]):hover,
.form-field select:hover,
.form-field textarea:hover { border-color: #CCD1D9; }

.of-input:focus,
.of-select:focus,
.of-textarea:focus,
.form-control:focus,
.form-field input:not([type="checkbox"]):not([type="radio"]):focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--focus-border);
  box-shadow: var(--focus-ring);
}

.of-input::placeholder,
.of-textarea::placeholder,
.form-control::placeholder,
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); }

.of-input:disabled,
.of-select:disabled,
.of-textarea:disabled,
.form-control:disabled,
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background: var(--gray-bg);
  color: var(--text-muted);
  cursor: not-allowed;
}

.of-field--error .of-input,
.of-field--error .of-select,
.of-field--error .of-textarea,
.input-validation-error { border-color: var(--red); }

.of-field--error .of-input:focus,
.of-field--error .of-select:focus,
.of-field--error .of-textarea:focus,
.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(216, 67, 58, .14); }

.of-field__error,
.field-validation-error,
.text-danger,
.validation { color: var(--red-text); font-size: var(--font-size-caption); }

.of-field__hint { color: var(--text-muted); font-size: var(--font-size-caption); }

input[type="checkbox"],
input[type="radio"] { accent-color: var(--amber); }

.of-input--mono,
input[data-identifier="true"] {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  letter-spacing: .01em;
}