<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - NEXI PRO</title>

    <!-- Bootstrap 5.3.2 & Icons CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    
    <!-- FullCalendar CDN (v6 já injeta os estilos automaticamente via JS) -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>


    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Custom Modern Design System -->
    <link href="/css/style.css" rel="stylesheet" />

    <!-- PWA (Progressive Web App) Manifest & Meta Tags -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#00D2EE">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="NEXI PRO">
    <link rel="apple-touch-icon" href="/images/nexipro-icon-official.png">
</head>
<body>

    <!-- Renderiza o conteúdo dinâmico (Auth ou Dashboard) -->
    <!DOCTYPE html>
<html>
<body>

<div class="app-layout">
    <!-- SIDEBAR -->
    <aside class="app-sidebar" id="appSidebar">
        <!-- CABEÇALHO COM LOGO & EMPRESA -->
        <div class="sidebar-header">
            <a href="/manifest.json/home"
                style="text-align: center; display: block; text-decoration: none; width: 100%;">
                <!-- 1. Logotipo Oficial NEXI PRO (Sempre fixo no topo) -->
                <img src="/images/nexipro-logo.svg" alt="NEXI PRO" class="sidebar-nexipro-logo"
                    onerror="this.style.display='none'; document.getElementById('sidebarNexiFallback').style.display='block';" />
                <div id="sidebarNexiFallback" style="display: none;" class="sidebar-brand-name">NEXI PRO</div>

                <!-- Divisor sutil entre a plataforma e o estabelecimento -->
                <div class="sidebar-brand-divider"></div>

                <!-- 2. Identificação da Empresa (Logotipo da empresa ou Nome em texto) -->
                <div class="sidebar-empresa-brand">
                    <!-- Quando tiver logotipo da empresa cadastrado: exibe a imagem da logo do salão -->
                    

                    <!-- Quando NÃO tiver logotipo: exibe o nome em texto -->
                    <div class="sidebar-brand-name">NEXI PRO</div>
                </div>

                <!-- 3. Informação do Tipo / Segmento da Empresa (Sempre visível abaixo) -->
                <div class="sidebar-brand-tag">GESTÃO INTELIGENTE</div>
            </a>
        </div>

        <!-- NAVEGAÇÃO PRINCIPAL -->
        <nav class="sidebar-nav">
            <div class="nav-section-title">Principal</div>

            <a href="/manifest.json/home" class="nav-link active">
                <i class="bi bi-grid-1x2-fill"></i>
                <span>Dashboard</span>
            </a>

            <a href="/manifest.json/agendamentos" class="nav-link">
                <i class="bi bi-calendar3"></i>
                <span>Agenda & Atendimentos</span>
            </a>

            <a href="/manifest.json/meus-ganhos" class="nav-link">
                <i class="bi bi-wallet2 text-success"></i>
                <span>Meus Ganhos (Comissões)</span>
            </a>

            <div class="nav-section-title">Operação & Vendas</div>

            <a href="/manifest.json/financeiro" class="nav-link">
                <i class="bi bi-cash-stack"></i>
                <span>Financeiro & Caixa</span>
            </a>

            <a href="/manifest.json/estoque" class="nav-link">
                <i class="bi bi-box-seam-fill"></i>
                <span>Estoque & Produtos</span>
            </a>

            <a href="/manifest.json/fidelizacao" class="nav-link">
                <i class="bi bi-heart-fill"></i>
                <span>Fidelização & CRM</span>
            </a>

            <a href="/manifest.json/divulgacao" class="nav-link">
                <i class="bi bi-qr-code-scan text-primary"></i>
                <span>Divulgação & QR Code</span>
            </a>

            <div class="nav-section-title">Cadastros</div>

            <a href="/manifest.json/clientes" class="nav-link">
                <i class="bi bi-people-fill"></i>
                <span>Clientes</span>
            </a>

            <a href="/manifest.json/servicos" class="nav-link">
                <i class="bi bi-scissors"></i>
                <span>Catálogo de Serviços</span>
            </a>

            

            

            

            

            

            

            
        </nav>


        <!-- USUÁRIO LOGADO & LOGOUT -->
        <div class="sidebar-footer">
            <div class="sidebar-user">
                <div class="user-avatar">
                    <span>U</span>
                </div>
                <div class="user-info">
                    <div class="user-name">Visitante</div>
                    
                    
                    <div class="user-role">Colaborador</div>
                </div>
                <form action="/logout" method="post" style="display: inline; margin: 0;"><input type="hidden" name="_csrf" value="mw1D9V-ArCw-qPCPnquQ7U6hYDQsPvcrHBzO5ETw-THg8B2iozp3zWexyBoTnMi7p4ak2HqVTQ0ZXZYGKSX61nLHygDZyHnH"/>
                    <input type="hidden" name="_csrf" value="mw1D9V-ArCw-qPCPnquQ7U6hYDQsPvcrHBzO5ETw-THg8B2iozp3zWexyBoTnMi7p4ak2HqVTQ0ZXZYGKSX61nLHygDZyHnH" />
                    <button type="submit" class="btn-logout" title="Sair do Sistema">
                        <i class="bi bi-box-arrow-right"></i>
                    </button>
                </form>
            </div>
        </div>

        <!-- TAB & WINDOW CLOSE AUTO-LOGOUT GUARD -->
        <script>
            (function() {
                const TAB_ID = sessionStorage.getItem('nexi_tab_id') || ('tab_' + Math.random().toString(36).substring(2, 10));
                try {
                    sessionStorage.setItem('nexi_tab_id', TAB_ID);
                } catch(e) {}

                function getActiveTabs() {
                    try {
                        const raw = localStorage.getItem('nexi_active_tabs');
                        const tabs = raw ? JSON.parse(raw) : {};
                        const now = Date.now();
                        const freshTabs = {};
                        for (const [id, time] of Object.entries(tabs)) {
                            if (now - time < 20000) {
                                freshTabs[id] = time;
                            }
                        }
                        return freshTabs;
                    } catch (e) {
                        return {};
                    }
                }

                function pingTab() {
                    try {
                        const tabs = getActiveTabs();
                        tabs[TAB_ID] = Date.now();
                        localStorage.setItem('nexi_active_tabs', JSON.stringify(tabs));
                    } catch (e) {}
                }

                // 1. Guard de Autenticação da Aba (Evita sessões zumbis ao reabrir navegador ou aba)
                try {
                    const isTabAuth = sessionStorage.getItem('nexi_tab_authenticated');
                    const activeTabs = getActiveTabs();
                    const otherActiveTabs = Object.keys(activeTabs).filter(id => id !== TAB_ID);

                    if (!isTabAuth) {
                        if (otherActiveTabs.length > 0) {
                            // Outra aba do mesmo navegador está ativa e autenticada
                            sessionStorage.setItem('nexi_tab_authenticated', 'true');
                        } else {
                            // Nenhuma aba ativa e esta aba não possui sessão: invalida sessão e vai para logout
                            window.location.replace('/logout');
                            return;
                        }
                    }
                } catch (e) {}

                // Registra ping imediatamente e em loop regular
                pingTab();
                const pingInterval = setInterval(pingTab, 5000);

                // 2. Detecção de Navegação Interna vs Fechamento Real
                let isInternalNavigation = false;

                document.addEventListener('click', function(e) {
                    const link = e.target.closest('a');
                    if (link && link.href) {
                        const href = link.getAttribute('href');
                        if (!href || href.startsWith('#') || href.startsWith('javascript:')) {
                            return;
                        }
                        if (link.target === '_blank') {
                            return;
                        }
                        isInternalNavigation = true;
                    }
                }, true);

                document.addEventListener('submit', function() {
                    isInternalNavigation = true;
                }, true);

                window.addEventListener('keydown', function(e) {
                    if (e.key === 'F5' || ((e.ctrlKey || e.metaKey) && (e.key === 'r' || e.key === 'R'))) {
                        isInternalNavigation = true;
                    }
                });

                window.addEventListener('popstate', function() {
                    isInternalNavigation = true;
                });

                // 3. Ao fechar a aba ou janela
                window.addEventListener('pagehide', function() {
                    let isReload = false;
                    try {
                        const navEntries = performance.getEntriesByType("navigation");
                        if (navEntries.length > 0 && navEntries[0].type === "reload") {
                            isReload = true;
                        }
                    } catch (err) {}

                    if (isInternalNavigation || isReload) {
                        return;
                    }

                    clearInterval(pingInterval);

                    try {
                        const tabs = getActiveTabs();
                        delete tabs[TAB_ID];
                        localStorage.setItem('nexi_active_tabs', JSON.stringify(tabs));

                        const remainingCount = Object.keys(tabs).length;
                        if (remainingCount === 0) {
                            sessionStorage.removeItem('nexi_tab_authenticated');
                            localStorage.removeItem('nexi_active_tabs');

                            if (navigator.sendBeacon) {
                                navigator.sendBeacon('/api/auth/tab-logout');
                            } else {
                                fetch('/api/auth/tab-logout', { method: 'POST', keepalive: true });
                            }
                        }
                    } catch (err) {
                        if (navigator.sendBeacon) {
                            navigator.sendBeacon('/api/auth/tab-logout');
                        }
                    }
                });

                // 4. Logout manual via botão Sair
                const logoutBtn = document.querySelector('.btn-logout');
                if (logoutBtn) {
                    logoutBtn.closest('form')?.addEventListener('submit', function() {
                        try {
                            sessionStorage.removeItem('nexi_tab_authenticated');
                            sessionStorage.removeItem('nexi_tab_id');
                            const tabs = getActiveTabs();
                            delete tabs[TAB_ID];
                            localStorage.setItem('nexi_active_tabs', JSON.stringify(tabs));
                        } catch(e) {}
                    });
                }
            })();
        </script>
    </aside>

    <!-- MAIN AREA -->
    <div class="app-main">
        <!-- TOPBAR -->
        <header class="app-topbar">
        <div class="topbar-left">
            <button class="btn btn-secondary d-lg-none" type="button" onclick="toggleSidebar()"
                style="padding: 0.4rem 0.6rem;">
                <i class="bi bi-list" style="font-size: 1.25rem;"></i>
            </button>
            <div>
                <h1 class="topbar-title">
                    <span>Dashboard</span>
                </h1>
                <div class="topbar-subtitle">Bem-vindo ao sistema de gestão do empresarial</div>
            </div>
        </div>

        <div class="topbar-right d-flex align-items-center gap-2">
            <!-- IDENTIFICAÇÃO DO SALÃO (LOGO & NOME) -->
            

            <!-- BADGE DE STATUS DE ASSINATURA / TRIAL -->
            <!-- 1. Período de Testes Ativo -->
            <button type="button" class="btn-trial-badge" data-bs-toggle="modal" data-bs-target="#modalPlanosSaaS"
                title="Sua empresa está no período de teste gratuito. Clique para conhecer os planos.">
                <i class="bi bi-stars text-warning"></i>
                <span>Teste: <strong>7 dias</strong></span>
                <span class="badge-upgrade-text">Assinar</span>
            </button>

            <!-- 2. Assinatura Expirada -->
            

            <!-- 3. Assinatura Regular Ativa -->
            

            <!-- 4. Fatura em Atraso / Inadimplente -->
            

            <!-- 5. Assinatura Cancelada -->
            

            <!-- Badge de Relógio / Data -->
            <div class="topbar-time-badge d-none d-md-flex">
                <i class="bi bi-clock"></i>
                <span id="topbarLiveClock">Hoje</span>
            </div>
        </div>

        <!-- MODAL DE PLANOS E UPGRADE SAAS -->
        <div class="modal fade" id="modalPlanosSaaS" tabindex="-1" aria-labelledby="modalPlanosSaaSLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content"
                    style="border-radius: 20px; overflow: hidden; border: 1px solid rgba(197, 160, 89, 0.35);">
                    <div class="modal-header"
                        style="background: linear-gradient(135deg, #0b0f19 0%, #1e293b 100%); color: #ffffff; border-bottom: 1px solid rgba(197, 160, 89, 0.2);">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-gem text-warning fs-4"></i>
                            <div>
                                <h5 class="modal-title mb-0" id="modalPlanosSaaSLabel"
                                    style="font-family: var(--font-sans); font-weight: 700;">Planos & Assinatura NEXI PRO
                                </h5>
                                <div style="font-size: 0.8rem; color: #94a3b8;">Estabelecimento: Seu Estabelecimento • 7 dias restantes de teste</div>
                            </div>
                        </div>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>

                    <div class="modal-body p-4" style="background: #f8fafc;">
                        <!-- BANNER DIRETO DE FATURA ASAAS SE EXISTIR LINK DE FATURA ATUAL -->
                        

                        <p class="text-secondary text-center mb-4" style="font-size: 0.95rem;">
                            Escolha o plano ideal para a estrutura da sua equipe e mantenha sua empresa funcionando sem
                            interrupções.
                        </p>

                        <div class="row g-3">
                            <!-- PLANO SOLO -->
                            <div class="col-md-4">
                                <div class="card h-100 border p-3 text-center"
                                    style="border-radius: 16px; background: #ffffff;">
                                    <h6 class="fw-bold mb-1">Plano Solo</h6>
                                    <div class="text-muted" style="font-size: 0.75rem; min-height: 32px;">Profissional
                                        autônomo individual</div>
                                    <div class="my-3">
                                        <span class="fs-6 fw-bold">R$</span>
                                        <span class="fs-2 fw-bolder text-dark">59</span>
                                        <span class="text-muted" style="font-size: 0.8rem;">/mês</span>
                                    </div>
                                    <ul class="list-unstyled text-start small text-secondary mb-3"
                                        style="font-size: 0.82rem; line-height: 1.7;">
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> 1 Profissional
                                        </li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Agendamentos
                                            ilimitados</li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Link na bio do
                                            Instagram</li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Anamnese digital
                                            touch</li>
                                    </ul>
                                    <a href="https://wa.me/5511999999999?text=Ol%C3%A1!%20Gostaria%20de%20ativar%20o%20Plano%20Solo%20para%20a%20minha%20empresa:%20Empresa%20(Slug:%20manifest.json)"
                                        target="_blank"
                                        class="btn btn-outline-dark btn-sm rounded-pill mt-auto fw-bold">
                                        <i class="bi bi-whatsapp me-1 text-success"></i> Ativar Solo
                                    </a>
                                </div>
                            </div>

                            <!-- PLANO STUDIO (DESTAQUE) -->
                            <div class="col-md-4">
                                <div class="card h-100 border p-3 text-center position-relative shadow-sm"
                                    style="border-radius: 16px; background: linear-gradient(180deg, #ffffff 0%, #fffbf0 100%); border-color: var(--accent-gold) !important; border-width: 2px !important;">
                                    <span class="position-absolute top-0 start-50 translate-middle badge rounded-pill"
                                        style="background: var(--accent-gold); color: #0b0f19; font-size: 0.68rem; font-weight: 800; text-transform: uppercase;">Mais
                                        Popular</span>
                                    <h6 class="fw-bold mb-1 mt-1 text-dark">Plano Studio</h6>
                                    <div class="text-muted" style="font-size: 0.75rem; min-height: 32px;">Equipes até 5
                                        profissionais</div>
                                    <div class="my-3">
                                        <span class="fs-6 fw-bold">R$</span>
                                        <span class="fs-2 fw-bolder text-dark">129</span>
                                        <span class="text-muted" style="font-size: 0.8rem;">/mês</span>
                                    </div>
                                    <ul class="list-unstyled text-start small text-secondary mb-3"
                                        style="font-size: 0.82rem; line-height: 1.7;">
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> <strong>Até 5
                                                Profissionais</strong></li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> <strong>WhatsApp
                                                Automático</strong></li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Comissões
                                            automáticas</li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Ficha técnica &
                                            estoque</li>
                                    </ul>
                                    <a href="https://wa.me/5511999999999?text=Ol%C3%A1!%20Gostaria%20de%20ativar%20o%20Plano%20Studio%20para%20a%20minha%20empresa:%20Empresa%20(Slug:%20manifest.json)"
                                        target="_blank"
                                        class="btn btn-warning btn-sm rounded-pill mt-auto fw-bold text-dark"
                                        style="background: linear-gradient(135deg, #c5a059 0%, #dfba73 100%); border: none;">
                                        <i class="bi bi-whatsapp me-1"></i> Ativar Studio
                                    </a>
                                </div>
                            </div>

                            <!-- PLANO VIP -->
                            <div class="col-md-4">
                                <div class="card h-100 border p-3 text-center"
                                    style="border-radius: 16px; background: #ffffff;">
                                    <h6 class="fw-bold mb-1">Plano VIP</h6>
                                    <div class="text-muted" style="font-size: 0.75rem; min-height: 32px;">Grandes salões
                                        e clínicas</div>
                                    <div class="my-3">
                                        <span class="fs-6 fw-bold">R$</span>
                                        <span class="fs-2 fw-bolder text-dark">229</span>
                                        <span class="text-muted" style="font-size: 0.8rem;">/mês</span>
                                    </div>
                                    <ul class="list-unstyled text-start small text-secondary mb-3"
                                        style="font-size: 0.82rem; line-height: 1.7;">
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i>
                                            <strong>Profissionais Ilimitados</strong>
                                        </li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> DRE & Margem real
                                        </li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Inteligência
                                            Anti-Churn</li>
                                        <li><i class="bi bi-check-circle-fill text-success me-1"></i> Suporte
                                            prioritário VIP</li>
                                    </ul>
                                    <a href="https://wa.me/5511999999999?text=Ol%C3%A1!%20Gostaria%20de%20ativar%20o%20Plano%20VIP%20para%20a%20minha%20empresa:%20Empresa%20(Slug:%20manifest.json)"
                                        target="_blank"
                                        class="btn btn-outline-dark btn-sm rounded-pill mt-auto fw-bold">
                                        <i class="bi bi-whatsapp me-1 text-success"></i> Ativar VIP
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-light border mt-4 mb-0 d-flex align-items-center gap-2 p-2"
                            style="border-radius: 12px; font-size: 0.82rem;">
                            <i class="bi bi-shield-check text-success fs-5"></i>
                            <div>
                                <strong>Pagamento Flexível via Pix ou Cartão:</strong> Ativação imediata em horário
                                comercial. Chave Pix e nota fiscal emitidas automaticamente.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- MODAL GLOBAL DE CONFIRMAÇÃO ELEGANTE & LUXO (Substitui confirm() nativo do navegador) -->
        <div class="modal fade" id="luxConfirmModal" tabindex="-1" aria-labelledby="luxConfirmTitle" aria-hidden="true" style="z-index: 1060;">
            <div class="modal-dialog modal-dialog-centered" style="max-width: 420px; z-index: 1065; position: relative;">
                <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); position: relative; z-index: 1070;">
                    <div class="modal-body p-4 text-center">
                        <div id="luxConfirmIconContainer" class="d-inline-flex align-items-center justify-content-center mb-3" 
                             style="width: 68px; height: 68px; border-radius: 50%; background: rgba(239, 68, 68, 0.12); color: #dc2626; font-size: 1.85rem; transition: all 0.3s ease;">
                            <i id="luxConfirmIcon" class="bi bi-trash3-fill"></i>
                        </div>
                        <h5 class="modal-title fw-bold mb-2" id="luxConfirmTitle" style="color: #0f172a; font-size: 1.2rem; letter-spacing: -0.02em;">Confirmar Exclusão</h5>
                        <p class="text-secondary mb-4" id="luxConfirmMessage" style="font-size: 0.92rem; line-height: 1.5; color: #64748b; margin-bottom: 1.75rem;">
                            Tem certeza que deseja prosseguir? Esta operação não poderá ser desfeita.
                        </p>
                        <div class="d-flex gap-2 justify-content-center">
                            <button type="button" class="btn btn-light flex-fill fw-semibold py-2" data-bs-dismiss="modal" id="luxConfirmCancelBtn" 
                                    style="border-radius: 12px; border: 1px solid #e2e8f0; color: #475569; font-size: 0.92rem; cursor: pointer; position: relative; z-index: 1080;">
                                Cancelar
                            </button>
                            <button type="button" class="btn btn-danger flex-fill fw-semibold py-2" id="luxConfirmOkBtn" 
                                    style="border-radius: 12px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border: none; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); font-size: 0.92rem; cursor: pointer; position: relative; z-index: 1080;">
                                Sim, Confirmar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bootstrap 5 Bundle JS garantido -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

        <script>
            // Mover o modal imediatamente para o document.body para eliminar qualquer conflito de stacking context / z-index de containers pais
            function relocLuxModalToBody() {
                const m = document.getElementById('luxConfirmModal');
                if (m && m.parentNode !== document.body) {
                    document.body.appendChild(m);
                }
                return m;
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', relocLuxModalToBody);
            } else {
                relocLuxModalToBody();
            }

            function updateLiveClock() {
                const el = document.getElementById('topbarLiveClock');
                if (el) {
                    const now = new Date();
                    const options = { weekday: 'short', day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' };
                    el.textContent = now.toLocaleDateString('pt-BR', options);
                }
            }
            updateLiveClock();
            setInterval(updateLiveClock, 30000);

            function toggleSidebar() {
                const sidebar = document.getElementById('appSidebar');
                if (sidebar) {
                    sidebar.classList.toggle('show');
                }
            }

            /**
             * Modal Global de Confirmação Sofisticado (Anti-alert / Anti-confirm)
             */
            window.luxConfirmAction = function(options) {
                const config = Object.assign({
                    title: 'Confirmar Ação',
                    message: 'Tem certeza que deseja prosseguir?',
                    confirmText: 'Confirmar',
                    cancelText: 'Cancelar',
                    type: 'danger',
                    onConfirm: () => {}
                }, typeof options === 'string' ? { title: options } : options);

                const modalEl = relocLuxModalToBody();
                if (!modalEl || typeof bootstrap === 'undefined' || !bootstrap.Modal) {
                    if (confirm(`${config.title}\n\n${config.message}`)) {
                        if (typeof config.onConfirm === 'function') config.onConfirm();
                    }
                    return;
                }

                const titleEl = document.getElementById('luxConfirmTitle');
                const msgEl = document.getElementById('luxConfirmMessage');
                const okBtn = document.getElementById('luxConfirmOkBtn');
                const cancelBtn = document.getElementById('luxConfirmCancelBtn');
                const iconContainer = document.getElementById('luxConfirmIconContainer');
                const iconEl = document.getElementById('luxConfirmIcon');

                if (titleEl) titleEl.textContent = config.title;
                if (msgEl) msgEl.textContent = config.message;
                if (cancelBtn) cancelBtn.textContent = config.cancelText;

                // Estilização conforme o tipo
                if (config.type === 'danger') {
                    if (iconContainer) {
                        iconContainer.style.background = 'rgba(239, 68, 68, 0.12)';
                        iconContainer.style.color = '#dc2626';
                    }
                    if (iconEl) iconEl.className = 'bi bi-trash3-fill';
                    if (okBtn) {
                        okBtn.className = 'btn btn-danger flex-fill fw-semibold py-2';
                        okBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
                        okBtn.style.boxShadow = '0 4px 12px rgba(220, 38, 38, 0.3)';
                    }
                } else if (config.type === 'warning') {
                    if (iconContainer) {
                        iconContainer.style.background = 'rgba(245, 158, 11, 0.12)';
                        iconContainer.style.color = '#d97706';
                    }
                    if (iconEl) iconEl.className = 'bi bi-exclamation-triangle-fill';
                    if (okBtn) {
                        okBtn.className = 'btn btn-warning flex-fill fw-semibold py-2 text-dark';
                        okBtn.style.background = 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)';
                        okBtn.style.boxShadow = '0 4px 12px rgba(217, 119, 6, 0.3)';
                    }
                } else {
                    if (iconContainer) {
                        iconContainer.style.background = 'rgba(212, 175, 55, 0.15)';
                        iconContainer.style.color = '#c5a059';
                    }
                    if (iconEl) iconEl.className = 'bi bi-question-circle-fill';
                    if (okBtn) {
                        okBtn.className = 'btn btn-gold-action flex-fill fw-semibold py-2';
                        okBtn.style.background = 'linear-gradient(135deg, #c5a059 0%, #9e7d3b 100%)';
                        okBtn.style.boxShadow = '0 4px 12px rgba(197, 160, 89, 0.3)';
                    }
                }

                if (okBtn) okBtn.textContent = config.confirmText;

                const bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);

                // Clonar botão para limpar listeners anteriores
                const newOkBtn = okBtn.cloneNode(true);
                okBtn.parentNode.replaceChild(newOkBtn, okBtn);

                newOkBtn.addEventListener('click', () => {
                    bsModal.hide();
                    if (typeof config.onConfirm === 'function') {
                        config.onConfirm();
                    }
                });

                if (cancelBtn) {
                    cancelBtn.onclick = () => bsModal.hide();
                }

                bsModal.show();
            };

            /**
             * Atalho simplificado para exclusões e remoções seguras
             * Suporta forms, botões dentro de forms, URLs e callbacks
             */
            window.luxConfirmDelete = function(target, title, message) {
                let formToSubmit = null;
                let urlToRedirect = null;
                let callbackToRun = null;

                if (typeof target === 'function') {
                    callbackToRun = target;
                } else if (typeof target === 'string') {
                    urlToRedirect = target;
                } else if (target && target.tagName === 'FORM') {
                    formToSubmit = target;
                } else if (target && target.form) {
                    formToSubmit = target.form;
                } else if (target && typeof target.closest === 'function') {
                    formToSubmit = target.closest('form');
                }

                window.luxConfirmAction({
                    title: title || 'Confirmar Exclusão',
                    message: message || 'Deseja realmente excluir este registro? Esta ação é irreversível.',
                    confirmText: 'Sim, Excluir',
                    cancelText: 'Cancelar',
                    type: 'danger',
                    onConfirm: () => {
                        if (callbackToRun) {
                            callbackToRun();
                        } else if (formToSubmit) {
                            if (typeof HTMLFormElement.prototype.submit === 'function') {
                                HTMLFormElement.prototype.submit.call(formToSubmit);
                            } else {
                                formToSubmit.submit();
                            }
                        } else if (urlToRedirect) {
                            window.location.href = urlToRedirect;
                        }
                    }
                });
            };

            // Compatibilidade retroativa para chamadas luxConfirm
            window.luxConfirm = function(title, message, onConfirm) {
                window.luxConfirmAction({
                    title: title,
                    message: message,
                    confirmText: 'Confirmar',
                    cancelText: 'Cancelar',
                    type: 'gold',
                    onConfirm: onConfirm
                });
            };
        </script>
    </header>

        <!-- CONTEÚDO PRINCIPAL -->
        <main class="page-content">
            <!-- BANNER DE BOAS-VINDAS & APRESENTAÇÃO -->
            <div>
        <!-- 1. BANNER DE BOAS-VINDAS PRINCIPAL -->
        <div class="content-card mb-4"
            style="background: linear-gradient(135deg, #0b0f19 0%, #1e293b 100%); color: #ffffff; border: 1px solid rgba(197, 160, 89, 0.3);">
            <div class="p-4 d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
                <div>
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="badge"
                            style="background-color: var(--accent-gold); color: #0b0f19; font-weight: 700; font-size: 0.75rem; letter-spacing: 1px;">PAINEL
                            OPERACIONAL</span>
                        <span class="text-white-50" style="font-size: 0.8rem;">NEXI PRO Empresa</span>
                        <span class="badge bg-warning text-dark" style="font-size: 0.72rem; font-weight: 700;">
                            <i class="bi bi-clock-history me-1"></i>Teste: <span>7 dias</span>
                        </span>
                    </div>
                    <h2 class="mb-1" style="font-family: var(--font-serif); font-size: 1.75rem; color: #ffffff;">
                        Olá, <span
                            style="color: var(--accent-gold);">Visitante</span>!
                    </h2>
                    <p class="mb-0 text-white-50" style="font-size: 0.92rem;">
                        Bem-vindo ao <strong>NEXI PRO</strong>. Acompanhe atendimentos, equipe e faturamento em tempo real no próximo nível do seu negócio.
                    </p>
                </div>

                <!-- AÇÕES RÁPIDAS NO TOPO -->
                <div class="d-flex gap-2 flex-wrap">
                    <a href="/manifest.json/agendar" target="_blank" class="btn btn-sm"
                        style="background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px; padding: 0.45rem 1rem;">
                        <i class="bi bi-box-arrow-up-right me-1 text-warning"></i>
                        <span>Ver Página de Agendamento</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- 2. CHECKLIST DE ONBOARDING GUIADO (DEV-01: 4 PASSOS PLG - ZEIGARNIK EFFECT) -->
        <div id="onboardingCard" class="content-card mb-4" 
             style="background: linear-gradient(135deg, #0B0E14 0%, #161B26 100%); border-radius: 16px; border: 1px solid rgba(0, 210, 238, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); position: relative; overflow: hidden;">
            
            <!-- Brilho sutil no fundo -->
            <div style="position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(0, 210, 238, 0.12) 0%, transparent 70%); pointer-events: none;"></div>

            <div class="p-4 position-relative">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div class="d-flex align-items-center gap-3">
                        <div style="width: 42px; height: 42px; border-radius: 12px; background: rgba(0, 210, 238, 0.15); border: 1px solid rgba(0, 210, 238, 0.3); display: flex; align-items: center; justify-content: center; color: #00D2EE; font-size: 1.3rem;">
                            <i class="bi bi-rocket-takeoff-fill"></i>
                        </div>
                        <div>
                            <div class="d-flex align-items-center gap-2">
                                <h5 class="mb-0 fw-bold text-white" style="font-size: 1.15rem; letter-spacing: -0.2px;">Guia de Ativação da Empresa</h5>
                                <span class="badge" style="background: rgba(0, 210, 238, 0.2); color: #00D2EE; border: 1px solid rgba(0, 210, 238, 0.4); font-size: 0.7rem;">PLG SETUP</span>
                            </div>
                            <small class="text-white-50">Complete os 4 passos essenciais para habilitar o modo de alta performance da sua empresa</small>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn btn-sm" onclick="fecharOnboarding()" 
                                style="background: rgba(255, 255, 255, 0.08); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; font-size: 0.78rem;" 
                                title="Ocultar checklist temporariamente">
                            <i class="bi bi-eye-slash me-1"></i> Ocultar
                        </button>
                    </div>
                </div>

                <!-- BARRA DE PROGRESSO DO ONBOARDING -->
                <div class="mb-4 p-3 rounded-3" style="background: rgba(11, 14, 20, 0.6); border: 1px solid rgba(255, 255, 255, 0.05);">
                    <div class="d-flex justify-content-between text-white-50 mb-2" style="font-size: 0.82rem; font-weight: 600;">
                        <span class="text-white"><i class="bi bi-lightning-charge-fill text-warning me-1"></i> Progresso de Configuração</span>
                        <span id="onboardingPercentText" class="fw-bold" style="color: #00D2EE;">0% Concluído (0 de 4 passos)</span>
                    </div>
                    <div class="progress" style="height: 10px; border-radius: 9999px; background: rgba(255, 255, 255, 0.1);">
                        <div id="onboardingProgressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 
                             style="width: 25%; background: linear-gradient(90deg, #00D2EE 0%, #10B981 100%); border-radius: 9999px; transition: width 0.6s ease;"></div>
                    </div>
                </div>

                <!-- BANNER COMEMORATIVO 100% -->
                <div id="onboardingCelebration" class="p-3 mb-3 rounded-3 d-none" 
                     style="background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.35); color: #10B981;">
                    <div class="d-flex align-items-center gap-3">
                        <i class="bi bi-trophy-fill fs-3 text-warning"></i>
                        <div>
                            <strong class="d-block text-white" style="font-size: 0.98rem;">🎉 Parabéns! Sua empresa está 100% pronta para faturar!</strong>
                            <small class="text-white-50">Você concluiu todos os passos essenciais de implantação do NEXI PRO.</small>
                        </div>
                    </div>
                </div>

                <!-- OS 4 PASSOS DE CONFIGURAÇÃO (GRID RESPONSIVO) -->
                <div class="row g-3">
                    <!-- PASSO 1: ESTABELECIMENTO CADASTRADO -->
                    <div class="col-md-6 col-lg-3">
                        <div class="p-3 rounded-3 h-100 d-flex flex-column justify-content-between" 
                             style="background: rgba(22, 27, 38, 0.85); border: 1px solid rgba(16, 185, 129, 0.3);">
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="badge bg-success" style="font-size: 0.7rem; font-weight: 600;">Passo 1</span>
                                    <i class="bi bi-check-circle-fill text-success fs-5"></i>
                                </div>
                                <h6 class="fw-bold mb-1 text-white" style="font-size: 0.92rem;">1. Empresa Criada</h6>
                                <p class="text-white-50 small mb-3" style="font-size: 0.78rem;">
                                    Ambiente multi-tenant provisionado e seguro.
                                </p>
                            </div>
                            <a href="/manifest.json/configuracoes" class="btn btn-sm w-100 fw-bold"
                               style="background: rgba(16, 185, 129, 0.15); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 8px; font-size: 0.78rem;">
                                <i class="bi bi-gear-fill me-1"></i> Configurações
                            </a>
                        </div>
                    </div>

                    <!-- PASSO 2: CATÁLOGO DE SERVIÇOS -->
                    <div class="col-md-6 col-lg-3">
                        <div class="p-3 rounded-3 h-100 d-flex flex-column justify-content-between" 
                             style="background: rgba(22, 27, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.1);">
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: 600;">Passo 2</span>
                                    
                                    <i class="bi bi-circle text-white-50 fs-5"></i>
                                </div>
                                <h6 class="fw-bold mb-1 text-white" style="font-size: 0.92rem;">2. Serviços & Preços</h6>
                                <p class="text-white-50 small mb-3" style="font-size: 0.78rem;">
                                    
                                    <span>Cadastre os serviços oferecidos pela sua empresa.</span>
                                </p>
                            </div>
                            <a href="/manifest.json/servicos" class="btn btn-sm w-100 fw-bold"
                               style="background: #00D2EE; color: #0B0E14; border: none; border-radius: 8px; font-size: 0.78rem;">
                                <i class="bi bi-scissors me-1"></i>
                                <span>Adicionar Serviço</span>
                            </a>
                        </div>
                    </div>

                    <!-- PASSO 3: EQUIPE / PROFISSIONAIS -->
                    <div class="col-md-6 col-lg-3">
                        <div class="p-3 rounded-3 h-100 d-flex flex-column justify-content-between" 
                             style="background: rgba(22, 27, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.1);">
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: 600;">Passo 3</span>
                                    
                                    <i class="bi bi-circle text-white-50 fs-5"></i>
                                </div>
                                <h6 class="fw-bold mb-1 text-white" style="font-size: 0.92rem;">3. Equipe & Comissões</h6>
                                <p class="text-white-50 small mb-3" style="font-size: 0.78rem;">
                                    
                                    <span>Adicione os prestadores e taxas de comissão.</span>
                                </p>
                            </div>
                            <a href="/manifest.json/usuarios" class="btn btn-sm w-100 fw-bold"
                               style="background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; font-size: 0.78rem;">
                                <i class="bi bi-people-fill me-1"></i>
                                <span>Adicionar Profissional</span>
                            </a>
                        </div>
                    </div>

                    <!-- PASSO 4: PRIMEIRO AGENDAMENTO -->
                    <div class="col-md-6 col-lg-3">
                        <div class="p-3 rounded-3 h-100 d-flex flex-column justify-content-between" 
                             style="background: rgba(22, 27, 38, 0.85); border: 1px solid rgba(255, 255, 255, 0.1);">
                            <div>
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <span class="badge bg-secondary" style="font-size: 0.7rem; font-weight: 600;">Passo 4</span>
                                    
                                    <i class="bi bi-circle text-white-50 fs-5"></i>
                                </div>
                                <h6 class="fw-bold mb-1 text-white" style="font-size: 0.92rem;">4. 1º Agendamento</h6>
                                <p class="text-white-50 small mb-3" style="font-size: 0.78rem;">
                                    
                                    <span>Crie seu 1º horário ou compartilhe o link público.</span>
                                </p>
                            </div>
                            <div class="d-flex gap-1">
                                <a href="/manifest.json/agendamentos/novo" class="btn btn-sm w-100 fw-bold"
                                   style="background: #00D2EE; color: #0B0E14; border: none; border-radius: 8px; font-size: 0.78rem;">
                                    <i class="bi bi-calendar-plus me-1"></i>
                                    <span>Criar Horário</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- LINHA ADICIONAL: ATALHO DE COMPARTILHAMENTO DE LINK PÚBLICO -->
                <div class="mt-3 pt-3 border-top border-secondary border-opacity-25 d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-link-45deg fs-5 text-info"></i>
                        <span class="text-white-50" style="font-size: 0.8rem;">
                            Link público da sua empresa: <code class="text-info" style="font-size: 0.8rem;">/manifest.json/agendar</code>
                        </span>
                    </div>
                    <button type="button" id="btnCopiarLinkBio" class="btn btn-sm" onclick="copiarLinkBio()" 
                            style="background: rgba(255, 255, 255, 0.08); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; font-size: 0.78rem;">
                        <i class="bi bi-clipboard me-1"></i> Copiar Link para Instagram / WhatsApp
                    </button>
                    <!-- Input oculto com URL absoluta para cópia -->
                    <input type="hidden" id="inputLinkAgendamento" 
                           value="/manifest.json/agendar">
                </div>
            </div>
        </div>

        <!-- BOTÃO DISCRETO PARA REEXIBIR CHECKLIST SE OCULTO -->
        <div id="btnReexibirOnboarding" class="mb-3 d-none">
            <button type="button" class="btn btn-sm" onclick="reabrirOnboarding()"
                    style="background: rgba(22, 27, 38, 0.8); color: #00D2EE; border: 1px solid rgba(0, 210, 238, 0.25); border-radius: 9999px; font-size: 0.75rem; padding: 0.25rem 0.85rem;">
                <i class="bi bi-rocket-takeoff me-1"></i> Mostrar Guia de Ativação (Checklist)
            </button>
        </div>

        <!-- SCRIPT DO ONBOARDING (DEV-01) -->
        <script>
            /*<![CDATA[*/
            const totalServicos = 0;
            const totalProfissionais = 0;
            const totalAgendamentosGeral = 0;
            const empresaSlug = "manifest.json";

            function calcularProgressoOnboarding() {
                // Passo 1: Empresa cadastrada (sempre concluído = 1)
                let concluidos = 1;
                // Passo 2: Catálogo de serviços cadastrado
                if (totalServicos > 0) concluidos++;
                // Passo 3: Equipe cadastrada (> 1 para incluir profissionais parceiros)
                if (totalProfissionais > 1) concluidos++;
                // Passo 4: Primeiro agendamento realizado
                if (totalAgendamentosGeral > 0) concluidos++;

                const percent = Math.round((concluidos / 4) * 100);
                const bar = document.getElementById('onboardingProgressBar');
                const text = document.getElementById('onboardingPercentText');
                const celebration = document.getElementById('onboardingCelebration');

                if (bar) bar.style.width = percent + '%';
                if (text) text.innerText = percent + '% Concluído (' + concluidos + ' de 4 passos)';

                if (percent === 100 && celebration) {
                    celebration.classList.remove('d-none');
                }

                // Verifica persistência de ocultamento
                const ocultado = localStorage.getItem('nexipro_onboarding_oculto_' + empresaSlug);
                const card = document.getElementById('onboardingCard');
                const btnReexibir = document.getElementById('btnReexibirOnboarding');
                if (ocultado === 'true') {
                    if (card) card.style.display = 'none';
                    if (btnReexibir) btnReexibir.classList.remove('d-none');
                }
            }

            function copiarLinkBio() {
                const input = document.getElementById('inputLinkAgendamento');
                const btn = document.getElementById('btnCopiarLinkBio');
                const url = input ? input.value : (window.location.origin + '/' + empresaSlug + '/agendar');

                navigator.clipboard.writeText(url).then(() => {
                    if (btn) {
                        const originalHtml = btn.innerHTML;
                        btn.className = 'btn btn-sm btn-success';
                        btn.innerHTML = '<i class="bi bi-check-lg me-1"></i> Link Copiado!';
                        setTimeout(() => {
                            btn.className = 'btn btn-sm';
                            btn.style.background = 'rgba(255, 255, 255, 0.08)';
                            btn.style.color = '#ffffff';
                            btn.style.border = '1px solid rgba(255, 255, 255, 0.2)';
                            btn.innerHTML = originalHtml;
                        }, 2500);
                    }
                }).catch(() => {
                    alert('Link: ' + url);
                });
            }

            function fecharOnboarding() {
                const card = document.getElementById('onboardingCard');
                const btnReexibir = document.getElementById('btnReexibirOnboarding');
                if (card) card.style.display = 'none';
                if (btnReexibir) btnReexibir.classList.remove('d-none');
                localStorage.setItem('nexipro_onboarding_oculto_' + empresaSlug, 'true');
            }

            function reabrirOnboarding() {
                const card = document.getElementById('onboardingCard');
                const btnReexibir = document.getElementById('btnReexibirOnboarding');
                if (card) card.style.display = 'block';
                if (btnReexibir) btnReexibir.classList.add('d-none');
                localStorage.removeItem('nexipro_onboarding_oculto_' + empresaSlug);
            }

            document.addEventListener('DOMContentLoaded', calcularProgressoOnboarding);
            /*]]>*/
        </script>
    </div>

            <!-- CARDS DE MÉTRICAS / KPIS INTELIGENTES (NEXI PRO LUXURY METRICS) -->
            <div class="stat-grid mb-4">
                <!-- CARD CAIXA / FATURAMENTO -->
                <a href="/manifest.json/financeiro" class="stat-card glass-card-lux" style="text-decoration: none;">
                    <div class="stat-info">
                        <span class="stat-label text-muted" style="font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;">Fluxo de Caixa</span>
                        <div class="stat-value fw-bold" style="font-size: 1.45rem; color: var(--text-main); margin: 0.35rem 0;">Caixa Fechado</div>
                        
                        <span class="stat-desc" style="font-size: 0.82rem; color: #ef4444; font-weight: 600;">
                            <i class="bi bi-lock-fill"></i> Clique para abrir o caixa
                        </span>
                    </div>
                    <div class="stat-icon-box" style="width: 48px; height: 48px; border-radius: 12px; background: rgba(212, 175, 55, 0.12); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 1.35rem;">
                        <i class="bi bi-wallet2"></i>
                    </div>
                </a>

                <!-- CARD AGENDAMENTOS HOJE -->
                <a href="/manifest.json/agendamentos" class="stat-card glass-card-lux" style="text-decoration: none;">
                    <div class="stat-info">
                        <span class="stat-label text-muted" style="font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;">Atendimentos Hoje</span>
                        <div class="stat-value fw-bold" style="font-size: 1.45rem; color: var(--text-main); margin: 0.35rem 0;">0</div>
                        <span class="stat-desc" style="font-size: 0.82rem; color: var(--text-secondary);">
                            <i class="bi bi-calendar-check text-warning"></i> Confirmados na agenda
                        </span>
                    </div>
                    <div class="stat-icon-box" style="width: 48px; height: 48px; border-radius: 12px; background: rgba(212, 175, 55, 0.12); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 1.35rem;">
                        <i class="bi bi-calendar-event"></i>
                    </div>
                </a>

                <!-- CARD ESTOQUE & CAPITAL PARADO -->
                <a href="/manifest.json/estoque" class="stat-card glass-card-lux" style="text-decoration: none;">
                    <div class="stat-info">
                        <span class="stat-label text-muted" style="font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;">Capital em Estoque</span>
                        <div class="stat-value fw-bold" style="font-size: 1.45rem; color: var(--text-main); margin: 0.35rem 0;">R$ 0,00</div>
                        
                        <span class="stat-desc" style="font-size: 0.82rem; color: #10b981; font-weight: 600;">
                            <i class="bi bi-check-all"></i> Níveis adequados
                        </span>
                    </div>
                    <div class="stat-icon-box" style="width: 48px; height: 48px; border-radius: 12px; background: rgba(212, 175, 55, 0.12); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 1.35rem;">
                        <i class="bi bi-box-seam"></i>
                    </div>
                </a>

                <!-- CARD CLIENTES & CRM -->
                <a href="/manifest.json/fidelizacao" class="stat-card glass-card-lux" style="text-decoration: none;">
                    <div class="stat-info">
                        <span class="stat-label text-muted" style="font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;">Base de Clientes</span>
                        <div class="stat-value fw-bold" style="font-size: 1.45rem; color: var(--text-main); margin: 0.35rem 0;">0</div>
                        <span class="stat-desc" style="font-size: 0.82rem; color: var(--text-secondary);">
                            <i class="bi bi-gift text-warning"></i>
                            <span>0 aniversariantes no mês</span>
                        </span>
                    </div>
                    <div class="stat-icon-box" style="width: 48px; height: 48px; border-radius: 12px; background: rgba(212, 175, 55, 0.12); color: var(--accent-gold); display: flex; align-items: center; justify-content: center; font-size: 1.35rem;">
                        <i class="bi bi-people"></i>
                    </div>
                </a>
            </div>

            <!-- AÇÕES RÁPIDAS COM HIERARQUIA CLARA (1 BOTÃO PRIMÁRIO) -->
            <div class="glass-card-lux mb-4" style="padding: 1.25rem 1.75rem;">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div class="d-flex align-items-center gap-2">
                        <span class="fw-bold" style="font-size: 0.95rem; color: var(--text-main);">
                            <i class="bi bi-lightning-charge-fill text-warning me-1"></i> Ações Rápidas:
                        </span>
                        <a href="/manifest.json/agendamentos/novo" class="btn-gold-action">
                            <i class="bi bi-calendar-plus"></i> Novo Horário
                        </a>
                    </div>
                    <div class="d-flex flex-wrap align-items-center gap-2">
                        <a href="/manifest.json/clientes/novo" class="btn-ghost-lux">
                            <i class="bi bi-person-plus"></i> Novo Cliente
                        </a>
                        <a href="/manifest.json/servicos/novo" class="btn-ghost-lux">
                            <i class="bi bi-scissors"></i> Novo Serviço
                        </a>
                        <a href="/manifest.json/agendamentos" class="btn-ghost-lux">
                            <i class="bi bi-calendar3"></i> Abrir Grade
                        </a>
                    </div>
                </div>
            </div>

            <!-- QUADRO DE ATENDIMENTOS AGENDADOS HOJE -->
            <div class="content-card">
                <div class="card-header-custom d-flex justify-content-between align-items-center">
                    <h3 class="card-title-custom">
                        <i class="bi bi-calendar2-check-fill text-primary"></i>
                        <span>Atendimentos Agendados para HOJE</span>
                    </h3>
                    <div class="card-actions-custom">
                        <a href="/manifest.json/agendamentos/novo" class="btn btn-gold btn-sm">
                            <i class="bi bi-plus-circle"></i> Novo Agendamento
                        </a>
                        <a href="/manifest.json/agendamentos" class="btn btn-secondary btn-sm">
                            <i class="bi bi-calendar3"></i> Ver Todos
                        </a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table-modern">
                        <thead>
                        <tr>
                            <th>Cliente</th>
                            <th>Serviço</th>
                            <th>Profissional</th>
                            <th>Data</th>
                            <th>Horário</th>
                            <th>Status</th>
                            <th style="text-align: right;">Ações</th>
                        </tr>
                        </thead>
                        <tbody>
                        
                        <tr>
                            <td colspan="7" class="p-0 border-0">
                                <div class="empty-state-lux">
                                    <div class="empty-state-icon">
                                        <i class="bi bi-calendar-check"></i>
                                    </div>
                                    <div class="empty-state-title">Nenhum atendimento na agenda de hoje</div>
                                    <div class="empty-state-desc">
                                        Seus horários para hoje estão livres. Que tal agendar um novo cliente ou convidar clientes fiéis pelo WhatsApp?
                                    </div>
                                    <a href="/manifest.json/agendamentos/novo" class="btn-gold-action">
                                        <i class="bi bi-calendar-plus"></i> Agendar Novo Horário
                                    </a>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 1. Gráfico de Faturamento com visual aveludado e suave
        const faturamentoLabels = ["15\/10","16\/10","17\/10","18\/10","19\/10","20\/10","21\/10"];
        const faturamentoData = [0,0,0,0,0,0,0];

        const ctxFat = document.getElementById('faturamentoChart');
        if (ctxFat) {
            new Chart(ctxFat, {
                type: 'line',
                data: {
                    labels: faturamentoLabels,
                    datasets: [{
                        label: 'Faturamento (R$)',
                        data: faturamentoData,
                        borderColor: '#d4af37',
                        backgroundColor: 'rgba(212, 175, 55, 0.12)',
                        borderWidth: 2.5,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 4,
                        pointBackgroundColor: '#d4af37',
                        pointHoverRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: '#111827',
                            titleColor: '#f4e8c1',
                            bodyColor: '#ffffff',
                            padding: 10,
                            cornerRadius: 8,
                            borderColor: 'rgba(212, 175, 55, 0.3)',
                            borderWidth: 1
                        }
                    },
                    scales: {
                        x: {
                            grid: { display: false }
                        },
                        y: {
                            beginAtZero: true,
                            grid: { color: 'rgba(0, 0, 0, 0.04)' },
                            ticks: {
                                callback: function(value) { return 'R$ ' + value; }
                            }
                        }
                    }
                }
            });
        }

        // 2. Gráfico de Top Mais Vendidos
        const topLabels = [];
        const topData = [];

        const ctxTop = document.getElementById('topItensChart');
        if (ctxTop && topLabels.length > 0) {
            new Chart(ctxTop, {
                type: 'doughnut',
                data: {
                    labels: topLabels,
                    datasets: [{
                        data: topData,
                        backgroundColor: [
                            '#c5a059',
                            '#1e293b',
                            '#10b981',
                            '#3b82f6',
                            '#f59e0b'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { boxWidth: 12, font: { size: 11 } }
                        }
                    }
                }
            });
        }
    });
</script>

</body>
</html>


    <!-- Scripts Globais -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Service Worker Registration (PWA DEV-04) -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service-worker.js')
                    .then(reg => console.log('NEXI PRO PWA ServiceWorker registrado:', reg.scope))
                    .catch(err => console.log('PWA ServiceWorker indisponível:', err));
            });
        }
    </script>
</body>
</html>