<style>
    /* =========================================================
       TEMA CLARO (LIGHT MODE) GLOBAL PARA TODAS AS PÁGINAS
       ========================================================= */
    body.light-mode {
        --bg-body: #f8f8f8;
        --bg-card: #ffffff;
        --text-color: #333333;
        --border-color: #dddddd;
    }
    body.light-mode .stat-card-animated h2,
    body.light-mode .section-header,
    body.light-mode .table-custom td,
    body.light-mode .percentage,
    body.light-mode .net-val,
    body.light-mode .modal-content,
    body.light-mode h4.mt-3,
    body.light-mode label,
    body.light-mode .label-visivel,
    body.light-mode .nome-destaque,
    body.light-mode .cs-perfil span.text-white-50 {
        color: #333 !important;
    }
    body.light-mode .table-custom th,
    body.light-mode .table-video thead th {
        background: #f1f1f1 !important;
        color: #555 !important;
        border-bottom: 1px solid #ccc !important;
    }
    body.light-mode .url-box {
        background: #f1f1f1;
        border-color: #ccc;
        color: #333;
    }
    body.light-mode .vps-card,
    body.light-mode .card-custom,
    body.light-mode .card-sigma,
    body.light-mode .table-video tr {
        background: #ffffff !important;
        border-color: #ddd !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    body.light-mode .table-video td {
        background: #ffffff !important;
        color: #333 !important;
        border-bottom: 1px solid #ddd !important;
    }
    body.light-mode .circle-bg {
        stroke: #eeeeee;
    }
    body.light-mode .net-box,
    body.light-mode .cs-info-box {
        background: #f8f8f8 !important;
        border: 1px solid #ddd !important;
    }
    
    /* CABEÇALHO DESTACADO NO TEMA CLARO */
    body.light-mode .top-header {
        background: var(--primary) !important; 
        border-bottom: none;
    }
    body.light-mode .header-title,
    body.light-mode .mobile-toggle {
        color: #ffffff !important;
    }
    body.light-mode .btn-icon {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important; 
    }
    body.light-mode .btn-icon:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
    }
    
    body.light-mode .top-header span[style*="border-radius: 50px"] {
        background: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
    
    body.light-mode .form-control,
    body.light-mode .form-select,
    body.light-mode input[type="text"],
    body.light-mode input[type="date"],
    body.light-mode input[type="number"],
    body.light-mode input[type="email"],
    body.light-mode textarea { 
        background: #fff !important; 
        color: #333 !important; 
        border-color: #ccc !important; 
    }
    
    /* Ajuste para os botões dos cards SIGMA */
    body.light-mode .cs-action-item {
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.05);
    }
    body.light-mode .cs-action-item:hover {
        background: rgba(0,0,0,0.08);
    }
    body.light-mode .cs-action-text {
        color: #555 !important;
        font-weight: bold;
    }
</style>

<script>
    // Ler o tema escolhido no Dashboard e aplicar automaticamente
    document.addEventListener('DOMContentLoaded', () => {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'light') {
            document.body.classList.add('light-mode');
        } else {
            document.body.classList.remove('light-mode');
        }
    });
</script>
