<!DOCTYPE html>
<html lang="sk">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta name="theme-color" content="#0f172a" />

  <!-- PWA / Mobile Capable Tags -->
  <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="apple-mobile-web-app-title" content="xBločky">
  <title>xBločky - Archivácia platieb</title>

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

  <!-- Fonts: Inter - Mobile optimized with font-display swap -->
  <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@300;400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
  <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"></noscript>

  <!-- Icons - Defer loading for mobile -->
  <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>

  <!-- Native CSS for critical styles to avoid FOUC and build issues -->
  <style>
    * {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

    html {
      /* Mobile safe area support */
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      /* Prevent text size adjustment on iOS */
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
           text-size-adjust: 100%;
      /* Smooth scrolling for mobile */
      scroll-behavior: smooth;
      /* Better font rendering on mobile */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      background-color: #0f172a;
      color: #f8fafc;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      overscroll-behavior-y: none;
      /* Prevent pull-to-refresh on mobile */
      overscroll-behavior: none;
      /* Better touch scrolling */
      -webkit-overflow-scrolling: touch;
      /* Prevent selection on mobile (except inputs) */
      -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
      /* Prevent zoom on double tap */
      touch-action: manipulation;
      /* Mobile viewport fix */
      min-height: 100vh;
      min-height: -webkit-fill-available;
      /* Prevent horizontal scroll */
      overflow-x: hidden;
      width: 100%;
    }

    /* Allow text selection in inputs and content areas */
    input, textarea, select, [contenteditable] {
      -webkit-user-select: text;
      -moz-user-select: text;
           user-select: text;
    }

    /* iOS Input Zoom Fix - prevent zoom on focus */
    input,
    select,
    textarea {
      font-size: 16px !important;
      /* Better touch targets on mobile (min 44x44px) */
      min-height: 44px;
    }

    /* Better touch targets for buttons */
    button, a, [role="button"] {
      min-height: 44px;
      min-width: 44px;
      /* Better touch feedback */
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    /* App Loading State */
    #root:empty::before {
      content: "";
      position: fixed;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      margin-left: -20px;
      border: 4px solid #1e293b;
      border-top-color: #10b981;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      z-index: 9999;
    }

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

    /* Mobile-specific optimizations */
    @media (max-width: 768px) {
      /* Reduce animations on mobile for better performance */
      * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
      }
      
      /* Better scrolling on mobile */
      * {
        -webkit-overflow-scrolling: touch;
      }
    }

    /* Prevent 300ms click delay on mobile */
    a, button, [role="button"] {
      touch-action: manipulation;
    }
  </style>

  <script type="module" crossorigin src="/assets/index.BggLL9Xy.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor.tFuN9Yb4.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase.CJd7gSnu.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-scanner.Bh5AFJLV.js">
  <link rel="stylesheet" crossorigin href="/assets/index.Ny-JDp2C.css">
</head>

<body>
  <div id="root"></div>
  <script>
    window.addEventListener('load', () => {
      console.log('xBločky Fix Version: Clean Slate + Local API');
      // Option 1: Clean Slate - Force Unregister Service Workers
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
          for (let registration of registrations) {
            console.log('Unregistering SW:', registration);
            registration.unregister();
          }
        });
      }
    });
  </script>
</body>

</html>