<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: #1F2937; background: #F7F8FA; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.header {
  background: linear-gradient(135deg, #4C1D95, #2D1B69);
  color: #fff; padding: 40px 0 36px; text-align: center;
}
.header h1 { font-size: 26px; font-weight: 700; letter-spacing: 1px; }
.header .sub { font-size: 14px; opacity: 0.6; margin-top: 6px; }

.container { max-width: 880px; margin: -20px auto 40px; padding: 0 20px; }

.meta-card {
  background: #fff; border-radius: 10px; padding: 24px 30px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.meta-card .meta-left { font-size: 14px; color: #6B7280; }
.meta-card .meta-left strong { color: #1F2937; }
.meta-card .meta-right { font-size: 13px; color: #6B7280; text-align: right; }

.section {
  background: #fff; border-radius: 10px; padding: 28px 30px;
  margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.section h2 {
  font-size: 17px; color: #4C1D95; margin-bottom: 18px;
  padding-bottom: 10px; border-bottom: 2px solid #E5E7EB;
}
.section h2 .icon { margin-right: 8px; }

/* Summary cards */
.summary-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}
.summary-item {
  padding: 16px; border-radius: 8px; text-align: center; border: 1px solid #E5E7EB;
}
.summary-item .count { font-size: 28px; font-weight: 800; }
.summary-item .label { font-size: 12px; color: #6B7280; margin-top: 2px; }
.si-pass { background: #F5F3FF; border-color: #DDD6FE; }
.si-pass .count { color: #7C3AED; }
.si-warn { background: #FFFBEB; border-color: #FDE68A; }
.si-warn .count { color: #F59E0B; }
.si-pending { background: #FDF2F8; border-color: #FBCFE8; }
.si-pending .count { color: #EC4899; }

/* Role summary cards */
.role-summary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.role-card {
  padding: 18px 14px; border-radius: 8px; text-align: center; border: 1px solid #E5E7EB;
  background: #FAFAFA;
}
.role-card .role-name { font-size: 14px; font-weight: 700; color: #4C1D95; margin-bottom: 8px; }
.role-card .role-stats { display: flex; justify-content: center; gap: 14px; font-size: 12px; }
.role-card .role-stats span { display: flex; align-items: center; gap: 3px; }
.role-card .rs-pass { color: #7C3AED; }
.role-card .rs-warn { color: #F59E0B; }
.role-card .rs-pending { color: #EC4899; }

/* Detail table */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: #4C1D95; color: #fff; font-weight: 600;
  padding: 10px 14px; text-align: left; font-size: 12px;
}
thead th:first-child { border-radius: 6px 0 0 0; }
thead th:last-child { border-radius: 0 6px 0 0; }
tbody td { padding: 10px 14px; border-bottom: 1px solid #E5E7EB; vertical-align: top; }
.role-separator td {
  background: #F5F3FF; font-weight: 700; color: #4C1D95;
  padding: 10px 14px; font-size: 13px; border-bottom: 2px solid #DDD6FE;
}

.pass { color: #7C3AED; font-weight: 700; }
.warn { color: #F59E0B; font-weight: 700; }
.pending { color: #EC4899; font-weight: 700; }

/* Alert boxes */
.alert-box {
  padding: 14px 18px; border-radius: 8px; font-size: 13px;
  margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start;
}
.alert-warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.alert-info { background: #F5F3FF; border: 1px solid #DDD6FE; color: #4C1D95; }
.alert-danger { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }
.alert-icon { font-size: 16px; flex-shrink: 0; }

/* Budget bar */
.budget-bar {
  background: #F3F4F6; border-radius: 8px; height: 24px;
  margin: 12px 0; overflow: hidden; position: relative;
}
.budget-bar .fill {
  height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, #7C3AED, #F59E0B, #DC2626);
  width: {{budget_ratio}}%;
}
.budget-info { display: flex; justify-content: space-between; font-size: 12px; color: #6B7280; margin-bottom: 4px; }
.budget-info strong { color: #1F2937; }

/* Approval list */
.approval-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid #E5E7EB; font-size: 13px;
}
.approval-item:last-child { border-bottom: none; }

.footer {
  text-align: center; padding: 24px; color: #9CA3AF; font-size: 12px;
}
.footer .divider { width: 30px; height: 2px; background: #D1D5DB; margin: 0 auto 12px; }

@media print {
  body { background: #fff; }
  .section { box-shadow: none; border: 1px solid #ddd; }
}
</style>
</head>
<body>

<div class="header">
  <h1>{{report_title}}</h1>
  <div class="sub">{{report_subtitle}}</div>
</div>

<div class="container">

<div class="meta-card">
  <div class="meta-left">
    <strong>{{client_name}}</strong> &nbsp;·&nbsp; {{quote_no}}<br>
    报价方：{{company_name}} &nbsp;|&nbsp; 报价人：{{quoter_name}}
  </div>
  <div class="meta-right">
    报价日期：{{quote_date}}<br>
    有效期至：{{valid_until}}<br>
    含税总价：<strong style="color:#DC2626">¥{{grand_total_fmt}}</strong>
  </div>
</div>

<!-- 质检汇总 -->
<div class="section">
  <h2><span class="icon">📊</span>质检汇总</h2>
  <div class="summary-row">
    <div class="summary-item si-pass"><div class="count">{{overall_pass}}</div><div class="label">✅ 通过</div></div>
    <div class="summary-item si-warn"><div class="count">{{overall_warn}}</div><div class="label">⚠️ 建议</div></div>
    <div class="summary-item si-pending"><div class="count">{{overall_pending}}</div><div class="label">❓ 待确认</div></div>
    <div class="summary-item" style="background:#F3F4F6"><div class="count" style="color:#6B7280">{{overall_total}}</div><div class="label">总计检查项</div></div>
  </div>
</div>

<!-- 分角色统计 -->
<div class="section">
  <h2><span class="icon">👥</span>分角色统计</h2>
  <div class="role-summary-grid">
    {{role_summary_rows}}
  </div>
</div>

<!-- 详细质检清单（按角色分组） -->
<div class="section">
  <h2><span class="icon">📋</span>详细质检清单</h2>
  <table>
    <thead>
      <tr><th style="width:60px">#</th><th>检查项</th><th style="width:60px">结果</th><th style="width:200px">说明</th></tr>
    </thead>
    <tbody>
      {{qa_detail_rows}}
    </tbody>
  </table>
</div>

<!-- 预算分析 -->
<div class="section">
  <h2><span class="icon">💰</span>预算分析</h2>
  <div class="budget-info"><span>客户预算</span><span><strong>¥{{budget_amount_fmt}}</strong></span></div>
  <div class="budget-bar"><div class="fill"></div></div>
  <div class="budget-info"><span>报价金额</span><span><strong style="color:#DC2626">¥{{grand_total_fmt}}</strong></span></div>
  <p style="margin-top:10px;font-size:13px;color:#6B7280;">
    超出预算 <strong style="color:#DC2626">{{budget_overflow}}%</strong>{{budget_warning}}
  </p>
</div>

<!-- 风险与待确认 -->
<div class="section">
  <h2><span class="icon">⚠️</span>风险与待确认事项</h2>
  {{risk_alerts}}
</div>

<!-- 审批清单 -->
<div class="section">
  <h2><span class="icon">✅</span>审批清单</h2>
  {{approval_items}}
</div>

<div class="footer">
  <div class="divider"></div>
  <p>内部质检报告 · 仅供内部审批使用 · 不得向客户披露</p>
  <p style="margin-top:4px">报价人：{{quoter_name}} &nbsp;|&nbsp; {{quoter_phone}} &nbsp;|&nbsp; {{quoter_email}}</p>
</div>

</div>
</body>
</html>
