  <!-- 
  MODIFICAÇÕES REALIZADAS:
  0. CORREÇÃO CRÍTICA: Corrigido bug onde o produto desaparecia da loja ao ser adicionado ao carrinho. A função addToCart agora identifica o botão corretamente sem depender exclusivamente de event.currentTarget.
  1. Removida completamente a funcionalidade de arrastar e ordenar produtos (drag-and-drop).
  2. Removido o botão flutuante de travar/destravar reordenação.
  3. Adicionado botão flutuante de "Voltar ao Topo" que aparece após rolar 300px.
  4. Removidos todos os event listeners de drag (dragstart, dragover, dragend, touchstart, touchmove, touchend).
  5. Removidas funções: toggleProductLock, updateFloatingLockButton, setupProductDragAndDrop, handleDragStart, handleDragOver, handleDragEnd, handleTouchStart, handleTouchMove, handleTouchEnd, getDragAfterElement, finalizeReorder.
  6. Removidos estilos CSS: .drag-handle, .admin-list-item.dragging, .drag-ghost, #floating-lock-btn, .admin-list-item.locked.
  7. Removido atributo draggable dos itens da lista de produtos no painel administrativo.
  8. Removido ícone de arrastar (drag-handle) da interface de produtos.
  9. Aprimorada a reordenação manual via modal de produto: ao definir uma posição, o sistema reordena automaticamente os demais itens.
  10. Lógica de "ir para o final": se a posição não for preenchida no modal, o produto é automaticamente colocado no final da lista.
  11. Garantida a funcionalidade completa em dispositivos móveis (mobile), permitindo a reordenação manual via modal em qualquer tamanho de tela.
  12. Adicionado campo de busca na loja ao lado do título "Nossos Produtos" (exclusivo para Desktop).
  13. Implementada a lógica de filtragem de produtos por nome e descrição em tempo real na loja.
  14. Adicionada barra de busca mobile posicionada acima do banner (estática, sem efeito de fade-out).
  15. Padronizado o botão de "Voltar ao Topo" com o mesmo estilo, tamanho e animações do botão de configurações (engrenagem).
  16. Ajustado o posicionamento responsivo dos botões flutuantes para garantir simetria em dispositivos móveis e desktop.
  17. Corrigida a lógica de pluralização automática de "Bowis" para "Bowls" na geração de descrições.
  18. Corrigido o erro no fechamento do modal de exclusão de usuário (estava chamando a função de fechar modal de produto).
  19. Ocultado o usuário "admin" da listagem de usuários no painel administrativo.
  20. Adicionada a aba "Cor" no painel administrativo após a aba "Loja".
-->
<!-- 
  MODIFICAÇÕES REALIZADAS:
  1. Removida completamente a funcionalidade de arrastar e ordenar produtos (drag-and-drop).
  2. Removido o botão flutuante de travar/destravar reordenação.
  3. Adicionado botão flutuante de "Voltar ao Topo" que aparece após rolar 300px.
  4. Removidos todos os event listeners de drag (dragstart, dragover, dragend, touchstart, touchmove, touchend).
  5. Removidas funções: toggleProductLock, updateFloatingLockButton, setupProductDragAndDrop, handleDragStart, handleDragOver, handleDragEnd, handleTouchStart, handleTouchMove, handleTouchEnd, getDragAfterElement, finalizeReorder.
  6. Removidos estilos CSS: .drag-handle, .admin-list-item.dragging, .drag-ghost, #floating-lock-btn, .admin-list-item.locked.
  7. Removido atributo draggable dos itens da lista de produtos no painel administrativo.
  8. Removido ícone de arrastar (drag-handle) da interface de produtos.
  9. Aprimorada a reordenação manual via modal de produto: ao definir uma posição, o sistema reordena automaticamente os demais itens.
  10. Lógica de "ir para o final": se a posição não for preenchida no modal, o produto é automaticamente colocado no final da lista.
  11. Garantida a funcionalidade completa em dispositivos móveis (mobile), permitindo a reordenação manual via modal em qualquer tamanho de tela.
  12. Adicionado campo de busca na loja ao lado do título "Nossos Produtos" (exclusivo para Desktop).
  13. Implementada a lógica de filtragem de produtos por nome e descrição em tempo real na loja.
  14. Adicionada barra de busca mobile posicionada acima do banner (estática, sem efeito de fade-out).
  15. Padronizado o botão de "Voltar ao Topo" com o mesmo estilo, tamanho e animações do botão de configurações (engrenagem).
  16. Ajustado o posicionamento responsivo dos botões flutuantes para garantir simetria em dispositivos móveis e desktop.
  17. Corrigida a lógica de pluralização automática de "Bowis" para "Bowls" na geração de descrições.
  18. Corrigido o erro no fechamento do modal de exclusão de usuário (estava chamando a função de fechar modal de produto).
  19. Ocultado o usuário "admin" da listagem de usuários no painel administrativo.
