/* ================================================================
   🎯 FIX: CENTRALIZAÇÃO FORÇADA DOS BOTÕES DE PAGINAÇÃO
   ================================================================
   Arquivo criado para resolver problema de alinhamento à esquerda
   dos botões de paginação. Força centralização absoluta.
   ================================================================ */

/* 🎯 Container principal de paginação */
.pagination-controls {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 🎯 Container dos botões */
.pagination-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* 🎯 Override extra para forçar centralização */
.pagination-controls .pagination-buttons {
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 🎯 Info de paginação (DataTable.js usa ID #pagination-info) */
#pagination-info {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

#pagination-info > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin: 0 auto !important;
}

/* 🎯 Cada botão de paginação */
.pagination-btn {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* 🎯 Span entre botões (Página X de Y) */
.pagination-buttons span {
    text-align: center !important;
    margin: 0 8px !important;
    flex-shrink: 0 !important;
}

/* 🎯 Info de registros */
.pagination-info {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
}

/* 🎯 DataTable wrapper - garantir que não haja alinhamento herdado */
.datatable-wrapper {
    text-align: initial !important;
}

.datatable-wrapper .pagination-controls {
    text-align: center !important;
}

/* 🎯 Table content wrapper */
.table-content-wrapper {
    text-align: initial !important;
}

.table-content-wrapper .pagination-controls {
    text-align: center !important;
}

/* 🎯 Containers que podem estar interferindo */
.main-content .pagination-controls,
.table-content .pagination-controls,
#table-content .pagination-controls {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.main-content .pagination-buttons,
.table-content .pagination-buttons,
#table-content .pagination-buttons {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ================================================================
   🌓 LIGHT THEME SUPPORT
   ================================================================ */
html[data-theme="light"] .pagination-controls,
body.light-theme .pagination-controls {
    text-align: center !important;
}

html[data-theme="light"] .pagination-buttons,
body.light-theme .pagination-buttons {
    justify-content: center !important;
    margin: 0 auto !important;
}

/* ================================================================
   📱 RESPONSIVE - Manter centralização em mobile
   ================================================================ */
@media (max-width: 768px) {
    .pagination-controls {
        align-items: center !important;
        text-align: center !important;
    }
    
    .pagination-buttons {
        justify-content: center !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .pagination-buttons {
        justify-content: center !important;
    }
}