From 8ee201978f20b0b662fd627cbecaf34155c73867 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 28 May 2026 01:14:46 +0100
Subject: [PATCH] ux(tools): recessed dark container around tool rows, matching
 services + tasks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the same .services-rows / .tasks-container pocket pattern to the
Tools tab so the three app-page tabs (Services, Tools, Tasks/Backups)
share one visual language: rows live inside a sunken dark panel that
reads as a contained area inside the tab-pane's glass surface.

  .tools-rows gains
    background:   rgba(var(--bg-rgb), 0.2)
    border-radius: 8px
    margin:        16px
    padding:       16px   (was 1rem 1.25rem 2rem)

For the multi-category tabs case the pocket sits flush below the tab
bar — drop the top margin via the .tools-tab-bar ~ .tools-cat-pane
sibling selector so the tabs and pocket read as one element.

Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/tools.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/css/tools.css b/containers/libreportal/frontend/css/tools.css
index c87df61..faa30f5 100644
--- a/containers/libreportal/frontend/css/tools.css
+++ b/containers/libreportal/frontend/css/tools.css
@@ -28,15 +28,25 @@
 
 .tools-list { display: flex; flex-direction: column; }
 
+/* Recessed dark pocket wrapping the tool rows — same idiom as
+   .services-rows on the Services tab and .tasks-container on the Tasks
+   tab so the three app-page tabs share one visual language. */
 .tools-rows {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
-  padding: 1rem 1.25rem 2rem;
+  padding: 16px;
+  margin: 16px;
+  background: rgba(var(--bg-rgb), 0.2);
+  border-radius: 8px;
 }
 
 .tools-cat-pane { display: none; }
 .tools-cat-pane.active { display: flex; }
+/* When the multi-category tab bar is present, the pane recedes directly
+   below it — drop the top margin so the pocket sits flush with the tabs. */
+.tools-tab-bar + .tools-cat-pane,
+.tools-tab-bar ~ .tools-cat-pane { margin-top: 0; }
 
 .tools-tab-bar {
   display: flex;