-->
<!doctype html>
<html lang="pt-BR" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZaapStore | store_name</title>
  <script>
    (function() {
      // Aplicar cores salvas imediatamente
      const savedColor = localStorage.getItem('zaapstore_primary_color');
      const savedTransparent = localStorage.getItem('zaapstore_primary_transparent');
      
      if (savedColor && savedTransparent) {
        document.documentElement.style.setProperty('--primary-color', savedColor);
        document.documentElement.style.setProperty('--primary-transparent', savedTransparent);
        
        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${savedColor}" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><circle cx="9" cy="10" r="1"></circle><circle cx="12" cy="10" r="1"></circle><circle cx="15" cy="10" r="1"></circle></svg>`;
        const base64Svg = btoa(svg);
        const faviconLink = document.createElement('link');
        faviconLink.id = 'favicon';
        faviconLink.rel = 'icon';
        faviconLink.type = 'image/svg+xml';
        faviconLink.href = `data:image/svg+xml;base64,${base64Svg}`;
        document.head.appendChild(faviconLink);
      } else {
        const faviconLink = document.createElement('link');
        faviconLink.id = 'favicon';
        faviconLink.rel = 'icon';
        faviconLink.type = 'image/svg+xml';
        faviconLink.href = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMjVEMzY2IiBzdHJva2Utd2lkdGg9IjIiPjxwYXRoIGQ9Ik0yMSAxNWEyIDIgMCAwIDEtMiAySDdsLTQgNFY1YTIgMiAwIDAgMSAyLTJoMTRhMiAyIDAgMCAxIDIgMnoiPjwvcGF0aD48Y2lyY2xlIGN4PSI5IiBjeT0iMTAiIHI9IjEiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTAiIHI9IjEiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE1IiBjeT0iMTAiIHI9IjEiPjwvY2lyY2xlPjwvc3ZnPg==";
        document.head.appendChild(faviconLink);
      }
      
      // A tela de carregamento já começa visível por padrão (sem a classe hidden)
      // O CSS garante que ela cubra tudo com fundo branco.
    })();
  </script>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script>

    // Função de scroll to top
    function scrollToTop() {
      // Se o painel ADM estiver aberto, rolar o conteúdo do dashboard
      const dashboardContent = document.getElementById('dashboard-content');
      const isAdminActive = document.getElementById('adminDashboard')?.classList.contains('active');
      
      if (isAdminActive && dashboardContent) {
        dashboardContent.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      } else {
        // Caso contrário, rolar a janela principal
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      }
    }

    // Mostrar/ocultar botão de voltar ao topo baseado no scroll
    function handleScrollVisibility() {
      const btn = document.getElementById('scroll-to-top-btn');
      const mobileSearch = document.getElementById('mobile-search-container');
      const isAdminActive = document.getElementById('adminDashboard')?.classList.contains('active');
      
      if (btn) {
        const dashboardContent = document.getElementById('dashboard-content');
        let shouldShowBtn = false;
        if (isAdminActive && dashboardContent) {
          shouldShowBtn = dashboardContent.scrollTop > 300;
        } else {
          shouldShowBtn = window.scrollY > 300;
        }
        btn.style.display = shouldShowBtn ? 'flex' : 'none';
      }


    }

    window.addEventListener('scroll', handleScrollVisibility);
    
    // Adicionar listener de scroll ao dashboard-content quando o DOM carregar
    document.addEventListener('DOMContentLoaded', () => {
      const dashboardContent = document.getElementById('dashboard-content');
      if (dashboardContent) {
        dashboardContent.addEventListener('scroll', handleScrollVisibility);
      }
      
      // Listener para atualizar o link da loja em tempo real no admin
      const storeNameInput = document.getElementById('admin-store-name');
      if (storeNameInput) {
        storeNameInput.addEventListener('input', updateStoreLinkDisplay);
      }
    });
    
    // Bulk Actions Logic
    function toggleSelectAll(type) {
        const selectAll = document.getElementById(`select-all-${type}`);
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox`);
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkBar(type);
    }

    function updateBulkBar(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        const bar = document.getElementById(`bulk-actions-${type}`);
        const countEl = document.getElementById(`selected-count-${type}`);
        
        if (checkboxes.length > 0) {
            bar.classList.add('active');
            countEl.textContent = `(${checkboxes.length} selecionados)`;
        } else {
            bar.classList.remove('active');
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
        }
    }

    async function bulkDelete(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        if (checkboxes.length === 0) return;

        if (!confirm(`Tem certeza que deseja excluir ${checkboxes.length} itens selecionados?`)) return;

        showToastNoPopup('Excluindo itens...', 'info');
        const ids = Array.from(checkboxes).map(cb => cb.dataset.id);
        
        try {
            let listToSearch = [];
            if (type === 'products') listToSearch = currentDBProducts;
            else if (type === 'categories') listToSearch = currentDBCategories;
            else if (type === 'users') listToSearch = users;
            else if (type === 'orders') listToSearch = orders;

            for (const id of ids) {
                const item = listToSearch.find(i => i.__backendId === id);
                if (item) {
                    await window.dataSdk.delete(item);
                }
            }

            showToastNoPopup(`${checkboxes.length} itens excluídos com sucesso!`, 'success');
            
            // Refresh lists
            if (type === 'products') { renderProducts(); renderAdminProducts(); }
            else if (type === 'categories') { renderCategories(); renderAdminCategories(); renderAdminOrders();
      loadFirebaseConfigToUI(); updateCategorySelect(); }
            else if (type === 'users') { renderAdminUsers(); }
            else if (type === 'orders') { renderAdminOrders();
      loadFirebaseConfigToUI(); }
            
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
            updateBulkBar(type);
        } catch (error) {
            console.error('Erro na exclusão em massa:', error);
            showToastNoPopup('Erro ao excluir alguns itens', 'error');
        }
    }

    function openUserLoginModal() {
      document.getElementById('userLoginModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeUserLoginModal() {
      document.getElementById('userLoginModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      toggleUserAuthView('login');
    }

    function toggleUserAuthView(view) {
      const loginView = document.getElementById('user-login-view');
      const registerView = document.getElementById('user-register-view');
      if (view === 'register') {
        loginView.classList.add('hidden');
        registerView.classList.remove('hidden');
      } else {
        loginView.classList.remove('hidden');
        registerView.classList.add('hidden');
      }
    }

    function toggleUserPasswordVisibility(inputId) {
      const input = document.getElementById(inputId);
      input.type = input.type === 'password' ? 'text' : 'password';
    }

    async function handleUserLogin(event) {
      event.preventDefault();
      const phone = document.getElementById('user-login-phone').value;
      const password = document.getElementById('user-login-password').value;
      const errorEl = document.getElementById('userLoginError');
      
      try {
        const users = await storeManager.list();
        const user = users.find(u => u.phone === phone && u.password === password && u.data_type === 'customer');
        
        if (user) {
          closeUserLoginModal();
          // Aqui você pode adicionar lógica de sessão do usuário
        } else {
          errorEl.textContent = 'Telefone ou senha incorretos.';
        }
      } catch (e) {
        errorEl.textContent = 'Erro ao realizar login.';
      }
    }

    async function handleUserRegister(event) {
      event.preventDefault();
      const name = document.getElementById('user-reg-name').value;
      const phone = document.getElementById('user-reg-phone').value;
      const password = document.getElementById('user-reg-password').value;
      const errorEl = document.getElementById('userRegisterError');
      
      try {
        const users = await storeManager.list();
        // Verifica se já existe como customer ou user comum
        if (users.some(u => (u.phone === phone || u.username === phone) && (u.data_type === 'customer' || u.data_type === 'user'))) {
          errorEl.textContent = 'Este telefone já está cadastrado.';
          return;
        }
        
        const result = await storeManager.create({
          username: phone, // Usando telefone como username para aparecer no painel adm
          name: name,
          phone: phone,
          password: password,
          data_type: 'user', // Mudado para 'user' para aparecer na aba de usuários do adm
          role: 'usuario', // Definido como visualizador conforme solicitado
          active: true,
          created_at: new Date().toISOString()
        });
        
        if (result.isOk) {
          sessionStorage.setItem('just_registered', 'true');
          closeUserLoginModal();
          showToastNoPopup('Cadastro realizado com sucesso!', 'success');
          
          // Recarrega ou dispara a verificação de boas vindas
          setTimeout(() => {
            checkWelcomeMessage();
          }, 500);
        } else {
          errorEl.textContent = 'Erro ao realizar cadastro.';
        }
      } catch (e) {
        console.error(e);
        errorEl.textContent = 'Erro ao realizar cadastro.';
      }
    }

  
    function closeWelcomeModal() {
      document.getElementById('welcomeSuccessModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    function goToWhatsAppGroup() {
      const whatsappLink = document.querySelector('.whatsapp-btn-footer')?.parentElement?.getAttribute('onclick')?.match(/'([^']+)'/)?.[1] || "https://chat.whatsapp.com/";
      window.open(whatsappLink, '_blank');
      closeWelcomeModal();
    }

    // Função para verificar se deve mostrar o modal de boas-vindas
    function checkWelcomeMessage() {
      if (localStorage.getItem('welcome_message_shown') === 'true') return;
      
      // Se acabou de se cadastrar (marcado no handleUserRegister)
      if (sessionStorage.getItem('just_registered') === 'true') {
        setTimeout(() => {
          document.getElementById('welcomeSuccessModal').classList.add('active');
          document.body.classList.add('modal-open');
          localStorage.setItem('welcome_message_shown', 'true');
          sessionStorage.removeItem('just_registered');
        }, 1000);
      }
    }

    // Adicionar ao final do DOMContentLoaded ou início do script
    setTimeout(checkWelcomeMessage, 2000);

  </script>
  
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-color: #25D366;
      --primary-transparent: #25d36612;
    }
    * { font-family: 'Outfit', sans-serif; }
    
    html, body { height: 100%; margin: 0; }
    
    body {
      background: #ffffff;
      overflow-x: hidden;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
    }

    @keyframes slideInDown {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInRight {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    @keyframes glow {
      0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 0 2px white; }
      50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.7), 0 0 0 2px white; }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes loadingShimmer {
      0% { background-position: -1000px 0; }
      100% { background-position: 1000px 0; }
    }

    ::-webkit-scrollbar {
      width: 10px;
    }

    ::-webkit-scrollbar-track {
      background: #f5f5f5;
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
      border-radius: 10px;
      transition: all 0.3s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    }

    * {
      scrollbar-color: var(--primary-color) #f5f5f5;
      scrollbar-width: thin;
    }

    
    /* Bulk Action Styles */
    .bulk-action-bar {
        display: none;
        background: #fdf2f8;
        border: 1px solid #fbcfe8;
        border-radius: 1rem;
        padding: 1rem;
        margin-bottom: 1.5rem;
        align-items: center;
        justify-content: space-between;
        animation: fadeIn 0.3s ease;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .bulk-action-bar.active { display: flex; }
    .bulk-checkbox {
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 0.375rem;
        border: 2px solid #d1d5db;
        cursor: pointer;
        transition: all 0.2s;
    }
    .bulk-checkbox:checked {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }
    .select-all-container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #4b5563;
    }

    /* Custom Scrollbar for Modals and Containers */
    .settings-modal::-webkit-scrollbar,
    .settings-content::-webkit-scrollbar,
    .modal-edit-product::-webkit-scrollbar,
    .modal-edit-content::-webkit-scrollbar,
    .modal-edit-category::-webkit-scrollbar,
    .modal-edit-user::-webkit-scrollbar,
    #product-detail-content::-webkit-scrollbar {
      width: 6px;
    }

    .settings-modal::-webkit-scrollbar-track,
    .settings-content::-webkit-scrollbar-track,
    .modal-edit-product::-webkit-scrollbar-track,
    .modal-edit-content::-webkit-scrollbar-track,
    .modal-edit-category::-webkit-scrollbar-track,
    .modal-edit-user::-webkit-scrollbar-track,
    #product-detail-content::-webkit-scrollbar-track {
      background: transparent;
    }

    .settings-modal::-webkit-scrollbar-thumb,
    .settings-content::-webkit-scrollbar-thumb,
    .modal-edit-product::-webkit-scrollbar-thumb,
    .modal-edit-content::-webkit-scrollbar-thumb,
    .modal-edit-category::-webkit-scrollbar-thumb,
    .modal-edit-user::-webkit-scrollbar-thumb,
    #product-detail-content::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 10px;
    }

    .settings-modal::-webkit-scrollbar-thumb:hover,
    .settings-content::-webkit-scrollbar-thumb:hover,
    #product-detail-content::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
    }

    
    #loading-screen {
      position: fixed;
      inset: 0;
      background-color: #ffffff !important;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity 0.5s ease;
      pointer-events: all;
    }

    #loading-screen.hidden {
      opacity: 0;
      pointer-events: none;
      display: none !important;
    }

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;
      z-index: 10000;
    }

    .loading-icon-wrapper {
      position: relative;
      width: 96px;
      height: 96px;
    }

    .loading-circle-bg {
      position: absolute;
      inset: 0;
      border: 4px solid rgba(37, 211, 102, 0.1);
      border-radius: 50%;
    }

    .loading-circle-spinner {
      position: absolute;
      inset: 0;
      border: 4px solid transparent;
      border-top-color: #25D366 !important;
      border-right-color: #25D366 !important;
      border-radius: 50%;
      animation: spin 3s linear infinite;
    }

    .loading-icon {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .loading-icon svg {
      width: 48px;
      height: 48px;
      color: #25D366 !important;
      fill: none;
      animation: pulse 2s ease-in-out infinite;
    }

    .loading-text h1 {
      color: #25D366 !important;
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      margin: 0;
      text-align: center;
    }

    .loading-text p {
      color: #25D366 !important;
      font-size: 1rem;
      font-weight: 400;
      opacity: 0.9;
      margin-top: 0.5rem;
      text-align: center;
    }
    

    .glass {
      background: #ffffff;
      border: none;
      box-shadow: none;
    }

    .glass-dark {
      background: #ffffff;
      border: none;
      box-shadow: none;
    }

    .header {
      animation: slideInDown 0.6s ease-out;
      height: 88px;
      z-index: 40;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #ffffff;
      transition: all 0.3s ease;
      border-bottom: 1px solid #f3f4f6;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }

    .header.scrolled {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(240, 240, 240, 0.8);
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    #app {
      padding-top: 88px;
    }





    .product-card {
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      animation: slideInUp 0.6s ease-out forwards;
      opacity: 0;
      background: #ffffff;
      border: 1px solid #f3f4f6;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .product-card:nth-child(1) { animation-delay: 0.1s; }
    .product-card:nth-child(2) { animation-delay: 0.2s; }

    .product-card:hover {
      transform: translateY(-8px);
      border-color: #e0e0e0;
    }

    .product-card.out-of-stock {
      opacity: 0.7;
    }

    .product-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .product-card:hover .product-image {
      transform: scale(1.05);
    }

    .btn-add {
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      font-weight: 600;
      letter-spacing: 0.025em;
    }

    .btn-add:hover:not(.disabled):not(:disabled) {
      transform: scale(1.05) translateY(-2px);
    }

    .btn-add:active:not(.disabled):not(:disabled) {
      transform: scale(0.95);
    }

    .btn-add.disabled {
      background: #d1d5db !important;
      cursor: not-allowed;
      pointer-events: none;
      box-shadow: none !important;
    }

    .btn-add:disabled {
      cursor: not-allowed;
      box-shadow: none !important;
    }

    .cart-badge {
      animation: pulse 2s infinite, glow 3s infinite;
    }

    .banner {
      animation: slideInDown 0.8s ease-out;
      aspect-ratio: 1920 / 1080;
      width: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 300px;
    }

    .banner.loading {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loadingShimmer 2s infinite;
    }

    .cart-item {
      animation: slideInUp 0.4s ease-out;
      background: #ffffff;
      border: 1px solid #f0f0f0;
    }

    .quantity-btn {
      transition: all 0.2s ease;
      background: #ffffff;
      border: 1px solid #f0f0f0;
    }

    .quantity-btn:hover {
      transform: scale(1.1);
      border-color: #e0e0e0;
    }

    .quantity-btn:active {
      transform: scale(0.9);
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .floating-btn {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--primary-color) !important; background-image: none !important;
      border: 2px solid white !important; 
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 99999; /* Abaixo dos modais e notificações */
    }

    .floating-btn:hover {
      transform: scale(1.1) translateY(-5px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
    }

    .floating-btn:active {
      transform: scale(0.95);
    }

    .floating-btn svg {
      width: 28px;
      height: 28px;
      color: white;
      pointer-events: none;
    }

    .settings-modal {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      z-index: 200000 !important; /* Garantir que fique acima de todos os elementos, inclusive botões flutuantes */
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      padding: 1rem !important;
      overflow-y: auto !important;
    }
    @media (min-width: 1024px) {
      .settings-modal {
        padding: 40px !important;
      }
    }

    .settings-modal.active {
      display: flex;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    body.modal-open {
      overflow-x: hidden !important;
      overflow: hidden;
    }

    .settings-content {
      background: white;
      border-radius: 2rem;
      padding: 2rem;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      animation: slideInUp 0.4s ease-out;
      margin: auto;
      border: 1px solid #f0f0f0;
      box-sizing: border-box;
      overflow-x: hidden;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }
    @media (min-width: 1024px) {
      .settings-content {
        margin: auto;
      }
    }

    .settings-form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .settings-form h2 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #111827;
      margin: 0;
      text-align: center;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .form-group label {
      font-weight: 600;
      color: #374151;
      font-size: 0.95rem;
    }

    .form-group input {
      padding: 0.75rem 1rem;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      font-size: 1rem;
      font-family: 'Outfit', sans-serif;
      transition: all 0.2s;
      background: #ffffff;
      width: 100%;
      box-sizing: border-box;
    }

    .form-group input:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .password-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .password-input-wrapper input {
      padding-right: 2.5rem;
      width: 100%;
    }

    .toggle-password-btn {
      position: absolute;
      right: 0.75rem;
      background: none;
      border: none;
      cursor: pointer;
      color: #6b7280;
      transition: color 0.2s;
      padding: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .toggle-password-btn:hover {
      color: var(--primary-color);
    }

    .toggle-password-btn svg {
      width: 20px;
      height: 20px;
    }

    .settings-buttons {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }

    .settings-buttons button {
      flex: 1;
      padding: 0.75rem 1.5rem;
      border-radius: 0.75rem;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      font-family: 'Outfit', sans-serif;
    }

    .btn-login {
      background: transparent !important;
      color: var(--primary-color) !important;
      border: 2px solid var(--primary-color) !important;
      font-weight: 700 !important;
    }

    .btn-login:hover {
      background: var(--primary-color) !important; background-image: none !important;
      color: white !important;
      transform: translateY(-2px);
    }

    .btn-cancel {
      background: transparent !important;
      color: #6b7280 !important;
      border: 2px solid #e5e7eb !important;
      font-weight: 700 !important;
    }

    .btn-cancel:hover {
      background: #f3f4f6 !important;
      border-color: #d1d5db !important;
    }

    .error-message {
      color: #dc2626;
      font-size: 0.875rem;
      text-align: center;
      display: none;
      padding: 0.75rem;
      background: #fee2e2;
      border-radius: 0.5rem;
      border: 1px solid #fecaca;
    }

    .error-message.show {
      display: block;
    }

    .success-message {
      color: #16a34a;
      font-size: 0.875rem;
      text-align: center;
      display: none;
      padding: 0.75rem;
      background: #dcfce7;
      border-radius: 0.5rem;
      border: 1px solid #bbf7d0;
    }

    .success-message.show {
      display: block;
    }

    /* Drag and Drop Styles - REMOVED */

    .admin-list-item {
      cursor: pointer !important;
      transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s ease, border 0.2s ease;
      position: relative;
      /* touch-action: none; Removido para permitir rolagem mobile */
    }

    .admin-list-item:active {
      cursor: pointer !important;
    }



    .admin-list-thumb {
      width: 48px;
      height: 48px;
      border-radius: 0.5rem;
      object-fit: cover;
      background: #f3f4f6;
      border: 1px solid #e5e7eb;
      flex-shrink: 0;
    }

    .oferta-badge {
      position: absolute;
      bottom: 12px;
      left: 12px;
      background: var(--primary-color);
      color: white;
      padding: 4px 10px;
      border-radius: 99px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      /* box-shadow removido */
      z-index: 10;
      pointer-events: none;
      animation: fadeIn 0.3s ease-out;
    }



    .footer {
      background: var(--primary-color);
      color: white;
      margin: 2rem 0 0 0;
      padding: 2rem 1rem;
      border-radius: 0;
      box-shadow: 0 10px 40px rgba(242, 86, 193, 0.1);
      width: 100%;
    }

    .footer-content {
      max-width: 80rem;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      align-items: center;
      text-align: center;
    }

    .footer-section {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }

    .footer-title {
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .footer-description {
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.95rem;
      max-width: 400px;
      line-height: 1.6;
    }

    .social-icons {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
      margin: 1rem 0;
    }

    .social-link {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      border: 2px solid white;
    }

    .social-link:hover {
      background: white;
      transform: translateY(-5px);
    }

    .social-link:hover svg {
      color: var(--primary-color);
    }

    .social-link svg {
      width: 28px;
      height: 28px;
      color: white;
      transition: color 0.3s ease;
    }

    .whatsapp-btn-footer {
      padding: 1rem 1.5rem;
      background: white;
      color: var(--primary-color);
      border: none;
      border-radius: 1.875rem;
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin: 1.5rem 1rem;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      max-width: calc(100% - 2rem);
    }

    .whatsapp-btn-footer:hover {
      transform: translateY(-5px);
      background: #f0f0f0; /* Um cinza bem claro para diferenciar do fundo */
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    }

    .whatsapp-btn-footer:hover span {
      color: var(--primary-color) !important;
    }

    .whatsapp-btn-footer:active {
      transform: scale(0.95);
    }

    .whatsapp-btn-footer span {
      color: var(--primary-color);
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .whatsapp-btn-footer svg {
      width: 24px;
      height: 24px;
      fill: var(--primary-color);
      transition: all 0.3s ease;
    }

    .whatsapp-btn-footer:hover svg {
      fill: var(--primary-color) !important;
      transform: scale(1.1);
    }

    .copyright {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.8);
      text-align: center;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .logo-img {
      height: 51.2px;
      width: auto;
      max-width: 200px;
      border-radius: 0.75rem;
      object-fit: contain;
      display: none;
    }

    .category-btn {
      width: 100%;
      padding: 1rem 1.25rem;
      background: #ffffff;
      border: 1px solid #f0f0f0;
      border-radius: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      text-align: left;
      color: #374151;
      animation: slideInRight 0.5s ease-out forwards;
      opacity: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .category-btn:hover {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
      /* transform: translateX(8px); Removido para evitar problemas de cursor */
    }

    .category-btn:active {
      transform: scale(0.98) translateX(8px);
    }

    .category-btn.active {
      background: var(--primary-color);
      color: white;
      border-color: var(--primary-color);
    }

    .admin-tab-btn {
      cursor: pointer;
      transition: all 0.3s ease;
      border-bottom: 3px solid transparent;
      color: #6b7280;
      padding: 0.75rem 1.25rem;
      font-weight: 600;
      font-size: 0.95rem;
      overflow: visible !important; /* Garantir que o badge não seja cortado */
    }

    .admin-tab-btn:hover {
      color: var(--primary-color);
      background: rgba(242, 86, 193, 0.05);
      cursor: pointer;
    }

    .admin-tab-btn.active {
      color: var(--primary-color);
      border-bottom-color: var(--primary-color);
    }
    
    #orders-notification-badge {
      top: -5px !important;
      right: -5px !important;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      font-size: 10px;
      font-weight: bold;
      color: white;
      background-color: #ef4444;
      border: 2px solid white;
      border-radius: 9999px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    #orders-notification-badge.pulse {
      animation: badgePulse 2s infinite;
    }
    
    @keyframes badgePulse {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
      70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
    
    .admin-tab-btn.has-new-orders {
      color: #ef4444 !important;
      animation: textPulse 2s infinite;
    }
    
    @keyframes textPulse {
      0% { opacity: 1; }
      50% { opacity: 0.6; transform: scale(1.05); }
      100% { opacity: 1; }
    }

    .admin-tab-btn.active:hover {
      border-bottom-color: var(--primary-color);
      color: #111827;
    }

    .admin-tab-content {
      animation: slideInUp 0.3s ease-out;
    }

    .admin-product-item {
      background: #f9fafb;
      padding: 1rem;
      border-radius: 1rem;
      border-left: 4px solid var(--primary-color);
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
      border: 1px solid #f0f0f0;
    }

    .admin-product-item:hover {
      background: #f3f4f6;
    }

    .admin-product-info {
      flex: 1;
    }

    .admin-product-name {
      font-weight: bold;
      color: #111827;
      margin-bottom: 0.25rem;
    }

    .admin-product-price {
      color: var(--primary-color);
      font-weight: bold;
    }

    .admin-product-stock {
      font-size: 0.85rem;
      color: #6b7280;
      margin-top: 0.25rem;
    }

    .admin-product-stock.low {
      color: #f97316;
    }

    .admin-product-stock.out {
      color: #dc2626;
    }

    .admin-product-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .admin-product-actions button {
      padding: 0.5rem 0.75rem;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.85rem;
      transition: all 0.2s ease;
    }

    .admin-edit-btn, .admin-delete-btn, .admin-toggle-stock-btn, .admin-duplicate-btn, .admin-view-btn {
      background: transparent !important;
      color: var(--primary-color) !important;
      border: 2px solid var(--primary-color) !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem !important;
      border-radius: 0.5rem !important;
      font-weight: 600 !important;
      transition: all 0.2s ease !important;
    }

    .admin-edit-btn:hover, .admin-delete-btn:hover, .admin-toggle-stock-btn:hover:not(:disabled), .admin-duplicate-btn:hover, .admin-view-btn:hover {
      background: var(--primary-color) !important; background-image: none !important;
      color: white !important;
      transform: scale(1.02);
    }

    .admin-toggle-stock-btn.out-of-stock {
      border-color: var(--primary-color) !important;
      color: var(--primary-color) !important;
    }

    .admin-toggle-stock-btn:disabled {
      opacity: 0.8;
      cursor: not-allowed;
    }

    .admin-toggle-stock-btn.loading {
      position: relative;
      color: transparent;
    }

    .admin-toggle-stock-btn.loading::after {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid rgba(0, 0, 0, 0.2);
      border-top-color: currentColor;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }



    
    .header-icon-btn {
      background: transparent !important;
      border: 2px solid white !important;
      padding: 10px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color) !important;
    }

    

    


    

    .header-icon-btn:active {
      transform: scale(0.95);
    }

    

    .form-group textarea {
      padding: 0.75rem 1rem;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      font-size: 1rem;
      font-family: 'Outfit', sans-serif;
      transition: all 0.2s;
      background: #ffffff;
    }

    .form-group textarea:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .banner-wrapper {
      display: block;
    }

    .banner-wrapper.hidden {
      display: none;
    }

    /* Espaçamento quando o banner está oculto */
    .banner-wrapper.hidden + section {
      padding-top: 2rem; /* Adiciona espaço acima da seção de produtos */
    }

    .out-of-stock-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: #d1d5db;
      color: white;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-weight: bold;
      font-size: 0.85rem;
    }

    .product-card.out-of-stock .btn-add {
      background: #d1d5db;
      cursor: not-allowed;
    }

    .product-card.out-of-stock .btn-add:hover {
      transform: none;
      box-shadow: none;
    }

    .modal-edit-product {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      z-index: 200000 !important; /* Garantir que fique acima de todos os elementos, inclusive botões flutuantes */
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      padding: 1rem !important;
      overflow-y: auto !important;
    }
    @media (min-width: 1024px) {
      .modal-edit-product {
        padding: 40px !important;
      }
    }

    .modal-edit-product.active {
      display: flex;
    }

    .modal-edit-content {
      background: white;
      border-radius: 2rem;
      padding: 2rem;
      max-width: 500px;
      width: 100%;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      animation: slideInUp 0.4s ease-out;
      margin: auto;
      border: 1px solid #f0f0f0;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }
    @media (min-width: 1024px) {
      .modal-edit-content {
        margin: auto;
      }
    }

    .empty-cart-icon {
      width: 80px;
      height: 88px;
      margin-bottom: 1rem;
      opacity: 0.5;
    }

    .modal-buttons {
      display: flex;
      gap: 0.75rem;
      margin-top: 1.5rem;
      width: 100%;
      align-items: center;
    }

    .modal-buttons button {
      padding: 0.875rem 1rem;
      border: none;
      border-radius: 0.75rem;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.3s;
      font-family: 'Outfit', sans-serif;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 48px;
      white-space: nowrap;
    }

    .modal-btn-cancel {
      flex: 0 0 35%;
      background: #f1f5f9;
      color: #64748b;
    }

    .modal-btn-save {
      flex: 1;
      background: var(--primary-color);
      color: white;
      position: relative;
      overflow: hidden;
    }

    @media (max-width: 640px) {
      .modal-buttons {
        gap: 0.5rem;
      }
      .modal-buttons button {
        font-size: 0.85rem;
        padding: 0.875rem 0.5rem;
      }
      .modal-btn-cancel {
        flex: 0 0 30%;
      }
    }

    .modal-btn-cancel:hover {
      background: #e2e8f0;
      color: #475569;
    }

    .modal-btn-save:hover:not(.btn-saving):not(.btn-success) {
      transform: translateY(-2px);
      opacity: 0.9;
    }

    .modal-btn-save.btn-saving {
      background: var(--primary-color);
      cursor: not-allowed;
      opacity: 0.8;
    }

    .modal-btn-save.btn-success {
      background: var(--primary-color);
    }

    .modal-btn-cancel {
      background: #f3f4f6;
      color: #374151;
    }

    .modal-btn-cancel:hover {
      background: #e5e7eb;
    }

    .btn-text {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
    }

    .btn-saving .btn-text {
      opacity: 0;
      position: absolute;
    }

    .btn-success .btn-text {
      opacity: 0;
      position: absolute;
    }

    .btn-loading-spinner {
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      display: none;
    }

    .btn-saving .btn-loading-spinner {
      display: block;
    }

    .btn-success-content {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      animation: slideInUp 0.4s ease-out;
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

    .btn-success .btn-success-content {
      display: flex;
    }

    .btn-success-icon {
      width: 20px;
      height: 20px;
    }

    

    .admin-dashboard.active {
      display: flex;
    }

    .admin-dashboard.hidden {
      display: none;
    }

    

    .admin-list-item { width: 100%; max-width: 100%; 
      max-width: 100% !important;
      box-sizing: border-box !important;
      background: #ffffff;
      padding: 1.25rem;
      border-radius: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      transition: all 0.3s ease;
      margin-bottom: 1rem;
      border: 1px solid #f0f0f0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    @media (min-width: 640px) {
      .admin-list-item { width: 100%; max-width: 100%; 
      max-width: 100% !important;
      box-sizing: border-box !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    /* Efeito de hover removido para corrigir problemas no mobile */
    .admin-list-item:hover {
      border-color: var(--primary-color);
      /* box-shadow: 0 4px 12px rgba(242, 86, 193, 0.1); */
      /* transform: translateY(-2px); */
    }

    .admin-list-info {
      flex: 1;
    }

    .admin-list-title {
      font-weight: 700;
      color: #111827;
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }

    .admin-list-subtitle {
      font-size: 0.85rem;
      color: #6b7280;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    
    .admin-list-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      width: 100%;
    }

    .admin-list-actions button {
      flex: 1 1 calc(50% - 0.5rem);
      min-width: 110px;
      padding: 0.6rem 0.4rem;
      font-size: 0.75rem;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      border-radius: 0.75rem;
      font-weight: 600;
      transition: all 0.2s ease;
      cursor: pointer !important;
    }

    @media (min-width: 1024px) {
      .admin-list-actions {
        width: auto;
        flex-wrap: nowrap;
      }
      .admin-list-actions button {
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
      }
    }


    .modal-edit-category {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      z-index: 200000 !important; /* Garantir que fique acima de todos os elementos, inclusive botões flutuantes */
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      padding: 1rem !important;
      overflow-y: auto !important;
    }
    @media (min-width: 1024px) {
      .modal-edit-category {
        padding: 40px !important;
      }
    }

    .modal-edit-category.active {
      display: flex;
    }

    .loading-state {
      position: relative;
      opacity: 0.6;
      pointer-events: none;
    }

    #address-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 50;
      display: none;
      align-items: center;
      justify-content: center;
      animation: fadeIn 0.3s ease-out;
      padding: 0;
      overflow: hidden;
    }

    #address-overlay.show {
      display: flex;
    }

    #address-form-wrapper {
      background: white;
      width: 100%;
      height: 100%;
      max-height: 100vh;
      border-radius: 0;
      box-shadow: none;
      animation: slideInUp 0.4s ease-out;
      overflow: hidden;
      border: none;
      display: flex;
      flex-direction: column;
    }

    #address-form-container {
      padding: 2rem;
      flex: 1;
      overflow-y: auto;
    }

    #address-form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1.5rem;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 1.5rem;
      position: sticky;
      top: 0;
      background: white;
      z-index: 10;
    }

    #address-form-header h3 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #111827;
      margin: 0;
    }

    #address-form-header button {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      border-radius: 0.5rem;
      transition: all 0.2s;
    }

    #address-form-header button:hover {
      background: #f3f4f6;
    }

    #address-form-header button svg {
      width: 1.5rem;
      height: 1.5rem;
      color: #374151;
    }

    .address-form-content {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .address-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .address-form-full {
      grid-column: 1 / -1;
    }

    .loading-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
    }

    #footer-save-btn {
      display: flex !important;
    }

    #footer-save-btn.hidden {
      display: none !important;
    }

    #footer-save-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    #footer-save-btn:disabled:hover {
      background: var(--primary-color);
      box-shadow: none;
    }

    

    .admin-confirm-btn {
      background: transparent !important;
      color: var(--primary-color) !important;
      border: 2px solid var(--primary-color) !important;
      padding: 0.6rem 0.4rem;
      font-size: 0.75rem;
      border-radius: 0.75rem;
      font-weight: 600;
      transition: all 0.2s ease;
    }

    .admin-confirm-btn:hover {
      background: var(--primary-color) !important; background-image: none !important;
      color: white !important;
      transform: scale(1.02);
    }

    .admin-confirm-btn[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .order-detail-content {
      max-height: 70vh;
      overflow-y: auto;
    }

    .admin-footer-buttons button {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 0.75rem;
      font-weight: 600;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s;
      font-family: 'Outfit', sans-serif;
      position: relative;
      overflow: hidden;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-footer-save {
      background: var(--primary-color);
      color: white;
      flex: 1;
    }

    .btn-footer-save:hover:not(.btn-saving):not(.btn-success) {
      transform: translateY(-2px);
      opacity: 0.9;
    }

    .btn-footer-save.btn-saving {
      background: var(--primary-color);
      cursor: not-allowed;
      opacity: 0.8;
    }

    .btn-footer-save.btn-success {
      background: var(--primary-color);
    }

    .btn-footer-logout {
      background: #ef4444;
      color: white;
    }

    .btn-footer-logout:hover {
      transform: translateY(-2px);
      opacity: 0.9;
    }

    .form-group select {
      padding: 0.75rem 1rem;
      border: 1px solid #e5e7eb;
      border-radius: 0.75rem;
      font-size: 1rem;
      font-family: 'Outfit', sans-serif;
      transition: all 0.2s;
      background: #ffffff;
    }

    .form-group select:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .loading-skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loadingShimmer 2s infinite;
    }

    .menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      z-index: 30;
    }

    .menu-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      max-width: 320px;
      background: white;
      z-index: 40;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }

    .menu-sidebar.active {
      transform: translateX(0);
    }

    .cart-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
      max-width: 384px;
      background: white;
      z-index: 40;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }

    .cart-sidebar.active {
      transform: translateX(0);
    }

    .toast-notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 100000; /* Garantir que fique acima de todos os modais */
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
      min-width: 280px;
      max-width: 90%;
      pointer-events: none; /* Inicialmente não interativo */
      font-size: 0.95rem;
      font-weight: 500;
    }

    .toast-notification.show {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(-10px); /* Pequeno movimento para cima */
      pointer-events: auto;
    }

    .toast-notification .toast-icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .toast-notification .toast-icon {
      width: 18px;
      height: 18px;
      stroke-width: 2.5;
    }

    .toast-notification.success .toast-icon-wrapper {
      background-color: #4CAF50;
    }
    .toast-notification.success .toast-icon {
      color: white;
    }

    .toast-notification.error .toast-icon-wrapper {
      background-color: #F44336;
    }
    .toast-notification.error .toast-icon {
      color: white;
    }

    .toast-notification.info .toast-icon-wrapper {
      background-color: #2196F3;
    }
    .toast-notification.info .toast-icon {
      color: white;
    }

    .toast-notification.warning .toast-icon-wrapper {
      background-color: var(--primary-color);
    }
    .toast-notification.warning .toast-icon {
      color: white;
    }

    .toast-notification #toast-message {
      flex-grow: 1;
      text-align: left;
      color: white;
      font-weight: 500;
    }



    .toast-notification.error {
      border-color: #ef4444;
    }



    .hidden {
      display: none;
    }

    .status-badge {
      padding: 0.25rem 0.75rem;
      border-radius: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .status-badge.active {
      background: #d1fae5;
      color: #065f46;
    }

    .status-badge.inactive {
      background: #fee2e2;
      color: #7f1d1d;
    }

    .role-badge {
      padding: 0.25rem 0.75rem;
      border-radius: 0.5rem;
      font-size: 0.75rem;
      font-weight: 600;
      background: #dbeafe;
      color: #0c4a6e;
    }

    .modal-edit-user {
      position: fixed !important;
      inset: 0 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      display: none;
      align-items: center !important;
      justify-content: center !important;
      z-index: 200000 !important; /* Garantir que fique acima de todos os elementos, inclusive botões flutuantes */
      backdrop-filter: blur(4px) !important;
      -webkit-backdrop-filter: blur(4px) !important;
      padding: 1rem !important;
      overflow-y: auto !important;
    }
    @media (min-width: 1024px) {
      .modal-edit-user {
        padding: 40px !important;
      }
    }

    .modal-edit-user.active {
      display: flex;
    }

    

    #dashboard-tabs {
      display: flex !important;
      gap: 0.5rem !important;
      overflow-x: auto !important;
      padding-bottom: 8px !important; /* Espaço entre os botões e a barra de rolagem */
      margin-bottom: 4px !important;
      border-bottom: 1px solid #f0f0f0 !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: thin !important;
      scrollbar-color: var(--primary-color) #f5f5f5 !important;
    }

    

    .remember-checkbox-wrapper {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      background: #f9fafb;
      border-radius: 0.75rem;
    }

    .remember-checkbox-wrapper input[type="checkbox"] {
      width: 18px;
      height: 18px;
      cursor: pointer;
      accent-color: var(--primary-color);
    }

    .remember-checkbox-wrapper label {
      cursor: pointer;
      color: #374151;
      font-weight: 500;
      margin: 0;
      flex: 1;
    }
  
    /* Modernização de Botões e Ícones */
    .btn-login, #checkout-btn, .whatsapp-btn-footer {
      border-radius: 12px !important;
      letter-spacing: 0.025em;
      text-transform: uppercase;
      font-size: 0.85rem !important;
      box-shadow: none;
      transition: all 0.3s ease !important;
    }

    .btn-add {
      border-radius: 12px !important;
      letter-spacing: 0.025em;
      font-size: 0.85rem !important;
      box-shadow: none;
      transition: all 0.3s ease !important;
    }

    .btn-add:hover, .btn-login:hover, #checkout-btn:hover {
      box-shadow: none;
      transform: translateY(-2px);
    }

    
    .header-icon-btn {
      background: transparent !important;
      border: 2px solid white !important;
      padding: 10px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-color) !important;
    }

    

    


    

    

    .floating-btn {
      background: var(--primary-color) !important; background-image: none !important;
      border: 2px solid white !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .product-card {
      border-radius: 24px !important;
      border: 1px solid #f3f4f6 !important;
    }

    .category-btn {
      border-radius: 12px !important;
      font-size: 0.9rem !important;
    }

    .quantity-btn {
      border-radius: 8px !important;
      width: 32px !important;
      height: 32px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    /* Estilos Modernos para o Painel ADM */
    #adminDashboard {
        backdrop-filter: blur(10px);
    }
    .admin-tab-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 500;
        border-radius: 8px;
        padding: 10px 16px !important;
        transition: all 0.2s ease;
    }
    .admin-tab-btn.active, .admin-tab-btn:hover {
        background: var(--primary-transparent);
        color: var(--primary-color) !important;
    }

    /* Otimização Mobile do Painel ADM */
    @media (max-width: 1023px) {
        #adminDashboard {
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        #dashboard-content {
            padding: 1rem !important;
            background-color: #f8fafc !important;
            overflow-y: visible !important; /* Permite que o pai controle a rolagem */
        }

        .admin-list-item {
            touch-action: pan-y !important; /* Garante que o toque inicie a rolagem vertical */
            position: relative; /* Necessário para posicionamento absoluto do checkbox */
        }
        .admin-checkbox-wrapper {
            position: absolute !important;
            left: 0.5rem !important; /* Ajuste para a esquerda */
            top: 50% !important;
            transform: translateY(-50%) !important;
            z-index: 10; /* Garante que o checkbox esteja acima de outros elementos */
            padding: 0 !important; /* Remover padding extra */
            background: transparent !important; /* Remover fundo */
        }
        .admin-checkbox-wrapper input[type="checkbox"] {
            margin: 0 !important; /* Remover margens padrão */
        }

        .admin-tab-header {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 1rem !important;
            margin-bottom: 1.5rem !important;
        }

        .admin-tab-header h3 {
            font-size: 1.25rem !important;
            margin-bottom: 0 !important;
        }

        .admin-tab-content button[onclick^="openAdd"], 
        .admin-tab-content button[onclick^="clearOrdersHistory"] {
            width: 100% !important;
            justify-content: center !important;
            padding: 0.875rem !important;
            font-size: 0.875rem !important;
            margin-top: 0.5rem !important;
        }
        .admin-list-item {
            padding: 1rem 1rem 1rem 2.5rem !important; /* Ajustado padding-left para o checkbox */
            gap: 1rem !important;
            border-radius: 12px !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            position: relative; /* Necessário para posicionamento absoluto do checkbox */
        }
        .admin-list-item .flex.items-center.gap-4.flex-1 {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            width: 100% !important; /* Garante que o contêiner ocupe a largura total para centralizar */
        }

        .admin-list-item .w-12.h-12.rounded-lg.bg-gray-100.flex-shrink-0.overflow-hidden.border.border-gray-100 {
            margin-bottom: 0.5rem !important; /* Espaçamento entre imagem e texto */
        }
        .admin-list-thumb {
            margin: 0 auto 0.5rem auto !important; /* Ajuste de margem para centralizar a imagem */
            width: 80px !important;
            height: 80px !important;
        }



        .admin-list-info {
            width: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
        }

        .admin-list-title {
            font-size: 0.95rem !important;
            margin-bottom: 0.25rem !important;
            width: 100% !important;
            text-align: center !important;
        }

        .admin-list-subtitle {
            gap: 0.75rem !important;
            font-size: 0.8rem !important;
            display: flex !important;
            flex-direction: row !important; /* Alinha os badges lado a lado */
            justify-content: center !important; /* Centraliza os badges horizontalmente */
            align-items: center !important;
            text-align: center !important;
            width: 100% !important;
        }

        .admin-list-actions {
            width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 0.5rem !important;
            margin-top: 0.75rem !important;
        }

        .admin-list-actions button {
            flex: 1 1 calc(50% - 0.25rem) !important;
            padding: 0.75rem 0.5rem !important;
            font-size: 0.8rem !important;
            height: auto !important;
            min-height: 42px !important;
            justify-content: center !important;
            border-radius: 10px !important;
            cursor: pointer !important;
        }

        /* Botões de exclusão ou ações secundárias em linha cheia se necessário */
        .admin-delete-btn {
            flex: 1 1 100% !important;
            margin-top: 0.25rem !important;
            background: #fff1f2 !important;
            color: #e11d48 !important;
            border: 1px solid #fecdd3 !important;
            cursor: pointer !important;
        }

        .admin-footer-buttons {
            flex-direction: column !important;
            padding: 1rem !important;
            gap: 0.75rem !important;
        }

        .btn-footer-save, .btn-footer-logout {
            width: 100% !important;
            margin: 0 !important;
        }
        
        #dashboard-tabs {
            padding-bottom: 0.5rem !important;
            margin-bottom: 1rem !important;
            overflow-x: auto !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            -webkit-overflow-scrolling: touch !important;
        }
        #dashboard-tabs::-webkit-scrollbar {
            display: none !important; /* Esconde a barra no mobile para um visual mais limpo */
        }
    }

    /* MELHORIAS DESKTOP - SEÇÃO USUÁRIOS */
    @media (min-width: 1024px) {
        .admin-list-actions button {
            flex: 0 0 auto !important;
            padding: 0.75rem 1rem !important;
            font-size: 0.85rem !important;
            cursor: pointer !important;
        }
        /* Layout Geral */
        #dashboard-content {
            background-color: #f8fafc !important; /* Fundo levemente cinza para contraste com cards */
            padding: 2rem !important;
        }
        
        #admin-tab-users, #admin-tab-store, #admin-tab-categories, #admin-tab-products, #admin-tab-orders {
            max-width: 1320px;
            margin: 0 auto;
        }

        .admin-tab-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            margin-bottom: 2rem !important;
            width: 100% !important;
        }

        .admin-tab-content h3 {
            font-size: 1.5rem !important;
            color: #1e293b !important;
            margin-bottom: 0 !important;
        }

        /* Botões de Ação Superior (Adicionar) */
        .admin-tab-content button[onclick^="openAdd"], 
        .admin-tab-content button[onclick^="clearOrdersHistory"] {
            width: auto !important;
            padding: 0.75rem 1.5rem !important;
            position: static !important;
            margin-top: 0 !important;
            border-radius: 12px !important;
            font-size: 0.9rem !important;
            box-shadow: 0 4px 12px rgba(242, 86, 193, 0.2) !important;
        }

        /* Listas Padronizadas */
        #users-list, #categories-list-admin, #products-list, #orders-list {
            clear: both;
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin-top: 2rem !important;
        }

        /* Ajuste específico para a aba Loja no Desktop */
        #admin-tab-store .grid {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        #admin-tab-store .form-group {
            margin-bottom: 1.5rem;
        }

        /* Card de Usuário Estilo SaaS */
        .admin-list-item {
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            background: white !important;
            padding: 1rem 1.5rem !important;
            border-radius: 16px !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
            transition: all 0.2s ease-in-out !important;
            gap: 2rem !important;
            cursor: pointer !important;
        }

        /* Efeito de hover removido para corrigir problemas no mobile */
        .admin-list-item:hover {
            /* transform: translateY(-2px) !important; */
            /* box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; */
            border-color: var(--primary-color) !important;
        }

        .admin-list-info {
            display: flex;
            align-items: center;
            gap: 2rem;
            flex: 1;
        }

        .admin-list-title {
            font-size: 1rem !important;
            font-weight: 600 !important;
            color: #0f172a !important;
            margin-bottom: 0 !important;
            min-width: 200px;
        }

        .admin-list-subtitle {
            display: flex;
            align-items: center;
            gap: 1.5rem !important;
        }

        /* Badges Modernas */
        .role-badge {
            background: #f1f5f9 !important;
            color: #475569 !important;
            font-size: 0.75rem !important;
            padding: 0.25rem 0.75rem !important;
            border-radius: 6px !important;
            text-transform: capitalize;
            font-weight: 500 !important;
        }

        .status-badge {
            display: inline-flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            background: transparent !important;
            padding: 0 !important;
            font-size: 0.85rem !important;
            font-weight: 500 !important;
        }

        .status-badge::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .status-badge.active { color: var(--primary-color) !important; }
        .status-badge.active::before { background: var(--primary-color); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); }
        
        .status-badge.inactive { color: #94a3b8 !important; }
        .status-badge.inactive::before { background: #94a3b8; }

        /* Ações Agrupadas à Direita */
        .admin-list-actions {
            width: auto !important;
            display: flex !important;
            gap: 0.75rem !important;
        }

        .admin-list-actions button {
            flex: none !important;
            width: auto !important;
            min-width: 0 !important;
            padding: 0.5rem 1rem !important;
            font-size: 0.8rem !important;
            border-radius: 8px !important;
            height: 36px !important;
        }

        /* Hierarquia de Botões */
        .admin-edit-btn, .admin-delete-btn, .admin-toggle-stock-btn, .admin-duplicate-btn, .admin-view-btn {
            border: 2px solid var(--primary-color) !important;
            background: transparent !important;
            color: var(--primary-color) !important;
        }
        .admin-edit-btn:hover, .admin-delete-btn:hover, .admin-toggle-stock-btn:hover, .admin-duplicate-btn:hover, .admin-view-btn:hover {
            background: var(--primary-color) !important; background-image: none !important;
            color: white !important;
        }

        /* Rodapé do Painel */
        .admin-footer-buttons {
            max-width: 1320px;
            margin: 0 auto;
            background: transparent !important;
            border: 2px solid white !important;
            padding: 2rem !important;
            justify-content: flex-end;
            gap: 1rem;
        }

        .btn-footer-save {
            flex: none !important;
            width: 320px !important;
            border-radius: 12px !important;
            order: 2;
            white-space: nowrap !important;
        }

        .btn-footer-logout {
            flex: none !important;
            width: 80px !important;
            background: white !important;
            color: #64748b !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 12px !important;
            order: 1;
        }
    }
    .admin-product-item {
        border-radius: 16px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        border: 1px solid #f0f0f0 !important;
        margin-bottom: 12px;
    }
    .admin-product-actions button {
        border-radius: 8px !important;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Otimizações de Responsividade */
    @media (max-width: 1024px) {
        #products-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 20px !important;
        }
    }

    @media (max-width: 768px) {
        #products-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px !important;
        }
        .banner {
            min-height: 220px !important;
        }
    }

    @media (max-width: 480px) {
        #products-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 12px !important;
            padding: 0 4px;
        }
        
        .product-card {
            border-radius: 16px !important;
        }
        
        .product-card .p-4 {
            padding: 10px !important;
        }
        
        .product-card h3 {
            font-size: 0.9rem !important;
            line-height: 1.2;
            margin-bottom: 4px !important;
            display: block;
            overflow: visible;
            height: auto;
            min-height: 2.4em;
        }
        
        .product-card p {
            font-size: 0.7rem !important;
            margin-bottom: 6px !important;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .product-card .text-xl {
            font-size: 1rem !important;
        }
        
        .btn-add {
            padding: 8px 10px !important;
            font-size: 0.85rem !important;
            border-radius: 10px !important;
            width: 100%;
            font-weight: 700 !important;
        }
        
        .btn-add svg {
            width: 12px !important;
            height: 12px !important;
        }

        .header {
            height: 70.4px !important;
        }
        
        #app {
            padding-top: 70.4px !important;
        }

        #store-title {
            font-size: 1.1rem !important;
        }

        .banner {
            min-height: 160px !important;
            border-radius: 16px !important;
        }

        .settings-content {
            width: 95% !important;
            padding: 1.5rem !important;
        }
        
        .cart-sidebar, .menu-sidebar {
            width: 90% !important;
        }

        .floating-btn {
            bottom: 16px !important;
            right: 16px !important;
            width: 50px !important;
            height: 50px !important;
        }
    }

    /* Melhoria no toque para todos os botões */
    button, .category-btn, .admin-tab-btn {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
#users-list { width: 100% !important; overflow-x: visible !important; }
    .sticky-header h2 {
      display: flex !important;
      align-items: center !important;
      font-size: 1.25rem !important; /* Aumentado levemente já que não tem ícone */
      line-height: 1.2 !important;
      margin: 0 !important;
      flex: 1 !important;
      overflow: visible !important;
    }
.sticky-header .flex-shrink-0 {
      width: 40px !important;
      height: 40px !important;
      min-width: 44px !important; /* Área de toque adequada para mobile */
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      background: #fff1f9 !important;
      border-radius: 12px !important;
      position: static !important; /* Garantir que não seja absolute */
    }

    :root {
      --admin-bg: #ffffff;
      --admin-border: #f0f0f0;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    .admin-dashboard {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      background: white !important;
      z-index: 1000 !important;
      display: none;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .admin-dashboard.active {
      display: flex !important;
    }

    .admin-content {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100dvh !important;
      background: white !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 2px solid white !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    .sticky-header {
      display: flex !important;
      align-items: center !important;
      padding: 12px 16px !important;
      padding-top: max(12px, var(--safe-top)) !important;
      box-sizing: border-box !important;
      background: white !important;
      border-bottom: 1px solid var(--admin-border) !important;
      z-index: 100 !important;
      position: relative !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      width: 100% !important;
    }

    #dashboard-content {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 1.25rem !important;
      -webkit-overflow-scrolling: touch !important;
      background: white !important;
      box-sizing: border-box !important;
    }

    .admin-footer-buttons {
      flex-shrink: 0 !important;
      display: flex !important;
      gap: 0.75rem !important;
      padding: 1rem !important;
      padding-bottom: max(1.25rem, var(--safe-bottom)) !important;
      background: white !important;
      border-top: 1px solid var(--admin-border) !important;
      z-index: 100 !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    /* Ajuste para o ícone de engrenagem não cortar */
    .sticky-header .flex-shrink-0 {
      width: 40px !important;
      height: 40px !important;
      min-width: 44px !important; /* Área de toque adequada para mobile */
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      background: #fff1f9 !important;
      border-radius: 12px !important;
      position: static !important; /* Garantir que não seja absolute */
    }
    
    .sticky-header h2 {
      display: flex !important;
      align-items: center !important;
      font-size: 1.25rem !important; /* Aumentado levemente já que não tem ícone */
      line-height: 1.2 !important;
      margin: 0 !important;
      flex: 1 !important;
      overflow: visible !important;
    }
    
.modal-order-detail.active { display: flex !important; }
.modal-delete-confirm.active { display: flex !important; }

    #dashboard-tabs::-webkit-scrollbar {
      height: 4px !important;
    }
    #dashboard-tabs::-webkit-scrollbar-track {
      background: #f5f5f5 !important;
      border-radius: 10px !important;
    }
    #dashboard-tabs::-webkit-scrollbar-thumb {
      background: var(--primary-color) !important; background-image: none !important;
      border-radius: 10px !important;
    }
    

    .category-tag {
      display: inline-flex;
      align-items: center;
      background: #fdf2f8;
      color: var(--primary-color);
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #fbcfe8;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .category-tag button {
      margin-left: 6px;
      color: #9d174d;
      font-weight: bold;
      cursor: pointer;
    }
    .category-tag button:hover {
      color: #ef4444;
    }

    
    .admin-footer-buttons button {
      flex: 1 !important;
      min-width: 0 !important;
      padding: 0.75rem 0.5rem !important;
      font-size: 0.875rem !important;
    }
    @media (min-width: 640px) {
      .admin-footer-buttons button {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
      }
    }
    

    /* Fix for mobile hover and cursor */
    @media (max-width: 768px) {
      .admin-list-item:hover {
        transform: none !important;
        box-shadow: none !important;
        border-color: #f0f0f0 !important;
      }
      .admin-list-item {
        cursor: default !important;
      }

    }

    /* Scroll to Top Button - Standardized with Floating Settings Button */
    #scroll-to-top-btn {
      position: fixed;
      bottom: 30px;
      left: 30px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: var(--primary-color) !important; background-image: none !important;
      color: white;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 99999; /* Abaixo dos modais e notificações */
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      border: 2px solid white !important;
    }
    #scroll-to-top-btn:hover {
      transform: scale(1.1) translateY(-5px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
    }
    #scroll-to-top-btn:active {
      transform: scale(0.95);
    }
    #scroll-to-top-btn svg {
      width: 28px;
      height: 28px;
      color: white;
      pointer-events: none;
    }

    @media (max-width: 768px) {
      #scroll-to-top-btn {
        bottom: 16px !important;
        left: 16px !important;
        width: 50px !important;
        height: 50px !important;
      }
      #scroll-to-top-btn svg {
        width: 24px;
        height: 24px;
      }
    }
  </style>
  <style>body { box-sizing: border-box; }#users-list { width: 100% !important; overflow-x: visible !important; }
    .sticky-header h2 {
      display: flex !important;
      align-items: center !important;
      font-size: 1.25rem !important; /* Aumentado levemente já que não tem ícone */
      line-height: 1.2 !important;
      margin: 0 !important;
      flex: 1 !important;
      overflow: visible !important;
    }
.sticky-header .flex-shrink-0 {
      width: 40px !important;
      height: 40px !important;
      min-width: 44px !important; /* Área de toque adequada para mobile */
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      background: #fff1f9 !important;
      border-radius: 12px !important;
      position: static !important; /* Garantir que não seja absolute */
    }

    :root {
      --admin-bg: #ffffff;
      --admin-border: #f0f0f0;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    .admin-dashboard {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      background: white !important;
      z-index: 1000 !important;
      display: none;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .admin-dashboard.active {
      display: flex !important;
    }

    .admin-content {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100dvh !important;
      background: white !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 2px solid white !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    .sticky-header {
      display: flex !important;
      align-items: center !important;
      padding: 12px 16px !important;
      padding-top: max(12px, var(--safe-top)) !important;
      box-sizing: border-box !important;
      background: white !important;
      border-bottom: 1px solid var(--admin-border) !important;
      z-index: 100 !important;
      position: relative !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      width: 100% !important;
    }

    #dashboard-content {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 1.25rem !important;
      -webkit-overflow-scrolling: touch !important;
      background: white !important;
      box-sizing: border-box !important;
    }

    .admin-footer-buttons {
      flex-shrink: 0 !important;
      display: flex !important;
      gap: 0.75rem !important;
      padding: 1rem !important;
      padding-bottom: max(1.25rem, var(--safe-bottom)) !important;
      background: white !important;
      border-top: 1px solid var(--admin-border) !important;
      z-index: 100 !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    /* Ajuste para o ícone de engrenagem não cortar */
    .sticky-header .flex-shrink-0 {
      width: 40px !important;
      height: 40px !important;
      min-width: 44px !important; /* Área de toque adequada para mobile */
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      background: #fff1f9 !important;
      border-radius: 12px !important;
      position: static !important; /* Garantir que não seja absolute */
    }
    
    .sticky-header h2 {
      display: flex !important;
      align-items: center !important;
      font-size: 1.25rem !important; /* Aumentado levemente já que não tem ícone */
      line-height: 1.2 !important;
      margin: 0 !important;
      flex: 1 !important;
      overflow: visible !important;
    }
    
.modal-order-detail.active { display: flex !important; }
.modal-delete-confirm.active { display: flex !important; }

    #dashboard-tabs::-webkit-scrollbar {
      height: 4px !important;
    }
    #dashboard-tabs::-webkit-scrollbar-track {
      background: #f5f5f5 !important;
      border-radius: 10px !important;
    }
    #dashboard-tabs::-webkit-scrollbar-thumb {
      background: var(--primary-color) !important; background-image: none !important;
      border-radius: 10px !important;
    }
    

    .category-tag {
      display: inline-flex;
      align-items: center;
      background: #fdf2f8;
      color: var(--primary-color);
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #fbcfe8;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .category-tag button {
      margin-left: 6px;
      color: #9d174d;
      font-weight: bold;
      cursor: pointer;
    }
    .category-tag button:hover {
      color: #ef4444;
    }

    
    .admin-footer-buttons button {
      flex: 1 !important;
      min-width: 0 !important;
      padding: 0.75rem 0.5rem !important;
      font-size: 0.875rem !important;
    }
    @media (min-width: 640px) {
      .admin-footer-buttons button {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
      }
    }
    
</style>
  
 
  <!-- Firebase SDK -->
  <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js">
    
    // Bulk Actions Logic
    function toggleSelectAll(type) {
        const selectAll = document.getElementById(`select-all-${type}`);
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox`);
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkBar(type);
    }

    function updateBulkBar(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        const bar = document.getElementById(`bulk-actions-${type}`);
        const countEl = document.getElementById(`selected-count-${type}`);
        
        if (checkboxes.length > 0) {
            bar.classList.add('active');
            countEl.textContent = `(${checkboxes.length} selecionados)`;
        } else {
            bar.classList.remove('active');
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
        }
    }

    async function bulkDelete(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        if (checkboxes.length === 0) return;

        if (!confirm(`Tem certeza que deseja excluir ${checkboxes.length} itens selecionados?`)) return;

        showToastNoPopup('Excluindo itens...', 'info');
        const ids = Array.from(checkboxes).map(cb => cb.dataset.id);
        
        try {
            let listToSearch = [];
            if (type === 'products') listToSearch = currentDBProducts;
            else if (type === 'categories') listToSearch = currentDBCategories;
            else if (type === 'users') listToSearch = users;
            else if (type === 'orders') listToSearch = orders;

            for (const id of ids) {
                const item = listToSearch.find(i => i.__backendId === id);
                if (item) {
                    await window.dataSdk.delete(item);
                }
            }

            showToastNoPopup(`${checkboxes.length} itens excluídos com sucesso!`, 'success');
            
            // Refresh lists
            if (type === 'products') { renderProducts(); renderAdminProducts(); }
            else if (type === 'categories') { renderCategories(); renderAdminCategories(); renderAdminOrders();
      loadFirebaseConfigToUI(); updateCategorySelect(); }
            else if (type === 'users') { renderAdminUsers(); }
            else if (type === 'orders') { renderAdminOrders();
      loadFirebaseConfigToUI(); }
            
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
            updateBulkBar(type);
        } catch (error) {
            console.error('Erro na exclusão em massa:', error);
            showToastNoPopup('Erro ao excluir alguns itens', 'error');
        }
    }

    function openUserLoginModal() {
      document.getElementById('userLoginModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeUserLoginModal() {
      document.getElementById('userLoginModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      toggleUserAuthView('login');
    }

    function toggleUserAuthView(view) {
      const loginView = document.getElementById('user-login-view');
      const registerView = document.getElementById('user-register-view');
      if (view === 'register') {
        loginView.classList.add('hidden');
        registerView.classList.remove('hidden');
      } else {
        loginView.classList.remove('hidden');
        registerView.classList.add('hidden');
      }
    }

    function toggleUserPasswordVisibility(inputId) {
      const input = document.getElementById(inputId);
      input.type = input.type === 'password' ? 'text' : 'password';
    }

    async function handleUserLogin(event) {
      event.preventDefault();
      const phone = document.getElementById('user-login-phone').value;
      const password = document.getElementById('user-login-password').value;
      const errorEl = document.getElementById('userLoginError');
      
      try {
        const users = await storeManager.list();
        const user = users.find(u => u.phone === phone && u.password === password && u.data_type === 'customer');
        
        if (user) {
          closeUserLoginModal();
          // Aqui você pode adicionar lógica de sessão do usuário
        } else {
          errorEl.textContent = 'Telefone ou senha incorretos.';
        }
      } catch (e) {
        errorEl.textContent = 'Erro ao realizar login.';
      }
    }

    async function handleUserRegister(event) {
      event.preventDefault();
      const name = document.getElementById('user-reg-name').value;
      const phone = document.getElementById('user-reg-phone').value;
      const password = document.getElementById('user-reg-password').value;
      const errorEl = document.getElementById('userRegisterError');
      
      try {
        const users = await storeManager.list();
        // Verifica se já existe como customer ou user comum
        if (users.some(u => (u.phone === phone || u.username === phone) && (u.data_type === 'customer' || u.data_type === 'user'))) {
          errorEl.textContent = 'Este telefone já está cadastrado.';
          return;
        }
        
        const result = await storeManager.create({
          username: phone, // Usando telefone como username para aparecer no painel adm
          name: name,
          phone: phone,
          password: password,
          data_type: 'user', // Mudado para 'user' para aparecer na aba de usuários do adm
          role: 'usuario', // Definido como visualizador conforme solicitado
          active: true,
          created_at: new Date().toISOString()
        });
        
        if (result.isOk) {
          sessionStorage.setItem('just_registered', 'true');
          closeUserLoginModal();
          showToastNoPopup('Cadastro realizado com sucesso!', 'success');
          
          // Recarrega ou dispara a verificação de boas vindas
          setTimeout(() => {
            checkWelcomeMessage();
          }, 500);
        } else {
          errorEl.textContent = 'Erro ao realizar cadastro.';
        }
      } catch (e) {
        console.error(e);
        errorEl.textContent = 'Erro ao realizar cadastro.';
      }
    }

  
    function closeWelcomeModal() {
      document.getElementById('welcomeSuccessModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    function goToWhatsAppGroup() {
      const whatsappLink = document.querySelector('.whatsapp-btn-footer')?.parentElement?.getAttribute('onclick')?.match(/'([^']+)'/)?.[1] || "https://chat.whatsapp.com/";
      window.open(whatsappLink, '_blank');
      closeWelcomeModal();
    }

    // Função para verificar se deve mostrar o modal de boas-vindas
    function checkWelcomeMessage() {
      if (localStorage.getItem('welcome_message_shown') === 'true') return;
      
      // Se acabou de se cadastrar (marcado no handleUserRegister)
      if (sessionStorage.getItem('just_registered') === 'true') {
        setTimeout(() => {
          document.getElementById('welcomeSuccessModal').classList.add('active');
          document.body.classList.add('modal-open');
          localStorage.setItem('welcome_message_shown', 'true');
          sessionStorage.removeItem('just_registered');
        }, 1000);
      }
    }

    // Adicionar ao final do DOMContentLoaded ou início do script
    setTimeout(checkWelcomeMessage, 2000);

  </script>
  <script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-database-compat.js">
    
    // Bulk Actions Logic
    function toggleSelectAll(type) {
        const selectAll = document.getElementById(`select-all-${type}`);
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox`);
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkBar(type);
    }

    function updateBulkBar(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        const bar = document.getElementById(`bulk-actions-${type}`);
        const countEl = document.getElementById(`selected-count-${type}`);
        
        if (checkboxes.length > 0) {
            bar.classList.add('active');
            countEl.textContent = `(${checkboxes.length} selecionados)`;
        } else {
            bar.classList.remove('active');
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
        }
    }

    async function bulkDelete(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        if (checkboxes.length === 0) return;

        if (!confirm(`Tem certeza que deseja excluir ${checkboxes.length} itens selecionados?`)) return;

        showToastNoPopup('Excluindo itens...', 'info');
        const ids = Array.from(checkboxes).map(cb => cb.dataset.id);
        
        try {
            let listToSearch = [];
            if (type === 'products') listToSearch = currentDBProducts;
            else if (type === 'categories') listToSearch = currentDBCategories;
            else if (type === 'users') listToSearch = users;
            else if (type === 'orders') listToSearch = orders;

            for (const id of ids) {
                const item = listToSearch.find(i => i.__backendId === id);
                if (item) {
                    await window.dataSdk.delete(item);
                }
            }

            showToastNoPopup(`${checkboxes.length} itens excluídos com sucesso!`, 'success');
            
            // Refresh lists
            if (type === 'products') { renderProducts(); renderAdminProducts(); }
            else if (type === 'categories') { renderCategories(); renderAdminCategories(); renderAdminOrders();
      loadFirebaseConfigToUI(); updateCategorySelect(); }
            else if (type === 'users') { renderAdminUsers(); }
            else if (type === 'orders') { renderAdminOrders();
      loadFirebaseConfigToUI(); }
            
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
            updateBulkBar(type);
        } catch (error) {
            console.error('Erro na exclusão em massa:', error);
            showToastNoPopup('Erro ao excluir alguns itens', 'error');
        }
    }

    function openUserLoginModal() {
      document.getElementById('userLoginModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeUserLoginModal() {
      document.getElementById('userLoginModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      toggleUserAuthView('login');
    }

    function toggleUserAuthView(view) {
      const loginView = document.getElementById('user-login-view');
      const registerView = document.getElementById('user-register-view');
      if (view === 'register') {
        loginView.classList.add('hidden');
        registerView.classList.remove('hidden');
      } else {
        loginView.classList.remove('hidden');
        registerView.classList.add('hidden');
      }
    }

    function toggleUserPasswordVisibility(inputId) {
      const input = document.getElementById(inputId);
      input.type = input.type === 'password' ? 'text' : 'password';
    }

    async function handleUserLogin(event) {
      event.preventDefault();
      const phone = document.getElementById('user-login-phone').value;
      const password = document.getElementById('user-login-password').value;
      const errorEl = document.getElementById('userLoginError');
      
      try {
        const users = await storeManager.list();
        const user = users.find(u => u.phone === phone && u.password === password && u.data_type === 'customer');
        
        if (user) {
          closeUserLoginModal();
          // Aqui você pode adicionar lógica de sessão do usuário
        } else {
          errorEl.textContent = 'Telefone ou senha incorretos.';
        }
      } catch (e) {
        errorEl.textContent = 'Erro ao realizar login.';
      }
    }

    async function handleUserRegister(event) {
      event.preventDefault();
      const name = document.getElementById('user-reg-name').value;
      const phone = document.getElementById('user-reg-phone').value;
      const password = document.getElementById('user-reg-password').value;
      const errorEl = document.getElementById('userRegisterError');
      
      try {
        const users = await storeManager.list();
        // Verifica se já existe como customer ou user comum
        if (users.some(u => (u.phone === phone || u.username === phone) && (u.data_type === 'customer' || u.data_type === 'user'))) {
          errorEl.textContent = 'Este telefone já está cadastrado.';
          return;
        }
        
        const result = await storeManager.create({
          username: phone, // Usando telefone como username para aparecer no painel adm
          name: name,
          phone: phone,
          password: password,
          data_type: 'user', // Mudado para 'user' para aparecer na aba de usuários do adm
          role: 'usuario', // Definido como visualizador conforme solicitado
          active: true,
          created_at: new Date().toISOString()
        });
        
        if (result.isOk) {
          sessionStorage.setItem('just_registered', 'true');
          closeUserLoginModal();
          showToastNoPopup('Cadastro realizado com sucesso!', 'success');
          
          // Recarrega ou dispara a verificação de boas vindas
          setTimeout(() => {
            checkWelcomeMessage();
          }, 500);
        } else {
          errorEl.textContent = 'Erro ao realizar cadastro.';
        }
      } catch (e) {
        console.error(e);
        errorEl.textContent = 'Erro ao realizar cadastro.';
      }
    }

  
    function closeWelcomeModal() {
      document.getElementById('welcomeSuccessModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    function goToWhatsAppGroup() {
      const whatsappLink = document.querySelector('.whatsapp-btn-footer')?.parentElement?.getAttribute('onclick')?.match(/'([^']+)'/)?.[1] || "https://chat.whatsapp.com/";
      window.open(whatsappLink, '_blank');
      closeWelcomeModal();
    }

    // Função para verificar se deve mostrar o modal de boas-vindas
    function checkWelcomeMessage() {
      if (localStorage.getItem('welcome_message_shown') === 'true') return;
      
      // Se acabou de se cadastrar (marcado no handleUserRegister)
      if (sessionStorage.getItem('just_registered') === 'true') {
        setTimeout(() => {
          document.getElementById('welcomeSuccessModal').classList.add('active');
          document.body.classList.add('modal-open');
          localStorage.setItem('welcome_message_shown', 'true');
          sessionStorage.removeItem('just_registered');
        }, 1000);
      }
    }

    // Adicionar ao final do DOMContentLoaded ou início do script
    setTimeout(checkWelcomeMessage, 2000);

  </script>
  
  <script>
    
    // Carregar configuração do Firebase do LocalStorage ou usar padrão
    let firebaseConfig = {
      apiKey: "AIzaSyBt-uervc1P1V0GTtiet-gkubzucXJN7ZY",
      authDomain: "zaapstore-e16f0.firebaseapp.com",
      databaseURL: "https://zaapstore-e16f0-default-rtdb.firebaseio.com/",
      projectId: "zaapstore-e16f0",
      storageBucket: "zaapstore-e16f0.firebasestorage.app",
      messagingSenderId: "1065750548767",
      appId: "1:1065750548767:web:790edf3e7f593cfa22a02a",
      measurementId: "G-8500BBK1RF"
    };

    const savedConfig = localStorage.getItem('custom_firebase_config');
    if (savedConfig) {
      try {
        const parsed = JSON.parse(savedConfig);
        if (parsed && typeof parsed === 'object') {
          firebaseConfig = parsed;
        }
      } catch (e) {
        console.error("Erro ao carregar config salva:", e);
      }
    }

    function saveFirebaseConfig() {
      let jsonText = document.getElementById('firebase-config-json').value.trim();
      
      try {
        // Sanitização avançada:
        // 1. Remove comentários e ponto e vírgula final
        jsonText = jsonText.replace(/\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm, '');
        jsonText = jsonText.trim().replace(/;$/, '');
        
        // 2. Extração inteligente do objeto JSON
        // Suporta: const config = { ... }, var config = { ... }, ou apenas { ... }
        if (jsonText.includes('{')) {
          const firstBrace = jsonText.indexOf('{');
          const lastBrace = jsonText.lastIndexOf('}');
          if (firstBrace !== -1 && lastBrace !== -1) {
            jsonText = jsonText.substring(firstBrace, lastBrace + 1);
          }
        }

        // 3. Correção de JSON malformado (chaves sem aspas)
        // Transforma { apiKey: "..." } em { "apiKey": "..." }
        jsonText = jsonText.replace(/([{,]\s*)([a-zA-Z0-9_]+)\s*:/g, '$1"$2":');
        // Transforma aspas simples em duplas
        jsonText = jsonText.replace(/'/g, '"');
        
        const config = JSON.parse(jsonText);
        
        // Validação de campos obrigatórios do Firebase
        const requiredFields = ['apiKey', 'authDomain', 'projectId', 'appId'];
        const missingFields = requiredFields.filter(field => !config[field]);
        
        if (missingFields.length > 0) {
          throw new Error(`Campos obrigatórios ausentes: ${missingFields.join(', ')}`);
        }
        
        // Limpar dados de cache antes de salvar novas credenciais
        localStorage.removeItem('custom_firebase_config');
        
        // Salvar nova configuração
        localStorage.setItem('custom_firebase_config', JSON.stringify(config));
        
        showToastNoPopup('Conexão configurada com sucesso! Reiniciando...', 'success');
        
        // Forçar recarregamento completo para aplicar as novas credenciais em todos os módulos
        setTimeout(() => {
          window.location.reload(true);
        }, 1500);
      } catch (e) {
        console.error("Erro ao processar JSON:", e);
        showToastNoPopup('Erro: ' + e.message + '. Verifique o formato do JSON.', 'error');
      }
    }



    function removeCurrentCredentials() {
      if (confirm('ATENÇÃO: Isso removerá o vínculo com o banco de dados atual. O app ficará offline até que novas credenciais sejam inseridas. Confirmar?')) {
        // 1. Desconectar o SDK do Firebase imediatamente
        if (typeof firebase !== 'undefined' && firebase.database) {
          firebase.database().goOffline();
        }

        // 2. Limpar armazenamento local
        localStorage.removeItem('custom_firebase_config');
        
        // 3. Limpar campo de texto na UI
        const textarea = document.getElementById('firebase-config-json');
        if (textarea) textarea.value = '';
        
        showToastNoPopup('Vínculo removido! Desconectando...', 'success');
        
        // 4. Forçar recarregamento para limpar estados globais da aplicação
        setTimeout(() => {
          window.location.href = window.location.pathname + '?refresh=' + Date.now();
        }, 1200);
      }
    }

    function loadFirebaseConfigToUI() {
      const textarea = document.getElementById('firebase-config-json');
      if (textarea) {
        textarea.value = JSON.stringify(firebaseConfig, null, 2);
      }
    }
    

    try {
        firebase.initializeApp(firebaseConfig);
    } catch (e) {
        console.error("Firebase Init Error:", e);
    }
    
    const db = firebase.database();

    window.dataSdk = {
      handler: null,
      initialized: false,
      init: async function(handler) {
        this.handler = handler;
        
setTimeout(() => {
	            if (!this.initialized) {
	                this.initialized = true;
	                if (typeof hideLoadingScreen === 'function') hideLoadingScreen();
	            }
	        }, 5000);

        try {
            const storeRef = db.ref('store_data');
            storeRef.on('value', (snapshot) => {
              this.initialized = true;
              const val = snapshot.val();
              
              let dataArray = [];
              if (val) {
                dataArray = Object.keys(val).map(key => ({
                  ...val[key],
                  __backendId: key
                }));
              }

              // Garante que o usuário admin/123 esteja sempre disponível localmente
              const adminExists = dataArray.some(u => u.username === 'admin' && u.data_type === 'user');
              if (!adminExists) {
                  const localAdmin = {
                      username: 'admin',
                      password: '123',
                      role: 'admin',
                      active: true,
                      data_type: 'user'
                  };
                  dataArray.push(localAdmin);
                  // Tenta criar no Firebase silenciosamente se o banco estiver vazio
                  if (!val) this.setupInitialData();
              }
              
              this.handler.onDataChanged(dataArray);
              if (typeof hideLoadingScreen === 'function') hideLoadingScreen();
            });
} catch (e) {
	            this.initialized = true;
	            if (typeof hideLoadingScreen === 'function') hideLoadingScreen();
	        }
        
        return { isOk: true };
      },
      
      setupInitialData: async function() {
        const initialData = [
          { username: 'admin', password: '123', role: 'admin', active: true, data_type: 'user' },
          {
            store_name: "ZaapStore",
            whatsapp_number: "5511999999999",
            whatsapp_group: "https://chat.whatsapp.com/FwVwUbmj9NC98wpQANgp4q",
            logo_url: "https://via.placeholder.com/150x50?text=Anna+Logo",
            banner_image: "",
            data_type: 'store_config'
          }
        ];
        for (const item of initialData) {
          await this.create(item);
        }
      },
      
      create: async function(item) {
        try {
          const newRef = db.ref('store_data').push();
          await newRef.set(item);
          return { isOk: true };
        } catch (e) {
          return { isOk: false };
        }
      },
      
      update: async function(item) {
        try {
          const id = item.__backendId;
          if (!id) return this.create(item);
          const updateData = { ...item };
          delete updateData.__backendId;
          await db.ref('store_data/' + id).update(updateData);
          return { isOk: true };
        } catch (e) {
          return { isOk: false };
        }
      },
      
      delete: async function(item) {
        try {
          const id = item.__backendId;
          if (!id) return { isOk: false };
          await db.ref('store_data/' + id).remove();
          return { isOk: true };
        } catch (e) {
          return { isOk: false };
        }
      },
      list: async function() {
        try {
          const snapshot = await db.ref('store_data').once('value');
          const val = snapshot.val();
          if (!val) return [];
          return Object.keys(val).map(key => ({
            ...val[key],
            __backendId: key
          }));
        } catch (e) {
          console.error("SDK list error:", e);
          return [];
        }
      }
    };
  
    
    // Bulk Actions Logic
    function toggleSelectAll(type) {
        const selectAll = document.getElementById(`select-all-${type}`);
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox`);
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkBar(type);
    }

    function updateBulkBar(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        const bar = document.getElementById(`bulk-actions-${type}`);
        const countEl = document.getElementById(`selected-count-${type}`);
        
        if (checkboxes.length > 0) {
            bar.classList.add('active');
            countEl.textContent = `(${checkboxes.length} selecionados)`;
        } else {
            bar.classList.remove('active');
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
        }
    }

    async function bulkDelete(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        if (checkboxes.length === 0) return;

        if (!confirm(`Tem certeza que deseja excluir ${checkboxes.length} itens selecionados?`)) return;

        showToastNoPopup('Excluindo itens...', 'info');
        const ids = Array.from(checkboxes).map(cb => cb.dataset.id);
        
        try {
            let listToSearch = [];
            if (type === 'products') listToSearch = currentDBProducts;
            else if (type === 'categories') listToSearch = currentDBCategories;
            else if (type === 'users') listToSearch = users;
            else if (type === 'orders') listToSearch = orders;

            for (const id of ids) {
                const item = listToSearch.find(i => i.__backendId === id);
                if (item) {
                    await window.dataSdk.delete(item);
                }
            }

            showToastNoPopup(`${checkboxes.length} itens excluídos com sucesso!`, 'success');
            
            // Refresh lists
            if (type === 'products') { renderProducts(); renderAdminProducts(); }
            else if (type === 'categories') { renderCategories(); renderAdminCategories(); renderAdminOrders();
      loadFirebaseConfigToUI(); updateCategorySelect(); }
            else if (type === 'users') { renderAdminUsers(); }
            else if (type === 'orders') { renderAdminOrders();
      loadFirebaseConfigToUI(); }
            
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
            updateBulkBar(type);
        } catch (error) {
            console.error('Erro na exclusão em massa:', error);
            showToastNoPopup('Erro ao excluir alguns itens', 'error');
        }
    }

    function openUserLoginModal() {
      document.getElementById('userLoginModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeUserLoginModal() {
      document.getElementById('userLoginModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      toggleUserAuthView('login');
    }

    function toggleUserAuthView(view) {
      const loginView = document.getElementById('user-login-view');
      const registerView = document.getElementById('user-register-view');
      if (view === 'register') {
        loginView.classList.add('hidden');
        registerView.classList.remove('hidden');
      } else {
        loginView.classList.remove('hidden');
        registerView.classList.add('hidden');
      }
    }

    function toggleUserPasswordVisibility(inputId) {
      const input = document.getElementById(inputId);
      input.type = input.type === 'password' ? 'text' : 'password';
    }

    async function handleUserLogin(event) {
      event.preventDefault();
      const phone = document.getElementById('user-login-phone').value;
      const password = document.getElementById('user-login-password').value;
      const errorEl = document.getElementById('userLoginError');
      
      try {
        const users = await storeManager.list();
        const user = users.find(u => u.phone === phone && u.password === password && u.data_type === 'customer');
        
        if (user) {
          closeUserLoginModal();
          // Aqui você pode adicionar lógica de sessão do usuário
        } else {
          errorEl.textContent = 'Telefone ou senha incorretos.';
        }
      } catch (e) {
        errorEl.textContent = 'Erro ao realizar login.';
      }
    }

    async function handleUserRegister(event) {
      event.preventDefault();
      const name = document.getElementById('user-reg-name').value;
      const phone = document.getElementById('user-reg-phone').value;
      const password = document.getElementById('user-reg-password').value;
      const errorEl = document.getElementById('userRegisterError');
      
      try {
        const users = await storeManager.list();
        // Verifica se já existe como customer ou user comum
        if (users.some(u => (u.phone === phone || u.username === phone) && (u.data_type === 'customer' || u.data_type === 'user'))) {
          errorEl.textContent = 'Este telefone já está cadastrado.';
          return;
        }
        
        const result = await storeManager.create({
          username: phone, // Usando telefone como username para aparecer no painel adm
          name: name,
          phone: phone,
          password: password,
          data_type: 'user', // Mudado para 'user' para aparecer na aba de usuários do adm
          role: 'usuario', // Definido como visualizador conforme solicitado
          active: true,
          created_at: new Date().toISOString()
        });
        
        if (result.isOk) {
          sessionStorage.setItem('just_registered', 'true');
          closeUserLoginModal();
          showToastNoPopup('Cadastro realizado com sucesso!', 'success');
          
          // Recarrega ou dispara a verificação de boas vindas
          setTimeout(() => {
            checkWelcomeMessage();
          }, 500);
        } else {
          errorEl.textContent = 'Erro ao realizar cadastro.';
        }
      } catch (e) {
        console.error(e);
        errorEl.textContent = 'Erro ao realizar cadastro.';
      }
    }

  
    function closeWelcomeModal() {
      document.getElementById('welcomeSuccessModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    function goToWhatsAppGroup() {
      const whatsappLink = document.querySelector('.whatsapp-btn-footer')?.parentElement?.getAttribute('onclick')?.match(/'([^']+)'/)?.[1] || "https://chat.whatsapp.com/";
      window.open(whatsappLink, '_blank');
      closeWelcomeModal();
    }

    // Função para verificar se deve mostrar o modal de boas-vindas
    function checkWelcomeMessage() {
      if (localStorage.getItem('welcome_message_shown') === 'true') return;
      
      // Se acabou de se cadastrar (marcado no handleUserRegister)
      if (sessionStorage.getItem('just_registered') === 'true') {
        setTimeout(() => {
          document.getElementById('welcomeSuccessModal').classList.add('active');
          document.body.classList.add('modal-open');
          localStorage.setItem('welcome_message_shown', 'true');
          sessionStorage.removeItem('just_registered');
        }, 1000);
      }
    }

    // Adicionar ao final do DOMContentLoaded ou início do script
    setTimeout(checkWelcomeMessage, 2000);

  </script>

  <style>
    /* Correção forçada para ícones do cabeçalho */
    .header-icon-btn, .header-icon-btn svg {
      color: var(--primary-color) !important;
      stroke: var(--primary-color) !important;
      background: transparent !important;
      border: 2px solid white !important;
    }
    .header-icon-btn svg {
      width: 28px !important; /* Um pouco maior para garantir os 20% */
      height: 28px !important;
    }
    /* Correção para o botão do modal */
    .custom-store-btn {
      border: 3px solid var(--primary-color) !important;
      color: var(--primary-color) !important;
      font-weight: 800 !important;
      padding: 14px !important;
      border-radius: 12px !important;
      text-align: center;
      display: block;
      width: 100%;
      text-decoration: none;
      margin-top: 10px;
      transition: all 0.3s ease;
    }
    .custom-store-btn:hover {
      background: rgba(242, 86, 193, 0.1) !important;
    }
  #users-list { width: 100% !important; overflow-x: visible !important; }
    .sticky-header h2 {
      display: flex !important;
      align-items: center !important;
      font-size: 1.25rem !important; /* Aumentado levemente já que não tem ícone */
      line-height: 1.2 !important;
      margin: 0 !important;
      flex: 1 !important;
      overflow: visible !important;
    }
.sticky-header .flex-shrink-0 {
      width: 40px !important;
      height: 40px !important;
      min-width: 44px !important; /* Área de toque adequada para mobile */
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      background: #fff1f9 !important;
      border-radius: 12px !important;
      position: static !important; /* Garantir que não seja absolute */
    }

    :root {
      --admin-bg: #ffffff;
      --admin-border: #f0f0f0;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    .admin-dashboard {
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      height: 100dvh !important;
      background: white !important;
      z-index: 1000 !important;
      display: none;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .admin-dashboard.active {
      display: flex !important;
    }

    .admin-content {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: 100% !important;
      max-height: 100dvh !important;
      background: white !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 2px solid white !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    .sticky-header {
      display: flex !important;
      align-items: center !important;
      padding: 12px 16px !important;
      padding-top: max(12px, var(--safe-top)) !important;
      box-sizing: border-box !important;
      background: white !important;
      border-bottom: 1px solid var(--admin-border) !important;
      z-index: 100 !important;
      position: relative !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      width: 100% !important;
    }

    #dashboard-content {
      flex: 1 1 auto !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 1.25rem !important;
      -webkit-overflow-scrolling: touch !important;
      background: white !important;
      box-sizing: border-box !important;
    }

    .admin-footer-buttons {
      flex-shrink: 0 !important;
      display: flex !important;
      gap: 0.75rem !important;
      padding: 1rem !important;
      padding-bottom: max(1.25rem, var(--safe-bottom)) !important;
      background: white !important;
      border-top: 1px solid var(--admin-border) !important;
      z-index: 100 !important;
      position: relative !important;
      box-sizing: border-box !important;
    }

    /* Ajuste para o ícone de engrenagem não cortar */
    .sticky-header .flex-shrink-0 {
      width: 40px !important;
      height: 40px !important;
      min-width: 44px !important; /* Área de toque adequada para mobile */
      min-height: 44px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin-right: 12px !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
      background: #fff1f9 !important;
      border-radius: 12px !important;
      position: static !important; /* Garantir que não seja absolute */
    }
    
    .sticky-header h2 {
      display: flex !important;
      align-items: center !important;
      font-size: 1.25rem !important; /* Aumentado levemente já que não tem ícone */
      line-height: 1.2 !important;
      margin: 0 !important;
      flex: 1 !important;
      overflow: visible !important;
    }
    
.modal-order-detail.active { display: flex !important; }
.modal-delete-confirm.active { display: flex !important; }

    #dashboard-tabs::-webkit-scrollbar {
      height: 4px !important;
    }
    #dashboard-tabs::-webkit-scrollbar-track {
      background: #f5f5f5 !important;
      border-radius: 10px !important;
    }
    #dashboard-tabs::-webkit-scrollbar-thumb {
      background: var(--primary-color) !important; background-image: none !important;
      border-radius: 10px !important;
    }
    

    .category-tag {
      display: inline-flex;
      align-items: center;
      background: #fdf2f8;
      color: var(--primary-color);
      padding: 4px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #fbcfe8;
      margin-right: 6px;
      margin-bottom: 6px;
    }
    .category-tag button {
      margin-left: 6px;
      color: #9d174d;
      font-weight: bold;
      cursor: pointer;
    }
    .category-tag button:hover {
      color: #ef4444;
    }

    
    .admin-footer-buttons button {
      flex: 1 !important;
      min-width: 0 !important;
      padding: 0.75rem 0.5rem !important;
      font-size: 0.875rem !important;
    }
    @media (min-width: 640px) {
      .admin-footer-buttons button {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
      }
    }
    
</style>
<style>
    /* Blender Color Picker Styles */
    .blender-picker-container {
        background: #282828;
        color: #eee;
        padding: 15px;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        width: 100%;
        max-width: 300px;
        margin-top: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    .blender-wheel-area {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 0 auto 15px;
        user-select: none;
    }
    #blenderWheel {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        cursor: crosshair;
        background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
    }
    #blenderWheel::after {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 50%;
        background: radial-gradient(circle, white, transparent);
    }
    .blender-marker {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 0 2px black;
        pointer-events: none;
        transform: translate(-50%, -50%);
        z-index: 10;
    }
    .blender-slider-container {
        margin-bottom: 15px;
    }
    .blender-slider-label {
        font-size: 11px;
        text-transform: uppercase;
        margin-bottom: 5px;
        display: block;
        color: #aaa;
    }
    .blender-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        background: #444;
        border-radius: 3px;
        outline: none;
    }
    .blender-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        cursor: pointer;
    }
    .blender-values {
        display: grid;
        grid-template-cols: 1fr 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }
    .blender-field {
        background: #3d3d3d;
        border: 1px solid #555;
        color: #fff;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        width: 100%;
    }
    .blender-hex-container {
        display: flex;
        align-items: center;
        gap: 8px;
        background: #3d3d3d;
        padding: 5px 10px;
        border-radius: 4px;
        border: 1px solid #555;
    }
    .blender-hex-input {
        background: transparent;
        border: none;
        color: #fff;
        font-family: monospace;
        font-size: 13px;
        width: 100%;
        outline: none;
    }
    .blender-preview {
        width: 24px;
        height: 24px;
        border-radius: 3px;
        border: 1px solid #666;
    }
    </style>
