<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#F5A623">

  <!-- TRUSTED CORRIDOR CSP (FIXED) -->
  <meta http-equiv="Content-Security-Policy"
    content="
      default-src 'self';

      script-src 
        'self' 
        https://accounts.google.com/gsi/client 
        'unsafe-inline' 
        'unsafe-eval';

      connect-src 
        'self' 
        https://eggspress-proxy.systems-545.workers.dev
        https://accounts.google.com
        https://script.google.com
        https://script.googleusercontent.com;

      frame-src 
        https://accounts.google.com;

      style-src 
        'self' 
        'unsafe-inline' 
        https://accounts.google.com/gsi/style;

      img-src 
        'self' 
        data: 
        https://lh3.googleusercontent.com;
    ">

  <title>EggspressIloilo v1.1.3</title>

  <!-- FIXED PATH (important) -->
  <link rel="manifest" href="./manifest.json">
  <link rel="icon" href="./icons/icon-192.png">

  <link rel="stylesheet" href="./styles/base.css">
  <link rel="stylesheet" href="./styles/components.css">

  <!-- Google Identity -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>

<body>

<div id="screen-auth" class="screen">
  <div class="auth-container">
    <div class="auth-logo">
      <div class="auth-logo-icon">🥚</div>
      <div class="auth-logo-name">EggspressIloilo</div>
      <div class="auth-logo-sub">Field Ops v1.1.3</div>
    </div>
    <div id="signin-button-container"></div>
  </div>
</div>

<div id="screen-app" class="screen" style="display:none">
  <header class="app-header">
    <div class="header-left">
      <span class="header-logo">🥚</span>
      <span id="page-title">Home</span>
    </div>
    <div class="header-right">
      <span id="user-badge" class="user-badge"></span>
      <button class="btn-icon" onclick="signOut()">⎋</button>
    </div>
  </header>
  <main id="main-content"></main>
  <nav id="bottom-nav" class="bottom-nav"></nav>
</div>

<div id="toast" class="toast"></div>

<!-- ORDER = CRITICAL -->
<script src="./core/auth.js"></script>
<script src="./core/sync.js"></script>
<script src="./core/gps.js"></script>
<script src="./core/camera.js"></script>

<script src="./modules/shift/shift.js"></script>
<script src="./modules/sale/sale.js"></script>
<script src="./modules/manager/manager.js"></script>

<script src="./app.js"></script>

</body>
</html>