From 51cbab1750fa4d1e807fcd741464cc5d393ac203 Mon Sep 17 00:00:00 2001
From: Grovy311 <christ.janssen@outlook.de>
Date: Sat, 26 Sep 2026 12:20:09 +0200
Subject: [PATCH 1/2] Give cards the surface look of the PM app

Cards had a 3px petrol bar on the top edge, and Bootstrap's shadow-sm
class overrode their own shadow with !important. They now use the PM app
surface: a 1px border all around, a 16px radius and a soft diffuse shadow
with a faint inner highlight, with a stronger shadow and a weaker highlight
in dark mode. The shadow-sm classes are removed from the cards so the
shared rule applies. Menus, drawers and dialogs keep their shadows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 AGENTS.md                                     |  4 ++++
 src/app/globals.css                           | 22 +++++++++++++++----
 src/app/projects/[projectId]/page.tsx         |  8 +++----
 src/app/projects/page.tsx                     |  6 ++---
 .../components/project-version-history.tsx    |  2 +-
 5 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index f1a509d..a5641e9 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -171,6 +171,10 @@ Support Ctrl+Plus and Ctrl+Shift+Plus for insertion.
 
 Bootstrap may be used for the general application UI, such as navigation, page layout, buttons, forms, cards, alerts and modals.
 
+Cards follow the PM app look: 1px border all around, 16px radius and the
+soft shadow defined on `.card` in `globals.css` (own dark-mode value). Do
+not add Bootstrap `shadow-*` classes or a colored top border to cards.
+
 Do not use Bootstrap as the core table/grid framework for the circuit list editor.
 
 The circuit list editor must remain a custom spreadsheet-like component with controlled cell selection, inline edit mode, row grouping, drag-and-drop indicators and keyboard behavior.
diff --git a/src/app/globals.css b/src/app/globals.css
index 22da5df..b51d98d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -431,12 +431,26 @@ a.kpi:hover {
   color: var(--color-accent-pale);
 }
 
+/* Flächen-Look wie in der PM-App (Vorbild grow-monitor): gleichmäßiger
+   1-px-Rahmen statt farbigem Balken an der Oberkante, größerer Radius und ein
+   weicher Streuschatten mit feiner heller Innenkante oben. Der Akzent kommt
+   über Kopfzeile und Inhalt, nicht über die Kante. Karten tragen deshalb keine
+   Bootstrap-Klasse shadow-*, die den Schatten mit !important überschreiben
+   würde. */
 .card {
-  border-radius: var(--radius);
-  border-top: 3px solid var(--color-primary);
+  --bs-card-border-radius: 16px;
+  --bs-card-border-color: var(--color-border);
   box-shadow:
-    0 1px 2px var(--shadow-soft),
-    0 10px 24px -14px var(--shadow-strong);
+    0 4px 24px var(--shadow-soft),
+    0 1px 0 rgba(255, 255, 255, 0.7) inset;
+}
+
+/* Auf dunklem Grund ein kräftigerer Streuschatten und nur eine schwache
+   Innenkante, sonst wirkt sie wie ein harter weißer Strich. */
+:root[data-bs-theme="dark"] .card {
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.4),
+    0 1px 0 rgba(255, 255, 255, 0.05) inset;
 }
 
 .card-header {
diff --git a/src/app/projects/[projectId]/page.tsx b/src/app/projects/[projectId]/page.tsx
index fa342ea..f352536 100644
--- a/src/app/projects/[projectId]/page.tsx
+++ b/src/app/projects/[projectId]/page.tsx
@@ -904,7 +904,7 @@ export default function ProjectDetailPage() {
         ) : null}
 
         <section className="col-12" id="verteilungen">
