[AlekyaJogini]

Description
In dark mode, the date inputs in the Financials section of the Total Construction Summary were white. Cost Variance Trend (Start Date / End Date) showed white boxes, and Cost Breakdown by Category (From / To) showed white boxes with invisible text.

Location: Dashboard → Reports → Total Construction Summary → Financials (/bmdashboard/totalconstructionsummary)

Main changes explained:

• ToolsStoppageHorizontalBarChart.module.css: the rule :global(.react-datepicker-wrapper input) used !important and applied to every date picker in the app, forcing them white. Scoped it to the Reason of Stoppage chart's own wrapper (.datepickerWrapper), so it no longer affects other charts. The Stoppage chart looks the same as before.
• CostVarianceTrendGraph.module.css: with the global rule scoped, the dark date input rule (.dateInput.darkDateInput) applies without !important. Also scoped the base .dateInput rule to .datePickerWrapper so the light mode border stays thin.
• CostBreakDown.module.css: the global input[type='date'] rule set a white background. Added a dark mode rule (.wrapperDark .filterInput) using the chart's existing dark colors, plus color-scheme: dark so the calendar icon is visible.
• Also fixed 2 existing stylelint errors in CostVarianceTrendGraph.module.css (media query range notation and a hex color shorthand); no visual change.
• Light mode is unchanged.

How to test:

1. Check out this branch, run npm install and npm run start:local, log in as admin.
2. Go to /bmdashboard/totalconstructionsummary and open Financials.
3. Switch to dark mode: the Start Date / End Date boxes (Cost Variance Trend) and From / To boxes (Cost Breakdown by Category) are dark with readable text.
4. Click each box: the calendar opens and picking dates updates the chart.
5. Switch to light mode: all four boxes look as before (white, thin border).
6. Open Tools and Equipment Tracking → Reason of Stoppage of Tools: the "Filter by Date Range" box looks the same as before in light and dark mode, and the calendar opens.
7. Check the other date pickers (Loss Tracking, Paid Labor Cost, Issue Tracking, Global Distribution): they are readable and the calendar opens in light and dark mode.

Screenshots:
Before (dark mode):

After (dark mode):

After (light mode, calendar open):

After scoping the global date picker rule:

Cost Variance Trend, light mode (thin border):

Reason of Stoppage, dark mode (same as before):

Reason of Stoppage, light mode (calendar opens):

Issue Tracking, dark mode (date boxes now dark, they were white before):

Note:
Tested the other date pickers on the page after scoping the global rule: Reason of Stoppage, Loss Tracking, Paid Labor Cost, Issue Tracking and Global Distribution all still work in light and dark mode, and Issue Tracking's date boxes are now dark in dark mode (they were forced white before). SonarCloud quality gate passes with 0 new issues.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	d67561c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6aed55fd8c090df81aa713f8
😎 Deploy Preview	https://deploy-preview-5712--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[rahulrubugunday]

I have reviewed your PR locally (frontend commit 59d3860, backend on development).

Working:

1. Dark mode: Cost Variance Trend Start/End Date and Cost Breakdown From/To boxes are dark with readable text.
2. Picking dates updates both charts (Cost Variance Trend filtered to May 5 to 15, Cost Breakdown total changed with a To date).
3. Light mode: all four boxes are white with a thin border as before.
4. Reason of Stoppage date range and the other date pickers (Loss Tracking, Paid Labor Cost, Issue Tracking, Global Distribution) are readable and open in both modes.

Needs fixing:

1. Cost Breakdown From/To in dark mode: the calendar icon is dark on the dark box and hard to see. The new color-scheme: dark and the existing invert(1) filter on the icon cancel each other out. Please keep only one of them so the icon shows light.

[iAbhi001]

I tested PR #5712 locally at commit 59d3860 paired with the backend on development in dark mode. The dark input background styling resolves the bright white box issue, the text is legible, and the calendar popup opens and filters data cleanly. However, as shown in testing, the calendar picker indicator icon inside the "From" and "To" boxes of Cost Breakdown by Category is invisible/dark against the input background. Combining color-scheme: dark with the existing invert(1) filter cancels out the icon lightness. Please remove the redundant filter so the calendar icon renders with proper light contrast in dark mode. Requesting changes until this contrast issue is addressed.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud