<!DOCTYPE html>
<html lang="en" data-theme="{{ theme_preference or 'light' }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="view-transition" content="same-origin">
  <meta name="csrf-token" content="{{ csrf_token }}">
  <title>{% block title %}ComplyForm Dashboard{% endblock %}</title>
  <link rel="stylesheet" href="/static/vendor/tailwind-3.4.17.min.css">
  <style>
    :root {
      --bg-primary: #f9fafb;
      --bg-surface: #ffffff;
      --bg-surface-hover: #f3f4f6;
      --border-default: #e5e7eb;
      --text-primary: #111827;
      --text-secondary: #6b7280;
      --text-muted: #9ca3af;
      --accent: #2563eb;
      --accent-hover: #1d4ed8;
    }

    [data-theme="dark"] {
      --bg-primary: #0f172a;
      --bg-surface: #1e293b;
      --bg-surface-hover: #334155;
      --border-default: #334155;
      --text-primary: #f1f5f9;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --accent: #3b82f6;
      --accent-hover: #60a5fa;
    }

    :root {
      --cf-critical: #dc2626;
      --cf-high: #ea580c;
      --cf-medium: #854d0e;
      --cf-low: #2563eb;
    }

    body {
      background: var(--bg-primary);
      color: var(--text-primary);
    }

    ::view-transition-old(tab-content) { animation: fade-out 150ms ease-in; }
    ::view-transition-new(tab-content) { animation: fade-in 150ms ease-out; }
    @keyframes fade-out { to { opacity: 0; } }
    @keyframes fade-in { from { opacity: 0; } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
      ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    }

    [x-cloak] { display: none !important; }
  </style>
</head>
<body hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:p-4 focus:bg-white focus:text-black">Skip to main content</a>

  {% include "components/nav.html" %}

  {% if show_consent_banner %}{% include "components/consent_banner.html" %}{% endif %}

  <main id="main-content" role="main" aria-label="Dashboard content">
    {% block content %}{% endblock %}
  </main>

  <div id="loading" class="htmx-indicator" role="progressbar" aria-label="Loading">
    <div style="position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); z-index: 9999;"></div>
  </div>

  <div id="sr-announcer" aria-live="polite" aria-atomic="true" class="sr-only"></div>

  {% include "components/command_palette.html" %}

  <script src="/static/vendor/htmx-2.0.8.min.js"></script>
  <script src="/static/vendor/alpine-3.15.8.min.js" defer></script>
  <script>
    document.addEventListener('htmx:afterSwap', function(evt) {
      var target = evt.detail.target;
      if (target.id === 'tab-content' || target.id === 'main-content') {
        target.setAttribute('tabindex', '-1');
        target.focus();
        document.getElementById('sr-announcer').textContent = 'Content updated';
      }
    });
  </script>
</body>
</html>
