/* Adicione este código ao final do seu arquivo style.css */

/* =============================================== */
/* ESTILOS PARA TABELAS RESPONSIVAS EM CARDS       */
/* =============================================== */

/* O breakpoint '991.98px' corresponde ao 'lg' do Bootstrap.
   A tabela se transforma em telas de tablet para baixo. */
@media (max-width: 991.98px) {
    .table-responsive-admin thead {
        /* Esconde o cabeçalho da tabela no mobile/tablet */
        display: none;
    }

    .table-responsive-admin tr {
        /* Cada linha vira um card */
        display: block;
        border: 1px solid var(--bs-border-color);
        border-radius: 0.375rem; /* var(--bs-border-radius) */
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .table-responsive-admin td {
        /* Cada célula ocupa a largura total e fica uma abaixo da outra */
        display: block;
        text-align: right; /* Alinha o conteúdo à direita */
        border: none;
        padding-left: 50%; /* Deixa espaço à esquerda para o rótulo */
        position: relative;
    }

    .table-responsive-admin td:before {
        /* Adiciona o rótulo (ex: "Nome:", "Status:") antes do conteúdo */
        content: attr(data-label); /* Pega o texto do atributo 'data-label' */
        position: absolute;
        left: 1rem; /* Alinha o rótulo à esquerda */
        font-weight: bold;
        text-align: left;
        white-space: nowrap;
    }

    /* Ajustes específicos para as células */
    .table-responsive-admin td:first-child {
        /* O primeiro item (Nome) fica maior e centralizado */
        font-size: 1.25rem;
        font-weight: bold;
        text-align: center;
        padding-left: 0;
        margin-bottom: 0.5rem;
    }
    .table-responsive-admin td:first-child:before {
        /* Esconde o rótulo "Nome:" no primeiro item */
        display: none;
    }

    .table-responsive-admin td:last-child {
        /* A célula de ações fica centralizada */
        text-align: center;
        padding-left: 0;
        margin-top: 1rem;
    }
}