/* Form Layout Components */

/* Reusable form structure: groups, labels, help text, sections */

@layer components {
  /* Form field wrapper with consistent bottom spacing */
  .form-group {
    margin-bottom: var(--space-lg);
  }

  /* Block-level form label */
  .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-4);
    margin-bottom: var(--space-xs);
  }

  /* Help text below form fields */
  .form-help {
    font-size: var(--font-size-sm);
    color: var(--color-gray-3);
    margin-top: var(--space-xs);
  }

  /* Section header with bottom border (used in settings cards) */
  .form-section-header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-2);
  }

  /* Informational box (e.g., role permissions, tips) */
  .info-box {
    padding: var(--space-md);
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
  }

  /* Pre-formatted code/technical output block */
  .code-block {
    padding: var(--space-md);
    background-color: var(--color-gray-1);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--color-gray-4);
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
  }

  /* Modal footer actions layout */
  .modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    width: 100%;
  }
}