</head>
 <body class="h-full overflow-auto"><!-- Loading Screen -->
  <div id="loading-screen">
   <div class="loading-container">
    <div class="loading-icon-wrapper">
     <div class="loading-circle-bg"></div>
     <div class="loading-circle-spinner"></div>
     <div class="loading-icon"><svg viewBox="0 0 24 24" fill="none" stroke="#25D366" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><circle cx="9" cy="10" r="1"></circle><circle cx="12" cy="10" r="1"></circle><circle cx="15" cy="10" r="1"></circle></svg></div>
    </div>
    <div class="loading-text">
     <h1>ZaapStore</h1>
     <p>Carregando sua loja...</p>
    </div>
   </div>
  </div>
  <div id="app" class="w-full min-h-full"><!-- Header -->
   <header class="header">
    <div class="glass-dark h-full">
     <div class="max-w-7xl mx-auto px-2 md:px-4 h-full flex items-center justify-between"><div class="flex items-center gap-1 md:gap-2">
       <button id="menu-btn" onclick="toggleMenu()" class="header-icon-btn" title="Menu">
        <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
       </button>
      </div>
      <div class="flex items-center justify-center gap-2 md:gap-3 flex-1 h-full px-2 overflow-hidden">
       <img id="header-logo" alt="Logo" loading="lazy" class="logo-img max-h-[40px] md:max-h-[50px]">
       <div id="store-text-container" class="text-center truncate">
        <h1 id="store-title" class="text-lg md:text-2xl font-bold text-gray-900 truncate">ZaapStore</h1>
       </div>
      </div><div class="flex items-center gap-1 md:gap-2">
       <button id="cart-btn" onclick="toggleCart()" class="header-icon-btn" title="Carrinho">
        <div class="relative">
         <svg fill="none" stroke="currentColor" viewbox="0 0 24 24" class="w-7 h-7"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
         </svg><span id="cart-count" class="cart-badge absolute -top-1.5 -right-1.5 w-5 h-5 bg-[var(--primary-color)] text-[10px] font-bold rounded-full flex items-center justify-center text-white hidden border-2 border-white shadow-sm">0</span>
        </div>
       </button>
      </div>
     </div>
    </div>
    </header>

    <!-- Menu Sidebar -->
   <div id="menu-overlay" class="menu-overlay hidden" onclick="toggleMenu()"></div>
   <aside id="menu-sidebar" class="menu-sidebar">
    <div class="p-6 border-b border-gray-200 flex items-center justify-between sticky top-0 bg-white z-20">
     <h2 class="text-2xl font-bold text-gray-900">Menu</h2><button onclick="toggleMenu()" class="p-2 rounded-xl hover:bg-gray-100 transition-all">
      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg></button>
    </div>
    <div id="menu-content" class="flex-1 overflow-y-auto p-6 space-y-2"><!-- Todos os Produtos as First Category --> <button id="all-products-btn" onclick="showAllProducts()" class="category-btn active" style="animation-delay: 0s"> Todos os Produtos 
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg></button> <!-- Other Categories Section -->
     <div id="categories-list" class="space-y-2"><!-- Categories will be rendered here -->
     </div>
    </div>
   </aside>
   <!-- Busca Mobile (Aparece apenas no mobile) -->
   <div id="mobile-search-container" class="md:hidden max-w-7xl mx-auto px-4 pt-6">
     <div class="relative flex items-center">
       <input type="search" id="mobile-store-search-input" name="search-mobile" autocomplete="one-time-code" spellcheck="false" data-lpignore="true" oninput="handleMobileStoreSearch()" placeholder="Buscar na loja..." class="w-full p-3 pl-10 bg-white border-2 border-gray-100 rounded-2xl focus:border-[var(--primary-color)] focus:outline-none shadow-sm transition-all">
       <div class="absolute left-3.5 text-gray-400">
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
       </div>
     </div>
   </div>
   <!-- Welcome Banner -->
   <section id="banner-wrapper" class="banner-wrapper max-w-7xl mx-auto px-4 pt-8 pb-12">
    <div id="banner" class="banner glass relative overflow-hidden rounded-3xl loading">
    </div>
   </section><!-- Products Grid -->
   <section class="max-w-7xl mx-auto px-4 pb-8">
     <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 md:mb-10 gap-4">
      <div class="flex items-center flex-1">
        <h3 id="products-title" class="text-gray-900 text-xl md:text-3xl font-bold whitespace-nowrap">Nossos Produtos</h3>
        <div class="h-1 flex-1 bg-gray-100 ml-6 rounded-full hidden md:block"></div>
      </div>
      <!-- Campo de busca apenas para desktop -->
      <div class="hidden md:flex relative items-center min-w-[300px] ml-6">
        <input type="search" id="store-search-input" name="search-desktop" autocomplete="one-time-code" spellcheck="false" data-lpignore="true" oninput="handleStoreSearch()" placeholder="Buscar produtos na loja..." class="w-full p-2 pl-10 border-2 border-gray-100 rounded-xl focus:border-[var(--primary-color)] focus:outline-none text-sm transition-all">
        <div class="absolute left-3 text-gray-400">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        </div>
      </div>
     </div>
    <div id="products-grid" class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-6 lg:gap-8">
     <!-- Products will be rendered here -->
    </div>
   </section><!-- Cart Sidebar -->
   <div id="cart-overlay" class="menu-overlay hidden" onclick="toggleCart()"></div>
   <aside id="cart-sidebar" class="cart-sidebar">
    <div class="p-8 border-b border-gray-200 flex items-center justify-between">
     <h2 class="text-2xl font-bold text-gray-900 flex items-center gap-3">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
      </svg> Carrinho</h2><button onclick="toggleCart()" class="p-2 rounded-xl hover:bg-gray-100 transition-all">
      <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg></button>
    </div>
    <div id="cart-items" class="flex-1 overflow-y-auto p-6 space-y-4"><!-- Cart items will be rendered here -->
    </div>
    <div id="cart-empty" class="flex-1 flex flex-col items-center justify-center p-6 text-center hidden">
     <svg class="empty-cart-icon" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
     </svg>
     <p class="text-gray-900 text-lg font-semibold">Carrinho Vazio</p>
     <p class="text-gray-500 text-sm mt-2">Adicione produtos para começar</p>
    </div>
    <div id="cart-footer" class="p-6 border-t border-gray-200 space-y-4">
     <div class="flex items-center justify-between"><span class="text-gray-600 text-lg">Total:</span> <span id="cart-total" class="text-3xl font-bold gradient-text">R$ 0,00</span>
     </div><button id="checkout-btn" onclick="showAddressForm()" class="w-full py-4 rounded-2xl bg-[var(--primary-color)] text-white font-bold text-lg flex items-center justify-center gap-3 hover:opacity-90 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95">
      <svg class="w-6 h-6" fill="currentColor" viewbox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
      </svg> Continuar Compra </button>
    </div>
   </aside><!-- Address Overlay - FULL SCREEN -->
   <div id="address-overlay" onclick="if(event.target === this) hideAddressForm()">
    <div id="address-form-wrapper">
     <div id="address-form-header">
      <h3>Endereço de Entrega</h3><button onclick="hideAddressForm()">
       <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
       </svg></button>
     </div>
     <div id="address-form-container">
      <form class="address-form-content" onsubmit="handleAddressSubmit(event)">
       <div class="form-group"><label for="address-name">Nome Completo</label> <input type="text" id="address-name" placeholder="Digite seu nome">
       </div>
       <div class="form-group"><label for="address-phone">Telefone</label> <input type="tel" id="address-phone" placeholder="(11) 9999-9999">
       </div>
       <div class="form-group"><label for="address-cep">CEP</label>
        <div style="display: flex; gap: 0.5rem;"><input type="text" id="address-cep" placeholder="00000-000" maxlength="9" style="flex: 1;"> <button type="button" onclick="searchCEP()" class="btn-login" style="padding: 0.75rem 1.5rem; width: auto; border: none; border-radius: 0.75rem; font-weight: 600;">Buscar</button>
        </div>
        <div class="error-message" id="cepError"></div>
       </div>
       <div class="address-form-row">
        <div class="form-group"><label for="address-street">Rua</label> <input type="text" id="address-street" placeholder="Digite a rua">
        </div>
        <div class="form-group"><label for="address-number">Número</label> <input type="text" id="address-number" placeholder="Nº">
        </div>
       </div>
       <div class="form-group address-form-full"><label for="address-complement">Complemento</label> <input type="text" id="address-complement" placeholder="Apto, sala, etc...">
       </div>
       <div class="address-form-row">
        <div class="form-group"><label for="address-neighborhood">Bairro</label> <input type="text" id="address-neighborhood" placeholder="Bairro">
        </div>
        <div class="form-group"><label for="address-city">Cidade</label> <input type="text" id="address-city" placeholder="Cidade">
        </div>
       </div>
       <div class="address-form-row">
        <div class="form-group"><label for="address-state">Estado</label> <input type="text" id="address-state" placeholder="UF" maxlength="2" style="text-transform: uppercase;">
        </div>
       </div>
       <div class="error-message" id="addressError"></div>
       <div class="settings-buttons" style="margin-top: 1.5rem;"><button type="submit" class="btn-login" style="width: 100%;">Enviar no WhatsApp</button>
       </div>
      </form>
     </div>
    </div>
   </div><!-- Delete Product Confirmation Modal -->
   <div id="deleteProductModal" class="settings-modal" onclick="if(event.target === this) closeDeleteProductConfirm()">
    <div class="settings-content">
     <div style="text-align: center;">
      <svg class="w-16 h-16 mx-auto mb-4 text-red-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
      </svg>
      <h2 class="text-2xl font-bold text-gray-900 mb-2">Deletar Produto?</h2>
      <p class="text-gray-600 mb-6">Esta ação não pode ser desfeita. Tem certeza?</p>
      <div class="settings-buttons"><button onclick="confirmDeleteProduct()" class="btn-login">Deletar</button> <button onclick="closeDeleteProductConfirm()" class="btn-cancel">Cancelar</button>
      </div>
     </div>
    </div>
   </div><!-- Delete Category Confirmation Modal -->
   <div id="deleteCategoryModal" class="settings-modal" onclick="if(event.target === this) closeDeleteCategoryConfirm()">
    <div class="settings-content">
     <div style="text-align: center;">
      <svg class="w-16 h-16 mx-auto mb-4 text-red-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
      </svg>
      <h2 class="text-2xl font-bold text-gray-900 mb-2">Deletar Categoria?</h2>
      <p class="text-gray-600 mb-6">Esta ação não pode ser desfeita. Tem certeza?</p>
      <div class="settings-buttons"><button onclick="confirmDeleteCategory()" class="btn-login">Deletar</button> <button onclick="closeDeleteCategoryConfirm()" class="btn-cancel">Cancelar</button>
      </div>
     </div>
    </div>
   </div><!-- Duplicate Product Modal -->
   <div id="duplicateModal" class="settings-modal" onclick="if(event.target === this) closeDuplicateModal()">
    <div class="settings-content">
     <h2 class="text-2xl font-bold text-gray-900 mb-4">Duplicar Produto</h2>
     <div class="form-group"><label for="duplicate-product-name">Nome do Produto</label> <input type="text" id="duplicate-product-name" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none">
     </div>
     <div class="settings-buttons"><button onclick="confirmDuplicate()" class="btn-login">Duplicar</button> <button onclick="closeDuplicateModal()" class="btn-cancel">Cancelar</button>
     </div>
    </div>
   </div><!-- Admin Dashboard Modal - FULL SCREEN -->
   <div id="adminDashboard" class="admin-dashboard hidden" onclick="if(event.target === this) closeAdminDashboard()">
    <div class="admin-content"><!-- Dashboard Header -->
     <div class="sticky-header p-4 md:p-6 flex items-center justify-between border-b border-gray-100">
      <h2 class="text-xl md:text-3xl font-bold text-gray-900 flex items-center gap-3">
        Painel Administrativo</h2><button onclick="closeAdminDashboard()" class="p-2 rounded-xl hover:bg-gray-100 transition-all">
       <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
       </svg></button>
     </div><!-- Dashboard Content -->
     <div id="dashboard-content" class="p-6 space-y-6"><!-- Tabs Navigation -->
      <div id="dashboard-tabs" class="flex gap-2 border-b border-gray-200 pb-4 overflow-x-auto" style="overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none; -ms-overflow-style: none;"><button onclick="switchAdminTab('store')" class="admin-tab-btn active whitespace-nowrap"> Loja </button> <button onclick="switchAdminTab('color')" class="admin-tab-btn whitespace-nowrap"> Cor </button> <button onclick="switchAdminTab('categories')" class="admin-tab-btn whitespace-nowrap"> Categorias </button> <button onclick="switchAdminTab('products')" class="admin-tab-btn whitespace-nowrap"> Produtos </button> <button id="orders-tab-btn" onclick="switchAdminTab('orders')" class="admin-tab-btn whitespace-nowrap relative flex items-center gap-2" style="overflow: visible !important;">
          <div class="relative">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
            <span id="orders-notification-badge" class="absolute" style="display: none;"></span>
          </div>
          Pedidos
        </button> <button id="users-tab-btn" onclick="switchAdminTab('users')" class="admin-tab-btn whitespace-nowrap"> Usuários </button>
        <button id="firebase-tab-btn" onclick="switchAdminTab('firebase')" class="admin-tab-btn whitespace-nowrap"> Firebase </button>
      </div><!-- Tab: Store Settings -->
      <!-- Tab: Color -->
      <div id="admin-tab-color" class="admin-tab-content hidden space-y-4">
        <div class="admin-tab-header">
          <h3 class="text-xl font-bold text-gray-900">Configurações de Cor</h3>
        </div>
        <div class="bg-white p-6 rounded-xl border-2 border-gray-100 space-y-6">
          <div>
            <h4 class="text-sm font-bold text-gray-700 mb-4 uppercase tracking-wider">Escolha uma cor para sua loja</h4>
            <div class="grid grid-cols-3 md:grid-cols-6 gap-4">
              <!-- Verde (Padrão) -->
              <button onclick="updateAppTheme('#25D366', '#25d36612')" class="flex flex-col items-center gap-2 group">
                <div class="w-12 h-12 rounded-full bg-[#25D366] border-4 border-white shadow-lg group-hover:scale-110 transition-transform"></div>
                <span class="text-xs font-bold text-gray-600">Verde</span>
              </button>
              <!-- Azul -->
              <button onclick="updateAppTheme('#3b82f6', '#3b82f612')" class="flex flex-col items-center gap-2 group">
                <div class="w-12 h-12 rounded-full bg-[#3b82f6] border-4 border-white shadow-lg group-hover:scale-110 transition-transform"></div>
                <span class="text-xs font-bold text-gray-600">Azul</span>
              </button>
              <!-- Laranja -->
              <button onclick="updateAppTheme('#f97316', '#f9731612')" class="flex flex-col items-center gap-2 group">
                <div class="w-12 h-12 rounded-full bg-[#f97316] border-4 border-white shadow-lg group-hover:scale-110 transition-transform"></div>
                <span class="text-xs font-bold text-gray-600">Laranja</span>
              </button>
              <!-- Roxo -->
              <button onclick="updateAppTheme('#8b5cf6', '#8b5cf612')" class="flex flex-col items-center gap-2 group">
                <div class="w-12 h-12 rounded-full bg-[#8b5cf6] border-4 border-white shadow-lg group-hover:scale-110 transition-transform"></div>
                <span class="text-xs font-bold text-gray-600">Roxo</span>
              </button>
              <!-- Rosa -->
              <button onclick="updateAppTheme('#ec4899', '#ec489912')" class="flex flex-col items-center gap-2 group">
                <div class="w-12 h-12 rounded-full bg-[#ec4899] border-4 border-white shadow-lg group-hover:scale-110 transition-transform"></div>
                <span class="text-xs font-bold text-gray-600">Rosa</span>
              </button>
              <!-- Preto -->
              <button onclick="updateAppTheme('#1f2937', '#1f293712')" class="flex flex-col items-center gap-2 group">
                <div class="w-12 h-12 rounded-full bg-[#1f2937] border-4 border-white shadow-lg group-hover:scale-110 transition-transform"></div>
                <span class="text-xs font-bold text-gray-600">Preto</span>
              </button>
            </div>
            <div class="mt-8 pt-6 border-t border-gray-100">
              <h4 class="text-sm font-bold text-gray-700 mb-4 uppercase tracking-wider">Seletor de cores — Blender Manual</h4>
              <div class="blender-picker-container mx-auto md:mx-0">
                <div class="blender-wheel-area" id="wheelContainer">
                  <div id="blenderWheel"></div>
                  <div id="blenderMarker" class="blender-marker" style="top: 50%; left: 50%;"></div>
                </div>
                
                <div class="blender-slider-container">
                  <span class="blender-slider-label">Valor (Brilho)</span>
                  <input type="range" id="blenderValue" class="blender-slider" min="0" max="100" value="100">
                </div>

                <div class="blender-values">
                  <div>
                    <span class="blender-slider-label">RGB</span>
                    <input type="text" id="blenderRGB" class="blender-field" readonly value="255, 255, 255">
                  </div>
                  <div>
                    <span class="blender-slider-label">HSV</span>
                    <input type="text" id="blenderHSV" class="blender-field" readonly value="0°, 0%, 100%">
                  </div>
                </div>

                <div class="blender-slider-label">Hexadecimal</div>
                <div class="blender-hex-container">
                  <div id="blenderPreview" class="blender-preview" style="background: #ffffff;"></div>
                  <input type="text" id="blenderHex" class="blender-hex-input" value="#FFFFFF">
                </div>
                
                <button type="button" onclick="applyBlenderColor()" class="w-full mt-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded transition-colors">
                  APLICAR COR PERSONALIZADA
                </button>
              </div>
            </div>
    
          </div>
          <div class="p-4 bg-blue-50 rounded-lg border border-blue-100">
            <p class="text-xs text-blue-700">
              <strong>Dica:</strong> Ao selecionar uma cor, todos os botões, abas e elementos visuais da loja serão atualizados automaticamente para manter a identidade visual.
            </p>
          </div>
        </div>
      </div>
      <div id="admin-tab-store" class="admin-tab-content space-y-4">
       <h3 class="text-xl font-bold text-gray-900 mb-4">Configurações da Loja</h3>
       <div class="mb-6 p-4 bg-gray-50 rounded-xl border border-gray-200">
         <label class="block text-sm font-bold text-gray-700 mb-1">Link da sua Loja</label>
         <div class="flex items-center gap-2 text-[var(--primary-color)] font-medium break-all">
           <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
           <span id="admin-store-link-display">app.zaapstore.shop/</span>
         </div>
         <p class="text-[10px] text-gray-500 mt-1">* O link é gerado automaticamente com base no nome da loja.</p>
       </div>
       <div class="grid grid-cols-1 gap-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="form-group"><label for="admin-store-name">Nome da Loja</label> <input type="text" id="admin-store-name" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="Digite o nome da loja">
          </div>
          <div class="form-group"><label for="admin-whatsapp">WhatsApp (com DDI)</label> <input type="text" id="admin-whatsapp" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="Ex: 5511999999999">
          </div>
        </div>
        <div class="form-group"><label for="admin-logo">URL do Logo</label> <input type="text" id="admin-logo" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="https://exemplo.com/logo.png">
        </div>
        <div class="form-group">
          <label for="admin-banner">URL da Imagem do Banner</label> 
          <input type="text" id="admin-banner" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="https://exemplo.com/banner.jpg">
          <div class="mt-2">
            <a href="https://imgbb.com/" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--primary-transparent)] text-[var(--primary-color)] rounded-xl text-sm font-medium border border-[var(--primary-transparent)] hover:opacity-80 transition-all">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
              </svg>
              Dica: Transformar imagem em link (URL)
            </a>
          </div>
        </div>
        <div class="form-group"><label for="admin-whatsapp-group">Link do Grupo WhatsApp</label> <input type="text" id="admin-whatsapp-group" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="https://chat.whatsapp.com/...">
        </div>
       </div>
       <div class="success-message" id="storeSuccess"></div>
       <div class="error-message" id="storeError"></div>
      </div><!-- Tab: Categories -->
      <div id="admin-tab-categories" class="admin-tab-content hidden space-y-4">
       <div class="admin-tab-header">
         <h3 class="text-xl font-bold text-gray-900">Gerenciar Categorias</h3>
         <button onclick="openAddCategoryModal()" class="w-full py-3 bg-[var(--primary-color)] text-white font-bold rounded-lg hover:bg-[var(--primary-color)] transition-all active:scale-95"> Adicionar Categoria </button>
       </div>
       
       <div class="relative mt-4">
         <input type="search" id="category-search-admin" autocomplete="off" spellcheck="false" oninput="renderAdminCategories()" placeholder="Buscar categorias..." class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none text-sm">
         <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
         </div>
       </div>
       <div id="bulk-actions-categories" class="bulk-action-bar"><div class="select-all-container"><input type="checkbox" id="select-all-categories" onchange="toggleSelectAll('categories')" class="bulk-checkbox"><span>Selecionar Tudo</span><span id="selected-count-categories" class="ml-2 text-[var(--primary-color)]"></span></div><div class="flex gap-2"><button onclick="bulkDelete('categories')" class="admin-delete-btn px-4 py-2 text-xs">Excluir Selecionados</button></div></div><div id="categories-list-admin" class="mt-6 space-y-3"><!-- Categories will be listed here -->
       </div>
      </div><!-- Tab: Products -->
      <div id="admin-tab-products" class="admin-tab-content hidden space-y-4">
       <div class="admin-tab-header">
         <h3 class="text-xl font-bold text-gray-900">Gerenciar Produtos</h3>
         <div class="flex flex-col-reverse md:flex-row gap-3 w-full md:w-auto flex-wrap">
             <button onclick="downloadExcelTemplate()" class="w-full md:w-auto py-3 px-6 border-2 border-[var(--primary-color)] text-[var(--primary-color)] font-bold rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition-all active:scale-95 whitespace-nowrap text-sm"> Baixar Modelo Excel </button>
             <button onclick="backupProductsToExcel()" class="hidden md:inline-block py-3 px-6 border-2 border-[var(--primary-color)] text-[var(--primary-color)] font-bold rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition-all active:scale-95 whitespace-nowrap text-sm"> Fazer Backup </button>
             <button onclick="document.getElementById('excel-upload').click()" class="w-full md:w-auto py-3 px-6 border-2 border-[var(--primary-color)] text-[var(--primary-color)] font-bold rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition-all active:scale-95 whitespace-nowrap text-sm"> Importar Excel </button>
            <input type="file" id="excel-upload" accept=".xlsx, .xls" class="hidden" onchange="handleExcelImport(event)">
            <button onclick="downloadProductListPDF()" class="w-full md:w-auto py-3 px-6 border-2 border-[var(--primary-color)] text-[var(--primary-color)] font-bold rounded-lg hover:bg-[var(--primary-color)] hover:text-white transition-all active:scale-95 whitespace-nowrap text-sm"> Baixar lista em PDF </button>
            <button onclick="openAddProductModal()" class="w-full md:w-auto py-3 px-6 bg-[var(--primary-color)] text-white font-bold rounded-lg hover:bg-[var(--primary-color)] transition-all active:scale-95 whitespace-nowrap text-sm"> Adicionar Produto </button>
          </div>
         
       </div>
       
       <div class="relative mt-4">
         <input type="search" id="product-search-admin" name="search-admin" autocomplete="one-time-code" spellcheck="false" data-lpignore="true" oninput="renderAdminProducts()" placeholder="Buscar produtos..." class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none text-sm">
         <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
         </div>
       </div>
       <div id="bulk-actions-products" class="bulk-action-bar"><div class="select-all-container"><input type="checkbox" id="select-all-products" onchange="toggleSelectAll('products')" class="bulk-checkbox"><span>Selecionar Tudo</span><span id="selected-count-products" class="ml-2 text-[var(--primary-color)]"></span></div><div class="flex gap-2"><button onclick="bulkDelete('products')" class="admin-delete-btn px-4 py-2 text-xs">Excluir Selecionados</button></div></div><div id="products-list" class="mt-6 space-y-3"><!-- Products will be listed here -->
       </div>
      </div><!-- Tab: Users -->
      <div id="admin-tab-users" class="admin-tab-content hidden space-y-4">
       <div class="admin-tab-header">
         <h3 class="text-xl font-bold text-gray-900">Gerenciar Usuários</h3>
         <button onclick="openAddUserModal()" class="w-full py-3 bg-[var(--primary-color)] text-white font-bold rounded-lg hover:bg-[var(--primary-color)] transition-all active:scale-95"> Adicionar Usuário </button>
       </div>
       
       <div class="relative mt-4">
         <input type="search" id="user-search-admin" autocomplete="off" spellcheck="false" oninput="renderAdminUsers()" placeholder="Buscar usuários..." class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none text-sm">
         <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
         </div>
       </div>
       <div id="bulk-actions-users" class="bulk-action-bar"><div class="select-all-container"><input type="checkbox" id="select-all-users" onchange="toggleSelectAll('users')" class="bulk-checkbox"><span>Selecionar Tudo</span><span id="selected-count-users" class="ml-2 text-[var(--primary-color)]"></span></div><div class="flex gap-2"><button onclick="bulkDelete('users')" class="admin-delete-btn px-4 py-2 text-xs">Excluir Selecionados</button></div></div><div id="users-list" class="mt-6 space-y-3"><!-- Users will be listed here -->
       </div>
      </div>
      <!-- Tab: Firebase Config -->
      <div id="admin-tab-firebase" class="admin-tab-content hidden space-y-4">
        <div class="admin-tab-header">
          <h3 class="text-xl font-bold text-gray-900">Configurações do Firebase</h3>
        </div>
        <div class="bg-white p-6 rounded-xl border-2 border-gray-100 space-y-4">
          <div class="form-group">
            <label class="block text-sm font-bold text-gray-700 mb-1">Configuração JSON (firebaseConfig)</label>
            <textarea id="firebase-config-json" rows="10" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none font-mono text-xs" placeholder='{"apiKey": "...", "authDomain": "...", ...}'></textarea>
          </div>
          <div class="flex flex-col md:flex-row gap-3">
            <button onclick="saveFirebaseConfig()" class="flex-1 py-3 bg-[var(--primary-color)] text-white font-bold rounded-lg hover:bg-[var(--primary-color)] transition-all"> Salvar Configurações </button>

            <button onclick="removeCurrentCredentials()" class="flex-1 py-3 bg-[#ef4444] text-white font-bold rounded-lg hover:bg-[#dc2626] transition-all"> Remover Credenciais </button>
          </div>
          <div class="p-4 bg-blue-50 rounded-lg border border-blue-100">
            <p class="text-xs text-blue-700">
              <strong>Nota:</strong> Insira o objeto JSON completo da sua configuração do Firebase. Após salvar, a página será recarregada para aplicar as novas credenciais.
            </p>
          </div>
        </div>
      </div>
      <!-- Tab: Orders -->
      <div id="admin-tab-orders" class="admin-tab-content hidden space-y-4">
       <div class="admin-tab-header">
         <h3 class="text-xl font-bold text-gray-900">Gerenciar Pedidos</h3>
         <button onclick="clearOrdersHistory()" class="flex items-center gap-2 px-4 py-2 bg-[#ef4444] text-white rounded-xl hover:bg-[#dc2626] transition-all text-sm font-bold ml-auto">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
             Zerar Histórico
         </button>
       </div>
       
       <div class="relative mt-4">
         <input type="search" id="order-search" autocomplete="off" spellcheck="false" oninput="renderAdminOrders()" placeholder="Buscar por nome do cliente..." class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none text-sm">
         <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
           <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
         </div>
       </div>
       <div id="bulk-actions-orders" class="bulk-action-bar"><div class="select-all-container"><input type="checkbox" id="select-all-orders" onchange="toggleSelectAll('orders')" class="bulk-checkbox"><span>Selecionar Tudo</span><span id="selected-count-orders" class="ml-2 text-[var(--primary-color)]"></span></div><div class="flex gap-2"><button onclick="bulkDelete('orders')" class="admin-delete-btn px-4 py-2 text-xs">Excluir Selecionados</button></div></div><div id="orders-list" class="mt-6 space-y-3">
         <!-- Orders will be listed here -->
       </div>
      </div>
     </div><!-- Dashboard Footer -->
     <div class="admin-footer-buttons"><button id="config-save-btn" onclick="saveStoreSettings()" class="btn-footer-save"> <span class="btn-text">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg> Salvar Configuração </span>
       <div class="btn-loading-spinner"></div>
       <div class="btn-success-content">
         <svg class="btn-success-icon" fill="currentColor" viewbox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
         </svg>
         <span class="font-bold">Salvo com sucesso</span>
       </div></button> 
    <button onclick="logout()" class="btn-footer-logout"> Sair </button>
     </div>
    </div>
   </div><!-- Add/Edit Product Modal -->
   <div id="productModal" class="modal-edit-product" onclick="if(event.target === this) closeProductModal()">
    <div class="modal-edit-content">
     <h2 class="text-2xl font-bold text-gray-900 mb-4" id="productModalTitle">Adicionar Produto</h2>
      <div class="form-group"><label for="modal-product-position">Posição do Produto (Opcional)</label> <input type="number" id="modal-product-position" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="Ex: 1 para primeiro, 5 para quinto..." min="1"></div>
     <div class="space-y-4">
      <div class="form-group">
        <label class="font-bold text-gray-700 mb-2 block">Categorias</label>
        <div class="flex gap-2 mb-2">
          <select id="modal-product-category" class="flex-1 p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none">
            <option value="">Selecione uma categoria</option>
          </select>
          <button type="button" onclick="addCategoryToProduct()" class="p-3 bg-[var(--primary-color)] text-white rounded-lg hover:bg-[var(--primary-color)] transition-all flex items-center justify-center" title="Adicionar Categoria">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
          </button>
        </div>
        <div id="selected-categories-container" class="flex flex-wrap mt-2">
          <!-- Tags de categorias selecionadas aparecerão aqui -->
        </div>
      </div>
      <div class="form-group"><label for="modal-product-name">Nome do Produto</label> <input type="text" id="modal-product-name" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none">
      </div>
      <div class="form-group"><label for="modal-product-price">Preço (R$)</label> <input type="number" id="modal-product-price" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" step="0.01">
      </div>
      <div class="form-group">
        <div class="flex items-center justify-between mb-2">
          <label class="font-bold text-gray-700">Imagens do Produto (Até 5 URLs)</label>
          <button type="button" onclick="addImageField()" id="add-image-field-btn" class="p-2 bg-[var(--primary-transparent)] text-[var(--primary-color)] rounded-full hover:opacity-80 transition-all" title="Adicionar mais uma imagem">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
          </button>
        </div>
        <div id="image-fields-container" class="space-y-2">
          <div class="relative">
            <input type="text" id="modal-product-image-1" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="URL da Imagem Principal (Obrigatória)">
          </div>
        </div>
        <div class="mt-2">
          <a href="https://www.image2url.com/pt-BR" target="_blank" class="inline-flex items-center gap-2 text-xs font-semibold text-[var(--primary-color)] hover:text-[var(--primary-color)] bg-[var(--primary-transparent)] px-3 py-2 rounded-lg transition-all border border-[var(--primary-transparent)]">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            <span>Dica: Transformar imagem em link (URL)</span>
          </a>
        </div>
      </div>
      
      <div class="form-group"><label for="modal-product-stock-count">Quantidade em Estoque</label> <input type="number" id="modal-product-stock-count" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" min="0" value="0">
      </div>
      <div class="form-group">
        <div class="flex justify-between items-center mb-2">
          <label for="modal-product-description">Descrição</label>
          <button type="button" onclick="generateProductDescription()" class="text-xs font-bold text-[var(--primary-color)] hover:text-[var(--primary-color)] bg-[var(--primary-transparent)] px-3 py-1.5 rounded-lg transition-all border border-[var(--primary-transparent)] flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            Gerar Descrição
          </button>
        </div>
        <textarea id="modal-product-description" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none h-32 resize-none" placeholder="A descrição será gerada automaticamente ou você pode digitar aqui..."></textarea>
      </div>
      <div class="form-group flex items-center gap-3 bg-[var(--primary-transparent)] p-3 rounded-xl border border-[var(--primary-transparent)]">
        <input type="checkbox" id="modal-product-is-dupla" class="w-5 h-5 accent-[var(--primary-color)] cursor-pointer">
        <label for="modal-product-is-dupla" class="text-sm font-bold text-[var(--primary-color)] cursor-pointer select-none">Selecionar Oferta (Exibir Etiqueta na loja)</label>
      </div>
       <div class="modal-buttons">
         <button onclick="closeProductModal()" class="modal-btn-cancel">Cancelar</button>
         <button id="product-save-btn" onclick="saveProduct()" class="modal-btn-save"> <span class="btn-text">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg> Salvar Produto </span>
         <div class="btn-loading-spinner"></div>
         <div class="btn-success-content">
           <svg class="btn-success-icon" fill="currentColor" viewbox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
           </svg>
           <span class="font-bold">Salvo com sucesso</span>
         </div></button>
       </div>
     </div>
    </div>
   </div><!-- Add/Edit Category Modal -->
   <div id="categoryModal" class="modal-edit-category" onclick="if(event.target === this) closeCategoryModal()">
    <div class="modal-edit-content">
     <h2 class="text-2xl font-bold text-gray-900 mb-4" id="categoryModalTitle">Adicionar Categoria</h2>
     <div class="space-y-4">
      <div class="form-group"><label for="modal-category-name">Nome da Categoria</label> <input type="text" id="modal-category-name" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="Ex: Eletrônicos">
      </div>
       <div class="modal-buttons">
         <button onclick="closeCategoryModal()" class="modal-btn-cancel">Cancelar</button>
         <button id="category-save-btn" onclick="saveCategory()" class="modal-btn-save"> <span class="btn-text">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg> Salvar Categoria </span>
         <div class="btn-loading-spinner"></div>
         <div class="btn-success-content">
           <svg class="btn-success-icon" fill="currentColor" viewbox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
           </svg>
           <span class="font-bold">Salvo com sucesso</span>
         </div></button>
       </div>
     </div>
    </div>
   </div><!-- Add/Edit User Modal -->
    <!-- View Credentials Modal -->
    <div id="viewUserModal" class="modal-edit-user" onclick="if(event.target === this) closeViewUserModal()">
     <div class="modal-edit-content" style="max-width: 400px;">
      <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Dados do Usuário</h2>
      <div class="space-y-6">
       <div class="form-group">
        <label class="text-sm text-gray-500 uppercase tracking-wider font-bold">Acesso Rápido</label>
        <button onclick="copyAllCredentials(this)" class="w-full flex items-center justify-center gap-2 p-4 bg-[var(--primary-color)] text-white rounded-xl font-bold hover:bg-[var(--primary-color)] transition-all shadow-lg shadow-green-200 group relative overflow-hidden">
          <span class="group-active:scale-95 transition-transform flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
            Copiar Tudo para Enviar
          </span>
          <div class="copy-success-overlay absolute inset-0 bg-[var(--primary-color)] flex items-center justify-center translate-y-full transition-transform duration-300">
            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" /></svg>
          </div>
        </button>
       </div>
       <div class="border-t border-gray-100 pt-4">
         <div class="form-group mb-4">
          <label class="text-xs text-gray-400 uppercase font-bold mb-1">Usuário</label>
          <div class="flex items-center gap-2 p-3 bg-gray-50 rounded-xl border border-gray-100">
           <span id="view-username" class="flex-1 font-medium text-gray-800"></span>
          </div>
         </div>
         <div class="form-group">
          <label class="text-xs text-gray-400 uppercase font-bold mb-1">Senha</label>
          <div class="flex items-center gap-2 p-3 bg-gray-50 rounded-xl border border-gray-100">
           <span id="view-password" class="flex-1 font-medium text-gray-800">••••••••</span>
           <button onclick="toggleViewPassword()" class="p-2 hover:bg-gray-200 rounded-lg transition-colors text-gray-400">
            <svg id="view-password-eye" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
           </button>
           <input type="hidden" id="view-password-raw">
          </div>
         </div>
       </div>
       <button onclick="closeViewUserModal()" class="w-full py-3 bg-gray-100 text-gray-700 font-bold rounded-xl hover:bg-gray-200 transition-colors mt-2">Fechar</button>
      </div>
     </div>
    </div>

    <div id="userModal" class="modal-edit-user" onclick="if(event.target === this) closeUserModal()">
     <div class="modal-edit-content">
      <h2 class="text-2xl font-bold text-gray-900 mb-4" id="userModalTitle">Adicionar Usuário</h2>
     <div class="space-y-4">
      <div class="form-group"><label for="modal-user-username">Usuário</label> <input type="text" id="modal-user-username" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="Ex: admin">
      </div>
      <div class="form-group"><label for="modal-user-password">Senha</label>
       <div class="password-input-wrapper"><input type="password" id="modal-user-password" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="Digite uma senha segura"> <button type="button" class="toggle-password-btn" onclick="toggleUserPasswordVisibility()" title="Mostrar/Ocultar senha">
         <svg id="user-eye-icon" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
         </svg></button>
       </div>
      </div>
      <div class="form-group"><label for="modal-user-role">Função</label> <select id="modal-user-role" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none"> <option value="admin">Administrador</option> <option value="usuario">Usuário</option> </select>
      </div>
       <div class="modal-buttons">
         <button onclick="closeUserModal()" class="modal-btn-cancel">Cancelar</button>
         <button id="user-save-btn" onclick="saveUser()" class="modal-btn-save"> <span class="btn-text">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg> Salvar Usuário </span>
         <div class="btn-loading-spinner"></div>
         <div class="btn-success-content">
           <svg class="btn-success-icon" fill="currentColor" viewbox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
           </svg>
           <span class="font-bold">Salvo com sucesso</span>
         </div></button>
       </div>
     </div>
    </div>
   </div><!-- Delete User Confirmation Modal -->
   <div id="deleteUserModal" class="settings-modal" onclick="if(event.target === this) closeDeleteUserConfirm()">
    <div class="settings-content">
     <div style="text-align: center;">
      <svg class="w-16 h-16 mx-auto mb-4 text-red-500" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
      </svg>
      <h2 class="text-2xl font-bold text-gray-900 mb-2">Deletar Usuário?</h2>
      <p class="text-gray-600 mb-6">Esta ação não pode ser desfeita. Tem certeza?</p>
      <div class="settings-buttons"><button onclick="confirmDeleteUser()" class="btn-login">Deletar</button> <button onclick="closeDeleteUserConfirm()" class="btn-cancel">Cancelar</button>
      </div>
     </div>
    </div>
    </div><!-- Floating Settings Button --> <button id="floating-settings-btn" class="floating-btn" title="Configurações" style="display: none;">
    <svg fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
    </svg></button> <!-- Toast Notifications -->
    <div id="toast-notification" class="toast-notification">
      <div class="toast-icon-wrapper">
        <svg class="toast-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
      </div>
      <span id="toast-message"></span>
    </div><!-- Login Modal -->
   <div id="loginModal" class="settings-modal" onclick="if(event.target === this) closeLoginModal()">
    <div class="settings-content">
     <form class="settings-form" onsubmit="handleLogin(event)">
      <h2>Acesso Administrativo</h2>
      <div class="form-group"><label for="username">Usuário</label> <input type="text" id="username" placeholder="Digite seu usuário" required>
      </div>
      <div class="form-group"><label for="password">Senha</label>
       <div class="password-input-wrapper"><input type="password" id="password" placeholder="Digite sua senha" required> <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility()" title="Mostrar/Ocultar senha">
         <svg id="eye-icon" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
         </svg></button>
       </div>
      </div>
      <div class="remember-checkbox-wrapper"><input type="checkbox" id="rememberMe"> <label for="rememberMe">Permanecer conectado</label>
      </div>
      <div class="error-message" id="loginError"></div>
      <div class="settings-buttons"><button type="submit" class="btn-login" style="width: 100%;">Entrar</button>
      </div>
     
