/* 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-5);
  }

  /* Block-level form label */
  .form-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--neutral-600);
    margin-bottom: var(--space-2);
  }

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

  /* Section header with bottom border (used in settings cards) */
  .form-section-header {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--neutral-200);
  }

  /* Informational box (e.g., role permissions, tips) */
  .info-box {
    padding: var(--space-4);
    background-color: var(--surface-sunken);
    border-radius: var(--radius-2);
    margin-bottom: var(--space-5);
  }

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

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