<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ComplyForm Compliance Report — {{ report_data.metadata.generated_at[:10] }}</title>
<style>
:root {
  --cf-bg: #fff;
  --cf-text: #1a1a2e;
  --cf-primary: #2563eb;
  --cf-critical: #dc2626;
  --cf-high: #ea580c;
  --cf-medium: #854d0e;
  --cf-low: #2563eb;
  --cf-pass: #16a34a;
  --cf-border: #e5e7eb;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--cf-text);
  background: var(--cf-bg);
  line-height: 1.6;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 1rem; border-bottom: 2px solid var(--cf-border); padding-bottom: 0.5rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; }

/* Header */
.report-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; border-bottom: 3px solid var(--cf-primary); padding-bottom: 1.5rem; }
.report-header .logo { font-size: 1.75rem; font-weight: 700; color: var(--cf-primary); }
.report-header .meta { font-size: 0.85rem; color: #6b7280; text-align: right; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; margin: 0.1rem; }
.badge-cloud { background: #dbeafe; color: #1e40af; }
.badge-fw { color: #fff; }
.badge-severity { color: #fff; border-radius: 3px; padding: 0.1rem 0.4rem; font-size: 0.7rem; text-transform: uppercase; }
.badge-critical { background: var(--cf-critical); }
.badge-high { background: var(--cf-high); }
.badge-medium { background: #ca8a04; }
.badge-low { background: var(--cf-low); }
.badge-confidence { font-size: 0.75rem; }
.badge-confidence.verified { color: var(--cf-pass); }
.badge-confidence.inferred { color: #ca8a04; }
.fw-badges { margin-top: 0.5rem; }

/* Executive Summary */
.summary-grid { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; }
.score-donut { text-align: center; }
.summary-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.stat-box { text-align: center; padding: 0.75rem 1rem; border: 1px solid var(--cf-border); border-radius: 6px; min-width: 80px; }
.stat-box .num { font-size: 1.5rem; font-weight: 700; }
.stat-box .label { font-size: 0.75rem; color: #6b7280; }
.stat-box.pass .num { color: var(--cf-pass); }
.stat-box.fail .num { color: var(--cf-critical); }
.stat-box.manual .num { color: #ca8a04; }
.severity-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 1rem 0; }
.severity-bar span { display: block; }
.fw-mini-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.fw-card { border: 1px solid var(--cf-border); border-radius: 6px; padding: 0.75rem; border-left: 4px solid var(--cf-primary); }
.fw-card .fw-name { font-weight: 600; font-size: 0.9rem; }
.fw-card .fw-score { font-size: 1.25rem; font-weight: 700; }

/* Findings */
.finding-card { border: 1px solid var(--cf-border); border-radius: 6px; padding: 1rem; margin-bottom: 0.75rem; border-left: 4px solid var(--cf-border); }
.finding-card.severity-CRITICAL { border-left-color: var(--cf-critical); }
.finding-card.severity-HIGH { border-left-color: var(--cf-high); }
.finding-card.severity-MEDIUM { border-left-color: #ca8a04; }
.finding-card.severity-LOW { border-left-color: var(--cf-low); }
.finding-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.finding-resource { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.85rem; color: #6b7280; margin-bottom: 0.5rem; }
.finding-desc { margin-bottom: 0.5rem; }
.finding-remediation { background: #f9fafb; padding: 0.5rem 0.75rem; border-radius: 4px; font-size: 0.9rem; margin-bottom: 0.5rem; }
.cross-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.cross-chip { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; background: #f3f4f6; color: #374151; border: 1px solid var(--cf-border); }
.cross-chip-more { font-style: italic; color: #6b7280; }
.native-chip { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; background: #ede9fe; color: #5b21b6; margin: 0.1rem; }

/* Filter controls */
.filter-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-btn { padding: 0.3rem 0.8rem; border: 1px solid var(--cf-border); border-radius: 4px; background: #fff; cursor: pointer; font-size: 0.8rem; }
.filter-btn.active { background: var(--cf-primary); color: #fff; border-color: var(--cf-primary); }
.filter-btn:hover { background: #f3f4f6; }
.filter-btn.active:hover { background: #1d4ed8; }
.print-btn { padding: 0.3rem 0.8rem; border: 1px solid var(--cf-primary); border-radius: 4px; background: var(--cf-primary); color: #fff; cursor: pointer; font-size: 0.8rem; }

/* Overlap matrix */
.overlap-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.overlap-table th, .overlap-table td { padding: 0.5rem; border: 1px solid var(--cf-border); text-align: center; }
.overlap-table th { background: #f9fafb; }

/* Cross-validation / Cost */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.metric-box { border: 1px solid var(--cf-border); border-radius: 6px; padding: 0.75rem; text-align: center; }
.metric-box .metric-val { font-size: 1.5rem; font-weight: 700; }
.metric-box .metric-label { font-size: 0.75rem; color: #6b7280; }
.cost-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.cost-table th, .cost-table td { padding: 0.5rem; border: 1px solid var(--cf-border); text-align: left; }
.cost-table th { background: #f9fafb; }

/* Low-confidence section */
.low-confidence-note { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 0.75rem; font-size: 0.85rem; color: #92400e; margin-bottom: 1rem; }

/* Footer */
.report-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--cf-border); font-size: 0.8rem; color: #9ca3af; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.upgrade-cta { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.85rem; margin-top: 1rem; }
.upgrade-cta a { color: var(--cf-primary); font-weight: 600; }

/* No findings */
.no-findings { text-align: center; padding: 2rem; color: var(--cf-pass); font-size: 1.1rem; font-weight: 600; }

/* Print */
@media print {
  .filter-controls, .print-btn { display: none !important; }
  .badge-fw, .badge-severity, .badge-cloud { border: 1px solid #333; background: transparent !important; color: #333 !important; }
  body { padding: 0; max-width: none; }
  .finding-card { break-inside: avoid; }
  .finding-card:nth-child(8n+1) { page-break-before: always; }
  h2#cross-framework-mapping { page-break-before: always; }
  h2#findings { page-break-before: always; }
}
</style>
</head>
<body>

<!-- Section 1: Header -->
<div class="report-header">
  <div>
    <div class="logo">
      <svg width="24" height="24" viewBox="0 0 24 24" style="vertical-align: middle; margin-right: 4px;">
        <circle cx="12" cy="12" r="10" fill="none" stroke="#2563eb" stroke-width="2"/>
        <path d="M8 12l3 3 5-6" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      ComplyForm
    </div>
    <h1>Compliance Report</h1>
    <div class="fw-badges">
      <span class="badge badge-cloud">{{ report_data.metadata.cloud | upper }}</span>
      <span class="badge" style="background: #f3f4f6; color: #374151;">{{ report_data.metadata.scan_source }}</span>
      {% for fw_id in report_data.metadata.frameworks %}
      <span class="badge badge-fw" style="background: {{ framework_colors.get(fw_id, '#6b7280') }};">{{ fw_id }}</span>
      {% endfor %}
    </div>
  </div>
  <div class="meta">
    <div>{{ report_data.metadata.generated_at[:19] }}</div>
    <div>v{{ report_data.metadata.tool_version }}</div>
    {% if report_data.metadata.state_hash %}
    <div style="font-family: monospace; font-size: 0.75rem;">{{ report_data.metadata.state_hash[:16] }}...</div>
    {% endif %}
    {% if report_data.metadata.project_id %}
    <div>{{ report_data.metadata.project_id }}</div>
    {% endif %}
  </div>
</div>

<!-- Section 2: Executive Summary -->
<h2>Executive Summary</h2>
<div class="summary-grid">
  <div class="score-donut">
    {% set score = report_data.summary.score %}
    {% set circumference = 251.2 %}
    {% set dash = (score / 100) * circumference %}
    {% if score >= 75 %}
      {% set score_color = "var(--cf-pass)" %}
    {% elif score >= 50 %}
      {% set score_color = "#ca8a04" %}
    {% else %}
      {% set score_color = "var(--cf-critical)" %}
    {% endif %}
    <svg width="120" height="120" viewBox="0 0 120 120">
      <circle cx="60" cy="60" r="40" fill="none" stroke="#e5e7eb" stroke-width="8"/>
      <circle cx="60" cy="60" r="40" fill="none" stroke="{{ score_color }}" stroke-width="8"
              stroke-dasharray="{{ dash }} {{ circumference }}"
              stroke-linecap="round" transform="rotate(-90 60 60)"/>
      <text x="60" y="60" text-anchor="middle" dominant-baseline="central"
            font-size="24" font-weight="700" fill="{{ score_color }}">{{ score | round(0) | int }}%</text>
    </svg>
  </div>
  <div>
    <div class="summary-stats">
      <div class="stat-box pass"><div class="num">{{ report_data.summary.passed }}</div><div class="label">Passed</div></div>
      <div class="stat-box fail"><div class="num">{{ report_data.summary.failed }}</div><div class="label">Failed</div></div>
      <div class="stat-box manual"><div class="num">{{ report_data.summary.manual_review }}</div><div class="label">Manual</div></div>
      <div class="stat-box"><div class="num">{{ report_data.summary.resource_count }}</div><div class="label">Resources</div></div>
    </div>
    {% set sev = report_data.summary.severity_counts %}
    {% set total_sev = (sev.get("critical", 0) + sev.get("high", 0) + sev.get("medium", 0) + sev.get("low", 0)) or 1 %}
    <div class="severity-bar">
      {% if sev.get("critical", 0) > 0 %}
      <span style="width: {{ (sev.get('critical', 0) / total_sev * 100) | round(1) }}%; background: var(--cf-critical);" title="Critical: {{ sev.get('critical', 0) }}"></span>
      {% endif %}
      {% if sev.get("high", 0) > 0 %}
      <span style="width: {{ (sev.get('high', 0) / total_sev * 100) | round(1) }}%; background: var(--cf-high);" title="High: {{ sev.get('high', 0) }}"></span>
      {% endif %}
      {% if sev.get("medium", 0) > 0 %}
      <span style="width: {{ (sev.get('medium', 0) / total_sev * 100) | round(1) }}%; background: #ca8a04;" title="Medium: {{ sev.get('medium', 0) }}"></span>
      {% endif %}
      {% if sev.get("low", 0) > 0 %}
      <span style="width: {{ (sev.get('low', 0) / total_sev * 100) | round(1) }}%; background: var(--cf-low);" title="Low: {{ sev.get('low', 0) }}"></span>
      {% endif %}
    </div>
  </div>
</div>

<div class="fw-mini-cards">
  {% for fw in report_data.frameworks_detail %}
  <div class="fw-card" style="border-left-color: {{ framework_colors.get(fw.id, '#6b7280') }};">
    <div class="fw-name">{{ fw.name }}</div>
    <div class="fw-score" style="color: {% if fw.score >= 75 %}var(--cf-pass){% elif fw.score >= 50 %}#ca8a04{% else %}var(--cf-critical){% endif %};">{{ fw.score | round(0) | int }}%</div>
    <div style="font-size: 0.8rem; color: #6b7280;">{{ fw.pass_count }} pass / {{ fw.fail_count }} fail</div>
  </div>
  {% endfor %}
</div>

{% if report_data.metadata.frameworks | length >= 2 %}
<h2 id="cross-framework-mapping">Cross-Framework Mapping</h2>
{% if report_data.cross_mappings.overlap_matrix %}
<table class="overlap-table">
  <thead>
    <tr>
      <th>Framework A</th>
      <th>Framework B</th>
      <th>Shared Controls</th>
      <th>Overlap %</th>
    </tr>
  </thead>
  <tbody>
    {% for row in report_data.cross_mappings.overlap_matrix %}
    <tr>
      <td>{{ row.fw_a }}</td>
      <td>{{ row.fw_b }}</td>
      <td>{{ row.shared_count }}</td>
      <td>{{ row.overlap_pct }}%</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% if report_data.cross_mappings.total_shared > 0 %}
<p>{{ report_data.cross_mappings.total_shared }} shared control mappings across frameworks.</p>
{% endif %}
{% endif %}

<!-- Section 4: Findings -->
<h2 id="findings">Findings</h2>

{% if report_data.findings %}
<div class="filter-controls">
  <button class="filter-btn active" data-severity="all" onclick="filterSeverity('all')">All</button>
  <button class="filter-btn" data-severity="CRITICAL" onclick="filterSeverity('CRITICAL')">Critical</button>
  <button class="filter-btn" data-severity="HIGH" onclick="filterSeverity('HIGH')">High</button>
  <button class="filter-btn" data-severity="MEDIUM" onclick="filterSeverity('MEDIUM')">Medium</button>
  <button class="filter-btn" data-severity="LOW" onclick="filterSeverity('LOW')">Low</button>
  <button class="print-btn" onclick="window.print()">Print Report</button>
</div>

{% set verified_findings = [] %}
{% set inferred_findings = [] %}
{% for f in report_data.findings %}
  {% if f.confidence == "inferred" %}
    {% if inferred_findings.append(f) %}{% endif %}
  {% else %}
    {% if verified_findings.append(f) %}{% endif %}
  {% endif %}
{% endfor %}

{% for f in verified_findings %}
<div class="finding-card severity-{{ f.severity }}" data-severity="{{ f.severity }}">
  <div class="finding-header">
    <span class="badge badge-severity badge-{{ f.severity | lower }}">{{ f.severity }}</span>
    <span class="badge badge-fw" style="background: {{ framework_colors.get(f.framework, '#6b7280') }};">{{ f.framework }}</span>
    <strong>{{ f.control_id }}</strong>
    <span class="badge-confidence {{ f.confidence }}">{% if f.confidence == "verified" %}&#10003;{% else %}&#9888;{% endif %}</span>
  </div>
  <div class="finding-resource">{{ f.resource_address }}</div>
  <div class="finding-desc">{{ f.title }}</div>
  {% if f.remediation %}
  <div class="finding-remediation">{{ f.remediation }}</div>
  {% endif %}
  {% if f.cross_mappings %}
  <div class="cross-chips">
    {% for cm in f.cross_mappings[:3] %}
    <span class="cross-chip" title="{{ cm.framework_name }}: {{ cm.control_id }}">{{ cm.framework }} {{ cm.control_id }}</span>
    {% endfor %}
    {% if f.cross_mappings | length > 3 %}
    <span class="cross-chip cross-chip-more" title="{% for cm in f.cross_mappings[3:] %}{{ cm.framework }} {{ cm.control_id }}{% if not loop.last %}, {% endif %}{% endfor %}">+{{ f.cross_mappings | length - 3 }} more</span>
    {% endif %}
  </div>
  {% endif %}
  {% if f.checkov_id %}
  <span class="native-chip">{{ f.checkov_id }}</span>
  {% endif %}
  {% if f.native_ids %}
  {% for key, val in f.native_ids.items() %}
  <span class="native-chip">{{ key }}: {{ val }}</span>
  {% endfor %}
  {% endif %}
</div>
{% endfor %}

{% if inferred_findings %}
<h3>Low-Confidence Mappings</h3>
<div class="low-confidence-note">
  These mappings were derived from a single crosswalk source. Verify against the framework's published control guidance before relying on them for audit evidence.
</div>
{% for f in inferred_findings %}
<div class="finding-card severity-{{ f.severity }}" data-severity="{{ f.severity }}">
  <div class="finding-header">
    <span class="badge badge-severity badge-{{ f.severity | lower }}">{{ f.severity }}</span>
    <span class="badge badge-fw" style="background: {{ framework_colors.get(f.framework, '#6b7280') }};">{{ f.framework }}</span>
    <strong>{{ f.control_id }}</strong>
    <span class="badge-confidence inferred">&#9888;</span>
  </div>
  <div class="finding-resource">{{ f.resource_address }}</div>
  <div class="finding-desc">{{ f.title }}</div>
  {% if f.remediation %}
  <div class="finding-remediation">{{ f.remediation }}</div>
  {% endif %}
  {% if f.cross_mappings %}
  <div class="cross-chips">
    {% for cm in f.cross_mappings[:3] %}
    <span class="cross-chip" title="{{ cm.framework_name }}: {{ cm.control_id }}">{{ cm.framework }} {{ cm.control_id }}</span>
    {% endfor %}
    {% if f.cross_mappings | length > 3 %}
    <span class="cross-chip cross-chip-more" title="{% for cm in f.cross_mappings[3:] %}{{ cm.framework }} {{ cm.control_id }}{% if not loop.last %}, {% endif %}{% endfor %}">+{{ f.cross_mappings | length - 3 }} more</span>
    {% endif %}
  </div>
  {% endif %}
  {% if f.checkov_id %}
  <span class="native-chip">{{ f.checkov_id }}</span>
  {% endif %}
</div>
{% endfor %}
{% endif %}

{% else %}
<div class="no-findings">No compliance gaps found. All assessed controls are passing.</div>
{% endif %}

{% if report_data.cross_validation %}
<h2>Cross-Validation</h2>
<div class="metric-grid">
  <div class="metric-box"><div class="metric-val">{{ report_data.cross_validation.score | round(0) | int }}%</div><div class="metric-label">Agreement Score</div></div>
  <div class="metric-box"><div class="metric-val">{{ report_data.cross_validation.confirmed }}</div><div class="metric-label">Confirmed</div></div>
  <div class="metric-box"><div class="metric-val">{{ report_data.cross_validation.complyform_only }}</div><div class="metric-label">ComplyForm Only</div></div>
  <div class="metric-box"><div class="metric-val">{{ report_data.cross_validation.native_only }}</div><div class="metric-label">{{ report_data.cross_validation.native_tool }} Only</div></div>
</div>
{% endif %}

{% if report_data.cost_impact %}
<h2>Cost Impact</h2>
<div class="metric-grid">
  <div class="metric-box"><div class="metric-val">${{ "%.0f" | format(report_data.cost_impact.total_monthly_delta) }}</div><div class="metric-label">Monthly Delta</div></div>
  <div class="metric-box"><div class="metric-val">${{ "%.0f" | format(report_data.cost_impact.total_annual_delta) }}</div><div class="metric-label">Annual Delta</div></div>
</div>
{% if report_data.cost_impact.breakdown %}
<table class="cost-table">
  <thead><tr><th>Item</th><th>Monthly</th><th>Annual</th></tr></thead>
  <tbody>
    {% for item in report_data.cost_impact.breakdown %}
    <tr>
      <td>{{ item.get("description", "") }}</td>
      <td>${{ "%.2f" | format(item.get("monthly", 0)) }}</td>
      <td>${{ "%.2f" | format(item.get("annual", 0)) }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endif %}

<div class="report-footer">
  <div>ComplyForm v{{ report_data.metadata.tool_version }} &mdash; {{ report_data.metadata.generated_at[:19] }}</div>
  <div>
    {% if not report_data.findings %}
    <button class="print-btn" onclick="window.print()">Print Report</button>
    {% endif %}
  </div>
</div>

{% if report_data.upgrade_cta %}
<div class="upgrade-cta">
  {{ report_data.upgrade_cta.message }} &mdash; <a href="{{ report_data.upgrade_cta.url }}">Upgrade</a>
</div>
{% endif %}

<script>
function filterSeverity(sev) {
  var cards = document.querySelectorAll('.finding-card');
  var btns = document.querySelectorAll('.filter-btn');
  btns.forEach(function(b) { b.classList.toggle('active', b.getAttribute('data-severity') === sev); });
  cards.forEach(function(c) {
    if (sev === 'all' || c.getAttribute('data-severity') === sev) {
      c.style.display = '';
    } else {
      c.style.display = 'none';
    }
  });
}
</script>
</body>
</html>
