/* 5. UserInfo Component */
.user-info__avatar {
    @apply h-8 w-8 overflow-hidden;
    border-radius: var(--radius);
}

.user-info__details {
    @apply grid flex-1 text-left text-sm leading-tight;

    .user-info__name {
        @apply truncate font-medium;
        color: var(--foreground);
    }

    .user-info__email {
        @apply truncate text-xs;
        color: var(--muted-foreground);
    }
}