From f600d015742a42dd9a65a4598b9ed963a7868820 Mon Sep 17 00:00:00 2001
From: Omar-Nabil <omarabosalem66@gmail.com>
Date: Fri, 26 Sep 2025 10:42:51 +0300
Subject: [PATCH] fix: mat-label text color in dashboard widgets for better
 visibility in light/dark themes

---
 .../amount-collected-pie.component.scss       | 20 ++++++++++++++++-
 .../amount-disbursed-pie.component.scss       | 20 ++++++++++++++++-
 .../client-trends-bar.component.scss          | 22 +++++++++++++++++--
 3 files changed, 58 insertions(+), 4 deletions(-)

diff --git a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss
index 42d867772..0d990f37a 100644
--- a/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss
+++ b/src/app/home/dashboard/amount-collected-pie/amount-collected-pie.component.scss
@@ -3,8 +3,13 @@
   padding: 0;
 
   .header {
-    #office {
+    :where(#office) {
       margin-bottom: -1.2em;
+
+      // Make sure mat-label text is visible in light theme
+      :where(mat-label) {
+        color: rgb(0 0 0 / 87%); // Standard Material Design text color for light theme
+      }
     }
   }
 
@@ -12,3 +17,16 @@
     height: 20rem;
   }
 }
+
+// Dark theme specific styles
+:host-context(.dark-theme) {
+  .card {
+    .header {
+      :where(#office) {
+        :where(mat-label) {
+          color: white; // White text color for dark theme
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss
index 42d867772..0d990f37a 100644
--- a/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss
+++ b/src/app/home/dashboard/amount-disbursed-pie/amount-disbursed-pie.component.scss
@@ -3,8 +3,13 @@
   padding: 0;
 
   .header {
-    #office {
+    :where(#office) {
       margin-bottom: -1.2em;
+
+      // Make sure mat-label text is visible in light theme
+      :where(mat-label) {
+        color: rgb(0 0 0 / 87%); // Standard Material Design text color for light theme
+      }
     }
   }
 
@@ -12,3 +17,16 @@
     height: 20rem;
   }
 }
+
+// Dark theme specific styles
+:host-context(.dark-theme) {
+  .card {
+    .header {
+      :where(#office) {
+        :where(mat-label) {
+          color: white; // White text color for dark theme
+        }
+      }
+    }
+  }
+}
diff --git a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss
index 1690fb065..3cc9e4968 100644
--- a/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss
+++ b/src/app/home/dashboard/client-trends-bar/client-trends-bar.component.scss
@@ -3,12 +3,17 @@
   padding: 0;
 
   .header {
-    #office {
+    :where(#office) {
       margin-bottom: -1.2em;
+
+      // Make sure mat-label text is visible in light theme
+      :where(mat-label) {
+        color: rgb(0 0 0 / 87%); // Standard Material Design text color for light theme
+      }
     }
   }
 
-  #timescale {
+  :where(#timescale) {
     margin: 2% 50%;
     transform: translateX(-50%);
   }
@@ -19,3 +24,16 @@
     min-height: 16.5rem;
   }
 }
+
+// Dark theme specific styles
+:host-context(.dark-theme) {
+  .card {
+    .header {
+      :where(#office) {
+        :where(mat-label) {
+          color: white; // White text color for dark theme
+        }
+      }
+    }
+  }
+}