<!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" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <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 is self-hosted (public/fonts, @font-face in src/index.css): the iPad app and a LAN browser never wait on Google (offline phase 2b, 2026-10-27) -->
    <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>

    <!-- Apply theme class before paint to prevent FOUC -->
    <script>
      (function() {
        // The phone browser paints its own top strip this color; it must match the app header
        // (black page in dark mode: the form header band is transparent over it).
        var LIGHT = '#ffffff', DARK = '#000000';
        var isDark = localStorage.getItem('dashboardTheme') === 'dark';
        if (isDark) document.documentElement.classList.add('dark');
        function syncThemeColor(dark) {
          var color = dark ? DARK : LIGHT;
          document.querySelectorAll('meta[name="theme-color"]').forEach(function(m) {
            m.removeAttribute('media');
            m.content = color;
          });
        }
        syncThemeColor(isDark);
        new MutationObserver(function() {
          syncThemeColor(document.documentElement.classList.contains('dark'));
        }).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
      })();
    </script>

    <!-- Google's analytics loader, placed by us so it carries crossorigin (owner, 2026-10-27). The Firebase Analytics SDK
         reuses a gtag tag already on the page (it looks for the URL and the data layer name) instead of adding its own, and
         its own tag has no crossorigin, so every error inside that script reached the Crashes tab as a bare "Script error."
         (five rows on WebKit, 10-26). The URL matches the SDK's exactly, measurement id included, so Google loads one script,
         not a second id-specific one. The id is the one Firebase's own app config returns for the production web app, G-3BCDFQLH1N (the local .env's
         G-KN75JDC8N4 is another registration; with it Google fetched the real container as a second, unmarked script). It is
         public telemetry config, in every page's requests, not a secret
         and the CI build has no env var for it, so the tag is written only on the production hostnames; everywhere else
         (local, staging, the iPad app) the SDK adds its own tag as before. -->
    <script>
      (function () {
        var h = location.hostname;
        if (h !== 'ims.ipadmobilesolutions.com' && h !== 'ims-epcr-vii.web.app' && h !== 'ims-epcr-vii.firebaseapp.com') return;
        var s = document.createElement('script');
        s.async = true;
        s.crossOrigin = 'anonymous';
        s.src = 'https://www.googletagmanager.com/gtag/js?l=dataLayer&id=G-3BCDFQLH1N';
        document.head.appendChild(s);
      })();
    </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-BTNTv7Mk.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/main-Cv2mOqKS.css">
  </head>
  <body>
    <div id="root"></div>
    <div id="datepicker-portal"></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>
