/*
 * Form Component
 *
 * Form layouts, inputs, and field styles
 */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form__hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

/* Error state */
.form__field--error .input {
  border-color: var(--color-status-error);
}

.form__error {
  font-size: var(--text-xs);
  color: var(--color-status-error);
}

/* Input styles */
.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-tertiary);
}

.input:hover {
  border-color: var(--color-border-strong);
}

.input:focus {
  outline: none;
  border-color: var(--color-interactive-default);
  box-shadow: 0 0 0 2px rgba(64, 87, 131, 0.3);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Textarea variant */
.input--textarea {
  min-height: 80px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

/* Select variant */
.input--select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239298A8' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

.input--select:focus {
  outline: none;
  border-color: var(--color-interactive-default);
  box-shadow: 0 0 0 2px rgba(64, 87, 131, 0.3);
}

/* Inline form layout */
.form--inline {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-2);
}

.form--inline .form__field {
  flex: 1;
}

.form--inline .form__actions {
  padding-top: 0;
}

/* Field row (multiple fields in a row) */
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* =========================================
 * Mobile Touch Target Overrides
 * Form inputs: min 44px height
 * ========================================= */

@media (max-width: 768px) {
  .input {
    min-height: var(--touch-target-min);
    padding: var(--space-3) var(--space-3);
    /* Slightly larger font for mobile readability */
    font-size: var(--text-md);
  }

  .input--textarea {
    min-height: 100px;
  }

  .input--select {
    min-height: var(--touch-target-min);
  }

  /* Stack form actions vertically on mobile */
  .form__actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .form__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Field rows become single column on mobile */
  .form__row {
    grid-template-columns: 1fr;
  }
}

/* =========================================
 * SMALL PHONE BREAKPOINT (480px)
 * Tighter form layout for iPhone SE
 * ========================================= */

@media (max-width: 480px) {
  .form {
    gap: var(--space-3);
  }

  /* Reduce padding on small phones */
  .input {
    padding: var(--space-2) var(--space-2);
  }
}