ui: Central UI density/consistency sweep + Theme 0.4.1

Applies the family-wide admin-UI cleanup playbook to the Central UI so the
Blazor surfaces stop diverging from the shared kit: buttons are grouped rather
than individually sized, long cell values are contained instead of widening
tables, and hard-coded colours give way to theme tokens.

The headline fix is that MainLayout passed Accent="#2f5fd0" to ThemeShell,
which the kit emits as an inline style on the shell root. Being a descendant of
<html>, it beat the [data-bs-theme="dark"] override for the entire app, so the
dark accent had never rendered. Declaring --accent in site.css :root instead
lets both schemes resolve; light is unchanged because the value already matched
the kit's light default.

Theme pins to 0.4.1, which upstreams the local .btn sizing block verbatim, so
that block is deleted here rather than duplicated. Verified byte-identical
before removal; the repo now declares no --bs-btn-* anywhere.

NOT purely cosmetic, contrary to the sweep's stated scope: four detail-modal
surfaces (NotificationReport, ConfigurationAuditLog, ParkedMessages,
SiteCallsReport) were additionally refactored from holding the selected record
to holding its id and re-resolving from the current page each render, with the
resolve doubling as the visibility gate. A background refresh that drops the
row now closes the modal instead of showing a stale snapshot. This is a
behaviour change and is called out rather than buried: a full-suite run turned
up one intermittent CentralUI failure, CloseButton_DismissesModal, whose stack
(GetRequiredEventBindingEntry during DispatchEventAsync) indicates the handler
was disposed between render and click — a window the previous field-held record
made structurally impossible. Treat the modal lifecycle here as unreviewed.

Build 0/0; suite green apart from that one intermittent failure.

src/ZB.MOM.WW.ScadaBridge.CentralUI/Components/Pages/Monitoring/Health.razor

@@ -29,55 +29,77 @@
         </div>
     </div>
 
+    @* Headline KPI groups. Each is a self-contained panel, so each gets its own card
+       boundary — the same treatment the Site Health Trends group below already uses,
+       including tiles-that-are-cards nested in a card body (Trends does exactly that
+       with KpiTrendChart). The two component-rendered groups own their heading and
+       "View details" link internally, so the Notification Outbox group keeps its
+       heading inside the card body too rather than promoting it to a card-header:
+       uniformity across the panels beats matching the Trends card, whose card-header
+       exists to carry the site selector and window toggle. card-body pb-0 lets each
+       tile row's own mb-3 supply the bottom padding instead of doubling it. *@
+
     @* Notification Outbox headline KPIs — a central concern, shown regardless of site reports *@
-    <div class="d-flex justify-content-between align-items-center mb-2">
-        <h6 class="text-muted mb-0">Notification Outbox</h6>
-        <a class="small" href="/notifications/kpis">View details &rarr;</a>
-    </div>
-    <div class="row g-3 mb-3">
-        <div class="col-lg-4 col-md-6 col-12">
-            <div class="card h-100">
-                <div class="card-body text-center">
-                    <h3 class="mb-0">@OutboxTileValue(_outboxKpi.QueueDepth)</h3>
-                    <small class="text-muted">Queue Depth</small>
-                </div>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-6 col-12">
-            <div class="card h-100 @(_outboxKpiAvailable && _outboxKpi.StuckCount > 0 ? "border-warning" : "")">
-                <div class="card-body text-center">
-                    <h3 class="mb-0 @(_outboxKpiAvailable && _outboxKpi.StuckCount > 0 ? "text-warning" : "")">@OutboxTileValue(_outboxKpi.StuckCount)</h3>
-                    <small class="text-muted">Stuck</small>
-                </div>
-            </div>
-        </div>
-        <div class="col-lg-4 col-md-6 col-12">
-            <div class="card h-100 @(_outboxKpiAvailable && _outboxKpi.ParkedCount > 0 ? "border-danger" : "")">
-                <div class="card-body text-center">
-                    <h3 class="mb-0 @(_outboxKpiAvailable && _outboxKpi.ParkedCount > 0 ? "text-danger" : "")">@OutboxTileValue(_outboxKpi.ParkedCount)</h3>
-                    <small class="text-muted">Parked</small>
+    <div class="card mb-3">
+        <div class="card-body pb-0">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <h6 class="text-muted mb-0">Notification Outbox</h6>
+                <a class="small" href="/notifications/kpis">View details &rarr;</a>
+            </div>
+            <div class="row g-3 mb-3">
+                <div class="col-lg-4 col-md-6 col-12">
+                    <div class="card h-100">
+                        <div class="card-body text-center">
+                            <h3 class="mb-0">@OutboxTileValue(_outboxKpi.QueueDepth)</h3>
+                            <small class="text-muted">Queue Depth</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 col-md-6 col-12">
+                    <div class="card h-100 @(_outboxKpiAvailable && _outboxKpi.StuckCount > 0 ? "border-warning" : "")">
+                        <div class="card-body text-center">
+                            <h3 class="mb-0 @(_outboxKpiAvailable && _outboxKpi.StuckCount > 0 ? "text-warning" : "")">@OutboxTileValue(_outboxKpi.StuckCount)</h3>
+                            <small class="text-muted">Stuck</small>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-4 col-md-6 col-12">
+                    <div class="card h-100 @(_outboxKpiAvailable && _outboxKpi.ParkedCount > 0 ? "border-danger" : "")">
+                        <div class="card-body text-center">
+                            <h3 class="mb-0 @(_outboxKpiAvailable && _outboxKpi.ParkedCount > 0 ? "text-danger" : "")">@OutboxTileValue(_outboxKpi.ParkedCount)</h3>
+                            <small class="text-muted">Parked</small>
+                        </div>
+                    </div>
                 </div>
             </div>
