Jury UX: fix COI modal, add sliders, redesign stats, gate evaluations

- Switch COI dialog from Dialog to AlertDialog (non-dismissible)
- Replace number inputs with sliders + rating buttons for criteria/global scores
- Redesign jury dashboard stat cards: compact strip on mobile, editorial grid on desktop
- Remove ROUND_ACTIVE filter from myAssignments so all assignments show
- Block evaluate page when round is inactive or voting window is closed
- Gate evaluate button on project detail page based on voting window status

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

src/app/(jury)/jury/page.tsx

@@ -24,7 +24,6 @@ import {
   GitCompare,
   Zap,
   BarChart3,
-  Target,
   Waves,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
@@ -187,36 +186,28 @@ async function JuryDashboardContent() {
 
   const stats = [
     {
-      label: 'Total Assignments',
       value: totalAssignments,
-      icon: ClipboardList,
-      accentColor: 'border-l-blue-500',
-      iconBg: 'bg-blue-50 dark:bg-blue-950/40',
-      iconColor: 'text-blue-600 dark:text-blue-400',
+      label: 'Assigned',
+      detail: 'Total projects',
+      accent: 'text-brand-blue',
     },
     {
-      label: 'Completed',
       value: completedAssignments,
-      icon: CheckCircle2,
-      accentColor: 'border-l-emerald-500',
-      iconBg: 'bg-emerald-50 dark:bg-emerald-950/40',
-      iconColor: 'text-emerald-600 dark:text-emerald-400',
+      label: 'Completed',
+      detail: `${completionRate.toFixed(0)}% done`,
+      accent: 'text-emerald-600',
     },
     {
-      label: 'In Progress',
       value: inProgressAssignments,
-      icon: Clock,
-      accentColor: 'border-l-amber-500',
-      iconBg: 'bg-amber-50 dark:bg-amber-950/40',
-      iconColor: 'text-amber-600 dark:text-amber-400',
+      label: 'In draft',
+      detail: inProgressAssignments > 0 ? 'Work in progress' : 'None started',
+      accent: inProgressAssignments > 0 ? 'text-amber-600' : 'text-emerald-600',
     },
     {
-      label: 'Pending',
       value: pendingAssignments,
-      icon: Target,
-      accentColor: 'border-l-slate-400',
-      iconBg: 'bg-slate-50 dark:bg-slate-800/50',
-      iconColor: 'text-slate-500 dark:text-slate-400',
+      label: 'Pending',
+      detail: pendingAssignments > 0 ? 'Not yet started' : 'All started',
+      accent: pendingAssignments > 0 ? 'text-amber-600' : 'text-emerald-600',
     },
   ]
 
@@ -301,48 +292,34 @@ async function JuryDashboardContent() {
         </AnimatedCard>
       )}
 
-      {/* Stats + Overall Completion in one row */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
-        {stats.map((stat, i) => (
-          <AnimatedCard key={stat.label} index={i + 1}>
-            <Card className={cn(
-              'border-l-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
-              stat.accentColor,
-            )}>
-              <CardContent className="flex items-center gap-4 py-5 px-5">
-                <div className={cn('rounded-xl p-3', stat.iconBg)}>
-                  <stat.icon className={cn('h-5 w-5', stat.iconColor)} />
-                </div>
-                <div>
-                  <p className="text-2xl font-bold tabular-nums tracking-tight">{stat.value}</p>
-                  <p className="text-sm text-muted-foreground font-medium">{stat.label}</p>
-                </div>
-              </CardContent>
-            </Card>
-          </AnimatedCard>
-        ))}
-        {/* Overall completion as 5th stat card */}
-        <AnimatedCard index={5}>
-          <Card className="border-l-4 border-l-brand-teal transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md">
-            <CardContent className="flex items-center gap-4 py-5 px-5">
-              <div className="rounded-xl p-3 bg-brand-blue/10 dark:bg-brand-blue/20">
-                <BarChart3 className="h-5 w-5 text-brand-blue dark:text-brand-teal" />
+      {/* Stats — editorial strip */}
+      <AnimatedCard index={1}>
+        {/* Mobile: compact horizontal data strip */}
+        <div className="flex items-baseline justify-between border-b border-t py-3 md:hidden">
+          {stats.map((s, i) => (
+            <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
+              <span className="text-xl font-bold tabular-nums tracking-tight">{s.value}</span>
+              <p className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground mt-0.5">{s.label}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Desktop: editorial stat row */}
+        <div className="hidden md:block">
+          <div className="grid grid-cols-4 gap-px rounded-lg bg-border/40 overflow-hidden">
+            {stats.map((s, i) => (
+              <div
+                key={i}
+                className="bg-background px-5 py-4 group hover:bg-muted/30 transition-colors"
+              >
+                <span className="text-3xl font-bold tabular-nums tracking-tight">{s.value}</span>
+                <p className="text-xs font-medium text-muted-foreground mt-1">{s.label}</p>
+                <p className={`text-xs mt-0.5 ${s.accent}`}>{s.detail}</p>
               </div>
-              <div className="flex-1 min-w-0">
-                <p className="text-2xl font-bold tabular-nums tracking-tight text-brand-blue dark:text-brand-teal">
-                  {completionRate.toFixed(0)}%
-                </p>
-                <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted/60 mt-1">
-                  <div
-                    className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-blue transition-all duration-500 ease-out"
-                    style={{ width: `${completionRate}%` }}
-                  />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </AnimatedCard>
-      </div>
+            ))}
+          </div>
+        </div>
+      </AnimatedCard>
 
       {/* Main content -- two column layout */}
       <div className="grid gap-4 lg:grid-cols-12">
@@ -670,30 +647,25 @@ function DashboardSkeleton() {
   return (
     <>
       {/* Stats skeleton */}
-      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div className="flex items-baseline justify-between border-b border-t py-3 md:hidden">
         {[...Array(4)].map((_, i) => (
-          <Card key={i} className="border-l-4 border-l-muted">
-            <CardContent className="flex items-center gap-4 py-5 px-5">
-              <Skeleton className="h-11 w-11 rounded-xl" />
-              <div className="space-y-2">
-                <Skeleton className="h-7 w-12" />
-                <Skeleton className="h-4 w-24" />
-              </div>
-            </CardContent>
-          </Card>
+          <div key={i} className={`flex-1 text-center ${i > 0 ? 'border-l border-border/50' : ''}`}>
+            <Skeleton className="h-6 w-8 mx-auto" />
+            <Skeleton className="h-3 w-14 mx-auto mt-1" />
+          </div>
         ))}
       </div>
-      {/* Progress bar skeleton */}
-      <Card className="overflow-hidden">
-        <div className="h-1 w-full bg-muted" />
-        <CardContent className="py-5 px-6">
-          <div className="flex items-center justify-between mb-3">
-            <Skeleton className="h-4 w-36" />
-            <Skeleton className="h-7 w-16" />
-          </div>
-          <Skeleton className="h-3 w-full rounded-full" />
-        </CardContent>
-      </Card>
+      <div className="hidden md:block">
+        <div className="grid grid-cols-4 gap-px rounded-lg bg-border/40 overflow-hidden">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="bg-background px-5 py-4">
+              <Skeleton className="h-9 w-12" />
+              <Skeleton className="h-4 w-20 mt-1" />
+              <Skeleton className="h-3 w-16 mt-1" />
+            </div>
+          ))}
+        </div>
+      </div>
       {/* Two-column skeleton */}
       <div className="grid gap-6 lg:grid-cols-12">
         <div className="lg:col-span-7">