<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>ShopTach - Automotive Shop Management</title>
    
    <!-- Preconnect to speed up external resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
    
    <!-- Critical CSS for initial render -->
    <style>
      *{box-sizing:border-box}
      body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:#f8fafc;color:#1e293b}
      #root{min-height:100vh}
      /* Initial loading state */
      .init-load{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}
      .init-load svg{width:80px;height:80px;animation:pulse 2s infinite}
      .init-load .logo-text{color:#374151;font-weight:500;font-size:14px;margin-top:16px}
      .init-load img{filter:invert(1) hue-rotate(180deg) drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important}
      @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.95)}}
      /* Prevent layout shift */
      img{max-width:100%;height:auto}
      /* Dark mode support */
      @media(prefers-color-scheme:dark){
        body{background:#0f172a;color:#e2e8f0}
        .init-load{background:linear-gradient(135deg,#0f172a,#1e293b)}
        .init-load .logo-text{color:#d1d5db}
        .init-load svg path{stroke:#e5e7eb !important}
        .init-load img{filter:none !important}
      }
    </style>
    
    <link rel="icon" id="favicon" type="image/png" href="/logo-dark.png" />
    
    <!-- Preload critical resources will be generated by Vite -->
    
    <!-- PWA support -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#DC2626" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#1F2937" media="(prefers-color-scheme: dark)" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    
    <script>
      // Theme and favicon setup (non-blocking)
      (function(){
        const d=window.matchMedia('(prefers-color-scheme: dark)');
        const isDark=d.matches;
        // Store theme preference early
        localStorage.getItem('theme')||localStorage.setItem('theme',isDark?'dark':'light');
        // Set favicon based on theme (dark logo for light mode, white logo for dark mode)
        const favicon=document.getElementById('favicon');
        if(favicon){
          favicon.href=isDark?'/logo.svg':'/logo-dark.png';
          favicon.type=isDark?'image/svg+xml':'image/png';
        }
        // Listen for theme changes
        d.addEventListener('change',function(e){
          if(favicon){
            favicon.href=e.matches?'/logo.svg':'/logo-dark.png';
            favicon.type=e.matches?'image/svg+xml':'image/png';
          }
        });
      })();
      // Performance mark
      performance.mark('app-init');
    </script>
    <script type="module" crossorigin src="/assets/index-0Fba1_sS.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BtUlprDm.css">
  </head>
  <body>
    <div id="root">
      <!-- Initial loading placeholder -->
      <div class="init-load">
        <div style="text-align: center;">
          <img src="/logo.svg" alt="ShopTach" style="width: 80px; height: 80px; animation: pulse 2s infinite;" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 80px; height: 80px; animation: pulse 2s infinite; display: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2" stroke="#DC2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <div class="logo-text">
            ShopTach
          </div>
        </div>
      </div>
    </div>
  </body>
</html>