-          <div className="card shadow-sm">
+          <div className="card">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Verteilungen</span>
@@ -997,7 +997,7 @@ export default function ProjectDetailPage() {
         </section>
 
         <section className="col-12 col-lg-5" id="etagen">
-          <div className="card shadow-sm h-100">
+          <div className="card h-100">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Etagen</span>
@@ -1028,7 +1028,7 @@ export default function ProjectDetailPage() {
         </section>
 
         <section className="col-12 col-lg-7" id="raeume">
-          <div className="card shadow-sm">
+          <div className="card">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Räume</span>
@@ -1079,7 +1079,7 @@ export default function ProjectDetailPage() {
         </section>
       </div>
 
-      <section className="card shadow-sm mt-4" id="projektgeraete">
+      <section className="card mt-4" id="projektgeraete">
         <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
           <div>
             <span>Projektgeräte</span>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 21409fd..4d8b7bd 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -238,7 +238,7 @@ export default function ProjectsPage() {
       {error ? <div className="alert alert-warning">{error}</div> : null}
 
       <div className="d-flex flex-column gap-4">
-        <section className="card shadow-sm">
+        <section className="card">
           <div className="card-header">Neues Projekt</div>
           <div className="card-body" style={{ maxWidth: 480 }}>
             <form className="vstack gap-3" onSubmit={handleCreateProject}>
@@ -271,7 +271,7 @@ export default function ProjectsPage() {
           </div>
         </section>
 
-        <section className="card shadow-sm">
+        <section className="card">
           <div className="card-header">Projekt importieren</div>
           <div className="card-body" style={{ maxWidth: 480 }}>
             <p className="text-secondary small">
@@ -326,7 +326,7 @@ export default function ProjectsPage() {
           </div>
         </section>
 
-        <section className="card shadow-sm">
+        <section className="card">
           <div className="card-header">Globale Geräte / Verbraucher</div>
         <div className="card-body border-bottom">
           <form className="row g-2" onSubmit={handleCreateGlobalDevice}>
diff --git a/src/frontend/components/project-version-history.tsx b/src/frontend/components/project-version-history.tsx
index 3907640..2ce4105 100644
--- a/src/frontend/components/project-version-history.tsx
+++ b/src/frontend/components/project-version-history.tsx
@@ -227,7 +227,7 @@ export function ProjectVersionHistory({
     history?.currentRevision === currentRevision;
 
   return (
-    <section className="card shadow-sm">
+    <section className="card">
       <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
         <span>Versionen und Sicherungspunkte</span>
         <div className="d-flex align-items-center gap-2">

From ead01fe5bd910dbb76c977a679d1f5e906dbb036 Mon Sep 17 00:00:00 2001
From: Grovy311 <christ.janssen@outlook.de>
Date: Sat, 26 Sep 2026 12:53:24 +0200
Subject: [PATCH 2/2] Keep card markup and map shadow-sm to the card shadow

Removing the shadow-sm classes touched the page markup of the project
overview, which other branches change as well. The card rule now sets
Bootstrap's --bs-box-shadow-sm to the card shadow instead, so cards with
and without shadow-sm look the same and the pages stay as they are on main.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 AGENTS.md                                       |  5 +++--
 src/app/globals.css                             | 17 ++++++++++-------
 src/app/projects/[projectId]/page.tsx           |  8 ++++----
 src/app/projects/page.tsx                       |  6 +++---
 .../components/project-version-history.tsx      |  2 +-
 5 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index a5641e9..bb3f10d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -172,8 +172,9 @@ Support Ctrl+Plus and Ctrl+Shift+Plus for insertion.
 Bootstrap may be used for the general application UI, such as navigation, page layout, buttons, forms, cards, alerts and modals.
 
 Cards follow the PM app look: 1px border all around, 16px radius and the
-soft shadow defined on `.card` in `globals.css` (own dark-mode value). Do
-not add Bootstrap `shadow-*` classes or a colored top border to cards.
+soft shadow defined on `.card` in `globals.css` (own dark-mode value). The
+`.card` rule maps Bootstrap's `shadow-sm` to the same shadow; do not add other
+`shadow-*` classes or a colored top border to cards.
 
 Do not use Bootstrap as the core table/grid framework for the circuit list editor.
 
diff --git a/src/app/globals.css b/src/app/globals.css
index b51d98d..721f991 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -434,21 +434,24 @@ a.kpi:hover {
 /* Flächen-Look wie in der PM-App (Vorbild grow-monitor): gleichmäßiger
    1-px-Rahmen statt farbigem Balken an der Oberkante, größerer Radius und ein
    weicher Streuschatten mit feiner heller Innenkante oben. Der Akzent kommt
-   über Kopfzeile und Inhalt, nicht über die Kante. Karten tragen deshalb keine
-   Bootstrap-Klasse shadow-*, die den Schatten mit !important überschreiben
-   würde. */
+   über Kopfzeile und Inhalt, nicht über die Kante. Bootstraps shadow-sm
+   setzt box-shadow mit !important aus --bs-box-shadow-sm; die Karte legt diese
+   Variable auf denselben Schatten, damit Karten mit und ohne shadow-sm gleich
+   aussehen. */
 .card {
-  --bs-card-border-radius: 16px;
-  --bs-card-border-color: var(--color-border);
-  box-shadow:
+  --lb-card-shadow:
     0 4px 24px var(--shadow-soft),
     0 1px 0 rgba(255, 255, 255, 0.7) inset;
+  --bs-box-shadow-sm: var(--lb-card-shadow);
+  --bs-card-border-radius: 16px;
+  --bs-card-border-color: var(--color-border);
+  box-shadow: var(--lb-card-shadow);
 }
 
 /* Auf dunklem Grund ein kräftigerer Streuschatten und nur eine schwache
    Innenkante, sonst wirkt sie wie ein harter weißer Strich. */
 :root[data-bs-theme="dark"] .card {
-  box-shadow:
+  --lb-card-shadow:
     0 4px 24px rgba(0, 0, 0, 0.4),
     0 1px 0 rgba(255, 255, 255, 0.05) inset;
 }
diff --git a/src/app/projects/[projectId]/page.tsx b/src/app/projects/[projectId]/page.tsx
index f352536..fa342ea 100644
--- a/src/app/projects/[projectId]/page.tsx
+++ b/src/app/projects/[projectId]/page.tsx
@@ -904,7 +904,7 @@ export default function ProjectDetailPage() {
         ) : null}
 
         <section className="col-12" id="verteilungen">
-          <div className="card">
+          <div className="card shadow-sm">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Verteilungen</span>
@@ -997,7 +997,7 @@ export default function ProjectDetailPage() {
         </section>
 
         <section className="col-12 col-lg-5" id="etagen">
-          <div className="card h-100">
+          <div className="card shadow-sm h-100">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Etagen</span>
@@ -1028,7 +1028,7 @@ export default function ProjectDetailPage() {
         </section>
 
         <section className="col-12 col-lg-7" id="raeume">
-          <div className="card">
+          <div className="card shadow-sm">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Räume</span>
@@ -1079,7 +1079,7 @@ export default function ProjectDetailPage() {
         </section>
       </div>
 
-      <section className="card mt-4" id="projektgeraete">
+      <section className="card shadow-sm mt-4" id="projektgeraete">
         <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
           <div>
             <span>Projektgeräte</span>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index 4d8b7bd..21409fd 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -238,7 +238,7 @@ export default function ProjectsPage() {
       {error ? <div className="alert alert-warning">{error}</div> : null}
 
       <div className="d-flex flex-column gap-4">
-        <section className="card">
+        <section className="card shadow-sm">
           <div className="card-header">Neues Projekt</div>
           <div className="card-body" style={{ maxWidth: 480 }}>
             <form className="vstack gap-3" onSubmit={handleCreateProject}>
@@ -271,7 +271,7 @@ export default function ProjectsPage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card shadow-sm">
           <div className="card-header">Projekt importieren</div>
           <div className="card-body" style={{ maxWidth: 480 }}>
             <p className="text-secondary small">
@@ -326,7 +326,7 @@ export default function ProjectsPage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card shadow-sm">
           <div className="card-header">Globale Geräte / Verbraucher</div>
         <div className="card-body border-bottom">
           <form className="row g-2" onSubmit={handleCreateGlobalDevice}>
diff --git a/src/frontend/components/project-version-history.tsx b/src/frontend/components/project-version-history.tsx
index 2ce4105..3907640 100644
--- a/src/frontend/components/project-version-history.tsx
+++ b/src/frontend/components/project-version-history.tsx
@@ -227,7 +227,7 @@ export function ProjectVersionHistory({
     history?.currentRevision === currentRevision;
 
   return (
-    <section className="card">
+    <section className="card shadow-sm">
       <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
         <span>Versionen und Sicherungspunkte</span>
         <div className="d-flex align-items-center gap-2">