</div> </div> <footer class="py-6 mt-auto border-t border-white/5 bg-[#0a0b14]">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center justify-between gap-4">
                <div class="text-center md:text-left">
                    <span class="text-[11px] font-black tracking-[3px] text-gray-500 uppercase">
                        <a href="#" class="hover:text-violet-500 transition-colors">VU FLUX</a> 
                        <span class="mx-2 opacity-20">//</span> 
                        <a href="#" class="text-violet-500/80 hover:text-violet-400">VU FLUX</a>
                    </span>
                </div>
                <div class="text-[10px] text-gray-600 font-bold uppercase tracking-widest text-center">
                    &copy; <?php echo date('Y'); ?> All Rights Reserved
                </div>
            </div>
        </div>
    </footer>
</div> </div> <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="js/bootstrap-datetimepicker.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    // 1. Inicializador de Data e Hora
    if ($("#form_datetime").length > 0) {
        $("#form_datetime").datetimepicker({
            format: 'yyyy-mm-dd hh:ii:ss', 
            autoclose: true,
            fontAwesome: true
        });
    }

    // 2. Configuração da Tabela Responsiva (Dtable)
    if ($('#Dtable').length > 0) {
        $('#Dtable').DataTable({
            "responsive": true,
            "scrollX": true, // ESSENCIAL PARA CELULAR: Cria scroll lateral na tabela
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
            "language": {
                "search": "🔍",
                "searchPlaceholder": "Pesquisar...",
                "lengthMenu": "_MENU_",
                "info": "_START_-_END_ de _TOTAL_",
                "paginate": {
                    "next": "›",
                    "previous": "‹"
                }
            }
        });
    }

    // 3. Estilização dos inputs da tabela para o tema Thailand
    $('.dataTables_filter input').addClass('bg-white/5 border border-white/10 rounded-lg px-3 py-1 text-sm text-white outline-none focus:border-violet-500/50 transition-all');
    $('.dataTables_length select').addClass('bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-sm text-gray-400 outline-none');

    // 4. Lógica de fechar alertas automaticamente
    $("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
        $(this).alert('close');
    });

    // 5. Modal de confirmação de exclusão
    $('#confirm-delete').on('show.bs.modal', function(e) {
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
    });
});
</script>

<style>
/* Refinamento de Tabelas para Mobile */
.dataTables_wrapper { 
    color: #94a3b8 !important; 
    padding: 10px 0; 
    width: 100% !important;
}

/* Força o scroll em telas pequenas */
@media (max-width: 768px) {
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .dataTables_filter, .dataTables_length {
        text-align: center !important;
        float: none !important;
        margin-bottom: 10px;
    }
}

/* Estilo da Paginação */
.dataTables_paginate .paginate_button { 
    background: rgba(255,255,255,0.05) !important; 
    border: 1px solid rgba(255,255,255,0.1) !important; 
    border-radius: 8px !important;
    color: white !important;
    margin: 2px !important;
    padding: 5px 10px !important;
}

.dataTables_paginate .paginate_button.current { 
    background: #8b5cf6 !important; 
    border-color: #8b5cf6 !important;
}
</style>

</body>
</html>