From 241cf171e539ff734e1e60b482f83310250f3748 Mon Sep 17 00:00:00 2001
From: Vinay Vk <vinayvk@Vinays-MacBook-Air.local>
Date: Sat, 3 Jan 2026 22:28:37 -0500
Subject: [PATCH 1/2] Updated the Weekly Project Summary page

---
 .../WeeklyProjectSummary.jsx                  | 108 ++++++------------
 .../WeeklyProjectSummary.module.css           |  73 +++++-------
 2 files changed, 66 insertions(+), 115 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index b5558bee82..3625263bbd 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -122,52 +122,6 @@ const projectStatusButtons = [
   },
 ];
 
-export function WeeklyProjectSummaryContent() {
-  const dispatch = useDispatch();
-  const materials = useSelector(state => state.materials?.materialslist || []);
-  const [openSections, setOpenSections] = useState({});
-
-  const getColorScheme = percentage => {
-    if (percentage === '-') return 'neutral';
-    if (percentage > 0) return 'positive';
-    if (percentage < 0) return 'negative';
-    return 'neutral';
-  };
-
-  const colorScheme = getColorScheme(monthOverMonth);
-
-  const titleClass = title.replace(/\s+/g, '-').toLowerCase();
-
-  return (
-    <div
-      className={`financial-card ${colorScheme} custom-box-shadow financial-card-background-${titleClass}`}
-      onMouseEnter={() => setShowTooltip(true)}
-      onMouseLeave={() => setShowTooltip(false)}
-    >
-      <div className="financial-card-title">{title}</div>
-      <div className={`financial-card-ellipse financial-card-ellipse-${titleClass}`} />
-      <div className="financial-card-value">{value === '-' ? '-' : value.toLocaleString()}</div>
-      <div className={`financial-card-month-over-month ${colorScheme}`}>
-        {monthOverMonth === '-'
-          ? '-'
-          : `${monthOverMonth > 0 ? '+' : ''}${monthOverMonth}% month over month`}
-      </div>
-
-      {/* Tooltip for Additional Info */}
-      {showTooltip && Object.keys(additionalInfo).length > 0 && (
-        <div className="financial-card-tooltip">
-          {Object.entries(additionalInfo).map(([key]) => (
-            <div key={key} className="financial-card-tooltip-item">
-              <span className="tooltip-key">{key}:</span>
-              <span className="tooltip-value">{value}</span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
 function WeeklyProjectSummary() {
   const dispatch = useDispatch();
   const materials = useSelector(state => state.materials?.materialslist || []);
@@ -205,26 +159,25 @@ function WeeklyProjectSummary() {
         key: 'Project Status',
         className: 'full',
         content: (
-          <div className={`${styles.projectStatusGrid}`}>
+          <div className={styles.projectStatusGrid}>
             {projectStatusButtons.map(button => {
               const uniqueId = uuidv4();
               return (
                 <div
                   key={uniqueId}
                   className={`${styles.weeklyProjectSummaryCard} ${styles.statusCard}`}
-                  style={{ backgroundColor: button.bgColor }} // Dynamic Background
+                  style={{ backgroundColor: button.bgColor }}
                 >
-                  <div className={`${styles.weeklyCardTitle}`}>{button.title}</div>
+                  <div className={styles.weeklyCardTitle}>{button.title}</div>
+
                   <div
-                    className={`${styles.weeklyStatusButton}`}
-                    style={{ backgroundColor: button.buttonColor }} // Dynamic Oval Color
+                    className={styles.weeklyStatusButton}
+                    style={{ backgroundColor: button.buttonColor }}
                   >
-                    <span className={`${styles.weeklyStatusValue}`}>{button.value}</span>
+                    <span className={styles.weeklyStatusValue}>{button.value}</span>
                   </div>
-                  <div
-                    className="weekly-status-change"
-                    style={{ color: button.textColor }} // Dynamic Change Color
-                  >
+
+                  <div className={styles.weeklyStatusChange} style={{ color: button.textColor }}>
                     {button.change}
                   </div>
                 </div>
@@ -233,7 +186,6 @@ function WeeklyProjectSummary() {
           </div>
         ),
       },
-      // New Issues Breakdown card
       {
         title: 'Issues Breakdown',
         key: 'Issues Breakdown',
@@ -303,7 +255,10 @@ function WeeklyProjectSummary() {
         className: 'half',
         content: [
           <MostFrequentKeywords key="frequent-tags-card" />,
-          <div key="injury-chart" className="weekly-project-summary-card normal-card">
+          <div
+            key="injury-chart"
+            className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
+          >
             <InjuryCategoryBarChart />
           </div>,
         ],
@@ -314,13 +269,21 @@ function WeeklyProjectSummary() {
         className: 'large',
         content: (
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
-            <div className="weekly-project-summary-card financial-small">📊 Card</div>
-            <div className="weekly-project-summary-card financial-small financial-chart">
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
+              📊 Card
+            </div>
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
               <ExpenseBarChart />
             </div>
-            <div className="weekly-project-summary-card financial-small">📊 Card</div>
-            <div className="weekly-project-summary-card financial-small">📊 Card</div>
-            <div className="weekly-project-summary-card financial-big">📊 Big Card</div>
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
+              📊 Card
+            </div>
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
+              📊 Card
+            </div>
+            <div className={`${styles.weeklyProjectSummaryCard} ${styles.fullCard}`}>
+              📊 Big Card
+            </div>
           </div>
         ),
       },
@@ -414,7 +377,6 @@ function WeeklyProjectSummary() {
 
       const clonedContent = contentElement.cloneNode(true);
 
-      // Remove buttons and controls not needed in PDF
       clonedContent
         .querySelectorAll(
           'button, .weekly-project-summary-dropdown-icon, .no-print, .weekly-summary-header-controls',
@@ -423,7 +385,7 @@ function WeeklyProjectSummary() {
 
       const styleElem = document.createElement('style');
       styleElem.textContent = `
-          img, svg {
+        img, svg {
           height: auto !important;
           page-break-inside: avoid !important;
         }
@@ -461,9 +423,7 @@ function WeeklyProjectSummary() {
       const now = new Date();
       const fileName = `weekly-project-summary-${now.toISOString().slice(0, 10)}.pdf`;
 
-      // Save the PDF
       pdf.save(fileName);
-
       document.body.removeChild(pdfContainer);
     } catch (err) {
       // eslint-disable-next-line no-console
@@ -474,10 +434,14 @@ function WeeklyProjectSummary() {
   };
 
   return (
-    <div className={`weekly-project-summary-container ${darkMode ? 'dark-mode' : ''}`}>
+    <div
+      className={`weekly-project-summary-container ${styles.weeklyProjectSummaryContainer} ${
+        darkMode ? styles.darkMode : ''
+      }`}
+    >
       <WeeklyProjectSummaryHeader handleSaveAsPDF={handleSaveAsPDF} />
-      <div className={`${styles.weeklyProjectSummaryDashboardContainer}`}>
-        <div className={`${styles.weeklyProjectSummaryDashboardGrid}`}>
+      <div className={styles.weeklyProjectSummaryDashboardContainer}>
+        <div className={styles.weeklyProjectSummaryDashboardGrid}>
           {sections.map(({ title, key, className, content }) => (
             <div
               key={key}
@@ -491,9 +455,7 @@ function WeeklyProjectSummary() {
                 {title} <span>{openSections[key] ? '∧' : '∨'}</span>
               </button>
               {openSections[key] && (
-                <div className={`${styles.weeklyProjectSummaryDashboardCategoryContent}`}>
-                  {content}
-                </div>
+                <div className={styles.weeklyProjectSummaryDashboardCategoryContent}>{content}</div>
               )}
             </div>
           ))}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index 9bc341b671..1a9becf20f 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -12,9 +12,13 @@
   padding: 0;
 }
 
+/* MERGED: was duplicated */
 .weeklyProjectSummaryDashboardContainer {
-  width: 100%;
+  width: 95%;
+  margin: auto;
+  padding: 20px;
   background: var(--bg-color);
+  color: var(--text-color);
 }
 
 .weeklyProjectSummaryHeaderWrapper {
@@ -73,7 +77,7 @@
   background-color: var(--section-title-hover) !important;
 }
 
-/* Share Button */
+/* Share Button (MERGED: was duplicated) */
 .weeklySummaryShareBtn {
   background-color: var(--button-bg) !important;
   color: white;
@@ -88,14 +92,6 @@
 }
 
 /* ---------------- DASHBOARD ---------------- */
-.weeklyProjectSummaryDashboardContainer {
-  width: 95%;
-  margin: auto;
-  padding: 20px;
-  background: var(--bg-color);
-  color: var(--text-color);
-}
-
 .weeklyProjectSummaryDashboardGrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -120,13 +116,6 @@
 }
 
 /* ---------------- CARDS ---------------- */
-.projectStatusGrid {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: repeat(2, auto);
-  gap: 10px;
-}
-
 .weeklyProjectSummaryCard {
   background: var(--card-bg);
   padding: 10px;
@@ -135,7 +124,7 @@
   box-shadow: 0 2px 5px var(--card-shadow);
 }
 
-.darkMode .weeklyProjectSummaryCard {
+.dark-mode .weeklyProjectSummaryCard {
   background: var(--card-bg);
   box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
 }
@@ -147,7 +136,6 @@
   grid-column: span 1;
 }
 
-
 .weekly-project-summary-card.financial-big {
   grid-column: span 4;
   min-height: 600px;
@@ -165,7 +153,6 @@
   margin: 0;
   font-weight: normal;
   font-size: 24px;
-
 }
 
 .fullCard {
@@ -253,7 +240,7 @@
 }
 
 /* ---------------- DARK MODE STYLES ---------------- */
-.darkMode {
+.dark-mode {
   --bg-color: #1b2a41;
   --text-color: #ffffff;
   --card-bg: #2b3e59;
@@ -265,38 +252,44 @@
   --button-hover: #f5b13a;
 }
 
-.darkMode .weeklyProjectSummaryDashboardCategoryTitle {
+.dark-mode .weeklyProjectSummaryDashboardCategoryTitle {
   color: #ffffff;
   background: #2d4059;
 }
 
-.darkMode .weeklyProjectSummaryDashboardCategoryTitle:hover {
+.dark-mode .weeklyProjectSummaryDashboardCategoryTitle:hover {
   background: #3a506b;
 }
 
-.darkMode .weeklyProjectSummaryDashboardCategoryContent {
+.dark-mode .weeklyProjectSummaryDashboardCategoryContent {
   background-color: var(--section-bg);
   border-top: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.darkMode .weeklySummaryHeaderContainer {
+.dark-mode .weeklySummaryHeaderContainer {
   background: var(--section-bg);
   color: var(--text-color);
 }
 
-.weeklySummaryShareBtn {
-  background-color: var(--button-bg) !important;
+/* 
+   - In dark mode -> make Project Status texts visible (white)
+   - In light mode -> remain black (existing rules keep it black)
+*/
+.dark-mode .weeklyCardTitle,
+.dark-mode .weeklyStatusValue,
+.dark-mode .weekly-status-change {
+  color: #ffffff !important;
 }
 
-.weeklySummaryShareBtn:hover {
-  background-color: var(--button-hover) !important;
-}
-
-/* First, set a max-height and make it scrollable */
+/* ---------------- TOOLTIP (MERGED: was duplicated) ---------------- */
 .quantityOfMaterialsUsedChartTooltip {
   max-height: 80vh !important; /* Limit to 80% of viewport height */
   overflow-y: auto !important; /* Enable vertical scrolling */
   padding-right: 15px !important; /* Add some padding for the scrollbar */
+
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
 }
 
 /* Style the scrollbar for better visibility */
@@ -314,24 +307,19 @@
   border-radius: 4px;
 }
 
-/* Support for Firefox */
-.quantityOfMaterialsUsedChartTooltip {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
-}
-
 /* Additional adjustments for dark mode if needed */
-.darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track {
+.dark-mode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
 }
 
-.darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-thumb {
+.dark-mode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
 }
 
-.darkMode .quantityOfMaterialsUsedChartTooltip {
+.dark-mode .quantityOfMaterialsUsedChartTooltip {
   scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
 }
+
 /* ---------------- RESPONSIVE DESIGN ---------------- */
 
 /* Medium Screens - Wrap Items */
@@ -409,6 +397,7 @@
 }
 
 /* ---------------- RESPONSIVE GRID LAYOUT ---------------- */
+/* MERGED: projectStatusGrid was duplicated, keep only this one */
 .projectStatusGrid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
@@ -473,4 +462,4 @@
   .projectStatusGrid {
     grid-template-columns: repeat(1, 1fr);
   }
-}
\ No newline at end of file
+}

From f5a06c58acb227df2ddfd65ace63e22033807e6a Mon Sep 17 00:00:00 2001
From: Vinay Vk <vinayvk@Vinays-MacBook-Air.local>
Date: Sat, 3 Jan 2026 23:15:19 -0500
Subject: [PATCH 2/2] Made changes in the weekly project summary jsx and css
 file

---
 .../WeeklyProjectSummary.jsx                  | 94 +++++++++++++------
 .../WeeklyProjectSummary.module.css           | 67 ++++++-------
 2 files changed, 95 insertions(+), 66 deletions(-)

diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
index 3625263bbd..598a25c6c4 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx
@@ -1,3 +1,5 @@
+// export default WeeklyProjectSummary;
+
 /* eslint-disable import/no-unresolved */
 import { useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -122,11 +124,57 @@ const projectStatusButtons = [
   },
 ];
 
+export function WeeklyProjectSummaryContent() {
+  const dispatch = useDispatch();
+  const materials = useSelector(state => state.materials?.materialslist || []);
+  const [openSections, setOpenSections] = useState({});
+
+  const getColorScheme = percentage => {
+    if (percentage === '-') return 'neutral';
+    if (percentage > 0) return 'positive';
+    if (percentage < 0) return 'negative';
+    return 'neutral';
+  };
+
+  const colorScheme = getColorScheme(monthOverMonth);
+
+  const titleClass = title.replace(/\s+/g, '-').toLowerCase();
+
+  return (
+    <div
+      className={`financial-card ${colorScheme} custom-box-shadow financial-card-background-${titleClass}`}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      <div className="financial-card-title">{title}</div>
+      <div className={`financial-card-ellipse financial-card-ellipse-${titleClass}`} />
+      <div className="financial-card-value">{value === '-' ? '-' : value.toLocaleString()}</div>
+      <div className={`financial-card-month-over-month ${colorScheme}`}>
+        {monthOverMonth === '-'
+          ? '-'
+          : `${monthOverMonth > 0 ? '+' : ''}${monthOverMonth}% month over month`}
+      </div>
+
+      {showTooltip && Object.keys(additionalInfo).length > 0 && (
+        <div className="financial-card-tooltip">
+          {Object.entries(additionalInfo).map(([key]) => (
+            <div key={key} className="financial-card-tooltip-item">
+              <span className="tooltip-key">{key}:</span>
+              <span className="tooltip-value">{value}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function WeeklyProjectSummary() {
   const dispatch = useDispatch();
   const materials = useSelector(state => state.materials?.materialslist || []);
   const [openSections, setOpenSections] = useState({});
   const darkMode = useSelector(state => state.theme.darkMode);
+
   useEffect(() => {
     if (materials.length === 0) {
       dispatch(fetchAllMaterials());
@@ -159,7 +207,7 @@ function WeeklyProjectSummary() {
         key: 'Project Status',
         className: 'full',
         content: (
-          <div className={styles.projectStatusGrid}>
+          <div className={`${styles.projectStatusGrid}`}>
             {projectStatusButtons.map(button => {
               const uniqueId = uuidv4();
               return (
@@ -168,16 +216,14 @@ function WeeklyProjectSummary() {
                   className={`${styles.weeklyProjectSummaryCard} ${styles.statusCard}`}
                   style={{ backgroundColor: button.bgColor }}
                 >
-                  <div className={styles.weeklyCardTitle}>{button.title}</div>
-
+                  <div className={`${styles.weeklyCardTitle}`}>{button.title}</div>
                   <div
-                    className={styles.weeklyStatusButton}
+                    className={`${styles.weeklyStatusButton}`}
                     style={{ backgroundColor: button.buttonColor }}
                   >
-                    <span className={styles.weeklyStatusValue}>{button.value}</span>
+                    <span className={`${styles.weeklyStatusValue}`}>{button.value}</span>
                   </div>
-
-                  <div className={styles.weeklyStatusChange} style={{ color: button.textColor }}>
+                  <div className="weekly-status-change" style={{ color: button.textColor }}>
                     {button.change}
                   </div>
                 </div>
@@ -255,10 +301,7 @@ function WeeklyProjectSummary() {
         className: 'half',
         content: [
           <MostFrequentKeywords key="frequent-tags-card" />,
-          <div
-            key="injury-chart"
-            className={`${styles.weeklyProjectSummaryCard} ${styles.normalCard}`}
-          >
+          <div key="injury-chart" className="weekly-project-summary-card normal-card">
             <InjuryCategoryBarChart />
           </div>,
         ],
@@ -269,21 +312,13 @@ function WeeklyProjectSummary() {
         className: 'large',
         content: (
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
-              📊 Card
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
+            <div className="weekly-project-summary-card financial-small">📊 Card</div>
+            <div className="weekly-project-summary-card financial-small financial-chart">
               <ExpenseBarChart />
             </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
-              📊 Card
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.financialSmall}`}>
-              📊 Card
-            </div>
-            <div className={`${styles.weeklyProjectSummaryCard} ${styles.fullCard}`}>
-              📊 Big Card
-            </div>
+            <div className="weekly-project-summary-card financial-small">📊 Card</div>
+            <div className="weekly-project-summary-card financial-small">📊 Card</div>
+            <div className="weekly-project-summary-card financial-big">📊 Big Card</div>
           </div>
         ),
       },
@@ -385,7 +420,7 @@ function WeeklyProjectSummary() {
 
       const styleElem = document.createElement('style');
       styleElem.textContent = `
-        img, svg {
+          img, svg {
           height: auto !important;
           page-break-inside: avoid !important;
         }
@@ -424,6 +459,7 @@ function WeeklyProjectSummary() {
       const fileName = `weekly-project-summary-${now.toISOString().slice(0, 10)}.pdf`;
 
       pdf.save(fileName);
+
       document.body.removeChild(pdfContainer);
     } catch (err) {
       // eslint-disable-next-line no-console
@@ -440,8 +476,8 @@ function WeeklyProjectSummary() {
       }`}
     >
       <WeeklyProjectSummaryHeader handleSaveAsPDF={handleSaveAsPDF} />
-      <div className={styles.weeklyProjectSummaryDashboardContainer}>
-        <div className={styles.weeklyProjectSummaryDashboardGrid}>
+      <div className={`${styles.weeklyProjectSummaryDashboardContainer}`}>
+        <div className={`${styles.weeklyProjectSummaryDashboardGrid}`}>
           {sections.map(({ title, key, className, content }) => (
             <div
               key={key}
@@ -455,7 +491,9 @@ function WeeklyProjectSummary() {
                 {title} <span>{openSections[key] ? '∧' : '∨'}</span>
               </button>
               {openSections[key] && (
-                <div className={styles.weeklyProjectSummaryDashboardCategoryContent}>{content}</div>
+                <div className={`${styles.weeklyProjectSummaryDashboardCategoryContent}`}>
+                  {content}
+                </div>
               )}
             </div>
           ))}
diff --git a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
index 1a9becf20f..23b8f9c8cf 100644
--- a/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
+++ b/src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.module.css
@@ -12,7 +12,7 @@
   padding: 0;
 }
 
-/* MERGED: was duplicated */
+/* ---------------- DASHBOARD CONTAINER ---------------- */
 .weeklyProjectSummaryDashboardContainer {
   width: 95%;
   margin: auto;
@@ -77,7 +77,7 @@
   background-color: var(--section-title-hover) !important;
 }
 
-/* Share Button (MERGED: was duplicated) */
+/* Share Button */
 .weeklySummaryShareBtn {
   background-color: var(--button-bg) !important;
   color: white;
@@ -91,7 +91,7 @@
   background-color: var(--button-hover) !important;
 }
 
-/* ---------------- DASHBOARD ---------------- */
+/* ---------------- GRID ---------------- */
 .weeklyProjectSummaryDashboardGrid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -124,7 +124,7 @@
   box-shadow: 0 2px 5px var(--card-shadow);
 }
 
-.dark-mode .weeklyProjectSummaryCard {
+.darkMode .weeklyProjectSummaryCard {
   background: var(--card-bg);
   box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
 }
@@ -184,6 +184,7 @@
   overflow: hidden;
 }
 
+/* ---------------- SECTION ---------------- */
 .weeklyProjectSummaryDashboardSection {
   background: var(--section-bg);
   border-radius: 8px;
@@ -240,7 +241,7 @@
 }
 
 /* ---------------- DARK MODE STYLES ---------------- */
-.dark-mode {
+.darkMode {
   --bg-color: #1b2a41;
   --text-color: #ffffff;
   --card-bg: #2b3e59;
@@ -252,47 +253,46 @@
   --button-hover: #f5b13a;
 }
 
-.dark-mode .weeklyProjectSummaryDashboardCategoryTitle {
-  color: #ffffff;
+/* MERGED: keep background + FORCE all title text visible in dark mode */
+.darkMode .weeklyProjectSummaryDashboardCategoryTitle {
   background: #2d4059;
+  color: #ffffff;
 }
 
-.dark-mode .weeklyProjectSummaryDashboardCategoryTitle:hover {
+.darkMode .weeklyProjectSummaryDashboardCategoryTitle:hover {
   background: #3a506b;
 }
 
-.dark-mode .weeklyProjectSummaryDashboardCategoryContent {
+.darkMode .weeklyProjectSummaryDashboardCategoryTitle span {
+  color: #ffffff;
+}
+
+.darkMode .weeklyProjectSummaryDashboardCategoryTitle * {
+  color: #ffffff;
+}
+
+.darkMode .weeklyProjectSummaryDashboardCategoryContent {
   background-color: var(--section-bg);
   border-top: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-.dark-mode .weeklySummaryHeaderContainer {
+.darkMode .weeklySummaryHeaderContainer {
   background: var(--section-bg);
   color: var(--text-color);
 }
 
-/* 
-   - In dark mode -> make Project Status texts visible (white)
-   - In light mode -> remain black (existing rules keep it black)
-*/
-.dark-mode .weeklyCardTitle,
-.dark-mode .weeklyStatusValue,
-.dark-mode .weekly-status-change {
-  color: #ffffff !important;
-}
-
-/* ---------------- TOOLTIP (MERGED: was duplicated) ---------------- */
+/* ---------------- TOOLTIP SCROLL FIX ---------------- */
 .quantityOfMaterialsUsedChartTooltip {
-  max-height: 80vh !important; /* Limit to 80% of viewport height */
-  overflow-y: auto !important; /* Enable vertical scrolling */
-  padding-right: 15px !important; /* Add some padding for the scrollbar */
+  max-height: 80vh !important;
+  overflow-y: auto !important;
+  padding-right: 15px !important;
 
   /* Firefox */
   scrollbar-width: thin;
   scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
 }
 
-/* Style the scrollbar for better visibility */
+/* Chrome/Safari scrollbar */
 .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar {
   width: 8px;
 }
@@ -308,21 +308,19 @@
 }
 
 /* Additional adjustments for dark mode if needed */
-.dark-mode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track {
+.darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
 }
 
-.dark-mode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-thumb {
+.darkMode .quantityOfMaterialsUsedChartTooltip::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.3);
 }
 
-.dark-mode .quantityOfMaterialsUsedChartTooltip {
+.darkMode .quantityOfMaterialsUsedChartTooltip {
   scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
 }
 
 /* ---------------- RESPONSIVE DESIGN ---------------- */
-
-/* Medium Screens - Wrap Items */
 @media (max-width: 1024px) {
   .weeklySummaryHeaderContainer {
     flex-direction: column;
@@ -340,7 +338,6 @@
   }
 }
 
-/* Small Screens - Make Dropdowns Vertical */
 @media (max-width: 768px) {
   .weeklySummaryHeaderContainer {
     flex-direction: column;
@@ -353,12 +350,10 @@
     width: 100%;
   }
 
-  /* Make Dropdowns Full Width */
   .weeklySummaryHeaderControls select {
     width: 100%;
   }
 
-  /* Make Button Full Width */
   .weeklySummaryShareBtn {
     width: 100%;
   }
@@ -373,10 +368,6 @@
   .weeklyProjectSummaryDashboardSection.small {
     grid-column: span 1;
   }
-
-  .projectStatusGrid {
-    grid-template-columns: 1fr;
-  }
 }
 
 /* ---------------- STATUS CARD ---------------- */
@@ -397,7 +388,7 @@
 }
 
 /* ---------------- RESPONSIVE GRID LAYOUT ---------------- */
-/* MERGED: projectStatusGrid was duplicated, keep only this one */
+/* MERGED: keep ONLY one projectStatusGrid */
 .projectStatusGrid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);