From daac5d73922151adcbb062206cc4f653a4c1609f Mon Sep 17 00:00:00 2001
From: Jan Novak <kacerr.cz@gmail.com>
Date: Fri, 8 May 2026 10:17:03 +0200
Subject: [PATCH] =?UTF-8?q?fix(go):=20adults=20template=20=E2=80=94=20emit?=
 =?UTF-8?q?=20markup=20that=20the=20lifted=20CSS=20expects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The lifted-from-Python app.css already styles .list-container/.list-item,
.unmatched-row, .balance-pos/.balance-neg, and cell-{status}; the M6.2
template invented .credits-list / .unmatched-table / .balance-cell that
had no rules, so those sections rendered unstyled.

- Credits / Debts: <ul><li> → <div class="list-container"><div class="list-item">
  <span class="list-item-name"> + <span class="list-item-val"> (debts red inline).
- Unmatched: <table> → <div class="list-container"> + <div class="unmatched-row">.
- Balance cell: balance-pos / balance-neg with style="position: relative;";
  Pay-All button now lives inside it (no separate trailing column).
- Total row: cell-{status} + caption span "received / expected" + bold/dark inline styles.
- Drop redundant .cell wrapper class; balance value drops trailing "CZK".
- Section headings: "Credits (Advance Payments / Surplus)" + "Debts (Missing Payments)".
- Source links: <div class="description"> block under h1 (was at page bottom).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 CHANGELOG.md                          |   9 +++
 go/internal/web/templates/adults.tmpl | 106 +++++++++++++-------------
 2 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c8ca2e..b27ec29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 2026-05-08 10:15 CEST — fix(go): adults template — use lifted CSS classes for visual parity
+
+- Use existing `.balance-pos` / `.balance-neg` (drop invented `balance-cell` / `balance-negative`); Pay-All button now lives inside the balance cell with `position: relative` (matches Python; no separate trailing column).
+- Credits / Debts / Unmatched sections rewritten from `<ul>` / `<table>` to `<div class="list-container"><div class="list-item">…` / `<div class="unmatched-row">…` so the lifted CSS actually applies.
+- Section headings get the descriptive Python text: "Credits (Advance Payments / Surplus)", "Debts (Missing Payments)".
+- Source links moved from page bottom to a `<div class="description">` block under the h1, matching Python's "Source: Attendance Sheet | Payments Ledger".
+- Total row uses `cell-{{Status}}` plus the small "received / expected" caption span and Python's inline-styled bold/dark background.
+- Drop the redundant `class="cell"` wrapper; debts amount turns red via inline style; balance value drops the trailing "CZK".
+
 ## 2026-05-08 01:09 CEST — feat(go): M6.2 — adults page (table, filters, Pay buttons)
 
 - `go/internal/web/api/handler.go`: extracted `ServeAdults` body into `AssembleAdults(ctx)` — shared by the JSON API route and the new HTML handler.
diff --git a/go/internal/web/templates/adults.tmpl b/go/internal/web/templates/adults.tmpl
index ce4ca0b..5201d21 100644
--- a/go/internal/web/templates/adults.tmpl
+++ b/go/internal/web/templates/adults.tmpl
@@ -3,9 +3,15 @@
 <h1>Adults Dashboard</h1>
 
 {{if .Error}}
-<p class="description error-banner">Error loading data: {{.Error}}</p>
+<div class="description">Error loading data: {{.Error}}</div>
 {{else}}
 
+<div class="description">
+  Balances calculated by matching Google Sheet payments against attendance fees.<br>
+  Source: <a href="{{.Data.AttendanceURL}}" target="_blank" rel="noopener">Attendance Sheet</a> |
+  <a href="{{.Data.PaymentsURL}}" target="_blank" rel="noopener">Payments Ledger</a>
+</div>
+
 <div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}">
   <div class="filter-item">
     <label class="filter-label" for="nameFilter">Member</label>
@@ -30,14 +36,13 @@
     </select>
   </div>
   <div class="filter-item">
-    <button id="applyFilter" class="filter-btn">Apply</button>
-    <button id="clearFilter" class="filter-btn">All</button>
+    <button id="applyFilter" class="filter-select" type="button" style="cursor: pointer;">Apply</button>
+    <button id="clearFilter" class="filter-select" type="button" style="cursor: pointer;">All</button>
   </div>
 </div>
 
 {{if .Data.Results}}
-<div class="table-wrapper">
-<table class="reconcile-table">
+<table>
   <thead>
     <tr>
       <th>Member</th>
@@ -45,7 +50,6 @@
       <th data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}">{{$m}}</th>
       {{end}}
       <th>Balance</th>
-      <th></th>
     </tr>
   </thead>
   <tbody>
@@ -53,84 +57,82 @@
     <tr class="member-row" data-name="{{$row.Name}}">
       <td class="member-name">{{$row.Name}}</td>
       {{range $i, $cell := $row.Months}}
