<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <meta name="theme-color" content="#f5f7f5" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <title>Nusa Café - Gestão de atendimento</title>
  <!-- Chart.js de alta performance via CDN -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- Estilos Premium -->
  <script type="module" crossorigin src="/assets/index-DCgW0Gtd.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-oVHhen-1.css">
</head>
<body>

  <!-- INDICADOR DE CONEXÃO ONLINE/OFFLINE -->
  <div id="connectionBanner" class="connection-banner">
    <span aria-hidden="true">!</span> Sem conexão. As alterações ficam bloqueadas até a internet voltar.
  </div>

  <!-- TELA DE AUTENTICAÇÃO (LOGIN) -->
  <div id="loginScreen" class="login-wrap">
    <div class="login-card">
      <h1>Nusa Café</h1>
      <div class="sub">Gestão de atendimento</div>
      <form id="loginForm">
        <div class="field">
          <label for="loginUser">Usuário</label>
          <input id="loginUser" type="text" autocomplete="username" placeholder="Ex: gerente" required>
        </div>
        <div class="field">
          <label for="loginPass">Senha</label>
          <input id="loginPass" type="password" autocomplete="current-password" placeholder="••••" required>
        </div>
        <button class="btn btn-primary" type="submit">Acessar Sistema</button>
      </form>
    </div>
  </div>

  <!-- APLICAÇÃO PRINCIPAL (DASHBOARD) -->
  <div id="app" class="app">
    <!-- Barra Lateral (Sidebar) -->
    <aside class="sidebar">
      <div class="brand"><span class="brand-mark" aria-hidden="true">N</span><span id="brandName">Nusa Café</span></div>
      <nav class="nav" id="navMenu">
        <!-- Preenchido via Javascript -->
      </nav>
      <div class="user-box">
        <div class="name" id="userName">Carregando...</div>
        <div class="role" id="userRole">...</div>
        <button class="logout" onclick="logout()">Sair do Sistema</button>
      </div>
    </aside>

    <!-- Conteúdo Principal -->
    <main>
      <div id="mainContent">
        <!-- Loader Interno das Páginas -->
        <div class="loading-overlay" id="loadingOverlay">
          <div class="spinner"></div>
        </div>
        <!-- Injetado dinamicamente -->
      </div>
    </main>

    <!-- Barra de Abas Inferior (Mobile Viewport) -->
    <nav class="tabbar" id="tabbar">
      <!-- Preenchido via Javascript -->
    </nav>
  </div>

  <div class="mobile-more-backdrop" id="mobileMoreBackdrop" hidden onclick="toggleMobileMore(false)">
    <section class="mobile-more-sheet" role="dialog" aria-modal="true" aria-labelledby="mobileMoreTitle" onclick="event.stopPropagation()">
      <div class="mobile-more-head">
        <div><small>Gerenciamento</small><h2 id="mobileMoreTitle">Mais opções</h2></div>
        <button type="button" class="icon-close-button" onclick="toggleMobileMore(false)" aria-label="Fechar">&times;</button>
      </div>
      <nav class="mobile-more-menu" id="mobileMoreMenu"></nav>
      <button class="mobile-more-logout" type="button" onclick="logout()">Sair do sistema</button>
    </section>
  </div>

  <!-- FAB CARRINHO (Aparece no Novo Pedido) -->
  <button class="cart-fab" id="cartFab" onclick="toggleCart()" aria-label="Abrir carrinho de pedidos" hidden>
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h2l2.2 10.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L20 8H6M10 20h.01M17 20h.01"/></svg><span class="badge-fab" id="cartBadge" style="display:none">0</span>
  </button>
  <div class="sheet-backdrop" id="sheetBackdrop" onclick="toggleCart(false)" hidden></div>

  <!-- MODAL GLOBAL -->
  <div class="modal-bg" id="modalBg">
    <div class="modal" id="modalShell">
      <button class="modal-back-button" id="modalBackButton" type="button" onclick="goBackModal()" aria-label="Voltar para a janela anterior" title="Voltar" hidden>
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg>
      </button>
      <button class="modal-close-x" type="button" onclick="closeModal()" aria-label="Fechar janela" title="Fechar">&times;</button>
      <div class="modal-body" id="modalContent">
        <!-- Injetado dinamicamente -->
      </div>
    </div>
  </div>

  <!-- TOASTS DE NOTIFICAÇÃO -->
  <div class="toast-wrap" id="toastWrap"></div>

  <!-- ÁREA DE IMPRESSÃO TÉRMICA (CUPOM) -->
  <div id="printArea"></div>

  <!-- Script Principal do Projeto -->
</body>
</html>
