Platform-wide visual overhaul, team invites, analytics improvements, and deployment hardening

UI overhaul applying jury dashboard design patterns across all pages:
- Stat cards with border-l-4 accent + icon pills on admin, observer, mentor, applicant dashboards and reports
- Card section headers with color-coded icon pills throughout
- Hover lift effects (translate-y + shadow) on cards and list items
- Gradient progress bars (brand-teal to brand-blue) platform-wide
- AnimatedCard stagger animations on all dashboard sections
- Auth pages with gradient accent strip and polished icon containers
- EmptyState component upgraded with rounded icon pill containers
- Replaced AI-looking icons (Brain/Sparkles/Bot/Wand2/Cpu) with descriptive alternatives across 12 files
- Removed gradient overlay from jury dashboard header
- Quick actions restyled as card links with group hover effects

Backend improvements:
- Team member invite emails with account setup flow and notification logging
- Analytics routers accept edition-wide queries (programId) in addition to roundId
- Round detail endpoint returns inline progress data (eliminates extra getProgress call)
- Award voting endpoints parallelized with Promise.all
- Bulk invite supports optional sendInvitation flag
- AwardVote composite index migration for query performance

Infrastructure:
- Docker entrypoint with migration retry loop (configurable retries/delay)
- docker-compose pull_policy: always for automatic image refresh
- Simplified deploy/update scripts using docker compose up -d --pull always
- Updated deployment documentation

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

src/app/(auth)/accept-invite/page.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/components/ui/card'
 import { Loader2, CheckCircle2, AlertCircle, XCircle, Clock } from 'lucide-react'
 import { trpc } from '@/lib/trpc/client'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 type InviteState = 'loading' | 'valid' | 'accepting' | 'error'
 
