Merge claude/1

containers/libreportal/frontend/css/backup.css

@@ -1219,6 +1219,74 @@
    only backup-specific styling is the location pill colour, the
    ID chip, the deep-link highlight flash, and the inline tags.
    ============================================================ */
+
+/* Tab shell — mirrors .services-section / .tasks-section so the
+   three app-detail tabs share one visual idiom: padding 0 here,
+   the title block provides its own 20px inset, the snapshots get
+   a recessed dark container of their own. */
+.backup-section {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+}
+
+/* Header row — title left, action buttons right (Backup now /
+   Open backup center). Pinned at the top of the pane regardless of
+   scroll so the primary actions stay reachable when the snapshot
+   list grows. Same shape services-title uses for its Advanced
+   toggle. */
+.backup-title {
+    padding: 20px;
+    background: transparent;
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+}
+.backup-title-main { flex: 1; min-width: 0; }
+.backup-title h3 {
+    margin: 0 0 8px 0;
+    color: var(--text-primary, #fff);
+    font-size: 18px;
+    font-weight: 600;
+}
+.backup-title p {
+    margin: 0;
+    color: var(--text-secondary, #ccc);
+    font-size: 13px;
+}
+.backup-title-actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+/* Recessed dark panel wrapping the snapshot list — same recipe as
+   .tasks-container / .services-rows so all three tabs match. */
+.backup-snapshots-container {
+    padding: 16px;
+    margin: 16px;
+    background: rgba(var(--bg-rgb), 0.2);
+    border-radius: 8px;
+}
+
+/* Status line above the rows reading "Latest backup 5m ago · N total
+   across M locations". Set in JS via #backup-app-card-status. */
+.backup-app-card-status {
+    color: var(--text-secondary, #ccc);
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+.backup-app-card-status .backup-card-hint {
+    color: rgba(var(--text-rgb), 0.5);
+}
+
 .backup-snapshot-rows {
     display: flex;
     flex-direction: column;

containers/libreportal/frontend/html/app-content.html

@@ -79,12 +79,18 @@
           <!-- Backups Tab -->
           <div class="tab-pane" id="backups-tab">
             <div class="backup-section" id="backup-section">
-              <div class="backup-app-card" id="backup-app-card">
+              <div class="backup-title">
-                <div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
+                <div class="backup-title-main">
-                <div class="backup-app-card-actions">
+                  <h3>💾 Backups</h3>
+                  <p>Backups for <span id="backup-app-name">this app</span> across all configured locations.</p>
+                </div>
+                <div class="backup-title-actions">
                   <button type="button" class="backup-primary-btn" id="backup-app-card-backup-btn">Backup now</button>
                   <a class="backup-secondary-btn" href="/backup">Open backup center →</a>
                 </div>
+              </div>
+              <div class="backup-snapshots-container">
+                <div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
                 <div class="backup-app-card-snapshots" id="backup-app-card-snapshots"></div>
               </div>
             </div>

containers/libreportal/frontend/html/apps-unified-layout.html

@@ -180,15 +180,17 @@
           <div class="tab-pane" id="backups-tab">
             <div class="backup-section" id="backup-section">
               <div class="backup-title">
-                <h3>💾 Backups</h3>
+                <div class="backup-title-main">
-                <p>Backups for <span id="backup-app-name">this app</span> across all configured locations.</p>
+                  <h3>💾 Backups</h3>
-              </div>
+                  <p>Backups for <span id="backup-app-name">this app</span> across all configured locations.</p>
-              <div class="backup-app-card" id="backup-app-card">
+                </div>
-                <div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
+                <div class="backup-title-actions">
-                <div class="backup-app-card-actions">
                   <button type="button" class="backup-primary-btn" id="backup-app-card-backup-btn">Backup now</button>
                   <a class="backup-secondary-btn" href="/backup">Open backup center →</a>
                 </div>
+              </div>
+              <div class="backup-snapshots-container">
+                <div class="backup-app-card-status" id="backup-app-card-status">Loading…</div>
                 <div class="backup-app-card-snapshots" id="backup-app-card-snapshots"></div>
               </div>
             </div>