/* ═════════════════════════════════════════════════════════════════════════
   SunMonitor — Report styling (modern refresh)
   Override van legacy rep-* regels in style.css.
   Gebruikt design-tokens uit tokens.css zodat het matcht met de rest.
   Houdt de print-vriendelijke #0D1117 dark header behouden.
   Laden NA style.css zodat overrides voorrang krijgen.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Header — Optie C: hybride (wit met smalle dark band) ──────────── */
.rep-header {
  background: #fff !important;
  color: var(--color-gray-900, #18160f) !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  border-radius: var(--radius-xl, 16px) !important;
  position: relative;
  overflow: hidden;
  display: block !important;
  border: 1px solid var(--color-gray-200, #e4dfd6) !important;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(24, 22, 15, 0.06));
}
.rep-header::before { display: none !important; }
.rep-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-logo-yellow, #f5c842) 0%, var(--color-logo-coral, #f08249) 100%) !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}
/* Smalle dark band bovenaan met brand-tagline */
.rep-header-band {
  background: #0D1117 !important;
  color: var(--color-logo-yellow, #f5c842) !important;
  padding: 11px 40px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}
.rep-header-inner {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  position: relative;
  z-index: 1;
  gap: 24px;
  padding: 28px 40px 32px !important;
}
.rep-header-left { flex: 1; min-width: 0; }
.rep-title {
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  color: var(--color-gray-900, #18160f) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.6px !important;
}
.rep-site-sub {
  font-size: 13px !important;
  color: var(--color-gray-600, #4a4540) !important;
  margin-top: 10px !important;
  font-weight: 400 !important;
}
.rep-customer-block {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-gray-50, #f8f7f4);
  border-left: 3px solid var(--color-brand, #d97706);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-gray-700, #2d2924);
}
.rep-customer-block .rep-cust-line { margin: 0; }
.rep-customer-block .rep-cust-name { font-size: 14px; margin-bottom: 2px; color: var(--color-gray-900, #18160f); }
.rep-customer-block .rep-cust-ref {
  display: inline-block;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  color: var(--color-gray-500, #756f66);
  margin-left: 8px;
  letter-spacing: 0.3px;
  font-weight: 400;
}
.rep-customer-block .rep-cust-contact,
.rep-customer-block .rep-cust-address {
  font-size: 11.5px;
  color: var(--color-gray-600, #4a4540);
}
.rep-meta-box {
  text-align: right;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  color: var(--color-gray-500, #756f66) !important;
  line-height: 1.9 !important;
  flex-shrink: 0;
  letter-spacing: 0.2px !important;
}
.rep-sun-orb {
  position: absolute;
  right: -50px;
  top: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--color-logo-yellow, #f5c842) 0%, var(--color-logo-coral, #f08249) 60%, transparent 80%);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

/* ─── Secties ────────────────────────────────────────────────────────── */
.rep-section {
  margin-bottom: var(--space-8, 24px) !important;
  padding-bottom: var(--space-7, 20px) !important;
  border-bottom: 1px solid var(--color-gray-200, #e4dfd6) !important;
}
.rep-section:last-child { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
.rep-sec-hdr { display: flex; align-items: center; gap: 12px; margin-bottom: 14px !important; }
.rep-sec-num {
  background: var(--color-logo-yellow, #f5c842) !important;
  color: #0D1117 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  letter-spacing: 0.3px !important;
}
.rep-sec-title {
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--color-gray-900, #18160f) !important;
  letter-spacing: -0.2px !important;
}

/* ─── KPI tiles ──────────────────────────────────────────────────────── */
.rep-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.rep-kpi-card {
  background: var(--surface-card, #fff) !important;
  border: 1px solid var(--color-gray-200, #e4dfd6) !important;
  border-radius: var(--radius-lg, 12px) !important;
  padding: 14px 14px 12px !important;
  min-height: 88px !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow 120ms ease, transform 120ms ease;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(24, 22, 15, 0.04));
}
.rep-kpi-card:hover {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(24, 22, 15, 0.05));
  transform: translateY(-1px);
}
.rep-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-brand, #d97706);
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.rep-kpi-card.highlight {
  background: #0D1117 !important;
  color: #fff !important;
  border-color: #0D1117 !important;
}
.rep-kpi-card.highlight::before { background: var(--color-logo-yellow, #f5c842) !important; }
.rep-kpi-card.warn {
  border-color: var(--color-warning, #f59e0b) !important;
  background: var(--color-warning-soft, #fef3c7) !important;
}
.rep-kpi-card.warn::before { background: var(--color-warning, #f59e0b) !important; }
.rep-kpi-card.good {
  border-color: var(--color-success, #10b981) !important;
  background: #f0fdf6 !important;
}
.rep-kpi-card.good::before { background: var(--color-success, #10b981) !important; }
.rep-kpi-lbl {
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 1.2px !important;
  color: var(--color-gray-400, #a09890) !important;
  text-transform: uppercase;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}
.rep-kpi-card.highlight .rep-kpi-lbl { color: rgba(255, 255, 255, 0.55) !important; }
.rep-kpi-val {
  font-family: var(--font-display, 'Syne', sans-serif) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  color: var(--color-gray-900, #18160f) !important;
}
.rep-kpi-card.highlight .rep-kpi-val { color: #fff !important; }
.rep-kpi-card.good .rep-kpi-val { color: var(--color-success-active, #059669) !important; }
.rep-kpi-card.warn .rep-kpi-val { color: var(--color-warning-active, #d97706) !important; }
.rep-kpi-val.pr-good { color: var(--color-success, #10b981) !important; }
.rep-kpi-val.pos { color: var(--color-success, #10b981) !important; }
.rep-kpi-val.neg { color: var(--color-danger, #ef4444) !important; }
.rep-kpi-unit, .rep-kpi-sub {
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  color: var(--color-gray-400, #a09890) !important;
  margin-top: 6px !important;
  letter-spacing: 0.2px !important;
}
.rep-kpi-card.highlight .rep-kpi-unit { color: rgba(255, 255, 255, 0.55) !important; }

/* ─── Tabellen ───────────────────────────────────────────────────────── */
.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.rep-table thead th {
  text-align: left;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 1.3px !important;
  color: var(--color-gray-400, #a09890) !important;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-gray-200, #e4dfd6) !important;
  padding: 10px 12px !important;
  background: var(--color-gray-50, #f8f7f4) !important;
}
.rep-table thead th:last-child { text-align: right; }
.rep-table tbody tr:nth-child(even) td { background: rgba(240, 237, 231, 0.35); }
.rep-table tbody td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--color-gray-100, #f0ede7) !important;
  color: var(--color-gray-700, #2d2924) !important;
}
.rep-table tbody tr:last-child td { border-bottom: none !important; }
.rep-val {
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-weight: 500;
  text-align: right;
  color: var(--color-gray-800, #1f1c17) !important;
}
.rep-val.rep-ref { color: var(--color-gray-400, #a09890) !important; font-weight: 400 !important; }
.rep-pr-source {
  display: block;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  color: var(--color-gray-400, #a09890) !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1px !important;
  font-weight: 400 !important;
}

/* ─── Badges (pill) ──────────────────────────────────────────────────── */
.rep-table .badge,
.rep-table .rep-badge,
.rep-page .badge {
  display: inline-block;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.rep-page .badge.green, .rep-page .rep-badge.green {
  background: var(--color-success-soft, #defded) !important;
  color: #065F46 !important;
}
.rep-page .badge.orange, .rep-page .rep-badge.orange {
  background: var(--color-warning-soft, #fef3c7) !important;
  color: #92400E !important;
}
.rep-page .badge.red, .rep-page .rep-badge.red {
  background: var(--color-danger-soft, #fee2e2) !important;
  color: #991B1B !important;
}
.rep-page .pos { color: var(--color-success, #10b981) !important; font-weight: 500 !important; }
.rep-page .neg { color: var(--color-danger, #ef4444) !important; font-weight: 500 !important; }

/* ─── Charts ─────────────────────────────────────────────────────────── */
.rep-bar-chart-daily {
  background: linear-gradient(to bottom, var(--color-gray-50, #f8f7f4) 0%, transparent 100%);
  border-radius: 8px;
}
.rep-chart-lbl {
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  color: var(--color-gray-500, #756f66) !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}
.rep-bar-legend, .rep-chart-legend {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 10px !important;
  color: var(--color-gray-500, #756f66) !important;
  margin-top: 8px;
  letter-spacing: 0.3px;
}
.rep-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.rep-dot.actual, .rep-dot.current { background: var(--color-brand, #d97706); }
.rep-dot.expected { background: var(--color-gray-200, #e4dfd6); border: 1px solid var(--color-gray-400, #a09890); }
.rep-dot.expected-line {
  background: transparent;
  border: 0;
  border-top: 2px dashed var(--color-info, #0ea5e9);
  height: 0;
  width: 14px;
  border-radius: 0;
}

/* ─── Maintenance / actions / recommendations ───────────────────────── */
.rep-maint-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rep-maint-item {
  font-size: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--color-gray-200, #e4dfd6) !important;
  background: var(--surface-card, #fff) !important;
  border-radius: 8px !important;
  color: var(--color-gray-600, #4a4540) !important;
}
.rep-action-item {
  font-size: 12px !important;
  padding: 10px 12px !important;
  border-left: 3px solid var(--color-warning, #f59e0b) !important;
  background: var(--color-warning-soft, #fef3c7) !important;
  border-radius: 0 8px 8px 0 !important;
  margin-bottom: 8px !important;
  color: var(--color-gray-700, #2d2924) !important;
}
.rep-rec-item {
  font-size: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--color-gray-200, #e4dfd6) !important;
  border-left: 3px solid var(--color-brand, #d97706) !important;
  border-radius: 0 8px 8px 0 !important;
  background: var(--surface-card, #fff) !important;
  margin-bottom: 10px !important;
  color: var(--color-gray-700, #2d2924) !important;
}
.rep-rec-title {
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  color: var(--color-gray-900, #18160f) !important;
}
.rep-rec-sub {
  font-size: 11px !important;
  color: var(--color-gray-500, #756f66) !important;
  line-height: 1.5 !important;
}

/* ─── Verlies cards ──────────────────────────────────────────────────── */
.rep-verlies-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rep-verlies-card {
  padding: 14px 16px;
  border: 1px solid var(--color-gray-200, #e4dfd6);
  border-radius: 10px;
  background: var(--surface-card, #fff);
}
.rep-verlies-lbl {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 9px;
  font-weight: 500;
  color: var(--color-gray-400, #a09890);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.rep-verlies-val {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gray-900, #18160f);
  letter-spacing: -0.3px;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.rep-footer {
  background: #0D1117 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 11px !important;
  padding: 16px 28px !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 var(--radius-xl, 16px) var(--radius-xl, 16px) !important;
  margin-top: var(--space-8, 24px) !important;
  letter-spacing: 0.2px !important;
}
.rep-footer strong { color: #fff !important; font-weight: 600 !important; }

/* ─── Integrity banner ───────────────────────────────────────────────── */
.rep-integrity-ok {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  font-size: 12px !important;
  color: var(--color-gray-600, #4a4540) !important;
  background: var(--color-success-soft, #defded) !important;
  border: 1px solid var(--color-success, #10b981) !important;
  border-left: 3px solid var(--color-success, #10b981) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: 0.1px !important;
  font-family: var(--font-sans, system-ui) !important;
}
.rep-integrity-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-success, #10b981) !important;
  flex: 0 0 auto;
}
.rep-integrity-warn {
  font-size: 12px !important;
  color: #92400E !important;
  background: var(--color-warning-soft, #fef3c7) !important;
  border: 1px solid var(--color-warning, #f59e0b) !important;
  border-left: 3px solid var(--color-warning, #f59e0b) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: 0.1px !important;
  font-family: var(--font-sans, system-ui) !important;
}
.rep-integrity-warn strong {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 11px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: #92400E !important;
  font-weight: 600 !important;
}
.rep-integrity-warn ul { margin: 0; padding-left: 18px; line-height: 1.55 !important; }
.rep-integrity-warn li { margin-bottom: 2px; }

/* ─── Notes & misc ───────────────────────────────────────────────────── */
.rep-notes-field {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--color-gray-200, #e4dfd6);
  border-radius: 8px;
  resize: vertical;
  color: var(--color-gray-700, #2d2924);
  background: var(--color-gray-50, #f8f7f4);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.rep-notes-field:focus {
  outline: none;
  border-color: var(--color-brand, #d97706);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
.rep-note {
  font-size: 12px !important;
  color: var(--color-gray-500, #756f66) !important;
  padding: 10px 14px !important;
  background: var(--color-gray-50, #f8f7f4) !important;
  border: 1px dashed var(--color-gray-200, #e4dfd6) !important;
  border-radius: 8px !important;
  margin-top: 12px !important;
}
.rep-loading {
  padding: 40px !important;
  text-align: center;
  color: var(--color-gray-400, #a09890) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 13px !important;
}
.rep-empty {
  padding: 20px !important;
  text-align: center;
  color: var(--color-gray-400, #a09890) !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  font-size: 12px !important;
}

/* ─── Print bar ──────────────────────────────────────────────────────── */
.rep-print-bar {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-gray-200, #e4dfd6);
  margin-bottom: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   KLANT-MODUS — vereenvoudigde, begrijpelijke rapport-weergave
   ═══════════════════════════════════════════════════════════════════════ */
.rep-mode-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin-bottom: 12px;
}
.rep-mode-lbl {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 11px;
  color: var(--color-gray-500, #756f66);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.rep-mode-btn {
  padding: 6px 14px;
  border: 1px solid var(--color-gray-200, #e4dfd6);
  background: #fff;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-gray-600, #4a4540);
  transition: all 150ms;
  font-weight: 500;
}
.rep-mode-btn:hover {
  background: var(--color-gray-50, #f8f7f4);
  border-color: var(--color-gray-300, #c8c0b3);
}
.rep-mode-btn.active {
  background: var(--color-brand, #d97706);
  color: #fff;
  border-color: var(--color-brand, #d97706);
}

/* Tooltip ?-icon naast technische termen */
.rep-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  background: var(--color-gray-200, #e4dfd6);
  color: var(--color-gray-600, #4a4540);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-sans, system-ui);
  cursor: help;
  vertical-align: middle;
  user-select: none;
  transition: background 120ms, color 120ms;
}
.rep-tip:hover { background: var(--color-brand, #d97706); color: #fff; }

/* Klant-modus — uniform met rest van rapport (zelfde schaal als sectie 01) */
.rep-simple-summary {
  background: linear-gradient(135deg, var(--color-brand-soft, #fffbeb) 0%, var(--surface-card, #fff) 100%);
  border: 1px solid var(--color-gray-200, #e4dfd6);
  border-left: 3px solid var(--color-brand, #d97706);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 20px !important;
  margin-bottom: var(--space-7, 20px) !important;
}
/* Titel = zelfde grootte als andere sec-titles (18px) */
.rep-simple-title {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-gray-900, #18160f);
  margin: 0 0 10px;
  letter-spacing: -0.2px;
}
/* Body-tekst = standaard body 13px (zelfde als tabellen) */
.rep-simple-text p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-gray-700, #2d2924);
  margin: 0 0 6px;
  font-weight: 400;
}
.rep-simple-text p:last-child { margin-bottom: 0; }

.rep-simple-heroes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: var(--space-7, 20px);
}
/* Hero tile = zelfde proporties als .rep-kpi-card (14px padding, 12px radius) */
.rep-simple-hero {
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-gray-200, #e4dfd6);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 14px 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(24,22,15,.04));
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rep-simple-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.rep-simple-hero-prod { background: linear-gradient(180deg, #fffbeb 0%, #fff 60%); }
.rep-simple-hero-prod::before { background: var(--color-brand, #d97706); }
.rep-simple-hero-money { background: linear-gradient(180deg, #defded 0%, #fff 60%); }
.rep-simple-hero-money::before { background: var(--color-success, #10b981); }
.rep-simple-hero-eco { background: linear-gradient(180deg, #e0f2fe 0%, #fff 60%); }
.rep-simple-hero-eco::before { background: var(--color-info, #0ea5e9); }
/* Icon kleiner — proportioneel met rest */
.rep-simple-hero-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 6px;
}
/* Label = zelfde als .rep-kpi-lbl (9px mono) */
.rep-simple-hero-lbl {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--color-gray-400, #a09890);
  text-transform: uppercase;
  margin-bottom: 6px;
  line-height: 1.2;
}
/* Waarde = zelfde als .rep-kpi-val (26px display) */
.rep-simple-hero-val {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-gray-900, #18160f);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
/* Unit = zelfde als .rep-kpi-unit (10px mono) */
.rep-simple-hero-unit {
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-size: 10px;
  color: var(--color-gray-400, #a09890);
  line-height: 1.3;
  letter-spacing: 0.2px;
}

/* H3 = zelfde als rep-sec-title (18px) — uniform met rest */
.rep-simple-h3 {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-gray-900, #18160f);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.rep-simple-health {
  background: var(--surface-card, #fff);
  border: 1px solid var(--color-gray-200, #e4dfd6);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 16px !important;
  margin-bottom: var(--space-7, 20px) !important;
}
.rep-simple-health-list { display: flex; flex-direction: column; gap: 6px; }
/* Health item = zelfde als andere body-text (13px) */
.rep-simple-health-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.rep-simple-health-item.good { background: var(--color-success-soft, #defded); color: #065F46; }
.rep-simple-health-item.warn { background: var(--color-warning-soft, #fef3c7); color: #92400E; }
.rep-simple-health-item.bad  { background: var(--color-danger-soft, #fee2e2); color: #991B1B; }
.rep-simple-health-item.info { background: var(--color-info-soft, #e0f2fe); color: #0369A1; }
.rep-simple-health-icon {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.rep-simple-highlights { margin-bottom: var(--space-7, 20px) !important; }
.rep-simple-hl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rep-simple-hl-col {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-gray-200, #e4dfd6);
}
/* H4 = zelfde als kpi-label (9px mono uppercase) */
.rep-simple-hl-col h4 {
  margin: 0 0 6px;
  font-size: 9px;
  font-family: var(--font-mono, 'DM Mono', monospace);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--color-gray-500, #756f66);
}
/* Lijst-tekst = zelfde als body (13px) */
.rep-simple-hl-col ul {
  margin: 0; padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.rep-simple-hl-col li { margin-bottom: 3px; }
.rep-simple-hl-good { background: var(--color-success-soft, #defded); border-color: var(--color-success, #10b981); }
.rep-simple-hl-good h4 { color: #065F46; }
.rep-simple-hl-attention { background: var(--color-warning-soft, #fef3c7); border-color: var(--color-warning, #f59e0b); }
.rep-simple-hl-attention h4 { color: #92400E; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile breakpoints
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet en kleiner desktop (≤ 900px) */
@media (max-width: 900px) {
  /* KPI rij standaard 5 cols → 3 cols */
  .rep-kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
  /* Inline 6-cols rij van detail-modus → 3 cols */
  .rep-kpi-row[style*="repeat(6"] { grid-template-columns: repeat(3, 1fr) !important; }
  /* Hero tiles blijven 3 — past nog */
  .rep-simple-heroes { grid-template-columns: repeat(3, 1fr); }
  /* Header inner: stack meta-box onder titel */
  .rep-header-inner { flex-direction: column; gap: 16px !important; }
  .rep-meta-box { text-align: left; }
  /* Header padding kleiner */
  .rep-header-inner { padding: 22px 28px 26px !important; }
  .rep-header-band { padding: 10px 28px !important; }
  /* Tabel iets compacter */
  .rep-table { font-size: 12.5px; }
  .rep-table tbody td { padding: 8px 10px !important; }
  /* Body padding minder */
  body { padding: 14px 18px !important; }
}

/* Mobile (≤ 600px) */
@media (max-width: 600px) {
  /* KPI tiles 2-koloms zodat ze leesbaar zijn */
  .rep-kpi-row,
  .rep-kpi-row[style*="repeat(5"],
  .rep-kpi-row[style*="repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Hero tiles stacken */
  .rep-simple-heroes {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .rep-simple-hero { min-height: 0 !important; padding: 12px 14px 10px !important; }
  .rep-simple-hero-val { font-size: 22px !important; }
  /* Highlights 2-col → 1-col gestapeld */
  .rep-simple-hl-grid { grid-template-columns: 1fr !important; }
  /* Tabellen horizontaal scrollbaar maken (incident table heeft 6 cols) */
  .rep-incident-tbl,
  .rep-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .rep-table thead, .rep-table tbody { display: table; width: 100%; min-width: 480px; }
  /* Performance Indicators: behoudt brede tabel met scroll */
  .rep-section .rep-table:not(.rep-incident-tbl) { white-space: normal; min-width: 0; }
  /* Header: kleiner titel + tighter spacing */
  .rep-title { font-size: 24px !important; line-height: 1.1 !important; }
  .rep-header-inner { padding: 18px 20px 22px !important; }
  .rep-header-band { padding: 9px 20px !important; font-size: 9px !important; letter-spacing: 1.1px !important; }
  .rep-meta-box { font-size: 9.5px !important; line-height: 1.7 !important; }
  /* Sun-orb subtieler / weg op mobile */
  .rep-sun-orb { width: 120px !important; height: 120px !important; right: -40px !important; top: -20px !important; opacity: .08 !important; }
  /* Maintenance grid → 1 col */
  .rep-maint-grid { grid-template-columns: 1fr !important; }
  /* Verlies grid → 1 col */
  .rep-verlies-grid { grid-template-columns: 1fr !important; }
  /* Footer: stack 3 → vertical */
  .rep-footer {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 14px 18px !important;
    font-size: 10px !important;
  }
  /* Mode-toggle blijft horizontaal, krimpt */
  .rep-mode-btn { padding: 5px 11px; font-size: 11px; }
  /* Daily chart bars iets smaller */
  .rep-bar-chart-daily, .rep-bar-chart-year { padding: 10px 4px !important; }
  /* Body padding compact */
  body { padding: 10px 12px !important; font-size: 13px !important; }
  /* Sectie padding compacter */
  .rep-section { margin-bottom: 14px !important; padding-bottom: 12px !important; }
  /* Klant-info block: stacken */
  .rep-customer-block { padding: 8px 10px; }
  .rep-customer-block .rep-cust-ref { display: block; margin-left: 0; margin-top: 2px; }
  /* Print-bar (download/CSV knoppen) stack */
  .rep-print-bar { flex-direction: column; gap: 8px; align-items: stretch; }
}

/* Klein mobile (≤ 380px) */
@media (max-width: 380px) {
  /* KPI's volledig gestapeld */
  .rep-kpi-row,
  .rep-kpi-row[style*="repeat(5"],
  .rep-kpi-row[style*="repeat(6"] {
    grid-template-columns: 1fr !important;
  }
  .rep-kpi-card { min-height: 0 !important; padding: 10px 12px 9px !important; }
  .rep-kpi-val { font-size: 22px !important; }
  /* Titel nog kleiner */
  .rep-title { font-size: 20px !important; }
  /* Tabel cellen: kleinere font */
  .rep-table, .rep-table tbody td { font-size: 11px !important; }
  .rep-table thead th { font-size: 8.5px !important; }
}

/* ─── A4 PRINT-MODE — geoptimaliseerd voor 1-2 pagina's ─────────────── */
@media print {
  /* Echte pagina-counter via @page bottom-right margin box */
  @page {
    size: A4;
    margin: 12mm 10mm 18mm 10mm;
    @bottom-right {
      content: "Pagina " counter(page) " van " counter(pages);
      font-family: var(--font-mono, 'DM Mono', monospace);
      font-size: 9px;
      color: rgba(255,255,255,.55);
      padding-top: 6px;
    }
  }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body { font-size: 11px !important; line-height: 1.45 !important; }
  .rep-page { max-width: none !important; margin: 0 !important; }
  .rep-print-bar, .no-print, .rep-admin-only, .rep-mode-toggle, .rep-tip { display: none !important; }

  /* Klant-modus print-overrides — uniform met rest van rapport bij A4 */
  .rep-simple-summary { padding: 9px 12px !important; margin-bottom: 10px !important; }
  .rep-simple-title { font-size: 14px !important; margin-bottom: 5px !important; }
  .rep-simple-text p { font-size: 10.5px !important; line-height: 1.45 !important; margin-bottom: 4px !important; }
  .rep-simple-heroes { gap: 6px !important; margin-bottom: 10px !important; }
  .rep-simple-hero { padding: 8px 9px 7px !important; min-height: 70px !important; box-shadow: none !important; border-radius: 6px !important; }
  .rep-simple-hero::before { height: 2px !important; }
  .rep-simple-hero-icon { font-size: 14px !important; margin-bottom: 4px !important; }
  .rep-simple-hero-lbl { font-size: 7.5px !important; letter-spacing: 0.8px !important; margin-bottom: 4px !important; }
  .rep-simple-hero-val { font-size: 19px !important; margin-bottom: 2px !important; }
  .rep-simple-hero-unit { font-size: 8px !important; }
  .rep-simple-h3 { font-size: 14px !important; margin-bottom: 8px !important; }
  .rep-simple-health { padding: 9px 11px !important; margin-bottom: 10px !important; }
  .rep-simple-health-list { gap: 4px !important; }
  .rep-simple-health-item { padding: 5px 9px !important; font-size: 10px !important; gap: 8px !important; }
  .rep-simple-health-icon { font-size: 10px !important; }
  .rep-simple-hl-grid { gap: 6px !important; }
  .rep-simple-hl-col { padding: 8px 10px !important; }
  .rep-simple-hl-col h4 { font-size: 8px !important; margin-bottom: 4px !important; }
  .rep-simple-hl-col ul { font-size: 10px !important; padding-left: 16px !important; }

  /* Header compacter op A4 */
  .rep-header { border-radius: 6px !important; margin-bottom: 10px !important; box-shadow: none !important; }
  .rep-header-band { padding: 7px 24px !important; font-size: 8.5px !important; letter-spacing: 1.2px !important; }
  .rep-header-inner { padding: 16px 24px 20px !important; }
  .rep-title { font-size: 22px !important; margin: 0 0 6px !important; }
  .rep-site-sub { font-size: 10px !important; margin-top: 4px !important; }
  .rep-customer-block { padding: 7px 10px !important; margin-top: 6px !important; font-size: 10px !important; line-height: 1.4 !important; }
  .rep-customer-block .rep-cust-name { font-size: 11px !important; margin-bottom: 1px !important; }
  .rep-customer-block .rep-cust-ref { font-size: 8.5px !important; }
  .rep-customer-block .rep-cust-contact,
  .rep-customer-block .rep-cust-address { font-size: 9.5px !important; }
  .rep-meta-box { font-size: 8.5px !important; line-height: 1.6 !important; }
  .rep-sun-orb { width: 120px !important; height: 120px !important; right: -30px !important; top: -10px !important; }

  /* Secties compacter */
  .rep-section { margin-bottom: 10px !important; padding-bottom: 8px !important; }
  .rep-sec-hdr { gap: 8px !important; margin-bottom: 8px !important; }
  .rep-sec-num { padding: 2px 6px !important; font-size: 9px !important; }
  .rep-sec-title { font-size: 14px !important; }

  /* KPI tiles compact maar leesbaar */
  .rep-kpi-row { gap: 6px !important; }
  .rep-kpi-card { padding: 8px 9px 7px !important; min-height: 60px !important; box-shadow: none !important; border-radius: 6px !important; }
  .rep-kpi-card::before { height: 2px !important; }
  .rep-kpi-lbl { font-size: 7.5px !important; letter-spacing: 0.8px !important; margin-bottom: 4px !important; line-height: 1.15 !important; }
  .rep-kpi-val { font-size: 19px !important; letter-spacing: -0.3px !important; }
  .rep-kpi-unit, .rep-kpi-sub { font-size: 8px !important; margin-top: 3px !important; line-height: 1.25 !important; }

  /* Tabellen compact */
  .rep-table { font-size: 10.5px !important; }
  .rep-table thead th { padding: 6px 8px !important; font-size: 7.5px !important; letter-spacing: 1px !important; }
  .rep-table tbody td { padding: 6px 8px !important; }
  .rep-pr-source { font-size: 8.5px !important; margin-top: 2px !important; }
  .rep-val { font-size: 10.5px !important; }

  /* Banner / notes compact */
  .rep-integrity-warn, .rep-integrity-ok, .rep-note { font-size: 10px !important; padding: 7px 10px !important; margin-bottom: 8px !important; }
  .rep-integrity-warn strong { font-size: 9px !important; margin-bottom: 3px !important; }
  .rep-integrity-warn ul { padding-left: 16px !important; line-height: 1.4 !important; }

  /* Executive summary tekst */
  .rep-exec-summary { padding: 9px 12px !important; margin-bottom: 10px !important; }
  .rep-exec-text { font-size: 10.5px !important; line-height: 1.45 !important; }

  /* Charts */
  .rep-bar-chart-daily { height: 70px !important; }
  .rep-bar-chart-year { height: 95px !important; }
  .rep-chart-lbl { font-size: 8px !important; margin-bottom: 4px !important; }
  .rep-bar-legend, .rep-chart-legend { font-size: 8px !important; margin-top: 5px !important; }

  /* Maintenance grid + items */
  .rep-maint-grid { gap: 6px !important; }
  .rep-maint-item, .rep-action-item, .rep-rec-item { font-size: 10px !important; padding: 7px 10px !important; margin-bottom: 5px !important; }
  .rep-rec-title { font-size: 10.5px !important; margin-bottom: 2px !important; }
  .rep-rec-sub { font-size: 9px !important; }

  /* Footer compact */
  .rep-footer { padding: 10px 20px !important; font-size: 9px !important; margin-top: 12px !important; border-radius: 0 0 6px 6px !important; }

  /* Print-color-adjust voor donkere backgrounds */
  .rep-header, .rep-header-band, .rep-footer, .rep-kpi-card.highlight,
  .rep-integrity-warn, .rep-integrity-ok, .rep-action-item, .rep-rec-item,
  .rep-sec-num, .badge, .rep-badge {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Page-break beheer: vermijd half-doorsneden secties */
  .rep-section { page-break-inside: avoid; break-inside: avoid; }
  .rep-header { page-break-after: avoid; break-after: avoid; }
  .rep-footer { page-break-before: avoid; break-before: avoid; }
}

/* ─── Executive summary (Prio 1) ─────────────────────────────────────── */
.rep-exec-summary {
  background: linear-gradient(135deg, var(--color-brand-soft, #fffbeb) 0%, var(--surface-card, #fff) 100%);
  border: 1px solid var(--color-gray-200, #e4dfd6);
  border-left: 4px solid var(--color-brand, #d97706);
  border-radius: var(--radius-lg, 12px);
  padding: 16px 20px !important;
  margin-bottom: var(--space-7, 20px) !important;
}
.rep-exec-summary .rep-sec-hdr { margin-bottom: 10px !important; }
.rep-exec-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-gray-700, #2d2924);
  font-weight: 400;
}

/* ─── Trend arrow (Prio 2) ───────────────────────────────────────────── */
.rep-trend {
  display: inline-block;
  font-size: 10px !important;
  font-family: var(--font-mono, 'DM Mono', monospace) !important;
  margin-left: 6px;
  font-weight: 600 !important;
  vertical-align: super;
}
.rep-trend.pos { color: var(--color-success, #10b981); }
.rep-trend.neg { color: var(--color-danger, #ef4444); }
.rep-kpi-card.highlight .rep-trend.pos { color: var(--color-success, #10b981); }
.rep-kpi-card.highlight .rep-trend.neg { color: #fca5a5; }