<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{ title | default("ComplyForm Compliance Report") }}</title>
<style>
  :root {
    --primary-color: {{ primary_color | default("#1a56db") }};
    --accent-color: {{ accent_color | default("#6366f1") }};
  }
  @page {
    size: A4;
    margin: 20mm;
    @bottom-center {
      content: "{{ footer | default('') }}";
      font-size: 9px;
      color: #6b7280;
    }
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2937;
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }
  .cover-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    page-break-after: always;
  }
  .cover-page .logo {
    max-width: 200px;
    max-height: 100px;
    margin-bottom: 2rem;
  }
  .cover-page h1 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .cover-page .company-name {
    font-size: 1.25rem;
    color: #4b5563;
  }
  .report-content {
    padding: 0;
  }
</style>
</head>
<body>
{% if show_cover %}
<div class="cover-page">
  {% if logo_data_uri %}
  <img class="logo" src="{{ logo_data_uri }}" alt="Company logo">
  {% endif %}
  <h1>{{ cover_title | default("Compliance Report") }}</h1>
  {% if company_name %}
  <p class="company-name">{{ company_name }}</p>
  {% endif %}
</div>
{% endif %}

<div class="report-content">
{{ report_html | safe }}
</div>
</body>
</html>
