Add dynamic apply wizard customization with admin settings UI

- Create wizard config types, utilities, and defaults (wizard-config.ts)
- Add admin apply settings page with drag-and-drop step ordering, dropdown
  option management, feature toggles, welcome message customization, and
  custom field builder with select/multiselect options editor
- Build dynamic apply wizard component with animated step transitions,
  mobile-first responsive design, and config-driven form validation
- Update step components to accept dynamic config (categories, ocean issues,
  field visibility, feature flags)
- Replace hardcoded enum validation with string-based validation for
  admin-configurable dropdown values, with safe enum casting at storage layer
- Add wizard template system (model, router, admin UI) with built-in
  MOPC Classic preset
- Add program wizard config CRUD procedures to program router
- Update application router getConfig to return wizardConfig, submit handler
  to store custom field data in metadataJson
- Add edition-based apply page, project pool page, and supporting routers
- Fix CSS (invalid sm:fixed-none), Enter key handler (skip textarea),
  safe area insets for notched phones, buildStepsArray field visibility

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

src/components/jury/collapsible-files-section.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { ChevronDown, ChevronUp, FileText } from 'lucide-react'
+import { ProjectFilesSection } from './project-files-section'
+
+interface CollapsibleFilesSectionProps {
+  projectId: string
+  roundId: string
+  fileCount: number
+}
+
+export function CollapsibleFilesSection({
+  projectId,
+  roundId,
+  fileCount,
+}: CollapsibleFilesSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [showFiles, setShowFiles] = useState(false)
+
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded)
+    // Lazy-load the files when expanding for the first time
+    if (!isExpanded && !showFiles) {
+      setShowFiles(true)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <FileText className="h-5 w-5 text-muted-foreground" />
+            <h3 className="font-semibold text-lg">
+              Project Documents ({fileCount})
+            </h3>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleToggle}
+            aria-label={isExpanded ? 'Collapse documents' : 'Expand documents'}
+            className="gap-1"
+          >
+            {isExpanded ? (
+              <>
+                <ChevronUp className="h-4 w-4" />
+                <span className="text-sm">Hide</span>
+              </>
+            ) : (
+              <>
+                <ChevronDown className="h-4 w-4" />
+                <span className="text-sm">Show</span>
+              </>
+            )}
+          </Button>
+        </div>
+      </CardHeader>
+
+      {isExpanded && (
+        <CardContent className="pt-0">
+          {showFiles ? (
+            <ProjectFilesSection projectId={projectId} roundId={roundId} />
+          ) : (
+            <div className="py-4 text-center text-sm text-muted-foreground">
+              Loading documents...
+            </div>
+          )}
+        </CardContent>
+      )}
+    </Card>
+  )
+}

src/components/jury/project-files-section.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import { trpc } from '@/lib/trpc/client'
+import { FileViewer } from '@/components/shared/file-viewer'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AlertCircle, FileX } from 'lucide-react'
+
+interface ProjectFilesSectionProps {
+  projectId: string
+  roundId: string
+}
+
+export function ProjectFilesSection({ projectId, roundId }: ProjectFilesSectionProps) {
+  const { data: groupedFiles, isLoading, error } = trpc.file.listByProjectForRound.useQuery({
+    projectId,
+    roundId,
+  })
+
+  if (isLoading) {
+    return <ProjectFilesSectionSkeleton />
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+          <AlertCircle className="h-12 w-12 text-destructive/50" />
+          <p className="mt-2 font-medium text-destructive">Failed to load files</p>
+          <p className="text-sm text-muted-foreground">
+            {error.message || 'An error occurred while loading project files'}
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  if (!groupedFiles || groupedFiles.length === 0) {
+    return (
+      <Card>
+        <CardContent className="flex flex-col items-center justify-center py-8 text-center">
+          <FileX className="h-12 w-12 text-muted-foreground/50" />
+          <p className="mt-2 font-medium">No files available</p>
+          <p className="text-sm text-muted-foreground">
+            This project has no files uploaded yet
+          </p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  // Flatten all files from all round groups for FileViewer
+  const allFiles = groupedFiles.flatMap((group) => group.files)
+
+  return (
+    <div className="space-y-4">
+      {groupedFiles.map((group) => (
+        <div key={group.roundId || 'general'} className="space-y-2">
+          <div className="flex items-center gap-2">
+            <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">
+              {group.roundName}
+            </h3>
+            <div className="flex-1 h-px bg-border" />
+          </div>
+          <FileViewer files={group.files} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ProjectFilesSectionSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-5 w-28" />
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
+            <Skeleton className="h-10 w-10 rounded-lg" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-4 w-48" />
+              <Skeleton className="h-3 w-24" />
+            </div>
+            <Skeleton className="h-9 w-20" />
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}