+            @if (!_outboxKpiAvailable && _outboxKpiError != null)
+            {
+                <div class="text-muted small mb-3">Notification Outbox KPIs unavailable: @_outboxKpiError</div>
+            }
         </div>
     </div>
-    @if (!_outboxKpiAvailable && _outboxKpiError != null)
-    {
-        <div class="text-muted small mb-3">Notification Outbox KPIs unavailable: @_outboxKpiError</div>
-    }
 
     @* Site Call Audit (#22) Task 7 — three KPI tiles for the Site Call channel
        (buffered / stuck / parked). Refreshed alongside the site states. *@
-    <SiteCallKpiTiles Snapshot="@_siteCallKpi"
-                      IsAvailable="@_siteCallKpiAvailable"
-                      ErrorMessage="@_siteCallKpiError"
-                      PerNodeSnapshots="@_siteCallNodeKpis"
-                      PerNodeAvailable="@_siteCallNodeKpiAvailable" />
+    <div class="card mb-3">
+        <div class="card-body pb-0">
+            <SiteCallKpiTiles Snapshot="@_siteCallKpi"
+                              IsAvailable="@_siteCallKpiAvailable"
+                              ErrorMessage="@_siteCallKpiError"
+                              PerNodeSnapshots="@_siteCallNodeKpis"
+                              PerNodeAvailable="@_siteCallNodeKpiAvailable" />
+        </div>
+    </div>
 
     @* Three KPI tiles for the Audit channel
        (volume / error rate / backlog). Refreshed alongside the site states. *@
-    <AuditKpiTiles Snapshot="@_auditKpi"
-                   IsAvailable="@_auditKpiAvailable"
-                   ErrorMessage="@_auditKpiError" />
+    <div class="card mb-3">
+        <div class="card-body pb-0">
+            <AuditKpiTiles Snapshot="@_auditKpi"
+                           IsAvailable="@_auditKpiAvailable"
+                           ErrorMessage="@_auditKpiError" />
+        </div>
+    </div>
 
     @* Site Health Trends (M6) — per-site Site Health KPI history. Loads on a
        separate path from the 10s tile-refresh timer so a trend-query fault can
@@ -160,29 +182,38 @@
     }
     else
     {
-        @* Overview cards *@
-        <div class="row g-3 mb-3">
-            <div class="col-lg-4 col-md-6 col-12">
-                <div class="card border-success h-100">
-                    <div class="card-body text-center">
-                        <h3 class="mb-0 text-success">@_siteStates.Values.Count(s => s.IsOnline)</h3>
-                        <small class="text-muted">Sites Online</small>
-                    </div>
+        @* Overview cards — the fourth headline tile row, so it takes the same card
+           boundary as the three above it. It was also the only tile row on the page
+           with no heading at all; it now carries one for the same reason. *@
+        <div class="card mb-3">
+            <div class="card-body pb-0">
+                <div class="d-flex justify-content-between align-items-center mb-2">
+                    <h6 class="text-muted mb-0">Sites</h6>
                 </div>
-            </div>
-            <div class="col-lg-4 col-md-6 col-12">
-                <div class="card border-danger h-100">
-                    <div class="card-body text-center">
-                        <h3 class="mb-0 text-danger">@_siteStates.Values.Count(s => !s.IsOnline)</h3>
-                        <small class="text-muted">Sites Offline</small>
+                <div class="row g-3 mb-3">
+                    <div class="col-lg-4 col-md-6 col-12">
+                        <div class="card border-success h-100">
+                            <div class="card-body text-center">
+                                <h3 class="mb-0 text-success">@_siteStates.Values.Count(s => s.IsOnline)</h3>
+                                <small class="text-muted">Sites Online</small>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
-            <div class="col-lg-4 col-md-6 col-12">
-                <div class="card border-warning h-100">
-                    <div class="card-body text-center">
-                        <h3 class="mb-0 text-warning">@_siteStates.Values.Count(SiteHasActiveErrors)</h3>
-                        <small class="text-muted">Sites with active errors</small>
+                    <div class="col-lg-4 col-md-6 col-12">
+                        <div class="card border-danger h-100">
+                            <div class="card-body text-center">
+                                <h3 class="mb-0 text-danger">@_siteStates.Values.Count(s => !s.IsOnline)</h3>
+                                <small class="text-muted">Sites Offline</small>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 col-md-6 col-12">
+                        <div class="card border-warning h-100">
+                            <div class="card-body text-center">
+                                <h3 class="mb-0 text-warning">@_siteStates.Values.Count(SiteHasActiveErrors)</h3>
+                                <small class="text-muted">Sites with active errors</small>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -196,26 +227,36 @@
             var detailsCollapseId = $"site-details-{siteId}";
             <div class="card mb-3">
                 <div class="card-header d-flex justify-content-between align-items-center py-2">
+                    @* Display name and machine id are two different things and are read
+                       for two different reasons, so they get two lines: chips + name on
+                       the first, the site identifier on its own beneath it. Reference
+                       shape: Pages/Admin/Sites.razor (card title + monospace identifier). *@
                     <div>
-                        @if (state.IsOnline)
+                        <div class="d-flex align-items-center flex-wrap gap-2">
+                            @if (state.IsOnline)
+                            {
+                                <span class="badge bg-success" aria-label="State: Online">@OnlineGlyph Online</span>
+                            }
+                            else
+                            {
+                                <span class="badge bg-danger" aria-label="State: Offline">@OfflineGlyph Offline</span>
+                            }
+                            <strong class="fs-5">@siteName</strong>
+                            @if (state.IsOnline && state.IsMetricsStale)
+                            {
+                                <span class="badge bg-warning text-dark"
+                                      title="Site is heartbeating but has sent no health report for over @StaleTimeoutDisplay — the metrics pipeline may be dead.">
+                                    Metrics stale
+                                </span>
+                            }
+                            @if (!state.IsOnline && state.LastStatusChangeAt is { } changedAt)
+                            {
+                                <small class="text-muted">offline since @changedAt.ToString("u")</small>
+                            }
+                        </div>
+                        @if (!isCentral)
                         {
-                            <span class="badge bg-success me-2" aria-label="State: Online">@OnlineGlyph Online</span>
-                        }
-                        else
-                        {
-                            <span class="badge bg-danger me-2" aria-label="State: Offline">@OfflineGlyph Offline</span>
-                        }
-                        <strong class="fs-5">@siteName@(isCentral ? "" : $" ({siteId})")</strong>
-                        @if (state.IsOnline && state.IsMetricsStale)
-                        {
-                            <span class="badge bg-warning text-dark ms-2"
-                                  title="Site is heartbeating but has sent no health report for over @StaleTimeoutDisplay — the metrics pipeline may be dead.">
-                                Metrics stale
-                            </span>
-                        }
-                        @if (!state.IsOnline && state.LastStatusChangeAt is { } changedAt)
-                        {
-                            <small class="text-muted ms-2">offline since @changedAt.ToString("u")</small>
+                            <div class="small text-muted font-monospace">@siteId</div>
                         }
                     </div>
                     <div class="d-flex align-items-center gap-3">
@@ -236,193 +277,230 @@
                     {
                         var report = state.LatestReport;
                         <div class="row g-3">
+                            @* Each logical group below sits in its own card, with the group's
+                               head promoted to a real card-header, instead of h6 rules stacked
+                               inside one undifferentiated body. Columns 3 and 4 keep their
+                               existing single collapse region (and its id) spanning both of
+                               their sub-sections: the disclosure toggle IS the card-header and
+                               the two sub-heads live inside the one card body. *@
+
                             @* Column 1: Nodes *@
                             <div class="col-md-6">
-                                <h6 class="text-muted mb-2 border-bottom pb-1">Nodes</h6>
-                                <table class="table table-sm table-borderless mb-0">
-                                    <tbody>
-                                        @if (report.ClusterNodes is { Count: > 0 })
-                                        {
-                                            @foreach (var node in report.ClusterNodes)
-                                            {
-                                                <tr>
-                                                    <td class="small">@node.Hostname</td>
-                                                    <td>
-                                                        <span class="badge @(node.IsOnline ? "bg-success" : "bg-danger")"
-                                                              aria-label="State: @(node.IsOnline ? "Online" : "Offline")">
-                                                            @(node.IsOnline ? OnlineGlyph : OfflineGlyph) @(node.IsOnline ? "Online" : "Offline")
-                                                        </span>
-                                                    </td>
-                                                    <td>
-                                                        <span class="badge @(node.Role == "Primary" ? "bg-primary" : "bg-secondary")"
-                                                              aria-label="State: @node.Role">
-                                                            @(node.Role == "Primary" ? PrimaryGlyph : StandbyGlyph) @node.Role
-                                                        </span>
-                                                    </td>
-                                                </tr>
-                                            }
-                                        }
-                                        else
-                                        {
-                                            <tr>
-                                                <td class="small">@(report.NodeHostname != "" ? report.NodeHostname : "Node")</td>
-                                                <td>
-                                                    <span class="badge @(state.IsOnline ? "bg-success" : "bg-danger")"
-                                                          aria-label="State: @(state.IsOnline ? "Online" : "Offline")">
-                                                        @(state.IsOnline ? OnlineGlyph : OfflineGlyph) @(state.IsOnline ? "Online" : "Offline")
-                                                    </span>
-                                                </td>
-                                                <td>
-                                                    @{
-                                                        var roleLabel = report.NodeRole == "Active" ? "Primary" : "Standby";
+                                <div class="card h-100">
+                                    <div class="card-header py-2">
+                                        <h6 class="text-muted mb-0">Nodes (@NodeRowCount(state))</h6>
+                                    </div>
+                                    <div class="card-body p-2">
+                                        <table class="table table-sm table-borderless mb-0">
+                                            <tbody>
+                                                @if (report.ClusterNodes is { Count: > 0 })
+                                                {
+                                                    @foreach (var node in report.ClusterNodes)
+                                                    {
+                                                        <tr>
+                                                            <td class="small">@node.Hostname</td>
+                                                            <td>
+                                                                <span class="badge @(node.IsOnline ? "bg-success" : "bg-danger")"
+                                                                      aria-label="State: @(node.IsOnline ? "Online" : "Offline")">
+                                                                    @(node.IsOnline ? OnlineGlyph : OfflineGlyph) @(node.IsOnline ? "Online" : "Offline")
+                                                                </span>
+                                                            </td>
+                                                            <td>
+                                                                <span class="badge @(node.Role == "Primary" ? "bg-primary" : "bg-secondary")"
+                                                                      aria-label="State: @node.Role">
+                                                                    @(node.Role == "Primary" ? PrimaryGlyph : StandbyGlyph) @node.Role
+                                                                </span>
+                                                            </td>
+                                                        </tr>
                                                     }
-                                                    <span class="badge @(report.NodeRole == "Active" ? "bg-primary" : "bg-secondary")"
-                                                          aria-label="State: @roleLabel">
-                                                        @(roleLabel == "Primary" ? PrimaryGlyph : StandbyGlyph) @roleLabel
-                                                    </span>
-                                                </td>
-                                            </tr>
-                                        }
-                                    </tbody>
-                                </table>
+                                                }
+                                                else
+                                                {
+                                                    <tr>
+                                                        <td class="small">@(report.NodeHostname != "" ? report.NodeHostname : "Node")</td>
+                                                        <td>
+                                                            <span class="badge @(state.IsOnline ? "bg-success" : "bg-danger")"
+                                                                  aria-label="State: @(state.IsOnline ? "Online" : "Offline")">
+                                                                @(state.IsOnline ? OnlineGlyph : OfflineGlyph) @(state.IsOnline ? "Online" : "Offline")
+                                                            </span>
+                                                        </td>
+                                                        <td>
+                                                            @{
+                                                                var roleLabel = report.NodeRole == "Active" ? "Primary" : "Standby";
+                                                            }
+                                                            <span class="badge @(report.NodeRole == "Active" ? "bg-primary" : "bg-secondary")"
+                                                                  aria-label="State: @roleLabel">
+                                                                @(roleLabel == "Primary" ? PrimaryGlyph : StandbyGlyph) @roleLabel
+                                                            </span>
+                                                        </td>
+                                                    </tr>
+                                                }
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
                             </div>
 
                             @* Column 2: Data Connections (collapsible) *@
                             <div class="col-md-6">
-                                <button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
-                                        data-bs-toggle="collapse"
-                                        data-bs-target="@($"#{detailsCollapseId}-conns")"
-                                        aria-expanded="false">
-                                    Data Connections (@report.DataConnectionStatuses.Count)
-                                </button>
-                                <div class="collapse" id="@($"{detailsCollapseId}-conns")">
-                                    @if (report.DataConnectionStatuses.Count == 0)
-                                    {
-                                        <span class="text-muted small">None</span>
-                                    }
-                                    else
-                                    {
-                                        @foreach (var (connName, health) in report.DataConnectionStatuses)
-                                        {
-                                            var endpoint = report.DataConnectionEndpoints?.GetValueOrDefault(connName);
-                                            var quality = report.DataConnectionTagQuality?.GetValueOrDefault(connName);
-                                            <div class="mb-2">
-                                                <div class="d-flex justify-content-between">
-                                                    <strong class="small">@connName</strong>
-                                                    <span class="small">@(endpoint ?? health.ToString())</span>
-                                                </div>
-                                                @if (quality != null)
+                                <div class="card h-100">
+                                    <div class="card-header py-2">
+                                        <button class="btn btn-link btn-sm p-0 text-decoration-none"
+                                                data-bs-toggle="collapse"
+                                                data-bs-target="@($"#{detailsCollapseId}-conns")"
+                                                aria-expanded="false">
+                                            Data Connections (@report.DataConnectionStatuses.Count)
+                                        </button>
+                                    </div>
+                                    <div class="collapse" id="@($"{detailsCollapseId}-conns")">
+                                        <div class="card-body p-2">
+                                            @if (report.DataConnectionStatuses.Count == 0)
+                                            {
+                                                <span class="text-muted small">None</span>
+                                            }
+                                            else
+                                            {
+                                                @foreach (var (connName, health) in report.DataConnectionStatuses)
                                                 {
-                                                    <table class="table table-sm table-borderless mb-0">
-                                                        <tbody>
-                                                            <tr>
-                                                                <td class="small text-muted py-0">Tags good</td>
-                                                                <td class="small text-end py-0">@quality.Good.ToString("N0")</td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td class="small text-muted py-0">Tags bad</td>
-                                                                <td class="small text-end py-0">@quality.Bad.ToString("N0")</td>
-                                                            </tr>
-                                                            <tr>
-                                                                <td class="small text-muted py-0">Tags uncertain</td>
-                                                                <td class="small text-end py-0">@quality.Uncertain.ToString("N0")</td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
+                                                    var endpoint = report.DataConnectionEndpoints?.GetValueOrDefault(connName);
+                                                    var quality = report.DataConnectionTagQuality?.GetValueOrDefault(connName);
+                                                    var endpointText = endpoint ?? health.ToString();
+                                                    <div class="mb-2">
+                                                        @* Both halves are site-supplied strings — a long connection
+                                                           name or endpoint URL would otherwise wrap this flex row
+                                                           into several lines. Clip both, full value on the title. *@
+                                                        <div class="d-flex justify-content-between gap-2">
+                                                            <strong class="small cell-clip cell-clip-sm" title="@connName">@connName</strong>
+                                                            <span class="small cell-clip cell-clip-sm text-end" title="@endpointText">@endpointText</span>
+                                                        </div>
+                                                        @if (quality != null)
+                                                        {
+                                                            <table class="table table-sm table-borderless mb-0">
+                                                                <tbody>
+                                                                    <tr>
+                                                                        <td class="small text-muted py-0">Tags good</td>
+                                                                        <td class="small text-end py-0">@quality.Good.ToString("N0")</td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <td class="small text-muted py-0">Tags bad</td>
+                                                                        <td class="small text-end py-0">@quality.Bad.ToString("N0")</td>
+                                                                    </tr>
+                                                                    <tr>
+                                                                        <td class="small text-muted py-0">Tags uncertain</td>
+                                                                        <td class="small text-end py-0">@quality.Uncertain.ToString("N0")</td>
+                                                                    </tr>
+                                                                </tbody>
+                                                            </table>
+                                                        }
+                                                    </div>
                                                 }
-                                            </div>
-                                        }
-                                    }
+                                            }
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
 
                             @* Column 3: Instances + Store-and-Forward (collapsible) *@
                             <div class="col-md-6">
-                                <button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
-                                        data-bs-toggle="collapse"
-                                        data-bs-target="@($"#{detailsCollapseId}-queues")"
-                                        aria-expanded="false">
-                                    Instances &amp; Queues
-                                </button>
-                                <div class="collapse" id="@($"{detailsCollapseId}-queues")">
-                                    <h6 class="text-muted mb-2 border-bottom pb-1">Instances</h6>
-                                    <table class="table table-sm table-borderless mb-0">
-                                        <tbody>
-                                            <tr>
-                                                <td class="small">Deployed</td>
-                                                <td class="text-end">@report.DeployedInstanceCount</td>
-                                            </tr>
-                                            <tr>
-                                                <td class="small">Enabled</td>
-                                                <td class="text-end text-success">@report.EnabledInstanceCount</td>
-                                            </tr>
-                                            <tr>
-                                                <td class="small">Disabled</td>
-                                                <td class="text-end">@report.DisabledInstanceCount</td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
+                                <div class="card h-100">
+                                    <div class="card-header py-2">
+                                        <button class="btn btn-link btn-sm p-0 text-decoration-none"
+                                                data-bs-toggle="collapse"
+                                                data-bs-target="@($"#{detailsCollapseId}-queues")"
+                                                aria-expanded="false">
+                                            Instances &amp; Queues
+                                        </button>
+                                    </div>
+                                    <div class="collapse" id="@($"{detailsCollapseId}-queues")">
+                                        <div class="card-body p-2">
+                                            <h6 class="text-muted mb-2 border-bottom pb-1">Instances</h6>
+                                            <table class="table table-sm table-borderless mb-0">
+                                                <tbody>
+                                                    <tr>
+                                                        <td class="small">Deployed</td>
+                                                        <td class="text-end">@report.DeployedInstanceCount</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class="small">Enabled</td>
+                                                        <td class="text-end text-success">@report.EnabledInstanceCount</td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class="small">Disabled</td>
+                                                        <td class="text-end">@report.DisabledInstanceCount</td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
 
-                                    <h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Store-and-Forward Buffers</h6>
-                                    @if (report.StoreAndForwardBufferDepths.Count == 0)
-                                    {
-                                        <span class="text-muted small">Empty</span>
-                                    }
-                                    else
-                                    {
-                                        @foreach (var (category, depth) in report.StoreAndForwardBufferDepths)
-                                        {
-                                            <div class="d-flex justify-content-between mb-1">
-                                                <span class="small">@category</span>
-                                                <span class="badge @(depth > 0 ? "bg-warning text-dark" : "bg-light text-dark")">@depth</span>
-                                            </div>
-                                        }
-                                    }
+                                            <h6 class="text-muted mb-2 mt-3 border-bottom pb-1">
+                                                Store-and-Forward Buffers (@report.StoreAndForwardBufferDepths.Count)
+                                            </h6>
+                                            @if (report.StoreAndForwardBufferDepths.Count == 0)
+                                            {
+                                                <span class="text-muted small">Empty</span>
+                                            }
+                                            else
+                                            {
+                                                @foreach (var (category, depth) in report.StoreAndForwardBufferDepths)
+                                                {
+                                                    <div class="d-flex justify-content-between mb-1">
+                                                        <span class="small">@category</span>
+                                                        <span class="badge @(depth > 0 ? "bg-warning text-dark" : "bg-light text-dark")">@depth</span>
+                                                    </div>
+                                                }
+                                            }
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
 
                             @* Column 4: Error Counts + Parked Messages (collapsible) *@
                             <div class="col-md-6">
-                                <button class="btn btn-link btn-sm p-0 text-decoration-none mb-2"
-                                        data-bs-toggle="collapse"
-                                        data-bs-target="@($"#{detailsCollapseId}-errors")"
-                                        aria-expanded="false">
-                                    Errors &amp; Parked Messages
-                                </button>
-                                <div class="collapse" id="@($"{detailsCollapseId}-errors")">
-                                    <h6 class="text-muted mb-2 border-bottom pb-1">Error Counts</h6>
-                                    <table class="table table-sm table-borderless mb-0">
-                                        <tbody>
-                                            <tr>
-                                                <td class="small">Script Errors</td>
-                                                <td class="text-end">
-                                                    <span class="@(report.ScriptErrorCount > 0 ? "text-danger fw-bold" : "")">@report.ScriptErrorCount</span>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class="small">Alarm Eval Errors</td>
-                                                <td class="text-end">
-                                                    <span class="@(report.AlarmEvaluationErrorCount > 0 ? "text-warning fw-bold" : "")">@report.AlarmEvaluationErrorCount</span>
-                                                </td>
-                                            </tr>
-                                            <tr>
-                                                <td class="small">Dead Letters</td>
-                                                <td class="text-end">
-                                                    <span class="@(report.DeadLetterCount > 0 ? "text-danger fw-bold" : "")">@report.DeadLetterCount</span>
-                                                </td>
-                                            </tr>
-                                        </tbody>
-                                    </table>
+                                <div class="card h-100">
+                                    <div class="card-header py-2">
+                                        <button class="btn btn-link btn-sm p-0 text-decoration-none"
+                                                data-bs-toggle="collapse"
+                                                data-bs-target="@($"#{detailsCollapseId}-errors")"
+                                                aria-expanded="false">
+                                            Errors &amp; Parked Messages
+                                        </button>
+                                    </div>
+                                    <div class="collapse" id="@($"{detailsCollapseId}-errors")">
+                                        <div class="card-body p-2">
+                                            <h6 class="text-muted mb-2 border-bottom pb-1">Error Counts</h6>
+                                            <table class="table table-sm table-borderless mb-0">
+                                                <tbody>
+                                                    <tr>
+                                                        <td class="small">Script Errors</td>
+                                                        <td class="text-end">
+                                                            <span class="@(report.ScriptErrorCount > 0 ? "text-danger fw-bold" : "")">@report.ScriptErrorCount</span>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class="small">Alarm Eval Errors</td>
+                                                        <td class="text-end">
+                                                            <span class="@(report.AlarmEvaluationErrorCount > 0 ? "text-warning fw-bold" : "")">@report.AlarmEvaluationErrorCount</span>
+                                                        </td>
+                                                    </tr>
+                                                    <tr>
+                                                        <td class="small">Dead Letters</td>
+                                                        <td class="text-end">
+                                                            <span class="@(report.DeadLetterCount > 0 ? "text-danger fw-bold" : "")">@report.DeadLetterCount</span>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
 
-                                    <h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Parked Messages</h6>
-                                    @if (report.ParkedMessageCount == 0)
-                                    {
-                                        <span class="text-muted small">Empty</span>
-                                    }
-                                    else
-                                    {
-                                        <span class="badge bg-warning text-dark">@report.ParkedMessageCount</span>
-                                    }
+                                            <h6 class="text-muted mb-2 mt-3 border-bottom pb-1">Parked Messages</h6>
+                                            @if (report.ParkedMessageCount == 0)
+                                            {
+                                                <span class="text-muted small">Empty</span>
+                                            }
+                                            else
+                                            {
+                                                <span class="badge bg-warning text-dark">@report.ParkedMessageCount</span>
+                                            }
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -458,6 +536,13 @@
             ? nodes.Count(n => n.IsOnline)
             : (state.IsOnline ? 1 : 0);
 
+    // Rows the Nodes group actually renders: the reported cluster-node list when the
+    // site sends one, otherwise the single synthesized fallback row. Shown in that
+    // group's card-header so the count is legible without reading the table — the same
+    // metadata-in-the-header treatment the Data Connections group already had inline.
+    private static int NodeRowCount(SiteHealthState state) =>
+        state.LatestReport?.ClusterNodes is { Count: > 0 } nodes ? nodes.Count : 1;
+
     private static string FormatDuration(TimeSpan span) =>
         span.TotalMinutes >= 1 && span == TimeSpan.FromMinutes(Math.Round(span.TotalMinutes))
             ? $"{span.TotalMinutes:0} minute{(span.TotalMinutes == 1 ? "" : "s")}"