Dashboard layout overhaul + fix Tremor chart colors and tooltips

- Restructure dashboard: score distribution + recently reviewed stacked in left column,
  full-width map at bottom, activity feed in middle row
- Show all jurors in scrollable workload list (not just top 5)
- Filter recently reviewed to exclude rejected/not-reviewed projects
- Filter transition audit logs from activity feed
- Remove completion progress bar from stat tile for equal card heights
- Fix all Tremor charts: switch hex colors to named palette (cyan/teal/emerald/amber/rose)
  to fix black bar rendering
- Fix transparent chart tooltips with global CSS overrides
- Remove tilted text labels from cross-round comparison charts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/charts/cross-round-comparison.tsx

@@ -2,7 +2,6 @@
 
 import { BarChart } from '@tremor/react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { BRAND_COLORS } from './chart-theme'
 
 interface StageComparison {
   roundId: string
@@ -32,10 +31,7 @@ export function CrossStageComparisonChart({
   }
 
   const baseData = data.map((round) => ({
-    name:
-      round.roundName.length > 20
-        ? round.roundName.slice(0, 20) + '...'
-        : round.roundName,
+    name: round.roundName,
     Projects: round.projectCount,
     Evaluations: round.evaluationCount,
     'Completion Rate': round.completionRate,
@@ -50,7 +46,7 @@ export function CrossStageComparisonChart({
         <CardTitle>Round Metrics Comparison</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <Card>
             <CardHeader className="pb-2">
               <CardTitle className="text-sm font-medium">Projects</CardTitle>
@@ -60,11 +56,10 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Projects']}
-                colors={[BRAND_COLORS[0]] as string[]}
+                colors={['cyan']}
                 showLegend={false}
                 yAxisWidth={40}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>
@@ -80,11 +75,10 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Evaluations']}
-                colors={[BRAND_COLORS[2]] as string[]}
+                colors={['teal']}
                 showLegend={false}
                 yAxisWidth={40}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>
@@ -100,13 +94,12 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Completion Rate']}
-                colors={[BRAND_COLORS[1]] as string[]}
+                colors={['emerald']}
                 showLegend={false}
                 maxValue={100}
                 yAxisWidth={40}
                 valueFormatter={(v) => `${v}%`}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>
@@ -122,12 +115,11 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Avg Score']}
-                colors={[BRAND_COLORS[0]] as string[]}
+                colors={['amber']}
                 showLegend={false}
                 maxValue={10}
                 yAxisWidth={40}
                 className="h-[200px]"
-                rotateLabelX={{ angle: -25, xAxisHeight: 40 }}
               />
             </CardContent>
           </Card>