@layer components {


    /* Adicione estas classes à camada @layer components do seu CSS */

    /* --- Estrutura da Lista de Usuários --- */
    .user-list-content {
        /* Padding e limite de altura com scroll */
        @apply p-4 max-h-[500px] overflow-y-auto;
    }

    .user-grid {
        @apply grid gap-4;
    }

    .user-card-item {
        /* Estilo básico de cada item na lista */
        @apply flex justify-between items-center bg-gray-50 p-3 rounded-lg border border-gray-200 transition-shadow duration-150;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .user-card-item:hover {
        @apply shadow-md border-blue-300;
    }

    .user-info {
        @apply flex flex-col;
    }

    .user-name {
        @apply font-semibold text-gray-900;
    }

    .user-email {
        @apply text-sm text-gray-500;
    }

    .user-details {
        /* Garante que os itens fiquem alinhados e espaçados */
        @apply flex items-center space-x-3;
    }

    .user-actions-group {
        /* Define o grupo de botões de ação */
        @apply flex space-x-2 ml-4;
        /* Espaçamento à esquerda para separar dos detalhes */
    }

    .action-button {
        /* Estilo base para os ícones clicáveis */
        @apply p-1 rounded-full transition-colors duration-150;
        /* Cores já definidas inline: text-blue-600, text-red-600 */
    }

    .action-button:hover {
        @apply bg-gray-200;
    }

    .user-permission {
        /* Estilo para a tag de permissão */
        @apply text-xs font-medium px-2 py-0.5 rounded-full bg-blue-100 text-blue-800;
    }

    .user-status {
        @apply text-xs text-green-600;
    }

    /* *IMPORTANTE*: Se o modal ficar muito estreito, adicione w-full max-w-2xl à classe .modal-container 
   ou crie uma classe específica para este modal.
*/
}