David/mega-plant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
mega-plant/app/globals.css

106 lines
3.6 KiB
CSS
Raw Normal View History

Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
@import "tailwindcss";
/* Enable dark mode via .dark class on html */
@custom-variant dark (&:where(.dark, .dark *));
/* Coolors palette — stays the same in both modes */
@theme {
--color-sunny: #EDAE49;
--color-brick: #D1495B;
--color-seaweed: #00798C;
--color-casual: #30638E;
--color-indigo: #003D5B;
Round 3 (Parts A-B): charts fixes + expenses/overheads cleanup - A.1: fixed_expenses per month now threaded through to chart bucket - A.2: null = no data (forecast), 0 = real plotted zero — distinguishable - A.3: x-axis clipped to last actual month (IncomeAreaChart + IncomeBarChart + MachineLineChart) - A.4: chart hues as CSS vars (--color-chart-income/fixed/running) — deeper steps of same hues, validated for CVD - A.5: chart-type toggle (Lines / Cost stack / Profit) + localStorage persistence + dynamic legend - A.6: profit on charts page comes from computeProfit() - B.1: deleted /expenses/plant-overheads, /expenses/insurance, /expenses/tracking (all empty); added /expenses/vehicles; ExpenseSectionPage now has an empty state - B.2: captured R 157,200 Personnel block, R 100,000 Maintenance, R 10,000 Petty Cash; roll-up reconciles to R 675,162.93 (= sum of non-Plant non-Santam rows; workbook grand total R 1,110,486.87 is internally off by R 14,477.56 vs its own rows) - B.3: seed flags incl<excl, VAT>20%, broken VAT math — does NOT silently correct; 4 anomalies reported on Charl-CCS + Buildsmart - B.4: noted that workbook Vehicle Costs subtotal skips Santam (app R 9,673.87 is correct; workbook is wrong) - B.2 reconciliation assertion added to verify-cost-reconciliation.mjs - Sidebar updated: Vehicles added, Insurance/Tracking/Plant-Overheads removed
2026-09-12 09:24:18 +00:00
/* Part A.4: chart hues — deeper steps of the same brand hues, validated for CVD/contrast.
Brand palette (#EDAE49/#00798C/#D1495B) does NOT change; these are read only by chart marks. */
--color-chart-income: #0090A6;
--color-chart-fixed: #BE851F;
--color-chart-running: #C13B4D;
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
--color-brand-blue: #30638E;
--color-brand-orange: #EDAE49;
--color-brand-red: #D1495B;
--color-brand-green: #00798C;
--color-brand-purple: #8B5CF6;
--color-brand-cyan: #00798C;
--color-brand-pink: #D1495B;
--color-brand-yellow: #EDAE49;
/* Light theme (default) */
--color-bg: #f5f7fb;
--color-surface: #ffffff;
--color-surface-muted: #f9fafb;
--color-border: #e5e7eb;
--color-border-soft: #f3f4f6;
--color-text: #003D5B;
--color-text-muted: #6b7280;
--color-text-soft: #9ca3af;
--color-row-hover: rgba(0, 0, 0, 0.02);
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
/* "Ink" steps — the light-mode colour for text that borrows a brand hue.
The base brand palette above is never used as text on a light surface unless
it clears 4.5:1; these names exist so `text-accent-ink` works in BOTH modes
and only its value changes. See the .dark block for the dark counterparts. */
--color-accent-ink: #30638E;
--color-brick-ink: #D1495B;
--color-indigo-ink: #003D5B;
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
}
/* Dark theme overrides */
.dark {
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
--color-bg: #0f151b;
--color-surface: #1e2732;
--color-surface-muted: #182029;
--color-border: #303c48;
--color-border-soft: #26313c;
--color-text: #e8eef4;
--color-text-muted: #adb8c2;
--color-text-soft: #87919a;
--color-row-hover: rgba(255, 255, 255, 0.04);
/* Dark "ink" steps. The base brand hues are correct as *fills* but fail WCAG AA
as text on a dark surface (seaweed 3.6:1, casual 2.9:1, brick 3.7:1, indigo 1.6:1).
These are lighter steps of the same hues, reaching 4.8–7.3:1. Text-only —
never a fill — so the @theme brand palette stays untouched. */
--color-accent-ink: #2BB0C4;
--color-brick-ink: #E86E7E;
--color-indigo-ink: #7FA8C9;
Round 3 (Parts A-B): charts fixes + expenses/overheads cleanup - A.1: fixed_expenses per month now threaded through to chart bucket - A.2: null = no data (forecast), 0 = real plotted zero — distinguishable - A.3: x-axis clipped to last actual month (IncomeAreaChart + IncomeBarChart + MachineLineChart) - A.4: chart hues as CSS vars (--color-chart-income/fixed/running) — deeper steps of same hues, validated for CVD - A.5: chart-type toggle (Lines / Cost stack / Profit) + localStorage persistence + dynamic legend - A.6: profit on charts page comes from computeProfit() - B.1: deleted /expenses/plant-overheads, /expenses/insurance, /expenses/tracking (all empty); added /expenses/vehicles; ExpenseSectionPage now has an empty state - B.2: captured R 157,200 Personnel block, R 100,000 Maintenance, R 10,000 Petty Cash; roll-up reconciles to R 675,162.93 (= sum of non-Plant non-Santam rows; workbook grand total R 1,110,486.87 is internally off by R 14,477.56 vs its own rows) - B.3: seed flags incl<excl, VAT>20%, broken VAT math — does NOT silently correct; 4 anomalies reported on Charl-CCS + Buildsmart - B.4: noted that workbook Vehicle Costs subtotal skips Santam (app R 9,673.87 is correct; workbook is wrong) - B.2 reconciliation assertion added to verify-cost-reconciliation.mjs - Sidebar updated: Vehicles added, Insurance/Tracking/Plant-Overheads removed
2026-09-12 09:24:18 +00:00
/* Part A.4: dark-mode chart hues */
--color-chart-income: #00A6BE;
--color-chart-fixed: #BE851F;
--color-chart-running: #D94F60;
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
}
html, body {
background: var(--color-bg);
color: var(--color-text);
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { -webkit-font-smoothing: antialiased; }
/* Smooth color transition when toggling themes */
body, .dark body { transition: background-color 0.2s ease, color 0.2s ease; }
.recharts-cartesian-axis-tick text { fill: var(--color-text-soft); font-size: 11px; }
.recharts-cartesian-grid line { stroke: var(--color-border-soft); }
.recharts-default-tooltip {
background: rgba(255,255,255,0.98) !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
font-size: 12px !important;
padding: 8px 12px !important;
}
.recharts-tooltip-label { color: #003D5B !important; font-weight: 600 !important; margin-bottom: 4px !important; }
.recharts-legend-item-text { color: #6b7280 !important; font-size: 12px !important; }
.dark .recharts-default-tooltip {
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
background: rgba(30, 39, 50, 0.98) !important;
border: 1px solid #303c48 !important;
color: #e8eef4 !important;
Mega Plant dashboard — fix & harden (Parts 0-5)
2026-09-12 07:35:35 +00:00
}
Fix: the mobile table was mislabelled and clipping its own totals A screenshot at phone width showed an "INVOICE | LINES | TOTAL | STATUS" header row while the data under LINES was money. The header and its data cell had drifted apart: the earlier pass hid the Lines <td> but not the matching <th>, because the loop that added the hide classes only matched text-left headers and Lines is text-right. So the Total values rendered under a heading that named a column which no longer existed. The same screenshot showed the totals clipped — "41,710.50" reading as "710,50". With only three columns left, the 520px min-width was still forcing a sideways scroll, and the opaque sticky first column then sat on top of the left of the money values. The mobile floor is gone, so the three remaining columns size to their content, and the sticky and status gutters are trimmed at mobile widths to let them fit 375px. Below sm the table is now exactly Invoice, Total, Status — and every header matches a visible cell. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-10-02 13:34:19 +00:00
.dark .recharts-tooltip-label { color: #e8eef4 !important; }
.dark .recharts-legend-item-text { color: #adb8c2 !important; }
Reference in a new issue Copy permalink