diff --git a/README.md b/README.md
index cc730c7..4148aab 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Firebase Studio
+# FlowUp
 
 This is a NextJS starter in Firebase Studio.
 
diff --git a/src/app/(app)/dashboard/page.tsx b/src/app/(app)/dashboard/page.tsx
index 3417dfc..44d5d58 100644
--- a/src/app/(app)/dashboard/page.tsx
+++ b/src/app/(app)/dashboard/page.tsx
@@ -52,7 +52,7 @@ export default function DashboardPage() {
             Welcome back, {user.name}!
           </CardTitle>
           <CardDescription className="text-lg">
-            Here&apos;s what&apos;s happening in your NationQuest Hub workspace today.
+            Here&apos;s what&apos;s happening in your FlowUp workspace today.
           </CardDescription>
         </CardHeader>
         <CardContent>
diff --git a/src/app/(app)/documentation/page.tsx b/src/app/(app)/documentation/page.tsx
index 6e863ae..c548843 100644
--- a/src/app/(app)/documentation/page.tsx
+++ b/src/app/(app)/documentation/page.tsx
@@ -6,10 +6,10 @@ import Link from "next/link";
 
 // Mock data for documents
 const mockDocuments = [
-  { id: "doc-1", title: "Getting Started Guide", project: "NationQuest Hub", lastUpdated: "2023-10-20", category: "General" },
+  { id: "doc-1", title: "Getting Started Guide", project: "FlowUp", lastUpdated: "2023-10-20", category: "General" },
   { id: "doc-2", title: "Project Management Best Practices", project: "General", lastUpdated: "2023-10-15", category: "Guides" },
   { id: "doc-3", title: "API Documentation", project: "Project Alpha", lastUpdated: "2023-10-18", category: "Technical" },
-  { id: "doc-4", title: "User Roles and Permissions", project: "NationQuest Hub", lastUpdated: "2023-10-12", category: "Security" },
+  { id: "doc-4", title: "User Roles and Permissions", project: "FlowUp", lastUpdated: "2023-10-12", category: "Security" },
 ];
 
 export default function DocumentationPage() {
diff --git a/src/app/(app)/projects/[id]/documents/[docId]/edit/page.tsx b/src/app/(app)/projects/[id]/documents/[docId]/edit/page.tsx
index aaebdce..b4c4ce8 100644
--- a/src/app/(app)/projects/[id]/documents/[docId]/edit/page.tsx
+++ b/src/app/(app)/projects/[id]/documents/[docId]/edit/page.tsx
@@ -5,7 +5,7 @@ import { DocumentEditor } from '@/components/project/DocumentEditor';
 import { useAuth } from '@/hooks/useAuth';
 import { useRouter, useParams } from 'next/navigation';
 import { useToast } from '@/hooks/use-toast';
-import { fetchDocumentAction, updateDocumentAction, fetchProjectMemberRoleAction, fetchProjectAction } from '../../../actions'; 
+import { fetchDocumentAction, fetchProjectMemberRoleAction, fetchProjectAction } from '../../../actions';
 import { useEffect, useState } from 'react';
 import type { ProjectDocumentType, Project } from '@/types';
 import { Loader2, ArrowLeft, ShieldAlert, FileText } from 'lucide-react';
@@ -92,7 +92,7 @@ export default function EditDocumentPage() {
       </div>
     );
   }
-  
+
   if (!canEdit && !isLoadingDocument) {
      return (
       <div className="container mx-auto p-4 py-8 space-y-6">
@@ -131,7 +131,7 @@ export default function EditDocumentPage() {
         </Button>
       <DocumentEditor
         projectUuid={projectUuid}
-        document={document} 
+        document={document}
         onSaveSuccess={(docUuid) => router.push(`/projects/${projectUuid}?tab=documents`)}
         onCancel={handleCancel}
       />
diff --git a/src/app/(app)/projects/[id]/documents/new/page.tsx b/src/app/(app)/projects/[id]/documents/new/page.tsx
index 56a8dbf..0c6e5ff 100644
--- a/src/app/(app)/projects/[id]/documents/new/page.tsx
+++ b/src/app/(app)/projects/[id]/documents/new/page.tsx
@@ -5,7 +5,7 @@ import { DocumentEditor } from '@/components/project/DocumentEditor';
 import { useAuth } from '@/hooks/useAuth';
 import { useRouter, useParams } from 'next/navigation';
 import { useToast } from '@/hooks/use-toast';
-import { createDocumentAction, fetchProjectAction, fetchProjectMemberRoleAction } from '../../actions'; 
+import { fetchProjectAction, fetchProjectMemberRoleAction } from '../../actions';
 import { useEffect, useState } from 'react';
 import type { Project } from '@/types';
 import { Loader2, ArrowLeft, ShieldAlert } from 'lucide-react';
@@ -35,7 +35,7 @@ export default function NewDocumentPage() {
           router.push(`/projects/${projectUuid}`);
           return;
         }
-        
+
         const roleResult = await fetchProjectMemberRoleAction(projectUuid, user.uuid);
 
         if (roleResult.role && ['owner', 'co-owner', 'editor'].includes(roleResult.role)) {
diff --git a/src/app/(app)/projects/[id]/layout.tsx b/src/app/(app)/projects/[id]/layout.tsx
new file mode 100644
index 0000000..4b08230
--- /dev/null
+++ b/src/app/(app)/projects/[id]/layout.tsx
@@ -0,0 +1,231 @@
+
+'use client';
+
+import { useParams, useRouter } from 'next/navigation';
+import React, { useEffect, useState, useCallback, startTransition as ReactStartTransition, useActionState, cloneElement } from 'react';
+import type { Project, ProjectMemberRole, User } from '@/types';
+import { useAuth } from '@/hooks/useAuth';
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ArrowLeft, Edit3, Loader2, Flame, ShieldAlert, AlertCircle } from 'lucide-react';
+import Link from 'next/link';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useToast } from '@/hooks/use-toast';
+import { fetchProjectAction, fetchProjectOwnerNameAction, fetchProjectMemberRoleAction, updateProjectAction } from './actions';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, DialogTrigger } from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+const editProjectFormSchema = z.object({
+  name: z.string().min(3, { message: 'Project name must be at least 3 characters.' }).max(100),
+  description: z.string().max(5000, {message: "Description cannot exceed 5000 characters."}).optional().or(z.literal('')),
+});
+type EditProjectFormValues = z.infer<typeof editProjectFormSchema>;
+
+export default function ProjectDetailLayout({ children }: { children: React.ReactNode }) {
+  const params = useParams();
+  const router = useRouter();
+  const { toast } = useToast();
+  const projectUuid = params.id as string;
+
+  const { user, isLoading: authLoading } = useAuth();
+  const [project, setProject] = useState<Project | null>(null);
+  const [projectOwnerName, setProjectOwnerName] = useState<string | null>(null);
+  const [currentUserRole, setCurrentUserRole] = useState<ProjectMemberRole | null>(null);
+  const [isLoadingData, setIsLoadingData] = useState(true);
+  const [accessDenied, setAccessDenied] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+  const editProjectForm = useForm<EditProjectFormValues>({
+    resolver: zodResolver(editProjectFormSchema),
+    defaultValues: { name: '', description: '' },
+  });
+
+  const [updateProjectFormState, updateProjectFormAction, isUpdateProjectPending] = useActionState(updateProjectAction, { message: "", errors: {} });
+
+  const loadProjectData = useCallback(async () => {
+    if (projectUuid && user && !authLoading) {
+      setIsLoadingData(true);
+      setAccessDenied(false);
+      try {
+        const projectData = await fetchProjectAction(projectUuid);
+        if (projectData) {
+          const roleResult = await fetchProjectMemberRoleAction(projectUuid, user.uuid);
+          const userRoleForProject = roleResult.role;
+          setCurrentUserRole(userRoleForProject);
+
+          if (projectData.isPrivate && !userRoleForProject && user.role !== 'admin') {
+            setAccessDenied(true);
+            setProject(null);
+            toast({variant: "destructive", title: "Access Denied", description: "This project is private and you are not a member."});
+            router.push('/projects');
+            return;
+          }
+
+          setProject(projectData);
+          editProjectForm.reset({ name: projectData.name, description: projectData.description || '' });
+
+          if (projectData.ownerUuid) {
+            const ownerName = await fetchProjectOwnerNameAction(projectData.ownerUuid);
+            setProjectOwnerName(ownerName);
+          }
+        } else {
+          setAccessDenied(true);
+          setProject(null);
+          toast({variant: "destructive", title: "Project Not Found", description: "The project could not be loaded or you don't have access."});
+           router.push('/projects');
+        }
+      } catch (err) {
+        console.error("[ProjectLayout] Error fetching project:", err);
+        setProject(null);
+        setAccessDenied(true);
+        toast({variant: "destructive", title: "Error", description: "Could not load project details."})
+         router.push('/projects');
+      } finally {
+        setIsLoadingData(false);
+      }
+    } else if (!authLoading && !user) {
+      router.push('/login');
+    }
+  }, [projectUuid, user, authLoading, router, toast, editProjectForm]);
+
+  useEffect(() => {
+    loadProjectData();
+  }, [loadProjectData]);
+
+  useEffect(() => {
+    if (!isUpdateProjectPending && updateProjectFormState) {
+      if (updateProjectFormState.message && !updateProjectFormState.error) {
+        toast({ title: "Success", description: updateProjectFormState.message });
+        setIsEditDialogOpen(false);
+        if(updateProjectFormState.project) {
+          setProject(updateProjectFormState.project);
+        }
+        loadProjectData(); // Re-fetch to ensure UI consistency
+      }
+      if (updateProjectFormState.error) {
+        toast({ variant: "destructive", title: "Error", description: updateProjectFormState.error });
+      }
+    }
+  }, [updateProjectFormState, isUpdateProjectPending, toast, loadProjectData]);
+
+  const handleEditProjectSubmit = async (values: EditProjectFormValues) => {
+    if (!project) return;
+    const formData = new FormData();
+    formData.append('name', values.name);
+    formData.append('description', values.description || '');
+    formData.append('projectUuid', project.uuid);
+    ReactStartTransition(() => {
+      updateProjectFormAction(formData);
+    });
+  };
+
+  const canManageProjectSettings = currentUserRole === 'owner' || currentUserRole === 'co-owner';
+
+  if (authLoading || isLoadingData) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-9 w-36 mb-4" />
+        <Card className="shadow-lg">
+          <CardHeader><Skeleton className="h-8 w-1/2" /><Skeleton className="h-5 w-3/4 mt-2" /></CardHeader>
+          <CardContent><div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm pt-2"><div><Skeleton className="h-4 w-16 mb-1" /><Skeleton className="h-5 w-24" /></div></div></CardContent>
+        </Card>
+        <Skeleton className="h-10 w-full" /> {/* For TabsList */}
+        <Card><CardContent className="p-6"><Skeleton className="h-40 w-full" /></CardContent></Card> {/* For Tab Content */}
+      </div>
+    );
+  }
+
+  if (accessDenied || !project || !user) {
+    return (
+        <div className="space-y-6 text-center flex flex-col items-center justify-center min-h-[calc(100vh-12rem)]">
+            <Button variant="outline" onClick={() => router.push('/projects')} className="mb-4 self-start">
+                <ArrowLeft className="mr-2 h-4 w-4" /> Back to Projects List
+            </Button>
+            <AlertCircle className="mx-auto h-16 w-16 text-destructive mt-12" />
+            <h2 className="text-2xl font-semibold mt-4">Access Denied or Project Not Found</h2>
+            <p className="text-muted-foreground">
+              {accessDenied ? "You do not have permission to view this project." : `Project (ID: ${projectUuid}) not found.`}
+            </p>
+        </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <Button variant="outline" onClick={() => router.push('/projects')} className="mb-0">
+        <ArrowLeft className="mr-2 h-4 w-4" /> Back to Projects List
+      </Button>
+
+      <Card className={cn("shadow-lg", project.isUrgent && "border-2 border-destructive ring-2 ring-destructive/50")}>
+        <CardHeader>
+          <div className="flex flex-col sm:flex-row justify-between items-start gap-4">
+            <div>
+              <div className="flex items-center gap-2">
+                <CardTitle className="text-3xl font-headline">{project.name}</CardTitle>
+                {project.isUrgent && <Flame className="h-7 w-7 text-destructive" />}
+                <Badge variant={project.isPrivate ? "secondary" : "outline"} className={cn("border",project.isPrivate ? "border-amber-500 text-amber-600" : "border-green-500 text-green-600")}>
+                    {project.isPrivate ? "Private" : "Public"}
+                </Badge>
+              </div>
+               {project.description ? (
+                <div className="prose prose-sm dark:prose-invert max-w-none mt-1 text-muted-foreground">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{project.description}</ReactMarkdown>
+                </div>
+              ) : (
+                <CardDescription className="mt-1">No description provided.</CardDescription>
+              )}
+            </div>
+            <div className="flex gap-2 flex-shrink-0">
+              <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="outline" size="sm" disabled={!canManageProjectSettings}>
+                    <Edit3 className="mr-2 h-4 w-4" /> Edit Project Details
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Edit Project</DialogTitle>
+                    <DialogDescription>Update the name and description (Markdown supported) of your project.</DialogDescription>
+                  </DialogHeader>
+                  <Form {...editProjectForm}>
+                    <form onSubmit={editProjectForm.handleSubmit(handleEditProjectSubmit)} className="space-y-4">
+                      <FormField control={editProjectForm.control} name="name" render={({ field }) => (<FormItem><FormLabel>Project Name</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>)}/>
+                      <FormField control={editProjectForm.control} name="description" render={({ field }) => (<FormItem><FormLabel>Project Description</FormLabel><FormControl><Textarea {...field} rows={5} /></FormControl><FormMessage /></FormItem>)}/>
+                      {updateProjectFormState?.error && <p className="text-sm text-destructive">{updateProjectFormState.error}</p>}
+                      {updateProjectFormState?.errors?.name && <p className="text-sm text-destructive">{updateProjectFormState.errors.name[0]}</p>}
+                      {updateProjectFormState?.errors?.description && <p className="text-sm text-destructive">{updateProjectFormState.errors.description[0]}</p>}
+                      <DialogFooter>
+                        <DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose>
+                        <Button type="submit" disabled={isUpdateProjectPending}>{isUpdateProjectPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}Save Changes</Button>
+                      </DialogFooter>
+                    </form>
+                  </Form>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm pt-2">
+                <div><strong className="block text-muted-foreground">Owner:</strong> {projectOwnerName || project.ownerUuid}</div>
+                <div><strong className="block text-muted-foreground">Created:</strong> {new Date(project.createdAt).toLocaleDateString()}</div>
+                <div><strong className="block text-muted-foreground">Last Update:</strong> {new Date(project.updatedAt).toLocaleDateString()}</div>
+                 <div><strong className="block text-muted-foreground">Your Role:</strong> <span className="capitalize">{currentUserRole || 'N/A'}</span></div>
+            </div>
+        </CardContent>
+      </Card>
+
+      {/* Pass project and user data to the children (page.tsx) */}
+      {cloneElement(children as React.ReactElement, { project, currentUserRole, user, projectUuid, refreshProjectData: loadProjectData })}
+    </div>
+  );
+}
diff --git a/src/app/(app)/projects/[id]/page.tsx b/src/app/(app)/projects/[id]/page.tsx
index 6582934..46221e7 100644
--- a/src/app/(app)/projects/[id]/page.tsx
+++ b/src/app/(app)/projects/[id]/page.tsx
@@ -1,60 +1,35 @@
 
 'use client';
 
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { ArrowLeft, Edit3, PlusCircle, Trash2, CheckSquare, FileText, Megaphone, Users, FolderGit2, Loader2, UploadCloud, Mail, UserX, Tag as TagIcon, BookOpen, Pin, PinOff, ShieldAlert, Eye as EyeIcon, Flame, AlertCircle, ListChecks, Palette, FileUp, CheckCircle, ExternalLink, Info, Code2 } from 'lucide-react';
-import Link from 'next/link';
-import type { Project, Task, Document as ProjectDocumentType, Tag as TagType, ProjectMember, ProjectMemberRole, TaskStatus } from '@/types';
+import { PlusCircle, Edit3, Trash2, ListChecks, Pin, PinOff, Loader2, FolderKanban, BookOpen, Megaphone, FolderGit2, Settings as SettingsIcon, Users, Mail, UserX, Tag as TagIcon, Palette, FileText, ExternalLink, AlertTriangle as AlertTriangleIcon, Code2 } from 'lucide-react';
+import type { Project, Task, Tag as TagType, ProjectMember, TaskStatus, ProjectMemberRole, User, Document as ProjectDocumentType } from '@/types';
 import { Badge } from '@/components/ui/badge';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Textarea } from '@/components/ui/textarea';
-import { useEffect, useState, useCallback, startTransition as ReactStartTransition, useRef } from 'react';
-import { useActionState } from 'react';
+import { useEffect, useState, useCallback, startTransition as ReactStartTransition, useRef, useActionState } from 'react';
 import { useToast } from '@/hooks/use-toast';
-import { Skeleton } from '@/components/ui/skeleton';
-import { useAuth } from '@/hooks/useAuth';
-import { Switch } from '@/components/ui/switch';
 import {
-  fetchProjectAction,
-  fetchProjectOwnerNameAction,
-  updateProjectAction,
-  inviteUserToProjectAction,
-  type InviteUserFormState,
-  fetchProjectMembersAction,
-  removeUserFromProjectAction,
-  createTaskAction,
-  type CreateTaskFormState,
+  createTaskAction, type CreateTaskFormState,
   fetchTasksAction,
-  updateTaskStatusAction,
-  type UpdateTaskStatusFormState,
-  updateTaskAction,
-  type UpdateTaskFormState,
-  deleteTaskAction,
-  type DeleteTaskFormState,
-  fetchProjectTagsAction,
-  saveProjectReadmeAction,
-  type SaveProjectReadmeFormState,
-  toggleProjectUrgencyAction,
-  type ToggleProjectUrgencyFormState,
-  toggleProjectVisibilityAction,
-  type ToggleProjectVisibilityFormState,
-  toggleTaskPinAction,
-  type ToggleTaskPinState,
-  createProjectTagAction,
-  type CreateProjectTagFormState,
-  fetchDocumentsAction,
-  deleteDocumentAction,
-  type DeleteDocumentFormState,
+  updateTaskStatusAction, type UpdateTaskStatusFormState,
+  updateTaskAction, type UpdateTaskFormState,
+  deleteTaskAction, type DeleteTaskFormState,
+  toggleTaskPinAction, type ToggleTaskPinState,
+  fetchProjectTagsAction, createProjectTagAction, type CreateProjectTagFormState,
+  fetchProjectMembersAction, removeUserFromProjectAction, inviteUserToProjectAction, type InviteUserFormState,
+  saveProjectReadmeAction, type SaveProjectReadmeFormState,
+  toggleProjectUrgencyAction, type ToggleProjectUrgencyFormState,
+  toggleProjectVisibilityAction, type ToggleProjectVisibilityFormState,
+  fetchDocumentsAction, deleteDocumentAction as deleteDbDocumentAction, type DeleteDocumentFormState,
 } from './actions';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogTrigger, DialogClose } from "@/components/ui/dialog";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, FormDescription } from '@/components/ui/form';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "@/components/ui/dialog";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { useForm, Controller } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
@@ -62,30 +37,26 @@ import { MarkdownTaskListRenderer } from '@/components/MarkdownTaskListRenderer'
 import { cn } from '@/lib/utils';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import Link from 'next/link';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Switch } from '@/components/ui/switch';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from '@/components/ui/popover';
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
 
+const projectAnnouncementsMock: any[] = [];
 
