Add per-company backup reports (printable page and CSV)

/report.html shows one company's backups over the last 7, 30 or 90
days, chosen in the page and kept in the URL so reports can be
bookmarked or linked. Reached from Reports in the top bar, or a
company's name in a job's detail.

- Summary (jobs, runs, success rate, warnings, failures, overdue now);
  per job: run counts, success rate (successful / finished runs), last
  result and last successful backup; a day-by-day strip; every warning
  and failure with its message
- Print / Save as PDF: a print stylesheet prints light whatever the
  screen theme, hides the controls, keeps rows and strips whole across
  pages, and keeps the coloured cells and badges
- Days before a job was first known show as "Not monitored yet"
  rather than as missed backups, so a 90-day report for a newly added
  client doesn't look like 60 days of failures
- CSV of every run (full messages, times in the browser's time zone,
  UTF-8 BOM for Excel, formula-like values defused with a leading ')

Backend: GET /api/v1/tenants, /api/v1/reports/tenant and
/api/v1/reports/tenant.csv; periods capped at retention. tzdata added
for systems without time zone data. Frontend status and day-strip
helpers moved out of app.js into status.js / history.js for reuse.

Tested: 9 new backend tests; in the browser against the API with 30
days of demo history (summary, issues, strips, 7/30/90 switching,
CSV download with BOM, print styles applied on screen), mock mode and
phone width.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

public/css/styles.css

@@ -422,3 +422,104 @@ code {
 .modal--small { width: min(460px, calc(100vw - 2rem)); }
 .modal--small .modal__body p { margin-top: 0; }
 .dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
+
+/* ---------- Report page ---------- */
+.report-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.75rem 1rem;
+  margin-bottom: 1.25rem;
+}
+.report-controls__field { display: flex; flex-direction: column; gap: 0.25rem; }
+.report-controls__field label { font-weight: 600; font-size: 0.9rem; }
+.report-controls__field .input { width: auto; min-width: 14rem; }
+.report-controls__actions { display: flex; gap: 0.5rem; margin-left: auto; }
+.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
+
+.report__header { margin-bottom: 1rem; }
+.report__title { margin: 0; font-size: 1.4rem; }
+.report__period { margin: 0.25rem 0 0; color: var(--muted); }
+.report__section-title { font-size: 1.05rem; margin: 1.75rem 0 0.75rem; }
+.report__footer { margin-top: 1.5rem; font-size: 0.85rem; }
+
+.report-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 0.75rem;
+  margin: 0;
+}
+.report-summary__item {
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-left-width: 4px;
+  border-radius: var(--radius);
+}
+.report-summary__item dt { font-size: 0.85rem; color: var(--muted); }
+.report-summary__item dd { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
+.report-summary__item--warning { border-left-color: var(--warning-bd); }
+.report-summary__item--failed { border-left-color: var(--failed-bd); }
+
+/* Row headers (job names) are <th> for accessibility, but shouldn't look like the column headings */
+.report-table tbody th {
+  background: none; color: var(--text); font-size: inherit; font-weight: 600;
+  text-transform: none; letter-spacing: normal;
+}
+.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+.report-table td > .time__rel { display: block; }
+.report-table .badge { font-size: 0.75rem; padding: 0.1rem 0.5rem; }
+.report-alert { color: var(--failed-fg); font-weight: 600; }
+.report-message { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 20rem; font-size: 0.85rem; }
+.nowrap { white-space: nowrap; }
+
+.report-legend {
+  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem;
+  margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.85rem; color: var(--muted);
+}
+.report-legend li { display: flex; align-items: center; gap: 0.35rem; }
+.report-legend .day { display: inline-block; width: 0.9rem; height: 0.9rem; }
+
+.report-daily__job { margin-bottom: 0.75rem; }
+.report-daily__name { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
+/* One cell per day of the report's period */
+.report-strip { grid-template-columns: repeat(var(--days, 30), 1fr); gap: 2px; }
+.report-strip .day { display: block; height: 18px; cursor: default; }
+/* Before the dashboard knew of the job: outlined only, so it doesn't read as a missed backup */
+.day--untracked { background: transparent; border: 1px dashed var(--muted); opacity: 0.5; }
+
+/* ---------- Printing ---------- */
+@media print {
+  /* Always print light, whatever the screen's theme (same values as the light tokens above) */
+  :root {
+    color-scheme: light;
+    --bg: #ffffff;
+    --surface: #ffffff;
+    --surface-alt: #f0f2f5;
+    --border: #c9ced6;
+    --text: #1f2328;
+    --muted: #57606a;
+    --accent: #0969da;
+    --success-fg: #116329; --success-bg: #dafbe1; --success-bd: #4ac26b;
+    --warning-fg: #7d4e00; --warning-bg: #fff8c5; --warning-bd: #d4a72c;
+    --failed-fg:  #a40e26; --failed-bg:  #ffebe9; --failed-bd:  #ff8182;
+    --unknown-fg: #57606a; --unknown-bg: #eaeef2; --unknown-bd: #afb8c1;
+    --running-fg: #0550ae; --running-bg: #ddf4ff; --running-bd: #54aeff;
+    --shadow: none;
+    font-size: 11pt;
+  }
+  @page { margin: 14mm; }
+  body { background: #fff; color: var(--text); }
+  .no-print, .topbar, .banner { display: none !important; }
+  .container { max-width: none; padding: 0; }
+  .table-wrap { overflow: visible; box-shadow: none; }
+  .jobs th, .jobs td { white-space: normal; padding: 0.35rem 0.5rem; }
+  .jobs tbody tr:hover { background: none; }
+  .report-message { min-width: 0; }
+  /* Keep things whole across page breaks */
+  tr, .report-daily__job, .report-summary__item, .report-legend { break-inside: avoid; }
+  .report__section-title { break-after: avoid; }
+  thead { display: table-header-group; }  /* repeat column headings on each page */
+  /* Browsers drop backgrounds when printing unless told they carry meaning */
+  .day, .badge, .report-summary__item { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+}