</form>
    </div>
   </div>
   <!-- User Login/Register Modal -->
   <div id="userLoginModal" class="settings-modal" onclick="if(event.target === this) closeUserLoginModal()">
    <div class="settings-content">
     <div id="user-login-view">
       <form class="settings-form" onsubmit="handleUserLogin(event)">
        <h2>Acesso ao Usuário</h2>
        <div class="form-group"><label for="user-login-phone">Telefone</label> <input type="text" id="user-login-phone" placeholder="Digite seu telefone" required>
        </div>
        <div class="form-group"><label for="user-login-password">Senha</label>
         <div class="password-input-wrapper"><input type="password" id="user-login-password" placeholder="Digite sua senha" required> <button type="button" class="toggle-password-btn" onclick="toggleUserPasswordVisibility('user-login-password')" title="Mostrar/Ocultar senha">
           <svg fill="none" stroke="currentColor" viewbox="0 0 24 24" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
           </svg></button>
         </div>
        </div>
        <div class="error-message" id="userLoginError"></div>
        <div class="settings-buttons">
          <button type="submit" class="btn-login" style="width: 100%;">Entrar</button>
        </div>
        <div class="mt-4 text-center">
          <p class="text-sm text-gray-600">Não tem uma conta? <button type="button" onclick="toggleUserAuthView('register')" class="text-[var(--primary-color)] font-bold">Cadastre-se</button></p>
        </div>
       </form>
     </div>
     <div id="user-register-view" class="hidden">
       <form class="settings-form" onsubmit="handleUserRegister(event)">
        <h2>Cadastro Rápido</h2>
        <div class="form-group"><label for="user-reg-name">Nome</label> <input type="text" id="user-reg-name" placeholder="Seu nome completo" required>
        </div>
        <div class="form-group"><label for="user-reg-phone">Telefone</label> <input type="text" id="user-reg-phone" placeholder="Seu telefone" required>
        </div>
        <div class="form-group"><label for="user-reg-password">Senha</label>
         <div class="password-input-wrapper"><input type="password" id="user-reg-password" placeholder="Crie uma senha" required> <button type="button" class="toggle-password-btn" onclick="toggleUserPasswordVisibility('user-reg-password')" title="Mostrar/Ocultar senha">
           <svg fill="none" stroke="currentColor" viewbox="0 0 24 24" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
           </svg></button>
         </div>
        </div>
        <div class="error-message" id="userRegisterError"></div>
        <div class="settings-buttons">
          <button type="submit" class="btn-login" style="width: 100%;">Cadastrar</button>
        </div>
        <div class="mt-4 text-center">
          <p class="text-sm text-gray-600">Já tem uma conta? <button type="button" onclick="toggleUserAuthView('login')" class="text-[var(--primary-color)] font-bold">Faça Login</button></p>
        </div>
       </form>
     </div>
    </div>
   </div>

   <!-- Welcome Success Modal (Once) -->
   <div id="welcomeSuccessModal" class="settings-modal" onclick="if(event.target === this) closeWelcomeModal()">
    <div class="settings-content text-center">
      <div class="mb-4 flex justify-center">
        <div class="bg-green-100 p-3 rounded-full">
          <svg class="w-12 h-12 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
      </div>
      <h2 class="text-2xl font-bold text-gray-900 mb-2">Boas-vindas e boas compras!</h2>
      <p class="text-gray-600 mb-6">Seu cadastro foi realizado com sucesso. Aproveite nossas ofertas!</p>
      <div class="flex flex-col gap-3">
        <button onclick="goToWhatsAppGroup()" class="w-full py-3 rounded-xl bg-[var(--primary-color)] text-white font-bold flex items-center justify-center gap-2 hover:bg-[var(--primary-color)] transition-all">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg>
          Entrar no Grupo WhatsApp
        </button>
        <button onclick="closeWelcomeModal()" class="w-full py-3 text-gray-500 font-medium hover:text-[var(--primary-color)] transition-all">
          Agora não
        </button>
      </div>
    </div>
   </div>