-const projectAnnouncements: any[] = [];
 
+interface ProjectPageProps {
+  project: Project;
+  currentUserRole: ProjectMemberRole | null;
+  user: User;
+  projectUuid: string;
+}
 
 export const taskStatuses: TaskStatus[] = ['To Do', 'In Progress', 'Done', 'Archived'];
-const memberRoles: Exclude<ProjectMemberRole, 'owner'>[] = ['co-owner', 'editor', 'viewer'];
-
 const UNASSIGNED_VALUE = "__UNASSIGNED__";
 
-const editProjectFormSchema = z.object({
-  name: z.string().min(3, { message: 'Project name must be at least 3 characters.' }).max(100),
-  description: z.string().max(5000, {message: "Description cannot exceed 5000 characters."}).optional().or(z.literal('')),
-});
-type EditProjectFormValues = z.infer<typeof editProjectFormSchema>;
-
-const inviteUserFormSchema = z.object({
-  emailToInvite: z.string().email({ message: "Please enter a valid email address." }),
-  roleToInvite: z.enum(memberRoles, { errorMap: () => ({ message: "Please select a role."}) }),
-});
-type InviteUserFormValues = z.infer<typeof inviteUserFormSchema>;
-
 const taskFormSchema = z.object({
   title: z.string().min(1, "Title is required").max(200, "Title too long"),
   description: z.string().optional(),
@@ -95,6 +66,13 @@ const taskFormSchema = z.object({
 });
 type TaskFormValues = z.infer<typeof taskFormSchema>;
 
+const memberRoles: Exclude<ProjectMemberRole, 'owner'>[] = ['co-owner', 'editor', 'viewer'];
+const inviteUserFormSchema = z.object({
+  emailToInvite: z.string().email({ message: "Please enter a valid email address." }),
+  roleToInvite: z.enum(memberRoles, { errorMap: () => ({ message: "Please select a role."}) }),
+});
+type InviteUserFormValues = z.infer<typeof inviteUserFormSchema>;
+
 const projectTagFormSchema = z.object({
   tagName: z.string().min(1, "Tag name is required.").max(50, "Tag name too long."),
   tagColor: z.string().regex(/^#[0-9A-Fa-f]{6}$/, "Invalid color format. Must be #RRGGBB."),
@@ -114,11 +92,10 @@ const convertMarkdownToSubtaskInput = (markdown?: string): string => {
     if (matchUnchecked && matchUnchecked[1] !== undefined) {
       return `* ${matchUnchecked[1].trim()}`;
     }
-    return trimmedLine; 
+    return trimmedLine;
   }).join('\n');
 };
 
-
 const convertSubtaskInputToMarkdown = (input: string): string => {
   return input.split('\n').map(line => {
     const trimmedLine = line.trim();
@@ -126,51 +103,35 @@ const convertSubtaskInputToMarkdown = (input: string): string => {
       return `* [x] ${trimmedLine.substring(3).trim()}`;
     } else if (trimmedLine.startsWith('* ')) {
       return `* [ ] ${trimmedLine.substring(2).trim()}`;
-    } else if (trimmedLine.length > 0) { 
+    } else if (trimmedLine.length > 0) {
       return `* [ ] ${trimmedLine}`;
     }
-    return ''; 
+    return '';
   }).filter(line => line.trim().length > 0).join('\n');
 };
 
 
-export default function ProjectDetailPage() {
-  const params = useParams();
+export default function ProjectDetailPage({ project: initialProject, currentUserRole, user, projectUuid }: ProjectPageProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { toast } = useToast();
-  const projectUuid = params.id as string;
 
-  const { user, isLoading: authLoading, refreshUser } = useAuth();
-  const [project, setProject] = useState<Project | null>(null);
-  const [projectOwnerName, setProjectOwnerName] = useState<string | null>(null);
-  const [projectMembers, setProjectMembers] = useState<ProjectMember[]>([]);
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [projectTags, setProjectTags] = useState<TagType[]>([]);
-  const [projectDocuments, setProjectDocuments] = useState<ProjectDocumentType[]>([]);
-  const [currentUserRole, setCurrentUserRole] = useState<ProjectMemberRole | null>(null);
-
-  const [isLoadingData, setIsLoadingData] = useState(true);
-  const [accessDenied, setAccessDenied] = useState(false);
-
-  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
-  const [isInviteUserDialogOpen, setIsInviteUserDialogOpen] = useState(false);
+  const [project, setProject] = useState<Project>(initialProject);
+  const [activeTab, setActiveTab] = useState(searchParams.get('tab') || 'tasks');
 
+  // States for Tasks Tab
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [projectTagsForTasks, setProjectTagsForTasks] = useState<TagType[]>([]);
+  const [projectMembersForTasks, setProjectMembersForTasks] = useState<ProjectMember[]>([]);
   const [isCreateTaskDialogOpen, setIsCreateTaskDialogOpen] = useState(false);
   const [isEditTaskDialogOpen, setIsEditTaskDialogOpen] = useState(false);
   const [taskToEdit, setTaskToEdit] = useState<Task | null>(null);
-
   const [taskToDelete, setTaskToDelete] = useState<Task | null>(null);
-
   const [taskToManageSubtasks, setTaskToManageSubtasks] = useState<Task | null>(null);
   const [isManageSubtasksDialogOpen, setIsManageSubtasksDialogOpen] = useState(false);
   const [subtaskInput, setSubtaskInput] = useState('');
-
-  const [projectReadmeContent, setProjectReadmeContent] = useState('');
-
   const debounceTimers = useRef<Record<string, NodeJS.Timeout>>({});
   const lastSubmitSourceRef = useRef<'subtasks' | 'main' | null>(null);
-
   const [tagSuggestions, setTagSuggestions] = useState<TagType[]>([]);
   const [showTagSuggestions, setShowTagSuggestions] = useState(false);
   const tagInputRef = useRef<HTMLInputElement>(null);
@@ -178,60 +139,56 @@ export default function ProjectDetailPage() {
   const [activeSuggestionIndex, setActiveSuggestionIndex] = useState(-1);
   const lastTypedFragmentRef = useRef<string>("");
 
+  const taskForm = useForm<TaskFormValues>({
+    resolver: zodResolver(taskFormSchema),
+    defaultValues: { title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: ''},
+  });
 
-  const [isAddProjectTagDialogOpen, setIsAddProjectTagDialogOpen] = useState(false);
+  const [createTaskState, createTaskFormAction, isCreateTaskPending] = useActionState(createTaskAction, { message: "", error: "" });
+  const [updateTaskStatusState, performUpdateTaskStatusAction, isUpdateTaskStatusPending] = useActionState(updateTaskStatusAction, { message: "", error: "" });
+  const [updateTaskState, updateTaskFormAction, isUpdateTaskPending] = useActionState(updateTaskAction, { message: "", error: "" });
+  const [deleteTaskState, deleteTaskFormAction, isDeleteTaskPending] = useActionState(deleteTaskAction, { message: "", error: ""});
+  const [toggleTaskPinState, toggleTaskPinFormAction, isToggleTaskPinPending] = useActionState(toggleTaskPinAction, { message: "", error: "" });
+
+  // States for README Tab
+  const [projectReadmeContent, setProjectReadmeContent] = useState('');
+  const [saveReadmeState, saveReadmeFormAction, isSaveReadmePending] = useActionState(saveProjectReadmeAction, { message: "", error: "" });
 
+  // States for Documents Tab
+  const [projectDocuments, setProjectDocuments] = useState<ProjectDocumentType[]>([]);
+  const [isLoadingDocuments, setIsLoadingDocuments] = useState(true);
   const [documentToView, setDocumentToView] = useState<ProjectDocumentType | null>(null);
   const [isViewDocumentDialogOpen, setIsViewDocumentDialogOpen] = useState(false);
   const [documentToDelete, setDocumentToDelete] = useState<ProjectDocumentType | null>(null);
-  const [activeTab, setActiveTab] = useState('tasks');
+  const [deleteDocumentState, deleteDocumentFormAction, isDeleteDocumentPending] = useActionState(deleteDbDocumentAction, { message: "", error: "" });
 
-  useEffect(() => {
-    const tabFromUrl = searchParams.get('tab');
-    if (tabFromUrl && ['tasks', 'readme', 'documents', 'announcements', 'codespace', 'settings'].includes(tabFromUrl)) {
-      setActiveTab(tabFromUrl);
-    }
-  }, [searchParams]);
-
-  const handleTabChange = (newTab: string) => {
-    setActiveTab(newTab);
-    router.push(`/projects/${projectUuid}?tab=${newTab}`, { scroll: false });
-  };
-
-  const editProjectForm = useForm<EditProjectFormValues>({
-    resolver: zodResolver(editProjectFormSchema),
-    defaultValues: { name: '', description: '' },
-  });
+  // States for Settings & Team Tab
+  const [projectMembersForSettings, setProjectMembersForSettings] = useState<ProjectMember[]>([]);
+  const [projectTagsForSettings, setProjectTagsForSettings] = useState<TagType[]>([]);
+  const [isInviteUserDialogOpen, setIsInviteUserDialogOpen] = useState(false);
+  const [isAddProjectTagDialogOpen, setIsAddProjectTagDialogOpen] = useState(false);
+  const [isAdminUser, setIsAdminUser] = useState(user?.role === 'admin');
 
   const inviteForm = useForm<InviteUserFormValues>({
     resolver: zodResolver(inviteUserFormSchema),
     defaultValues: { emailToInvite: '', roleToInvite: 'viewer' },
   });
-
-  const taskForm = useForm<TaskFormValues>({
-    resolver: zodResolver(taskFormSchema),
-    defaultValues: { title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: ''},
-  });
-
   const projectTagForm = useForm<ProjectTagFormValues>({
     resolver: zodResolver(projectTagFormSchema),
     defaultValues: { tagName: '', tagColor: '#6B7280' },
   });
 
-
-  const [updateProjectFormState, updateProjectFormAction, isUpdateProjectPending] = useActionState(updateProjectAction, { message: "", errors: {} });
   const [inviteFormState, inviteUserFormAction, isInvitePending] = useActionState(inviteUserToProjectAction, { message: "", error: "" });
-  const [createTaskState, createTaskFormAction, isCreateTaskPending] = useActionState(createTaskAction, { message: "", error: "" });
-  const [updateTaskStatusState, performUpdateTaskStatusAction, isUpdateTaskStatusPending] = useActionState(updateTaskStatusAction, { message: "", error: "" });
-  const [updateTaskState, updateTaskFormAction, isUpdateTaskPending] = useActionState(updateTaskAction, { message: "", error: "" });
-  const [deleteTaskState, deleteTaskFormAction, isDeleteTaskPending] = useActionState(deleteTaskAction, { message: "", error: ""});
-  const [saveReadmeState, saveReadmeFormAction, isSaveReadmePending] = useActionState(saveProjectReadmeAction, { message: "", error: "" });
   const [toggleUrgencyState, toggleUrgencyFormAction, isToggleUrgencyPending] = useActionState(toggleProjectUrgencyAction, { message: "", error: "" });
   const [toggleVisibilityState, toggleVisibilityFormAction, isToggleVisibilityPending] = useActionState(toggleProjectVisibilityAction, { message: "", error: "" });
-  const [toggleTaskPinState, toggleTaskPinFormAction, isToggleTaskPinPending] = useActionState(toggleTaskPinAction, { message: "", error: "" });
   const [createProjectTagState, createProjectTagFormAction, isCreateProjectTagPending] = useActionState(createProjectTagAction, { message: "", error: "" });
-  const [deleteDocumentState, deleteDocumentFormAction, isDeleteDocumentPending] = useActionState(deleteDocumentAction, { message: "", error: "" });
 
+  useEffect(() => {
+    setProject(initialProject);
+    if (initialProject) {
+      setProjectReadmeContent(initialProject.readmeContent || '');
+    }
+  }, [initialProject]);
 
   const loadTasks = useCallback(async () => {
     if (projectUuid) {
@@ -239,145 +196,43 @@ export default function ProjectDetailPage() {
         const fetchedTasks = await fetchTasksAction(projectUuid);
         setTasks(fetchedTasks || []);
       } catch (error) {
-        console.error("Failed to load tasks:", error);
-        setTasks([]);
+        console.error("Failed to load tasks:", error); setTasks([]);
         toast({ variant: "destructive", title: "Error", description: "Could not load tasks." });
       }
     }
   }, [projectUuid, toast]);
 
-  const loadProjectMembersAndRole = useCallback(async (currentProjectOwnerUuid?: string) => {
-    if (projectUuid && user) {
-        try {
-            const members = await fetchProjectMembersAction(projectUuid);
-            setProjectMembers(members);
-            let role: ProjectMemberRole | null = null;
-            if (currentProjectOwnerUuid === user.uuid) {
-                role = 'owner';
-            } else {
-                const member = members.find(m => m.userUuid === user.uuid);
-                role = member?.role || null;
-            }
-            setCurrentUserRole(role);
-            return role;
-        } catch (error) {
-            console.error("Failed to load project members or determine role", error);
-            toast({ variant: "destructive", title: "Error", description: "Could not load project members or determine your role." });
-            return null;
-        }
-    }
-    return null;
-  }, [projectUuid, user, toast]);
-
-
-  const loadProjectTagsData = useCallback(async () => {
+  const loadProjectTagsDataForTasks = useCallback(async () => {
     if (projectUuid) {
       try {
         const tags = await fetchProjectTagsAction(projectUuid);
-        setProjectTags(tags);
+        setProjectTagsForTasks(tags);
       } catch (error) {
-        console.error("Failed to load project tags:", error);
-         toast({ variant: "destructive", title: "Error", description: "Could not load project tags." });
+        console.error("Failed to load project tags for tasks:", error);
+        toast({ variant: "destructive", title: "Error", description: "Could not load project tags." });
       }
     }
   }, [projectUuid, toast]);
 
-  const loadProjectDocuments = useCallback(async () => {
+  const loadProjectMembersForTasks = useCallback(async () => {
     if (projectUuid) {
       try {
-        const docs = await fetchDocumentsAction(projectUuid);
-        setProjectDocuments(docs || []);
+        const members = await fetchProjectMembersAction(projectUuid);
+        setProjectMembersForTasks(members);
       } catch (error) {
-        console.error("Failed to load documents:", error);
-        setProjectDocuments([]);
-        toast({ variant: "destructive", title: "Error", description: "Could not load documents." });
+        console.error("Failed to load project members for tasks", error);
+        toast({ variant: "destructive", title: "Error", description: "Could not load project members." });
       }
     }
   }, [projectUuid, toast]);
 
-
- useEffect(() => {
-    const performLoadProjectData = async () => {
-        if (projectUuid && user && !authLoading) {
-            setIsLoadingData(true);
-            setAccessDenied(false);
-            try {
-                const projectData = await fetchProjectAction(projectUuid);
-
-                if (projectData) {
-                    const userRoleForProject = await loadProjectMembersAndRole(projectData.ownerUuid);
-
-                    if (projectData.isPrivate && !userRoleForProject) {
-                        setAccessDenied(true);
-                        setProject(null);
-                        toast({variant: "destructive", title: "Access Denied", description: "This project is private and you are not a member."});
-                        setIsLoadingData(false);
-                        router.push('/projects');
-                        return;
-                    }
-
-                    setProject(projectData);
-                    editProjectForm.reset({ name: projectData.name, description: projectData.description || '' });
-                    setProjectReadmeContent(projectData.readmeContent || '');
-
-
-                    if (projectData.ownerUuid) {
-                        const ownerName = await fetchProjectOwnerNameAction(projectData.ownerUuid);
-                        setProjectOwnerName(ownerName);
-                    }
-                    await loadTasks();
-                    await loadProjectTagsData();
-                    await loadProjectDocuments();
-
-                } else {
-                    setAccessDenied(true);
-                    setProject(null);
-                    toast({variant: "destructive", title: "Project Not Found", description: "The project could not be loaded or you don't have access."});
-                }
-            } catch (err) {
-                console.error("[ProjectDetail] performLoadProjectData: Error fetching project on client:", err);
-                setProject(null);
-                setAccessDenied(true);
-                toast({variant: "destructive", title: "Error", description: "Could not load project details."})
-            } finally {
-                setIsLoadingData(false);
-            }
-        } else if (!authLoading && !user) {
-            router.push('/login');
-        }
-    };
-      performLoadProjectData();
-  }, [projectUuid, user, authLoading, router, toast, editProjectForm, loadProjectMembersAndRole, loadTasks, loadProjectTagsData, loadProjectDocuments]);
-
-
   useEffect(() => {
-    if (!isUpdateProjectPending && updateProjectFormState) {
-      if (updateProjectFormState.message && !updateProjectFormState.error) {
-        toast({ title: "Success", description: updateProjectFormState.message });
-        setIsEditDialogOpen(false);
-        if(updateProjectFormState.project) {
-          setProject(updateProjectFormState.project);
-        }
-      }
-      if (updateProjectFormState.error) {
-        toast({ variant: "destructive", title: "Error", description: updateProjectFormState.error });
-      }
+    if (activeTab === 'tasks' && projectUuid) {
+      loadTasks();
+      loadProjectTagsDataForTasks();
+      loadProjectMembersForTasks();
     }
-  }, [updateProjectFormState, isUpdateProjectPending, toast]);
-
-  useEffect(() => {
-    if (!isInvitePending && inviteFormState) {
-        if (inviteFormState.message && !inviteFormState.error) {
-            toast({ title: "Success", description: inviteFormState.message });
-            setIsInviteUserDialogOpen(false);
-            inviteForm.reset();
-            loadProjectMembersAndRole(project?.ownerUuid);
-        }
-        if (inviteFormState.error) {
-            toast({ variant: "destructive", title: "Invitation Error", description: inviteFormState.error });
-        }
-    }
-  }, [inviteFormState, isInvitePending, toast, loadProjectMembersAndRole, inviteForm, project?.ownerUuid]);
+  }, [activeTab, projectUuid, loadTasks, loadProjectTagsDataForTasks, loadProjectMembersForTasks]);
 
   useEffect(() => {
     if (!isCreateTaskPending && createTaskState) {
@@ -387,215 +242,75 @@ export default function ProjectDetailPage() {
         taskForm.reset({ title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: ''});
         loadTasks();
       }
-      if (createTaskState.error) {
-        let errorMessage = createTaskState.error;
-        if (createTaskState.fieldErrors?.assigneeUuid) {
-            errorMessage += ` Assignee: ${createTaskState.fieldErrors.assigneeUuid.join(', ')}`;
-        }
-        if (createTaskState.fieldErrors?.title) {
-             errorMessage += ` Title: ${createTaskState.fieldErrors.title.join(', ')}`;
-        }
-        toast({ variant: "destructive", title: "Task Creation Error", description: errorMessage });
-      }
+      if (createTaskState.error) toast({ variant: "destructive", title: "Task Creation Error", description: createTaskState.error });
+      if(createTaskState.fieldErrors) Object.entries(createTaskState.fieldErrors).forEach(([field, errors]) => {
+        if (errors && errors.length > 0) taskForm.setError(field as keyof TaskFormValues, { type: 'server', message: errors[0] });
+      });
     }
   }, [createTaskState, isCreateTaskPending, toast, loadTasks, taskForm]);
 
   useEffect(() => {
     if (!isUpdateTaskStatusPending && updateTaskStatusState) {
-        if (updateTaskStatusState.message && !updateTaskStatusState.error) {
-            toast({ title: "Success", description: updateTaskStatusState.message });
-            loadTasks();
-        }
-        if (updateTaskStatusState.error) {
-            toast({ variant: "destructive", title: "Status Update Error", description: updateTaskStatusState.error });
-        }
+        if (updateTaskStatusState.message && !updateTaskStatusState.error) { toast({ title: "Success", description: updateTaskStatusState.message }); loadTasks(); }
+        if (updateTaskStatusState.error) toast({ variant: "destructive", title: "Status Update Error", description: updateTaskStatusState.error });
     }
   }, [updateTaskStatusState, isUpdateTaskStatusPending, toast, loadTasks]);
 
-
   useEffect(() => {
     if (isUpdateTaskPending || !updateTaskState) return;
-
     if (updateTaskState.error && !isUpdateTaskPending) {
-        let errorMessage = updateTaskState.error;
-        Object.entries(updateTaskState.fieldErrors || {}).forEach(([key, value]) => {
-            if (value) {
-                errorMessage += ` ${key.charAt(0).toUpperCase() + key.slice(1)}: ${value.join(', ')}`;
-            }
-        });
-        toast({ variant: "destructive", title: "Task Update Error", description: errorMessage });
+        toast({ variant: "destructive", title: "Task Update Error", description: updateTaskState.error });
         lastSubmitSourceRef.current = null;
+        if(updateTaskState.fieldErrors) Object.entries(updateTaskState.fieldErrors).forEach(([field, errors]) => {
+          if (errors && errors.length > 0) taskForm.setError(field as keyof TaskFormValues, { type: 'server', message: errors[0] });
+        });
         return;
     }
-
     if (updateTaskState.message && !updateTaskState.error && updateTaskState.updatedTask) {
         toast({ title: "Success", description: updateTaskState.message });
         loadTasks();
-
-        if (lastSubmitSourceRef.current === 'subtasks' && taskToManageSubtasks?.uuid === updateTaskState.updatedTask.uuid) {
-             setIsManageSubtasksDialogOpen(false);
-        } else if (lastSubmitSourceRef.current === 'main' && taskToEdit?.uuid === updateTaskState.updatedTask.uuid) {
-            setIsEditTaskDialogOpen(false);
-            setTaskToEdit(null);
-        }
+        if (lastSubmitSourceRef.current === 'subtasks' && taskToManageSubtasks?.uuid === updateTaskState.updatedTask.uuid) setIsManageSubtasksDialogOpen(false);
+        else if (lastSubmitSourceRef.current === 'main' && taskToEdit?.uuid === updateTaskState.updatedTask.uuid) { setIsEditTaskDialogOpen(false); setTaskToEdit(null); }
         lastSubmitSourceRef.current = null;
     }
-}, [updateTaskState, isUpdateTaskPending, toast, loadTasks, taskToManageSubtasks, taskToEdit]);
+  }, [updateTaskState, isUpdateTaskPending, toast, loadTasks, taskToManageSubtasks, taskToEdit, taskForm]);
 
- useEffect(() => {
+  useEffect(() => {
     if (isEditTaskDialogOpen && taskToEdit) {
       taskForm.reset({
-        title: taskToEdit.title,
-        description: taskToEdit.description || '',
-        status: taskToEdit.status,
-        assigneeUuid: taskToEdit.assigneeUuid || UNASSIGNED_VALUE,
-        tagsString: taskToEdit.tags.map(t => t.name).join(', ') || '',
+        title: taskToEdit.title, description: taskToEdit.description || '', status: taskToEdit.status,
+        assigneeUuid: taskToEdit.assigneeUuid || UNASSIGNED_VALUE, tagsString: taskToEdit.tags.map(t => t.name).join(', ') || '',
       });
+    } else {
+      taskForm.reset({ title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: ''});
     }
   }, [isEditTaskDialogOpen, taskToEdit, taskForm]);
 
-
   useEffect(() => {
-    if (isManageSubtasksDialogOpen && taskToManageSubtasks) {
-      setSubtaskInput(convertMarkdownToSubtaskInput(taskToManageSubtasks.todoListMarkdown));
-    }
+    if (isManageSubtasksDialogOpen && taskToManageSubtasks) setSubtaskInput(convertMarkdownToSubtaskInput(taskToManageSubtasks.todoListMarkdown));
   }, [isManageSubtasksDialogOpen, taskToManageSubtasks]);
 
-
   useEffect(() => {
     if (!isDeleteTaskPending && deleteTaskState) {
-        if (deleteTaskState.message && !deleteTaskState.error) {
-            toast({ title: "Success", description: deleteTaskState.message });
-            setTaskToDelete(null);
-            loadTasks();
-        }
-        if (deleteTaskState.error) {
-            toast({ variant: "destructive", title: "Task Deletion Error", description: deleteTaskState.error });
-        }
+        if (deleteTaskState.message && !deleteTaskState.error) { toast({ title: "Success", description: deleteTaskState.message }); setTaskToDelete(null); loadTasks(); }
+        if (deleteTaskState.error) toast({ variant: "destructive", title: "Task Deletion Error", description: deleteTaskState.error });
     }
   }, [deleteTaskState, isDeleteTaskPending, toast, loadTasks]);
 
-  useEffect(() => {
-    if (!isSaveReadmePending && saveReadmeState) {
-        if (saveReadmeState.message && !saveReadmeState.error) {
-            toast({ title: "Success", description: saveReadmeState.message });
-            if(saveReadmeState.project) {
-                setProject(saveReadmeState.project);
-                setProjectReadmeContent(saveReadmeState.project.readmeContent || '');
-            }
-        }
-        if (saveReadmeState.error) {
-            toast({ variant: "destructive", title: "README Error", description: saveReadmeState.error });
-        }
-    }
-  }, [saveReadmeState, isSaveReadmePending, toast]);
-
-  useEffect(() => {
-    if (!isToggleUrgencyPending && toggleUrgencyState) {
-        if (toggleUrgencyState.message && !toggleUrgencyState.error) {
-            toast({ title: "Success", description: toggleUrgencyState.message });
-            if(toggleUrgencyState.project) setProject(toggleUrgencyState.project);
-        }
-        if (toggleUrgencyState.error) {
-            toast({ variant: "destructive", title: "Urgency Error", description: toggleUrgencyState.error });
-        }
-    }
-  }, [toggleUrgencyState, isToggleUrgencyPending, toast]);
-
-  useEffect(() => {
-    if (!isToggleVisibilityPending && toggleVisibilityState) {
-        if (toggleVisibilityState.message && !toggleVisibilityState.error) {
-            toast({ title: "Success", description: toggleVisibilityState.message });
-            if(toggleVisibilityState.project) setProject(toggleVisibilityState.project);
-        }
-        if (toggleVisibilityState.error) {
-            toast({ variant: "destructive", title: "Visibility Error", description: toggleVisibilityState.error });
-        }
-    }
-  }, [toggleVisibilityState, isToggleVisibilityPending, toast]);
-
   useEffect(() => {
     if (!isToggleTaskPinPending && toggleTaskPinState) {
-        if (toggleTaskPinState.message && !toggleTaskPinState.error) {
-            toast({ title: "Success", description: toggleTaskPinState.message });
-            loadTasks();
-        }
-        if (toggleTaskPinState.error) {
-            toast({ variant: "destructive", title: "Pin Error", description: toggleTaskPinState.error });
-        }
+        if (toggleTaskPinState.message && !toggleTaskPinState.error) { toast({ title: "Success", description: toggleTaskPinState.message }); loadTasks(); }
+        if (toggleTaskPinState.error) toast({ variant: "destructive", title: "Pin Error", description: toggleTaskPinState.error });
     }
   }, [toggleTaskPinState, isToggleTaskPinPending, toast, loadTasks]);
 
-  useEffect(() => {
-    if (!isCreateProjectTagPending && createProjectTagState) {
-      if (createProjectTagState.message && !createProjectTagState.error) {
-        toast({ title: "Success", description: createProjectTagState.message });
-        setIsAddProjectTagDialogOpen(false);
-        projectTagForm.reset({ tagName: '', tagColor: '#6B7280' });
-        loadProjectTagsData();
-      }
-      if (createProjectTagState.error) {
-        toast({ variant: "destructive", title: "Tag Creation Error", description: createProjectTagState.error });
-      }
-    }
-  }, [createProjectTagState, isCreateProjectTagPending, toast, projectTagForm, loadProjectTagsData]);
-
-  useEffect(() => {
-    if (!isDeleteDocumentPending && deleteDocumentState) {
-        if (deleteDocumentState.message && !deleteDocumentState.error) {
-            toast({ title: "Success", description: deleteDocumentState.message });
-            setDocumentToDelete(null); 
-            loadProjectDocuments();
-        }
-        if (deleteDocumentState.error) {
-            toast({ variant: "destructive", title: "Document Deletion Error", description: deleteDocumentState.error });
-        }
-    }
-  }, [deleteDocumentState, isDeleteDocumentPending, toast, loadProjectDocuments]);
-
-
-  useEffect(() => {
-    if (project) {
-      editProjectForm.reset({ name: project.name, description: project.description || '' });
-      setProjectReadmeContent(project.readmeContent || '');
-    }
-  }, [project, editProjectForm]);
-
-
-  const canManageProjectSettings = currentUserRole === 'owner' || currentUserRole === 'co-owner';
   const canCreateUpdateDeleteTasks = currentUserRole === 'owner' || currentUserRole === 'co-owner' || currentUserRole === 'editor';
   const canEditTaskStatus = !!currentUserRole;
-  const isAdminOrOwner = currentUserRole === 'owner' || user?.role === 'admin';
-  const canManageDocuments = currentUserRole === 'owner' || currentUserRole === 'co-owner' || currentUserRole === 'editor';
-
-
-  const handleEditProjectSubmit = async (values: EditProjectFormValues) => {
-    if (!project) return;
-    const formData = new FormData();
-    formData.append('name', values.name);
-    formData.append('description', values.description || '');
-    formData.append('projectUuid', project.uuid);
-    ReactStartTransition(() => {
-      updateProjectFormAction(formData);
-    });
-  };
-
-  const handleInviteSubmit = async (values: InviteUserFormValues) => {
-    if (!project) return;
-    const formData = new FormData();
-    formData.append('projectUuid', project.uuid);
-    formData.append('emailToInvite', values.emailToInvite);
-    formData.append('roleToInvite', values.roleToInvite);
-    ReactStartTransition(() => {
-      inviteUserFormAction(formData);
-    });
-  };
 
   const handleCreateTaskSubmit = async (values: TaskFormValues) => {
     if (!project) return;
     const formData = new FormData();
     const finalAssigneeUuid = values.assigneeUuid === UNASSIGNED_VALUE ? '' : values.assigneeUuid;
-
     formData.append('projectUuid', project.uuid);
     formData.append('title', values.title);
     formData.append('description', values.description || '');
@@ -603,10 +318,7 @@ export default function ProjectDetailPage() {
     formData.append('assigneeUuid', finalAssigneeUuid || '');
     if (values.tagsString) formData.append('tagsString', values.tagsString);
     formData.append('todoListMarkdown', '');
-
-    ReactStartTransition(() => {
-      createTaskFormAction(formData);
-    });
+    ReactStartTransition(() => { createTaskFormAction(formData); });
   };
 
   const handleEditTaskSubmit = async (values: TaskFormValues) => {
@@ -614,7 +326,6 @@ export default function ProjectDetailPage() {
     lastSubmitSourceRef.current = 'main';
     const formData = new FormData();
     const finalAssigneeUuid = values.assigneeUuid === UNASSIGNED_VALUE ? '' : values.assigneeUuid;
-
     formData.append('taskUuid', taskToEdit.uuid);
     formData.append('projectUuid', project.uuid);
     formData.append('title', values.title);
@@ -623,23 +334,14 @@ export default function ProjectDetailPage() {
     formData.append('status', values.status);
     formData.append('assigneeUuid', finalAssigneeUuid || '');
     if (values.tagsString) formData.append('tagsString', values.tagsString);
-
-    ReactStartTransition(() => {
-      updateTaskFormAction(formData);
-    });
-  };
-
-
-  const openManageSubtasksDialog = (task: Task) => {
-    setTaskToManageSubtasks(task);
-    setIsManageSubtasksDialogOpen(true);
+    ReactStartTransition(() => { updateTaskFormAction(formData); });
   };
-
+  
+  const openManageSubtasksDialog = (task: Task) => { setTaskToManageSubtasks(task); setIsManageSubtasksDialogOpen(true); };
   const handleSaveSubtasks = () => {
     if (!project || !taskToManageSubtasks) return;
     lastSubmitSourceRef.current = 'subtasks';
     const newTodoListMarkdown = convertSubtaskInputToMarkdown(subtaskInput);
-
     const formData = new FormData();
     formData.append('taskUuid', taskToManageSubtasks.uuid);
     formData.append('projectUuid', project.uuid);
@@ -650,21 +352,14 @@ export default function ProjectDetailPage() {
     if (taskToManageSubtasks.assigneeUuid) formData.append('assigneeUuid', taskToManageSubtasks.assigneeUuid);
     const currentTagsString = taskToManageSubtasks.tags.map(t => t.name).join(', ');
     if (currentTagsString) formData.append('tagsString', currentTagsString);
-
-    ReactStartTransition(() => {
-      updateTaskFormAction(formData);
-    });
+    ReactStartTransition(() => { updateTaskFormAction(formData); });
   };
 
   const handleTodoListChangeOnCard = (taskUuid: string, newTodoListMarkdown: string) => {
     if (!project) return;
     const taskToUpdate = tasks.find(t => t.uuid === taskUuid);
     if (!taskToUpdate) return;
-
-    if (debounceTimers.current[taskUuid]) {
-      clearTimeout(debounceTimers.current[taskUuid]);
-    }
-
+    if (debounceTimers.current[taskUuid]) clearTimeout(debounceTimers.current[taskUuid]);
     debounceTimers.current[taskUuid] = setTimeout(() => {
       lastSubmitSourceRef.current = null;
       const formData = new FormData();
@@ -677,107 +372,34 @@ export default function ProjectDetailPage() {
       if (taskToUpdate.assigneeUuid) formData.append('assigneeUuid', taskToUpdate.assigneeUuid);
       const currentTagsString = taskToUpdate.tags.map(t => t.name).join(', ');
       if (currentTagsString) formData.append('tagsString', currentTagsString);
-
-      ReactStartTransition(() => {
-        updateTaskFormAction(formData);
-      });
+      ReactStartTransition(() => { updateTaskFormAction(formData); });
     }, 750);
   };
 
-
-  const openEditTaskDialog = (task: Task) => {
-    setTaskToEdit(task);
-    setIsEditTaskDialogOpen(true);
-  };
-
+  const openEditTaskDialog = (task: Task) => { setTaskToEdit(task); taskForm.clearErrors(); setIsEditTaskDialogOpen(true); };
   const handleDeleteTaskConfirm = () => {
     if (!taskToDelete || !project) return;
     const formData = new FormData();
     formData.append('taskUuid', taskToDelete.uuid);
     formData.append('projectUuid', project.uuid);
-    ReactStartTransition(() => {
-      deleteTaskFormAction(formData);
-    });
+    ReactStartTransition(() => { deleteTaskFormAction(formData); });
   };
-
-
   const handleTaskStatusChange = (taskUuid: string, newStatus: TaskStatus) => {
     if (!project) return;
     const formData = new FormData();
     formData.append('taskUuid', taskUuid);
     formData.append('projectUuid', project.uuid);
     formData.append('status', newStatus as string);
-
-    ReactStartTransition(() => {
-        performUpdateTaskStatusAction(formData);
-    });
+    ReactStartTransition(() => { performUpdateTaskStatusAction(formData); });
   };
-
-
-  const handleRemoveMember = async (memberUuidToRemove: string) => {
-    if (!project) return;
-    ReactStartTransition(async () => {
-      const result = await removeUserFromProjectAction(project.uuid, memberUuidToRemove);
-      if (result.success) {
-          toast({ title: "Success", description: result.message });
-          loadProjectMembersAndRole(project.ownerUuid);
-      } else {
-          toast({ variant: "destructive", title: "Error", description: result.error });
-      }
-    });
-  };
-
-  const handleSaveReadme = () => {
-    if (!project) return;
-    const formData = new FormData();
-    formData.append('projectUuid', project.uuid);
-    formData.append('readmeContent', projectReadmeContent);
-    ReactStartTransition(() => {
-      saveReadmeFormAction(formData);
-    });
-  };
-
-  const handleToggleUrgency = (checked: boolean) => {
-    if (!project) return;
-    const formData = new FormData();
-    formData.append('projectUuid', project.uuid);
-    formData.append('isUrgent', String(checked));
-    ReactStartTransition(() => {
-      toggleUrgencyFormAction(formData);
-    });
-  };
-
-  const handleToggleVisibility = (checked: boolean) => {
-    if (!project) return;
-    const formData = new FormData();
-    formData.append('projectUuid', project.uuid);
-    formData.append('isPrivate', String(checked));
-    ReactStartTransition(() => {
-      toggleVisibilityFormAction(formData);
-    });
-  };
-
   const handleToggleTaskPin = (taskUuid: string, currentPinStatus: boolean) => {
     if (!project) return;
     const formData = new FormData();
     formData.append('taskUuid', taskUuid);
     formData.append('projectUuid', project.uuid);
     formData.append('isPinned', String(!currentPinStatus));
-    ReactStartTransition(() => {
-        toggleTaskPinFormAction(formData);
-    });
+    ReactStartTransition(() => { toggleTaskPinFormAction(formData); });
   };
-
-  const getInitials = (name?: string) => {
-    if (!name) return '??';
-    const names = name.split(' ');
-    let initials = names[0].substring(0, 1).toUpperCase();
-    if (names.length > 1) {
-      initials += names[names.length - 1].substring(0, 1).toUpperCase();
-    }
-    return initials;
-  };
-
   const getTaskBorderColor = (status: TaskStatus): string => {
     switch (status) {
       case 'To Do': return 'border-gray-400 dark:border-gray-500';
@@ -787,22 +409,9 @@ export default function ProjectDetailPage() {
       default: return 'border-muted';
     }
   };
-
   const groupTasksByStatus = () => {
-    const grouped: Record<TaskStatus, Task[]> = {
-      'To Do': [],
-      'In Progress': [],
-      'Done': [],
-      'Archived': [],
-    };
-    tasks.forEach(task => {
-      if (grouped[task.status]) {
-        grouped[task.status].push(task);
-      } else {
-        grouped['Archived'].push(task); 
-      }
-    });
-    
+    const grouped: Record<TaskStatus, Task[]> = { 'To Do': [], 'In Progress': [], 'Done': [], 'Archived': [] };
+    tasks.forEach(task => { grouped[task.status] ? grouped[task.status].push(task) : grouped['Archived'].push(task); });
     for (const status in grouped) {
         grouped[status as TaskStatus].sort((a, b) => {
             if (a.isPinned && !b.isPinned) return -1;
@@ -812,409 +421,287 @@ export default function ProjectDetailPage() {
     }
     return grouped;
   };
-
   const tasksByStatus = groupTasksByStatus();
 
-  const getCurrentTagFragment = (value: string): string => {
-    const parts = value.split(',');
-    return parts[parts.length - 1].trimStart();
-  };
-
-  const handleTagsStringInputChange = (
-    event: React.ChangeEvent<HTMLInputElement>,
-    fieldApi: any, 
-    formApi: any 
-  ) => {
+  const getCurrentTagFragment = (value: string): string => value.split(',').pop()?.trimStart() || "";
+  const handleTagsStringInputChange = ( event: React.ChangeEvent<HTMLInputElement>, fieldApi: any ) => {
     const inputValue = event.currentTarget.value;
-    fieldApi.onChange(inputValue); 
-
+    fieldApi.onChange(inputValue);
     const fragment = getCurrentTagFragment(inputValue);
     setActiveTagInputName(fieldApi.name as "tagsString");
-    
     if (fragment) {
         const lowerFragment = fragment.toLowerCase();
         const currentTagsInInput = inputValue.split(',').map(t => t.trim().toLowerCase()).filter(t => t.length > 0);
-        const filtered = projectTags
-            .filter(tag =>
-                tag.name.toLowerCase().startsWith(lowerFragment) &&
-                !currentTagsInInput.slice(0, -1).includes(tag.name.toLowerCase()) 
-            )
-            .slice(0, 5); 
+        const sourceTags = activeTab === 'tasks' || activeTab === 'settings' ? (activeTab === 'tasks' ? projectTagsForTasks : projectTagsForSettings) : [];
+        const filtered = sourceTags.filter(tag => tag.name.toLowerCase().startsWith(lowerFragment) && !currentTagsInInput.slice(0, -1).includes(tag.name.toLowerCase())).slice(0, 5);
         setTagSuggestions(filtered);
         setShowTagSuggestions(filtered.length > 0);
-        
-        if (fragment !== lastTypedFragmentRef.current) {
-             setActiveSuggestionIndex(-1); 
-        }
+        if (fragment !== lastTypedFragmentRef.current) setActiveSuggestionIndex(-1);
         lastTypedFragmentRef.current = fragment;
-
     } else {
-        setTagSuggestions([]);
-        setShowTagSuggestions(false);
-        setActiveSuggestionIndex(-1);
-        lastTypedFragmentRef.current = "";
+        setTagSuggestions([]); setShowTagSuggestions(false); setActiveSuggestionIndex(-1); lastTypedFragmentRef.current = "";
     }
   };
-
-
-  const handleTagSuggestionClick = (
-    suggestion: TagType,
-    fieldApi: any,
-    formApi: any
-  ) => {
+  const handleTagSuggestionClick = ( suggestion: TagType, fieldApi: any ) => {
     const currentFieldValue = fieldApi.value || "";
     const parts = currentFieldValue.split(',');
-    parts[parts.length - 1] = suggestion.name; 
-
+    parts[parts.length - 1] = suggestion.name;
     let newValue = parts.join(',');
-    if (!newValue.endsWith(', ')) { 
-         newValue += ', ';
-    }
-
+    if (!newValue.endsWith(', ')) newValue += ', ';
     fieldApi.onChange(newValue);
-    setTagSuggestions([]);
-    setShowTagSuggestions(false);
-    setActiveSuggestionIndex(-1);
-    lastTypedFragmentRef.current = ""; 
-    setTimeout(() => tagInputRef.current?.focus(), 0); 
+    setTagSuggestions([]); setShowTagSuggestions(false); setActiveSuggestionIndex(-1); lastTypedFragmentRef.current = "";
+    setTimeout(() => tagInputRef.current?.focus(), 0);
   };
-
-  const handleTagInputKeyDown = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-    fieldApi: any, 
-    formApi: any 
-  ) => {
+  const handleTagInputKeyDown = ( event: React.KeyboardEvent<HTMLInputElement>, fieldApi: any ) => {
     if (showTagSuggestions && tagSuggestions.length > 0) {
-      if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        setActiveSuggestionIndex(prev => Math.min(prev + 1, tagSuggestions.length - 1));
-      } else if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        setActiveSuggestionIndex(prev => Math.max(prev - 1, 0));
-      } else if ((event.key === 'Enter' || event.key === 'Tab') && activeSuggestionIndex >= 0 && activeSuggestionIndex < tagSuggestions.length) {
-        event.preventDefault(); 
-        event.stopPropagation(); 
-        handleTagSuggestionClick(tagSuggestions[activeSuggestionIndex], fieldApi, formApi);
-        return; 
-      } else if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        setShowTagSuggestions(false);
-        setActiveSuggestionIndex(-1);
-        lastTypedFragmentRef.current = "";
-        return; 
-      }
-    } else {
-      if (event.key === 'Escape') {
-        setShowTagSuggestions(false); 
-        setActiveSuggestionIndex(-1);
-        lastTypedFragmentRef.current = "";
-      }
-    }
+      if (event.key === 'ArrowDown') { event.preventDefault(); setActiveSuggestionIndex(prev => Math.min(prev + 1, tagSuggestions.length - 1)); }
+      else if (event.key === 'ArrowUp') { event.preventDefault(); setActiveSuggestionIndex(prev => Math.max(prev - 1, 0)); }
+      else if ((event.key === 'Enter' || event.key === 'Tab') && activeSuggestionIndex >= 0 && activeSuggestionIndex < tagSuggestions.length) {
+        event.preventDefault(); event.stopPropagation(); handleTagSuggestionClick(tagSuggestions[activeSuggestionIndex], fieldApi);
+      } else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); setShowTagSuggestions(false); setActiveSuggestionIndex(-1); lastTypedFragmentRef.current = ""; }
+    } else if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); setShowTagSuggestions(false); setActiveSuggestionIndex(-1); lastTypedFragmentRef.current = ""; }
   };
 
-
-  const handleCreateProjectTagSubmit = async (values: ProjectTagFormValues) => {
+  useEffect(() => {
+    if (!isSaveReadmePending && saveReadmeState) {
+        if (saveReadmeState.message && !saveReadmeState.error) {
+            toast({ title: "Success", description: saveReadmeState.message });
+            if(saveReadmeState.project) {
+                setProject(saveReadmeState.project); 
+                setProjectReadmeContent(saveReadmeState.project.readmeContent || '');
+            }
+        }
+        if (saveReadmeState.error) toast({ variant: "destructive", title: "README Error", description: saveReadmeState.error });
+    }
+  }, [saveReadmeState, isSaveReadmePending, toast]);
+  const handleSaveReadme = () => {
     if (!project) return;
     const formData = new FormData();
     formData.append('projectUuid', project.uuid);
-    formData.append('tagName', values.tagName);
-    formData.append('tagColor', values.tagColor);
-    ReactStartTransition(() => {
-      createProjectTagFormAction(formData);
-    });
+    formData.append('readmeContent', projectReadmeContent);
+    ReactStartTransition(() => { saveReadmeFormAction(formData); });
   };
+  const canEditReadme = currentUserRole === 'owner' || currentUserRole === 'co-owner' || currentUserRole === 'editor';
 
-  const openViewDocumentDialog = (doc: ProjectDocumentType) => {
-    setDocumentToView(doc);
-    setIsViewDocumentDialogOpen(true);
-  };
+  const loadProjectDocuments = useCallback(async () => {
+    if (projectUuid && activeTab === 'documents') {
+      setIsLoadingDocuments(true);
+      try {
+        const docs = await fetchDocumentsAction(projectUuid);
+        setProjectDocuments(docs || []);
+      } catch (error) {
+        console.error("Failed to load documents:", error); setProjectDocuments([]);
+        toast({ variant: "destructive", title: "Error", description: "Could not load documents." });
+      } finally {
+        setIsLoadingDocuments(false);
+      }
+    }
+  }, [projectUuid, activeTab, toast]);
+
+  useEffect(() => { loadProjectDocuments(); }, [loadProjectDocuments]);
 
+  useEffect(() => {
+    if (!isDeleteDocumentPending && deleteDocumentState) {
+        if (deleteDocumentState.message && !deleteDocumentState.error) {
+            toast({ title: "Success", description: deleteDocumentState.message });
+            setDocumentToDelete(null); loadProjectDocuments();
+        }
+        if (deleteDocumentState.error) toast({ variant: "destructive", title: "Document Deletion Error", description: deleteDocumentState.error });
+    }
+  }, [deleteDocumentState, isDeleteDocumentPending, toast, loadProjectDocuments]);
+
+  const openViewDocumentDialog = (doc: ProjectDocumentType) => { setDocumentToView(doc); setIsViewDocumentDialogOpen(true); };
   const handleDeleteDocumentConfirm = () => {
     if (!documentToDelete || !project) return;
     const formData = new FormData();
     formData.append('documentUuid', documentToDelete.uuid);
-    formData.append('projectUuid', project.uuid); 
-    ReactStartTransition(() => {
-      deleteDocumentFormAction(formData);
-    });
+    formData.append('projectUuid', project.uuid);
+    ReactStartTransition(() => { deleteDocumentFormAction(formData); });
   };
+  const canManageDocuments = currentUserRole === 'owner' || currentUserRole === 'co-owner' || currentUserRole === 'editor';
 
+  const loadProjectMembersForSettings = useCallback(async () => {
+    if (projectUuid && activeTab === 'settings') {
+      try {
+        const members = await fetchProjectMembersAction(projectUuid);
+        setProjectMembersForSettings(members);
+      } catch (error) { console.error("Failed to load project members", error); toast({ variant: "destructive", title: "Error", description: "Could not load project members." });}
+    }
+  }, [projectUuid, activeTab, toast]);
 
-  if (authLoading || isLoadingData) {
-    return (
-      <div className="space-y-6">
-        <Skeleton className="h-9 w-36 mb-4" />
-        <Card className="shadow-lg">
-          <CardHeader>
-            <Skeleton className="h-8 w-1/2" />
-            <Skeleton className="h-5 w-3/4 mt-2" />
-             <div className="mt-3 flex flex-wrap gap-2">
-                <Skeleton className="h-6 w-20 rounded-full" />
-                <Skeleton className="h-6 w-24 rounded-full" />
-              </div>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm pt-2">
-                <div><Skeleton className="h-4 w-16 mb-1" /><Skeleton className="h-5 w-24" /></div>
-                <div><Skeleton className="h-4 w-20 mb-1" /><Skeleton className="h-5 w-12" /></div>
-                <div><Skeleton className="h-4 w-16 mb-1" /><Skeleton className="h-5 w-28" /></div>
-                <div><Skeleton className="h-4 w-24 mb-1" /><Skeleton className="h-5 w-28" /></div>
-            </div>
-          </CardContent>
-        </Card>
-        <Skeleton className="h-10 w-full" />
-        <Card><CardContent className="p-6"><Skeleton className="h-40 w-full" /></CardContent></Card>
-      </div>
-    );
-  }
+  const loadProjectTagsDataForSettings = useCallback(async () => {
+    if (projectUuid && activeTab === 'settings') {
+      try {
+        const tags = await fetchProjectTagsAction(projectUuid);
+        setProjectTagsForSettings(tags);
+      } catch (error) { console.error("Failed to load project tags:", error); toast({ variant: "destructive", title: "Error", description: "Could not load project tags." });}
+    }
+  }, [projectUuid, activeTab, toast]);
 
-  if (accessDenied || !project || !user) {
-    return (
-        <div className="space-y-6 text-center flex flex-col items-center justify-center min-h-[calc(100vh-12rem)]">
-            <Button variant="outline" onClick={() => router.push('/projects')} className="mb-4 self-start">
-                <ArrowLeft className="mr-2 h-4 w-4" /> Back to Projects List
-            </Button>
-            <AlertCircle className="mx-auto h-16 w-16 text-destructive mt-12" />
-            <h2 className="text-2xl font-semibold mt-4">Access Denied or Project Not Found</h2>
-            <p className="text-muted-foreground">
-              {accessDenied ? "You do not have permission to view this private project, or the project does not exist." : `Project (ID: ${projectUuid}) not found or access is restricted.`}
-            </p>
-        </div>
-    );
-  }
+  useEffect(() => {
+    if (activeTab === 'settings' && projectUuid && user) {
+      loadProjectMembersForSettings();
+      loadProjectTagsDataForSettings();
+    }
+  }, [activeTab, projectUuid, user, loadProjectMembersForSettings, loadProjectTagsDataForSettings]);
 
+  useEffect(() => {
+    if (!isInvitePending && inviteFormState) {
+        if (inviteFormState.message && !inviteFormState.error) {
+            toast({ title: "Success", description: inviteFormState.message });
+            setIsInviteUserDialogOpen(false); inviteForm.reset(); loadProjectMembersForSettings();
+        }
+        if (inviteFormState.error) toast({ variant: "destructive", title: "Invitation Error", description: inviteFormState.error });
+    }
+  }, [inviteFormState, isInvitePending, toast, loadProjectMembersForSettings, inviteForm]);
+
+  useEffect(() => {
+    if (!isToggleUrgencyPending && toggleUrgencyState) {
+        if (toggleUrgencyState.message && !toggleUrgencyState.error) {
+            toast({ title: "Success", description: toggleUrgencyState.message });
+            if(toggleUrgencyState.project) setProject(toggleUrgencyState.project);
+        }
+        if (toggleUrgencyState.error) toast({ variant: "destructive", title: "Urgency Error", description: toggleUrgencyState.error });
+    }
+  }, [toggleUrgencyState, isToggleUrgencyPending, toast]);
+
+  useEffect(() => {
+    if (!isToggleVisibilityPending && toggleVisibilityState) {
+        if (toggleVisibilityState.message && !toggleVisibilityState.error) {
+            toast({ title: "Success", description: toggleVisibilityState.message });
+            if(toggleVisibilityState.project) setProject(toggleVisibilityState.project);
+        }
+        if (toggleVisibilityState.error) toast({ variant: "destructive", title: "Visibility Error", description: toggleVisibilityState.error });
+    }
+  }, [toggleVisibilityState, isToggleVisibilityPending, toast]);
+
+  useEffect(() => {
+    if (!isCreateProjectTagPending && createProjectTagState) {
+      if (createProjectTagState.message && !createProjectTagState.error) {
+        toast({ title: "Success", description: createProjectTagState.message });
+        setIsAddProjectTagDialogOpen(false); projectTagForm.reset({ tagName: '', tagColor: '#6B7280' }); loadProjectTagsDataForSettings(); loadProjectTagsDataForTasks();
+      }
+      if (createProjectTagState.error) toast({ variant: "destructive", title: "Tag Creation Error", description: createProjectTagState.error });
+    }
+  }, [createProjectTagState, isCreateProjectTagPending, toast, projectTagForm, loadProjectTagsDataForSettings, loadProjectTagsDataForTasks]);
+
+  const canManageProjectSettings = currentUserRole === 'owner' || currentUserRole === 'co-owner';
+  const isProjectOwner = currentUserRole === 'owner';
+
+  const handleInviteSubmit = async (values: InviteUserFormValues) => {
+    if (!project) return;
+    const formData = new FormData();
+    formData.append('projectUuid', project.uuid);
+    formData.append('emailToInvite', values.emailToInvite);
+    formData.append('roleToInvite', values.roleToInvite);
+    ReactStartTransition(() => { inviteUserFormAction(formData); });
+  };
+  const handleRemoveMember = async (memberUuidToRemove: string) => {
+    if (!project) return;
+    ReactStartTransition(async () => {
+      const result = await removeUserFromProjectAction(project.uuid, memberUuidToRemove);
+      if (result.success) { toast({ title: "Success", description: result.message }); loadProjectMembersForSettings(); }
+      else { toast({ variant: "destructive", title: "Error", description: result.error }); }
+    });
+  };
+  const handleToggleUrgency = (checked: boolean) => {
+    if (!project) return;
+    const formData = new FormData();
+    formData.append('projectUuid', project.uuid);
+    formData.append('isUrgent', String(checked));
+    ReactStartTransition(() => { toggleUrgencyFormAction(formData); });
+  };
+  const handleToggleVisibility = (checked: boolean) => {
+    if (!project) return;
+    const formData = new FormData();
+    formData.append('projectUuid', project.uuid);
+    formData.append('isPrivate', String(checked));
+    ReactStartTransition(() => { toggleVisibilityFormAction(formData); });
+  };
+  const handleCreateProjectTagSubmit = async (values: ProjectTagFormValues) => {
+    if (!project) return;
+    const formData = new FormData();
+    formData.append('projectUuid', project.uuid);
+    formData.append('tagName', values.tagName);
+    formData.append('tagColor', values.tagColor);
+    ReactStartTransition(() => { createProjectTagFormAction(formData); });
+  };
+  const getInitials = (name?: string) => {
+    if (!name) return '??';
+    const names = name.split(' ');
+    let initials = names[0].substring(0, 1).toUpperCase();
+    if (names.length > 1) initials += names[names.length - 1].substring(0, 1).toUpperCase();
+    return initials;
+  };
+
+  const onTabChange = (newTab: string) => {
+    setActiveTab(newTab);
+    router.push(`/projects/${projectUuid}?tab=${newTab}`, { scroll: false });
+  };
+
+  if (!project) {
+    return <div className="flex items-center justify-center min-h-[300px]"><Loader2 className="h-8 w-8 animate-spin text-primary" /> Loading project data...</div>;
+  }
 
   return (
-    <div className="space-y-6">
-      <Button variant="outline" onClick={() => router.back()} className="mb-0">
-        <ArrowLeft className="mr-2 h-4 w-4" /> Back to Projects
-      </Button>
-
-      <Card className={cn("shadow-lg", project.isUrgent && "border-2 border-destructive ring-2 ring-destructive/50")}>
-        <CardHeader>
-          <div className="flex flex-col sm:flex-row justify-between items-start gap-4">
-            <div>
-              <div className="flex items-center gap-2">
-                <CardTitle className="text-3xl font-headline">{project.name}</CardTitle>
-                {project.isUrgent && <Flame className="h-7 w-7 text-destructive" />}
-                <Badge variant={project.isPrivate ? "secondary" : "outline"} className={cn("border",project.isPrivate ? "border-amber-500 text-amber-600" : "border-green-500 text-green-600")}>
-                    {project.isPrivate ? "Private" : "Public"}
-                </Badge>
-              </div>
-              {project.description ? (
-                <div className="prose prose-sm dark:prose-invert max-w-none mt-1 text-muted-foreground">
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{project.description}</ReactMarkdown>
-                </div>
-              ) : (
-                <CardDescription className="mt-1">No description provided.</CardDescription>
-              )}
-              <div className="mt-2 flex flex-wrap gap-2">
-                {projectTags.slice(0, 5).map(tag => (
-                  <Badge key={tag.uuid} style={{ backgroundColor: tag.color }} className="text-white text-xs">{tag.name}</Badge>
-                ))}
-                {projectTags.length > 5 && <Badge variant="outline">+{projectTags.length - 5} more</Badge>}
-              </div>
-            </div>
-            <div className="flex gap-2 flex-shrink-0">
-              <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
-                <DialogTrigger asChild>
-                  <Button variant="outline" size="sm" disabled={!canManageProjectSettings}>
-                    <Edit3 className="mr-2 h-4 w-4" /> Edit
-                  </Button>
-                </DialogTrigger>
-                <DialogContent>
-                  <DialogHeader>
-                    <DialogTitle>Edit Project</DialogTitle>
-                    <DialogDescription>Update the name and description (Markdown supported) of your project.</DialogDescription>
-                  </DialogHeader>
-                  <Form {...editProjectForm}>
-                    <form onSubmit={editProjectForm.handleSubmit(handleEditProjectSubmit)} className="space-y-4">
-                      <FormField
-                        control={editProjectForm.control}
-                        name="name"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Project Name</FormLabel>
-                            <FormControl>
-                              <Input {...field} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                      <FormField
-                        control={editProjectForm.control}
-                        name="description"
-                        render={({ field }) => (
-                          <FormItem>
-                            <FormLabel>Project Description (Optional, Markdown)</FormLabel>
-                            <FormControl>
-                              <Textarea {...field} rows={5} />
-                            </FormControl>
-                            <FormMessage />
-                          </FormItem>
-                        )}
-                      />
-                       {updateProjectFormState?.errors?.name && <p className="text-sm text-destructive">{Array.isArray(updateProjectFormState.errors.name) ? updateProjectFormState.errors.name.join(', ') : updateProjectFormState.errors.name}</p>}
-                       {updateProjectFormState?.errors?.description && <p className="text-sm text-destructive">{Array.isArray(updateProjectFormState.errors.description) ? updateProjectFormState.errors.description.join(', ') : updateProjectFormState.errors.description}</p>}
-                       {updateProjectFormState?.error && !updateProjectFormState.errors && <p className="text-sm text-destructive">{updateProjectFormState.error}</p>}
-                      <DialogFooter>
-                        <DialogClose asChild>
-                           <Button type="button" variant="ghost">Cancel</Button>
-                        </DialogClose>
-                        <Button type="submit" disabled={isUpdateProjectPending}>
-                          {isUpdateProjectPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                          Save Changes
-                        </Button>
-                      </DialogFooter>
-                    </form>
-                  </Form>
-                </DialogContent>
-              </Dialog>
-              <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                      <Button variant="destructive" size="sm" disabled={currentUserRole !== 'owner'}>
-                          <Trash2 className="mr-2 h-4 w-4" /> Delete Project
-                      </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                      <AlertDialogHeader>
-                          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-                          <AlertDialogDescription>
-                              This action cannot be undone. This will permanently delete the project and all its associated data.
-                          </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                          <AlertDialogCancel>Cancel</AlertDialogCancel>
-                          <AlertDialogAction onClick={() => {/* TODO: Implement delete project action */ } } disabled>
-                              Yes, delete project
-                          </AlertDialogAction>
-                      </AlertDialogFooter>
-                  </AlertDialogContent>
-              </AlertDialog>
-            </div>
-          </div>
-        </CardHeader>
-        <CardContent>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm pt-2">
-                <div><strong className="block text-muted-foreground">Owner:</strong> {projectOwnerName || project.ownerUuid}</div>
-                <div><strong className="block text-muted-foreground">Members:</strong> {projectMembers.length}</div>
-                <div><strong className="block text-muted-foreground">Created:</strong> {new Date(project.createdAt).toLocaleDateString()}</div>
-                <div><strong className="block text-muted-foreground">Last Update:</strong> {new Date(project.updatedAt).toLocaleDateString()}</div>
-            </div>
-        </CardContent>
-      </Card>
-
-      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-        <TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
-          <TabsTrigger value="tasks"><CheckSquare className="mr-2 h-4 w-4"/>Tasks</TabsTrigger>
-          <TabsTrigger value="readme"><BookOpen className="mr-2 h-4 w-4"/>README</TabsTrigger>
-          <TabsTrigger value="documents"><FileText className="mr-2 h-4 w-4"/>Documents</TabsTrigger>
-          <TabsTrigger value="announcements"><Megaphone className="mr-2 h-4 w-4"/>Announcements</TabsTrigger>
-          <TabsTrigger value="codespace"><FolderGit2 className="mr-2 h-4 w-4"/>CodeSpace</TabsTrigger>
-          <TabsTrigger value="settings"><Users className="mr-2 h-4 w-4"/>Team & Settings</TabsTrigger>
+    <>
+      <Tabs value={activeTab} onValueChange={onTabChange} className="w-full mt-4">
+        <TabsList className="grid w-full grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-6">
+          <TabsTrigger value="tasks"><FolderKanban className="mr-1 h-4 w-4 hidden sm:inline-flex"/>Tasks</TabsTrigger>
+          <TabsTrigger value="readme"><BookOpen className="mr-1 h-4 w-4 hidden sm:inline-flex"/>README</TabsTrigger>
+          <TabsTrigger value="documents"><FileText className="mr-1 h-4 w-4 hidden sm:inline-flex"/>Documents</TabsTrigger>
+          <TabsTrigger value="announcements"><Megaphone className="mr-1 h-4 w-4 hidden sm:inline-flex"/>Announcements</TabsTrigger>
+          <TabsTrigger value="codespace"><FolderGit2 className="mr-1 h-4 w-4 hidden sm:inline-flex"/>CodeSpace</TabsTrigger>
+          <TabsTrigger value="settings"><SettingsIcon className="mr-1 h-4 w-4 hidden sm:inline-flex"/>Settings & Team</TabsTrigger>
         </TabsList>
 
         <TabsContent value="tasks" className="mt-4">
           <Card>
             <CardHeader className="flex flex-row justify-between items-center">
               <CardTitle>Tasks ({tasks.length})</CardTitle>
-               <Dialog open={isCreateTaskDialogOpen} onOpenChange={(isOpen) => { setIsCreateTaskDialogOpen(isOpen); if (!isOpen) { setTagSuggestions([]); setShowTagSuggestions(false); setActiveTagInputName(null); setActiveSuggestionIndex(-1);} }}>
+              <Dialog open={isCreateTaskDialogOpen} onOpenChange={(isOpen) => { setIsCreateTaskDialogOpen(isOpen); if (!isOpen) { setTagSuggestions([]); setShowTagSuggestions(false); setActiveTagInputName(null); setActiveSuggestionIndex(-1); taskForm.clearErrors(); taskForm.reset({ title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: '' });} }}>
                 <DialogTrigger asChild>
-                    <Button size="sm" disabled={!canCreateUpdateDeleteTasks} onClick={() => taskForm.reset({ title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: '' })}>
+                    <Button size="sm" disabled={!canCreateUpdateDeleteTasks} onClick={() => { taskForm.clearErrors(); taskForm.reset({ title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: '' }); }}>
                         <PlusCircle className="mr-2 h-4 w-4"/> Add Task
                     </Button>
                 </DialogTrigger>
                 <DialogContent className="sm:max-w-[525px]">
-                    <DialogHeader>
-                        <DialogTitle>Create New Task</DialogTitle>
-                        <DialogDescription>Fill in the details for the new task. Sub-tasks are managed separately.</DialogDescription>
-                    </DialogHeader>
+                    <DialogHeader><DialogTitle>Create New Task</DialogTitle><DialogDescription>Fill in the details for the new task.</DialogDescription></DialogHeader>
                     <Form {...taskForm}>
                         <form onSubmit={taskForm.handleSubmit(handleCreateTaskSubmit)} className="space-y-4">
                             <FormField control={taskForm.control} name="title" render={({ field }) => ( <FormItem> <FormLabel>Title</FormLabel> <FormControl><Input {...field} /></FormControl> <FormMessage /> </FormItem> )}/>
-                            <FormField control={taskForm.control} name="description" render={({ field }) => ( <FormItem> <FormLabel>Description (Optional, Markdown supported)</FormLabel> <FormControl><Textarea {...field} rows={3} /></FormControl> <FormMessage /> </FormItem> )}/>
-                            <FormField control={taskForm.control} name="status" render={({ field }) => ( <FormItem> <FormLabel>Status</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value}> <FormControl><SelectTrigger><SelectValue placeholder="Select status" /></SelectTrigger></FormControl> <SelectContent> {taskStatuses.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
-                            <FormField control={taskForm.control} name="assigneeUuid" render={({ field }) => ( <FormItem> <FormLabel>Assign To (Optional)</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value || UNASSIGNED_VALUE}> <FormControl><SelectTrigger><SelectValue placeholder="Select assignee" /></SelectTrigger></FormControl> <SelectContent> <SelectItem value={UNASSIGNED_VALUE}>Unassigned / Everyone</SelectItem> {projectMembers.map(member => ( <SelectItem key={member.userUuid} value={member.userUuid}>{member.user?.name}</SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
-                            <Controller
-                                control={taskForm.control}
-                                name="tagsString"
-                                render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Tags (comma-separated)</FormLabel>
-                                    <Popover open={showTagSuggestions && activeTagInputName === 'tagsString'} 
-                                             onOpenChange={(open) => { 
-                                                if(!open && document.activeElement !== tagInputRef.current) { 
-                                                    setShowTagSuggestions(false); 
-                                                }
-                                            }}
-                                    >
-                                      <PopoverAnchor>
-                                        <FormControl>
-                                        <Input
-                                            {...field}
-                                            ref={tagInputRef}
-                                            placeholder="e.g. frontend, bug, urgent"
-                                            onFocus={() => {
-                                                setActiveTagInputName('tagsString');
-                                                const fragment = getCurrentTagFragment(field.value || "");
-                                                if (fragment) handleTagsStringInputChange({ currentTarget: { value: field.value } } as React.ChangeEvent<HTMLInputElement>, field, taskForm);
-                                            }}
-                                            onChange={(e) => handleTagsStringInputChange(e, field, taskForm)}
-                                            onKeyDown={(e) => handleTagInputKeyDown(e, field, taskForm)}
-                                            onBlur={() => setTimeout(() => { 
-                                                if (document.activeElement !== tagInputRef.current && !document.querySelector('[data-radix-popper-content-wrapper]:hover')) {
-                                                    setShowTagSuggestions(false); 
-                                                }
-                                            }, 150)}
-                                        />
-                                        </FormControl>
-                                      </PopoverAnchor>
-                                      {showTagSuggestions && tagSuggestions.length > 0 && (
-                                      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()}>
-                                        <Command shouldFilter={false}>
-                                            <CommandList>
-                                            <CommandEmpty>No matching tags found.</CommandEmpty>
-                                            <CommandGroup>
-                                                {tagSuggestions.map((suggestion, index) => (
-                                                <CommandItem
-                                                    key={suggestion.uuid}
-                                                    value={suggestion.name}
-                                                    onSelect={() => { 
-                                                        handleTagSuggestionClick(suggestion, field, taskForm);
-                                                    }}
-                                                    className={cn("cursor-pointer", index === activeSuggestionIndex && "bg-accent text-accent-foreground")}
-                                                >
-                                                    {suggestion.name}
-                                                </CommandItem>
-                                                ))}
-                                            </CommandGroup>
-                                            </CommandList>
-                                        </Command>
-                                      </PopoverContent>
-                                      )}
-                                    </Popover>
-                                    <FormMessage />
-                                </FormItem>
-                                )}
-                            />
-                            {createTaskState?.error && !createTaskState.fieldErrors && <p className="text-sm text-destructive">{createTaskState.error}</p>}
-                            {createTaskState?.fieldErrors?.title && <p className="text-sm text-destructive">Title: {createTaskState.fieldErrors.title.join(', ')}</p>}
-                            {createTaskState?.fieldErrors?.assigneeUuid && <p className="text-sm text-destructive">Assignee: {createTaskState.fieldErrors.assigneeUuid.join(', ')}</p>}
-                            <DialogFooter>
-                                <DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose>
-                                <Button type="submit" disabled={isCreateTaskPending}> {isCreateTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Create Task </Button>
-                            </DialogFooter>
+                            <FormField control={taskForm.control} name="description" render={({ field }) => ( <FormItem> <FormLabel>Description</FormLabel> <FormControl><Textarea {...field} rows={3} /></FormControl> <FormMessage /> </FormItem> )}/>
+                            <FormField control={taskForm.control} name="status" render={({ field }) => ( <FormItem> <FormLabel>Status</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value}> <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl> <SelectContent> {taskStatuses.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
+                            <FormField control={taskForm.control} name="assigneeUuid" render={({ field }) => ( <FormItem> <FormLabel>Assign To</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value || UNASSIGNED_VALUE}> <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl> <SelectContent> <SelectItem value={UNASSIGNED_VALUE}>Unassigned</SelectItem> {projectMembersForTasks.map(member => ( <SelectItem key={member.userUuid} value={member.userUuid}>{member.user?.name}</SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
+                            <Controller control={taskForm.control} name="tagsString" render={({ field, fieldState }) => (
+                              <FormItem> <FormLabel>Tags</FormLabel>
+                                  <Popover open={showTagSuggestions && activeTagInputName === 'tagsString'} onOpenChange={(open) => { if(!open && document.activeElement !== tagInputRef.current) { setShowTagSuggestions(false); }}}>
+                                    <PopoverAnchor><FormControl>
+                                      <Input {...field} ref={tagInputRef} placeholder="e.g. frontend, bug"
+                                          onFocus={() => {setActiveTagInputName('tagsString'); if(getCurrentTagFragment(field.value || "")) handleTagsStringInputChange({currentTarget: {value: field.value || ''}} as any, field);}}
+                                          onChange={(e) => handleTagsStringInputChange(e, field)}
+                                          onKeyDown={(e) => handleTagInputKeyDown(e, field)}
+                                          onBlur={() => setTimeout(() => { if (document.activeElement !== tagInputRef.current && !document.querySelector('[data-radix-popper-content-wrapper]:hover')) setShowTagSuggestions(false);}, 150)} />
+                                    </FormControl></PopoverAnchor>
+                                    {showTagSuggestions && tagSuggestions.length > 0 && (
+                                    <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()}>
+                                      <Command shouldFilter={false}><CommandList><CommandEmpty>No tags found.</CommandEmpty><CommandGroup>
+                                          {tagSuggestions.map((suggestion, index) => (
+                                          <CommandItem key={suggestion.uuid} value={suggestion.name} onSelect={() => handleTagSuggestionClick(suggestion, field)} className={cn("cursor-pointer", index === activeSuggestionIndex && "bg-accent text-accent-foreground")}>
+                                              {suggestion.name}
+                                          </CommandItem>))}
+                                      </CommandGroup></CommandList></Command>
+                                    </PopoverContent>)}
+                                  </Popover><FormMessage />
+                              </FormItem>)}/>
+                            <DialogFooter><DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose><Button type="submit" disabled={isCreateTaskPending}> {isCreateTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Create Task </Button></DialogFooter>
                         </form>
                     </Form>
                 </DialogContent>
-               </Dialog>
+              </Dialog>
             </CardHeader>
             <CardContent>
-              {tasks.length === 0 ? (
-                <p className="text-muted-foreground text-center py-4">No tasks in this project yet.</p>
-              ) : (
+              {tasks.length === 0 ? ( <p className="text-muted-foreground text-center py-4">No tasks yet.</p> ) : (
                 Object.entries(tasksByStatus).map(([status, statusTasks]) => (
                   statusTasks.length > 0 && (
                     <div key={status} className="mb-6">
@@ -1224,97 +711,28 @@ export default function ProjectDetailPage() {
                           <Card key={task.uuid} className={cn("p-3 border-l-4", getTaskBorderColor(task.status as TaskStatus), task.isPinned && "bg-primary/5")}>
                             <div className="flex justify-between items-start gap-2">
                               <div className="flex-grow min-w-0">
-                                <div className="flex items-center gap-2">
-                                   {task.isPinned && <Pin className="h-4 w-4 text-primary flex-shrink-0" />}
-                                   <h4 className="font-semibold break-words">{task.title}</h4>
-                                </div>
-                                {task.description && (
-                                    <div className="prose prose-sm dark:prose-invert max-w-none mt-1 text-muted-foreground">
-                                        <ReactMarkdown remarkPlugins={[remarkGfm]}>{task.description}</ReactMarkdown>
-                                    </div>
-                                )}
-
+                                <div className="flex items-center gap-2"> {task.isPinned && <Pin className="h-4 w-4 text-primary shrink-0" />} <h4 className="font-semibold break-words">{task.title}</h4> </div>
+                                {task.description && <div className="prose prose-sm dark:prose-invert max-w-none mt-1 text-muted-foreground"><ReactMarkdown remarkPlugins={[remarkGfm]}>{task.description}</ReactMarkdown></div>}
                                 <div className="mt-2 pt-2 border-t border-dashed">
                                   {task.todoListMarkdown && task.todoListMarkdown.trim() !== '' ? (
-                                      <>
-                                        <h5 className="text-xs font-semibold text-muted-foreground mb-1">Sub-tasks:</h5>
-                                        <MarkdownTaskListRenderer
-                                          content={task.todoListMarkdown}
-                                          onContentChange={(newTodoListMarkdown) => handleTodoListChangeOnCard(task.uuid, newTodoListMarkdown)}
-                                          disabled={!canCreateUpdateDeleteTasks}
-                                        />
-                                      </>
-                                    ) : (
-                                        <p className="text-xs text-muted-foreground">
-                                        No sub-tasks defined.
-                                        {canCreateUpdateDeleteTasks && (
-                                            <Button variant="link" size="sm" className="h-auto p-0 ml-1 text-xs" onClick={() => openManageSubtasksDialog(task)}>
-                                                Add sub-tasks
-                                            </Button>
-                                        )}
-                                        </p>
-                                    )}
-                                </div>
-                                <p className="text-xs text-muted-foreground mt-1">
-                                  Assigned to: {task.assigneeName || (task.assigneeUuid ? 'Unknown User' : 'Everyone')}
-                                </p>
-                                <div className="mt-2 flex flex-wrap gap-1">
-                                    {task.tags.map(tag => (
-                                        <Badge key={tag.uuid} variant="secondary" style={{ backgroundColor: tag.color !== '#6B7280' ? tag.color : undefined }} className={cn('text-xs',tag.color === '#6B7280' ? 'bg-muted hover:bg-muted/80 text-muted-foreground' : 'text-white')}>{tag.name}</Badge>
-                                    ))}
+                                      <><h5 className="text-xs font-semibold text-muted-foreground mb-1">Sub-tasks:</h5><MarkdownTaskListRenderer content={task.todoListMarkdown} onContentChange={(newMd) => handleTodoListChangeOnCard(task.uuid, newMd)} disabled={!canCreateUpdateDeleteTasks}/></>
+                                    ) : ( <p className="text-xs text-muted-foreground"> No sub-tasks. {canCreateUpdateDeleteTasks && <Button variant="link" size="sm" className="h-auto p-0 ml-1 text-xs" onClick={() => openManageSubtasksDialog(task)}>Add</Button>} </p> )}
                                 </div>
+                                <p className="text-xs text-muted-foreground mt-1">Assigned: {task.assigneeName || (task.assigneeUuid ? 'Unknown' : 'Everyone')}</p>
+                                <div className="mt-2 flex flex-wrap gap-1"> {task.tags.map(tag => (<Badge key={tag.uuid} style={{ backgroundColor: tag.color, color: tag.color && (parseInt(tag.color.substring(1,3),16)*0.299 + parseInt(tag.color.substring(3,5),16)*0.587 + parseInt(tag.color.substring(5,7),16)*0.114) > 186 ? '#000000' : '#FFFFFF' }} className="text-xs">{tag.name}</Badge>))} </div>
                               </div>
-                              <div className="flex flex-col sm:flex-row items-end sm:items-center gap-1 flex-shrink-0">
-                                <Select
-                                  value={task.status}
-                                  disabled={!canEditTaskStatus || isUpdateTaskStatusPending}
-                                  onValueChange={(newStatus) => handleTaskStatusChange(task.uuid, newStatus as TaskStatus)}
-                                >
-                                  <SelectTrigger className="w-full sm:w-[150px] text-xs h-8">
-                                    <SelectValue placeholder="Status" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    {taskStatuses.map(sVal => (
-                                      <SelectItem key={sVal} value={sVal} className="text-xs">{sVal}</SelectItem>
-                                    ))}
-                                  </SelectContent>
+                              <div className="flex flex-col sm:flex-row items-end sm:items-center gap-1 shrink-0">
+                                <Select value={task.status} disabled={!canEditTaskStatus || isUpdateTaskStatusPending} onValueChange={(newStatus) => handleTaskStatusChange(task.uuid, newStatus as TaskStatus)}>
+                                  <SelectTrigger className="w-full sm:w-[150px] text-xs h-8"><SelectValue /></SelectTrigger>
+                                  <SelectContent>{taskStatuses.map(sVal => (<SelectItem key={sVal} value={sVal} className="text-xs">{sVal}</SelectItem>))}</SelectContent>
                                 </Select>
                                 {canCreateUpdateDeleteTasks && (
                                     <div className="flex mt-1 sm:mt-0">
-                                        <Button variant="ghost" size="icon" className="h-8 w-8" title="Manage Sub-tasks" onClick={() => openManageSubtasksDialog(task)}>
-                                            <ListChecks className="h-4 w-4" />
-                                            <span className="sr-only">Manage Sub-tasks</span>
-                                        </Button>
-                                        <Button variant="ghost" size="icon" className="h-8 w-8" title={task.isPinned ? "Unpin Task" : "Pin Task"} onClick={() => handleToggleTaskPin(task.uuid, task.isPinned || false)} disabled={isToggleTaskPinPending && taskToEdit?.uuid === task.uuid}>
-                                            {isToggleTaskPinPending && taskToEdit?.uuid === task.uuid ? <Loader2 className="h-4 w-4 animate-spin"/> : task.isPinned ? <PinOff className="h-4 w-4 text-primary" /> : <Pin className="h-4 w-4" />}
-                                        </Button>
-                                        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEditTaskDialog(task)}>
-                                            <Edit3 className="h-4 w-4" />
-                                            <span className="sr-only">Edit Task</span>
-                                        </Button>
-                                        <AlertDialog>
-                                            <AlertDialogTrigger asChild>
-                                                <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => setTaskToDelete(task)}>
-                                                    <Trash2 className="h-4 w-4" />
-                                                    <span className="sr-only">Delete Task</span>
-                                                </Button>
-                                            </AlertDialogTrigger>
-                                            {taskToDelete?.uuid === task.uuid && (
-                                            <AlertDialogContent>
-                                                <AlertDialogHeader>
-                                                    <AlertDialogTitle>Are you sure you want to delete this task?</AlertDialogTitle>
-                                                    <AlertDialogDescription>
-                                                        Task: "{taskToDelete.title}". This action cannot be undone.
-                                                    </AlertDialogDescription>
-                                                </AlertDialogHeader>
-                                                <AlertDialogFooter>
-                                                    <AlertDialogCancel onClick={() => setTaskToDelete(null)}>Cancel</AlertDialogCancel>
-                                                    <AlertDialogAction onClick={handleDeleteTaskConfirm} disabled={isDeleteTaskPending}>
-                                                        {isDeleteTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Delete
-                                                    </AlertDialogAction>
-                                                </AlertDialogFooter>
-                                            </AlertDialogContent>
-                                            )}
+                                        <Button variant="ghost" size="icon" className="h-8 w-8" title="Sub-tasks" onClick={() => openManageSubtasksDialog(task)}><ListChecks className="h-4 w-4" /></Button>
+                                        <Button variant="ghost" size="icon" className="h-8 w-8" title={task.isPinned ? "Unpin" : "Pin"} onClick={() => handleToggleTaskPin(task.uuid, task.isPinned || false)} disabled={isToggleTaskPinPending && taskToEdit?.uuid === task.uuid}> {isToggleTaskPinPending && taskToEdit?.uuid === task.uuid ? <Loader2 className="h-4 w-4 animate-spin"/> : task.isPinned ? <PinOff className="h-4 w-4 text-primary" /> : <Pin className="h-4 w-4" />} </Button>
+                                        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEditTaskDialog(task)}><Edit3 className="h-4 w-4" /></Button>
+                                        <AlertDialog><AlertDialogTrigger asChild><Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => setTaskToDelete(task)}><Trash2 className="h-4 w-4" /></Button></AlertDialogTrigger>
+                                            {taskToDelete?.uuid === task.uuid && (<AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Delete task "{taskToDelete.title}"?</AlertDialogTitle><AlertDialogDescription>This cannot be undone.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel onClick={() => setTaskToDelete(null)}>Cancel</AlertDialogCancel><AlertDialogAction onClick={handleDeleteTaskConfirm} disabled={isDeleteTaskPending}>{isDeleteTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}Delete</AlertDialogAction></AlertDialogFooter></AlertDialogContent>)}
                                         </AlertDialog>
                                     </div>
                                 )}
@@ -1328,185 +746,84 @@ export default function ProjectDetailPage() {
                 ))
               )}
             </CardContent>
+            <Dialog open={isEditTaskDialogOpen} onOpenChange={(isOpen) => { setIsEditTaskDialogOpen(isOpen); if (!isOpen) { setTaskToEdit(null); setTagSuggestions([]); setShowTagSuggestions(false); setActiveTagInputName(null); setActiveSuggestionIndex(-1); taskForm.clearErrors(); taskForm.reset({ title: '', description: '', status: 'To Do', assigneeUuid: UNASSIGNED_VALUE, tagsString: '' });} }}>
+                  <DialogContent className="sm:max-w-[525px]">
+                      <DialogHeader><DialogTitle>Edit Task: {taskToEdit?.title}</DialogTitle><DialogDescription>Update task details.</DialogDescription></DialogHeader>
+                      {taskToEdit && ( <Form {...taskForm}> <form onSubmit={taskForm.handleSubmit(handleEditTaskSubmit)} className="space-y-4">
+                                  <FormField control={taskForm.control} name="title" render={({ field }) => ( <FormItem> <FormLabel>Title</FormLabel> <FormControl><Input {...field} /></FormControl> <FormMessage /> </FormItem> )}/>
+                                  <FormField control={taskForm.control} name="description" render={({ field }) => ( <FormItem> <FormLabel>Description</FormLabel> <FormControl><Textarea {...field} rows={3} /></FormControl> <FormMessage /> </FormItem> )}/>
+                                  <FormField control={taskForm.control} name="status" render={({ field }) => ( <FormItem> <FormLabel>Status</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value}> <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl> <SelectContent> {taskStatuses.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
+                                  <FormField control={taskForm.control} name="assigneeUuid" render={({ field }) => ( <FormItem> <FormLabel>Assign To</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value || UNASSIGNED_VALUE}> <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl> <SelectContent> <SelectItem value={UNASSIGNED_VALUE}>Unassigned</SelectItem> {projectMembersForTasks.map(member => ( <SelectItem key={member.userUuid} value={member.userUuid}>{member.user?.name}</SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
+                                  <Controller control={taskForm.control} name="tagsString" render={({ field, fieldState }) => (
+                                      <FormItem> <FormLabel>Tags</FormLabel>
+                                          <Popover open={showTagSuggestions && activeTagInputName === 'tagsString'} onOpenChange={(open) => { if(!open && document.activeElement !== tagInputRef.current) setShowTagSuggestions(false); }}>
+                                            <PopoverAnchor><FormControl>
+                                              <Input {...field} ref={tagInputRef} placeholder="e.g. frontend, bug"
+                                                  onFocus={() => {setActiveTagInputName('tagsString'); if(getCurrentTagFragment(field.value || "")) handleTagsStringInputChange({currentTarget: {value: field.value || ''}} as any, field);}}
+                                                  onChange={(e) => handleTagsStringInputChange(e, field)}
+                                                  onKeyDown={(e) => handleTagInputKeyDown(e, field)}
+                                                  onBlur={() => setTimeout(() => { if (document.activeElement !== tagInputRef.current && !document.querySelector('[data-radix-popper-content-wrapper]:hover')) setShowTagSuggestions(false);}, 150)} />
+                                            </FormControl></PopoverAnchor>
+                                            {showTagSuggestions && tagSuggestions.length > 0 && (
+                                            <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()}>
+                                              <Command shouldFilter={false}><CommandList><CommandEmpty>No tags found.</CommandEmpty><CommandGroup>
+                                                  {tagSuggestions.map((suggestion, index) => (
+                                                  <CommandItem key={suggestion.uuid} value={suggestion.name} onSelect={() => handleTagSuggestionClick(suggestion, field)} className={cn("cursor-pointer", index === activeSuggestionIndex && "bg-accent text-accent-foreground")}>
+                                                      {suggestion.name}
+                                                  </CommandItem>))}
+                                              </CommandGroup></CommandList></Command>
+                                            </PopoverContent>)}
+                                          </Popover><FormMessage />
+                                      </FormItem>)}/>
+                                  <DialogFooter><DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose><Button type="submit" disabled={isUpdateTaskPending}> {isUpdateTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Save Changes </Button></DialogFooter>
+                      </form></Form>)}
+                  </DialogContent>
+            </Dialog>
+            <Dialog open={isManageSubtasksDialogOpen} onOpenChange={(isOpen) => { setIsManageSubtasksDialogOpen(isOpen); if(!isOpen) setTaskToManageSubtasks(null); }}>
+                  <DialogContent className="sm:max-w-[525px]">
+                    <DialogHeader><DialogTitle>Sub-tasks for: {taskToManageSubtasks?.title}</DialogTitle><DialogDescription>Enter one per line. `* item` for open, `** item` for completed.</DialogDescription></DialogHeader>
+                    <Textarea placeholder="* Sub-task 1..." value={subtaskInput} onChange={(e) => setSubtaskInput(e.target.value)} rows={8} className="font-mono text-sm"/>
+                    <DialogFooter><DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose><Button type="button" onClick={handleSaveSubtasks} disabled={isUpdateTaskPending}>{isUpdateTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}Save Sub-tasks</Button></DialogFooter>
+                  </DialogContent>
+            </Dialog>
           </Card>
         </TabsContent>
 
-        {/* Main Edit Task Dialog */}
-        <Dialog open={isEditTaskDialogOpen} onOpenChange={(isOpen) => { setIsEditTaskDialogOpen(isOpen); if (!isOpen) { setTaskToEdit(null); setTagSuggestions([]); setShowTagSuggestions(false); setActiveTagInputName(null); setActiveSuggestionIndex(-1); } }}>
-            <DialogContent className="sm:max-w-[525px]">
-                <DialogHeader>
-                    <DialogTitle>Edit Task: {taskToEdit?.title}</DialogTitle>
-                    <DialogDescription>Update the main details for this task. Sub-tasks are managed separately.</DialogDescription>
-                </DialogHeader>
-                {taskToEdit && (
-                    <Form {...taskForm}>
-                        <form onSubmit={taskForm.handleSubmit(handleEditTaskSubmit)} className="space-y-4">
-                            <FormField control={taskForm.control} name="title" render={({ field }) => ( <FormItem> <FormLabel>Title</FormLabel> <FormControl><Input {...field} /></FormControl> <FormMessage /> </FormItem> )}/>
-                            <FormField control={taskForm.control} name="description" render={({ field }) => ( <FormItem> <FormLabel>Description (Optional, Markdown supported)</FormLabel> <FormControl><Textarea {...field} rows={3} /></FormControl> <FormMessage /> </FormItem> )}/>
-                            <FormField control={taskForm.control} name="status" render={({ field }) => ( <FormItem> <FormLabel>Status</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value}> <FormControl><SelectTrigger><SelectValue placeholder="Select status" /></SelectTrigger></FormControl> <SelectContent> {taskStatuses.map(s => <SelectItem key={s} value={s}>{s}</SelectItem>)} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
-                            <FormField control={taskForm.control} name="assigneeUuid" render={({ field }) => ( <FormItem> <FormLabel>Assign To (Optional)</FormLabel> <Select onValueChange={field.onChange} defaultValue={field.value || UNASSIGNED_VALUE}> <FormControl><SelectTrigger><SelectValue placeholder="Select assignee" /></SelectTrigger></FormControl> <SelectContent> <SelectItem value={UNASSIGNED_VALUE}>Unassigned / Everyone</SelectItem> {projectMembers.map(member => ( <SelectItem key={member.userUuid} value={member.userUuid}>{member.user?.name}</SelectItem> ))} </SelectContent> </Select> <FormMessage /> </FormItem> )}/>
-                            <Controller
-                                control={taskForm.control}
-                                name="tagsString"
-                                render={({ field }) => (
-                                <FormItem>
-                                    <FormLabel>Tags (comma-separated)</FormLabel>
-                                     <Popover open={showTagSuggestions && activeTagInputName === 'tagsString'} 
-                                              onOpenChange={(open) => { 
-                                                if(!open && document.activeElement !== tagInputRef.current) { 
-                                                    setShowTagSuggestions(false); 
-                                                }
-                                            }}
-                                     >
-                                      <PopoverAnchor>
-                                        <FormControl>
-                                        <Input
-                                            {...field}
-                                            ref={tagInputRef}
-                                            placeholder="e.g. frontend, bug, urgent"
-                                            onFocus={() => {
-                                                setActiveTagInputName('tagsString');
-                                                const fragment = getCurrentTagFragment(field.value || "");
-                                                if (fragment) handleTagsStringInputChange({ currentTarget: { value: field.value } } as React.ChangeEvent<HTMLInputElement>, field, taskForm);
-                                            }}
-                                            onChange={(e) => handleTagsStringInputChange(e, field, taskForm)}
-                                            onKeyDown={(e) => handleTagInputKeyDown(e, field, taskForm)}
-                                            onBlur={() => setTimeout(() => { 
-                                                if (document.activeElement !== tagInputRef.current && !document.querySelector('[data-radix-popper-content-wrapper]:hover')) {
-                                                    setShowTagSuggestions(false); 
-                                                }
-                                            }, 150)}
-                                        />
-                                        </FormControl>
-                                      </PopoverAnchor>
-                                      {showTagSuggestions && tagSuggestions.length > 0 && (
-                                      <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()}>
-                                        <Command shouldFilter={false}> 
-                                            <CommandList>
-                                            <CommandEmpty>No matching tags found.</CommandEmpty>
-                                            <CommandGroup>
-                                                {tagSuggestions.map((suggestion, index) => (
-                                                <CommandItem
-                                                    key={suggestion.uuid}
-                                                    value={suggestion.name}
-                                                    onSelect={() => {
-                                                        handleTagSuggestionClick(suggestion, field, taskForm);
-                                                    }}
-                                                     className={cn("cursor-pointer", index === activeSuggestionIndex && "bg-accent text-accent-foreground")}
-                                                >
-                                                    {suggestion.name}
-                                                </CommandItem>
-                                                ))}
-                                            </CommandGroup>
-                                            </CommandList>
-                                        </Command>
-                                      </PopoverContent>
-                                      )}
-                                    </Popover>
-                                    <FormMessage />
-                                </FormItem>
-                                )}
-                            />
-                            {updateTaskState?.error && !updateTaskState.fieldErrors && <p className="text-sm text-destructive">{updateTaskState.error}</p>}
-                            {updateTaskState?.fieldErrors && Object.entries(updateTaskState.fieldErrors).map(([key, value]) => value && <p key={key} className="text-sm text-destructive">{`${key.charAt(0).toUpperCase() + key.slice(1)}: ${value.join(', ')}`}</p>)}
-                            <DialogFooter>
-                                <DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose>
-                                <Button type="submit" disabled={isUpdateTaskPending}> {isUpdateTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Save Changes </Button>
-                            </DialogFooter>
-                        </form>
-                    </Form>
-                )}
-            </DialogContent>
-        </Dialog>
-
-        {/* Manage Subtasks Dialog */}
-        <Dialog open={isManageSubtasksDialogOpen} onOpenChange={(isOpen) => { setIsManageSubtasksDialogOpen(isOpen); if(!isOpen) setTaskToManageSubtasks(null); }}>
-            <DialogContent className="sm:max-w-[525px]">
-              <DialogHeader>
-                <DialogTitle>Manage Sub-tasks for: {taskToManageSubtasks?.title}</DialogTitle>
-                <DialogDescription>
-                  Enter sub-tasks one per line.
-                  Start with `* ` for an open task (e.g., `* Design mockups`).
-                  Start with `** ` for a completed task (e.g., `** Create schema`).
-                  Other lines will be treated as new open tasks.
-                </DialogDescription>
-              </DialogHeader>
-              <Textarea
-                placeholder="* Sub-task 1&#x0a;** Sub-task 2 (completed)&#x0a;Another sub-task"
-                value={subtaskInput}
-                onChange={(e) => setSubtaskInput(e.target.value)}
-                rows={8}
-                className="font-mono text-sm"
-              />
-              {updateTaskState?.fieldErrors?.todoListMarkdown && <p className="text-sm text-destructive">Sub-tasks: {updateTaskState.fieldErrors.todoListMarkdown.join(', ')}</p>}
-              <DialogFooter>
-                <DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose>
-                <Button type="button" onClick={handleSaveSubtasks} disabled={isUpdateTaskPending}>
-                  {isUpdateTaskPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                  Save Sub-tasks
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-        </Dialog>
-
-
         <TabsContent value="readme" className="mt-4">
           <Card>
             <CardHeader className="flex flex-row justify-between items-center">
-              <div>
-                <CardTitle>Project README</CardTitle>
-                <CardDescription>
-                  Provide a general overview, setup instructions, or any other important information about this project. Supports Markdown.
-                </CardDescription>
-              </div>
-               <Button onClick={handleSaveReadme} disabled={isSaveReadmePending || !canCreateUpdateDeleteTasks}>
-                {isSaveReadmePending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Save README
-              </Button>
+              <div><CardTitle>Project README</CardTitle><CardDescription>Overview, setup instructions, or other important project information. Supports Markdown.</CardDescription></div>
+              <Button onClick={handleSaveReadme} disabled={isSaveReadmePending || !canEditReadme}>{isSaveReadmePending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Save README</Button>
             </CardHeader>
             <CardContent>
-              <div className="prose dark:prose-invert max-w-none p-4 border rounded-md mb-4 min-h-[100px] bg-background/30">
-                <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                  {projectReadmeContent || ''}
-                </ReactMarkdown>
+              {canEditReadme ? (
+                <Textarea placeholder="Write your project README here using Markdown..." value={projectReadmeContent} onChange={(e) => setProjectReadmeContent(e.target.value)} rows={20} className="font-mono mb-4"/>
+              ) : (
+                <div className="prose dark:prose-invert max-w-none p-4 border rounded-md mb-4 min-h-[100px] bg-background/30">
+                  <p className="italic text-muted-foreground">README content is not editable with your current role.</p>
+                </div>
+              )}
+              <Label className="text-lg block mb-2 font-semibold">Preview</Label>
+              <div className="prose dark:prose-invert max-w-none p-4 border rounded-md min-h-[200px] bg-muted/30">
+                <ReactMarkdown remarkPlugins={[remarkGfm]}>{projectReadmeContent || '*Nothing to preview yet.*'}</ReactMarkdown>
               </div>
-              <Textarea
-                placeholder="Write your project README here using Markdown..."
-                value={projectReadmeContent}
-                onChange={(e) => setProjectReadmeContent(e.target.value)}
-                rows={15}
-                className="font-mono"
-                disabled={!canCreateUpdateDeleteTasks}
-              />
               {saveReadmeState?.error && <p className="text-sm text-destructive mt-2">{saveReadmeState.error}</p>}
             </CardContent>
           </Card>
         </TabsContent>
 
-
         <TabsContent value="documents" className="mt-4">
-          <Card>
+           <Card>
             <CardHeader className="flex flex-row justify-between items-center">
               <CardTitle>Documents ({projectDocuments.length})</CardTitle>
-               {canManageDocuments && (
-                <Button size="sm" asChild>
-                  <Link href={`/projects/${projectUuid}/documents/new`}>
-                    <PlusCircle className="mr-2 h-4 w-4"/> Add Document
-                  </Link>
-                </Button>
-              )}
+              {canManageDocuments && (<Button size="sm" asChild><Link href={`/projects/${projectUuid}/documents/new`}><PlusCircle className="mr-2 h-4 w-4"/> Add Document</Link></Button>)}
             </CardHeader>
             <CardContent>
-              {projectDocuments.length === 0 ? (
-                 <div className="text-center py-12 text-muted-foreground">
-                    <FileText className="mx-auto h-12 w-12 mb-4" />
-                    <p>No documents in this project yet.</p>
-                    {canManageDocuments && 
-                        <Button size="sm" className="mt-4" asChild>
-                           <Link href={`/projects/${projectUuid}/documents/new`}>
-                            <PlusCircle className="mr-2 h-4 w-4"/> Add your first document
-                          </Link>
-                        </Button>
-                    }
+              {isLoadingDocuments ? (<div className="flex justify-center items-center py-12"><Loader2 className="h-8 w-8 animate-spin text-primary"/></div>
+              ) : projectDocuments.length === 0 ? (
+                <div className="text-center py-12 text-muted-foreground">
+                    <FileText className="mx-auto h-12 w-12 mb-4" /> <p>No documents in this project yet.</p>
+                    {canManageDocuments && <Button size="sm" className="mt-4" asChild><Link href={`/projects/${projectUuid}/documents/new`}><PlusCircle className="mr-2 h-4 w-4"/> Add your first document</Link></Button>}
                 </div>
               ) : (
                 <div className="space-y-3">
@@ -1516,49 +833,24 @@ export default function ProjectDetailPage() {
                         <div className="flex-grow">
                           <div className="flex items-center gap-2">
                             <FileText className="h-5 w-5 text-primary flex-shrink-0" />
-                            <h4 className="font-semibold cursor-pointer hover:underline" onClick={() => openViewDocumentDialog(doc)}>
-                              {doc.title}
-                            </h4>
+                            <h4 className="font-semibold cursor-pointer hover:underline" onClick={() => openViewDocumentDialog(doc)}>{doc.title}</h4>
                             <Badge variant="outline" className="text-xs capitalize">{doc.fileType}</Badge>
                           </div>
-                          <p className="text-xs text-muted-foreground mt-0.5">
-                            Created: {new Date(doc.createdAt).toLocaleDateString()} | Updated: {new Date(doc.updatedAt).toLocaleDateString()}
-                          </p>
+                          <p className="text-xs text-muted-foreground mt-0.5">Created: {new Date(doc.createdAt).toLocaleDateString()} | Updated: {new Date(doc.updatedAt).toLocaleDateString()}</p>
                         </div>
                         <div className="flex gap-1.5 flex-shrink-0 self-end sm:self-center">
-                           {canManageDocuments && (doc.fileType === 'markdown') && (
-                            <Button variant="ghost" size="icon" className="h-8 w-8" title="Edit Document" asChild>
-                              <Link href={`/projects/${projectUuid}/documents/${doc.uuid}/edit`}>
-                                <Edit3 className="h-4 w-4" />
-                              </Link>
-                            </Button>
+                          {canManageDocuments && (doc.fileType === 'markdown') && (<Button variant="ghost" size="icon" className="h-8 w-8" title="Edit Document" asChild><Link href={`/projects/${projectUuid}/documents/${doc.uuid}/edit`}><Edit3 className="h-4 w-4" /></Link></Button>)}
+                          {canManageDocuments && (
+                            <AlertDialog><AlertDialogTrigger asChild>
+                                <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10" title="Delete Document" onClick={() => setDocumentToDelete(doc)}><Trash2 className="h-4 w-4" /></Button>
+                            </AlertDialogTrigger>
+                            {documentToDelete?.uuid === doc.uuid && (
+                            <AlertDialogContent>
+                                <AlertDialogHeader><AlertDialogTitle>Delete Document: "{documentToDelete.title}"?</AlertDialogTitle><AlertDialogDescription>This action cannot be undone.</AlertDialogDescription></AlertDialogHeader>
+                                <AlertDialogFooter><AlertDialogCancel onClick={() => setDocumentToDelete(null)}>Cancel</AlertDialogCancel><AlertDialogAction onClick={handleDeleteDocumentConfirm} disabled={isDeleteDocumentPending}>{isDeleteDocumentPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Delete</AlertDialogAction></AlertDialogFooter>
+                            </AlertDialogContent>)}</AlertDialog>
                           )}
-                           {canManageDocuments && (
-                            <AlertDialog>
-                                <AlertDialogTrigger asChild>
-                                    <Button variant="ghost" size="icon" className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10" title="Delete Document" onClick={() => setDocumentToDelete(doc)}>
-                                      <Trash2 className="h-4 w-4" />
-                                    </Button>
-                                </AlertDialogTrigger>
-                                {documentToDelete?.uuid === doc.uuid && (
-                                <AlertDialogContent>
-                                    <AlertDialogHeader>
-                                        <AlertDialogTitle>Delete Document: "{documentToDelete.title}"?</AlertDialogTitle>
-                                        <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-                                    </AlertDialogHeader>
-                                    <AlertDialogFooter>
-                                        <AlertDialogCancel onClick={() => setDocumentToDelete(null)}>Cancel</AlertDialogCancel>
-                                        <AlertDialogAction onClick={handleDeleteDocumentConfirm} disabled={isDeleteDocumentPending}>
-                                            {isDeleteDocumentPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Delete
-                                        </AlertDialogAction>
-                                    </AlertDialogFooter>
-                                </AlertDialogContent>
-                                )}
-                            </AlertDialog>
-                          )}
-                          <Button variant="outline" size="sm" className="h-8 px-3" onClick={() => openViewDocumentDialog(doc)}>
-                            View
-                          </Button>
+                          <Button variant="outline" size="sm" className="h-8 px-3" onClick={() => openViewDocumentDialog(doc)}>View</Button>
                         </div>
                       </div>
                     </Card>
@@ -1567,192 +859,91 @@ export default function ProjectDetailPage() {
               )}
             </CardContent>
           </Card>
-        </TabsContent>
-
-        {/* View Document Dialog */}
-        <Dialog open={isViewDocumentDialogOpen} onOpenChange={setIsViewDocumentDialogOpen}>
+          <Dialog open={isViewDocumentDialogOpen} onOpenChange={setIsViewDocumentDialogOpen}>
             <DialogContent className="sm:max-w-3xl max-h-[80vh] flex flex-col">
                 <DialogHeader>
                     <DialogTitle>{documentToView?.title}</DialogTitle>
                     <DialogDescription>Type: <Badge variant="outline" className="capitalize text-xs">{documentToView?.fileType}</Badge> | Last updated: {documentToView ? new Date(documentToView.updatedAt).toLocaleString() : 'N/A'}</DialogDescription>
                 </DialogHeader>
                 <div className="flex-grow overflow-y-auto pr-2">
-                    {documentToView?.fileType === 'markdown' && (
-                        <div className="prose dark:prose-invert max-w-none">
-                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{documentToView?.content || ''}</ReactMarkdown>
-                        </div>
-                    )}
-                    {(documentToView?.fileType === 'txt' || documentToView?.fileType === 'html') && (
-                         <pre className="whitespace-pre-wrap text-sm bg-muted p-4 rounded-md">{documentToView?.content || 'No content.'}</pre>
-                    )}
+                    {documentToView?.fileType === 'markdown' && (<div className="prose dark:prose-invert max-w-none"><ReactMarkdown remarkPlugins={[remarkGfm]}>{documentToView?.content || ''}</ReactMarkdown></div>)}
+                    {(documentToView?.fileType === 'txt' || documentToView?.fileType === 'html') && (<pre className="whitespace-pre-wrap text-sm bg-muted p-4 rounded-md">{documentToView?.content || 'No content.'}</pre>)}
                     {documentToView?.fileType === 'pdf' && (
                         <div className="text-center p-6">
-                            <ExternalLink className="h-10 w-10 mx-auto text-primary mb-3" />
-                            <p>This is a PDF document named: <strong>{documentToView?.filePath || documentToView?.title}</strong>.</p>
-                            <Button asChild className="mt-3">
-                                <a href={documentToView?.filePath || "#"} target="_blank" rel="noopener noreferrer" download={documentToView?.filePath || documentToView?.title}>
-                                    Download/Open PDF (Simulated)
-                                </a>
-                            </Button>
-                             <p className="text-xs text-muted-foreground mt-2">(Actual file download/storage not implemented in this prototype)</p>
+                            <ExternalLink className="h-10 w-10 mx-auto text-primary mb-3" /> <p>This is a PDF document named: <strong>{documentToView?.filePath || documentToView?.title}</strong>.</p>
+                            <Button asChild className="mt-3"><a href={documentToView?.filePath || "#"} target="_blank" rel="noopener noreferrer" download={documentToView?.filePath || documentToView?.title}>Download/Open PDF (Simulated)</a></Button>
+                            <p className="text-xs text-muted-foreground mt-2">(Actual file download/storage not implemented in this prototype)</p>
                         </div>
                     )}
-                    {documentToView?.fileType === 'other' && (
-                         <p className="text-muted-foreground">Cannot display this file type directly. File name: {documentToView?.filePath || documentToView?.title}</p>
-                    )}
+                    {documentToView?.fileType === 'other' && (<p className="text-muted-foreground">Cannot display this file type directly. File name: {documentToView?.filePath || documentToView?.title}</p>)}
                 </div>
-                <DialogFooter>
-                    <DialogClose asChild><Button variant="outline">Close</Button></DialogClose>
-                </DialogFooter>
+                <DialogFooter><DialogClose asChild><Button variant="outline">Close</Button></DialogClose></DialogFooter>
             </DialogContent>
-        </Dialog>
-
+          </Dialog>
+        </TabsContent>
 
         <TabsContent value="announcements" className="mt-4">
           <Card>
             <CardHeader className="flex flex-row justify-between items-center">
-              <CardTitle>Announcements ({projectAnnouncements.length})</CardTitle>
-              {canManageProjectSettings && <Button size="sm" onClick={() => {}} ><PlusCircle className="mr-2 h-4 w-4"/> New Announcement</Button>}
+              <CardTitle>Project Announcements ({projectAnnouncementsMock.length})</CardTitle>
+              {(currentUserRole === 'owner' || currentUserRole === 'co-owner') && ( <Button size="sm" onClick={() => { toast({title: "Coming Soon!", description: "Creating project-specific announcements will be available in a future update."}) }}><PlusCircle className="mr-2 h-4 w-4"/> New Project Announcement</Button>)}
             </CardHeader>
             <CardContent>
-              {projectAnnouncements.length > 0 ? projectAnnouncements.map((ann: any) => (
+              {projectAnnouncementsMock.length > 0 ? projectAnnouncementsMock.map((ann: any) => (
                 <Card key={ann.uuid} className="p-3 mb-3">
-                  <h4 className="font-semibold">{ann.title}</h4>
-                  <p className="text-sm text-muted-foreground">{ann.content}</p>
+                  <h4 className="font-semibold">{ann.title}</h4> <p className="text-sm text-muted-foreground">{ann.content}</p>
                   <p className="text-xs text-muted-foreground mt-1">By: {ann.authorUuid} on {new Date(ann.createdAt).toLocaleDateString()}</p>
                 </Card>
-              )) : <p className="text-muted-foreground text-center py-4">No announcements for this project yet.</p>}
+              )) : ( <div className="text-center py-12 text-muted-foreground"><Megaphone className="mx-auto h-12 w-12 mb-4" /><p>No announcements for this project yet.</p></div> )}
             </CardContent>
           </Card>
         </TabsContent>
 
         <TabsContent value="codespace" className="mt-4">
           <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center"><FolderGit2 className="mr-2 h-5 w-5 text-primary"/>CodeSpace</CardTitle>
-              <CardDescription>Manage your project's code snippets, scripts, and version control links.</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="text-center py-12 text-muted-foreground">
-                <Code2 className="mx-auto h-12 w-12 mb-4" />
-                <h3 className="text-lg font-medium">CodeSpace is Coming Soon!</h3>
-                <p className="mt-1 text-sm">
-                  This area will allow you to link to repositories, manage small scripts,
-                  and keep track of code-related assets for your project.
-                </p>
-              </div>
-            </CardContent>
+            <CardHeader><CardTitle className="flex items-center"><FolderGit2 className="mr-2 h-5 w-5 text-primary"/>CodeSpace for {project?.name}</CardTitle><CardDescription>Manage your project's code snippets, scripts, and version control links.</CardDescription></CardHeader>
+            <CardContent><div className="text-center py-12 text-muted-foreground"><Code2 className="mx-auto h-12 w-12 mb-4" /><h3 className="text-lg font-medium">CodeSpace is Coming Soon!</h3><p className="mt-1 text-sm">This area will allow you to link to repositories, manage small scripts, and keep track of code-related assets for your project.</p></div></CardContent>
           </Card>
         </TabsContent>
 
-         <TabsContent value="settings" className="mt-4">
+        <TabsContent value="settings" className="mt-4">
           <Card>
             <CardHeader className="flex flex-row justify-between items-center">
-                <CardTitle>Team & Project Settings</CardTitle>
+                <CardTitle>Team & Project Settings for {project?.name}</CardTitle>
                 {canManageProjectSettings && (
-                    <Dialog open={isInviteUserDialogOpen} onOpenChange={setIsInviteUserDialogOpen}>
-                        <DialogTrigger asChild>
-                            <Button size="sm" onClick={() => inviteForm.reset()}><Users className="mr-2 h-4 w-4"/>Invite Members</Button>
-                        </DialogTrigger>
+                    <Dialog open={isInviteUserDialogOpen} onOpenChange={(isOpen) => {setIsInviteUserDialogOpen(isOpen); if (!isOpen) inviteForm.reset();}}>
+                        <DialogTrigger asChild><Button size="sm" onClick={() => inviteForm.reset()}><Users className="mr-2 h-4 w-4"/>Invite Members</Button></DialogTrigger>
                         <DialogContent className="sm:max-w-[425px]">
-                            <DialogHeader>
-                                <DialogTitle>Invite New Member</DialogTitle>
-                                <DialogDescription>Enter the email of the user you want to invite and assign them a role.</DialogDescription>
-                            </DialogHeader>
+                            <DialogHeader><DialogTitle>Invite New Member</DialogTitle><DialogDescription>Enter email and assign a role.</DialogDescription></DialogHeader>
                             <Form {...inviteForm}>
                                 <form onSubmit={inviteForm.handleSubmit(handleInviteSubmit)} className="space-y-4">
-                                    <FormField
-                                        control={inviteForm.control}
-                                        name="emailToInvite"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>User Email</FormLabel>
-                                                <div className="relative">
-                                                    <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                                                    <FormControl>
-                                                        <Input placeholder="user@example.com" {...field} className="pl-10" />
-                                                    </FormControl>
-                                                </div>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-                                    <FormField
-                                        control={inviteForm.control}
-                                        name="roleToInvite"
-                                        render={({ field }) => (
-                                            <FormItem>
-                                                <FormLabel>Role</FormLabel>
-                                                <Select onValueChange={field.onChange} defaultValue={field.value}>
-                                                    <FormControl>
-                                                        <SelectTrigger>
-                                                            <SelectValue placeholder="Select a role" />
-                                                        </SelectTrigger>
-                                                    </FormControl>
-                                                    <SelectContent>
-                                                        {memberRoles.map(role => (
-                                                            <SelectItem key={role} value={role} className="capitalize">{role.charAt(0).toUpperCase() + role.slice(1)}</SelectItem>
-                                                        ))}
-                                                    </SelectContent>
-                                                </Select>
-                                                <FormMessage />
-                                            </FormItem>
-                                        )}
-                                    />
-                                    {inviteFormState?.fieldErrors?.projectUuid && <p className="text-sm text-destructive">{inviteFormState.fieldErrors.projectUuid.join(', ')}</p>}
-                                    {inviteFormState?.error && !inviteFormState.fieldErrors && <p className="text-sm text-destructive">{inviteFormState.error}</p>}
-                                    <DialogFooter>
-                                        <DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose>
-                                        <Button type="submit" disabled={isInvitePending}>
-                                            {isInvitePending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                                            Send Invitation
-                                        </Button>
-                                    </DialogFooter>
+                                    <FormField control={inviteForm.control} name="emailToInvite" render={({ field }) => ( <FormItem><FormLabel>User Email</FormLabel><div className="relative"><Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /><FormControl><Input placeholder="user@example.com" {...field} className="pl-10" /></FormControl></div><FormMessage /></FormItem> )}/>
+                                    <FormField control={inviteForm.control} name="roleToInvite" render={({ field }) => ( <FormItem><FormLabel>Role</FormLabel><Select onValueChange={field.onChange} defaultValue={field.value}><FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl><SelectContent>{memberRoles.map(role => (<SelectItem key={role} value={role} className="capitalize">{role.charAt(0).toUpperCase() + role.slice(1)}</SelectItem>))}</SelectContent></Select><FormMessage /></FormItem> )}/>
+                                    {inviteFormState?.error && <p className="text-sm text-destructive">{inviteFormState.error}</p>}
+                                    <DialogFooter><DialogClose asChild><Button type="button" variant="ghost">Cancel</Button></DialogClose><Button type="submit" disabled={isInvitePending}>{isInvitePending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}Send Invitation</Button></DialogFooter>
                                 </form>
                             </Form>
                         </DialogContent>
                     </Dialog>
                 )}
             </CardHeader>
-            <CardContent className="space-y-6">
+            <CardContent className="space-y-8 pt-6">
               <div>
-                <h4 className="font-semibold mb-2 text-lg">Current Members ({projectMembers.length})</h4>
-                 {projectMembers.length > 0 ? (
+                <h4 className="font-semibold mb-3 text-lg">Current Members ({projectMembersForSettings.length})</h4>
+                {projectMembersForSettings.length > 0 ? (
                     <div className="space-y-3">
-                        {projectMembers.map(member => (
+                        {projectMembersForSettings.map(member => (
                             <Card key={member.userUuid} className="p-3">
                                 <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
                                     <div className="flex items-center gap-3">
-                                        <Avatar className="h-10 w-10">
-                                            <AvatarImage src={member.user?.avatar} alt={member.user?.name} data-ai-hint="user avatar"/>
-                                            <AvatarFallback>{getInitials(member.user?.name)}</AvatarFallback>
-                                        </Avatar>
-                                        <div>
-                                            <p className="font-medium">{member.user?.name || 'Unknown User'}</p>
-                                            <p className="text-xs text-muted-foreground">{member.user?.email || 'No email'}</p>
-                                        </div>
+                                        <Avatar className="h-10 w-10"><AvatarImage src={member.user?.avatar || `https://placehold.co/40x40.png?text=${getInitials(member.user?.name)}`} alt={member.user?.name} data-ai-hint="user avatar"/><AvatarFallback>{getInitials(member.user?.name)}</AvatarFallback></Avatar>
+                                        <div><p className="font-medium">{member.user?.name || 'Unknown'}</p><p className="text-xs text-muted-foreground">{member.user?.email || 'No email'}</p></div>
                                     </div>
                                     <div className="flex items-center gap-2 mt-2 sm:mt-0">
                                         <Badge variant={member.role === 'owner' ? 'default' : 'secondary'} className="capitalize">{member.role}</Badge>
                                         {canManageProjectSettings && member.role !== 'owner' && (
-                                            <AlertDialog>
-                                                <AlertDialogTrigger asChild>
-                                                    <Button variant="ghost" size="icon" className="text-destructive hover:text-destructive hover:bg-destructive/10" title="Remove User">
-                                                        <UserX className="h-4 w-4" />
-                                                    </Button>
-                                                </AlertDialogTrigger>
-                                                <AlertDialogContent>
-                                                    <AlertDialogHeader>
-                                                        <AlertDialogTitle>Remove Member</AlertDialogTitle>
-                                                        <AlertDialogDescription>
-                                                            Are you sure you want to remove {member.user?.name || 'this user'} from the project?
-                                                        </AlertDialogDescription>
-                                                    </AlertDialogHeader>
-                                                    <AlertDialogFooter>
-                                                        <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                                        <Button variant="destructive" onClick={() => handleRemoveMember(member.userUuid)}>Remove</Button>
-                                                    </AlertDialogFooter>
-                                                </AlertDialogContent>
+                                            <AlertDialog><AlertDialogTrigger asChild><Button variant="ghost" size="icon" className="text-destructive hover:text-destructive hover:bg-destructive/10" title="Remove User"><UserX className="h-4 w-4" /></Button></AlertDialogTrigger>
+                                                <AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Remove {member.user?.name}?</AlertDialogTitle><AlertDialogDescription>This will remove their access to the project.</AlertDialogDescription></AlertDialogHeader><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><Button variant="destructive" onClick={() => handleRemoveMember(member.userUuid)}>Remove</Button></AlertDialogFooter></AlertDialogContent>
                                             </AlertDialog>
                                         )}
                                     </div>
@@ -1760,129 +951,58 @@ export default function ProjectDetailPage() {
                             </Card>
                         ))}
                     </div>
-                ) : (
-                    <p className="text-muted-foreground">No members in this project yet (besides the owner).</p>
-                )}
+                ) : ( <p className="text-muted-foreground">No members (besides owner).</p> )}
               </div>
-
-              <div className="space-y-3">
+              <div className="space-y-4">
                 <h4 className="font-semibold text-lg">Project Attributes</h4>
                 <div className="flex items-center justify-between p-3 bg-muted/30 rounded-md">
-                    <Label htmlFor="project-urgency" className="flex flex-col">
-                        <span>Mark as Urgent</span>
-                        <span className="text-xs font-normal text-muted-foreground">Highlights the project across the platform.</span>
-                    </Label>
-                    <Switch
-                        id="project-urgency"
-                        checked={project?.isUrgent || false}
-                        onCheckedChange={handleToggleUrgency}
-                        disabled={!canManageProjectSettings || isToggleUrgencyPending}
-                    />
+                    <Label htmlFor="project-urgency" className="flex flex-col"><span className="font-medium">Mark as Urgent</span><span className="text-xs font-normal text-muted-foreground">Highlights the project.</span></Label>
+                    <Switch id="project-urgency" checked={project?.isUrgent || false} onCheckedChange={handleToggleUrgency} disabled={!canManageProjectSettings || isToggleUrgencyPending}/>
                 </div>
                 {toggleUrgencyState?.error && <p className="text-sm text-destructive">{toggleUrgencyState.error}</p>}
-
                 <div className="flex items-center justify-between p-3 bg-muted/30 rounded-md">
-                     <Label htmlFor="project-visibility" className="flex flex-col">
-                        <span>Private Project</span>
-                        <span className="text-xs font-normal text-muted-foreground">If unchecked, project becomes public. Only owners/admins can change project visibility.</span>
-                    </Label>
-                    <Switch
-                        id="project-visibility"
-                        checked={project?.isPrivate === undefined ? true : project.isPrivate}
-                        onCheckedChange={handleToggleVisibility}
-                        disabled={!isAdminOrOwner || isToggleVisibilityPending}
-                    />
+                    <Label htmlFor="project-visibility" className="flex flex-col"><span className="font-medium">Private Project</span><span className="text-xs font-normal text-muted-foreground">Only owners/admins can change visibility.</span></Label>
+                    <Switch id="project-visibility" checked={project?.isPrivate === undefined ? true : project.isPrivate} onCheckedChange={handleToggleVisibility} disabled={!isProjectOwner && !isAdminUser || isToggleVisibilityPending}/>
                 </div>
-                 {toggleVisibilityState?.error && <p className="text-sm text-destructive">{toggleVisibilityState.error}</p>}
+                {toggleVisibilityState?.error && <p className="text-sm text-destructive">{toggleVisibilityState.error}</p>}
               </div>
-
               <div>
-                <div className="flex justify-between items-center mb-2">
-                    <h4 className="font-semibold text-lg">Project Tags</h4>
+                <div className="flex justify-between items-center mb-3">
+                    <h4 className="font-semibold text-lg">Project Tags Management</h4>
                     {canManageProjectSettings && (
-                        <Dialog open={isAddProjectTagDialogOpen} onOpenChange={setIsAddProjectTagDialogOpen}>
-                            <DialogTrigger asChild>
-                                <Button size="sm" onClick={() => projectTagForm.reset({ tagName: '', tagColor: '#6B7280' })}><TagIcon className="mr-2 h-4 w-4"/>Add Project Tag</Button>
-                            </DialogTrigger>
+                        <Dialog open={isAddProjectTagDialogOpen} onOpenChange={(isOpen) => {setIsAddProjectTagDialogOpen(isOpen); if(!isOpen) projectTagForm.reset({ tagName: '', tagColor: '#6B7280' });}}>
+                            <DialogTrigger asChild><Button size="sm" onClick={() => projectTagForm.reset({ tagName: '', tagColor: '#6B7280' })}><TagIcon className="mr-2 h-4 w-4"/>Add Project Tag</Button></DialogTrigger>
                             <DialogContent>
-                                <DialogHeader>
-                                    <DialogTitle>Add New Project Tag</DialogTitle>
-                                    <DialogDescription>Create a new tag with a specific color for this project.</DialogDescription>
-                                </DialogHeader>
+                                <DialogHeader><DialogTitle>Add New Project Tag</DialogTitle><DialogDescription>Create a custom tag for this project.</DialogDescription></DialogHeader>
                                 <Form {...projectTagForm}>
                                     <form onSubmit={projectTagForm.handleSubmit(handleCreateProjectTagSubmit)} className="space-y-4">
-                                        <FormField
-                                            control={projectTagForm.control}
-                                            name="tagName"
-                                            render={({ field }) => (
-                                                <FormItem>
-                                                    <FormLabel>Tag Name</FormLabel>
-                                                    <FormControl><Input {...field} placeholder="e.g., Backend" /></FormControl>
-                                                    <FormMessage />
-                                                </FormItem>
-                                            )}
-                                        />
-                                        <FormField
-                                            control={projectTagForm.control}
-                                            name="tagColor"
-                                            render={({ field }) => (
-                                                <FormItem>
-                                                    <FormLabel>Tag Color</FormLabel>
-                                                    <div className="flex items-center gap-2">
-                                                        <FormControl><Input type="color" {...field} className="p-1 h-10 w-14 block" /></FormControl>
-                                                        <Input type="text" {...field} placeholder="#RRGGBB" className="max-w-[120px]"
-                                                          onChange={(e) => {
-                                                            field.onChange(e);
-                                                            const colorInput = e.target.previousElementSibling as HTMLInputElement;
-                                                            if (colorInput && /^#[0-9A-Fa-f]{6}$/.test(e.target.value)) {
-                                                              colorInput.value = e.target.value;
-                                                            }
-                                                          }}
-                                                        />
-                                                        <div className="w-8 h-8 rounded border" style={{ backgroundColor: field.value }}></div>
-                                                    </div>
-                                                    <FormMessage />
-                                                </FormItem>
-                                            )}
-                                        />
+                                        <FormField control={projectTagForm.control} name="tagName" render={({ field }) => ( <FormItem><FormLabel>Tag Name</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem> )}/>
+                                        <FormField control={projectTagForm.control} name="tagColor" render={({ field }) => ( <FormItem><FormLabel>Tag Color</FormLabel><div className="flex items-center gap-2"><FormControl><Input type="color" {...field} className="p-1 h-10 w-14 block" /></FormControl><Input type="text" {...field} placeholder="#RRGGBB" className="max-w-[120px]"/><div className="w-8 h-8 rounded border" style={{ backgroundColor: field.value }}></div></div><FormMessage /></FormItem> )}/>
                                         {createProjectTagState?.error && <p className="text-sm text-destructive">{createProjectTagState.error}</p>}
-                                        <DialogFooter>
-                                            <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
-                                            <Button type="submit" disabled={isCreateProjectTagPending}>
-                                                {isCreateProjectTagPending && <Loader2 className="mr-2 h-4 w-4 animate-spin"/>} Add Tag
-                                            </Button>
-                                        </DialogFooter>
+                                        <DialogFooter><DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose><Button type="submit" disabled={isCreateProjectTagPending}>{isCreateProjectTagPending && <Loader2 className="mr-2 h-4 w-4 animate-spin"/>}Add Tag</Button></DialogFooter>
                                     </form>
                                 </Form>
                             </DialogContent>
                         </Dialog>
                     )}
                 </div>
-                 <Card className="border p-4 rounded-md ">
-                    {projectTags.length === 0 && <p className="text-muted-foreground text-center py-2">No custom tags defined for this project yet.</p>}
+                <Card className="border p-4 rounded-md">
+                    {projectTagsForSettings.length === 0 && <p className="text-muted-foreground text-center py-2">No custom tags defined.</p>}
                     <div className="flex flex-wrap gap-2">
-                        {projectTags.map(tag => (
-                            <Badge key={tag.uuid} style={{ backgroundColor: tag.color, color: '#fff' }} className="text-sm px-3 py-1">
-                                {tag.name}
-                            </Badge>
-                        ))}
+                        {projectTagsForSettings.map(tag => ( <Badge key={tag.uuid} style={{ backgroundColor: tag.color, color: tag.color && (parseInt(tag.color.substring(1,3),16)*0.299 + parseInt(tag.color.substring(3,5),16)*0.587 + parseInt(tag.color.substring(5,7),16)*0.114) > 186 ? '#000000' : '#FFFFFF' }} className="text-sm px-3 py-1">{tag.name}</Badge> ))}
                     </div>
-                 </Card>
+                </Card>
               </div>
-               {currentUserRole === 'owner' && (
+              {isProjectOwner && (
                 <div>
                     <h4 className="font-semibold mb-2 text-lg text-destructive">Danger Zone</h4>
-                    <div className="border border-destructive p-4 rounded-md ">
-                        <p className="text-destructive">Deleting a project is permanent and cannot be undone.</p>
-                        <Button variant="destructive" className="mt-3" size="sm" disabled><Trash2 className="mr-2 h-4 w-4"/>Delete Project</Button>
-                    </div>
+                    <div className="border border-destructive p-4 rounded-md "><p className="text-destructive">Deleting a project is permanent.</p><Button variant="destructive" className="mt-3" size="sm" disabled onClick={() => toast({title: "Feature Not Implemented", description: "Project deletion is not yet available."})}><Trash2 className="mr-2 h-4 w-4"/>Delete Project</Button></div>
                 </div>
-               )}
+              )}
             </CardContent>
           </Card>
         </TabsContent>
-
       </Tabs>
-    </div>
+    </>
   );
 }
diff --git a/src/app/(app)/settings/page.tsx b/src/app/(app)/settings/page.tsx
index 211dcfd..8b3b314 100644
--- a/src/app/(app)/settings/page.tsx
+++ b/src/app/(app)/settings/page.tsx
@@ -26,7 +26,7 @@ export default function SettingsPage() {
             </div>
             <div className="space-y-1">
               <Label htmlFor="email">Email Address</Label>
-              <Input id="email" type="email" defaultValue="admin@nationquest.com" />
+              <Input id="email" type="email" defaultValue="admin@flowup.com" />
             </div>
              <Button className="w-full">Save Changes</Button>
           </CardContent>
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index 416b4de..e0fb03c 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -33,7 +33,7 @@ export default function LoginPage() {
     <Card className="shadow-xl">
       <CardHeader>
         <CardTitle className="text-2xl font-headline">Welcome Back!</CardTitle>
-        <CardDescription>Sign in to access your NationQuest Hub workspace.</CardDescription>
+        <CardDescription>Sign in to access your FlowUp workspace.</CardDescription>
       </CardHeader>
       <CardContent>
         <LoginForm />
diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx
index c143391..760e122 100644
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -34,7 +34,7 @@ export default function SignupPage() {
     <Card className="shadow-xl">
       <CardHeader>
         <CardTitle className="text-2xl font-headline">Create your Account</CardTitle>
-        <CardDescription>Join NationQuest Hub and streamline your projects.</CardDescription>
+        <CardDescription>Join FlowUp and streamline your projects.</CardDescription>
       </CardHeader>
       <CardContent>
         <SignupForm />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 00cfaf6..46126e3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,7 +4,7 @@ import { AuthProvider } from '@/contexts/AuthContext';
 import { Toaster } from '@/components/ui/toaster';
 
 export const metadata: Metadata = {
-  title: 'NationQuest Hub',
+  title: 'FlowUp',
   description: 'Your all-in-one project management and collaboration platform.',
 };
 
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 8368643..efa3c2d 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -11,7 +11,7 @@ export function Logo({ className, iconSize = 24, textSize = 'text-xl' }: LogoPro
   return (
     <Link href="/" className={`flex items-center gap-2 ${className}`}>
       <Briefcase size={iconSize} className="text-primary" />
-      <span className={`font-bold ${textSize} text-foreground`}>NationQuest Hub</span>
+      <span className={`font-bold ${textSize} text-foreground`}>FlowUp</span>
     </Link>
   );
 }
diff --git a/src/components/layout/AppSidebar.tsx b/src/components/layout/AppSidebar.tsx
index 627f7a8..def2ff6 100644
--- a/src/components/layout/AppSidebar.tsx
+++ b/src/components/layout/AppSidebar.tsx
@@ -14,18 +14,18 @@ import {
   SidebarMenuSkeleton,
 } from '@/components/ui/sidebar';
 import { Logo } from '@/components/Logo';
-import { LayoutDashboard, FolderKanban, Megaphone, Settings, Users, ShieldCheck, BookText, FolderGit2 } from 'lucide-react'; // Added FolderGit2
+import { LayoutDashboard, FolderKanban, Megaphone, Settings, Users, ShieldCheck, BookText } from 'lucide-react';
 import { useAuth } from '@/hooks/useAuth';
 import { Button } from '../ui/button';
 
 const navItems = [
-  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard, exact: true },
   { href: '/projects', label: 'Projects', icon: FolderKanban },
   { href: '/announcements', label: 'Announcements', icon: Megaphone },
   { href: '/documentation', label: 'Docs', icon: BookText, adminOnly: false },
   { href: '/team', label: 'Team Management', icon: Users, adminOnly: true },
   { href: '/secure-vault', label: 'Secure Vault', icon: ShieldCheck, adminOnly: false },
-  { href: '/settings', label: 'Settings', icon: Settings },
+  { href: '/settings', label: 'App Settings', icon: Settings, exact: true }, // Changed label for clarity
 ];
 
 export function AppSidebar() {
@@ -62,11 +62,15 @@ export function AppSidebar() {
               return null;
             }
             const Icon = item.icon;
+            const isActive = item.exact 
+              ? pathname === item.href 
+              : pathname.startsWith(item.href) && (item.href !== '/dashboard' || pathname === '/dashboard');
+            
             return (
               <SidebarMenuItem key={item.href}>
                 <SidebarMenuButton
                   asChild
-                  isActive={pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href))}
+                  isActive={isActive}
                   tooltip={{ children: item.label, side: 'right', className: "font-body" }}
                 >
                   <Link href={item.href}>
@@ -80,9 +84,8 @@ export function AppSidebar() {
         </SidebarMenu>
       </SidebarContent>
        <SidebarFooter className="p-2 border-t">
-         {/* This button can link to a help page or trigger a support modal */}
          <Button variant="outline" size="sm" className="w-full justify-start group-data-[collapsible=icon]:justify-center" asChild>
-            <Link href="/help-support"> {/* Example link */}
+            <Link href="/help-support"> 
                 <Settings className="mr-2 group-data-[collapsible=icon]:mr-0" />
                 <span className="group-data-[collapsible=icon]:hidden">Help & Support</span>
             </Link>
diff --git a/src/lib/authEdge.ts b/src/lib/authEdge.ts
index 32cf34c..cb12899 100644
--- a/src/lib/authEdge.ts
+++ b/src/lib/authEdge.ts
@@ -6,7 +6,7 @@ import { getUserByUuid as dbGetUserByUuid } from './db';
 import { cookies } from 'next/headers';
 import jwt from 'jsonwebtoken';
 
-const AUTH_COOKIE_NAME = 'nqh_auth_token';
+const AUTH_COOKIE_NAME = 'flowup_auth_token'; // Renamed cookie
 
 interface Session {
   user?: Omit<User, 'hashedPassword'>; 
diff --git a/src/lib/authService.ts b/src/lib/authService.ts
index 3e3fea0..b308f47 100644
--- a/src/lib/authService.ts
+++ b/src/lib/authService.ts
@@ -7,7 +7,7 @@ import { createUser as dbCreateUser, getUserByEmail as dbGetUserByEmail, updateU
 import jwt from 'jsonwebtoken';
 import { cookies } from 'next/headers';
 
-const AUTH_COOKIE_NAME = 'nqh_auth_token';
+const AUTH_COOKIE_NAME = 'flowup_auth_token'; // Renamed cookie
 
 const getJwtSecretOrThrow = (): string => {
   const secret = process.env.JWT_SECRET;
diff --git a/src/lib/db.ts b/src/lib/db.ts
index b17319d..beef71e 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -12,7 +12,7 @@ import fs from 'fs';
 let db: Database | null = null;
 
 const DB_DIR = path.join(process.cwd(), 'db');
-const DB_PATH = path.join(DB_DIR, 'nationquest_hub.db');
+const DB_PATH = path.join(DB_DIR, 'flowup_hub.db'); // Renamed DB file
 
 const DEFAULT_PROJECT_TAGS: Array<Omit<Tag, 'uuid' | 'projectUuid'>> = [
   // Standard PM Tags
@@ -153,7 +153,7 @@ console.log('Hello FlowUp')
 \`\`\`
 
 Exemple :  
-[Visitez NationQuest](https://nationquest.fr)
+[Visitez FlowUp](https://flowup.example.com)
 
 ---
 
@@ -355,7 +355,7 @@ export async function getDbConnection() {
     );
   `);
 
-  const adminUser = await db.get('SELECT * FROM users WHERE email = ?', 'admin@nationquest.com');
+  const adminUser = await db.get('SELECT * FROM users WHERE email = ?', 'admin@flowup.com'); // Renamed email
   if (!adminUser) {
     const defaultAdminUUID = '00000000-0000-0000-0000-000000000001'; 
     const defaultAdminPassword = await bcrypt.hash('adminpassword', 10);
@@ -363,14 +363,14 @@ export async function getDbConnection() {
       'INSERT INTO users (uuid, name, email, hashedPassword, role, avatar) VALUES (?, ?, ?, ?, ?, ?)',
       defaultAdminUUID,
       'Admin User',
-      'admin@nationquest.com',
+      'admin@flowup.com', // Renamed email
       defaultAdminPassword,
       'admin',
       `https://placehold.co/100x100.png?text=AU`
     );
   }
 
-  const memberUser = await db.get('SELECT * FROM users WHERE email = ?', 'member@nationquest.com');
+  const memberUser = await db.get('SELECT * FROM users WHERE email = ?', 'member@flowup.com'); // Renamed email
   if (!memberUser) {
     const defaultMemberUUID = uuidv4();
     const defaultMemberPassword = await bcrypt.hash('memberpassword', 10);
@@ -378,7 +378,7 @@ export async function getDbConnection() {
       'INSERT INTO users (uuid, name, email, hashedPassword, role, avatar) VALUES (?, ?, ?, ?, ?, ?)',
       defaultMemberUUID,
       'Member User',
-      'member@nationquest.com',
+      'member@flowup.com', // Renamed email
       defaultMemberPassword,
       'member',
       `https://placehold.co/100x100.png?text=MU`
@@ -1017,4 +1017,3 @@ export async function deleteDocument(docUuid: string): Promise<boolean> {
   const result = await connection.run('DELETE FROM project_documents WHERE uuid = ?', docUuid);
   return result.changes ? result.changes > 0 : false;
 }
-
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 63f8ca8..6b9ad37 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -123,7 +123,7 @@ export default {
         },
         invert: { // Dark theme prose
           css: {
-            '--tw-prose-body': theme('colors.foreground / 1'), 
+            '--tw-prose-body': theme('colors.foreground / 1'),
             '--tw-prose-headings': theme('colors.foreground / 1'),
             '--tw-prose-lead': theme('colors.muted.foreground / 1'),
             '--tw-prose-links': theme('colors.primary.DEFAULT / 1'),