-      <td class="cell cell-{{$cell.Status}}{{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (ge $cell.RawMonth $.Data.CurrentMonth)}} cell-unpaid-current{{end}}{{if $cell.Overridden}} cell-overridden{{end}}"
-          data-month-idx="{{$i}}" title="{{$cell.Tooltip}}">
+      <td data-month-idx="{{$i}}" title="{{$cell.Tooltip}}"
+          class="cell-{{$cell.Status}}{{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (ge $cell.RawMonth $.Data.CurrentMonth)}} cell-unpaid-current{{end}}{{if $cell.Overridden}} cell-overridden{{end}}">
         {{$cell.Text}}
         {{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (lt $cell.RawMonth $.Data.CurrentMonth)}}
         <a class="pay-btn" href="{{qrHref $.Data.BankAccount $cell.Amount $row.Name $cell.RawMonth}}">Pay</a>
         {{end}}
       </td>
       {{end}}
-      <td class="balance-cell{{if lt $row.Balance 0}} balance-negative{{end}}">{{$row.Balance}} CZK</td>
-      <td class="payall-cell">
+      <td class="{{if lt $row.Balance 0}}balance-neg{{else if gt $row.Balance 0}}balance-pos{{end}}" style="position: relative;">
+        {{$row.Balance}}
         {{if gt $row.PayableAmount 0}}
-        <a class="pay-btn pay-all-btn" href="{{qrHrefAll $.Data.BankAccount $row.PayableAmount $row.Name $row.RawUnpaidPeriods}}">Pay All</a>
+        <a class="pay-btn" href="{{qrHrefAll $.Data.BankAccount $row.PayableAmount $row.Name $row.RawUnpaidPeriods}}">Pay All</a>
         {{end}}
       </td>
     </tr>
     {{end}}
-    <tr class="totals-row">
-      <td><strong>TOTAL</strong></td>
+    <tr class="totals-row" style="font-weight: bold; background-color: #111; border-top: 2px solid #333;">
+      <td style="text-align: left; padding: 6px 8px;">TOTAL</td>
       {{range $i, $t := .Data.Totals}}
-      <td class="total-cell total-cell-{{$t.Status}}" data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}">{{$t.Text}}</td>
+      <td data-month-idx="{{$i}}" data-raw-month="{{index $.Data.RawMonths $i}}" class="cell-{{$t.Status}}" style="padding-top: 4px; padding-bottom: 4px;">
+        <span style="font-size: 0.6em; font-weight: normal; color: #666; text-transform: lowercase; display: block; margin-bottom: 2px;">received / expected</span>
+        {{$t.Text}}
+      </td>
       {{end}}
-      <td colspan="2"></td>
+      <td></td>
     </tr>
   </tbody>
 </table>
-</div>
 {{else}}
-<p class="description">No members found.</p>
+<div class="description">No members found.</div>
 {{end}}
 
 {{if .Data.Credits}}
-<h2 class="section-header">Credits</h2>
-<ul class="credits-list">
+<h2>Credits (Advance Payments / Surplus)</h2>
+<div class="list-container">
   {{range .Data.Credits}}
-  <li>{{.Name}}: <strong>+{{.Amount}} CZK</strong></li>
+  <div class="list-item">
+    <span class="list-item-name">{{.Name}}</span>
+    <span class="list-item-val">{{.Amount}} CZK</span>
+  </div>
   {{end}}
-</ul>
+</div>
 {{end}}
 
 {{if .Data.Debts}}
-<h2 class="section-header">Debts</h2>
-<ul class="debts-list">
+<h2>Debts (Missing Payments)</h2>
+<div class="list-container">
   {{range .Data.Debts}}
-  <li>{{.Name}}: <strong>−{{.Amount}} CZK</strong></li>
+  <div class="list-item">
+    <span class="list-item-name">{{.Name}}</span>
+    <span class="list-item-val" style="color: #ff3333;">{{.Amount}} CZK</span>
+  </div>
   {{end}}
-</ul>
+</div>
 {{end}}
 
 {{if .Data.Unmatched}}
-<h2 class="unmatched-header section-header">Unmatched Transactions</h2>
-<table class="unmatched-table">
-  <thead>
-    <tr>
-      <th>Date</th>
-      <th>Amount</th>
-      <th>Sender</th>
-      <th>Message</th>
-    </tr>
-  </thead>
-  <tbody>
-    {{range .Data.Unmatched}}
-    <tr class="unmatched-row">
-      <td>{{.Date}}</td>
-      <td>{{printf "%.0f" .Amount}} CZK</td>
-      <td>{{.Sender}}</td>
-      <td>{{.Message}}</td>
-    </tr>
-    {{end}}
-  </tbody>
-</table>
+<h2>Unmatched Transactions</h2>
+<div class="list-container">
+  <div class="unmatched-row unmatched-header">
+    <span>Date</span>
+    <span>Amount</span>
+    <span>Sender</span>
+    <span>Message</span>
+  </div>
+  {{range .Data.Unmatched}}
+  <div class="unmatched-row">
+    <span>{{.Date}}</span>
+    <span>{{printf "%.0f" .Amount}}</span>
+    <span>{{.Sender}}</span>
+    <span>{{.Message}}</span>
+  </div>
+  {{end}}
+</div>
 {{end}}
 
-<p class="sheet-links">
-  <a href="{{.Data.AttendanceURL}}" target="_blank" rel="noopener">[Attendance sheet]</a>
-  &middot;
-  <a href="{{.Data.PaymentsURL}}" target="_blank" rel="noopener">[Payments sheet]</a>
-</p>
-
 {{end}}
 
 <script src="/static/js/filters.js" defer></script>