<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Favicon with proper aspect ratio preservation -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="msapplication-TileColor" content="#1637b6" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="IMSv2" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>IMSv2</title>

    <!-- Inter Font from Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Apply dark mode class before paint to prevent FOUC -->
    <script>
      if (localStorage.getItem('dashboardTheme') !== 'light') {
        document.documentElement.classList.add('dark');
      }
    </script>

    <!-- Module Load Error Recovery -->
    <script>
      (function() {
        var hasAttemptedReload = sessionStorage.getItem('module-reload-attempted');

        function handleModuleError(errorMsg) {
          if (errorMsg && (
            errorMsg.includes('Failed to load module') ||
            errorMsg.includes('MIME type') ||
            errorMsg.includes('Loading module') ||
            errorMsg.includes('Failed to fetch dynamically imported module')
          )) {
            if (!hasAttemptedReload) {
              console.warn('Module load failed, clearing cache and reloading...');
              sessionStorage.setItem('module-reload-attempted', Date.now().toString());

              // Clear caches if available
              if ('caches' in window) {
                caches.keys().then(function(names) {
                  return Promise.all(names.map(function(name) { return caches.delete(name); }));
                }).finally(function() {
                  window.location.reload(true);
                });
              } else {
                window.location.reload(true);
              }
              return true;
            }
          }
          return false;
        }

        // Capture phase error listener
        window.addEventListener('error', function(event) {
          var msg = event.message || (event.error && event.error.message) || '';
          handleModuleError(msg);
        }, true);

        // Handle dynamic import failures
        window.addEventListener('unhandledrejection', function(event) {
          var msg = event.reason ? (event.reason.message || String(event.reason)) : '';
          handleModuleError(msg);
        });

        // Clear reload flag after 5 seconds of successful load
        window.addEventListener('load', function() {
          setTimeout(function() {
            sessionStorage.removeItem('module-reload-attempted');
          }, 5000);
        });

        // Check if we're stuck in a reload loop (attempted more than 10 seconds ago)
        if (hasAttemptedReload) {
          var attemptTime = parseInt(hasAttemptedReload, 10);
          if (Date.now() - attemptTime > 10000) {
            sessionStorage.removeItem('module-reload-attempted');
          }
        }
      })();
    </script>
    <script type="module" crossorigin src="/assets/main-D6RUHob5.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/main-BlTJDGgs.css">
  </head>
  <body>
    <div id="root"></div>
    <script>
      // Prevent pinch-to-zoom on iOS Safari (ignores viewport meta since iOS 10)
      document.addEventListener('gesturestart', function(e) { e.preventDefault(); });
      document.addEventListener('gesturechange', function(e) { e.preventDefault(); });
      document.addEventListener('gestureend', function(e) { e.preventDefault(); });
    </script>
  </body>
</html>
