/* Media query para ativar os cards apenas em telas mobile (até 768px) */
@media (max-width: 480px) {
    
    /* Esconde o cabeçalho original da tabela */
    .table-card-wrapper table thead {
        display: none !important;
    }

    /* Reseta o corpo da tabela que estava com scroll e altura fixa */
    .table-card-wrapper table tbody {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Transforma cada linha (tr) em um card individual */
    .table-card-wrapper table tr {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
        background-color: #ffffff !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075) !important;
        padding: 0.5rem !important;
    }

    /* Transforma as células (td) em linhas flexíveis dentro do card */
    .table-card-wrapper table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        width: 100% !important;
        border: none !important;
        border-bottom: 1px solid #f8f9fa !important;
        padding: 0.5rem 0 !important;
    }

    /* Remove a borda inferior do último item do card */
    .table-card-wrapper table td:last-child {
        border-bottom: none !important;
    }

    /* Injeta os nomes das colunas dinamicamente no mobile */
    .table-card-wrapper table td:nth-child(1)::before { 
        content: "Id"; 
        font-weight: 600; color: #6c757d; text-align: left; margin-right: 1rem; 
    }
    .table-card-wrapper table td:nth-child(2)::before { 
        content: "Nome"; 
        font-weight: 600; color: #6c757d; text-align: left; margin-right: 1rem; 
    }
    .table-card-wrapper table td:nth-child(3)::before { 
        content: "Telefone"; 
        font-weight: 600; color: #6c757d; text-align: left; margin-right: 1rem; 
    }
    .table-card-wrapper table td:nth-child(4)::before { 
        content: "Igreja"; 
        font-weight: 600; color: #6c757d; text-align: left; margin-right: 1rem; 
    }
    .table-card-wrapper table td:nth-child(5)::before { 
        content: "Sexo"; 
        font-weight: 600; color: #6c757d; text-align: left; margin-right: 1rem; 
    }
}