fix: overall UI

TaskTrackingSystem.WebApp/Components/App.razor

@@ -71,39 +71,40 @@
         };
     </script>
     <script>
-        const brandDark = "#111827";
-        const brandDarkAlt = "#1F2937";
-        const brandPrimary = "#111827";
-        const brandAccent = "#374151";
-        const brandLight = "#E5E7EB";
-        const brandMuted = "#6B7280";
+        const brandDark = "#172554";
+        const brandDarkAlt = "#1E3A8A";
+        const brandPrimary = "#2563EB";
+        const brandPrimaryHover = "#1D4ED8";
+        const brandAccent = "#0F766E";
+        const brandLight = "#EFF6FF";
+        const brandMuted = "#64748B";
         
         const semanticRedBg = "#FFE4E6";
-        const semanticRedText = "#991B1B";
+        const semanticRedText = "#BE123C";
         
-        const semanticGreenBg = "#D1FAE5";
-        const semanticGreenText = "#065F46";
+        const semanticGreenBg = "#CCFBF1";
+        const semanticGreenText = "#0F766E";
         
-        const semanticNeutralBg = "#F3F4F6";
-        const semanticNeutralText = "#374151";
+        const semanticNeutralBg = "#F8FAFC";
+        const semanticNeutralText = "#475569";
         
-        const neutralBg = "#F8F9FA";
-        const neutralBorder = "#E5E7EB";
-        const neutralMuted = "#6B7280";
-        const neutralDark = "#111827";
+        const neutralBg = "#F6F8FB";
+        const neutralBorder = "#E2E8F0";
+        const neutralMuted = "#64748B";
+        const neutralDark = "#0F172A";
 
         const customGray = {
             50: neutralBg,
-            100: "#F3F4F6",
+            100: "#F1F5F9",
             200: neutralBorder,
-            300: "#D1D5DB",
-            400: "#9CA3AF",
+            300: "#CBD5E1",
+            400: "#94A3B8",
             500: neutralMuted,
-            600: "#4B5563",
-            700: "#374151",
-            800: "#1F2937",
+            600: "#475569",
+            700: "#334155",
+            800: "#1E293B",
             900: neutralDark,
-            950: neutralDark
+            950: "#020617"
         };
 
         tailwind.config = {
@@ -206,16 +207,16 @@
                         900: "#0C4A6E"
                     },
                     blue: {
-                        50: semanticNeutralBg,
-                        100: semanticNeutralBg,
-                        200: "#E5E7EB",
-                        300: "#D1D5DB",
-                        400: "#9CA3AF",
-                        500: semanticNeutralText,
-                        600: semanticNeutralText,
-                        700: "#1F2937",
-                        800: "#111827",
-                        900: "#111827"
+                        50: "#EFF6FF",
+                        100: "#DBEAFE",
+                        200: "#BFDBFE",
+                        300: "#93C5FD",
+                        400: "#60A5FA",
+                        500: "#3B82F6",
+                        600: brandPrimary,
+                        700: brandPrimaryHover,
+                        800: brandDarkAlt,
+                        900: brandDark
                     },
                     amber: {
                         50: "#FEF3C7",
@@ -243,49 +244,49 @@
                     },
                     violet: {
                         50: brandLight,
-                        100: "#E8E8FF",
-                        200: brandMuted,
-                        300: brandMuted,
-                        400: brandAccent,
-                        500: brandPrimary,
+                        100: "#DBEAFE",
+                        200: "#BFDBFE",
+                        300: "#93C5FD",
+                        400: "#60A5FA",
+                        500: "#3B82F6",
                         600: brandPrimary,
-                        700: brandDarkAlt,
+                        700: brandPrimaryHover,
                         800: brandDark,
                         900: brandDark,
                         950: brandDark
                     },
                     purple: {
                         50: brandLight,
-                        100: "#E8E8FF",
-                        200: brandMuted,
-                        300: brandMuted,
-                        400: brandAccent,
-                        500: brandPrimary,
+                        100: "#DBEAFE",
+                        200: "#BFDBFE",
+                        300: "#93C5FD",
+                        400: "#60A5FA",
+                        500: "#3B82F6",
                         600: brandPrimary,
-                        700: brandDarkAlt,
+                        700: brandPrimaryHover,
                         800: brandDark,
                         900: brandDark,
                         950: brandDark
                     },
                     indigo: {
                         50: brandLight,
-                        100: "#E8E8FF",
-                        200: brandMuted,
-                        300: brandMuted,
-                        400: brandAccent,
-                        500: brandPrimary,
+                        100: "#DBEAFE",
+                        200: "#BFDBFE",
+                        300: "#93C5FD",
+                        400: "#60A5FA",
+                        500: "#3B82F6",
                         600: brandPrimary,
-                        700: brandDarkAlt,
+                        700: brandPrimaryHover,
                         800: brandDark,
                         900: brandDark,
                         950: brandDark
                     },
 
                     chart: {
-                        purple: "#111827",
-                        teal: "#4B5563",
+                        purple: brandPrimary,
+                        teal: "#14B8A6",
                         green: "#10B981",
-                        neutral: "#E5E7EB"
+                        neutral: neutralBorder
                     },
 
                     background: neutralBg,          
@@ -308,6 +309,17 @@
                     "accent-foreground": "#FFFFFF",
 
                     border: neutralBorder,
+                },
+                borderRadius: {
+                    none: "0",
+                    sm: "0.375rem",
+                    DEFAULT: "0.5rem",
+                    md: "0.5rem",
+                    lg: "0.5rem",
+                    xl: "0.5rem",
+                    "2xl": "0.5rem",
+                    "3xl": "0.5rem",
+                    full: "9999px"
                 }
             }
         }
