From a6626e023a5fd0c4908bf787e5d0c733dc221483 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Thu, 3 Sep 2026 22:55:11 +0200
Subject: [PATCH] Fix dark mode readability + replace error-row fill with thin
 red outline

Gin dark mode (html.gin--dark-mode) is on by default and the previous CSS
relied on Gin custom properties that didn't resolve here, causing
black-on-black/white-on-white text. Now uses self-contained explicit
colors with a dark-mode override block. Error rows get a thin red border
instead of a background fill, as requested.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../figli_compta_ledger/css/dashboard.css     | 42 ++++++++--
 .../custom/figli_compta_ledger/css/home.css   | 84 +++++++++++++------
 2 files changed, 93 insertions(+), 33 deletions(-)

diff --git a/web/modules/custom/figli_compta_ledger/css/dashboard.css b/web/modules/custom/figli_compta_ledger/css/dashboard.css
index 4502e4e..c08d592 100644
--- a/web/modules/custom/figli_compta_ledger/css/dashboard.css
+++ b/web/modules/custom/figli_compta_ledger/css/dashboard.css
@@ -1,17 +1,39 @@
+/* Self-contained colors + explicit dark-mode overrides, since Gin's dark
+   mode (html.gin--dark-mode) is enabled by default here. */
 #figli-dashboard-app {
-  font-family: var(--gin-font-family, Inter, -apple-system, sans-serif);
+  --figli-bg: #ffffff;
+  --figli-bg-alt: #f5f6f8;
+  --figli-text: #1a1a1a;
+  --figli-text-light: #6b7280;
+  --figli-border: #dcdee2;
+  --figli-error: #c9312b;
+  --figli-positive: #1a7f37;
+
+  font-family: Inter, -apple-system, sans-serif;
   max-width: 1200px;
   margin: 1rem 0;
+  color: var(--figli-text);
+}
+
+html.gin--dark-mode #figli-dashboard-app {
+  --figli-bg: #232426;
+  --figli-bg-alt: #2c2d30;
+  --figli-text: #e8e9ea;
+  --figli-text-light: #a1a5ab;
+  --figli-border: #3d3e42;
+  --figli-error: #ff6b6b;
+  --figli-positive: #4ade80;
 }
 
 #figli-dashboard-app h2 {
   font-size: 1.25rem;
   font-weight: 600;
   margin: 2rem 0 0.75rem;
+  color: var(--figli-text);
 }
 
 #figli-dashboard-app .figli-note {
-  color: var(--gin-color-text-light, #6b7280);
+  color: var(--figli-text-light);
   font-size: 0.875rem;
   margin-bottom: 1rem;
 }
@@ -19,8 +41,9 @@
 #figli-dashboard-app table {
   width: 100%;
   border-collapse: collapse;
-  background: var(--gin-bg-layer2, #fff);
-  border: 1px solid var(--gin-border-color, #dcdee2);
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
   border-radius: 6px;
   overflow: hidden;
 }
@@ -29,11 +52,12 @@
 #figli-dashboard-app td {
   text-align: left;
   padding: 0.5rem 0.85rem;
-  border-bottom: 1px solid var(--gin-border-color, #eceef1);
+  border-bottom: 1px solid var(--figli-border);
+  color: var(--figli-text);
 }
 
 #figli-dashboard-app th {
-  background: var(--gin-bg-layer, #f5f6f8);
+  background: var(--figli-bg-alt);
   font-weight: 600;
   font-size: 0.85rem;
 }
@@ -43,9 +67,9 @@
   font-variant-numeric: tabular-nums;
 }
 
-#figli-dashboard-app tr.positive td.amount { color: #1a7f37; }
-#figli-dashboard-app tr.negative td.amount { color: #c9312b; }
-#figli-dashboard-app tr.total td { font-weight: 700; border-top: 2px solid var(--gin-border-color, #333); }
+#figli-dashboard-app tr.positive td.amount { color: var(--figli-positive); }
+#figli-dashboard-app tr.negative td.amount { color: var(--figli-error); }
+#figli-dashboard-app tr.total td { font-weight: 700; border-top: 2px solid var(--figli-border); }
 
 #figli-dashboard-app .figli-error {
   background: #fde8e8;
diff --git a/web/modules/custom/figli_compta_ledger/css/home.css b/web/modules/custom/figli_compta_ledger/css/home.css
index ef905a3..8ada78f 100644
--- a/web/modules/custom/figli_compta_ledger/css/home.css
+++ b/web/modules/custom/figli_compta_ledger/css/home.css
@@ -1,6 +1,28 @@
+/* Self-contained colors (not relying on Gin CSS custom properties, which
+   don't reliably resolve on this route) + explicit dark-mode overrides,
+   since Gin's dark mode (html.gin--dark-mode) is enabled by default here. */
 #figli-home-app {
-  font-family: var(--gin-font-family, Inter, -apple-system, sans-serif);
+  --figli-bg: #ffffff;
+  --figli-bg-alt: #f5f6f8;
+  --figli-text: #1a1a1a;
+  --figli-text-light: #6b7280;
+  --figli-border: #dcdee2;
+  --figli-error: #c9312b;
+  --figli-positive: #1a7f37;
+
+  font-family: Inter, -apple-system, sans-serif;
   margin: 1rem 0;