<!-- Footer -->
   <footer class="footer">
    <div class="footer-content">
     <div class="footer-section"><button onclick="footerWhatsapp()" class="whatsapp-btn-footer">
       <svg fill="currentColor" viewbox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
       </svg><span>ENTRE EM NOSSO GRUPO NO WHATSAPP!</span> </button>
     </div>
     <div class="copyright">
      © 2024 ZaapStore. Todos os direitos reservados.
     </div>
    </div>
   </footer>
  </div>
  <script>
    let isAuthenticated = false;
    let currentUser = '';
    let currentEditingProductId = null;
    let isEditingProduct = false;
    let currentEditingCategoryId = null;
    let isEditingCategory = false;
    let currentEditingUserId = null;
    let isEditingUser = false;
    let pendingDeleteProductId = null;
    let pendingDeleteCategoryId = null;
    let pendingDeleteUserId = null;
    let pendingDuplicateProductId = null;
    let selectedCategory = null;
    
    let products = [];
    let categories = [];
    let users = [];
    let orders = [];
    const storeManager = window.dataSdk;
    let cart = [];
    let storeConfigRecord = null;
    let currentDBProducts = [];
    let currentDBCategories = [];
    
    let storeConfig = {
      store_name: "ZaapStore",
      whatsapp_number: "5511999999999",
      whatsapp_group: "https://chat.whatsapp.com/FwVwUbmj9NC98wpQANgp4q",
      logo_url: "https://via.placeholder.com/150x50?text=Anna+Logo",
      banner_image: "",
      primary_color: "#25D366",
      primary_transparent: "#25d36612"
    };

    function hideLoadingScreen() {
      const loadingScreen = document.getElementById('loading-screen');
      loadingScreen.classList.add('hidden');
      // Mostrar botão de engrenagem após o carregamento
      const settingsBtn = document.getElementById('floating-settings-btn');
      if (settingsBtn) settingsBtn.style.display = 'flex';
    }

    function autoHideLoadingScreen() {
      setTimeout(() => {
        hideLoadingScreen();
      }, 3000);
    }

    const dataHandler = {
      onDataChanged(data) {
        // Detectar novos pedidos
        const newOrdersData = data.filter(item => item.data_type === 'order');
        if (orders.length > 0 && newOrdersData.length > orders.length) {
          localStorage.setItem('has_new_orders', 'true');
          if (typeof checkNewOrders === 'function') checkNewOrders();
        }
        orders = newOrdersData;

        users = data.filter(item => item.data_type === 'user');
        const configRecord = data.find(item => item.data_type === 'store_config');
        
        currentDBProducts = data.filter(item => item.data_type === 'product');
        // Atualiza a lista global 'products' usada pela função renderProducts()
        products = currentDBProducts.map(p => ({
          id: p.id || p.__backendId,
          name: p.name || '',
          price: parseFloat(p.price) || 0,
          stock: parseInt(p.stock) || 0,
          image: p.image || (p.images && p.images[0]) || '',
          images: p.images || (p.image ? [p.image] : []),
          description: p.description || '',
          category: p.category || '',
          order: p.order !== undefined ? p.order : 999999,
          isDupla: !!p.isDupla,
          __backendId: p.__backendId
        })).sort((a, b) => (a.order || 0) - (b.order || 0));
        
        currentDBCategories = data.filter(item => item.data_type === 'category');
        categories = currentDBCategories.map(c => ({
          id: c.id || c.__backendId,
          name: c.category_name || '',
          __backendId: c.__backendId
        }));
        
        if (configRecord) {
          storeConfigRecord = configRecord;
          Object.keys(storeConfig).forEach(key => {
            if (configRecord[key] !== undefined) {
              storeConfig[key] = configRecord[key];
            }
          });
          updateStoreUI();
        }
        
        renderProducts();
        renderCategories();
        renderAdminUsers();
        renderAdminProducts();
        renderAdminCategories();
        renderAdminOrders();
      loadFirebaseConfigToUI();
        updateCategorySelect();
        autoHideLoadingScreen();
      }
    };

    async function initDataSDK() {
      const result = await window.dataSdk.init(dataHandler);
      if (!result.isOk) {
        console.error('Failed to initialize Data SDK');
        setTimeout(() => hideLoadingScreen(), 2000);
      }
    }

    async function createDefaultMasterUser() {
      try {
        const masterExists = users.some(u => u.username === 'master');
        if (!masterExists) {
          await window.dataSdk.create({
            username: 'master',
            password: 'master123',
            role: 'admin',
            active: true,
            data_type: 'user'
          });
        }
      } catch (error) {
        console.error('Erro ao criar usuário mestre:', error);
      }
    }

    async function initStoreConfig() {
      try {
        const configExists = users.some(u => u.data_type === 'store_config');
        if (!configExists) {
          await window.dataSdk.create({
            store_name: storeConfig.store_name,
            whatsapp_number: storeConfig.whatsapp_number,
            whatsapp_group: storeConfig.whatsapp_group,
            logo_url: storeConfig.logo_url,
            banner_image: storeConfig.banner_image,
            data_type: 'store_config'
          });
        }
      } catch (error) {
        console.error('Erro ao inicializar configurações:', error);
      }
    }

    function loadData() {
      renderProducts();
      renderCategories();
    }

    function handleStoreSearch() {
      renderProducts();
    }

    function handleMobileStoreSearch() {
      // Sincronizar os campos de busca se necessário ou apenas renderizar
      const mobileInput = document.getElementById('mobile-store-search-input');
      const desktopInput = document.getElementById('store-search-input');
      if (mobileInput && desktopInput) {
        desktopInput.value = mobileInput.value;
      }
      renderProducts();
    }

    function renderProducts() {
      const grid = document.getElementById('products-grid');
      const title = document.getElementById('products-title');
      const searchInput = document.getElementById('store-search-input');
      const mobileSearchInput = document.getElementById('mobile-store-search-input');
      
      // Pega o termo de busca de qualquer um dos campos (desktop ou mobile)
      let searchTerm = '';
      if (window.innerWidth < 768 && mobileSearchInput) {
        searchTerm = mobileSearchInput.value.toLowerCase().trim();
      } else if (searchInput) {
        searchTerm = searchInput.value.toLowerCase().trim();
      }
      
      // Sort products by order property
      let sortedProducts = [...products].sort((a, b) => {
        const orderA = a.order !== undefined && a.order !== null ? a.order : 999999;
        const orderB = b.order !== undefined && b.order !== null ? b.order : 999999;
        if (orderA !== orderB) return orderA - orderB;
        return (b.id || 0) - (a.id || 0); // Fallback to ID/date if order is same
      });
      
      let filteredProducts = sortedProducts;
      
      // Aplicar filtro de categoria
      if (selectedCategory) {
        filteredProducts = filteredProducts.filter(p => p.category && p.category.split(',').map(c => c.trim()).includes(selectedCategory));
        title.textContent = selectedCategory;
      } else {
        title.textContent = 'Nossos Produtos';
      }

      // Aplicar filtro de busca (termo de busca)
      if (searchTerm) {
        filteredProducts = filteredProducts.filter(p => 
          p.name.toLowerCase().includes(searchTerm) || 
          (p.description && p.description.toLowerCase().includes(searchTerm))
        );
      }
      
      if (filteredProducts.length === 0) {
        const msg = searchTerm ? `Nenhum produto encontrado para "${searchTerm}"` : 'Nenhum produto disponível nesta categoria';
        grid.innerHTML = `<div class="col-span-full text-center py-12"><p class="text-gray-500 text-lg">${msg}</p></div>`;
        return;
      }

      grid.innerHTML = filteredProducts.map((product, index) => `
        <div onclick="openProductDetail('${product.id}')" class="product-card group cursor-pointer ${(parseInt(product.stock) || 0) <= 0 ? 'out-of-stock' : ''}" style="animation-delay: ${index * 0.1}s">
          <div class="aspect-square bg-gray-50 flex items-center justify-center relative overflow-hidden">
            ${product.isDupla ? '<div class="oferta-badge">Oferta</div>' : ''}
            <img 
              src="${product.image || (product.images && product.images[0]) || ''}" 
              alt="${product.name}" 
              class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              loading="lazy"
            >
            ${(parseInt(product.stock) || 0) <= 0 ? '<div class="absolute top-2 right-2 bg-[#d1d5db] text-gray-700 text-[10px] font-bold px-2 py-1 rounded-full uppercase tracking-wider z-10">Sem Estoque</div>' : ''}
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-300"></div>
          </div>
          <div class="p-3 md:p-5 flex flex-col flex-1">
            <h3 class="text-sm md:text-lg font-bold text-gray-900 mb-1 leading-tight min-h-[2.4em]">${product.name}</h3>
            <p class="text-gray-500 text-[10px] md:text-xs mb-3 line-clamp-2 leading-relaxed flex-1">${product.description}</p>
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 mt-auto">
              <span class="text-base md:text-xl font-bold text-[var(--primary-color)]">R$ ${product.price.toFixed(2).replace('.', ',')}</span>
              <button onclick="event.stopPropagation(); addToCart('${product.id}', event)" class="btn-add w-full sm:w-auto px-3 py-2 rounded-xl bg-[var(--primary-color)] text-white text-xs md:text-sm ${(parseInt(product.stock) || 0) <= 0 ? 'disabled' : 'hover:bg-[var(--primary-color)]'}">
                <svg class="w-3 md:w-4 h-3 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                <span>Adicionar</span>
              </button>
            </div>
          </div>
        </div>
      `).join('');
    }

    function renderCategories() {
      const list = document.getElementById('categories-list');
      
      if (categories.length === 0) {
        list.innerHTML = '';
        return;
      }

      list.innerHTML = categories.map((category, index) => `
        <button class="category-btn" style="animation-delay: ${(index + 1) * 0.1}s" onclick="filterByCategory(event, '${category.name}')">
          ${category.name}
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        </button>
      `).join('');
    }

    function filterByCategory(e, categoryName) {
      e.preventDefault();
      selectedCategory = categoryName === selectedCategory ? null : categoryName;
      
      document.getElementById('all-products-btn').classList.remove('active');
      document.querySelectorAll('#categories-list .category-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      
      if (selectedCategory) {
        document.querySelectorAll('#categories-list .category-btn').forEach(btn => {
          if (btn.textContent.includes(categoryName)) {
            btn.classList.add('active');
          }
        });
      } else {
        document.getElementById('all-products-btn').classList.add('active');
      }
      
      renderProducts();
      toggleMenu();
    }

    function showAllProducts() {
      selectedCategory = null;
      document.getElementById('all-products-btn').classList.add('active');
      document.querySelectorAll('#categories-list .category-btn').forEach(btn => {
        btn.classList.remove('active');
      });
      renderProducts();
      toggleMenu();
    }

        
    function downloadProductsPDF() {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      
      // Configurações do PDF
      const title = "Lista de Produtos - ZaapStore";
      const date = new Date().toLocaleDateString('pt-BR');
      
      doc.setFontSize(18);
      doc.setTextColor(242, 86, 193); // Cor rosa da marca
      doc.text(title, 14, 22);
      
      doc.setFontSize(10);
      doc.setTextColor(100);
      doc.text(`Gerado em: ${date}`, 14, 30);
      
      // Preparar dados para a tabela
      const tableData = products.map((p, index) => [
        index + 1,
        p.name,
        p.category || 'Sem categoria',
        `R$ ${p.price.toFixed(2).replace('.', ',')}`,
        p.stock
      ]);
      
      // Gerar tabela usando autoTable
      doc.autoTable({
        startY: 35,
        head: [['#', 'Produto', 'Categoria', 'Preço', 'Estoque']],
        body: tableData,
        headStyles: { fillColor: [242, 86, 193] },
        alternateRowStyles: { fillColor: [255, 241, 249] },
        margin: { top: 35 },
        theme: 'striped'
      });
      
      // Download do arquivo
      doc.save(`lista_produtos_${date.replace(/\//g, '-')}.pdf`);
      
      showToastNoPopup('PDF gerado com sucesso!', 'success');
    }
    
    function renderAdminProducts() {
      const list = document.getElementById('products-list');
      const searchTerm = document.getElementById('product-search-admin')?.value.toLowerCase() || '';
      
      if (products.length === 0) {
        list.innerHTML = '<p class="text-gray-500 text-sm">Nenhum produto adicionado</p>';
        return;
      }

      // Sort products by order property
      const sortedProducts = [...products].sort((a, b) => {
        const orderA = a.order !== undefined && a.order !== null ? a.order : 999999;
        const orderB = b.order !== undefined && b.order !== null ? b.order : 999999;
        if (orderA !== orderB) return orderA - orderB;
        return (b.id || 0) - (a.id || 0); // Fallback to ID/date if order is same
      });

      let filteredProducts = sortedProducts;
      if (searchTerm) {
        filteredProducts = sortedProducts.filter(p => p.name.toLowerCase().includes(searchTerm) || (p.description && p.description.toLowerCase().includes(searchTerm)));
      }

      if (filteredProducts.length === 0) {
        list.innerHTML = '<p class="text-gray-500 text-sm">Nenhum produto encontrado</p>';
        return;
      }

      list.innerHTML = filteredProducts.map((product, index) => `
        <div class="admin-list-item" data-product-id="${product.id}" data-index="${index}"><div class="admin-checkbox-wrapper flex items-center gap-3 px-2"><input type="checkbox" class="bulk-checkbox product-checkbox" data-id="${product.__backendId}" onchange="updateBulkBar('products')"></div>
          <img src="${product.image || (product.images && product.images[0]) || ''}" class="admin-list-thumb" alt="${product.name}">
          <div class="admin-list-info flex flex-col items-center sm:items-start text-center sm:text-left">
            <div class="admin-list-title w-full"><span class="text-[var(--primary-color)] font-bold mr-2">${index + 1}.</span>${product.name}</div>
            <div class="admin-list-subtitle flex flex-col items-center sm:items-start gap-1 w-full">
              <span class="text-xs font-medium text-gray-500 sm:hidden">Estoque: ${product.stock}</span>
              <div class="flex items-center justify-center sm:justify-start gap-2 w-full">
                <span class="status-badge ${product.stock === 0 ? 'inactive' : 'active'}">${product.stock === 0 ? 'Desativado' : 'Ativo'}</span>
                <span class="text-xs font-normal text-gray-500 hidden sm:inline-block">(Estoque: ${product.stock})</span>
              </div>
            </div>
          </div>
          <div class="admin-list-actions">
            <button onclick="openDuplicateModal('${product.id}')" class="admin-duplicate-btn px-3 py-2" title="Duplicar produto">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
              </svg>
              Duplicar
            </button>
            <button onclick="editProduct('${product.id}')" class="admin-edit-btn px-3 py-2">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
              Editar
            </button>
            <button onclick="toggleStockStatus('${product.__backendId}')" class="admin-toggle-stock-btn px-3 py-2 ${(parseInt(product.stock) || 0) <= 0 ? 'out-of-stock' : ''}">
              ${product.stock === 0 ? '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Ativar' : '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Desativar'}
            </button>
            <button onclick="openDeleteProductConfirm('${product.__backendId}')" class="admin-delete-btn px-3 py-2">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
              Deletar
            </button>
          </div>
        </div>
      `).join('');
    }

    async function saveProductsOrder() {
      const updates = products.map(product => {
        const dbItem = currentDBProducts.find(p => p.__backendId === product.__backendId);
        if (dbItem && dbItem.order !== product.order) {
          return window.dataSdk.update({
            ...dbItem,
            order: product.order
          });
        }
        return Promise.resolve();
      });
      await Promise.all(updates);
    }

        function renderAdminCategories() {
      const list = document.getElementById('categories-list-admin');
      const searchTerm = document.getElementById('category-search-admin')?.value.toLowerCase() || '';
      
      let filteredCategories = categories;
      if (searchTerm) {
        filteredCategories = categories.filter(c => c.name.toLowerCase().includes(searchTerm));
      }

      if (filteredCategories.length === 0) {
        list.innerHTML = '<p class="text-gray-500 text-sm">Nenhuma categoria encontrada</p>';
        return;
      }

      list.innerHTML = filteredCategories.map(category => `
        <div class="admin-list-item"><div class="admin-checkbox-wrapper flex items-center gap-3 px-2"><input type="checkbox" class="bulk-checkbox category-checkbox" data-id="${category.__backendId}" onchange="updateBulkBar('categories')"></div>
          <div class="admin-list-info">
            <div class="admin-list-title">${category.name}</div>
          </div>
          <div class="admin-list-actions">
            <button onclick="editCategory('${category.__backendId}')" class="admin-edit-btn px-3 py-2">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
              Editar
            </button>
            <button onclick="openDeleteCategoryConfirm('${category.__backendId}')" class="admin-delete-btn px-3 py-2">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
              Deletar
            </button>
          </div>
        </div>
      `).join('');
    }

        function renderAdminUsers() {
      const list = document.getElementById('users-list');
      const searchTerm = document.getElementById('user-search-admin')?.value.toLowerCase() || '';
      const userItems = users.filter(u => u.data_type === 'user' && u.username !== 'admin');
      let currentUserObj = users.find(u => u.username === currentUser && u.data_type === 'user');
      if (!currentUserObj && currentUser === 'admin') {
        currentUserObj = { username: 'admin', role: 'admin' };
      }
      const isAdmin = currentUserObj && currentUserObj.role === 'admin';
      
      let filteredUsers = userItems;
      if (searchTerm) {
        filteredUsers = userItems.filter(u => u.username.toLowerCase().includes(searchTerm));
      }

      if (filteredUsers.length === 0) {
        list.innerHTML = '<p class="text-gray-500 text-sm">Nenhum usuário encontrado</p>';
        return;
      }

      list.innerHTML = filteredUsers.map(user => {
        const isActive = user.active !== false;
        const statusClass = isActive ? 'active' : 'inactive';
        const statusText = isActive ? 'Ativo' : 'Inativo';
        const toggleIcon = isActive ? 
          '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>' : 
          '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
        const toggleText = isActive ? 'Desativar' : 'Ativar';

        return `
          <div class="admin-list-item"><div class="admin-checkbox-wrapper flex items-center gap-3 px-2"><input type="checkbox" class="bulk-checkbox user-checkbox" data-id="${user.__backendId}" onchange="updateBulkBar(\'users\')"></div>
            <div class="admin-list-info">
              <div class="admin-list-title">${user.username}</div>
              <div class="admin-list-subtitle">
                <span class="role-badge">${user.role === 'usuario' ? 'Usuário' : (user.role === 'admin' ? 'Administrador' : user.role)}</span>
                <span class="status-badge ${statusClass}">${statusText}</span>
              </div>
            </div>
            <div class="admin-list-actions">
              <button onclick="viewUserCredentials('${user.__backendId}')" class="admin-view-btn" title="Ver credenciais">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
                Ver
              </button>
              <button onclick="editUser('${user.__backendId}')" class="admin-edit-btn px-3 py-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                Editar
              </button>
              ${isAdmin ? `
                <button onclick="toggleUserStatus('${user.__backendId}')" class="admin-toggle-stock-btn px-3 py-2 ${!isActive ? 'out-of-stock' : ''}">
                  ${toggleIcon}
                  ${toggleText}
                </button>
              ` : ''}
              ${isAdmin ? `
                <button onclick="openDeleteUserConfirm('${user.__backendId}')" class="admin-delete-btn px-3 py-2" title="Deletar Usuário">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                  Deletar
                </button>
              ` : ''}
            </div>
          </div>
        `;
      }).join('');
    }

    
    let selectedProductCategories = [];

    function addCategoryToProduct() {
      const select = document.getElementById('modal-product-category');
      const categoryName = select.value;
      
      if (!categoryName) {
        showToastNoPopup('Selecione uma categoria primeiro', 'error');
        return;
      }
      
      if (selectedProductCategories.includes(categoryName)) {
        showToastNoPopup('Esta categoria já foi adicionada', 'error');
        return;
      }
      
      selectedProductCategories.push(categoryName);
      renderSelectedCategories();
      select.value = '';
    }

    function removeCategoryFromProduct(categoryName) {
      selectedProductCategories = selectedProductCategories.filter(c => c !== categoryName);
      renderSelectedCategories();
    }

    function renderSelectedCategories() {
      const container = document.getElementById('selected-categories-container');
      if (!container) return;
      container.innerHTML = selectedProductCategories.map(cat => `
        <span class="category-tag">
          ${cat}
          <button type="button" onclick="removeCategoryFromProduct('${cat}')">&times;</button>
        </span>
      `).join('');
    }

    function updateCategorySelect() {
      const select = document.getElementById('modal-product-category');
      const currentValue = select.value;
      
      select.innerHTML = '<option value="">Selecione uma categoria</option>';
      categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category.name;
        option.textContent = category.name;
        select.appendChild(option);
      });
      
      select.value = currentValue;
    }

    async function handleLogin(e) {
      e.preventDefault();
      
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      const rememberMe = document.getElementById('rememberMe').checked;
      const errorEl = document.getElementById('loginError');

      // Tenta encontrar o usuário na lista vinda do banco
      let user = users.find(u => u.username === username && u.password === password && u.data_type === 'user' && u.active !== false);
      
      // Se não encontrar e for o admin padrão, permite o acesso (fallback de segurança)
      if (!user && username === 'admin' && password === '123') {
        user = { username: 'admin', role: 'admin' };
      }
      
      if (user) {
        isAuthenticated = true;
        currentUser = username;
        
        if (rememberMe) {
          localStorage.setItem('annaStoreRememberMe', JSON.stringify({
            username: username,
            timestamp: new Date().getTime()
          }));
        } else {
          localStorage.removeItem('annaStoreRememberMe');
        }
        
        closeLoginModal();
        openAdminDashboard();
        loadAdminValues();
      } else {
        errorEl.textContent = 'Usuário ou senha incorretos, ou usuário está inativo';
        errorEl.classList.add('show');
      }
    }

    function closeLoginModal() {
      document.getElementById('loginModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      document.getElementById('loginError').classList.remove('show');
      document.getElementById('username').value = '';
      document.getElementById('password').value = '';
      document.getElementById('rememberMe').checked = false;
    }

    function togglePasswordVisibility() {
      const passwordInput = document.getElementById('password');
      const eyeIcon = document.getElementById('eye-icon');
      
      if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
      } else {
        passwordInput.type = 'password';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
      }
    }

    function toggleUserPasswordVisibility() {
      const passwordInput = document.getElementById('modal-user-password');
      const eyeIcon = document.getElementById('user-eye-icon');
      
      if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
      } else {
        passwordInput.type = 'password';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
      }
    }

    function logout() {
      isAuthenticated = false;
      currentUser = '';
      localStorage.removeItem('annaStoreRememberMe');
      closeAdminDashboard();
    }

    function updateStoreUI() {
      document.getElementById('store-title').textContent = storeConfig.store_name || "ZaapStore";

      // Aplicar cores do banco de dados
      if (storeConfig.primary_color && storeConfig.primary_transparent) {
        document.documentElement.style.setProperty('--primary-color', storeConfig.primary_color);
        document.documentElement.style.setProperty('--primary-transparent', storeConfig.primary_transparent);
        updateFavicon(storeConfig.primary_color);
        
        // Sincronizar localStorage para evitar piscadas no próximo reload
        localStorage.setItem('zaapstore_primary_color', storeConfig.primary_color);
        localStorage.setItem('zaapstore_primary_transparent', storeConfig.primary_transparent);
      }
      
      const logoEl = document.getElementById('header-logo');
      const textContainer = document.getElementById('store-text-container');
      
      if (storeConfig.logo_url && storeConfig.logo_url.trim() !== '') {
        logoEl.src = storeConfig.logo_url;
        logoEl.style.display = 'block';
        logoEl.onerror = function() {
          console.error('Logo failed to load');
          this.style.display = 'none';
          textContainer.style.display = 'block';
        };
        textContainer.style.display = 'none';
      } else {
        logoEl.style.display = 'none';
        textContainer.style.display = 'block';
      }
      
      const bannerEl = document.getElementById('banner');
      const bannerWrapper = document.getElementById('banner-wrapper');
      
      const hasBanner = storeConfig.banner_image && 
                        storeConfig.banner_image.trim() !== '' && 
                        !storeConfig.banner_image.includes('via.placeholder.com');
      
      if (hasBanner) {
        bannerEl.style.backgroundImage = `url('${storeConfig.banner_image}')`;
        bannerEl.classList.remove('loading');
        bannerWrapper.style.display = 'block';
        bannerWrapper.classList.remove('hidden');
      } else {
        bannerEl.style.backgroundImage = 'none';
        bannerWrapper.style.display = 'none';
        bannerWrapper.classList.add('hidden');
      }
    }

    
    function addToCart(productId, event) {
      const product = products.find(p => p.id === productId);
      if (!product) return;
      
      const stockAvailable = parseInt(product.stock) || 0;
      if (stockAvailable <= 0) {
        showToastNoPopup('Produto sem estoque disponível.', 'error');
        return;
      }
      
      const existingItem = cart.find(item => item.id === productId);
      
      if (existingItem) {
        if (existingItem.quantity + 1 > stockAvailable) {
          showToastNoPopup(`Desculpe, temos apenas ${stockAvailable} unidade(s) em estoque.`, 'error');
          return;
        }
        existingItem.quantity++;
      } else {
        cart.push({ ...product, quantity: 1 });
      }
      
      updateCartUI();

      // Identificar o botão clicado de forma robusta
      let btn = null;
      if (event) {
        if (event.currentTarget && event.currentTarget.classList.contains('btn-add')) {
          btn = event.currentTarget;
        } else if (event.target) {
          btn = event.target.closest('.btn-add');
        }
      }

      if (btn) {
        const originalContent = btn.innerHTML;
        btn.innerHTML = '<svg class="w-4 md:w-5 h-4 md:h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg><span>Adicionado</span>';
        btn.classList.add('opacity-75');
        btn.disabled = true;
        
        setTimeout(() => {
          btn.innerHTML = originalContent;
          btn.classList.remove('opacity-75');
          btn.disabled = false;
        }, 2000);
      }
    }

    function updateCartUI() {
      const countEl = document.getElementById('cart-count');
      const itemsEl = document.getElementById('cart-items');
      const emptyEl = document.getElementById('cart-empty');
      const totalEl = document.getElementById('cart-total');
      const checkoutBtn = document.getElementById('checkout-btn');
      
      const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
      const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
      
      if (totalItems > 0) {
        countEl.textContent = totalItems;
        countEl.classList.remove('hidden');
      } else {
        countEl.classList.add('hidden');
      }
      
      if (cart.length === 0) {
        itemsEl.classList.add('hidden');
        emptyEl.classList.remove('hidden');
        checkoutBtn.disabled = true;
      } else {
        itemsEl.classList.remove('hidden');
        emptyEl.classList.add('hidden');
        checkoutBtn.disabled = false;
        
        itemsEl.innerHTML = cart.map(item => `
          <div class="cart-item bg-white border border-gray-100 rounded-2xl flex gap-3 p-3">
            <div class="w-16 h-16 rounded-xl bg-gray-50 flex-shrink-0 overflow-hidden">
              <img 
                src="${item.image || (item.images && item.images[0]) || ''}" 
                alt="${item.name}"
                loading="lazy"
                class="w-full h-full object-cover"
                
              />
            </div>
            <div class="flex-1 min-w-0 flex flex-col justify-between">
              <div class="flex justify-between items-start gap-2">
                <h4 class="text-sm font-semibold text-gray-900 truncate">${item.name}</h4>
                <button onclick="removeFromCart('${item.id}')" class="text-gray-400 hover:text-[var(--primary-color)] transition-colors">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                  </svg>
                </button>
              </div>
              <div class="flex items-center justify-between mt-1">
                <div class="flex flex-col"><p class="text-[var(--primary-color)] font-bold text-sm">R$ ${item.price.toFixed(2).replace(".", ",")}</p><p class="text-[10px] text-gray-400">Estoque: ${item.stock}</p></div>
                <div class="flex items-center gap-2 bg-gray-50 rounded-lg p-1">
                  <button onclick="updateQuantity('${item.id}', -1)" class="w-6 h-6 flex items-center justify-center text-gray-500 hover:text-[var(--primary-color)] transition-colors">−</button>
                  <span class="text-xs font-bold text-gray-900 w-4 text-center">${item.quantity}</span>
                  <button onclick="updateQuantity('${item.id}', 1)" class="w-6 h-6 flex items-center justify-center text-gray-500 hover:text-[var(--primary-color)] transition-colors">+</button>
                </div>
              </div>
            </div>
          </div>
        `).join('');
      }
      
      totalEl.textContent = `R$ ${totalPrice.toFixed(2).replace('.', ',')}`;
    }

    
    function updateQuantity(productId, change) {
      const item = cart.find(item => item.id === productId);
      const product = products.find(p => p.id === productId);
      
      if (item && product) {
        const stockAvailable = parseInt(product.stock) || 0;
        const newQuantity = item.quantity + change;
        
        if (newQuantity <= 0) {
          removeFromCart(productId);
        } else if (newQuantity > stockAvailable) {
          showToastNoPopup(`Desculpe, temos apenas ${stockAvailable} unidade(s) em estoque.`, 'error');
        } else {
          item.quantity = newQuantity;
          updateCartUI();
        }
      }
    }


    function removeFromCart(productId) {
      cart = cart.filter(item => item.id !== productId);
      updateCartUI();
    }

    function showAddressForm() {
      if (cart.length === 0) return;
      document.getElementById('address-overlay').classList.add('show');
      document.getElementById('address-name').focus();
      clearAddressForm();
    }

    function hideAddressForm() {
      document.getElementById('address-overlay').classList.remove('show');
      clearAddressForm();
    }

    function clearAddressForm() {
      document.getElementById('address-cep').value = '';
      document.getElementById('address-street').value = '';
      document.getElementById('address-number').value = '';
      document.getElementById('address-complement').value = '';
      document.getElementById('address-neighborhood').value = '';
      document.getElementById('address-city').value = '';
      document.getElementById('address-state').value = '';
      document.getElementById('address-name').value = '';
      document.getElementById('address-phone').value = '';
      document.getElementById('cepError').classList.remove('show');
      document.getElementById('addressError').classList.remove('show');
    }

    function searchCEP() {
      const cepInput = document.getElementById('address-cep');
      const cep = cepInput.value.replace(/\D/g, '');
      const errorEl = document.getElementById('cepError');

      if (cep.length !== 8) {
        errorEl.textContent = 'CEP inválido (deve ter 8 dígitos)';
        errorEl.classList.add('show');
        return;
      }

      errorEl.classList.remove('show');
      
      const cepFormatted = `${cep.substring(0, 5)}-${cep.substring(5)}`;
      cepInput.value = cepFormatted;

      fetch(`https://viacep.com.br/ws/${cep}/json/`)
        .then(response => response.json())
        .then(data => {
          if (data.erro) {
            errorEl.textContent = 'CEP não encontrado';
            errorEl.classList.add('show');
            return;
          }

          document.getElementById('address-street').value = data.logradouro || '';
          document.getElementById('address-neighborhood').value = data.bairro || '';
          document.getElementById('address-city').value = data.localidade || '';
          document.getElementById('address-state').value = data.uf || '';
          
          document.getElementById('address-number').focus();
        })
        .catch(error => {
          errorEl.textContent = 'Erro ao buscar CEP. Preencha manualmente.';
          errorEl.classList.add('show');
        });
    }

    async function handleAddressSubmit(e) {
      e.preventDefault();
      
      const phone_number = storeConfig.whatsapp_number;
      const storeName = storeConfig.store_name;
      
      let message = `Pedido - ${storeName}\n\n`;
      
      const name = document.getElementById('address-name').value.trim();
      const phone = document.getElementById('address-phone').value.trim();
      const street = document.getElementById('address-street').value.trim();
      const number = document.getElementById('address-number').value.trim();
      const complement = document.getElementById('address-complement').value.trim();
      const neighborhood = document.getElementById('address-neighborhood').value.trim();
      const city = document.getElementById('address-city').value.trim();
      const state = document.getElementById('address-state').value.trim();
      const cep = document.getElementById('address-cep').value.trim();

      if (name || phone || street || number || neighborhood || city || state || cep) {
        message += `*Endereço de Entrega:*\n`;
        if (name) message += `${name}\n`;
        if (street || number) {
          message += `${street}, ${number}`;
          if (complement) message += ` - ${complement}`;
          message += `\n`;
        }
        if (neighborhood || city) {
          message += `${neighborhood}, ${city}`;
          if (state) message += ` - ${state}`;
          message += `\n`;
        }
        if (cep) message += `CEP: ${cep}\n`;
        if (phone) message += `Telefone: ${phone}\n`;
        message += `\n`;
      }
      
      message += `*Itens:*\n`;

      cart.forEach((item, index) => {
        const subtotal = item.price * item.quantity;
        const isDuplaText = item.isDupla ? " (Oferta)" : "";
        message += `${index + 1}. ${item.name}${isDuplaText}\n`;
        message += `   Qtd: ${item.quantity} x R$ ${item.price.toFixed(2).replace('.', ',')} = R$ ${subtotal.toFixed(2).replace('.', ',')}\n`;

      });
      
      const total = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
      message += `\n*Total: R$ ${total.toFixed(2).replace('.', ',')} + frete a consultar*`;
      
      const orderData = {
        data_type: 'order',
        createdAt: new Date().toISOString(),
        customer: { name, phone },
        address: { street, number, complement, neighborhood, city, state, cep },
        items: cart.map(item => ({ id: item.id, name: item.name, price: item.price, quantity: item.quantity, isDupla: !!item.isDupla, image: item.image || (item.images && item.images[0]) || '' })),
        total: total,
        status: 'pending'
      };

      try {
        await storeManager.create(orderData);
        // Notificar administrador sobre novo pedido
        localStorage.setItem('has_new_orders', 'true');
      } catch (e) {
        console.error('Erro ao salvar pedido:', e);
      }

      const encodedMessage = encodeURIComponent(message);
      const whatsappUrl = `https://wa.me/${phone_number}?text=${encodedMessage}`;
      
      window.open(whatsappUrl, '_blank');
      hideAddressForm();
      cart = [];
      updateCartUI();
      toggleCart();
      showToastNoPopup('Pedido enviado com sucesso!', 'success');
    }

    function openAdminDashboard() {
      const dashboard = document.getElementById('adminDashboard');
      dashboard.classList.add('active');
      dashboard.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
      
      // Ocultar botão de engrenagem no painel ADM
      const settingsBtn = document.getElementById('floating-settings-btn');
      if (settingsBtn) settingsBtn.style.display = 'none';
      
      // Forçar recalculo de layout e resetar scroll
      setTimeout(() => {
        const content = document.getElementById('dashboard-content');
        if (content) content.scrollTop = 0;
        window.scrollTo(0, 0);
      }, 50);

      document.getElementById('adminDashboard').classList.remove('hidden');
      document.getElementById('adminDashboard').classList.add('active');
      document.body.style.overflow = 'hidden';
      handleScrollVisibility(); // Atualizar visibilidade do botão de voltar ao topo
    }

    function closeAdminDashboard() {
      const dashboard = document.getElementById('adminDashboard');
      dashboard.classList.remove('active');
      dashboard.classList.add('hidden');
      document.body.style.overflow = '';
      
      // Mostrar botão de engrenagem ao voltar para a loja
      const settingsBtn = document.getElementById('floating-settings-btn');
      if (settingsBtn) settingsBtn.style.display = 'flex';
      
      handleScrollVisibility(); // Atualizar visibilidade do botão de voltar ao topo
    }

    function switchAdminTab(tabName) {
      // Verificar permissões para abas restritas
      if ((tabName === 'users' || tabName === 'firebase')) {
        let currentUserObj = users.find(u => u.username === currentUser && u.data_type === 'user');
      if (!currentUserObj && currentUser === 'admin') {
        currentUserObj = { username: 'admin', role: 'admin' };
      }
        if (!currentUserObj || currentUserObj.role !== 'admin') {
          showToastNoPopup('Acesso negado. Apenas administradores podem acessar esta aba.', 'error');
          return;
        }
      }

      document.querySelectorAll('.admin-tab-content').forEach(tab => {
        tab.classList.add('hidden');
      });
      document.querySelectorAll('.admin-tab-btn').forEach(btn => {
        btn.classList.remove('active');
      });

      const targetTab = document.getElementById(`admin-tab-${tabName}`);
      if (targetTab) targetTab.classList.remove('hidden');
      
      // Se clicou na aba de pedidos, remove a notificação IMEDIATAMENTE
      if (tabName === 'orders') {
        localStorage.setItem('has_new_orders', 'false');
        const badge = document.getElementById('orders-notification-badge');
        const ordersTabBtn = document.getElementById('orders-tab-btn');
        if (badge) {
          badge.style.display = 'none'; // Força ocultação via style
          badge.classList.remove('pulse');
          badge.textContent = '';
        }
        if (ordersTabBtn) {
          ordersTabBtn.classList.remove('has-new-orders');
        }
      }
      
      // Garante que o botão clicado fique ativo
      const clickedBtn = Array.from(document.querySelectorAll('.admin-tab-btn')).find(btn => btn.getAttribute('onclick').includes(`'${tabName}'`));
      if (clickedBtn) clickedBtn.classList.add('active');
    }
    
    // Função para verificar novos pedidos periodicamente
    function checkNewOrders() {
      const badge = document.getElementById('orders-notification-badge');
      const ordersTabBtn = document.getElementById('orders-tab-btn');
      if (!badge || !ordersTabBtn) return;
      
      // Verifica se a aba de pedidos está ativa no momento
      const ordersTab = document.getElementById('admin-tab-orders');
      const isOrdersTabActive = ordersTab && !ordersTab.classList.contains('hidden');
      
      if (isOrdersTabActive) {
        localStorage.setItem('has_new_orders', 'false');
        badge.style.display = 'none';
        badge.classList.remove('pulse');
        ordersTabBtn.classList.remove('has-new-orders');
        return;
      }

      // Verifica se há novos pedidos no localStorage
      const hasNew = localStorage.getItem('has_new_orders') === 'true';
      const orderCount = (typeof orders !== 'undefined') ? orders.length : 0;

      // SÓ exibe se houver novos pedidos E a contagem for maior que zero
      if (hasNew && orderCount > 0) {
        badge.style.display = 'flex'; // Exibe como flex para centralizar o número
        badge.classList.add('pulse');
        badge.textContent = orderCount;
        ordersTabBtn.classList.add('has-new-orders');
      } else {
        // Garante que o badge fique oculto se não houver novos pedidos ou se a contagem for 0
        badge.style.display = 'none';
        badge.classList.remove('pulse');
        ordersTabBtn.classList.remove('has-new-orders');
      }
    }
    
    // Inicia a verificação com intervalo menor para maior agilidade (1 segundo)
    setInterval(checkNewOrders, 1000);

    function generateSlug(text) {
      return text.toString().toLowerCase()
        .replace(/\s+/g, '-')           // Substitui espaços por -
        .replace(/[^\w\-]+/g, '')       // Remove caracteres não alfanuméricos
        .replace(/\-\-+/g, '-')         // Substitui múltiplos - por um único -
        .replace(/^-+/, '')             // Remove - do início
        .replace(/-+$/, '');            // Remove - do fim
    }

    function updateStoreLinkDisplay() {
      const name = document.getElementById('admin-store-name').value;
      const slug = generateSlug(name || 'sua-loja');
      const display = document.getElementById('admin-store-link-display');
      if (display) {
        display.textContent = `app.zaapstore.shop/${slug}`;
      }
    }

    function loadAdminValues() {
      document.getElementById('admin-store-name').value = storeConfig.store_name || '';
      updateStoreLinkDisplay();
      document.getElementById('admin-whatsapp').value = storeConfig.whatsapp_number || '';
      document.getElementById('admin-logo').value = storeConfig.logo_url || '';
      document.getElementById('admin-banner').value = storeConfig.banner_image || '';
      document.getElementById('admin-whatsapp-group').value = storeConfig.whatsapp_group || '';
      
      const usersTabBtn = document.getElementById('users-tab-btn');
      const firebaseTabBtn = document.getElementById('firebase-tab-btn');
      let currentUserObj = users.find(u => u.username === currentUser && u.data_type === 'user');
      if (!currentUserObj && currentUser === 'admin') {
        currentUserObj = { username: 'admin', role: 'admin' };
      }
      
      if (currentUserObj && currentUserObj.role !== 'admin') {
        usersTabBtn.style.display = 'none';
        firebaseTabBtn.style.display = 'none';
      } else {
        usersTabBtn.style.display = 'block';
        firebaseTabBtn.style.display = 'block';
      }
      
      renderAdminProducts();
      renderAdminCategories();
      renderAdminUsers();
      renderAdminOrders();
      loadFirebaseConfigToUI();
    }

    async function saveStoreSettings() {
      const btn = document.getElementById('config-save-btn');
      setButtonState(btn, 'saving');

      try {
        const updatedConfig = {
          store_name: document.getElementById('admin-store-name').value.trim(),
          whatsapp_number: document.getElementById('admin-whatsapp').value.trim(),
          logo_url: document.getElementById('admin-logo').value.trim(),
          banner_image: document.getElementById('admin-banner').value.trim(),
          whatsapp_group: document.getElementById('admin-whatsapp-group').value.trim(),
          primary_color: storeConfig.primary_color,
          primary_transparent: storeConfig.primary_transparent,
          data_type: 'store_config'
        };

        if (storeConfigRecord && storeConfigRecord.__backendId) {
          const recordToUpdate = { ...storeConfigRecord, ...updatedConfig };
          const result = await window.dataSdk.update(recordToUpdate);
          if (!result.isOk) throw new Error('Erro ao atualizar configurações');
        } else {
          const result = await window.dataSdk.create(updatedConfig);
          if (!result.isOk) throw new Error('Erro ao criar configurações');
        }

        Object.assign(storeConfig, updatedConfig);
        updateStoreUI();
        setButtonState(btn, 'success');
      } catch (error) {
        console.error('Erro ao salvar:', error);
        setButtonState(btn, 'normal');
        showToastNoPopup('Erro ao salvar configurações', 'error');
      }
    }

    
    let imageFieldCount = 1;

    function addImageField(url = '') {
      if (imageFieldCount >= 5) {
        showToastNoPopup('Máximo de 5 imagens atingido', 'error');
        return;
      }
      
      imageFieldCount++;
      const container = document.getElementById('image-fields-container');
      const div = document.createElement('div');
      div.className = 'relative flex gap-2 items-center';
      div.id = `image-field-wrapper-${imageFieldCount}`;
      div.innerHTML = `
        <input type="text" id="modal-product-image-${imageFieldCount}" value="${url}" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="URL da Imagem ${imageFieldCount} (Opcional)">
        <button type="button" onclick="removeImageField(${imageFieldCount})" class="p-2 text-gray-400 hover:text-red-500 transition-colors">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      `;
      container.appendChild(div);
      
      if (imageFieldCount === 5) {
        document.getElementById('add-image-field-btn').style.display = 'none';
      }
    }

    function removeImageField(id) {
      const field = document.getElementById(`image-field-wrapper-${id}`);
      if (field) {
        field.remove();
        imageFieldCount--;
        document.getElementById('add-image-field-btn').style.display = 'flex';
        
        const container = document.getElementById('image-fields-container');
        const inputs = container.querySelectorAll('input');
        
        imageFieldCount = 0;
        inputs.forEach((input, index) => {
          imageFieldCount++;
          const newId = imageFieldCount;
          input.id = `modal-product-image-${newId}`;
          input.placeholder = newId === 1 ? "URL da Imagem Principal (Obrigatória)" : `URL da Imagem ${newId} (Opcional)`;
          
          const wrapper = input.parentElement;
          if (newId > 1) {
            wrapper.id = `image-field-wrapper-${newId}`;
            const removeBtn = wrapper.querySelector('button');
            if (removeBtn) removeBtn.setAttribute('onclick', `removeImageField(${newId})`);
          }
        });
      }
    }

    function resetImageFields() {
      const container = document.getElementById('image-fields-container');
      container.innerHTML = `
        <div class="relative">
          <input type="text" id="modal-product-image-1" class="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-[var(--primary-color)] focus:outline-none" placeholder="URL da Imagem Principal (Obrigatória)">
        </div>
      `;
      imageFieldCount = 1;
      document.getElementById('add-image-field-btn').style.display = 'flex';
    }

    function openAddProductModal() {
      isEditingProduct = false;
      currentEditingProductId = null;
      document.getElementById('productModalTitle').textContent = 'Adicionar Produto';
      document.getElementById('modal-product-category').value = '';
      selectedProductCategories = [];
      renderSelectedCategories();
      document.getElementById('modal-product-name').value = '';
      document.getElementById('modal-product-position').value = '';
      document.getElementById('modal-product-price').value = '';
      resetImageFields();
      document.getElementById('modal-product-description').value = '';
      document.getElementById('productModal').classList.add('active');
      document.body.classList.add('modal-open');
      document.getElementById('modal-product-name').focus();
    }

    function closeProductModal() {
      document.getElementById('productModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      isEditingProduct = false;
      currentEditingProductId = null;
      document.getElementById('modal-product-is-dupla').checked = false;
    }

    async function saveProduct() {
      const btn = document.getElementById('product-save-btn');
      const category = selectedProductCategories.join(', ');
      const name = document.getElementById('modal-product-name').value.trim();
      const price = parseFloat(document.getElementById('modal-product-price').value.replace(',', '.'));
      const description = document.getElementById('modal-product-description').value.trim();
      const stockCount = parseInt(document.getElementById('modal-product-stock-count').value) || 0;
      const isDupla = document.getElementById('modal-product-is-dupla').checked;
      const position = parseInt(document.getElementById('modal-product-position').value);
      
      const images = [];
      const imageInputs = document.querySelectorAll('[id^="modal-product-image-"]');
      imageInputs.forEach(input => {
        const val = input.value.trim();
        if (val) images.push(val);
      });

      if (!name || isNaN(price) || images.length === 0 || !description || selectedProductCategories.length === 0 || isNaN(stockCount)) {
        let errorMsg = 'Preencha todos os campos obrigatórios';
        if (isNaN(price)) errorMsg = 'Preço inválido';
        else if (images.length === 0) errorMsg = 'Adicione pelo menos uma imagem';
        showToastNoPopup(errorMsg, 'error');
        return;
      }

      setButtonState(btn, 'saving');

      try {
        // Garantir que todos os produtos tenham um 'order' definido para evitar inconsistências
        const currentProducts = [...products].sort((a, b) => (a.order || 0) - (b.order || 0));
        
        if (isEditingProduct && currentEditingProductId) {
          const productToUpdate = currentDBProducts.find(p => p.id === currentEditingProductId || p.__backendId === currentEditingProductId);
          if (productToUpdate) {
            let oldOrder = productToUpdate.order !== undefined ? productToUpdate.order : currentProducts.length - 1;
            let updatedOrder = isNaN(position) || position <= 0 ? currentProducts.length - 1 : position - 1;
            
            // Se a posição mudou, reordenar os outros
            if (updatedOrder !== oldOrder) {
              let updates = [];
              if (updatedOrder < oldOrder) {
                // Moveu para cima: incrementa quem está entre a nova e a antiga posição
                updates = currentProducts.filter(p => p.order >= updatedOrder && p.order < oldOrder && p.id !== productToUpdate.id)
                  .map(p => window.dataSdk.update({ ...p, order: (p.order || 0) + 1 }));
              } else {
                // Moveu para baixo: decrementa quem está entre a antiga e a nova posição
                updates = currentProducts.filter(p => p.order > oldOrder && p.order <= updatedOrder && p.id !== productToUpdate.id)
                  .map(p => window.dataSdk.update({ ...p, order: (p.order || 0) - 1 }));
              }
              await Promise.all(updates);
            }

            const updatedData = {
              ...productToUpdate,
              name: name,
              price: price.toString(),
              image: images[0],
              images: images,
              description: description,
              category: category,
              stock: stockCount,
              order: updatedOrder,
              isDupla: isDupla
            };
            const result = await window.dataSdk.update(updatedData);
            if (!result.isOk) throw new Error('Erro ao atualizar produto');
          }
        } else {
          const id = Date.now().toString();
          // Se posição não for preenchida, vai para o final (products.length)
          let newOrder = isNaN(position) || position <= 0 ? currentProducts.length : position - 1;
          
          // Se inseriu em uma posição existente, empurra os outros para baixo
          if (newOrder < currentProducts.length) {
            const updates = currentProducts.filter(p => p.order >= newOrder).map(p => {
              return window.dataSdk.update({ ...p, order: (p.order || 0) + 1 });
            });
            await Promise.all(updates);
          }
          
          const result = await window.dataSdk.create({
            id: id,
            name: name,
            price: price.toString(),
            image: images[0],
            images: images,
            description: description,
            category: category,
            stock: stockCount,
            order: newOrder,
            isDupla: isDupla,
            data_type: 'product'
          });
          if (!result.isOk) throw new Error('Erro ao criar produto');
        }

        setButtonState(btn, 'success');
        
        // O Firebase disparará o listener 'onDataChanged' automaticamente, 
        // mas chamamos explicitamente para garantir feedback imediato na UI.
        if (typeof renderProducts === 'function') renderProducts();
        if (typeof renderAdminProducts === 'function') renderAdminProducts();
        
        setTimeout(() => {
          closeProductModal();
          // Pequeno delay para garantir que o modal fechou antes de limpar estados se necessário
        }, 1500);
      } catch (error) {
        console.error('Erro ao salvar produto:', error);
        setButtonState(btn, 'normal');
        showToastNoPopup('Erro ao salvar produto', 'error');
      }
    }

    function editProduct(productId) {
      const product = products.find(p => p.id === productId);
      if (!product) return;

      isEditingProduct = true;
      currentEditingProductId = productId;
      document.getElementById('productModalTitle').textContent = 'Editar Produto';
      const productCats = product.category ? product.category.split(',').map(c => c.trim()) : [];
      selectedProductCategories = productCats.filter(c => c !== '');
      renderSelectedCategories();
      document.getElementById('modal-product-category').value = '';
      document.getElementById('modal-product-name').value = product.name;
      document.getElementById('modal-product-position').value = (product.order !== undefined) ? (product.order + 1) : '';
      document.getElementById('modal-product-price').value = product.price;
      document.getElementById('modal-product-is-dupla').checked = !!product.isDupla;
      
      resetImageFields();
      const prodImages = (product.images && product.images.length > 0) ? product.images : (product.image ? [product.image] : []);
      prodImages.forEach((url, index) => {
        if (index === 0) {
          document.getElementById('modal-product-image-1').value = url;
        } else {
          addImageField(url);
        }
      });
      
      document.getElementById('modal-product-description').value = product.description;
      document.getElementById('modal-product-stock-count').value = product.stock || 0;

      document.getElementById('productModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    async function toggleStockStatus(backendId) {
      try {
        const product = currentDBProducts.find(p => p.__backendId === backendId);
        if (product) {
          const btn = event.target.closest('.admin-toggle-stock-btn');
          if (btn) {
            btn.classList.add('loading');
            btn.disabled = true;
          }

          const newStock = (parseInt(product.stock) || 0) <= 0 ? 1 : 0;
          product.stock = newStock;
          const result = await window.dataSdk.update(product);
          if (!result.isOk) throw new Error('Erro ao atualizar estoque');
          
          showToastNoPopup(newStock === 0 ? 'Produto desativado!' : 'Produto ativado!', 'success');
          
          // Força a atualização da UI imediatamente
          renderProducts();
          renderAdminProducts();
        }
      } catch (error) {
        console.error('Erro ao atualizar estoque:', error);
        showToastNoPopup('Erro ao atualizar estoque', 'error');
        const btn = event.target.closest('.admin-toggle-stock-btn');
        if (btn) {
          btn.classList.remove('loading');
          btn.disabled = false;
        }
      }
    }

    function openDeleteProductConfirm(backendId) {
      pendingDeleteProductId = backendId;
      document.getElementById('deleteProductModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeDeleteProductConfirm() {
      document.getElementById('deleteProductModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      pendingDeleteProductId = null;
    }

    function closeDeleteUserConfirm() {
      document.getElementById('deleteUserModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      pendingDeleteUserId = null;
    }

    async function confirmDeleteProduct() {
      if (!pendingDeleteProductId) return;
      
      try {
        const productToDelete = currentDBProducts.find(p => p.__backendId === pendingDeleteProductId);
        if (productToDelete) {
          const result = await window.dataSdk.delete(productToDelete);
          if (!result.isOk) throw new Error('Erro ao deletar');
          showToastNoPopup('Produto deletado com sucesso!', 'success');
          
          // Força a atualização da UI imediatamente
          renderProducts();
          renderAdminProducts();
        }
        closeDeleteProductConfirm();
      } catch (error) {
        console.error('Erro ao deletar:', error);
        showToastNoPopup('Erro ao deletar produto', 'error');
      }
    }

    function openDeleteCategoryConfirm(backendId) {
      pendingDeleteCategoryId = backendId;
      document.getElementById('deleteCategoryModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeDeleteCategoryConfirm() {
      document.getElementById('deleteCategoryModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      pendingDeleteCategoryId = null;
    }

    async function confirmDeleteCategory() {
      if (!pendingDeleteCategoryId) return;
      
      try {
        const categoryToDelete = currentDBCategories.find(c => c.__backendId === pendingDeleteCategoryId);
        if (categoryToDelete) {
          const result = await window.dataSdk.delete(categoryToDelete);
          if (!result.isOk) throw new Error('Erro ao deletar');
          showToastNoPopup('Categoria deletada com sucesso!', 'success');
          
          // Força a atualização da UI imediatamente
          renderCategories();
          renderAdminCategories();
          renderAdminOrders();
      loadFirebaseConfigToUI();
          updateCategorySelect();
        }
        closeDeleteCategoryConfirm();
      } catch (error) {
        console.error('Erro ao deletar:', error);
        showToastNoPopup('Erro ao deletar categoria', 'error');
      }
    }

    function openDuplicateModal(productId) {
      pendingDuplicateProductId = productId;
      const product = products.find(p => p.id === productId);
      if (product) {
        document.getElementById('duplicate-product-name').value = `${product.name} (Cópia)`;
        document.getElementById('duplicateModal').classList.add('active');
        document.body.classList.add('modal-open');
        document.getElementById('duplicate-product-name').focus();
        document.getElementById('duplicate-product-name').select();
      }
    }

    function closeDuplicateModal() {
      document.getElementById('duplicateModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      pendingDuplicateProductId = null;
      document.getElementById('duplicate-product-name').value = '';
    }

    async function confirmDuplicate() {
      if (!pendingDuplicateProductId) return;
      
      const newName = document.getElementById('duplicate-product-name').value.trim();
      if (!newName) {
        showToastNoPopup('Digite um nome para o produto', 'error');
        return;
      }

      const product = products.find(p => p.id === pendingDuplicateProductId);
      if (!product) return;

      try {
        const id = Date.now().toString();
        const result = await window.dataSdk.create({
          id,
          name: newName,
          price: product.price.toString(),
          image: product.image,
          description: product.description,
          category: product.category,
          stock: 1,
          order: products.length,
          isDupla: !!product.isDupla,
          data_type: 'product'
        });
        if (!result.isOk) throw new Error('Erro ao duplicar produto');
        showToastNoPopup('Produto duplicado com sucesso!', 'success');
        
        // Força a atualização da UI imediatamente
        renderProducts();
        renderAdminProducts();
        
        closeDuplicateModal();
      } catch (error) {
        console.error('Erro ao duplicar:', error);
        showToastNoPopup('Erro ao duplicar produto', 'error');
      }
    }

    function openAddCategoryModal() {
      isEditingCategory = false;
      currentEditingCategoryId = null;
      document.getElementById('categoryModalTitle').textContent = 'Adicionar Categoria';
      document.getElementById('modal-category-name').value = '';
      document.getElementById('categoryModal').classList.add('active');
      document.body.classList.add('modal-open');
      document.getElementById('modal-category-name').focus();
    }

    function closeCategoryModal() {
      document.getElementById('categoryModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      isEditingCategory = false;
      currentEditingCategoryId = null;
    }

    function renderAdminOrders() {
      const list = document.getElementById('orders-list');
      if (!list) return;
      
      const searchTerm = document.getElementById('order-search')?.value.toLowerCase() || '';
      const statusFilter = document.getElementById('order-status-filter')?.value || 'all';
      const periodFilter = document.getElementById('order-period-filter')?.value || 'all';
      
      let orderItems = (orders || []).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
      
      const now = new Date();
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      const oneMonthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());

      // Aplicar filtros
      orderItems = orderItems.filter(order => {
        const orderDate = new Date(order.createdAt);
        const matchesSearch = order.customer.name.toLowerCase().includes(searchTerm);
        const matchesStatus = statusFilter === 'all' || order.status === statusFilter;
        
        let matchesPeriod = true;
        if (periodFilter === 'day') {
          matchesPeriod = orderDate >= today;
        } else if (periodFilter === 'week') {
          matchesPeriod = orderDate >= oneWeekAgo;
        } else if (periodFilter === 'month') {
          matchesPeriod = orderDate >= oneMonthAgo;
        }
        
        return matchesSearch && matchesStatus && matchesPeriod;
      });
      
      if (orderItems.length === 0) {
        list.innerHTML = `<p class="text-gray-500 text-sm text-center py-8">${searchTerm || statusFilter !== 'all' || periodFilter !== 'all' ? 'Nenhum pedido encontrado para os filtros aplicados' : 'Nenhum pedido realizado'}</p>`;
        return;
      }

      list.innerHTML = orderItems.map(order => {
        // Tenta pegar a imagem do primeiro item do pedido
        const firstItemImage = order.items && order.items.length > 0 ? order.items[0].image : '';
        
        return `
          <div class="admin-list-item"><div class="admin-checkbox-wrapper flex items-center gap-3 px-2"><input type="checkbox" class="bulk-checkbox order-checkbox" data-id="${order.__backendId}" onchange="updateBulkBar(\'orders\')"></div>
            <div class="flex items-center gap-4 flex-1">
              <div class="w-12 h-12 rounded-lg bg-gray-100 flex-shrink-0 overflow-hidden border border-gray-100">
                ${firstItemImage ? 
                  `<img src="${firstItemImage}" class="w-full h-full object-cover" onerror="this.src='https://via.placeholder.com/50?text=📦'">` : 
                  `<div class="w-full h-full flex items-center justify-center text-xl">📦</div>`
                }
              </div>
              <div class="admin-list-info">
                <div class="admin-list-title">${order.customer.name}</div>
                <div class="admin-list-subtitle">
                  <span>${new Date(order.createdAt).toLocaleString('pt-BR')}</span> • 
                  <span class="text-[var(--primary-color)] font-bold">R$ ${order.total.toFixed(2).replace('.', ',')}</span>
                  <span class="ml-2 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase ${order.status === 'paid' ? 'bg-green-100 text-[var(--primary-color)]' : 'bg-yellow-100 text-yellow-600'}">
                    ${order.status === 'paid' ? 'Pago' : 'Pendente'}
                  </span>
                </div>
              </div>
            </div>
            <div class="admin-list-actions mt-4 md:mt-0">
              <button onclick="openOrderDetailModal('${order.__backendId}')" class="admin-view-btn px-3 py-2 flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                Ver
              </button>
              <button onclick="downloadSingleOrderPDF(\'${order.__backendId}\')" class="admin-view-btn px-3 py-2 flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                PDF
              </button>
              <button onclick="confirmPayment('${order.__backendId}')" class="admin-confirm-btn px-3 py-2" ${order.status === 'paid' ? 'disabled' : ''}>${order.status === 'paid' ? 'Pago' : 'Confirmar Pag.'}</button>
              <button onclick="deleteOrder('${order.__backendId}')" class="admin-delete-btn px-3 py-2 flex items-center gap-1">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Excluir
              </button>
            </div>
          </div>
        `;
      }).join('');
    }

    async function downloadOrdersPDF() {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      
      const searchTerm = document.getElementById('order-search')?.value.toLowerCase() || '';
      const statusFilter = document.getElementById('order-status-filter')?.value || 'all';
      const periodFilter = document.getElementById('order-period-filter')?.value || 'all';
      
      let filteredOrders = (orders || []).sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
      
      const now = new Date();
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      const oneMonthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());

      filteredOrders = filteredOrders.filter(order => {
        const orderDate = new Date(order.createdAt);
        const matchesSearch = order.customer.name.toLowerCase().includes(searchTerm);
        const matchesStatus = statusFilter === 'all' || order.status === statusFilter;
        let matchesPeriod = true;
        if (periodFilter === 'day') matchesPeriod = orderDate >= today;
        else if (periodFilter === 'week') matchesPeriod = orderDate >= oneWeekAgo;
        else if (periodFilter === 'month') matchesPeriod = orderDate >= oneMonthAgo;
        return matchesSearch && matchesStatus && matchesPeriod;
      });

      if (filteredOrders.length === 0) {
        showToastNoPopup('Nenhum pedido para exportar com os filtros atuais.', 'error');
        return;
      }

      showToastNoPopup('Gerando PDF com imagens, aguarde...', 'info');

      // Função auxiliar para carregar imagem e converter para Base64
      const getBase64Image = (url) => {
        return new Promise((resolve) => {
          if (!url) return resolve(null);
          const img = new Image();
          img.setAttribute('crossOrigin', 'anonymous');
          img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            const isPng = url.toLowerCase().endsWith('.png') || url.startsWith('data:image/png');
            resolve(canvas.toDataURL(isPng ? 'image/png' : 'image/jpeg', 0.8));
          };
          img.onerror = () => resolve(null);
          img.src = url;
        });
      };

      doc.setFontSize(18);
      doc.text('Relatório de Pedidos - ZaapStore', 14, 20);
      doc.setFontSize(10);
      doc.text(`Gerado em: ${new Date().toLocaleString('pt-BR')}`, 14, 28);
      doc.text(`Filtros: Busca: "${searchTerm || 'Nenhuma'}", Status: ${statusFilter}, Período: ${periodFilter}`, 14, 34);

      const tableData = [];
      const images = [];

      for (const order of filteredOrders) {
        const firstItemImage = order.items && order.items.length > 0 ? order.items[0].image : null;
        const base64 = await getBase64Image(firstItemImage);
        
        const addr = order.address || {};
        const addressStr = `${addr.street || ''}, ${addr.number || ''}${addr.complement ? ' - ' + addr.complement : ''}\n${addr.neighborhood || ''}, ${addr.city || ''} - ${addr.state || ''}\nCEP: ${addr.cep || ''}`;

        tableData.push([
          '', // Espaço para a imagem
          new Date(order.createdAt).toLocaleString('pt-BR'),
          `${order.customer.name}\n${order.customer.phone || ''}`,
          addressStr,
          `R$ ${order.total.toFixed(2).replace('.', ',')}`,
          order.status === 'paid' ? 'Pago' : 'Pendente',
          order.items.map(item => `${item.quantity}x ${item.name}`).join('\n')
        ]);
        images.push(base64);
      }

      doc.autoTable({
        startY: 40,
        head: [['Foto', 'Data', 'Cliente', 'Endereço', 'Total', 'Status', 'Itens']],
        body: tableData,
        theme: 'grid',
        headStyles: { 
          fillColor: [242, 86, 193], 
          cellPadding: 1, 
          minCellHeight: 6,
          halign: 'center'
        },
        styles: { 
          fontSize: 7, 
          cellPadding: 2, 
          minCellHeight: 20, 
          verticalAlign: 'middle',
          halign: 'center'
        },
        columnStyles: { 
          0: { cellWidth: 18, halign: 'center' },
          1: { halign: 'center' },
          2: { cellWidth: 25, halign: 'center' },
          3: { cellWidth: 45, halign: 'center' },
          4: { halign: 'center' },
          5: { halign: 'center' },
          6: { cellWidth: 40, halign: 'center' } 
        },
        didDrawCell: (data) => {
          if (data.section === 'body' && data.column.index === 0 && images[data.row.index]) {
            const imgData = images[data.row.index];
            const imgFormat = imgData && imgData.includes('image/png') ? 'PNG' : 'JPEG';
            if (imgData) doc.addImage(imgData, imgFormat, data.cell.x + 2, data.cell.y + 2, 16, 16);
          }
        }
      });

      // Corrigido para preservar transparência no download geral também
      doc.save(`pedidos_anna_home_decor_${new Date().getTime()}.pdf`);
      showToastNoPopup('PDF gerado com sucesso!', 'success');
    }

    
    async function downloadSingleOrderPDF(orderId) {
      const order = orders.find(o => o.__backendId === orderId);
      if (!order) {
        showToastNoPopup('Pedido não encontrado.', 'error');
        return;
      }

      const { jsPDF } = window.jspdf;
      const doc = new jsPDF();
      
      showToastNoPopup('Gerando PDF do pedido, aguarde...', 'info');

      const getBase64Image = (url) => {
        return new Promise((resolve) => {
          if (!url) return resolve(null);
          const img = new Image();
          img.setAttribute('crossOrigin', 'anonymous');
          img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            const isPng = url.toLowerCase().endsWith('.png') || url.startsWith('data:image/png');
            resolve(canvas.toDataURL(isPng ? 'image/png' : 'image/jpeg', 0.8));
          };
          img.onerror = () => resolve(null);
          img.src = url;
        });
      };

      // Header with Logo
      const logoUrl = storeConfig.logo_url;
      if (logoUrl) {
        const logoBase64 = await getBase64Image(logoUrl);
        if (logoBase64) {
          const logoFormat = logoBase64.includes('image/png') ? 'PNG' : 'JPEG';
          doc.addImage(logoBase64, logoFormat, 14, 10, 40, 15);
        }
      }

      doc.setFontSize(20);
      doc.setTextColor(242, 86, 193); // Pink color
      doc.text('Relatório de Pedido', 105, 20, { align: 'center' });
      
      doc.setDrawColor(242, 86, 193);
      doc.line(14, 30, 196, 30);

      // Customer Info
      doc.setFontSize(12);
      doc.setTextColor(0, 0, 0);
      doc.setFont("helvetica", "bold");
      doc.text('Informações do Cliente', 14, 40);
      
      doc.setFont("helvetica", "normal");
      doc.setFontSize(10);
      doc.text(`Nome: ${order.customer.name}`, 14, 47);
      doc.text(`Contato: ${order.customer.phone}`, 14, 53);
      doc.text(`Data da Compra: ${new Date(order.createdAt).toLocaleString('pt-BR')}`, 14, 59);
      
      const addr = order.address || {};
      const addressStr = `${addr.street || ''}, ${addr.number || ''}${addr.complement ? ' - ' + addr.complement : ''}, ${addr.neighborhood || ''}, ${addr.city || ''} - ${addr.state || ''} | CEP: ${addr.cep || ''}`;
      
      doc.setFont("helvetica", "bold");
      doc.text('Endereço Completo:', 14, 67);
      doc.setFont("helvetica", "normal");
      doc.text(doc.splitTextToSize(addressStr, 180), 14, 73);

      // Table of Products
      const tableData = [];
      const productImages = [];
      
      for (const item of order.items) {
        const base64 = await getBase64Image(item.image);
        const subtotal = item.price * item.quantity;
        // Verifica se é dupla no item do pedido ou tenta buscar no produto original se necessário
        const isDupla = item.isDupla === true || item.isDupla === 'true';
        const isDuplaText = isDupla ? " (Oferta)" : "";
        
        tableData.push([
          '', // Space for image
          (item.name || item.description || 'Produto') + isDuplaText,
          item.quantity,
          `R$ ${item.price.toFixed(2).replace('.', ',')}`,
          `R$ ${subtotal.toFixed(2).replace('.', ',')}`
        ]);
        productImages.push(base64);
      }

      doc.autoTable({
        startY: 85,
        head: [['Foto', 'Descrição do Produto', 'Qtd', 'Vlr. Unit.', 'Vlr. Total']],
        body: tableData,
        theme: 'grid',
        headStyles: { 
          fillColor: [242, 86, 193], 
          cellPadding: 2, 
          minCellHeight: 8,
          halign: 'center'
        },
        styles: { 
          fontSize: 9, 
          cellPadding: 4, 
          minCellHeight: 25, 
          verticalAlign: 'middle',
          halign: 'center'
        },
        columnStyles: { 
          0: { cellWidth: 25, halign: 'center' },
          1: { cellWidth: 80, halign: 'center' },
          2: { cellWidth: 15, halign: 'center' },
          3: { cellWidth: 30, halign: 'center' },
          4: { cellWidth: 30, halign: 'center' }
        },
        didDrawCell: (data) => {
          if (data.section === 'body' && data.column.index === 0 && productImages[data.row.index]) {
            const imgData = productImages[data.row.index];
            const imgFormat = imgData.includes('image/png') ? 'PNG' : 'JPEG';
            doc.addImage(imgData, imgFormat, data.cell.x + 2, data.cell.y + 2, 20, 20);
          }
        }
      });

      // Total Summation
      const finalY = doc.lastAutoTable.finalY + 10;
      doc.setDrawColor(200, 200, 200);
      doc.line(14, finalY, 196, finalY);
      
      doc.setFontSize(14);
      doc.setFont("helvetica", "bold");
      doc.text('VALOR TOTAL DO PEDIDO:', 120, finalY + 15, { align: 'right' });
      
      doc.setFillColor(242, 86, 193);
      doc.rect(125, finalY + 7, 70, 12, 'F');
      doc.setTextColor(255, 255, 255);
      doc.text(`R$ ${order.total.toFixed(2).replace('.', ',')}`, 160, finalY + 15, { align: 'center' });
      


      doc.save(`pedido_${order.customer.name.replace(/\s+/g, '_')}_${new Date().getTime()}.pdf`);
      showToastNoPopup('PDF do pedido gerado com sucesso!', 'success');
    }

    async function confirmPayment(orderId) {
      if (!confirm('Tem certeza que deseja marcar este pedido como pago?')) return;

      const order = orders.find(o => o.__backendId === orderId);
      if (!order) {
        showToastNoPopup('Pedido não encontrado.', 'error');
        return;
      }

      
      order.status = 'paid';

      try {
        // Baixa de estoque
        if (order.items && order.items.length > 0) {
          for (const item of order.items) {
            const product = currentDBProducts.find(p => p.id === item.id || p.__backendId === item.id);
            if (product) {
              const currentStock = parseInt(product.stock) || 0;
              const quantityToReduce = parseInt(item.quantity) || 0;
              product.stock = Math.max(0, currentStock - quantityToReduce);
              await window.dataSdk.update(product);
            }
          }
        }

        const result = await storeManager.update(order);

        if (result.isOk) {
          showToastNoPopup('Pagamento confirmado com sucesso!', 'success');
          renderAdminOrders();
      loadFirebaseConfigToUI(); // Re-renderiza a lista de pedidos
        } else {
          showToastNoPopup('Erro ao confirmar pagamento.', 'error');
          order.status = 'pending'; // Reverte a alteração em caso de erro
        }
      } catch (e) {
        console.error('Erro ao confirmar pagamento:', e);
        showToastNoPopup('Erro ao confirmar pagamento.', 'error');
        order.status = 'pending'; // Reverte a alteração em caso de erro
      }
    }

    function openOrderDetailModal(orderId) {
      const order = orders.find(o => o.__backendId === orderId);
      if (!order) return;

      const detailContent = document.getElementById('order-detail-content');
      
      const itemsHtml = order.items.map(item => `
        <div class="flex justify-between items-center py-2 border-b border-gray-100 last:border-0">
          <div>
            <div class="font-bold text-gray-900">${item.name}</div>
            <div class="text-xs text-gray-500">${item.quantity}x R$ ${item.price.toFixed(2).replace('.', ',')}</div>
          </div>
          <div class="font-bold text-[var(--primary-color)]">R$ ${(item.price * item.quantity).toFixed(2).replace('.', ',')}</div>
        </div>
      `).join('');

      detailContent.innerHTML = `
        <div class="bg-gray-50 p-4 rounded-xl space-y-2">
          <p class="text-sm text-gray-600"><strong>Cliente:</strong> ${order.customer.name}</p>
          <p class="text-sm text-gray-600"><strong>Telefone:</strong> ${order.customer.phone}</p>
          <p class="text-sm text-gray-600"><strong>Data:</strong> ${new Date(order.createdAt).toLocaleString('pt-BR')}</p>
        </div>
        
        <div>
          <h4 class="font-bold text-gray-900 mb-2">Endereço de Entrega</h4>
          <div class="bg-gray-50 p-4 rounded-xl text-sm text-gray-600">
            <p>${order.address.street}, ${order.address.number}</p>
            ${order.address.complement ? `<p>${order.address.complement}</p>` : ''}
            <p>${order.address.neighborhood}, ${order.address.city} - ${order.address.state}</p>
            <p>CEP: ${order.address.cep}</p>
          </div>
        </div>

        <div>
          <h4 class="font-bold text-gray-900 mb-2">Itens do Pedido</h4>
          <div class="bg-white border border-gray-100 rounded-xl p-4">
            ${itemsHtml}
            <div class="flex justify-between items-center mt-4 pt-4 border-t border-gray-200">
              <span class="text-lg font-bold text-gray-900">Total</span>
              <span class="text-2xl font-bold text-[var(--primary-color)]">R$ ${order.total.toFixed(2).replace('.', ',')}</span>
            </div>
          </div>
        </div>
      `;

      document.getElementById('orderDetailModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeOrderDetailModal() {
      document.getElementById('orderDetailModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    
    async function clearOrdersHistory() {
      if (confirm('ATENÇÃO: Isso apagará TODO o histórico de pedidos permanentemente do banco de dados. Deseja continuar?')) {
        try {
          showToastNoPopup('Iniciando limpeza...', 'info');
          let deletedCount = 0;
          
          // Precisamos iterar e deletar um por um pois o SDK geralmente deleta por ID
          for (const order of orders) {
            const result = await window.dataSdk.delete({ __backendId: order.__backendId });
            if (result.isOk) {
              deletedCount++;
            }
          }
          
          orders = [];
          renderAdminOrders();
      loadFirebaseConfigToUI();
          showToastNoPopup(`${deletedCount} pedidos removidos com sucesso!`, 'success');
        } catch (error) {
          console.error('Erro ao zerar histórico:', error);
          showToastNoPopup('Erro ao zerar histórico de pedidos.', 'error');
        }
      }
    }

    async function deleteOrder(backendId) {
      if (confirm('Tem certeza que deseja excluir este pedido?')) {
        try {
          const result = await window.dataSdk.delete({ __backendId: backendId });
          if (result.isOk) {
            // Remove o pedido da lista local imediatamente
            orders = orders.filter(o => o.__backendId !== backendId);
            // Re-renderiza a lista de pedidos
            renderAdminOrders();
      loadFirebaseConfigToUI();
            showToastNoPopup('Pedido excluído com sucesso!', 'success');
          } else {
            showToastNoPopup('Erro ao excluir pedido.', 'error');
          }
        } catch (error) {
          console.error('Erro ao excluir pedido:', error);
          showToastNoPopup('Erro ao excluir pedido.', 'error');
        }
      }
    }

    async function saveCategory() {
      const btn = document.getElementById('category-save-btn');
      const name = document.getElementById('modal-category-name').value.trim();

      if (!name) {
        showToastNoPopup('Preencha o nome da categoria', 'error');
        return;
      }

      setButtonState(btn, 'saving');

      try {
        if (isEditingCategory && currentEditingCategoryId) {
          const categoryToUpdate = currentDBCategories.find(c => c.__backendId === currentEditingCategoryId);
          if (categoryToUpdate) {
            categoryToUpdate.category_name = name;
            const result = await window.dataSdk.update(categoryToUpdate);
            if (!result.isOk) throw new Error('Erro ao atualizar categoria');
          }
        } else {
          const result = await window.dataSdk.create({
            category_name: name,
            data_type: 'category'
          });
          if (!result.isOk) throw new Error('Erro ao criar categoria');
        }

        setButtonState(btn, 'success');
        
        // Força a atualização da UI imediatamente
        renderCategories();
        renderAdminCategories();
        renderAdminOrders();
      loadFirebaseConfigToUI();
        updateCategorySelect();
        
        setTimeout(() => {
          closeCategoryModal();
        }, 2000);
      } catch (error) {
        console.error('Erro ao salvar categoria:', error);
        setButtonState(btn, 'normal');
        showToastNoPopup('Erro ao salvar categoria', 'error');
      }
    }

    function editCategory(categoryId) {
      const category = categories.find(c => c.__backendId === categoryId);
      if (!category) return;

      isEditingCategory = true;
      currentEditingCategoryId = categoryId;
      document.getElementById('categoryModalTitle').textContent = 'Editar Categoria';
      document.getElementById('modal-category-name').value = category.name;

      document.getElementById('categoryModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function openAddUserModal() {
      isEditingUser = false;
      currentEditingUserId = null;
      document.getElementById('userModalTitle').textContent = 'Adicionar Usuário';
      document.getElementById('modal-user-username').value = '';
      document.getElementById('modal-user-password').value = '';
      document.getElementById('modal-user-password').type = 'password';
      document.getElementById('user-eye-icon').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
      document.getElementById('modal-user-role').value = 'admin';
      document.getElementById('userModal').classList.add('active');
      document.body.classList.add('modal-open');
      document.getElementById('modal-user-username').focus();
    }

    function closeUserModal() {
      document.getElementById('userModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      isEditingUser = false;
      currentEditingUserId = null;
    }

    async function saveUser() {
      const btn = document.getElementById('user-save-btn');
      const username = document.getElementById('modal-user-username').value.trim();
      const password = document.getElementById('modal-user-password').value.trim();
      const role = document.getElementById('modal-user-role').value;

      if (!username || !password || !role) {
        showToastNoPopup('Preencha todos os campos', 'error');
        return;
      }

      setButtonState(btn, 'saving');

      try {
        if (isEditingUser && currentEditingUserId) {
          const userToUpdate = users.find(u => u.__backendId === currentEditingUserId && u.data_type === 'user');
          if (userToUpdate) {
            userToUpdate.username = username;
            userToUpdate.password = password;
            userToUpdate.role = role;
            const result = await window.dataSdk.update(userToUpdate);
            if (!result.isOk) throw new Error('Erro ao atualizar usuário');
          }
        } else {
          const result = await window.dataSdk.create({
            username,
            password,
            role,
            active: true,
            data_type: 'user'
          });
          if (!result.isOk) throw new Error('Erro ao criar usuário');
        }

        setButtonState(btn, 'success');
        
        // Força a atualização da UI imediatamente
        renderAdminUsers();
        
        setTimeout(() => {
          closeUserModal();
        }, 2000);
      } catch (error) {
        console.error('Erro ao salvar usuário:', error);
        setButtonState(btn, 'normal');
        showToastNoPopup('Erro ao salvar usuário', 'error');
      }
    }

    function viewUserCredentials(userId) {
      const user = users.find(u => u.__backendId === userId && u.data_type === 'user');
      if (!user) return;
      
      document.getElementById('view-username').textContent = user.username;
      document.getElementById('view-password-raw').value = user.password;
      document.getElementById('view-password').textContent = '••••••••';
      document.getElementById('view-password-eye').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
      
      document.getElementById('viewUserModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeViewUserModal() {
      document.getElementById('viewUserModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    function toggleViewPassword() {
      const passEl = document.getElementById('view-password');
      const rawPass = document.getElementById('view-password-raw').value;
      const eyeIcon = document.getElementById('view-password-eye');
      
      if (passEl.textContent === '••••••••') {
        passEl.textContent = rawPass;
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l18 18" />';
      } else {
        passEl.textContent = '••••••••';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
      }
    }

    function copyAllCredentials(btn) {
      const user = document.getElementById('view-username').textContent;
      const pass = document.getElementById('view-password-raw').value;
      const link = 'annahomedecor.ondigital.art.br';
      
      const textToCopy = `Dados de Acesso:\nUsuário: ${user}\nSenha: ${pass}\nLink: ${link}`;
      
      navigator.clipboard.writeText(textToCopy).then(() => {
        const overlay = btn.querySelector('.copy-success-overlay');
        overlay.style.transform = 'translateY(0)';
        
        setTimeout(() => {
          overlay.style.transform = 'translateY(100%)';
        }, 2000);
        
        showToastNoPopup('Dados copiados com sucesso!', 'success');
      }).catch(err => {
        console.error('Erro ao copiar:', err);
        showToastNoPopup('Erro ao copiar dados', 'error');
      });
    }

    function editUser(userId) {
      const user = users.find(u => u.__backendId === userId && u.data_type === 'user');
      if (!user) return;

      isEditingUser = true;
      currentEditingUserId = userId;
      document.getElementById('userModalTitle').textContent = 'Editar Usuário';
      document.getElementById('modal-user-username').value = user.username;
      document.getElementById('modal-user-password').value = user.password;
      document.getElementById('modal-user-password').type = 'password';
      document.getElementById('user-eye-icon').innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
      document.getElementById('modal-user-role').value = user.role;

      document.getElementById('userModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    async function toggleUserStatus(userId) {
      try {
        const user = users.find(u => u.__backendId === userId && u.data_type === 'user');
        if (user) {
          const newStatus = user.active === false ? true : false;
          user.active = newStatus;
          const result = await window.dataSdk.update(user);
          if (!result.isOk) throw new Error('Erro ao atualizar status');
          
          showToastNoPopup(newStatus === false ? 'Usuário desativado!' : 'Usuário ativado!', 'success');
          
          // Força a atualização da UI imediatamente
          renderAdminUsers();
        }
      } catch (error) {
        console.error('Erro ao atualizar usuário:', error);
        showToastNoPopup('Erro ao atualizar usuário', 'error');
      }
    }

    function openDeleteUserConfirm(userId) {
      pendingDeleteUserId = userId;
      document.getElementById('deleteUserModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    async function confirmDeleteUser() {
      if (!pendingDeleteUserId) return;
      
      try {
        const user = users.find(u => u.__backendId === pendingDeleteUserId && u.data_type === 'user');
        if (user) {
          const result = await window.dataSdk.delete(user);
          if (!result.isOk) throw new Error('Erro ao deletar usuário');
          showToastNoPopup('Usuário deletado com sucesso!', 'success');
          
          // Força a atualização da UI imediatamente
          renderAdminUsers();
          
          closeDeleteUserConfirm();
        }
      } catch (error) {
        console.error('Erro ao deletar:', error);
        showToastNoPopup('Erro ao deletar usuário', 'error');
      }
      pendingDeleteUserId = null;
    }

    function setButtonState(btn, state) {
      btn.classList.remove('btn-saving', 'btn-success');
      if (state === 'saving') {
        btn.classList.add('btn-saving');
        btn.disabled = true;
      } else if (state === 'success') {
        btn.classList.add('btn-success');
        btn.disabled = true;
        setTimeout(() => {
          btn.classList.remove('btn-success');
          btn.disabled = false;
        }, 2000);
      } else if (state === 'normal') {
        btn.disabled = false;
      }
    }

    let toastTimeout;
function showToastNoPopup(message, type = 'info') { // Default para 'info' para mensagens gerais
      const toast = document.getElementById('toast-notification');
      const messageEl = document.getElementById('toast-message');
      const iconEl = toast.querySelector('.toast-icon');
      
      if (!toast || !messageEl || !iconEl) return; // Garante que os elementos existam

      // Limpar timeout anterior se existir
      if (toastTimeout) clearTimeout(toastTimeout);
      
      messageEl.textContent = message;
      toast.classList.remove('success', 'error', 'info', 'warning', 'show'); // Limpa classes anteriores
      iconEl.innerHTML = ''; // Limpa o ícone anterior

      let iconPath = '';
      switch (type) {
        case 'success':
        case 'import_success': // Mantém compatibilidade
          toast.classList.add('success');
          iconPath = '<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />'; // Checkmark
          break;
        case 'error':
          toast.classList.add('error');
          iconPath = '<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />'; // X mark
          break;
        case 'warning':
          toast.classList.add('warning');
          iconPath = '<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />'; // Exclamation
          break;
        case 'info':
        default:
          toast.classList.add('info');
          iconPath = '<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'; // Info circle
          break;
      }
      iconEl.innerHTML = iconPath;
      
      // Exibe o toast com animação
      toast.classList.add('show');

      toastTimeout = setTimeout(() => {
        toast.classList.remove('show');
      }, 3000); // Esconde o toast após 3 segundos
    }

    function toggleMenu() {
      const sidebar = document.getElementById('menu-sidebar');
      const overlay = document.getElementById('menu-overlay');
      
      sidebar.classList.toggle('active');
      overlay.classList.toggle('hidden');
      document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }

    function toggleCart() {
      const sidebar = document.getElementById('cart-sidebar');
      const overlay = document.getElementById('cart-overlay');
      
      sidebar.classList.toggle('active');
      overlay.classList.toggle('hidden');
      document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
    }

    function footerWhatsapp() {
      if (storeConfig.whatsapp_group && storeConfig.whatsapp_group.trim() !== '') {
        let url = storeConfig.whatsapp_group.trim();
        if (!url.startsWith('http://') && !url.startsWith('https://')) {
          url = 'https://' + url;
        }
        window.open(url, '_blank');
      }
    }

    function checkRememberedLogin() {
      const remembered = localStorage.getItem('annaStoreRememberMe');
      if (remembered) {
        try {
          const data = JSON.parse(remembered);
          const now = new Date().getTime();
          const dayInMs = 24 * 60 * 60 * 1000;
          
          if (now - data.timestamp < dayInMs * 7) {
            const user = users.find(u => u.username === data.username && u.data_type === 'user' && u.active !== false);
            if (user) {
              isAuthenticated = true;
              currentUser = data.username;
              openAdminDashboard();
              loadAdminValues();
            }
          } else {
            localStorage.removeItem('annaStoreRememberMe');
          }
        } catch (e) {
          localStorage.removeItem('annaStoreRememberMe');
        }
      }
    }

    document.getElementById('floating-settings-btn').addEventListener('click', function() {
      if (isAuthenticated) {
        openAdminDashboard();
      } else {
        document.getElementById('loginModal').classList.add('active');
      document.body.classList.add('modal-open');
      }
    });

    window.addEventListener('scroll', () => {
      const header = document.querySelector('.header');
      if (window.scrollY > 50) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });

    
    window.addEventListener('load', async () => {
      try {
          await initDataSDK();
          loadData();
          updateStoreUI();
          setTimeout(() => {
            checkRememberedLogin();
          }, 1500);
      } catch (e) {
          console.error("Load Error:", e);
          if (typeof hideLoadingScreen === 'function') hideLoadingScreen();
              orders = dataArray.filter(item => item.data_type === 'order');
      }
    });

  
    function openProductDetail(productId) {
      const product = products.find(p => p.id === productId);
      if (!product) return;
      
      const prodImages = (product.images && product.images.length > 0) ? product.images : (product.image ? [product.image] : []);
      const content = document.getElementById('product-detail-content');
      
      content.innerHTML = `
        <div class="relative">
          <button onclick="closeProductDetailModal()" class="absolute top-4 right-4 z-20 bg-white/80 backdrop-blur-sm p-2 rounded-full shadow-lg hover:bg-white transition-all">
            <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          
          <div class="relative overflow-hidden group">
            <div id="detail-slider" class="flex transition-transform duration-500 ease-out" style="width: ${prodImages.length * 100}%;">
              ${prodImages.map(img => `
                <div class="w-full aspect-square bg-gray-100">
                  <img src="${img}" class="w-full h-full object-cover">
                </div>
              `).join('')}
            </div>
            
            ${prodImages.length > 1 ? `
              <button onclick="moveDetailSlider(-1)" class="absolute left-2 top-1/2 -translate-y-1/2 bg-white/50 p-2 rounded-full hover:bg-white transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
              </button>
              <button onclick="moveDetailSlider(1)" class="absolute right-2 top-1/2 -translate-y-1/2 bg-white/50 p-2 rounded-full hover:bg-white transition-all">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
              </button>
              <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
                ${prodImages.map((_, i) => `<div class="w-2 h-2 rounded-full bg-white/50 slider-dot ${i === 0 ? 'bg-white scale-125' : ''}" data-index="${i}"></div>`).join('')}
              </div>
            ` : ''}
          </div>
        </div>
        <div class="p-6 flex flex-col gap-4">
          <div>
            <h2 class="text-2xl font-bold text-gray-900">${product.name}</h2>
            <p class="text-[var(--primary-color)] font-bold text-2xl mt-1">R$ ${product.price.toFixed(2).replace(".", ",")}</p>
          </div>
          ${product.isDupla ? `<div class="flex items-center text-sm font-semibold text-[var(--primary-color)] bg-[var(--primary-transparent)] px-3 py-1.5 rounded-lg border border-[var(--primary-color)]"> Produto em Oferta </div>` : ''}
          <div class="text-gray-600 text-sm leading-relaxed">
            <p>${product.description}</p>
          </div>
          <div class="flex flex-col gap-3 mt-2">
            <button onclick="event.stopPropagation(); addToCart('${product.id}', event); closeProductDetailModal();" class="btn-add w-full py-4 rounded-2xl bg-[var(--primary-color)] text-white font-bold text-lg flex items-center justify-center gap-3 hover:opacity-90 transition-all ${product.stock === 0 ? 'disabled' : ''}">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
              <span>Adicionar ao Carrinho</span>
            </button>
          </div>
        </div>
      `;
      
      document.getElementById('productDetailModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    let currentDetailSlide = 0;
    function moveDetailSlider(direction) {
      const slider = document.getElementById('detail-slider');
      const dots = document.querySelectorAll('.slider-dot');
      const totalSlides = dots.length;
      
      currentDetailSlide = (currentDetailSlide + direction + totalSlides) % totalSlides;
      slider.style.transform = `translateX(-${(currentDetailSlide * 100) / totalSlides}%)`;
      
      dots.forEach((dot, i) => {
        if (i === currentDetailSlide) {
          dot.classList.add('bg-white', 'scale-125');
          dot.classList.remove('bg-white/50');
        } else {
          dot.classList.remove('bg-white', 'scale-125');
          dot.classList.add('bg-white/50');
        }
      });
    }

    function closeProductDetailModal() {
      document.getElementById('productDetailModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      currentDetailSlide = 0;
    }

  
    
    // Bulk Actions Logic
    function toggleSelectAll(type) {
        const selectAll = document.getElementById(`select-all-${type}`);
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox`);
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateBulkBar(type);
    }

    function updateBulkBar(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        const bar = document.getElementById(`bulk-actions-${type}`);
        const countEl = document.getElementById(`selected-count-${type}`);
        
        if (checkboxes.length > 0) {
            bar.classList.add('active');
            countEl.textContent = `(${checkboxes.length} selecionados)`;
        } else {
            bar.classList.remove('active');
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
        }
    }

    async function bulkDelete(type) {
        const checkboxes = document.querySelectorAll(`.${type.slice(0, -1)}-checkbox:checked`);
        if (checkboxes.length === 0) return;

        if (!confirm(`Tem certeza que deseja excluir ${checkboxes.length} itens selecionados?`)) return;

        showToastNoPopup('Excluindo itens...', 'info');
        const ids = Array.from(checkboxes).map(cb => cb.dataset.id);
        
        try {
            let listToSearch = [];
            if (type === 'products') listToSearch = currentDBProducts;
            else if (type === 'categories') listToSearch = currentDBCategories;
            else if (type === 'users') listToSearch = users;
            else if (type === 'orders') listToSearch = orders;

            for (const id of ids) {
                const item = listToSearch.find(i => i.__backendId === id);
                if (item) {
                    await window.dataSdk.delete(item);
                }
            }

            showToastNoPopup(`${checkboxes.length} itens excluídos com sucesso!`, 'success');
            
            // Refresh lists
            if (type === 'products') { renderProducts(); renderAdminProducts(); }
            else if (type === 'categories') { renderCategories(); renderAdminCategories(); renderAdminOrders();
      loadFirebaseConfigToUI(); updateCategorySelect(); }
            else if (type === 'users') { renderAdminUsers(); }
            else if (type === 'orders') { renderAdminOrders();
      loadFirebaseConfigToUI(); }
            
            const selectAll = document.getElementById(`select-all-${type}`);
            if (selectAll) selectAll.checked = false;
            updateBulkBar(type);
        } catch (error) {
            console.error('Erro na exclusão em massa:', error);
            showToastNoPopup('Erro ao excluir alguns itens', 'error');
        }
    }

    function openUserLoginModal() {
      document.getElementById('userLoginModal').classList.add('active');
      document.body.classList.add('modal-open');
    }

    function closeUserLoginModal() {
      document.getElementById('userLoginModal').classList.remove('active');
      document.body.classList.remove('modal-open');
      toggleUserAuthView('login');
    }

    function toggleUserAuthView(view) {
      const loginView = document.getElementById('user-login-view');
      const registerView = document.getElementById('user-register-view');
      if (view === 'register') {
        loginView.classList.add('hidden');
        registerView.classList.remove('hidden');
      } else {
        loginView.classList.remove('hidden');
        registerView.classList.add('hidden');
      }
    }

    function toggleUserPasswordVisibility(inputId) {
      const input = document.getElementById(inputId);
      input.type = input.type === 'password' ? 'text' : 'password';
    }

    async function handleUserLogin(event) {
      event.preventDefault();
      const phone = document.getElementById('user-login-phone').value;
      const password = document.getElementById('user-login-password').value;
      const errorEl = document.getElementById('userLoginError');
      
      try {
        const users = await storeManager.list();
        const user = users.find(u => u.phone === phone && u.password === password && u.data_type === 'customer');
        
        if (user) {
          closeUserLoginModal();
          // Aqui você pode adicionar lógica de sessão do usuário
        } else {
          errorEl.textContent = 'Telefone ou senha incorretos.';
        }
      } catch (e) {
        errorEl.textContent = 'Erro ao realizar login.';
      }
    }

    async function handleUserRegister(event) {
      event.preventDefault();
      const name = document.getElementById('user-reg-name').value;
      const phone = document.getElementById('user-reg-phone').value;
      const password = document.getElementById('user-reg-password').value;
      const errorEl = document.getElementById('userRegisterError');
      
      try {
        const users = await storeManager.list();
        // Verifica se já existe como customer ou user comum
        if (users.some(u => (u.phone === phone || u.username === phone) && (u.data_type === 'customer' || u.data_type === 'user'))) {
          errorEl.textContent = 'Este telefone já está cadastrado.';
          return;
        }
        
        const result = await storeManager.create({
          username: phone, // Usando telefone como username para aparecer no painel adm
          name: name,
          phone: phone,
          password: password,
          data_type: 'user', // Mudado para 'user' para aparecer na aba de usuários do adm
          role: 'usuario', // Definido como visualizador conforme solicitado
          active: true,
          created_at: new Date().toISOString()
        });
        
        if (result.isOk) {
          sessionStorage.setItem('just_registered', 'true');
          closeUserLoginModal();
          showToastNoPopup('Cadastro realizado com sucesso!', 'success');
          
          // Recarrega ou dispara a verificação de boas vindas
          setTimeout(() => {
            checkWelcomeMessage();
          }, 500);
        } else {
          errorEl.textContent = 'Erro ao realizar cadastro.';
        }
      } catch (e) {
        console.error(e);
        errorEl.textContent = 'Erro ao realizar cadastro.';
      }
    }

  
    function closeWelcomeModal() {
      document.getElementById('welcomeSuccessModal').classList.remove('active');
      document.body.classList.remove('modal-open');
    }

    function goToWhatsAppGroup() {
      const whatsappLink = document.querySelector('.whatsapp-btn-footer')?.parentElement?.getAttribute('onclick')?.match(/'([^']+)'/)?.[1] || "https://chat.whatsapp.com/";
      window.open(whatsappLink, '_blank');
      closeWelcomeModal();
    }

    // Função para verificar se deve mostrar o modal de boas-vindas
    function checkWelcomeMessage() {
      if (localStorage.getItem('welcome_message_shown') === 'true') return;
      
      // Se acabou de se cadastrar (marcado no handleUserRegister)
      if (sessionStorage.getItem('just_registered') === 'true') {
        setTimeout(() => {
          document.getElementById('welcomeSuccessModal').classList.add('active');
          document.body.classList.add('modal-open');
          localStorage.setItem('welcome_message_shown', 'true');
          sessionStorage.removeItem('just_registered');
        }, 1000);
      }
    }

    // Adicionar ao final do DOMContentLoaded ou início do script
    setTimeout(checkWelcomeMessage, 2000);

  
        async function downloadProductListPDF() {
      try {
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF('landscape');
        
        doc.setFontSize(20);
        doc.setTextColor(242, 86, 193);
        doc.text("ZaapStore - Lista de Produtos Detalhada", 14, 20);
        
        doc.setFontSize(10);
        doc.setTextColor(100);
        const date = new Date().toLocaleDateString("pt-BR");
        doc.text(`Gerado em: ${date}`, 14, 28);

        let productsToExport = [];
        try {
            if (typeof storeManager !== 'undefined' && typeof storeManager.list === 'function') {
                const allData = await storeManager.list();
                productsToExport = allData.filter(p => p.data_type === "product");
            }
        } catch (e) {
            console.error("Erro ao listar via SDK:", e);
        }

        if (productsToExport.length === 0 && typeof currentDBProducts !== 'undefined') {
            productsToExport = currentDBProducts;
        }

        if (productsToExport.length === 0) {
          showToastNoPopup("Nenhum produto encontrado para exportar.", "error");
          return;
        }

        const sortedProducts = [...productsToExport].sort((a, b) => (a.order || 0) - (b.order || 0));

        let totalEstoqueGeral = 0;
        let valorTotalGeral = 0;

        const tableData = sortedProducts.map((p, index) => {
          let categoryText = "Sem categoria";
          if (p.category) {
            categoryText = Array.isArray(p.category) ? p.category.join(", ") : p.category;
          } else if (p.categories) {
            categoryText = Array.isArray(p.categories) ? p.categories.join(", ") : p.categories;
          }
          
          const preco = parseFloat(p.price || 0);
          const estoque = parseInt(p.stock || 0);
          const valorTotal = preco * estoque;

          totalEstoqueGeral += estoque;
          valorTotalGeral += valorTotal;
          
          return [
            index + 1,
            p.name || "Sem nome",
            categoryText,
            `R$ ${preco.toLocaleString("pt-BR", {minimumFractionDigits: 2})}`,
            estoque,
            p.isDupla ? "Sim" : "Não",
            `R$ ${valorTotal.toLocaleString("pt-BR", {minimumFractionDigits: 2})}`
          ];
        });

        doc.autoTable({
          startY: 35,
          head: [["#", "Produto", "Categoria", "Preço", "Estoque", "Oferta", "Valor Total"]],
          body: tableData,
          theme: 'grid',
          headStyles: { 
            fillColor: [242, 86, 193],
            halign: 'center',
            valign: 'middle'
          },
          styles: { 
            font: "helvetica", 
            fontSize: 10,
            halign: 'center',
            valign: 'middle',
            lineWidth: 0.1,
            lineColor: [200, 200, 200]
          },
          columnStyles: {
            0: { cellWidth: 12 },
            1: { cellWidth: 70, halign: 'left' },
            2: { cellWidth: 45 },
            3: { cellWidth: 35 },
            4: { cellWidth: 25 },
            5: { cellWidth: 25 },
            6: { cellWidth: 40 }
          },
          alternateRowStyles: { fillColor: [255, 245, 250] },
          margin: { bottom: 30 } // Garante espaço para não cortar o resumo se estiver no fim
        });

        // Lógica corrigida: Adicionar o resumo APENAS após a conclusão da tabela
        const finalY = doc.lastAutoTable.finalY + 15;
        const pageHeight = doc.internal.pageSize.height;
        
        // Se o resumo não couber na página atual, adiciona uma nova página
        if (finalY + 25 > pageHeight) {
            doc.addPage();
            var currentY = 20;
        } else {
            var currentY = finalY;
        }

        doc.setFontSize(12);
        doc.setTextColor(0, 0, 0);
        doc.setFont("helvetica", "bold");
        doc.text(`Resumo do Estoque:`, 14, currentY);
        doc.setFont("helvetica", "normal");
        doc.text(`Total de Peças em Estoque: ${totalEstoqueGeral}`, 14, currentY + 7);
        doc.text(`Saldo Final em Reais: R$ ${valorTotalGeral.toLocaleString("pt-BR", {minimumFractionDigits: 2})}`, 14, currentY + 14);

        doc.save(`lista-produtos-detalhada-${date.replace(/\//g, "-")}.pdf`);
        showToastNoPopup("PDF gerado com sucesso!", "success");
      } catch (error) {
        console.error("Erro ao gerar PDF:", error);
        showToastNoPopup("Erro ao gerar o PDF.", "error");
      }
    }

    function downloadExcelTemplate() {
      const wb = XLSX.utils.book_new();
      
      // Obter nomes das categorias atuais
      const categoryNames = categories.map(c => c.name).filter(name => name);
      const categoryListString = categoryNames.join(",");

      const ws_data = [
        ["Nome", "Preco", "Descricao", "Categorias", "Imagem_URL", "Ativo", "Estoque", "Oferta"],
        ["Produto Exemplo 1", "99.90", "Descricao do produto", categoryNames[0] || "Categoria1", "https://exemplo.com/imagem.jpg", "true", "10", "false"],
        ["Produto Exemplo 2", "150.00", "Outra descricao", categoryNames[1] || "Categoria2", "", "true", "5", "true"]
      ];

      const ws = XLSX.utils.aoa_to_sheet(ws_data);

      // Adicionar validação de dados (dropdown) para a coluna de Categorias (coluna D, índice 3)
      // Aplicar para as primeiras 100 linhas para facilitar o preenchimento
      if (categoryListString) {
        if (!ws['!dataValidation']) ws['!dataValidation'] = [];
        ws['!dataValidation'].push({
          sqref: "D2:D100",
          type: "list",
          formula1: `"${categoryListString}"`,
          showErrorMessage: true,
          errorTitle: "Categoria Inválida",
          error: "Por favor, selecione uma categoria da lista."
        });
      }

      XLSX.utils.book_append_sheet(wb, ws, "Produtos");
      XLSX.writeFile(wb, "modelo_importacao_produtos.xlsx");
    }

    function backupProductsToExcel() {
      try {
        // Usar currentDBProducts que já contém os dados brutos do banco
        if (!currentDBProducts || currentDBProducts.length === 0) {
          showToastNoPopup("Não há produtos para fazer backup.", "info");
          return;
        }

        const wb = XLSX.utils.book_new();
        const ws_data = [
          ["Nome", "Preco", "Descricao", "Categorias", "Imagem_URL", "Ativo", "Estoque", "Oferta"]
        ];

        currentDBProducts.forEach(p => {
          // No seu app, a categoria é salva no campo 'category' como uma string (ex: "Decoracao, Sala")
          let cats = p.category || "";
          
          // Caso esteja em formato de array por algum motivo, converte para string
          if (Array.isArray(cats)) {
            cats = cats.join(", ");
          }

          ws_data.push([
            p.name || "",
            p.price || 0,
            p.description || "",
            cats,
            p.image || "",
            p.active !== false ? "true" : "false",
            p.stock || 0,
            p.isDupla ? "true" : "false"
          ]);
        });

        const ws = XLSX.utils.aoa_to_sheet(ws_data);
        XLSX.utils.book_append_sheet(wb, ws, "Backup_Produtos");
        XLSX.writeFile(wb, `backup_produtos_${new Date().toISOString().split('T')[0]}.xlsx`);
        showToastNoPopup("Backup gerado com sucesso!", "success");
      } catch (error) {
        console.error("Erro ao gerar backup:", error);
        showToastNoPopup("Erro ao gerar o backup: " + error.message, "error");
      }
    }

    async function handleExcelImport(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = async (e) => {
        try {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: 'array' });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet);

          if (jsonData.length === 0) {
            showToastNoPopup('O arquivo está vazio.', 'error');
            return;
          }

          showToastNoPopup(`Importando ${jsonData.length} produtos...`, 'info');
          
          let successCount = 0;
                    for (const item of jsonData) {
            const name = item.Nome || item.name || '';
            const isDupla = String(item.Dupla || item.dupla || '').toLowerCase() === 'true';
            let description = item.Descricao || item.description || '';
            
            // Se a descrição estiver vazia, gera automaticamente
            if (!description && name) {
                description = getAutoDescription(name, isDupla);
            }

            const productData = {
              name: name,
              price: parseFloat(item.Preco || item.price || 0).toString(),
              description: description,
              category: item.Categorias || item.categories || '',
              image: item.Imagem_URL || item.image || '',
              images: [item.Imagem_URL || item.image || ''],
              active: true,
              stock: parseInt(item.Estoque || item.stock || 10),
              isDupla: isDupla,
              data_type: 'product',
              order: 999999,
              created_at: new Date().toISOString()
            };

            if (productData.name) {
              await storeManager.create(productData);
              successCount++;
            }
          }

          showToastNoPopup('Importação de produtos com sucesso', 'import_success');
          if (typeof renderAdminProducts === 'function') renderAdminProducts();
        } catch (error) {
          console.error('Erro na importação:', error);
          showToastNoPopup('Erro ao processar o arquivo Excel.', 'error');
        }
        event.target.value = '';
      };
      reader.readAsArrayBuffer(file);
    }

        function getAutoDescription(name, isDupla) {
      if (!name) return '';
      
      const nameLower = name.toLowerCase();
      let typeInfo = { keyword: 'refeições', action: 'servir refeições' };
      
      if (nameLower.includes('prato raso')) {
        typeInfo = { keyword: 'refeições', action: 'servir refeições' };
      } else if (nameLower.includes('prato de sobremesa')) {
        typeInfo = { keyword: 'doces e frutas', action: 'servir doces e frutas' };
      } else if (nameLower.includes('bowl')) {
        typeInfo = { keyword: 'sopas, cereais, saladas ou sobremesas', action: 'servir sopas, cereais, saladas ou sobremesas' };
      } else if (nameLower.includes('xícara')) {
        typeInfo = { keyword: 'bebidas quentes', action: 'aproveitar bebidas quentes e momentos especiais' };
      } else if (nameLower.includes('travessa')) {
        typeInfo = { keyword: 'acompanhamentos', action: 'servir acompanhamentos com estilo' };
      } else if (nameLower.includes('boleira')) {
        typeInfo = { keyword: 'bolos e sobremesas', action: 'servir bolos e tortas com elegância' };
      }

      const adjectives = ['charme', 'elegância', 'delicadeza', 'sofisticação', 'leveza', 'estilo', 'versatilidade', 'harmonia', 'beleza', 'acolhedor', 'moderno', 'clássico', 'decorativo'];
      const getAdj = () => adjectives[Math.floor(Math.random() * adjectives.length)];
      
      let prefix = name;
      if (isDupla) {
        const words = name.split(' ');
        if (words.length > 0) {
          let firstWord = words[0];
          if (firstWord.toLowerCase().endsWith('bowl')) {
            firstWord += 's';
          } else if (firstWord.toLowerCase().endsWith('r') || firstWord.toLowerCase().endsWith('z')) {
            firstWord += 'es';
          } else if (firstWord.toLowerCase().endsWith('l')) {
            firstWord = firstWord.slice(0, -1) + 'is';
          } else if (firstWord.toLowerCase().endsWith('m')) {
            firstWord = firstWord.slice(0, -1) + 'ns';
          } else if (!firstWord.toLowerCase().endsWith('s')) {
            firstWord += 's';
          }
          words[0] = firstWord;
        }
        prefix = `Conjunto com 2 ${words.join(' ')}`;
      }
      
      const variations = [
        `${prefix}, ideal para ${typeInfo.action} com ${getAdj()} e ${getAdj()}.`,
        `${prefix}, com design exclusivo, perfeito para compor uma mesa ${getAdj()} e ${getAdj()}.`,
        `${prefix}. Um toque de ${getAdj()} e ${getAdj()} para valorizar seus momentos à mesa.`,
        `${prefix}, trazendo ${getAdj()} e ${getAdj()} para sua mesa posta.`,
        `${prefix}, a escolha perfeita para quem busca ${getAdj()} e ${getAdj()}.`
      ];

      return variations[Math.floor(Math.random() * variations.length)];
    }

    function generateProductDescription() {
      const name = document.getElementById('modal-product-name').value.trim();
      const isDupla = document.getElementById('modal-product-is-dupla').checked;
      const position = parseInt(document.getElementById('modal-product-position').value);
      const descriptionEl = document.getElementById('modal-product-description');
      
      if (!name) {
        showToastNoPopup('Por favor, digite o nome do produto primeiro.', 'error');
        return;
      }

      descriptionEl.value = getAutoDescription(name, isDupla);
      showToastNoPopup('Descrição gerada com sucesso!', 'success');
    }

    function updateFavicon(color) {
      const favicon = document.getElementById('favicon');
      if (!favicon) return;
      
      // SVG original com a cor substituída
      const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><circle cx="9" cy="10" r="1"></circle><circle cx="12" cy="10" r="1"></circle><circle cx="15" cy="10" r="1"></circle></svg>`;
      
      // Converter SVG para Base64
      const base64Svg = btoa(svg);
      favicon.href = `data:image/svg+xml;base64,${base64Svg}`;
    }

    async function updateAppTheme(primary, transparent) {
      document.documentElement.style.setProperty('--primary-color', primary);
      document.documentElement.style.setProperty('--primary-transparent', transparent);
      
      // Atualizar o favicon
      updateFavicon(primary);
      
      // Salvar no localStorage para feedback imediato
      localStorage.setItem('zaapstore_primary_color', primary);
      localStorage.setItem('zaapstore_primary_transparent', transparent);
      
      // Atualizar objeto local
      storeConfig.primary_color = primary;
      storeConfig.primary_transparent = transparent;

      // Salvar no Firebase para persistência global
      try {
        if (storeConfigRecord && storeConfigRecord.__backendId) {
          const updatedConfig = { 
            ...storeConfigRecord, 
            primary_color: primary, 
            primary_transparent: transparent 
          };
          await window.dataSdk.update(updatedConfig);
        } else {
          await window.dataSdk.create({
            ...storeConfig,
            data_type: 'store_config'
          });
        }
        showToastNoPopup('Cor do tema salva globalmente!', 'success');
      } catch (error) {
        console.error('Erro ao salvar cor no banco:', error);
        showToastNoPopup('Cor aplicada, mas erro ao salvar no banco.', 'warning');
      }
    }
    // O tema agora é carregado instantaneamente no topo do <head> para evitar piscadas.

    // Blender Color Picker Logic
    (function() {
        let currentH = 0, currentS = 0, currentV = 100;

        function hsvToRgb(h, s, v) {
            s /= 100; v /= 100;
            let r, g, b;
            let i = Math.floor(h / 60);
            let f = h / 60 - i;
            let p = v * (1 - s);
            let q = v * (1 - f * s);
            let t = v * (1 - (1 - f) * s);
            switch (i % 6) {
                case 0: r = v, g = t, b = p; break;
                case 1: r = q, g = v, b = p; break;
                case 2: r = p, g = v, b = t; break;
                case 3: r = p, g = q, b = v; break;
                case 4: r = t, g = p, b = v; break;
                case 5: r = v, g = p, b = q; break;
            }
            return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
        }

        function rgbToHex(r, g, b) {
            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }

        window.updateBlenderPicker = function() {
            const wheel = document.getElementById('blenderWheel');
            const marker = document.getElementById('blenderMarker');
            const hexInput = document.getElementById('blenderHex');
            const rgbField = document.getElementById('blenderRGB');
            const hsvField = document.getElementById('blenderHSV');
            const preview = document.getElementById('blenderPreview');
            
            if (!wheel || !marker) return;

            const r = 100;
            const angle = currentH * (Math.PI / 180);
            const dist = (currentS / 100) * r;
            
            marker.style.left = (100 + dist * Math.cos(angle)) + 'px';
            marker.style.top = (100 + dist * Math.sin(angle)) + 'px';
            
            const rgb = hsvToRgb(currentH, currentS, currentV);
            const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
            
            preview.style.background = hex;
            hexInput.value = hex.toUpperCase();
            rgbField.value = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
            hsvField.value = `${Math.round(currentH)}°, ${Math.round(currentS)}%, ${Math.round(currentV)}%`;
            
            wheel.style.filter = `brightness(${currentV}%)`;
        };

        window.handleWheelMove = function(e) {
            const wheel = document.getElementById('blenderWheel');
            const rect = wheel.getBoundingClientRect();
            const clientX = e.clientX || (e.touches && e.touches[0].clientX);
            const clientY = e.clientY || (e.touches && e.touches[0].clientY);
            
            const x = clientX - rect.left - 100;
            const y = clientY - rect.top - 100;
            
            let angle = Math.atan2(y, x) * (180 / Math.PI);
            const dist = Math.min(100, Math.sqrt(x*x + y*y));
            
            currentH = (angle + 360) % 360;
            currentS = (dist / 100) * 100;
            window.updateBlenderPicker();
        };

        window.applyBlenderColor = function() {
            const hexInput = document.getElementById('blenderHex');
            const hex = hexInput.value;
            const transparent = hex + '12';
            if (typeof updateAppTheme === 'function') {
                updateAppTheme(hex, transparent);
            }
        };

        document.addEventListener('DOMContentLoaded', () => {
            const wheel = document.getElementById('blenderWheel');
            const valSlider = document.getElementById('blenderValue');
            
            if (wheel) {
                wheel.addEventListener('mousedown', (e) => {
                    window.handleWheelMove(e);
                    const move = (ev) => window.handleWheelMove(ev);
                    const up = () => {
                        window.removeEventListener('mousemove', move);
                        window.removeEventListener('mouseup', up);
                    };
                    window.addEventListener('mousemove', move);
                    window.addEventListener('mouseup', up);
                });
                
                wheel.addEventListener('touchstart', (e) => {
                    window.handleWheelMove(e);
                    const move = (ev) => window.handleWheelMove(ev);
                    const up = () => {
                        window.removeEventListener('touchmove', move);
                        window.removeEventListener('touchend', up);
                    };
                    window.addEventListener('touchmove', move);
                    window.addEventListener('touchend', up);
                }, {passive: false});
            }

            if (valSlider) {
                valSlider.addEventListener('input', (e) => {
                    currentV = e.target.value;
                    window.updateBlenderPicker();
                });
            }
        });
    })();
    </script>
 
   <!-- Order Detail Modal -->
   <div id="orderDetailModal" class="settings-modal" onclick="if(event.target === this) closeOrderDetailModal()">
    <div class="settings-content" style="max-width: 600px;">
     <div class="flex justify-between items-center mb-4 border-b pb-4">
      <h2 class="text-2xl font-bold text-gray-900">Detalhes do Pedido</h2>
      <button onclick="closeOrderDetailModal()" class="p-2 rounded-xl hover:bg-gray-100 transition-all">
       <svg class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
      </button>
     </div>
     <div id="order-detail-content" class="order-detail-content space-y-6">
       <!-- Order content will be injected here -->
     </div>
    </div>
   </div>
   <!-- Product Detail Modal -->
   <div id="productDetailModal" class="settings-modal" onclick="if(event.target === this) closeProductDetailModal()">
    <div class="settings-content" style="max-width: 500px; padding: 0; overflow: hidden; display: flex; flex-direction: column;">
     <div id="product-detail-content" class="flex flex-col overflow-y-auto" style="max-height: 100%;">
       <!-- Content will be injected here -->
     </div>
    </div>
   </div>


   <!-- Scroll to Top Button -->
   <button id="scroll-to-top-btn" onclick="scrollToTop()" title="Voltar ao topo">
     <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
     </svg>
   </button>
</body>
</html>