/* public/assets/ui/framework/13_forms.css
   KomodUI Forms v0.1
   Unified inputs, labels, help text, selects, textarea.
*/

.form {
  width: 100%;
  min-width: 0;
}

.field {
  display: block;
  margin-bottom: var(--space-4);
  min-width: 0;
}

.label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text-heading);
}

.help {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

.error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-danger);
  line-height: var(--line-height-normal);
}

/* Inputs */
.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;

  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);

  background: var(--color-bg-white);
  color: var(--color-text-main);

  font-family: inherit;
  font-size: var(--text-md);
  line-height: 1.2;

  transition: var(--transition);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus */
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}

/* Placeholder */
.input::placeholder,
.textarea::placeholder {
  color: rgba(107, 114, 128, 0.85);
}

/* Disabled */
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: rgba(249, 250, 251, 0.9);
  color: rgba(107, 114, 128, 0.9);
  cursor: not-allowed;
}

/* Invalid state (optional class) */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Inline controls row */
.field-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.field-row > * {
  min-width: 0;
}

@media (max-width: 576px) {
  .field-row {
    flex-direction: column;
    align-items: stretch;
  }
}