/* ==========================================================================
   Estilos Base da Tabela (seu código original)
   ========================================================================== */
table .btn-one, table .btn-two, table .btn-four {
    margin-left: 10px;
}

table.table {
    border-color: var(--datatables-border) !important;
    border-bottom: none !important;
    width: 100%; /* Garante que a tabela tente preencher o contêiner */
}

table thead tr th {
    background-color: var(--datatables-background) !important;
    border-color: var(--datatables-border) !important;
    color: var(--datatables-color) !important;
    font-weight: 600;
    white-space: nowrap; /* Impede que o texto do cabeçalho quebre */
}

/* Estilo para as células da tabela */
.table > :not(caption) > * > * {
    color: var(--datatables-color);
    border-color: var(--datatables-border);
    background-color: transparent;
    padding: 12px 10px; /* Ajuste sutil no padding horizontal */
    font-size: 14px;
    vertical-align: middle; /* Alinha o conteúdo verticalmente */
}

/* Estilos para os botões dentro da tabela */
.dataTables_wrapper table tbody td .btn {
    max-width: 120px;
    white-space: nowrap; /* Evita que o texto do botão quebre */
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem; /* Ajuste para melhor toque */
    min-height: 36px;
}

/* ==========================================================================
   Estilos do DataTables (seu código original com melhorias)
   ========================================================================== */
.dataTables_wrapper .dataTables_paginate .pagination .paginate_button .page-link {
    color: var(--datatables-page-link-color);
    background-color: var(--datatables-page-link-background);
    border-color: var(--datatables-page-link-border-color);
    outline: none !important;
    box-shadow: none !important;
    font-weight: 600;
    transition: all var(--transition-fast);
}

.dataTables_wrapper .dataTables_paginate .pagination .paginate_button .page-link:hover {
    color: var(--color-one);
    background-color: var(--color-two-secondary);
}

.dataTables_wrapper .dataTables_paginate .pagination .paginate_button.active .page-link {
    background-color: var(--datatables-page-link-active-color);
    border-color: var(--datatables-page-link-active-color);
    color: var(--text-color-white) !important;
}

.dataTables_wrapper .dataTables_info {
    color: var(--datatables-color);
    font-size: 0.875rem;
}

.dataTables_wrapper .form-control {
    border: 1px solid var(--color-four-four) !important;
    background-color: var(--color-two);
    color: var(--color-three);
}

.dataTables_wrapper .form-control:focus {
    border-color: var(--color-one) !important;
    box-shadow: 0 0 0 0.2rem rgba(229, 9, 20, 0.25);
}

/* ==========================================================================
   Responsividade para Tabelas
   ========================================================================== */

/* 1. Wrapper para Rolamento Horizontal */
.table-responsive-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Para um rolamento suave em iOS */
    margin-bottom: 1rem; /* Espaçamento abaixo da tabela rolável */
    border-radius: var(--radius-medium);
}

/* 2. Ajustes para Tablets e Dispositivos Menores */
@media (max-width: 991px) {
    .table > :not(caption) > * > * {
        padding: 10px 8px;
        font-size: 13px;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        font-size: 0.8rem;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        margin-left: 0;
    }
}

/* 3. Ajustes para Smartphones */
@media (max-width: 768px) {
    .table > :not(caption) > * > * {
        padding: 8px 5px;
        font-size: 12px;
    }

    /* Botões mais compactos */
    .dataTables_wrapper table tbody td .btn {
        max-width: none; /* Remove a largura máxima */
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        min-height: 32px; /* Garante uma área de toque confortável */
    }
    
    /* Oculta colunas menos importantes (opcional, adicione a classe .hide-col-mobile às <th>/<td> que deseja ocultar) */
    .table .hide-col-mobile {
        display: none;
    }

    /* Simplifica a paginação para telas pequenas */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: none; /* Oculta todos os botões de página por padrão */
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        display: inline-block; /* Mostra apenas "Anterior" e "Próximo" */
    }
    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center; /* Centraliza os botões */
    }
}

/* 4. Ajustes para Smartphones Pequenos */
@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
        float: none !important; /* Quebra o float do Bootstrap */
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: 0.5rem;
    }

    .dataTables_wrapper .dataTables_info {
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
        float: none !important; /* Quebra o float do Bootstrap */
    }
}

/* Animação de foco para botões da tabela */
.dataTables_wrapper table tbody td .btn:focus {
    outline: 2px solid var(--color-one);
    outline-offset: 2px;
}