fix: Dashboard cards show black background in light mode due to hardcoded dark theme colors

[smithrashell]

Problem

Dashboard components have hardcoded inline styles using Mantine dark theme colors (e.g., var(--mantine-color-dark-8)), causing:

1. Black cards in light mode - Cards appear dark regardless of theme
2. Maintenance burden - Theming changes require editing many component files
3. Inconsistent styling - Inline styles vs CSS classes

Screenshot

See the Productivity Insights page - cards have dark backgrounds even in light mode.

Root Cause

The CSS scoping commit (#153 / 154b013) properly scoped styles to .cm-extension for content scripts. However, dashboard components were relying on unscoped .mantine-Card-root styles in theme.css to override their inline styles.

When those were scoped to .cm-extension, the inline var(--mantine-color-dark-8) styles took precedence.

Solution

1. Create separate src/app/css/dashboard.css

• Unscoped Mantine component overrides for dashboard
• Semantic card classes (.cm-card-insights, .cm-card-kpi, etc.)

2. Clean up theme.css

• Remove unscoped dashboard styles added as a workaround
• Keep only :root variables and .cm-extension scoped styles

3. Update components to use CSS classes

Replace inline styles with semantic class names:

File	Change
InsightsCard.jsx	style={{...}} → className="cm-card-insights"
RecommendationsCard.jsx	style={{...}} → className="cm-card-recommendations"
ProductivityKPIs.jsx	style={{...}} → className="cm-card-kpi"
ProductivityCharts.jsx	style={{...}} → className="cm-card-chart"
HeatmapChart.jsx	style={{...}} → className="cm-heatmap-cell"
session-history.jsx	Multiple cards
RecentSessionsTable.jsx	style={{...}} → className="cm-card-table"
learning-progress.jsx	style={{...}} → className="cm-card-chart"
ProgressCharts.jsx	Multiple cards

Additional Fix Needed

Also fix [object Object] display in "Learning pattern" insight:

• File: src/app/hooks/useProductivityInsights.js
• commonThemes[0] returns an object {theme, count, percentage}, not a string

Benefits

• Clean separation: Content script CSS vs Dashboard CSS
• No CSS bleeding into host pages
• Single source of truth for card styling
• Easier maintenance - theme changes only require editing CSS
• Follows existing .cm-* naming convention