<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ report_title }} - TOD</title>
  <style>
    @page {
      size: {% block page_size %}A4 portrait{% endblock %};
      margin: 20mm 15mm 25mm 15mm;
      @bottom-center {
        content: "Page " counter(page) " of " counter(pages);
        font-size: 9px;
        color: #64748B;
      }
      @bottom-right {
        content: "Generated by TOD";
        font-size: 9px;
        color: #64748B;
      }
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 11px;
      color: #1E293B;
      line-height: 1.5;
    }

    .report-header {
      background: #1E293B;
      color: #FFFFFF;
      padding: 16px 20px;
      margin: -20mm -15mm 20px -15mm;
      padding-left: 15mm;
      padding-right: 15mm;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .report-header .brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .report-header .brand .logo {
      width: 28px;
      height: 28px;
      background: #38BDF8;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      color: #0F172A;
    }

    .report-header .brand .name {
      font-size: 14px;
      font-weight: 600;
    }

    .report-header .meta {
      text-align: right;
      font-size: 10px;
      color: #94A3B8;
    }

    .report-header .meta .title {
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      margin-bottom: 2px;
    }

    .report-body {
      padding: 0;
    }

    .section-title {
      font-size: 13px;
      font-weight: 600;
      color: #0F172A;
      border-bottom: 2px solid #38BDF8;
      padding-bottom: 6px;
      margin-bottom: 12px;
      margin-top: 20px;
    }

    .section-title:first-child {
      margin-top: 0;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 16px;
      font-size: 10px;
    }

    thead th {
      background: #F1F5F9;
      color: #475569;
      font-weight: 600;
      text-align: left;
      padding: 8px 10px;
      border-bottom: 2px solid #E2E8F0;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    tbody td {
      padding: 7px 10px;
      border-bottom: 1px solid #F1F5F9;
      vertical-align: top;
    }

    tbody tr:nth-child(even) {
      background: #FAFBFC;
    }

    .summary-box {
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 6px;
      padding: 12px 16px;
      margin-bottom: 16px;
      display: flex;
      gap: 24px;
    }

    .summary-stat {
      text-align: center;
    }

    .summary-stat .value {
      font-size: 20px;
      font-weight: 700;
      color: #0F172A;
    }

    .summary-stat .label {
      font-size: 9px;
      color: #64748B;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 9px;
      font-weight: 600;
    }

    .badge-online { background: #DCFCE7; color: #166534; }
    .badge-offline { background: #FEE2E2; color: #991B1B; }
    .badge-unknown { background: #F1F5F9; color: #475569; }
    .badge-critical { background: #FEE2E2; color: #991B1B; }
    .badge-warning { background: #FEF3C7; color: #92400E; }
    .badge-info { background: #DBEAFE; color: #1E40AF; }
    .badge-firing { background: #FEE2E2; color: #991B1B; }
    .badge-resolved { background: #DCFCE7; color: #166534; }
    .badge-acknowledged { background: #DBEAFE; color: #1E40AF; }

    .date-range {
      font-size: 11px;
      color: #64748B;
      margin-bottom: 12px;
    }

    .no-data {
      text-align: center;
      padding: 40px 20px;
      color: #94A3B8;
      font-size: 12px;
    }

    {% block extra_styles %}{% endblock %}
  </style>
</head>
<body>
  <div class="report-header">
    <div class="brand">
      <div class="logo">M</div>
      <div class="name">TOD - The Other Dude</div>
    </div>
    <div class="meta">
      <div class="title">{{ report_title }}</div>
      <div>{{ tenant_name }} &bull; Generated {{ generated_at }}</div>
    </div>
  </div>

  <div class="report-body">
    {% block content %}{% endblock %}
  </div>
</body>
</html>
