<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
    <meta name="theme-color" content="#1F2937" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no" />

    <title>OrderFlow</title>

    <!-- Critical CSS - Inline for instant render (sub-second FCP) -->
    <style>
      /* Minimal reset */
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      /* System font stack - no external fonts blocking render */
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: #F9FAFB;
        color: #111827;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-tap-highlight-color: transparent;
      }

      /* Hide root until React loads */
      #root:empty { display: none; }

      /* App shell skeleton - shows instantly */
      .app-skeleton {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .app-skeleton-header {
        background: #1F2937;
        padding: 16px;
        padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
        padding-bottom: 24px;
      }

      .skeleton-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .skeleton {
        background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 8px;
      }

      .skeleton-dark {
        background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 8px;
      }

      .skeleton-circle { border-radius: 50%; }
      .skeleton-rounded { border-radius: 12px; }

      @keyframes shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }

      /* Card skeleton styles */
      .skeleton-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      }

      .skeleton-card-image {
        height: 144px;
      }

      .skeleton-card-content {
        padding: 16px;
      }

      /* Quick action card */
      .skeleton-action-card {
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      }

      /* Hide skeleton when app loads */
      .app-loaded #app-skeleton { display: none !important; }
      .app-loaded #root { display: block !important; }
    </style>

    <!-- Content Security Policy -->
    <meta http-equiv="Content-Security-Policy" content="
      default-src 'self';
      script-src 'self' 'unsafe-inline' 'unsafe-eval';
      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
      font-src 'self' https://fonts.gstatic.com;
      img-src 'self' data: https: blob:;
      connect-src 'self' https: wss:;
      worker-src 'self' blob:;
      manifest-src 'self';
    ">

    <!-- Resource hints for faster loading -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://res.cloudinary.com" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://res.cloudinary.com" crossorigin />

    <!-- Defer Google Fonts - non-blocking -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" /></noscript>

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <script type="module" crossorigin src="/assets/index-B_Q5Ozsy.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-Ny78OCXx.js">
    <link rel="modulepreload" crossorigin href="/assets/ui-vendor-ei1rdJ1s.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-vendor-A1-X9gAI.js">
    <link rel="stylesheet" crossorigin href="/assets/index-7-L4cCE0.css">
  <link rel="manifest" href="/manifest.webmanifest"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
  <body>
    <!-- App Shell Skeleton - Shows instantly before React loads -->
    <div id="app-skeleton" class="app-skeleton">
      <!-- Header skeleton -->
      <div class="app-skeleton-header">
        <!-- Row 1: Logo & Profile -->
        <div class="skeleton-row" style="height: 48px; margin-bottom: 20px;">
          <div class="skeleton skeleton-dark skeleton-rounded" style="width: 40px; height: 40px;"></div>
          <div class="skeleton skeleton-dark skeleton-rounded" style="width: 40px; height: 40px;"></div>
        </div>

        <!-- Row 2: Outlet info -->
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 24px;">
          <div class="skeleton skeleton-dark skeleton-circle" style="width: 44px; height: 44px; flex-shrink: 0;"></div>
          <div style="flex: 1;">
            <div class="skeleton skeleton-dark" style="width: 140px; height: 20px; margin-bottom: 6px;"></div>
            <div class="skeleton skeleton-dark" style="width: 100px; height: 14px;"></div>
          </div>
        </div>

        <!-- Row 3: Greeting -->
        <div class="skeleton skeleton-dark" style="width: 200px; height: 28px; margin-bottom: 8px;"></div>
        <div class="skeleton skeleton-dark" style="width: 160px; height: 16px;"></div>
      </div>

      <!-- Content skeleton -->
      <div style="flex: 1; padding: 16px; margin-top: -16px;">
        <!-- Food card skeleton -->
        <div class="skeleton-card" style="margin-bottom: 12px;">
          <div class="skeleton skeleton-card-image"></div>
          <div class="skeleton-card-content">
            <div class="skeleton" style="width: 100px; height: 20px; margin-bottom: 8px;"></div>
            <div class="skeleton" style="width: 200px; height: 14px;"></div>
          </div>
        </div>

        <!-- Drinks card skeleton -->
        <div class="skeleton-card" style="margin-bottom: 24px;">
          <div class="skeleton skeleton-card-image"></div>
          <div class="skeleton-card-content">
            <div class="skeleton" style="width: 110px; height: 20px; margin-bottom: 8px;"></div>
            <div class="skeleton" style="width: 220px; height: 14px;"></div>
          </div>
        </div>

        <!-- Quick actions label -->
        <div class="skeleton" style="width: 100px; height: 12px; margin-bottom: 12px;"></div>

        <!-- Quick actions grid -->
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
          <div class="skeleton-action-card">
            <div class="skeleton skeleton-rounded" style="width: 40px; height: 40px; margin-bottom: 12px;"></div>
            <div class="skeleton" style="width: 60px; height: 16px; margin-bottom: 6px;"></div>
            <div class="skeleton" style="width: 90px; height: 12px;"></div>
          </div>
          <div class="skeleton-action-card">
            <div class="skeleton skeleton-rounded" style="width: 40px; height: 40px; margin-bottom: 12px;"></div>
            <div class="skeleton" style="width: 75px; height: 16px; margin-bottom: 6px;"></div>
            <div class="skeleton" style="width: 100px; height: 12px;"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- React root -->
    <div id="root"></div>

    <!-- Main app script -->
  </body>
</html>
