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/app/(admin)/admin/programs/[id]/edit/page.tsx

@@ -45,18 +45,23 @@ export default function EditProgramPage() {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [formData, setFormData] = useState({
     name: '',
+    slug: '',
     description: '',
     status: 'DRAFT',
+    applyMode: 'round' as 'edition' | 'round' | 'both',
   })
 
   const { data: program, isLoading } = trpc.program.get.useQuery({ id })
 
   useEffect(() => {
     if (program) {
+      const settings = (program.settingsJson as Record<string, any>) || {}
       setFormData({
         name: program.name,
+        slug: program.slug || '',
         description: program.description || '',
         status: program.status,
+        applyMode: settings.applyMode || 'round',
       })
     }
   }, [program])
@@ -89,8 +94,12 @@ export default function EditProgramPage() {
     updateProgram.mutate({
       id,
       name: formData.name,
+      slug: formData.slug || undefined,
       description: formData.description || undefined,
       status: formData.status as 'DRAFT' | 'ACTIVE' | 'ARCHIVED',
+      settingsJson: {
+        applyMode: formData.applyMode,
+      },
     })
   }
 
@@ -196,6 +205,41 @@ export default function EditProgramPage() {
               </div>
             </div>
 
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="slug">Edition Slug</Label>
+                <Input
+                  id="slug"
+                  value={formData.slug}
+                  onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                  placeholder="e.g., mopc-2026"
+                />
+                <p className="text-xs text-muted-foreground">
+                  URL-friendly identifier for edition-wide applications (optional)
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="applyMode">Application Flow</Label>
+                <Select
+                  value={formData.applyMode}
+                  onValueChange={(value) => setFormData({ ...formData, applyMode: value as 'edition' | 'round' | 'both' })}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="edition">Edition-wide only</SelectItem>
+                    <SelectItem value="round">Round-specific only</SelectItem>
+                    <SelectItem value="both">Allow both</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Controls whether applicants apply to the program or specific rounds
+                </p>
+              </div>
+            </div>
+
             <div className="space-y-2">
               <Label htmlFor="description">Description</Label>
               <Textarea

src/app/(admin)/admin/programs/page.tsx

@@ -33,6 +33,7 @@ import {
   FolderKanban,
   Eye,
   Pencil,
+  Wand2,
 } from 'lucide-react'
 import { formatDateOnly } from '@/lib/utils'
 
@@ -146,6 +147,12 @@ async function ProgramsContent() {
                           Edit
                         </Link>
                       </DropdownMenuItem>
+                      <DropdownMenuItem asChild>
+                        <Link href={`/admin/programs/${program.id}/apply-settings`}>
+                          <Wand2 className="mr-2 h-4 w-4" />
+                          Apply Settings
+                        </Link>
+                      </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
                 </TableCell>
@@ -194,6 +201,12 @@ async function ProgramsContent() {
                     Edit
                   </Link>
                 </Button>
+                <Button variant="outline" size="sm" className="flex-1" asChild>
+                  <Link href={`/admin/programs/${program.id}/apply-settings`}>
+                    <Wand2 className="mr-2 h-4 w-4" />
+                    Apply
+                  </Link>
+                </Button>
               </div>
             </CardContent>
           </Card>