<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Character Encoding -->
    <meta charset="UTF-8" />

    <!-- Viewport (Mobile + Notch Safe) -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />

    <!-- Color Scheme (Prevents Dark Mode Flash) -->
    <meta name="color-scheme" content="light dark" />

    <!-- Primary Meta -->
    <title>BusConduct – Transportation Operations Platform</title>
    <meta
      name="description"
      content="BusConduct is a modern transportation operations platform for districts, bus companies, drivers, and passengers."
    />
    <meta
      name="keywords"
      content="bus management, transportation software, school buses, fleet tracking"
    />
    <meta name="theme-color" content="#667eea" />

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

    <!-- PWA -->
    <link rel="manifest" href="/manifest.webmanifest" />
    <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="default" />

    <!-- Preconnect (High Value Only) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

    <!-- Font Preload (Example: Inter – optional but optimal) -->
    <!--
    <link
      rel="preload"
      href="/fonts/Inter-Variable.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    -->

    <!-- Critical CSS -->
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        line-height: 1.5;
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        font-family: ui-sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          sans-serif;
        background-color: #ffffff;
      }

      body {
        margin: 0;
        color: #111827;
        background-color: inherit;
        text-rendering: optimizeLegibility;
      }

      /* Dark mode base (no Tailwind flash) */
      @media (prefers-color-scheme: dark) {
        html {
          background-color: #0b0f19;
        }
        body {
          color: #e5e7eb;
        }
      }

      #root {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      /* Pre-hydration loading UI */
      .app-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
      }

      .app-loading-content {
        text-align: center;
      }

      .app-loading-spinner {
        width: 40px;
        height: 40px;
        margin: 20px auto;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: #ffffff;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* Prevent iOS zoom on input focus */
      input,
      textarea,
      select {
        font-size: 16px;
      }

      /* Reduced Motion */
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }
    </style>

    <!-- Structured Data (SEO) -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "SoftwareApplication",
        "name": "BusConduct",
        "applicationCategory": "BusinessApplication",
        "operatingSystem": "Web, iOS, Android",
        "description": "Modern transportation operations management platform for bus companies, drivers, and passengers"
      }
    </script>
    <script type="module" crossorigin src="/assets/index-CGxw62U8.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/excel-utils-Bb16U4Nq.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-C4nd0y57.js">
    <link rel="modulepreload" crossorigin href="/assets/react-vendor-B1_wKj_n.js">
    <link rel="modulepreload" crossorigin href="/assets/firebase-DXzES8Il.js">
    <link rel="modulepreload" crossorigin href="/assets/storage-utils-_vmbZD4l.js">
    <link rel="modulepreload" crossorigin href="/assets/components-CGLBuaV6.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-Bh4l01IT.js">
    <link rel="modulepreload" crossorigin href="/assets/common-components-CPB2CAaK.js">
    <link rel="modulepreload" crossorigin href="/assets/admin-qXeTrQVW.js">
    <link rel="modulepreload" crossorigin href="/assets/date-utils-BwnCH0l2.js">
    <link rel="modulepreload" crossorigin href="/assets/pages-CpbxXNqj.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BBa9CAYJ.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>

  <body>
    <div id="root">
      <!-- Visible only before React hydrates -->
      <div class="app-loading" aria-hidden="true">
        <div class="app-loading-content">
          <div class="app-loading-spinner"></div>
          <p>Loading BusConduct…</p>
        </div>
      </div>
    </div>

    <!-- No JS Fallback -->
    <noscript>
      <div style="padding:1rem;text-align:center;font-family:system-ui">
        BusConduct requires JavaScript to run. Please enable JavaScript.
      </div>
    </noscript>

    <!-- Non-blocking Analytics (Example Pattern) -->
    <!--
    <script>
      window.addEventListener("load", () => {
        const s = document.createElement("script");
        s.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX";
        s.async = true;
        document.head.appendChild(s);
      });
    </script>
    -->

    <!-- Vite Entry -->
  </body>
</html>
