<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    @page {
      size: A4;
      margin: 2cm 1.5cm;
      @bottom-center {
        content: "Page " counter(page) " / " counter(pages);
        font-family: 'Inter', sans-serif;
        font-size: 8pt;
        color: #64748B;
      }
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
      font-size: 10pt;
      color: #1e293b;
      line-height: 1.5;
    }

    .mono { font-family: 'JetBrains Mono', 'Courier New', monospace; }

    /* Header */
    .report-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 3px solid #2563EB;
      padding-bottom: 12px;
      margin-bottom: 20px;
    }
    .report-header .logo-area {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .report-header .logo-area img {
      max-height: 50px;
      max-width: 120px;
    }
    .report-header .company-name {
      font-size: 14pt;
      font-weight: 700;
      color: #2563EB;
    }
    .report-header .report-title {
      font-size: 11pt;
      font-weight: 600;
      color: #64748B;
      text-align: right;
    }

    /* Footer */
    .report-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 7pt;
      color: #94a3b8;
      padding-top: 8px;
      border-top: 1px solid #e2e8f0;
    }

    /* Section */
    .section { margin-bottom: 16px; }
    .section-title {
      font-size: 11pt;
      font-weight: 700;
      color: #2563EB;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 4px;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Tables */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 9pt;
    }
    th {
      background-color: #2563EB;
      color: white;
      font-weight: 600;
      text-align: left;
      padding: 6px 8px;
    }
    td {
      padding: 5px 8px;
      border-bottom: 1px solid #e2e8f0;
    }
    tr:nth-child(even) td { background-color: #f8fafc; }

    /* Badge colors */
    .pass { color: #059669; font-weight: 600; }
    .warning { color: #d97706; font-weight: 600; }
    .fail { color: #dc2626; font-weight: 600; }

    .pass-bg { background-color: #ecfdf5; }
    .warning-bg { background-color: #fffbeb; }
    .fail-bg { background-color: #fef2f2; }

    /* Capability colors */
    .cap-good { color: #059669; }
    .cap-marginal { color: #d97706; }
    .cap-poor { color: #dc2626; }

    /* Filters info box */
    .info-box {
      background-color: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      padding: 8px 12px;
      margin-bottom: 12px;
      font-size: 9pt;
    }
    .info-box .label { font-weight: 600; color: #64748B; }

    /* Chart container */
    .chart-container {
      text-align: center;
      margin: 10px 0;
      page-break-inside: avoid;
    }
    .chart-container svg {
      max-width: 100%;
      height: auto;
    }

    /* Summary cards */
    .summary-grid {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }
    .summary-card {
      flex: 1;
      text-align: center;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }
    .summary-card .number {
      font-size: 18pt;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
    }
    .summary-card .label {
      font-size: 8pt;
      color: #64748B;
      text-transform: uppercase;
      margin-top: 2px;
    }

    /* Page break */
    .page-break { page-break-before: always; }
  </style>
</head>
<body>
  <!-- Header -->
  <div class="report-header">
    <div class="logo-area">
      {% if company.logo_base64 %}
      <img src="{{ company.logo_base64 }}" alt="Logo">
      {% endif %}
      <span class="company-name">{{ company.company_name }}</span>
    </div>
    <div class="report-title">
      {% block report_title %}Report{% endblock %}
    </div>
  </div>

  <!-- Content -->
  {% block content %}{% endblock %}

  <!-- Footer -->
  <div class="report-footer">
    Generated {{ generated_at.strftime('%Y-%m-%d %H:%M') }} — Powered by TieMeasureFlow
  </div>
</body>
</html>