@@ -457,13 +469,13 @@
                         }
                     },
                     currentDateIndicator: {
-                        color: '#7c3aed',
+                        color: '#2563eb',
                         dashStyle: 'ShortDash',
                         width: 2,
                         label: {
                             format: 'Today',
                             style: {
-                                color: '#7c3aed',
+                                color: '#2563eb',
                                 fontWeight: 'bold'
                             }
                         }

TaskTrackingSystem.WebApp/Components/Layout/MainLayout.razor

@@ -3,29 +3,43 @@
 @using System.Security.Claims
 @inject TaskTrackingSystem.WebApp.Localization.UiLanguageService Language
 
-<div class="flex h-screen bg-background font-sans text-slate-800 antialiased overflow-hidden">
-    <aside class="flex w-64 flex-col border-r border-slate-800 bg-slate-950 text-white shrink-0 overflow-hidden">
-        <div class="flex h-20 items-center px-6">
-            <span class="flex h-9 w-9 items-center justify-center rounded-xl bg-white/10 text-white">
+<div class="app-shell min-h-screen bg-slate-50 text-slate-950 lg:flex lg:overflow-hidden">
+    <button type="button"
+            class="sidebar-scrim"
+            onclick="document.body.classList.remove('tts-sidebar-open');"
+            aria-label="Close navigation"></button>
+
+    <aside class="app-sidebar fixed inset-y-0 left-0 z-[60] flex w-72 -translate-x-full flex-col overflow-hidden border-r border-slate-800 bg-slate-950 text-white transition-transform duration-200 lg:static lg:z-auto lg:min-h-screen lg:translate-x-0 lg:shrink-0">
+        <div class="app-sidebar-brand flex min-h-20 items-center gap-3 px-5 py-4">
+            <span class="app-sidebar-logo inline-flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm">
                 <i data-lucide="flame" class="h-5 w-5 fill-current"></i>
             </span>
-            <span class="ml-3 font-bold text-xl tracking-tight text-white">Taskify</span>
+            <span class="app-sidebar-title flex flex-col leading-tight">
+                <strong class="text-lg font-bold tracking-normal text-white">Taskify</strong>
+                <span class="mt-0.5 text-[11px] font-semibold uppercase tracking-wide text-slate-400">Workspace</span>
+            </span>
+            <button type="button"
+                    class="control-button mobile-sidebar-close ml-auto inline-flex h-9 w-9 items-center justify-center rounded-lg border border-white/10 bg-white/10 text-white hover:bg-white/15 hover:text-white lg:hidden"
+                    onclick="document.body.classList.remove('tts-sidebar-open');"
+                    aria-label="Close navigation">
+                <i data-lucide="x" class="h-4 w-4"></i>
+            </button>
         </div>
 
         <NavMenu @rendermode="new InteractiveServerRenderMode(prerender: false)" />
 
-        <div class="border-t border-slate-800 p-4 shrink-0">
+        <div class="app-sidebar-user mt-auto shrink-0 border-t border-white/10 p-3">
             <AuthorizeView>
                 <Authorized>
-                    <div class="flex items-center rounded-xl p-2 hover:bg-white/10 transition-all">
-                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-700 text-white font-semibold text-sm shrink-0">
+                    <div class="flex items-center rounded-lg border border-white/10 bg-white/[0.04] p-2 transition-colors hover:bg-white/[0.08]">
+                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white font-semibold text-sm shrink-0">
                             @(context.User.Identity?.Name?.Length > 0 ? context.User.Identity.Name[0].ToString().ToUpper() : "U")
                         </span>
                         <div class="ml-3 overflow-hidden flex flex-col">
                             <span class="text-sm font-semibold truncate max-w-[130px] text-white">@context.User.Identity?.Name</span>
                             <form id="logout-form" method="post" action="/account/logout" class="mt-0.5">
                                 <AntiforgeryToken />
-                                <button type="button" onclick="document.getElementById('logout-confirm-dialog').style.display='flex';" class="text-xs hover:opacity-80 font-semibold text-left flex items-center gap-1 transition-all text-slate-300">
+                                <button type="button" onclick="document.getElementById('logout-confirm-dialog').style.display='flex';" class="text-xs hover:opacity-90 font-semibold text-left flex items-center gap-1 transition-all text-slate-300">
                                     <i data-lucide="log-out" class="h-3 w-3"></i>
                                     @Language.Texts.SignOut
                                 </button>
@@ -34,7 +48,7 @@
                     </div>
                 </Authorized>
                 <NotAuthorized>
-                    <a href="/login" class="flex items-center justify-center rounded-xl bg-slate-800 text-white px-4 py-2.5 text-sm font-medium hover:bg-slate-700 transition-all">
+                    <a href="/login" class="flex items-center justify-center rounded-lg bg-white/10 text-white px-4 py-2.5 text-sm font-medium hover:bg-white/15 transition-colors">
                         @Language.Texts.SignIn
                     </a>
                 </NotAuthorized>
@@ -42,9 +56,9 @@
         </div>
 
         <div id="logout-confirm-dialog" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm" style="display: none;">
-            <div class="rounded-2xl shadow-xl w-full max-w-sm mx-4 overflow-hidden animate-in border border-slate-100 bg-white">
+            <div class="rounded-lg shadow-lg w-full max-w-sm mx-4 overflow-hidden animate-in border border-slate-100 bg-white">
                 <div class="p-6 text-center">
-                    <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full mb-4" style="background-color: var(--status-warning-bg); color: var(--brand-accent);">
+                    <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full mb-4" style="background-color: var(--status-warning-bg); color: var(--status-warning-text);">
                         <i data-lucide="log-out" class="h-7 w-7"></i>
                     </div>
                     <h3 class="text-lg font-semibold text-slate-900">@Language.Texts.SignOutTitle</h3>
@@ -62,10 +76,21 @@
         </div>
     </aside>
 
-    <main class="flex-1 flex flex-col overflow-y-auto">
-        <header class="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-8">
-            <h1 class="text-lg font-semibold text-slate-900">@Language.Texts.Workspace</h1>
-            <div class="flex items-center space-x-4">
+    <main class="app-main flex min-w-0 flex-1 flex-col lg:min-h-screen">
+        <header class="app-topbar flex min-h-16 items-center justify-between gap-3 border-b border-slate-200 bg-white/95 px-4 backdrop-blur lg:px-6">
+            <div class="flex min-w-0 items-center gap-3">
+                <button type="button"
+                        class="control-button mobile-sidebar-toggle inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 shadow-sm hover:bg-slate-50 hover:text-blue-600 lg:hidden"
+                        onclick="document.body.classList.add('tts-sidebar-open');"
+                        aria-label="Open navigation">
+                    <i data-lucide="menu" class="h-4 w-4"></i>
+                </button>
+                <div class="app-topbar-title min-w-0">
+                    <h1 class="truncate text-base font-bold tracking-normal text-slate-950">@CurrentPageTitle</h1>
+                    <p class="hidden truncate text-xs font-medium text-slate-500 sm:block">@CurrentPageDescription</p>
+                </div>
+            </div>
+            <div class="flex shrink-0 items-center gap-2 sm:gap-3">
                 <AuthorizeView>
                     <Authorized>
                         <FirebaseTokenSync />
@@ -77,7 +102,7 @@
             </div>
         </header>
 
-        <div class="p-8 flex-1">
+        <div class="app-content flex-1 overflow-y-auto p-4 lg:p-8">
             @if (isAuthorizedPage)
             {
                 @Body
@@ -115,17 +140,65 @@
         string.IsNullOrEmpty(Navigation.ToBaseRelativePath(Navigation.Uri)) || 
         Navigation.ToBaseRelativePath(Navigation.Uri).Split('?')[0].Trim('/') is "dashboard" or "Home" or "";
 
-    private string CurrentPageTitle => Navigation.ToBaseRelativePath(Navigation.Uri).Split('?')[0].Trim('/') switch
+    private string CurrentRoute => Navigation.ToBaseRelativePath(Navigation.Uri).Split('?')[0].Trim('/');
+
+    private string CurrentPageTitle
+    {
+        get
+        {
+            if (CurrentRoute.StartsWith("projects/", StringComparison.OrdinalIgnoreCase) &&
+                CurrentRoute.EndsWith("/tasks", StringComparison.OrdinalIgnoreCase))
+            {
+                return "Kanban Board";
+            }
+
+            if (CurrentRoute.StartsWith("tasks/", StringComparison.OrdinalIgnoreCase))
+            {
+                return "Task Details";
+            }
+
+            return CurrentRoute switch
+            {
+                "" or "dashboard" or "Home" => "Dashboard",
+                "dashboard/manager" => "Manager Dashboard",
+                "dashboard/employee" => "Employee Dashboard",
+                "projects" or "projects/all" => "Projects",
+                "projects/assign" => "Project Assignment",
+                "tasks" or "tasks/all" => "Tasks",
+                "board" => "Kanban Board",
+                "tasks/assign" => "Task Assignment",
+                "issues" or "issues/all" => "Issues",
+                "issues/add" => "Add Issue",
+                "reports/tasks" => "Task Report",
+                "reports/time" => "Time Tracking",
+                "reports/projects" => "Project Progress",
+                "reports/overdue" => "Overdue Tasks",
+                "reports/employees" => "Employee Report",
+                "roles" => "Roles & Access",
+                "users" => "Users",
+                "audit-logs" => "Audit Logs",
+                _ => Language.Texts.Workspace
+            };
+        }
+    }
+
+    private string CurrentPageDescription => CurrentPageTitle switch
     {
-        "projects" => "Projects",
-        "tasks" => "Tasks",
-        "reports" => "Reports",
-        "roles" => "Roles & Access",
-        "users" => "Users",
-        "dashboard" => "Dashboard",
-        "dashboard/manager" => "Manager Dashboard",
-        "dashboard/employee" => "Employee Dashboard",
-        _ => Language.Texts.Workspace
+        "Dashboard" => "A quick overview of work, risk, and progress.",
+        "Manager Dashboard" => "Track projects, people, and delivery health.",
+        "Employee Dashboard" => "Focus on your tasks, due dates, and progress.",
+        "Projects" => "Manage project plans, timelines, and assignments.",
+        "Project Assignment" => "Assign team members to the right projects.",
+        "Tasks" => "Review, filter, and update work items.",
+        "Kanban Board" => "Move work through status columns.",
+        "Task Assignment" => "Assign tasks to project members.",
+        "Issues" => "Track blockers, notes, and daily work progress.",
+        "Add Issue" => "Record a new issue against a task.",
+        "Roles & Access" => "Control user roles, menus, and permissions.",
+        "Users" => "Manage people, status, and account details.",
+        "Audit Logs" => "Review system activity and changes.",
+        _ when CurrentPageTitle.Contains("Report", StringComparison.OrdinalIgnoreCase) => "Analyze work data and export reports.",
+        _ => "Workspace"
     };
 
     protected override async Task OnInitializedAsync()

TaskTrackingSystem.WebApp/Components/Layout/NavMenu.razor

@@ -10,14 +10,15 @@
 @inject NavigationManager Navigation
 @inject IJSRuntime JS
 
-<nav class="flex-1 space-y-1 px-4 py-6 overflow-y-auto">
+<nav class="flex-1 space-y-1 overflow-y-auto px-3 pb-5 pt-2 text-slate-300"
+     onclick="if (event.target.closest('a')) document.body.classList.remove('tts-sidebar-open');">
     @if (menus.Any())
     {
         @foreach (var menu in menus)
         {
             if (menu.SubMenus != null && menu.SubMenus.Count > 0)
             {
-                <button class="nav-dropdown-toggle @(IsMenuGroupExpanded(menu.MenuCode) ? "expanded" : "")"
+                <button class="nav-dropdown-toggle flex w-full items-center rounded-lg px-3 py-2.5 text-sm font-semibold text-slate-300 transition-colors hover:bg-white/10 hover:text-white @(IsMenuGroupExpanded(menu.MenuCode) ? "expanded bg-white/10 text-white" : "")"
                         @onclick="() => ToggleMenuGroup(menu.MenuCode)">
                     @RenderIcon(menu.Icon)
                     <span class="flex-1 text-left">@menu.MenuName</span>
@@ -28,7 +29,7 @@
                     <div class="nav-dropdown-children">
                         @foreach (var sub in menu.SubMenus)
                         {
-                            <NavLink class="nav-link-item nav-child-item"
+                            <NavLink class="nav-link-item nav-child-item flex items-center rounded-lg px-3 py-2 text-sm font-semibold text-slate-300 transition-colors hover:bg-white/10 hover:text-white"
                                      href="@MenuAuthorizationService.NormalizeMenuHref(sub.MenuUrl)"
                                      Match="@GetNavLinkMatch(sub.MenuUrl)">
                                 @RenderSmallIcon(sub.Icon)
@@ -40,7 +41,7 @@
             }
             else
             {
-                <NavLink class="nav-link-item"
+                <NavLink class="nav-link-item flex items-center rounded-lg px-3 py-2.5 text-sm font-semibold text-slate-300 transition-colors hover:bg-white/10 hover:text-white"
                          href="@MenuAuthorizationService.NormalizeMenuHref(menu.MenuUrl)"
                          Match="@(string.IsNullOrWhiteSpace(menu.MenuUrl) || menu.MenuUrl.Trim('/') is "dashboard" or "" ? NavLinkMatch.All : NavLinkMatch.Prefix)">
                     @RenderIcon(menu.Icon)
@@ -50,7 +51,7 @@
         }
         @if (isAdmin)
         {
-            <NavLink class="nav-link-item mt-2 pt-2 border-t border-slate-100" href="/audit-logs" Match="NavLinkMatch.All">
+            <NavLink class="nav-link-item mt-2 flex items-center rounded-lg border-t border-white/10 px-3 py-2.5 pt-3 text-sm font-semibold text-slate-300 transition-colors hover:bg-white/10 hover:text-white" href="/audit-logs" Match="NavLinkMatch.All">
                 <i data-lucide="file-text" class="h-4 w-4 mr-3 text-slate-400 shrink-0"></i>
                 <span>@Language.Texts.AuditLogs</span>
             </NavLink>
@@ -157,7 +158,7 @@
                 }
                 else
                 {
-                    // Access items are the same — just refresh expanded state for the new route.
+                    // Access items are the same - just refresh expanded state for the new route.
                     foreach (var menu in menus)
                     {
                         if (menu.SubMenus != null && menu.SubMenus.Count > 0 && IsMenuExpanded(menu.MenuCode, menu.SubMenus))

TaskTrackingSystem.WebApp/Components/Layout/NavMenu.razor.css

@@ -1,99 +1,82 @@
-/* Modern Sidebar Navigation Styles */
-::deep a.nav-link-item {
+::deep a.nav-link-item,
+::deep button.nav-dropdown-toggle {
     display: flex;
+    width: 100%;
     align-items: center;
-    border-radius: 0.75rem;
-    padding: 0.625rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #CBD5E1;
-    transition: all 0.2s ease;
-    border-left: 3px solid transparent;
-}
-
-::deep a.nav-link-item:hover {
-    background-color: rgba(255, 255, 255, 0.08); /* crisp highlight on hover */
-    color: #FFFFFF;
-}
-
-::deep a.nav-link-item.active {
-    background-color: rgba(255, 255, 255, 0.15) !important;
-    color: #FFFFFF !important;
-    border-left: 3px solid #FFFFFF !important;
-    font-weight: 600;
-}
-
-::deep a.nav-link-item.active i {
-    color: #FFFFFF !important;
-}
-
-::deep a.nav-link-item i {
-    color: #CBD5E1;
-    transition: color 0.2s ease;
-}
-
-::deep a.nav-link-item:hover i {
-    color: #FFFFFF;
+    border: 1px solid transparent;
+    border-radius: var(--radius-lg, 0.5rem);
+    padding: 0.65rem 0.85rem;
+    color: var(--sidebar-muted, #CBD5E1);
+    font-size: 0.9rem;
+    font-weight: 650;
+    line-height: 1.2;
+    transition:
+        background-color 0.16s ease,
+        border-color 0.16s ease,
+        color 0.16s ease,
+        transform 0.16s ease;
 }
 
-/* Dropdown toggle button (parent item) */
 ::deep button.nav-dropdown-toggle {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    border-radius: 0.75rem;
-    padding: 0.625rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #CBD5E1;
-    background: none;
-    border: none;
-    border-left: 3px solid transparent;
+    background: transparent;
     cursor: pointer;
-    transition: all 0.2s ease;
 }
 
+::deep a.nav-link-item:hover,
 ::deep button.nav-dropdown-toggle:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.08);
+    background-color: rgba(255, 255, 255, 0.07);
     color: #FFFFFF;
 }
 
-::deep button.nav-dropdown-toggle.expanded {
-    color: #FFFFFF;
-    font-weight: 600;
+::deep a.nav-link-item.active {
+    border-color: rgba(96, 165, 250, 0.28) !important;
+    background-color: var(--sidebar-active, rgba(37, 99, 235, 0.18)) !important;
+    color: #FFFFFF !important;
+    box-shadow: inset 3px 0 0 var(--brand-primary);
 }
 
-::deep button.nav-dropdown-toggle:hover i,
-::deep button.nav-dropdown-toggle.expanded i {
+::deep button.nav-dropdown-toggle.expanded {
     color: #FFFFFF;
 }
 
+::deep a.nav-link-item i,
 ::deep button.nav-dropdown-toggle i {
-    color: #CBD5E1;
+    color: currentColor !important;
+    opacity: 0.78;
+    transition: opacity 0.16s ease;
+}
+
+::deep a.nav-link-item:hover i,
+::deep a.nav-link-item.active i,
+::deep button.nav-dropdown-toggle:hover i,
+::deep button.nav-dropdown-toggle.expanded i {
+    opacity: 1;
 }
 
-/* Chevron rotation on expand */
 ::deep button.nav-dropdown-toggle .nav-chevron {
-    transition: transform 0.25s ease;
+    margin-left: auto;
+    opacity: 0.65;
+    transition: transform 0.18s ease, opacity 0.18s ease;
 }
 
 ::deep button.nav-dropdown-toggle.expanded .nav-chevron {
     transform: rotate(180deg);
+    opacity: 1;
 }
 
-/* Dropdown children container */
 ::deep .nav-dropdown-children {
-    margin-left: 0.75rem;
-    padding-left: 0.75rem;
-    border-left: 1.5px solid rgba(255, 255, 255, 0.15);
-    margin-top: 0.125rem;
-    margin-bottom: 0.25rem;
+    margin: 0.2rem 0 0.45rem 1rem;
+    padding-left: 0.65rem;
+    border-left: 1px solid rgba(148, 163, 184, 0.22);
 }
 
-/* Child nav items — slightly smaller */
 ::deep a.nav-child-item {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8125rem;
-    border-left: none !important;
-    border-radius: 0.5rem;
+    padding: 0.54rem 0.7rem;
+    font-size: 0.84rem;
+    font-weight: 620;
+}
+
+::deep a.nav-link-item.border-t {
+    border-top-color: rgba(148, 163, 184, 0.18) !important;
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Auth/Login.razor

@@ -7,22 +7,25 @@
 @inject MenuAuthorizationService MenuAuthorization
 @inject IJSRuntime JS
 
-<PageTitle>Sign In — TaskFlow</PageTitle>
+<PageTitle>Sign In - Taskify</PageTitle>
 
-<div class="flex min-h-screen items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="w-full max-w-md space-y-8 bg-white p-8 rounded-2xl border border-slate-200 shadow-xl">
+<div class="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md space-y-7 rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
         <div>
             <div class="flex justify-center">
-                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white font-bold text-xl">T</span>
+                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white shadow-sm">
+                    <i data-lucide="flame" class="h-6 w-6 fill-current"></i>
+                </span>
             </div>
-            <h2 class="mt-6 text-center text-3xl font-extrabold text-slate-900">Sign in to your account</h2>
+            <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">Sign in to Taskify</h2>
+            <p class="mt-2 text-center text-sm text-slate-500">Continue to your work dashboard.</p>
         </div>
 
-        <form method="post" action="/account/login" class="mt-8 space-y-6">
+        <form method="post" action="/account/login" class="space-y-5">
             <AntiforgeryToken />
             <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
 
-            <div class="space-y-4 rounded-md shadow-sm">
+            <div class="space-y-4">
                 <div>
                     <label for="usernameOrEmail" class="block text-sm font-medium text-slate-700 mb-1">Username or Email</label>
                     <input id="usernameOrEmail" name="UsernameOrEmail" required placeholder="Enter username or email"
@@ -30,7 +33,7 @@
                 </div>
                 <div class="relative">
                     <label for="password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
-                    <input id="password" name="Password" type="@(showPassword ? "text" : "password")" required placeholder="••••••••"
+                    <input id="password" name="Password" type="@(showPassword ? "text" : "password")" required placeholder="Password"
                            class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all pr-10" />
                     <button type="button" @onclick="TogglePassword" class="absolute right-3 top-[28px] text-slate-400 hover:text-slate-600 focus:outline-none">
                         <i data-lucide="@(showPassword ? "eye-off" : "eye")" class="h-5 w-5"></i>
@@ -78,7 +81,7 @@
             </p>
 
             <div>
-                <button type="submit" class="group relative flex w-full justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-violet-700 transition-colors shadow-sm">
+                <button type="submit" class="group relative flex w-full justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-700">
                     Sign In
                 </button>
             </div>

TaskTrackingSystem.WebApp/Components/Pages/Features/Auth/Register.razor

@@ -5,26 +5,27 @@
 @attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]
 @inject IJSRuntime JS
 
-<PageTitle>Register — TaskFlow</PageTitle>
+<PageTitle>Register - Taskify</PageTitle>
 
-<div class="flex min-h-screen items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="w-full max-w-md space-y-8 bg-white p-8 rounded-2xl border border-slate-200 shadow-xl">
+<div class="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md space-y-7 rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
         <div>
             <div class="flex justify-center">
-                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white font-bold text-xl">T</span>
+                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white shadow-sm">
+                    <i data-lucide="flame" class="h-6 w-6 fill-current"></i>
+                </span>
             </div>
-            <h2 class="mt-6 text-center text-3xl font-extrabold text-slate-900">Create a new account</h2>
+            <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">Create your Taskify account</h2>
             <p class="mt-2 text-center text-sm text-slate-600">
-                Or
-                <a href="/login" class="font-medium text-slate-900 hover:underline">sign in to existing account</a> 
-
+                Already have access?
+                <a href="/login" class="font-semibold text-violet-600 hover:underline">Sign in</a>
             </p>
         </div>
 
-        <form method="post" action="/account/register" class="mt-8 space-y-6">
+        <form method="post" action="/account/register" class="space-y-5">
             <AntiforgeryToken />
 
-            <div class="space-y-4 rounded-md shadow-sm">
+            <div class="space-y-4">
                 <div class="grid grid-cols-2 gap-4">
                     <div>
                         <label for="firstName" class="block text-sm font-medium text-slate-700 mb-1">First Name</label>
@@ -54,7 +55,7 @@
                 </div>
                 <div class="relative">
                     <label for="password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
-                    <input id="password" name="Password" type="@(showPassword ? "text" : "password")" required placeholder="Min 8 characters (A-Z, a-z, 0-9, special)"
+                    <input id="password" name="Password" type="@(showPassword ? "text" : "password")" required placeholder="Password"
                            class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all pr-10" />
                     <button type="button" @onclick="TogglePassword" class="absolute right-3 top-[28px] text-slate-400 hover:text-slate-600 focus:outline-none">
                         <i data-lucide="@(showPassword ? "eye-off" : "eye")" class="h-5 w-5"></i>
@@ -70,7 +71,7 @@
             }
 
             <div>
-                <button type="submit" class="group relative flex w-full justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-violet-700 transition-colors shadow-sm">
+                <button type="submit" class="group relative flex w-full justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-700">
                     Register
                 </button>
             </div>

TaskTrackingSystem.WebApp/Components/Pages/Features/Auth/ResetPassword.razor

@@ -3,25 +3,28 @@
 @rendermode @(new InteractiveServerRenderMode(prerender: false))
 @attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]
 @inject NavigationManager Navigation
+@inject IJSRuntime JS
 
-<PageTitle>Reset Password - TaskFlow</PageTitle>
+<PageTitle>Reset Password - Taskify</PageTitle>
 
-<div class="flex min-h-screen items-center justify-center bg-slate-50 py-12 px-4 sm:px-6 lg:px-8">
-    <div class="w-full max-w-md space-y-8 bg-white p-8 rounded-2xl border border-slate-200 shadow-xl">
+<div class="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md space-y-7 rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
         <div>
             <div class="flex justify-center">
-                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white font-bold text-xl">T</span>
+                <span class="flex h-12 w-12 items-center justify-center rounded-xl bg-violet-600 text-white shadow-sm">
+                    <i data-lucide="flame" class="h-6 w-6 fill-current"></i>
+                </span>
             </div>
-            <h2 class="mt-6 text-center text-3xl font-extrabold text-slate-900">Reset your password</h2>
+            <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">Reset your password</h2>
             <p class="mt-2 text-center text-sm text-slate-600">
                 Use the recovery code configured in the API to set a new password.
             </p>
         </div>
 
-        <form method="post" action="/account/reset-password" class="mt-8 space-y-6">
+        <form method="post" action="/account/reset-password" class="space-y-5">
             <AntiforgeryToken />
 
-            <div class="space-y-4 rounded-md shadow-sm">
+            <div class="space-y-4">
                 <div>
                     <label for="usernameOrEmail" class="block text-sm font-medium text-slate-700 mb-1">Username or Email</label>
                     <input id="usernameOrEmail" name="UsernameOrEmail" required placeholder="Enter username or email"
@@ -48,7 +51,7 @@
 
             <div class="flex items-center justify-between">
                 <a href="/login" class="text-sm font-medium text-violet-600 hover:underline">Back to sign in</a>
-                <button type="submit" class="group relative flex justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-violet-700 transition-colors shadow-sm">
+                <button type="submit" class="group relative flex justify-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-700">
                     Reset Password
                 </button>
             </div>
@@ -62,4 +65,9 @@
 
     private bool ShowError => !string.IsNullOrWhiteSpace(Error);
     private string ErrorMessage => string.IsNullOrWhiteSpace(Error) ? "Unable to reset password." : Error;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("initIcons");
+    }
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Dashboard/EmployeeDashboard.razor

@@ -12,18 +12,18 @@
 
 <div class="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8">
     <div class="mx-auto max-w-[1440px] space-y-6">
-        <div class="rounded-[32px] border border-slate-200 bg-white px-8 py-8 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+        <div class="rounded-xl border border-slate-200 bg-white px-8 py-8 shadow-sm">
             <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
                 <div>
-                    <p class="text-sm font-semibold uppercase tracking-[0.22em] text-violet-700">Team Member</p>
-                    <h2 class="mt-2 text-4xl font-bold tracking-tight text-slate-950">My Work</h2>
+                    <p class="text-sm font-semibold uppercase tracking-[0.08em] text-violet-700">Team Member</p>
+                    <h2 class="mt-2 text-3xl font-bold tracking-tight text-slate-950">My Work</h2>
                     <p class="mt-3 max-w-2xl text-sm text-slate-600">
                         Tasks, deadlines, and your progress in one place.
                     </p>
                 </div>
 
                 <div class="flex flex-wrap gap-3">
-                    <a href="/tasks/all" class="inline-flex items-center rounded-2xl bg-violet-700 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-violet-900/20 transition-colors hover:bg-violet-600">
+                    <a href="/tasks/all" class="inline-flex items-center rounded-2xl bg-violet-700 px-5 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-600">
                         <i data-lucide="check-square" class="mr-2 h-4 w-4"></i>
                         View Tasks
                     </a>
@@ -37,7 +37,7 @@
 
         @if (isLoading)
         {
-            <div class="rounded-[28px] border border-slate-200 bg-white px-6 py-12 text-center shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+            <div class="rounded-xl border border-slate-200 bg-white px-6 py-12 text-center shadow-sm">
                 <div class="mx-auto flex items-center justify-center gap-3 text-slate-500">
                     <svg class="h-5 w-5 animate-spin" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
@@ -49,7 +49,7 @@
         }
         else if (!string.IsNullOrWhiteSpace(errorMessage))
         {
-            <div class="rounded-[28px] border border-rose-200 bg-rose-50 px-6 py-5 text-sm text-rose-700 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+            <div class="rounded-xl border border-rose-200 bg-rose-50 px-6 py-5 text-sm text-rose-700 shadow-sm">
                 @errorMessage
             </div>
         }
@@ -58,7 +58,7 @@
             <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
                 @foreach (var metric in SummaryMetrics)
                 {
-                    <div class="rounded-[24px] border border-slate-200 bg-white p-5 shadow-[0_18px_50px_rgba(15,23,42,0.08)] transition-transform duration-200 hover:-translate-y-1">
+                    <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition-transform duration-200 hover:-translate-y-1">
                         <div class="flex items-center justify-between">
                             <div class="@metric.IconWrapClass">
                                 <i data-lucide="@metric.Icon" class="h-5 w-5"></i>
@@ -73,14 +73,14 @@
 
             <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,1fr)]">
                 <div class="space-y-5">
-                    <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                         <div class="flex items-center justify-between gap-4 border-b border-slate-100 px-6 py-5">
                             <div class="flex items-center gap-3">
                                 <span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-violet-200 bg-violet-50 text-violet-700">
                                     <i data-lucide="timer-reset" class="h-4 w-4"></i>
                                 </span>
                                 <div>
-                                    <h3 class="text-2xl font-bold text-slate-950">In Progress</h3>
+                                    <h3 class="text-xl font-bold text-slate-950">In Progress</h3>
                                     <p class="text-sm text-slate-500">Tasks currently being worked on</p>
                                 </div>
                             </div>
@@ -112,14 +112,14 @@
                         </div>
                     </div>
 
-                    <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                         <div class="flex items-center justify-between gap-4 border-b border-slate-100 px-6 py-5">
                             <div class="flex items-center gap-3">
                                 <span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-sky-200 bg-sky-50 text-sky-600">
                                     <i data-lucide="clock-3" class="h-4 w-4"></i>
                                 </span>
                                 <div>
-                                    <h3 class="text-2xl font-bold text-slate-950">To Do & Upcoming</h3>
+                                    <h3 class="text-xl font-bold text-slate-950">To Do & Upcoming</h3>
                                     <p class="text-sm text-slate-500">Tasks waiting for action or coming up soon</p>
                                 </div>
                             </div>
@@ -151,14 +151,14 @@
                         </div>
                     </div>
 
-                    <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                         <div class="flex items-center justify-between gap-4 border-b border-rose-100 px-6 py-5">
                             <div class="flex items-center gap-3">
                                 <span class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-rose-200 bg-rose-50 text-rose-600">
                                     <i data-lucide="triangle-alert" class="h-4 w-4"></i>
                                 </span>
                                 <div>
-                                    <h3 class="text-2xl font-bold text-slate-950">Overdue</h3>
+                                    <h3 class="text-xl font-bold text-slate-950">Overdue</h3>
                                     <p class="text-sm text-slate-500">Tasks past their due date</p>
                                 </div>
                             </div>
@@ -194,14 +194,14 @@
                 </div>
 
                 <div class="space-y-5">
-                    <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                         <div class="flex items-start justify-between gap-4">
                             <div>
                                 <div class="flex items-center gap-3">
                                     <button type="button" @onclick="PrevMonth" class="inline-flex h-8 w-8 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50">
                                         <i data-lucide="chevron-left" class="h-4 w-4"></i>
                                     </button>
-                                    <h3 class="text-2xl font-bold text-slate-950 min-w-[120px]">@CalendarMonthLabel</h3>
+                                    <h3 class="text-xl font-bold text-slate-950 min-w-[120px]">@CalendarMonthLabel</h3>
                                     <button type="button" @onclick="NextMonth" class="inline-flex h-8 w-8 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 transition-colors hover:bg-slate-50">
                                         <i data-lucide="chevron-right" class="h-4 w-4"></i>
                                     </button>
@@ -239,9 +239,9 @@
                         </div>
                     </div>
 
-                    <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                         <div class="border-b border-slate-100 px-6 py-5">
-                            <h3 class="text-2xl font-bold text-slate-950">Related Tasks</h3>
+                            <h3 class="text-xl font-bold text-slate-950">Related Tasks</h3>
                             <p class="mt-1 text-sm text-slate-500">Tasks marked on @SelectedDateLabel</p>
                         </div>
 
@@ -446,7 +446,7 @@
     private string GetStatusColor(AppTaskStatus statusId) => statusId switch
     {
         AppTaskStatus.Todo => "#22d3ee",
-        AppTaskStatus.InProgress => "#8b5cf6",
+        AppTaskStatus.InProgress => "#3b82f6",
         AppTaskStatus.Done => "#10b981",
         _ => "#94a3b8"
     };

TaskTrackingSystem.WebApp/Components/Pages/Features/Dashboard/Home.razor

@@ -19,11 +19,11 @@
 <PageTitle>Dashboard</PageTitle>
 
 <div class="space-y-8 text-slate-900">
-    <div class="rounded-[32px] border border-slate-200 bg-white px-8 py-8 text-slate-900 shadow-sm shadow-slate-200/60">
+    <div class="rounded-xl border border-slate-200 bg-white px-8 py-8 text-slate-900 shadow-sm shadow-slate-200/60">
         <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
             <div>
-                <p class="text-sm font-semibold uppercase tracking-[0.22em] text-violet-600">Overview</p>
-                <h2 class="mt-2 text-4xl font-bold tracking-tight text-slate-900">Welcome back, @currentUserFullName</h2>
+                <p class="text-sm font-semibold uppercase tracking-[0.08em] text-violet-600">Overview</p>
+                <h2 class="mt-2 text-3xl font-bold tracking-tight text-slate-900">Welcome back, @currentUserFullName</h2>
                 <p class="mt-3 max-w-2xl text-sm text-slate-600">
                     Projects, users, and team progress at a glance.
                 </p>
@@ -31,7 +31,7 @@
             <div class="flex flex-wrap gap-3">
                 @if (canCreateTask)
                 {
-                    <a href="/tasks/all" class="inline-flex items-center rounded-2xl bg-violet-600 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-violet-900/20 transition-colors hover:bg-violet-500">
+                    <a href="/tasks/all" class="inline-flex items-center rounded-2xl bg-violet-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-500">
                         <i data-lucide="plus" class="mr-2 h-4 w-4"></i>
                         New Task
                     </a>
@@ -45,7 +45,7 @@
     </div>
 
     <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        <div class="rounded-[24px] border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
+        <div class="rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
             <div class="flex items-center justify-between">
                 <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-violet-500 text-white">
                     <i data-lucide="users" class="h-5 w-5"></i>
@@ -56,7 +56,7 @@
             <p class="mt-2 text-sm text-slate-500">Total users</p>
         </div>
 
-        <div class="rounded-[24px] border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
+        <div class="rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
             <div class="flex items-center justify-between">
                 <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-sky-500 text-white">
                     <i data-lucide="folder-kanban" class="h-5 w-5"></i>
@@ -67,7 +67,7 @@
             <p class="mt-2 text-sm text-slate-500">Total projects</p>
         </div>
 
-        <div class="rounded-[24px] border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
+        <div class="rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
             <div class="flex items-center justify-between">
                 <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-500 text-white">
                     <i data-lucide="check-square" class="h-5 w-5"></i>
@@ -78,7 +78,7 @@
             <p class="mt-2 text-sm text-slate-500">Active tasks</p>
         </div>
 
-        <div class="rounded-[24px] border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
+        <div class="rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50">
             <div class="flex items-center justify-between">
                 <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-500 text-white">
                     <i data-lucide="trending-up" class="h-5 w-5"></i>
@@ -91,10 +91,10 @@
     </div>
 
     <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,1fr)]">
-        <div class="rounded-[28px] border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
+        <div class="rounded-xl border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
             <div class="flex items-start justify-between gap-4">
                 <div>
-                    <h3 class="text-2xl font-bold text-slate-900">Project Activity</h3>
+                    <h3 class="text-xl font-bold text-slate-900">Project Activity</h3>
                     <p class="mt-1 text-sm text-slate-500">Active vs completed tasks per month.</p>
                 </div>
                 <div class="text-sm text-slate-500">@ActivityRangeLabel</div>
@@ -105,8 +105,8 @@
                     <svg viewBox="0 0 760 340" class="h-[340px] w-full">
                         <defs>
                             <linearGradient id="activityFill" x1="0" x2="0" y1="0" y2="1">
-                                <stop offset="0%" stop-color="#7c3aed" stop-opacity="0.18" />
-                                <stop offset="100%" stop-color="#7c3aed" stop-opacity="0" />
+                                <stop offset="0%" stop-color="#2563eb" stop-opacity="0.18" />
+                                <stop offset="100%" stop-color="#2563eb" stop-opacity="0" />
                             </linearGradient>
                         </defs>
 
@@ -123,14 +123,14 @@
                         }
 
                         <path d="@ActivityAreaPath" fill="url(#activityFill)" />
-                        <path d="@ActivityLinePath" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="@ActivityLinePath" fill="none" stroke="#2563eb" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
 
                         @for (var i = 0; i < ActivityMonths.Count; i++)
                         {
                             var index = i;
                             var point = ActivityPoints[i];
                             <circle cx="@point.X" cy="@point.Y" r="5"
-                                    fill="#7c3aed"
+                                    fill="#2563eb"
                                     stroke="#ddd6fe"
                                     stroke-width="3"
                                     @onmouseenter="() => SetHoveredActivity(index)"
@@ -158,8 +158,8 @@
             </div>
         </div>
 
-        <div class="rounded-[28px] border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
-            <h3 class="text-2xl font-bold text-slate-900">Task Distribution</h3>
+        <div class="rounded-xl border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
+            <h3 class="text-xl font-bold text-slate-900">Task Distribution</h3>
             <p class="mt-1 text-sm text-slate-500">@TotalTasksCount total tasks</p>
 
             <div class="mt-4 flex justify-center">
@@ -183,10 +183,10 @@
     </div>
 
     <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.25fr)_minmax(340px,0.75fr)]">
-        <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm shadow-slate-200/60">
+        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm shadow-slate-200/60">
             <div class="flex items-center justify-between gap-4">
                 <div>
-                    <h3 class="text-2xl font-bold text-slate-900">All Projects</h3>
+                    <h3 class="text-xl font-bold text-slate-900">All Projects</h3>
                     <p class="mt-1 text-sm text-slate-500">A quick snapshot of the current project list.</p>
                 </div>
                 <a href="/projects/all" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-violet-700 shadow-sm transition-colors hover:bg-violet-50">
@@ -221,10 +221,10 @@
             </div>
         </div>
 
-        <div class="rounded-[28px] border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
+        <div class="rounded-xl border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
             <div class="flex items-start justify-between gap-4">
                 <div>
-                    <h3 class="text-2xl font-bold text-slate-900">Calendar</h3>
+                    <h3 class="text-xl font-bold text-slate-900">Calendar</h3>
                     <p class="mt-1 text-sm text-slate-500">Today and upcoming project starts.</p>
                 </div>
                 <div class="text-right">
@@ -272,10 +272,10 @@
         </div>
     </div>
 
-    <div class="rounded-[28px] border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/60">
+    <div class="rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/60">
         <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
             <div>
-                <h3 class="text-2xl font-bold text-slate-900">Project Timeline</h3>
+                <h3 class="text-xl font-bold text-slate-900">Project Timeline</h3>
                 <p class="mt-1 text-sm text-slate-500">Browse every project in a gantt view and adjust the month window below.</p>
             </div>
             <a href="/projects/all" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-violet-700 shadow-sm transition-colors hover:bg-violet-50">
@@ -283,7 +283,7 @@
             </a>
         </div>
 
-        <div class="mt-4 flex flex-wrap items-end gap-3 rounded-3xl border border-slate-200 bg-slate-50 px-3 py-3">
+        <div class="mt-4 flex flex-wrap items-end gap-3 rounded-xl border border-slate-200 bg-slate-50 px-3 py-3">
             <div class="flex flex-col gap-1">
                 <label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">From</label>
                 <input type="month"
@@ -449,7 +449,7 @@
             var pieData = new[]
             {
                 new { name = "Completed", y = completedCount, color = "#10b981" },
-                new { name = "In Progress", y = inProgressCount, color = "#8b5cf6" },
+                new { name = "In Progress", y = inProgressCount, color = "#3b82f6" },
                 new { name = "To Do", y = todoCount, color = "#06b6d4" },
                 new { name = "Overdue", y = overdueCount, color = "#ef4444" }
             };
@@ -624,7 +624,7 @@
             overdueCount
         };
 
-        var colors = new[] { "#10b981", "#8b5cf6", "#06b6d4", "#ef4444" };
+        var colors = new[] { "#10b981", "#3b82f6", "#06b6d4", "#ef4444" };
 
         // 2. Adjust total so it maps 100% cleanly to the math displayed
         var total = Math.Max(TotalTasksCount, 1);
@@ -907,7 +907,7 @@
     {
         var palette = new[]
         {
-            "#7c3aed",
+            "#2563eb",
             "#0ea5e9",
             "#10b981",
             "#f59e0b",

TaskTrackingSystem.WebApp/Components/Pages/Features/Dashboard/ManagerDashboard.razor

@@ -11,11 +11,11 @@
 
 <div class="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8">
     <div class="mx-auto max-w-[1440px] space-y-6">
-        <div class="rounded-[32px] border border-slate-200 bg-white px-8 py-8 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+        <div class="rounded-xl border border-slate-200 bg-white px-8 py-8 shadow-sm">
             <div class="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
                 <div>
-                    <p class="text-sm font-semibold uppercase tracking-[0.22em] text-violet-700">Team View</p>
-                    <h2 class="mt-2 text-4xl font-bold tracking-tight text-slate-950">My Projects</h2>
+                    <p class="text-sm font-semibold uppercase tracking-[0.08em] text-violet-700">Team View</p>
+                    <h2 class="mt-2 text-3xl font-bold tracking-tight text-slate-950">My Projects</h2>
                     <p class="mt-3 max-w-2xl text-sm text-slate-600">
                         Track your team, project health, and weekly task progress in one place.
                         @if (summary.PendingTasksCount > 0)
@@ -26,7 +26,7 @@
                 </div>
 
                 <div class="flex flex-wrap gap-3">
-                    <a href="/projects/all" class="inline-flex items-center rounded-2xl bg-violet-700 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-violet-900/20 transition-colors hover:bg-violet-600">
+                    <a href="/projects/all" class="inline-flex items-center rounded-2xl bg-violet-700 px-5 py-3 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-600">
                         <i data-lucide="folder-kanban" class="mr-2 h-4 w-4"></i>
                         All Projects
                     </a>
@@ -40,7 +40,7 @@
 
         @if (isLoading)
         {
-            <div class="rounded-[28px] border border-slate-200 bg-white px-6 py-12 text-center shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+            <div class="rounded-xl border border-slate-200 bg-white px-6 py-12 text-center shadow-sm">
                 <div class="mx-auto flex items-center justify-center gap-3 text-slate-500">
                     <svg class="h-5 w-5 animate-spin" viewBox="0 0 24 24">
                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
@@ -52,7 +52,7 @@
         }
         else if (!string.IsNullOrWhiteSpace(errorMessage))
         {
-            <div class="rounded-[28px] border border-rose-200 bg-rose-50 px-6 py-5 text-sm text-rose-700 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+            <div class="rounded-xl border border-rose-200 bg-rose-50 px-6 py-5 text-sm text-rose-700 shadow-sm">
                 @errorMessage
             </div>
         }
@@ -61,7 +61,7 @@
             <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
                 @foreach (var metric in SummaryMetrics)
                 {
-                    <div class="group relative overflow-hidden rounded-[24px] border border-slate-200 bg-white p-5 shadow-[0_18px_50px_rgba(15,23,42,0.08)] transition-transform duration-200 hover:-translate-y-1">
+                    <div class="group relative overflow-hidden rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition-transform duration-200 hover:-translate-y-1">
                         <div class="relative flex items-center justify-between">
                             <div class="@metric.IconWrapClass">
                                 <i data-lucide="@metric.Icon" class="h-5 w-5"></i>
@@ -75,10 +75,10 @@
             </div>
 
             <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,1fr)]">
-                <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                     <div class="flex items-start justify-between gap-4">
                         <div>
-                            <h3 class="text-2xl font-bold text-slate-950">Weekly Task Progress</h3>
+                            <h3 class="text-xl font-bold text-slate-950">Weekly Task Progress</h3>
                             <p class="mt-1 text-sm text-slate-500">Completed vs pending tasks per week</p>
                         </div>
                         <div class="text-sm text-slate-500">@WeeklyRangeLabel</div>
@@ -103,7 +103,7 @@
                                 <g @onmouseenter="() => SetHoveredWeek(index)" @onmouseleave="ClearHoveredWeek">
                                     <rect x="@week.HoverX" y="40" width="@week.HoverWidth" height="160" rx="18" fill="@(hoveredWeekIndex == index ? "#f8fafc" : "transparent")" opacity="@(hoveredWeekIndex == index ? "1" : "0")" />
 
-                                    <rect x="@week.CompletedX" y="@(week.BaseY - week.CompletedHeight)" width="@BarWidth" height="@week.CompletedHeight" rx="8" fill="#8b5cf6" />
+                                    <rect x="@week.CompletedX" y="@(week.BaseY - week.CompletedHeight)" width="@BarWidth" height="@week.CompletedHeight" rx="8" fill="#3b82f6" />
                                     <rect x="@week.PendingX" y="@(week.BaseY - week.PendingHeight)" width="@BarWidth" height="@week.PendingHeight" rx="8" fill="#14b8a6" />
 
                                     <text x="@week.LabelX" y="246" text-anchor="middle" font-size="13" fill="#64748b">@week.Label</text>
@@ -113,7 +113,7 @@
 
                         @if (hoveredWeek is not null)
                         {
-                            <div class="pointer-events-none absolute z-20 rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-[0_18px_50px_rgba(15,23,42,0.12)]"
+                            <div class="pointer-events-none absolute z-20 rounded-2xl border border-slate-200 bg-white px-4 py-3 shadow-lg"
                                  style="@HoveredWeekTooltipStyle">
                                 <div class="text-sm font-semibold text-slate-950">@hoveredWeek.Label</div>
                                 <div class="mt-2 text-sm text-violet-700">Completed: @hoveredWeek.Completed</div>
@@ -139,8 +139,8 @@
                     </div>
                 </div>
 
-                <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
-                    <h3 class="text-2xl font-bold text-slate-950">Team Progress</h3>
+                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <h3 class="text-xl font-bold text-slate-950">Team Progress</h3>
                     <p class="mt-1 text-sm text-slate-500">Members with active workload</p>
 
                     <div class="mt-6 max-h-[460px] space-y-4 overflow-y-auto pr-1">
@@ -181,10 +181,10 @@
             </div>
 
             <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
-                <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                     <div class="flex items-start justify-between gap-4">
                         <div>
-                            <h3 class="text-2xl font-bold text-slate-950">@CalendarMonthLabel</h3>
+                            <h3 class="text-xl font-bold text-slate-950">@CalendarMonthLabel</h3>
                             <p class="mt-1 text-sm text-slate-500">@CalendarTodayLabel</p>
                         </div>
                     </div>
@@ -214,8 +214,8 @@
                     </div>
                 </div>
 
-                <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
-                    <h3 class="text-2xl font-bold text-slate-950">Upcoming Deadlines</h3>
+                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <h3 class="text-xl font-bold text-slate-950">Upcoming Deadlines</h3>
                     <p class="mt-1 text-sm text-slate-500">Projects ending soon</p>
 
                     <div class="mt-6 max-h-[460px] space-y-3 overflow-y-auto pr-1">
@@ -243,10 +243,10 @@
                 </div>
             </div>
 
-            <div class="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-[0_18px_50px_rgba(15,23,42,0.08)]">
+            <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                 <div class="flex items-center justify-between gap-4 border-b border-slate-100 px-6 py-5">
                     <div>
-                        <h3 class="text-2xl font-bold text-slate-950">My Projects</h3>
+                        <h3 class="text-xl font-bold text-slate-950">My Projects</h3>
                         <p class="mt-1 text-sm text-slate-500">Click "View Tasks" to drill in</p>
                     </div>
                     <a href="/projects/all" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-violet-700 shadow-sm transition-colors hover:bg-slate-50">
@@ -281,8 +281,8 @@
 
                                     <div class="flex flex-col items-start gap-3 lg:items-end">
                                         <div class="text-right">
-                                            <div class="text-2xl font-bold text-slate-950">@project.ProgressPercentage.ToString("F0")%</div>
-                                            <div class="text-xs uppercase tracking-[0.22em] text-slate-500">Complete</div>
+                                            <div class="text-xl font-bold text-slate-950">@project.ProgressPercentage.ToString("F0")%</div>
+                                            <div class="text-xs uppercase tracking-[0.08em] text-slate-500">Complete</div>
                                         </div>
                                         <button @onclick="() => ViewProjectTasks(project.Id)" class="inline-flex items-center rounded-2xl bg-violet-700 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-violet-600">
                                             <i data-lucide="eye" class="mr-2 h-4 w-4"></i>
@@ -449,7 +449,7 @@
     private List<ProjectCardViewModel> BuildProjectCards()
     {
         var progressByProject = projectProgress.ToDictionary(item => item.ProjectId, item => item);
-        var palette = new[] { "#7c3aed", "#0ea5e9", "#10b981", "#f59e0b", "#f97316" };
+        var palette = new[] { "#2563eb", "#0ea5e9", "#10b981", "#f59e0b", "#f97316" };
 
         return projects
             .OrderByDescending(project => progressByProject.TryGetValue(project.Id, out var progress) ? progress.CompletionPercentage : 0)
@@ -494,7 +494,7 @@
 
     private List<TeamProgressViewModel> BuildTeamProgress()
     {
-        var palette = new[] { "#7c3aed", "#0ea5e9", "#10b981", "#f59e0b", "#f97316", "#ec4899" };
+        var palette = new[] { "#2563eb", "#0ea5e9", "#10b981", "#f59e0b", "#f97316", "#ec4899" };
 
         return users
             .Select((user, index) =>
@@ -695,7 +695,7 @@
     {
         var palette = new[]
         {
-            "#7c3aed",
+            "#2563eb",
             "#0ea5e9",
             "#10b981",
             "#f59e0b",

TaskTrackingSystem.WebApp/Components/Pages/Features/Issues/AddIssue.razor

@@ -129,7 +129,7 @@
 
                         @if (isAssigneeDropdownOpen)
                         {
-                            <div class="absolute bottom-full left-0 z-30 mb-2 w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-[0_18px_40px_rgba(15,23,42,0.16)]">
+                            <div class="absolute bottom-full left-0 z-30 mb-2 w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-lg">
                                 <div class="flex items-center justify-end">
                                     <button type="button"
                                             @onclick="CloseAssigneeDropdown"

TaskTrackingSystem.WebApp/Components/Pages/Features/Issues/Issues.razor

@@ -200,7 +200,7 @@
 @if (showModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl mx-4 overflow-hidden">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-2xl mx-4 overflow-hidden">
             <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
                 <div>
                     <h3 class="text-lg font-semibold text-slate-900">Edit Issue</h3>

TaskTrackingSystem.WebApp/Components/Pages/Features/Projects/ProjectAssign.razor

@@ -90,7 +90,7 @@
                 else
                 {
                     <!-- Selected Project Header -->
-                    <div class="p-6 border-b border-slate-100 bg-gradient-to-r from-violet-50/40 via-white to-white flex flex-col md:flex-row md:items-center justify-between gap-4">
+                    <div class="p-6 border-b border-slate-100 bg-slate-50 flex flex-col md:flex-row md:items-center justify-between gap-4">
                         <div>
                             <span class="text-[10px] font-bold text-violet-600 uppercase tracking-wider">Currently Managing</span>
                             <h3 class="text-xl font-bold text-slate-900">@SelectedProject.Name</h3>

TaskTrackingSystem.WebApp/Components/Pages/Features/Projects/Projects.razor

@@ -132,7 +132,7 @@
 @if (showModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-lg mx-4 overflow-hidden">
             <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
                 <h3 class="text-lg font-semibold text-slate-900">@(isEditing ? "Edit Project" : "New Project")</h3>
                 <button @onclick="CloseModal" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-all">
@@ -209,8 +209,8 @@
 @if (showAssignModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
-            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-violet-50 to-white">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-lg mx-4 overflow-hidden">
+            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50">
                 <div>
                     <h3 class="text-lg font-semibold text-slate-900">Assign Members</h3>
                     <p class="text-xs text-slate-500 mt-0.5">Project: <span class="font-semibold text-violet-700">@assigningProjectName</span></p>

TaskTrackingSystem.WebApp/Components/Pages/Features/Roles/Roles.razor

@@ -83,7 +83,7 @@
                                         <span class="text-sm font-semibold text-slate-900">@role.Name</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4 text-sm text-slate-500 max-w-xs truncate">@(role.Description ?? "—")</td>
+                                <td class="px-6 py-4 text-sm text-slate-500 max-w-xs truncate">@(role.Description ?? "-")</td>
                                 <td class="px-6 py-4 text-sm text-slate-400">@DisplayFormats.Date(role.CreatedAt)</td>
                                 <td class="px-6 py-4 text-right">
                                     <div class="flex items-center justify-end space-x-2">
@@ -135,11 +135,11 @@
 @if (showRoleModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-2xl w-full mx-4 flex flex-col overflow-hidden"
+        <div class="bg-white rounded-2xl shadow-lg w-full mx-4 flex flex-col overflow-hidden"
              style="max-width: @(isEditing ? "30rem" : "58rem"); max-height: 88vh;">
 
             <!-- Header -->
-            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white shrink-0">
+            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50 shrink-0">
                 <div class="flex items-center gap-3">
                     <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-violet-600 text-white">
                         <i data-lucide="@(isEditing ? "pencil" : "shield-plus")" class="h-4 w-4"></i>
@@ -255,7 +255,7 @@
                                             var parentChecked = formSelectedAccessCodes.Contains(parent.MenuCode);
 
                                             <div class="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                                                <label class="flex items-start gap-3 px-4 py-3 bg-gradient-to-r from-slate-50 to-white cursor-pointer hover:bg-slate-50 transition-colors">
+                                                <label class="flex items-start gap-3 px-4 py-3 bg-slate-50 cursor-pointer hover:bg-slate-50 transition-colors">
                                                     <input type="checkbox" checked="@parentChecked"
                                                            @onchange="(e) => ToggleAccessSelection(parent, (bool)(e.Value ?? false), isForm: true)"
                                                            class="mt-0.5 h-4 w-4 rounded border-slate-300 accent-violet-600" />
@@ -387,16 +387,16 @@
 @if (showAccessModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-6xl mx-4 overflow-hidden flex flex-col" style="max-height: 88vh;">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-6xl mx-4 overflow-hidden flex flex-col" style="max-height: 88vh;">
 
             <!-- Header -->
-            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-gradient-to-r from-violet-50 to-indigo-50">
+            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50">
                 <div class="flex items-center gap-3">
                     <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-violet-100 text-violet-600">
                         <i data-lucide="shield-check" class="h-4 w-4"></i>
                     </div>
                     <div>
-                        <h3 class="text-base font-semibold text-slate-900">Role Access — <span class="text-violet-700">@selectedRoleName</span></h3>
+                        <h3 class="text-base font-semibold text-slate-900">Role Access - <span class="text-violet-700">@selectedRoleName</span></h3>
                         <p class="text-xs text-slate-500">Configure access and permissions</p>
                     </div>
                 </div>
@@ -459,7 +459,7 @@
                                 var parentChecked = selectedAccessCodes.Contains(parent.MenuCode);
 
                                 <div class="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                                    <label class="flex items-start gap-3 px-4 py-3 bg-gradient-to-r from-slate-50 to-white cursor-pointer hover:bg-slate-50 transition-colors">
+                                    <label class="flex items-start gap-3 px-4 py-3 bg-slate-50 cursor-pointer hover:bg-slate-50 transition-colors">
                                         <input type="checkbox" checked="@parentChecked"
                                                @onchange="(e) => ToggleAccessSelection(parent, (bool)(e.Value ?? false), isForm: false)"
                                                class="mt-0.5 h-4 w-4 rounded border-slate-300 accent-violet-600" />

TaskTrackingSystem.WebApp/Components/Pages/Features/Tasks/KanbanBoard.razor

@@ -145,7 +145,7 @@
 @if (showTaskModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-lg mx-4 overflow-hidden">
             <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
                 <h3 class="text-lg font-semibold text-slate-900">New Task</h3>
                 <button @onclick="CloseTaskModal" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-all">
@@ -607,7 +607,7 @@
         TaskPriority.Low => "Low",
         TaskPriority.Medium => "Medium",
         TaskPriority.High => "High",
-        _ => "—"
+        _ => "-"
     };
 
     private record KanbanColumn(AppTaskStatus StatusId, string Name, string DotColor);

TaskTrackingSystem.WebApp/Components/Pages/Features/Tasks/TaskAssign.razor

@@ -122,7 +122,7 @@
                 else
                 {
                     <!-- Selected Task Details -->
-                    <div class="p-6 border-b border-slate-100 bg-gradient-to-r from-violet-50/40 via-white to-white">
+                    <div class="p-6 border-b border-slate-100 bg-slate-50">
                         <div class="flex items-center gap-2 mb-2">
                             <span class="text-[10px] font-bold text-violet-600 uppercase tracking-wider">Currently Assigning Task</span>
                             <span class="text-[10px] font-mono font-semibold text-slate-400 bg-slate-100 px-1.5 py-0.5 rounded">TASK-#@SelectedTask.Id</span>
@@ -552,6 +552,6 @@
         TaskPriority.Low => "Low",
         TaskPriority.Medium => "Medium",
         TaskPriority.High => "High",
-        _ => "—"
+        _ => "-"
     };
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Tasks/TaskDetails.razor

@@ -81,7 +81,7 @@
                     }
                     else
                     {
-                        <h2 class="text-2xl font-bold text-slate-900 leading-tight flex items-center gap-2 group">
+                        <h2 class="text-xl font-bold text-slate-900 leading-tight flex items-center gap-2 group">
                             @task.Title
                             @if (hasTaskManagePermission)
                             {
@@ -661,7 +661,7 @@
         }
     }
 
-    // ——— CONFIRM DIALOG LOGIC —————————————————————————————————————————————————
+    // --- CONFIRM DIALOG LOGIC -------------------------------------------------
 
     private async Task ExecuteConfirmAction()
     {
@@ -679,7 +679,7 @@
         confirmAction = null;
     }
 
-    // ——— DISPLAY UTILITIES ————————————————————————————————————————————————————
+    // --- DISPLAY UTILITIES ----------------------------------------------------
 
     private string GetStatusLabel(AppTaskStatus statusId) => statusId switch
     {

TaskTrackingSystem.WebApp/Components/Pages/Features/Tasks/Tasks.razor

@@ -194,7 +194,7 @@
 @if (showModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-lg mx-4 overflow-hidden">
             <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
                 <h3 class="text-lg font-semibold text-slate-900">@(isEditing ? "Edit Task" : "New Task")</h3>
                 <button @onclick="CloseModal" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-all">
@@ -271,7 +271,7 @@
 
                             @if (isAssigneeDropdownOpen)
                             {
-                                <div class="absolute bottom-full left-0 z-30 mb-2 w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-[0_18px_40px_rgba(15,23,42,0.16)]">
+                                <div class="absolute bottom-full left-0 z-30 mb-2 w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-lg">
                                     <div class="flex items-center justify-end">
                                         <button type="button"
                                                 @onclick="CloseAssigneeDropdown"
@@ -994,7 +994,7 @@
         TaskPriority.Low => "Low",
         TaskPriority.Medium => "Medium",
         TaskPriority.High => "High",
-        _ => "—"
+        _ => "-"
     };
 
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Users/Users.razor

@@ -104,7 +104,7 @@
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 text-sm text-slate-600">@user.Email</td>
-                                <td class="px-6 py-4 text-sm text-slate-500">@(user.Phone ?? "—")</td>
+                                <td class="px-6 py-4 text-sm text-slate-500">@(user.Phone ?? "-")</td>
                                 <td class="px-6 py-4">
                                     @{ var role = roles.FirstOrDefault(r => r.Id == user.RoleId); }
                                     <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-700">
@@ -157,7 +157,7 @@
 @if (showModal)
 {
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
+        <div class="bg-white rounded-2xl shadow-lg w-full max-w-lg mx-4 overflow-hidden">
             <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
                 <h3 class="text-lg font-semibold text-slate-900">@(isEditing ? "Edit User" : "New User")</h3>
                 <button @onclick="CloseModal" class="rounded-lg p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-all">

TaskTrackingSystem.WebApp/Components/Partial/ConfirmDialog.razor

@@ -1,7 +1,7 @@
 @if (IsVisible)
 {
     <div class="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm">
-        <div class="rounded-2xl shadow-xl w-full max-w-sm mx-4 overflow-hidden animate-in border border-slate-100 bg-white">
+        <div class="w-full max-w-sm mx-4 overflow-hidden rounded-lg border border-slate-100 bg-white shadow-lg animate-in">
             <div class="p-6 text-center">
                 <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full mb-4" style="background-color: @GetIconBg(); color: @GetIconColor();">
                     <i data-lucide="@Icon" class="h-7 w-7"></i>
@@ -16,7 +16,7 @@
                         Cancel
                     </button>
                 }
-                <button @onclick="OnConfirm" class="flex-1 rounded-lg px-4 py-2.5 text-sm font-medium text-white transition-colors" style="background-color: @GetButtonBg();">
+                <button @onclick="OnConfirm" class="flex-1 rounded-lg px-4 py-2.5 text-sm font-medium text-white transition-colors @ButtonClass" style="@ConfirmButtonStyle">
                     @ConfirmText
                 </button>
             </div>
@@ -37,24 +37,28 @@
     [Parameter] public EventCallback OnConfirm { get; set; }
     [Parameter] public EventCallback OnCancel { get; set; }
 
+    private string ConfirmButtonStyle => string.IsNullOrWhiteSpace(ButtonClass)
+        ? $"background-color: {GetButtonBg()};"
+        : string.Empty;
+
     private string GetIconBg()
     {
         if (Icon.Contains("trash") || Icon.Contains("alert"))
-            return "var(--status-warning-bg)";
+            return "var(--status-danger-bg)";
         return "var(--status-success-bg)";
     }
 
     private string GetIconColor()
     {
         if (Icon.Contains("trash") || Icon.Contains("alert"))
-            return "var(--brand-accent)";
+            return "var(--status-danger-text)";
         return "var(--brand-primary)";
     }
 
     private string GetButtonBg()
     {
         if (Icon.Contains("trash") || Icon.Contains("alert"))
-            return "var(--brand-accent)";
+            return "var(--status-danger-text)";
         return "var(--brand-primary)";
     }
 }

TaskTrackingSystem.WebApp/Components/Partial/EmptyState.razor

@@ -2,9 +2,11 @@
 
 <tr>
     <td colspan="@ColSpan" class="px-6 py-12 text-center">
-        <i data-lucide="@Icon" class="h-10 w-10 mx-auto text-slate-300 mb-3"></i>
-        <p class="text-sm font-medium text-slate-500">@Title</p>
-        <p class="text-xs text-slate-400 mt-1">@Subtitle</p>
+        <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 text-slate-400">
+            <i data-lucide="@Icon" class="h-6 w-6"></i>
+        </div>
+        <p class="text-sm font-semibold text-slate-700">@Title</p>
+        <p class="mx-auto mt-1 max-w-sm text-xs leading-5 text-slate-500">@Subtitle</p>
     </td>
 </tr>
 

TaskTrackingSystem.WebApp/Components/Partial/LanguageToggle.razor

@@ -4,7 +4,7 @@
 
 <button type="button"
         @onclick="ToggleLanguage"
-        class="inline-flex h-9 items-center justify-center rounded-lg border border-slate-200 bg-white px-3 text-slate-600 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+        class="control-button px-3"
         title="@ButtonTitle"
         aria-label="@ButtonTitle">
     <span class="text-xs font-semibold tracking-wide">@ButtonLabel</span>

TaskTrackingSystem.WebApp/Components/Partial/LoadingSpinner.razor

@@ -1,6 +1,6 @@
 @* Partial/LoadingSpinner.razor - Reusable loading state component *@
 
-<div class="flex items-center justify-center py-20">
+<div class="surface-panel flex items-center justify-center py-14">
     <div class="flex items-center space-x-3 text-slate-500">
         <svg class="animate-spin h-5 w-5" viewBox="0 0 24 24">
             <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>

TaskTrackingSystem.WebApp/Components/Partial/NotificationBell.razor

@@ -8,11 +8,11 @@
 <div class="relative">
     <button type="button"
             @onclick="ToggleOpenAsync"
-            class="relative rounded-full p-2 text-slate-400 hover:bg-slate-50 hover:text-violet-600 transition-all">
+            class="control-button relative">
         <i data-lucide="bell" class="h-5 w-5"></i>
         @if (UnreadCount > 0)
         {
-            <span class="absolute right-1 top-1 min-w-4 h-4 px-1 rounded-full bg-violet-600 text-white text-[10px] font-bold flex items-center justify-center">
+            <span class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-rose-600 px-1 text-[10px] font-bold text-white">
                 @(UnreadCount > 99 ? "99+" : UnreadCount.ToString())
             </span>
         }
@@ -20,8 +20,8 @@
 
     @if (IsOpen)
     {
-        <div class="absolute right-0 mt-3 w-[380px] max-w-[calc(100vw-2rem)] rounded-2xl border border-slate-200 bg-white shadow-2xl z-50 overflow-hidden">
-            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-slate-50">
+        <div class="absolute right-0 z-50 mt-3 w-[380px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg border border-slate-200 bg-white shadow-lg">
+            <div class="flex items-center justify-between px-4 py-3 border-b border-slate-100 bg-slate-50/80">
                 <div>
                     <p class="text-sm font-semibold text-slate-900">Notifications</p>
                     <p class="text-xs text-slate-500">@UnreadCount unread</p>
@@ -62,10 +62,10 @@
                     @foreach (var item in Notifications)
                     {
                         <button type="button"
-                                class="w-full text-left px-4 py-3 border-b border-slate-100 hover:bg-slate-50 transition-colors @(item.IsRead ? "bg-white" : "bg-violet-50/40")"
+                                class="w-full border-b border-slate-100 px-4 py-3 text-left transition-colors hover:bg-slate-50 @(item.IsRead ? "bg-white" : "bg-violet-50/70")"
                                 @onclick="() => OpenNotificationAsync(item)">
                             <div class="flex items-start gap-3">
-                                <div class="mt-0.5 h-9 w-9 rounded-full flex items-center justify-center @(item.IsRead ? "bg-slate-100 text-slate-500" : "bg-violet-100 text-violet-700")">
+                                <div class="mt-0.5 flex h-9 w-9 items-center justify-center rounded-full @(item.IsRead ? "bg-slate-100 text-slate-500" : "bg-violet-100 text-violet-700")">
                                     <i data-lucide="bell-ring" class="h-4 w-4"></i>
                                 </div>
                                 <div class="min-w-0 flex-1">

TaskTrackingSystem.WebApp/Components/Partial/Pagination.razor

@@ -1,6 +1,6 @@
 @* Partial/Pagination.razor - Reusable pagination component *@
 
-<div class="flex flex-wrap items-center justify-between gap-3 px-6 py-3 border-t border-slate-100 bg-slate-50/40">
+<div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-100 bg-slate-50/60 px-5 py-3">
     <div class="text-xs text-slate-500">
         @if (TotalCount == 0)
         {
@@ -18,7 +18,7 @@
         <div class="flex items-center gap-2 text-xs text-slate-500">
             <span>Rows per page</span>
             <select value="@PageSize" @onchange="HandlePageSizeChange"
-                    class="rounded-md border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 transition-all">
+                    class="rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-600 transition-all">
                 <option value="5">5</option>
                 <option value="10">10</option>
                 <option value="20">20</option>
@@ -28,25 +28,21 @@
 
         <div class="flex items-center gap-1">
             <button @onclick="() => GoToPage(1)" disabled="@(CurrentPage <= 1)"
-                    class="inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-40"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all hover:bg-white hover:text-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
                     title="First page">
-                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
-                </svg>
+                <i data-lucide="chevrons-left" class="h-3.5 w-3.5"></i>
             </button>
             <button @onclick="() => GoToPage(CurrentPage - 1)" disabled="@(CurrentPage <= 1)"
-                    class="inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-40"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all hover:bg-white hover:text-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
                     title="Previous page">
-                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
-                </svg>
+                <i data-lucide="chevron-left" class="h-3.5 w-3.5"></i>
             </button>
 
             @foreach (var p in GetVisiblePages())
             {
                 if (p == -1)
                 {
-                    <span class="inline-flex h-7 w-7 items-center justify-center text-xs text-slate-400">...</span>
+                    <span class="inline-flex h-8 w-8 items-center justify-center text-xs text-slate-400">...</span>
                 }
                 else
                 {
@@ -58,18 +54,14 @@
             }
 
             <button @onclick="() => GoToPage(CurrentPage + 1)" disabled="@(CurrentPage >= TotalPages)"
-                    class="inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-40"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all hover:bg-white hover:text-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
                     title="Next page">
-                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
-                </svg>
+                <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
             </button>
             <button @onclick="() => GoToPage(TotalPages)" disabled="@(CurrentPage >= TotalPages)"
-                    class="inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600 disabled:cursor-not-allowed disabled:opacity-40"
+                    class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all hover:bg-white hover:text-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
                     title="Last page">
-                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
-                </svg>
+                <i data-lucide="chevrons-right" class="h-3.5 w-3.5"></i>
             </button>
         </div>
     </div>
@@ -84,8 +76,8 @@
     [Parameter] public EventCallback<int> OnPageSizeChanged { get; set; }
 
     private string GetPageButtonClass(int p) => p == CurrentPage
-        ? "inline-flex h-7 w-7 items-center justify-center rounded-md text-xs font-medium transition-all bg-violet-600 text-white shadow-sm"
-        : "inline-flex h-7 w-7 items-center justify-center rounded-md text-xs font-medium transition-all text-slate-600 hover:bg-slate-100";
+        ? "inline-flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold transition-all bg-violet-600 text-white shadow-sm"
+        : "inline-flex h-8 w-8 items-center justify-center rounded-lg text-xs font-semibold transition-all text-slate-600 hover:bg-white";
 
     private async Task GoToPage(int p)
     {

TaskTrackingSystem.WebApp/Components/Partial/SuccessAlert.razor

@@ -3,8 +3,8 @@
 
 @if (!string.IsNullOrEmpty(displayMessage))
 {
-    <div class="fixed top-6 right-6 z-[100] pointer-events-none">
-        <div class="flex items-center gap-3 rounded-xl bg-violet-600 text-white px-5 py-3 shadow-lg border border-violet-500/30 animate-pulse-once">
+    <div class="fixed right-4 top-4 z-[100] pointer-events-none sm:right-6 sm:top-6">
+        <div class="flex items-center gap-3 rounded-lg border border-teal-500/20 bg-teal-600 px-4 py-3 text-white shadow-lg animate-pulse-once">
             <i data-lucide="check-circle" class="h-5 w-5 shrink-0"></i>
             <span class="text-sm font-semibold">@displayMessage</span>
         </div>

TaskTrackingSystem.WebApp/Components/Partial/ThemeToggle.razor

@@ -3,7 +3,7 @@
 
 <button type="button"
         @onclick="ToggleTheme"
-        class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400"
+        class="control-button"
         title="@ButtonTitle"
         aria-label="@ButtonTitle"
         aria-pressed="@isDarkMode.ToString().ToLowerInvariant()">

TaskTrackingSystem.WebApp/wwwroot/app.css

@@ -1,29 +1,76 @@
 :root {
-    --brand-primary: #111827;
-    --brand-accent: #374151;
-    --app-bg: #F8F9FA;
-    --text-primary: #111827;
-    --text-muted: #6B7280;
-    --status-success-bg: #D1FAE5;
-    --status-warning-bg: #FFE4E6;
+    --brand-primary: #2563EB;
+    --brand-primary-hover: #1D4ED8;
+    --brand-accent: #0F766E;
+    --app-bg: #F6F8FB;
+    --surface: #FFFFFF;
+    --surface-muted: #F8FAFC;
+    --surface-raised: #FFFFFF;
+    --border: #E2E8F0;
+    --border-strong: #CBD5E1;
+    --text-primary: #0F172A;
+    --text-muted: #64748B;
+    --text-soft: #94A3B8;
+    --focus-ring: rgba(37, 99, 235, 0.24);
+    --status-success-bg: #CCFBF1;
+    --status-success-text: #0F766E;
+    --status-warning-bg: #FEF3C7;
+    --status-warning-text: #B45309;
+    --status-danger-bg: #FFE4E6;
+    --status-danger-text: #BE123C;
+    --sidebar-bg: #0B1220;
+    --sidebar-muted: #9AA6B8;
+    --sidebar-active: rgba(37, 99, 235, 0.18);
+    --sidebar-border: rgba(148, 163, 184, 0.16);
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.5rem;
+    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06);
+    --shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.16);
 }
 
 html.dark {
-    --brand-primary: #4F46E5;
-    --brand-accent: #6366F1;
-    --app-bg: #0F172A;
+    --brand-primary: #60A5FA;
+    --brand-primary-hover: #93C5FD;
+    --brand-accent: #2DD4BF;
+    --app-bg: #0B1120;
+    --surface: #111827;
+    --surface-muted: #182235;
+    --surface-raised: #0F172A;
+    --border: #263449;
+    --border-strong: #334155;
     --text-primary: #F8FAFC;
     --text-muted: #CBD5E1;
-    --status-success-bg: rgba(16, 185, 129, 0.18);
-    --status-warning-bg: rgba(244, 63, 94, 0.18);
+    --text-soft: #94A3B8;
+    --focus-ring: rgba(96, 165, 250, 0.30);
+    --status-success-bg: rgba(20, 184, 166, 0.18);
+    --status-success-text: #5EEAD4;
+    --status-warning-bg: rgba(245, 158, 11, 0.18);
+    --status-warning-text: #FCD34D;
+    --status-danger-bg: rgba(244, 63, 94, 0.18);
+    --status-danger-text: #FDA4AF;
+    --sidebar-bg: #060B16;
+    --sidebar-muted: #94A3B8;
+    --sidebar-active: rgba(96, 165, 250, 0.18);
+    --sidebar-border: rgba(148, 163, 184, 0.18);
+    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28);
+    --shadow-popover: 0 18px 50px rgba(0, 0, 0, 0.35);
     color-scheme: dark;
 }
 
 html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     background-color: var(--app-bg);
     color: var(--text-primary);
     scrollbar-gutter: stable;
+    font-size: 15px;
+    letter-spacing: 0;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+body.tts-sidebar-open {
+    overflow: hidden;
 }
 
 * {
@@ -58,17 +105,17 @@ html, body {
 }
 
 a, .btn-link {
-    color: #111827;
+    color: var(--brand-primary);
 }
 
 .btn-primary {
     color: #fff;
-    background-color: #111827;
-    border-color: #374151;
+    background-color: var(--brand-primary);
+    border-color: var(--brand-primary);
 }
 
 .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #6B7280;
+  box-shadow: 0 0 0 0.1rem var(--surface), 0 0 0 0.25rem var(--focus-ring);
 }
 
 .content {
@@ -107,7 +154,7 @@ h1:focus {
 
 html.dark a,
 html.dark .btn-link {
-    color: #C4B5FD;
+    color: #93C5FD;
 }
 
 html.dark,
@@ -204,7 +251,7 @@ html.dark .border-violet-500,
 html.dark .border-violet-600,
 html.dark .border-indigo-500,
 html.dark .border-indigo-600 {
-    border-color: #818CF8 !important;
+    border-color: #93C5FD !important;
 }
 
 html.dark input,
@@ -224,7 +271,7 @@ html.dark textarea::placeholder {
 
 html.dark input[type="checkbox"],
 html.dark input[type="radio"] {
-    accent-color: #6366F1;
+    accent-color: #2563EB;
 }
 
 html.dark .btn-primary,
@@ -235,7 +282,7 @@ html.dark .bg-purple-500,
 html.dark .bg-purple-600,
 html.dark .bg-indigo-500,
 html.dark .bg-indigo-600 {
-    background-color: #4F46E5 !important;
+    background-color: #2563EB !important;
     border-color: #4338CA !important;
     color: #FFFFFF !important;
 }
@@ -250,7 +297,7 @@ html.dark .bg-indigo-700 {
 html.dark .bg-violet-400,
 html.dark .bg-purple-400,
 html.dark .bg-indigo-400 {
-    background-color: #818CF8 !important;
+    background-color: #93C5FD !important;
 }
 
 html.dark .bg-violet-50,
@@ -271,7 +318,7 @@ html.dark .text-purple-600,
 html.dark .text-purple-700,
 html.dark .text-indigo-600,
 html.dark .text-indigo-700 {
-    color: #C4B5FD !important;
+    color: #93C5FD !important;
 }
 
 html.dark .bg-rose-50,
@@ -386,7 +433,7 @@ html.dark .hover\:text-violet-500:hover,
 html.dark .hover\:text-violet-600:hover,
 html.dark .hover\:text-violet-700:hover,
 html.dark .hover\:text-violet-800:hover {
-    color: #C4B5FD !important;
+    color: #93C5FD !important;
 }
 
 html.dark .hover\:text-amber-600:hover {
@@ -403,15 +450,15 @@ html.dark .focus\:ring-slate-400:focus,
 html.dark .focus\:ring-slate-900:focus,
 html.dark .focus\:ring-violet-600:focus,
 html.dark .focus\:ring-red-500:focus {
-    --tw-ring-color: #818CF8 !important;
+    --tw-ring-color: #93C5FD !important;
 }
 
 html.dark .shadow-sm {
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
 }
 
-html.dark .shadow-xl,
-html.dark .shadow-2xl {
+html.dark .shadow-lg,
+html.dark .shadow-lg {
     box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
 }
 
@@ -438,7 +485,401 @@ html.dark .flatpickr-day:focus {
 html.dark .flatpickr-day.selected,
 html.dark .flatpickr-day.startRange,
 html.dark .flatpickr-day.endRange {
-    background: #4F46E5;
-    border-color: #4F46E5;
+    background: var(--brand-primary);
+    border-color: var(--brand-primary);
+    color: #FFFFFF;
+}
+
+/* Taskify UI system */
+.app-shell {
+    display: flex;
+    min-height: 100vh;
+    background:
+        linear-gradient(180deg, rgba(37, 99, 235, 0.035), transparent 18rem),
+        var(--app-bg);
+    color: var(--text-primary);
+    overflow: hidden;
+}
+
+.app-sidebar {
+    position: relative;
+    display: flex;
+    width: 17rem;
+    min-height: 100vh;
+    flex-shrink: 0;
+    flex-direction: column;
+    overflow: hidden;
+    border-right: 1px solid var(--sidebar-border);
+    background: var(--sidebar-bg);
+    color: #FFFFFF;
+}
+
+.app-sidebar::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: "";
+    background:
+        radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 18rem),
+        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%);
+}
+
+.app-sidebar > * {
+    position: relative;
+    z-index: 1;
+}
+
+.app-sidebar-brand {
+    display: flex;
+    min-height: 4.75rem;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+}
+
+.app-sidebar-logo {
+    display: inline-flex;
+    height: 2.4rem;
+    width: 2.4rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-lg);
+    background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
     color: #FFFFFF;
+    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.28);
+}
+
+.app-sidebar-title {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.15;
+}
+
+.app-sidebar-title strong {
+    font-size: 1.1rem;
+    letter-spacing: 0;
+}
+
+.app-sidebar-title span {
+    margin-top: 0.15rem;
+    color: var(--sidebar-muted);
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.app-sidebar-user {
+    flex-shrink: 0;
+    border-top: 1px solid var(--sidebar-border);
+    padding: 0.875rem;
+}
+
+.app-main {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+}
+
+.app-topbar {
+    display: flex;
+    min-height: 4rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    border-bottom: 1px solid var(--border);
+    background: color-mix(in srgb, var(--surface) 92%, transparent);
+    padding: 0 1.5rem;
+    backdrop-filter: blur(12px);
+}
+
+.app-topbar-title {
+    min-width: 0;
+}
+
+.app-topbar-title h1 {
+    margin: 0;
+    color: var(--text-primary);
+    font-size: 1.05rem;
+    font-weight: 750;
+    letter-spacing: 0;
+}
+
+.app-topbar-title p {
+    margin: 0.1rem 0 0;
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    font-weight: 500;
+}
+
+.app-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: clamp(1rem, 2vw, 2rem);
+}
+
+.mobile-sidebar-toggle,
+.mobile-sidebar-close {
+    display: none;
+}
+
+.sidebar-scrim {
+    display: none;
+}
+
+.control-button {
+    display: inline-flex;
+    height: 2.35rem;
+    min-width: 2.35rem;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    color: var(--text-muted);
+    box-shadow: var(--shadow-card);
+    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.control-button:hover {
+    border-color: var(--border-strong);
+    background: var(--surface-muted);
+    color: var(--brand-primary);
+}
+
+.control-button:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 4px var(--focus-ring);
+}
+
+.surface-panel {
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+}
+
+.page-kicker {
+    color: var(--brand-primary);
+    font-size: 0.74rem;
+    font-weight: 750;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.text-balance {
+    text-wrap: balance;
+}
+
+main :is(input, select, textarea, .form-control, .form-select) {
+    border-color: var(--border) !important;
+    border-radius: var(--radius-lg) !important;
+    background-color: var(--surface) !important;
+    color: var(--text-primary) !important;
+}
+
+main :is(input, select, textarea, .form-control, .form-select):focus {
+    border-color: var(--brand-primary) !important;
+    outline: none !important;
+    box-shadow: 0 0 0 4px var(--focus-ring) !important;
+}
+
+main :is(input, textarea)::placeholder {
+    color: var(--text-soft) !important;
+}
+
+main table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+
+main thead tr {
+    background: var(--surface-muted) !important;
+}
+
+main th {
+    color: var(--text-muted) !important;
+    white-space: nowrap;
+}
+
+main td {
+    vertical-align: middle;
+}
+
+main tbody tr {
+    transition: background-color 0.14s ease;
+}
+
+main tbody tr:hover {
+    background: var(--surface-muted) !important;
+}
+
+main .shadow-\[0_18px_50px_rgba\(15\,23\,42\,0\.08\)\],
+main .shadow-\[0_18px_50px_rgba\(15\,23\,42\,0\.12\)\] {
+    box-shadow: var(--shadow-card) !important;
+}
+
+main .rounded-\[32px\],
+main .rounded-\[28px\],
+main .rounded-\[24px\] {
+    border-radius: var(--radius-lg) !important;
+}
+
+.flatpickr-calendar {
+    border-color: var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-popover);
+}
+
+html.dark a,
+html.dark .btn-link,
+html.dark .text-violet-500,
+html.dark .text-violet-600,
+html.dark .text-violet-700,
+html.dark .text-purple-600,
+html.dark .text-purple-700,
+html.dark .text-indigo-600,
+html.dark .text-indigo-700 {
+    color: var(--brand-primary) !important;
+}
+
+html.dark .bg-white,
+html.dark .bg-card,
+html.dark .bg-popover {
+    background-color: var(--surface) !important;
+}
+
+html.dark .bg-slate-50,
+html.dark .bg-slate-50\/40,
+html.dark .bg-slate-50\/50,
+html.dark .bg-slate-50\/60,
+html.dark .bg-slate-50\/70,
+html.dark .bg-muted {
+    background-color: var(--surface-muted) !important;
+}
+
+html.dark .border-slate-100,
+html.dark .border-slate-200,
+html.dark .border-slate-300,
+html.dark .border-border,
+html.dark .divide-slate-100,
+html.dark .divide-slate-200 {
+    border-color: var(--border) !important;
+}
+
+html.dark .text-slate-950,
+html.dark .text-slate-900,
+html.dark .text-slate-800,
+html.dark .text-slate-700,
+html.dark .text-foreground,
+html.dark .text-card-foreground,
+html.dark .text-popover-foreground {
+    color: var(--text-primary) !important;
+}
+
+html.dark .text-slate-600,
+html.dark .text-slate-500,
+html.dark .text-muted,
+html.dark .text-muted-foreground {
+    color: var(--text-muted) !important;
+}
+
+html.dark .text-slate-400,
+html.dark .text-slate-300 {
+    color: var(--text-soft) !important;
+}
+
+html.dark .btn-primary,
+html.dark .bg-primary,
+html.dark .bg-violet-500,
+html.dark .bg-violet-600,
+html.dark .bg-violet-700,
+html.dark .bg-purple-500,
+html.dark .bg-purple-600,
+html.dark .bg-indigo-500,
+html.dark .bg-indigo-600 {
+    background-color: var(--brand-primary) !important;
+    border-color: var(--brand-primary) !important;
+    color: #FFFFFF !important;
+}
+
+html.dark .hover\:bg-violet-600:hover,
+html.dark .hover\:bg-violet-700:hover,
+html.dark .hover\:bg-purple-700:hover,
+html.dark .hover\:bg-indigo-100:hover {
+    background-color: var(--brand-primary-hover) !important;
+    color: #FFFFFF !important;
+}
+
+@media (max-width: 1023px) {
+    .app-shell {
+        display: block;
+        min-height: 100vh;
+        overflow: auto;
+    }
+
+    .app-sidebar {
+        position: fixed;
+        inset: 0 auto 0 0;
+        z-index: 60;
+        width: min(18rem, calc(100vw - 3rem));
+        transform: translateX(-100%);
+        transition: transform 0.22s ease;
+    }
+
+    body.tts-sidebar-open .app-sidebar {
+        transform: translateX(0);
+    }
+
+    .sidebar-scrim {
+        position: fixed;
+        inset: 0;
+        z-index: 50;
+        display: none;
+        border: 0;
+        background: rgba(15, 23, 42, 0.48);
+    }
+
+    body.tts-sidebar-open .sidebar-scrim {
+        display: block;
+    }
+
+    .mobile-sidebar-toggle,
+    .mobile-sidebar-close {
+        display: inline-flex;
+    }
+
+    .app-main {
+        min-height: 100vh;
+    }
+
+    .app-topbar {
+        min-height: 3.75rem;
+        padding: 0 1rem;
+    }
+
+    .app-content {
+        padding: 1rem;
+    }
+
+    .app-topbar-title p {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    html,
+    body {
+        font-size: 14px;
+    }
+
+    .app-content {
+        padding: 0.875rem;
+    }
+
+    main table {
+        min-width: 760px;
+    }
 }