+  color: var(--figli-text);
+}
+
+html.gin--dark-mode #figli-home-app {
+  --figli-bg: #232426;
+  --figli-bg-alt: #2c2d30;
+  --figli-text: #e8e9ea;
+  --figli-text-light: #a1a5ab;
+  --figli-border: #3d3e42;
+  --figli-error: #ff6b6b;
+  --figli-positive: #4ade80;
 }
 
 #figli-home-app .figli-toolbar {
@@ -10,9 +32,10 @@
   gap: 0.75rem 1.25rem;
   margin-bottom: 1rem;
   padding: 0.75rem 1rem;
-  background: var(--gin-bg-layer, #f5f6f8);
-  border: 1px solid var(--gin-border-color, #dcdee2);
+  background: var(--figli-bg-alt);
+  border: 1px solid var(--figli-border);
   border-radius: 6px;
+  color: var(--figli-text);
 }
 
 #figli-home-app .figli-toolbar label {
@@ -20,13 +43,17 @@
   flex-direction: column;
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--gin-color-text-light, #6b7280);
+  color: var(--figli-text-light);
   gap: 0.15rem;
 }
 
 #figli-home-app .figli-toolbar select {
   font-size: 0.85rem;
   padding: 0.2rem 0.4rem;
+  background: var(--figli-bg);
+  color: var(--figli-text);
+  border: 1px solid var(--figli-border);
+  border-radius: 4px;
 }
 
 #figli-home-app .figli-checkbox {
@@ -38,13 +65,13 @@
 #figli-home-app .figli-count {
   margin-left: auto;
   font-size: 0.8rem;
-  color: var(--gin-color-text-light, #6b7280);
+  color: var(--figli-text-light);
   white-space: nowrap;
 }
 
 #figli-home-app .figli-table-wrap {
   overflow-x: auto;
-  border: 1px solid var(--gin-border-color, #dcdee2);
+  border: 1px solid var(--figli-border);
   border-radius: 6px;
   max-height: 75vh;
   overflow-y: auto;
@@ -53,7 +80,8 @@
 #figli-home-app table {
   width: 100%;
   border-collapse: collapse;
-  background: var(--gin-bg-layer2, #fff);
+  background: var(--figli-bg);
+  color: var(--figli-text);
   font-size: 0.8rem;
   white-space: nowrap;
 }
@@ -62,13 +90,15 @@
 #figli-home-app td {
   text-align: left;
   padding: 0.3rem 0.6rem;
-  border-bottom: 1px solid var(--gin-border-color, #eceef1);
+  border-bottom: 1px solid var(--figli-border);
+  color: var(--figli-text);
 }
 
 #figli-home-app thead th {
   position: sticky;
   top: 0;
-  background: var(--gin-bg-layer, #f5f6f8);
+  background: var(--figli-bg-alt);
+  color: var(--figli-text);
   font-weight: 600;
   font-size: 0.72rem;
   text-transform: uppercase;
@@ -82,10 +112,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-#figli-home-app td.compte-col {
-  color: #333;
-}
-
 #figli-home-app td.figli-libelle {
   white-space: normal;
   min-width: 220px;
@@ -93,19 +119,29 @@
 }
 
 #figli-home-app tr.figli-group-row td {
-  background: var(--gin-bg-layer, #eef0f3);
+  background: var(--figli-bg-alt);
+  color: var(--figli-text);
   font-weight: 700;
   position: sticky;
   top: 2rem;
   z-index: 1;
 }
 
-#figli-home-app tr.figli-error-row {
-  background: #fdf1f1;
+/* Error rows: a thin red outline around the row, not a background fill --
+   easier to read, doesn't fight with dark mode. */
+#figli-home-app tr.figli-error-row td {
+  border-top: 1px solid var(--figli-error);
+  border-bottom: 1px solid var(--figli-error);
+}
+#figli-home-app tr.figli-error-row td:first-child {
+  border-left: 1px solid var(--figli-error);
+}
+#figli-home-app tr.figli-error-row td:last-child {
+  border-right: 1px solid var(--figli-error);
 }
 
 #figli-home-app td.figli-ecart {
-  color: #c9312b;
+  color: var(--figli-error);
   font-weight: 700;
 }
 
@@ -117,15 +153,15 @@
   font-weight: 600;
   white-space: nowrap;
 }
-#figli-home-app .type-entree { background: #e2f5e9; color: #1a7f37; }
-#figli-home-app .type-charge { background: #eceef1; color: #4b5563; }
-#figli-home-app .type-versement { background: #fdeed6; color: #9a5b13; }
-#figli-home-app .type-achat { background: #e6eefc; color: #1d4ed8; }
-#figli-home-app .type-ouverture { background: #ede4fb; color: #6b21a8; }
-#figli-home-app .type-autre { background: #f1f1f1; color: #555; }
+#figli-home-app .type-entree { background: #1a7f371a; color: var(--figli-positive); }
+#figli-home-app .type-charge { background: #6b72801a; color: var(--figli-text-light); }
+#figli-home-app .type-versement { background: #d97a0a1a; color: #d97a0a; }
+#figli-home-app .type-achat { background: #1d4ed81a; color: #3b6fe0; }
+#figli-home-app .type-ouverture { background: #7c3aed1a; color: #9061f0; }
+#figli-home-app .type-autre { background: #6b72801a; color: var(--figli-text-light); }
 
 #figli-home-app .figli-note {
-  color: var(--gin-color-text-light, #6b7280);
+  color: var(--figli-text-light);
   font-weight: 400;
   font-size: 0.75rem;
 }