@@ -134,12 +135,15 @@ function AcceptInviteContent() {
   // Loading state
   if (state === 'loading') {
     return (
-      <Card className="w-full max-w-md">
+      <AnimatedCard>
+      <Card className="w-full max-w-md overflow-hidden">
+        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
         <CardContent className="flex flex-col items-center justify-center py-12">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
           <p className="mt-4 text-sm text-muted-foreground">Verifying your invitation...</p>
         </CardContent>
       </Card>
+      </AnimatedCard>
     )
   }
 
@@ -147,9 +151,11 @@ function AcceptInviteContent() {
   if (state === 'error') {
     const errorContent = getErrorContent()
     return (
-      <Card className="w-full max-w-md">
+      <AnimatedCard>
+      <Card className="w-full max-w-md overflow-hidden">
+        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-gray-100">
             {errorContent.icon}
           </div>
           <CardTitle className="text-xl">{errorContent.title}</CardTitle>
@@ -167,15 +173,18 @@ function AcceptInviteContent() {
           </Button>
         </CardContent>
       </Card>
+      </AnimatedCard>
     )
   }
 
   // Valid invitation - show welcome
   const user = data?.user
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardHeader className="text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50">
           <CheckCircle2 className="h-6 w-6 text-green-600" />
         </div>
         <CardTitle className="text-xl">
@@ -213,18 +222,22 @@ function AcceptInviteContent() {
         </p>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }
 
 // Loading fallback for Suspense
 function LoadingCard() {
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardContent className="flex flex-col items-center justify-center py-12">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         <p className="mt-4 text-sm text-muted-foreground">Loading...</p>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }
 

src/app/(auth)/error/page.tsx

@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Logo } from '@/components/shared/logo'
 import { AlertCircle } from 'lucide-react'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 const errorMessages: Record<string, string> = {
   Configuration: 'There is a problem with the server configuration.',
@@ -20,12 +21,14 @@ export default function AuthErrorPage() {
   const message = errorMessages[error] || errorMessages.Default
 
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardHeader className="text-center">
         <div className="mx-auto mb-4">
           <Logo variant="small" />
         </div>
-        <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+        <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-2xl bg-destructive/10">
           <AlertCircle className="h-6 w-6 text-destructive" />
         </div>
         <CardTitle className="text-xl">Authentication Error</CardTitle>
@@ -42,5 +45,6 @@ export default function AuthErrorPage() {
         </div>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }

src/app/(auth)/login/page.tsx

@@ -14,6 +14,7 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Mail, Loader2, CheckCircle2, AlertCircle, Lock, KeyRound } from 'lucide-react'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 type LoginMode = 'password' | 'magic-link'
 
@@ -102,9 +103,11 @@ export default function LoginPage() {
   // Success state after sending magic link
   if (isSent) {
     return (
-      <Card className="w-full max-w-md">
+      <AnimatedCard>
+      <Card className="w-full max-w-md overflow-hidden">
+        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 animate-in zoom-in-50 duration-300">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-50 animate-in zoom-in-50 duration-300">
             <Mail className="h-8 w-8 text-green-600" />
           </div>
           <CardTitle className="text-xl">Check your email</CardTitle>
@@ -137,11 +140,14 @@ export default function LoginPage() {
           </div>
         </CardContent>
       </Card>
+      </AnimatedCard>
     )
   }
 
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardHeader className="text-center">
         <CardTitle className="text-2xl">Welcome back</CardTitle>
         <CardDescription>
@@ -299,5 +305,6 @@ export default function LoginPage() {
         </div>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }

src/app/(auth)/onboarding/page.tsx

@@ -41,6 +41,7 @@ import {
   Globe,
   FileText,
 } from 'lucide-react'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 type Step = 'name' | 'photo' | 'country' | 'bio' | 'phone' | 'tags' | 'preferences' | 'complete'
 
@@ -181,19 +182,24 @@ export default function OnboardingPage() {
   if (sessionStatus === 'loading' || userLoading || !initialized) {
     return (
       <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
-        <Card className="w-full max-w-lg shadow-2xl">
+        <AnimatedCard>
+        <Card className="w-full max-w-lg shadow-2xl overflow-hidden">
+          <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
           <CardContent className="flex flex-col items-center justify-center py-12">
             <Loader2 className="h-8 w-8 animate-spin text-primary mb-4" />
             <p className="text-muted-foreground">Loading your profile...</p>
           </CardContent>
         </Card>
+        </AnimatedCard>
       </div>
     )
   }
 
   return (
     <div className="absolute inset-0 -m-4 flex items-center justify-center p-4 md:p-8 bg-gradient-to-br from-[#053d57] to-[#557f8c]">
-      <Card className="w-full max-w-lg max-h-[85vh] overflow-y-auto shadow-2xl">
+      <AnimatedCard>
+      <Card className="w-full max-w-lg max-h-[85vh] overflow-y-auto overflow-hidden shadow-2xl">
+        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
         {/* Progress indicator */}
         <div className="px-6 pt-6">
           <div className="flex items-center gap-2">
@@ -570,7 +576,7 @@ export default function OnboardingPage() {
         {/* Step 7: Complete */}
         {step === 'complete' && (
           <CardContent className="flex flex-col items-center justify-center py-12">
-            <div className="rounded-full bg-green-100 p-4 mb-4 animate-in zoom-in-50 duration-500">
+            <div className="rounded-2xl bg-emerald-50 p-4 mb-4 animate-in zoom-in-50 duration-500">
               <CheckCircle className="h-12 w-12 text-green-600" />
             </div>
             <h2 className="text-xl font-semibold mb-2 animate-in fade-in slide-in-from-bottom-2 duration-500 delay-200">
@@ -584,6 +590,7 @@ export default function OnboardingPage() {
           </CardContent>
         )}
       </Card>
+      </AnimatedCard>
     </div>
   )
 }

src/app/(auth)/set-password/page.tsx

@@ -17,6 +17,7 @@ import { Progress } from '@/components/ui/progress'
 import { Loader2, Lock, CheckCircle2, AlertCircle, Eye, EyeOff } from 'lucide-react'
 import Image from 'next/image'
 import { trpc } from '@/lib/trpc/client'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 export default function SetPasswordPage() {
   const [password, setPassword] = useState('')
@@ -116,20 +117,25 @@ export default function SetPasswordPage() {
   // Loading state while checking session
   if (session === undefined) {
     return (
-      <Card className="w-full max-w-md">
+      <AnimatedCard>
+      <Card className="w-full max-w-md overflow-hidden">
+        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
         <CardContent className="flex items-center justify-center py-12">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
         </CardContent>
       </Card>
+      </AnimatedCard>
     )
   }
 
   // Success state
   if (isSuccess) {
     return (
-      <Card className="w-full max-w-md">
+      <AnimatedCard>
+      <Card className="w-full max-w-md overflow-hidden">
+        <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
         <CardHeader className="text-center">
-          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50">
             <CheckCircle2 className="h-6 w-6 text-green-600" />
           </div>
           <CardTitle className="text-xl">Password Set Successfully</CardTitle>
@@ -144,13 +150,16 @@ export default function SetPasswordPage() {
           </p>
         </CardContent>
       </Card>
+      </AnimatedCard>
     )
   }
 
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardHeader className="text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-sm border">
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-white shadow-sm border">
           <Image src="/images/MOPC-blue-small.png" alt="MOPC" width={32} height={32} className="object-contain" />
         </div>
         <CardTitle className="text-xl">Set Your Password</CardTitle>
@@ -294,5 +303,6 @@ export default function SetPasswordPage() {
         </form>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }

src/app/(auth)/verify-email/page.tsx

@@ -1,11 +1,14 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Mail } from 'lucide-react'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 export default function VerifyEmailPage() {
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardHeader className="text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-teal/10">
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-brand-teal/10">
           <Mail className="h-6 w-6 text-brand-teal" />
         </div>
         <CardTitle className="text-xl">Check your email</CardTitle>
@@ -23,5 +26,6 @@ export default function VerifyEmailPage() {
         </p>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }

src/app/(auth)/verify/page.tsx

@@ -2,12 +2,15 @@ import Link from 'next/link'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { CheckCircle2 } from 'lucide-react'
+import { AnimatedCard } from '@/components/shared/animated-container'
 
 export default function VerifyPage() {
   return (
-    <Card className="w-full max-w-md">
+    <AnimatedCard>
+    <Card className="w-full max-w-md overflow-hidden">
+      <div className="h-1 w-full bg-gradient-to-r from-brand-blue via-brand-teal to-brand-blue" />
       <CardHeader className="text-center">
-        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-50">
           <CheckCircle2 className="h-6 w-6 text-green-600" />
         </div>
         <CardTitle className="text-xl">Check your email</CardTitle>
@@ -24,5 +27,6 @@ export default function VerifyPage() {
         </div>
       </CardContent>
     </Card>
+    </AnimatedCard>
   )
 }