Deploy refreshed UI theme

TaskTrackingSystem.WebApp/Components/App.razor

@@ -71,40 +71,40 @@
         };
     </script>
     <script>
-        const brandDark = "#172554";
-        const brandDarkAlt = "#1E3A8A";
-        const brandPrimary = "#2563EB";
-        const brandPrimaryHover = "#1D4ED8";
-        const brandAccent = "#0F766E";
-        const brandLight = "#EFF6FF";
-        const brandMuted = "#64748B";
+        const brandDark = "#12312D";
+        const brandDarkAlt = "#115E59";
+        const brandPrimary = "#0F766E";
+        const brandPrimaryHover = "#115E59";
+        const brandAccent = "#B45309";
+        const brandLight = "#E6F4F1";
+        const brandMuted = "#64706D";
         
-        const semanticRedBg = "#FFE4E6";
-        const semanticRedText = "#BE123C";
+        const semanticRedBg = "#FCE4E1";
+        const semanticRedText = "#B42318";
         
-        const semanticGreenBg = "#CCFBF1";
+        const semanticGreenBg = "#DFF6EE";
         const semanticGreenText = "#0F766E";
         
-        const semanticNeutralBg = "#F8FAFC";
-        const semanticNeutralText = "#475569";
+        const semanticNeutralBg = "#F1F5F4";
+        const semanticNeutralText = "#4F5D59";
         
-        const neutralBg = "#F6F8FB";
-        const neutralBorder = "#E2E8F0";
-        const neutralMuted = "#64748B";
-        const neutralDark = "#0F172A";
+        const neutralBg = "#F7F8F7";
+        const neutralBorder = "#DDE5E2";
+        const neutralMuted = "#64706D";
+        const neutralDark = "#17211F";
 
         const customGray = {
             50: neutralBg,
-            100: "#F1F5F9",
+            100: "#EFF3F1",
             200: neutralBorder,
-            300: "#CBD5E1",
-            400: "#94A3B8",
+            300: "#B9C8C3",
+            400: "#8B9894",
             500: neutralMuted,
-            600: "#475569",
-            700: "#334155",
-            800: "#1E293B",
+            600: "#4F5D59",
+            700: "#34413D",
+            800: "#222C29",
             900: neutralDark,
-            950: "#020617"
+            950: "#101614"
         };
 
         tailwind.config = {
@@ -207,12 +207,12 @@
                         900: "#0C4A6E"
                     },
                     blue: {
-                        50: "#EFF6FF",
-                        100: "#DBEAFE",
-                        200: "#BFDBFE",
-                        300: "#93C5FD",
-                        400: "#60A5FA",
-                        500: "#3B82F6",
+                        50: brandLight,
+                        100: "#CFE8E3",
+                        200: "#A7D8CF",
+                        300: "#76C3B8",
+                        400: "#3AA89A",
+                        500: "#16877E",
                         600: brandPrimary,
                         700: brandPrimaryHover,
                         800: brandDarkAlt,
@@ -285,7 +285,7 @@
                     chart: {
                         purple: brandPrimary,
                         teal: "#14B8A6",
-                        green: "#10B981",
+                        green: "#0F766E",
                         neutral: neutralBorder
                     },
 
@@ -349,15 +349,15 @@
                     text: null
                 },
                 tooltip: {
-                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    backgroundColor: 'rgba(255, 255, 255, 0.97)',
                     borderWidth: 1,
-                    borderColor: '#e2e8f0',
-                    borderRadius: 12,
+                    borderColor: '#dde5e2',
+                    borderRadius: 8,
                     shadow: true,
                     style: {
                         fontFamily: 'Inter, sans-serif',
                         fontSize: '13px',
-                        color: '#0f172a'
+                        color: '#17211f'
                     },
                     pointFormat: '<b>{point.name}</b>: <b>{point.y}</b> tasks ({point.percentage:.1f}%)'
                 },
@@ -435,14 +435,14 @@
                     enabled: false
                 },
                 tooltip: {
-                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
+                    backgroundColor: 'rgba(255, 255, 255, 0.97)',
                     borderWidth: 1,
-                    borderColor: '#e2e8f0',
-                    borderRadius: 12,
+                    borderColor: '#dde5e2',
+                    borderRadius: 8,
                     shadow: true,
                     style: {
                         fontSize: '13px',
-                        color: '#0f172a'
+                        color: '#17211f'
                     },
                     pointFormatter: function() {
                         const start = Highcharts.dateFormat('%b %e, %Y', this.start);
@@ -458,24 +458,24 @@
                     min: options.xAxisMin,
                     max: options.xAxisMax,
                     gridLineWidth: 1,
-                    gridLineColor: '#f1f5f9',
-                    lineColor: '#e2e8f0',
-                    tickColor: '#e2e8f0',
+                    gridLineColor: '#eff3f1',
+                    lineColor: '#dde5e2',
+                    tickColor: '#dde5e2',
                     labels: {
                         format: '{value:%b %Y}',
                         style: {
-                            color: '#64748b',
+                            color: '#64706d',
                             fontSize: '11px'
                         }
                     },
                     currentDateIndicator: {
-                        color: '#2563eb',
+                        color: '#0f766e',
                         dashStyle: 'ShortDash',
                         width: 2,
                         label: {
                             format: 'Today',
                             style: {
-                                color: '#2563eb',
+                                color: '#0f766e',
                                 fontWeight: 'bold'
                             }
                         }
@@ -483,10 +483,10 @@
                 }],
                 yAxis: {
                     gridLineWidth: 1,
-                    gridLineColor: '#f1f5f9',
+                    gridLineColor: '#eff3f1',
                     labels: {
                         style: {
-                            color: '#334155',
+                            color: '#34413d',
                             fontSize: '12px',
                             fontWeight: '600'
                         }
@@ -528,7 +528,7 @@
                             amount: item.completed,
                             fill: item.color
                         },
-                        color: '#e2e8f0'
+                        color: '#dde5e2'
                     }))
                 }]
             });

TaskTrackingSystem.WebApp/Components/Layout/MainLayout.razor

@@ -3,23 +3,23 @@
 @using System.Security.Claims
 @inject TaskTrackingSystem.WebApp.Localization.UiLanguageService Language
 
-<div class="app-shell min-h-screen bg-slate-50 text-slate-950 lg:flex lg:overflow-hidden">
+<div class="app-shell min-h-screen bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-slate-50">
     <button type="button"
             class="sidebar-scrim"
             onclick="document.body.classList.remove('tts-sidebar-open');"
             aria-label="@AppLocalization.Text("common.closeNavigation", "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">
+    <aside class="app-sidebar fixed inset-y-0 left-0 z-[60] flex flex-col overflow-hidden border-r border-slate-800 bg-slate-950 text-white transition-transform duration-200">
         <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 class="app-sidebar-logo inline-flex h-10 w-10 items-center justify-center rounded-lg text-white shadow-sm">
+                <i data-lucide="clipboard-check" class="h-5 w-5"></i>
             </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">@AppLocalization.Text("common.workspace", "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"
+                    class="control-button mobile-sidebar-close ml-auto 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"
                     onclick="document.body.classList.remove('tts-sidebar-open');"
                     aria-label="@AppLocalization.Text("common.closeNavigation", "Close navigation")">
                 <i data-lucide="x" class="h-4 w-4"></i>
@@ -58,11 +58,11 @@
         </div>
     </aside>
 
-    <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-slate-50/95 px-4 text-slate-900 backdrop-blur dark:border-slate-800 dark:bg-slate-950/90 dark:text-slate-100 lg:px-6">
+    <main class="app-main flex min-w-0 flex-1 flex-col">
+        <header class="app-topbar flex min-h-16 items-center justify-between gap-3 border-b border-slate-200 bg-slate-50/95 px-4 text-slate-900 backdrop-blur dark:border-slate-800 dark:bg-slate-950/90 dark:text-slate-100">
             <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 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white lg:hidden"
+                        class="control-button mobile-sidebar-toggle 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-violet-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
                         onclick="document.body.classList.add('tts-sidebar-open');"
                         aria-label="@AppLocalization.Text("common.openNavigation", "Open navigation")">
                     <i data-lucide="menu" class="h-4 w-4"></i>
@@ -84,7 +84,7 @@
             </div>
         </header>
 
-        <div class="app-content flex-1 overflow-y-auto p-4 lg:p-8">
+        <div class="app-content flex-1 overflow-y-auto">
             @if (isAuthorizedPage)
             {
                 @Body

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

@@ -10,12 +10,12 @@ main {
 }
 
 .sidebar {
-    background-color: #0F172A;
+    background-color: var(--sidebar-bg);
 }
 
 .top-row {
-    background-color: #ffffff;
-    border-bottom: 1px solid #E5E7EB;
+    background-color: var(--surface);
+    border-bottom: 1px solid var(--border);
     justify-content: flex-end;
     height: 3.5rem;
     display: flex;
@@ -27,13 +27,13 @@ main {
     white-space: nowrap;
     margin-left: 1.5rem;
     text-decoration: none;
-    color: #6B7280;
+    color: var(--text-muted);
 }
 
 .top-row ::deep a:hover,
 .top-row ::deep .btn-link:hover {
     text-decoration: underline;
-    color: #111827;
+    color: var(--text-primary);
 }
 
 @media (min-width: 641px) {
@@ -50,8 +50,8 @@ main {
 }
 
 #blazor-error-ui {
-    background: #FFE4E6;
-    color: #991B1B;
+    background: var(--status-danger-bg);
+    color: var(--status-danger-text);
     bottom: 0;
     position: fixed;
     width: 100%;

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

@@ -24,13 +24,13 @@
 
 ::deep a.nav-link-item:hover,
 ::deep button.nav-dropdown-toggle:hover {
-    border-color: rgba(255, 255, 255, 0.08);
-    background-color: rgba(255, 255, 255, 0.07);
+    border-color: rgba(94, 234, 212, 0.14);
+    background-color: rgba(255, 255, 255, 0.065);
     color: #FFFFFF;
 }
 
 ::deep a.nav-link-item.active {
-    border-color: rgba(96, 165, 250, 0.28) !important;
+    border-color: rgba(94, 234, 212, 0.26) !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);

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

@@ -14,7 +14,7 @@
         <div>
             <div class="flex justify-center">
                 <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>
+                    <i data-lucide="clipboard-check" class="h-6 w-6"></i>
                 </span>
             </div>
             <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">@AppLocalization.Text("common.signIn", "Sign In") - Taskify</h2>

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

@@ -12,7 +12,7 @@
         <div>
             <div class="flex justify-center">
                 <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>
+                    <i data-lucide="clipboard-check" class="h-6 w-6"></i>
                 </span>
             </div>
             <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">Create your Taskify account</h2>

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

@@ -12,7 +12,7 @@
         <div>
             <div class="flex justify-center">
                 <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>
+                    <i data-lucide="clipboard-check" class="h-6 w-6"></i>
                 </span>
             </div>
             <h2 class="mt-5 text-center text-2xl font-bold text-slate-900">@AppLocalization.Text("auth.resetPassword", "Reset your password")</h2>

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

@@ -1,6 +1,6 @@
 @namespace TaskTrackingSystem.WebApp.Components.Pages.Features.Dashboard.Components
 
-<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
     @foreach (var metric in Metrics)
     {
         <KpiCard Icon="@metric.Icon"
@@ -9,7 +9,7 @@
                  BadgeText="@metric.BadgeText"
                  IconWrapClass="@metric.IconWrapClass"
                  BadgeClass="@metric.BadgeClass"
-                 CardClass="rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50" />
+                 CardClass="rounded-xl border border-slate-200 bg-white p-4 text-slate-900 shadow-sm shadow-slate-200/50" />
     }
 </div>
 

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

@@ -1,6 +1,6 @@
 @namespace TaskTrackingSystem.WebApp.Components.Pages.Features.Dashboard.Components
 
-<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
     @foreach (var metric in Metrics)
     {
         <KpiCard Icon="@metric.Icon"

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

@@ -1,6 +1,6 @@
 @namespace TaskTrackingSystem.WebApp.Components.Pages.Features.Dashboard.Components
 
-<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
     @foreach (var metric in Metrics)
     {
         <KpiCard Icon="@metric.Icon"

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

@@ -10,7 +10,7 @@
 
 <PageTitle>Employee Dashboard</PageTitle>
 
-<div class="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8">
+<div class="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8 dark:bg-slate-950 dark:text-slate-50">
     <div class="mx-auto max-w-[1440px] space-y-6">
         <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">
@@ -57,7 +57,7 @@
         {
             <EmployeeOverview Metrics="SummaryMetrics" />
 
-            <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,1fr)]">
+            <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1.7fr)_minmax(280px,1fr)]">
                 <div class="space-y-5">
                     <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">

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

@@ -46,7 +46,7 @@
 
     <AdminOverview Metrics="SummaryMetrics" />
 
-    <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,1fr)]">
+    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1.7fr)_minmax(280px,1fr)]">
         <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>
@@ -121,7 +121,7 @@
         </ChartCard>
     </div>
 
-    <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.25fr)_minmax(340px,0.75fr)]">
+    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1.25fr)_minmax(280px,0.75fr)]">
         <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>

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

@@ -9,7 +9,7 @@
 
 <PageTitle>Manager Dashboard</PageTitle>
 
-<div class="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8">
+<div class="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8 dark:bg-slate-950 dark:text-slate-50">
     <div class="mx-auto max-w-[1440px] space-y-6">
         <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">
@@ -60,7 +60,7 @@
         {
             <ManagerOverview Metrics="SummaryMetrics" />
 
-            <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.7fr)_minmax(340px,1fr)]">
+            <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1.7fr)_minmax(280px,1fr)]">
                 <ChartCard Title="Weekly Task Progress" Subtitle="Completed vs pending tasks per week" TitleClass="text-xl font-bold text-slate-950">
                     <Actions>
                         <div class="text-sm text-slate-500">@WeeklyRangeLabel</div>
@@ -79,7 +79,7 @@
                 </ChartCard>
             </div>
 
-            <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
+            <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,0.95fr)]">
                 <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                     <div class="flex items-start justify-between gap-4">
                         <div>

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/ReportKpiGrid.razor

@@ -15,6 +15,6 @@
 
 @code {
     [Parameter] public IReadOnlyList<DashboardMetric> Metrics { get; set; } = Array.Empty<DashboardMetric>();
-    [Parameter] public string GridClass { get; set; } = "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4";
-    [Parameter] public string CardClass { get; set; } = "rounded-xl border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/50";
+    [Parameter] public string GridClass { get; set; } = "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4";
+    [Parameter] public string CardClass { get; set; } = "rounded-xl border border-slate-200 bg-white p-4 text-slate-900 shadow-sm shadow-slate-200/50";
 }

TaskTrackingSystem.WebApp/wwwroot/app.css

@@ -1,60 +1,60 @@
 :root {
-    --brand-primary: #2563EB;
-    --brand-primary-hover: #1D4ED8;
-    --brand-accent: #0F766E;
-    --app-bg: #F6F8FB;
+    --brand-primary: #0F766E;
+    --brand-primary-hover: #115E59;
+    --brand-accent: #B45309;
+    --app-bg: #F7F8F7;
     --surface: #FFFFFF;
-    --surface-muted: #F8FAFC;
+    --surface-muted: #F1F5F4;
     --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;
+    --border: #DDE5E2;
+    --border-strong: #B9C8C3;
+    --text-primary: #17211F;
+    --text-muted: #64706D;
+    --text-soft: #8B9894;
+    --focus-ring: rgba(15, 118, 110, 0.24);
+    --status-success-bg: #DFF6EE;
     --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);
+    --status-warning-bg: #FEF3D2;
+    --status-warning-text: #9A5B00;
+    --status-danger-bg: #FCE4E1;
+    --status-danger-text: #B42318;
+    --sidebar-bg: #19211F;
+    --sidebar-muted: #A5B2AE;
+    --sidebar-active: rgba(15, 118, 110, 0.22);
+    --sidebar-border: rgba(221, 229, 226, 0.12);
     --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);
+    --shadow-card: 0 1px 2px rgba(23, 33, 31, 0.06), 0 12px 28px rgba(23, 33, 31, 0.045);
+    --shadow-popover: 0 18px 44px rgba(23, 33, 31, 0.18);
 }
 
 html.dark {
-    --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;
-    --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);
+    --brand-primary: #5EEAD4;
+    --brand-primary-hover: #2DD4BF;
+    --brand-accent: #FCD34D;
+    --app-bg: #101614;
+    --surface: #18201E;
+    --surface-muted: #202A27;
+    --surface-raised: #1B2522;
+    --border: #2E3B37;
+    --border-strong: #43524D;
+    --text-primary: #F4F7F6;
+    --text-muted: #B4C0BC;
+    --text-soft: #889692;
+    --focus-ring: rgba(94, 234, 212, 0.28);
+    --status-success-bg: rgba(45, 212, 191, 0.16);
+    --status-success-text: #99F6E4;
+    --status-warning-bg: rgba(252, 211, 77, 0.16);
+    --status-warning-text: #FDE68A;
+    --status-danger-bg: rgba(248, 113, 113, 0.16);
+    --status-danger-text: #FCA5A5;
+    --sidebar-bg: #111816;
+    --sidebar-muted: #9DACA7;
+    --sidebar-active: rgba(94, 234, 212, 0.15);
+    --sidebar-border: rgba(221, 229, 226, 0.12);
+    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.34);
+    --shadow-popover: 0 18px 50px rgba(0, 0, 0, 0.42);
     color-scheme: dark;
 }
 
@@ -620,7 +620,7 @@ html.dark .flatpickr-day.endRange {
     padding: clamp(1rem, 2vw, 2rem);
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 960px) {
     .app-shell {
         height: 100dvh;
         min-height: 100dvh;
@@ -632,7 +632,8 @@ html.dark .flatpickr-day.endRange {
         inset: 0 auto 0 0;
         height: 100dvh;
         min-height: 100dvh;
-        transform: translateX(0);
+        transform: translateX(0) !important;
+        width: var(--app-sidebar-width) !important;
     }
 
     .app-main {
@@ -641,6 +642,71 @@ html.dark .flatpickr-day.endRange {
     }
 }
 
+/* Tiered responsive scaling for laptops & smaller screens (e.g. 13.3" HP EliteBook G6) */
+@media (min-width: 1366px) and (max-width: 1536px) {
+    :root {
+        font-size: 13.75px;
+    }
+    .app-shell {
+        --app-sidebar-width: 15.75rem;
+    }
+    .app-content {
+        padding: 1.25rem !important;
+    }
+}
+
+@media (min-width: 1150px) and (max-width: 1365px) {
+    :root {
+        font-size: 13px;
+    }
+    .app-shell {
+        --app-sidebar-width: 14.75rem;
+    }
+    .app-content {
+        padding: 1rem !important;
+    }
+    .app-topbar {
+        min-height: 3.5rem !important;
+        padding: 0 1.25rem !important;
+    }
+    .app-sidebar-brand {
+        min-height: 4rem !important;
+        padding: 0.75rem 1rem !important;
+    }
+}
+
+/* Compact scaling for 13.3" displays with 150% scaling or 960px-1149px viewports */
+@media (min-width: 960px) and (max-width: 1149px) {
+    :root {
+        font-size: 12.25px;
+    }
+    .app-shell {
+        --app-sidebar-width: 13.75rem;
+    }
+    .app-content {
+        padding: 0.85rem !important;
+    }
+    .app-topbar {
+        min-height: 3.25rem !important;
+        padding: 0 1rem !important;
+    }
+    .app-topbar-title h1 {
+        font-size: 0.95rem !important;
+    }
+    .app-sidebar-brand {
+        min-height: 3.75rem !important;
+        padding: 0.65rem 0.85rem !important;
+    }
+    .app-sidebar-logo {
+        height: 2rem !important;
+        width: 2rem !important;
+    }
+    main td, main th {
+        padding-top: 0.45rem !important;
+        padding-bottom: 0.45rem !important;
+    }
+}
+
 .mobile-sidebar-toggle,
 .mobile-sidebar-close {
     display: none;
@@ -835,24 +901,25 @@ html.dark .hover\:bg-indigo-100:hover {
     color: #FFFFFF !important;
 }
 
-@media (max-width: 1023px) {
+@media (max-width: 959px) {
     .app-shell {
         display: block;
         min-height: 100vh;
         overflow: auto;
+        padding-left: 0 !important;
     }
 
     .app-sidebar {
         position: fixed;
         inset: 0 auto 0 0;
         z-index: 60;
-        width: min(18rem, calc(100vw - 3rem));
+        width: min(18rem, calc(100vw - 3rem)) !important;
         transform: translateX(-100%);
         transition: transform 0.22s ease;
     }
 
     body.tts-sidebar-open .app-sidebar {
-        transform: translateX(0);
+        transform: translateX(0) !important;
     }
 
     .sidebar-scrim {
@@ -870,7 +937,7 @@ html.dark .hover\:bg-indigo-100:hover {
 
     .mobile-sidebar-toggle,
     .mobile-sidebar-close {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .app-main {
@@ -878,12 +945,12 @@ html.dark .hover\:bg-indigo-100:hover {
     }
 
     .app-topbar {
-        min-height: 3.75rem;
+        min-height: 3.5rem;
         padding: 0 1rem;
     }
 
     .app-content {
-        padding: 1rem;
+        padding: 1rem !important;
     }
 
     .app-topbar-title p {
@@ -905,3 +972,494 @@ html.dark .hover\:bg-indigo-100:hover {
         min-width: 760px;
     }
 }
+
+/* ==========================================
+   UNIVERSAL DARK MODE OVERRIDES
+   ========================================== */
+html.dark,
+html.dark body,
+html.dark .app-shell,
+html.dark .app-main,
+html.dark .app-content {
+    background-color: #0B1120 !important;
+    color: #F8FAFC !important;
+}
+
+html.dark .bg-white,
+html.dark .bg-card,
+html.dark .bg-popover,
+html.dark [class*="bg-white"] {
+    background-color: #111827 !important;
+    color: #F8FAFC !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-slate-50\/95,
+html.dark .bg-slate-100,
+html.dark .bg-slate-100\/50,
+html.dark .bg-muted {
+    background-color: #182235 !important;
+    color: #F8FAFC !important;
+}
+
+html.dark .bg-slate-200,
+html.dark .bg-slate-300 {
+    background-color: #263449 !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: #F8FAFC !important;
+}
+
+html.dark .text-slate-600,
+html.dark .text-slate-500,
+html.dark .text-muted,
+html.dark .text-muted-foreground {
+    color: #CBD5E1 !important;
+}
+
+html.dark .text-slate-400,
+html.dark .text-slate-300 {
+    color: #94A3B8 !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: #263449 !important;
+}
+
+html.dark .shadow-slate-200\/60,
+html.dark .shadow-slate-200\/50,
+html.dark .shadow-slate-200\/70,
+html.dark .shadow-sm,
+html.dark .shadow-md,
+html.dark .shadow-lg {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
+}
+
+html.dark svg line[stroke="#e2e8f0"],
+html.dark svg line[stroke="#E2E8F0"] {
+    stroke: #263449 !important;
+}
+
+html.dark input,
+html.dark select,
+html.dark textarea,
+html.dark .form-control,
+html.dark .form-select {
+    background-color: #111827 !important;
+    color: #F8FAFC !important;
+    border-color: #263449 !important;
+}
+
+/* ==========================================
+   PROFESSIONAL UI REFRESH
+   ========================================== */
+body {
+    background:
+        linear-gradient(180deg, rgba(15, 118, 110, 0.035), transparent 22rem),
+        var(--app-bg);
+}
+
+::selection {
+    background: rgba(15, 118, 110, 0.18);
+    color: var(--text-primary);
+}
+
+.app-shell {
+    background:
+        linear-gradient(180deg, rgba(15, 118, 110, 0.045), transparent 19rem),
+        radial-gradient(circle at 100% 0, rgba(180, 83, 9, 0.05), transparent 18rem),
+        var(--app-bg);
+}
+
+.app-sidebar {
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%),
+        var(--sidebar-bg);
+}
+
+.app-sidebar::before {
+    background:
+        linear-gradient(90deg, rgba(94, 234, 212, 0.14), transparent 0.45rem),
+        radial-gradient(circle at top left, rgba(15, 118, 110, 0.20), transparent 17rem);
+}
+
+.app-sidebar-logo {
+    background: linear-gradient(135deg, #0F766E, #B45309);
+    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.24);
+}
+
+.app-topbar {
+    background: color-mix(in srgb, var(--surface) 94%, transparent);
+}
+
+.app-content {
+    background: transparent;
+}
+
+.control-button,
+main button,
+main a[class*="inline-flex"],
+main .btn {
+    border-radius: var(--radius-lg) !important;
+}
+
+.control-button {
+    background: color-mix(in srgb, var(--surface) 96%, var(--brand-primary) 4%);
+}
+
+.btn-primary,
+main .bg-violet-500,
+main .bg-violet-600,
+main .bg-violet-700,
+main .bg-purple-500,
+main .bg-purple-600,
+main .bg-indigo-500,
+main .bg-indigo-600,
+main .bg-blue-600 {
+    background-color: #0F766E !important;
+    border-color: #0F766E !important;
+    color: #FFFFFF !important;
+}
+
+.btn-primary:hover,
+main .hover\:bg-violet-500:hover,
+main .hover\:bg-violet-600:hover,
+main .hover\:bg-violet-700:hover,
+main .hover\:bg-purple-700:hover,
+main .hover\:bg-blue-600:hover,
+main .hover\:bg-blue-700:hover {
+    background-color: #115E59 !important;
+    border-color: #115E59 !important;
+    color: #FFFFFF !important;
+}
+
+main .text-violet-500,
+main .text-violet-600,
+main .text-violet-700,
+main .text-purple-600,
+main .text-purple-700,
+main .text-indigo-600,
+main .text-indigo-700,
+main .text-blue-600,
+main .text-blue-700 {
+    color: #0F766E !important;
+}
+
+main .hover\:text-violet-500:hover,
+main .hover\:text-violet-600:hover,
+main .hover\:text-violet-700:hover,
+main .hover\:text-violet-800:hover,
+main .hover\:text-blue-600:hover,
+main .hover\:text-blue-700:hover {
+    color: #115E59 !important;
+}
+
+main .bg-violet-50,
+main .bg-violet-50\/10,
+main .bg-violet-50\/40,
+main .bg-violet-50\/60,
+main .bg-violet-50\/70,
+main .bg-violet-100,
+main .bg-purple-50,
+main .bg-purple-100,
+main .bg-indigo-50,
+main .bg-indigo-100,
+main .bg-blue-50,
+main .bg-blue-100 {
+    background-color: #E6F4F1 !important;
+}
+
+main .border-violet-100,
+main .border-violet-200,
+main .border-violet-300,
+main .border-indigo-100,
+main .border-indigo-200,
+main .border-blue-100,
+main .border-blue-200 {
+    border-color: #B7DAD4 !important;
+}
+
+main .focus\:ring-violet-100:focus,
+main .focus\:ring-violet-500:focus,
+main .focus\:ring-violet-600:focus,
+main .focus\:ring-slate-900:focus {
+    --tw-ring-color: var(--focus-ring) !important;
+}
+
+main .focus\:border-violet-400:focus,
+main .focus\:border-violet-600:focus {
+    border-color: var(--brand-primary) !important;
+}
+
+main .accent-violet-600,
+html.dark main .accent-violet-600 {
+    accent-color: #0F766E !important;
+}
+
+main .bg-white,
+main .bg-card,
+main .bg-popover {
+    background-color: var(--surface) !important;
+    color: var(--text-primary) !important;
+}
+
+main .bg-slate-50,
+main .bg-slate-50\/40,
+main .bg-slate-50\/50,
+main .bg-slate-50\/60,
+main .bg-slate-50\/70,
+main .bg-slate-50\/95,
+main .bg-muted {
+    background-color: var(--surface-muted) !important;
+}
+
+main .border-slate-100,
+main .border-slate-200,
+main .border-slate-300,
+main .border-border,
+main .divide-slate-100,
+main .divide-slate-200 {
+    border-color: var(--border) !important;
+}
+
+main .text-slate-950,
+main .text-slate-900,
+main .text-slate-800,
+main .text-slate-700,
+main .text-foreground,
+main .text-card-foreground,
+main .text-popover-foreground {
+    color: var(--text-primary) !important;
+}
+
+main .text-slate-600,
+main .text-slate-500,
+main .text-muted,
+main .text-muted-foreground {
+    color: var(--text-muted) !important;
+}
+
+main .text-slate-400,
+main .text-slate-300 {
+    color: var(--text-soft) !important;
+}
+
+main .shadow-sm,
+main .shadow-md,
+main .shadow-lg,
+main .shadow-slate-200\/50,
+main .shadow-slate-200\/60,
+main .shadow-slate-200\/70 {
+    box-shadow: var(--shadow-card) !important;
+}
+
+main :is(.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-\[24px\], .rounded-\[28px\], .rounded-\[32px\]) {
+    border-radius: var(--radius-lg) !important;
+}
+
+main :is(table, .surface-panel),
+main :is(.border-slate-200.bg-white, .border-slate-100.bg-white) {
+    box-shadow: var(--shadow-card);
+}
+
+main thead tr {
+    background: color-mix(in srgb, var(--surface-muted) 88%, var(--brand-primary) 12%) !important;
+}
+
+main th {
+    font-size: 0.72rem !important;
+    letter-spacing: 0.06em !important;
+}
+
+main tbody tr:hover {
+    background: color-mix(in srgb, var(--surface-muted) 84%, var(--brand-primary) 16%) !important;
+}
+
+main :is(input, select, textarea, .form-control, .form-select) {
+    min-height: 2.45rem;
+}
+
+main label {
+    color: var(--text-muted) !important;
+    font-weight: 650;
+}
+
+main [class*="bg-emerald-100"],
+main [class*="bg-green-100"] {
+    background-color: var(--status-success-bg) !important;
+    color: var(--status-success-text) !important;
+}
+
+main [class*="bg-amber-100"],
+main [class*="bg-yellow-100"],
+main [class*="bg-orange-100"] {
+    background-color: var(--status-warning-bg) !important;
+    color: var(--status-warning-text) !important;
+}
+
+main [class*="bg-red-100"],
+main [class*="bg-rose-100"] {
+    background-color: var(--status-danger-bg) !important;
+    color: var(--status-danger-text) !important;
+}
+
+main svg line[stroke="#e2e8f0"],
+main svg line[stroke="#E2E8F0"] {
+    stroke: var(--border) !important;
+}
+
+main svg path[stroke="#2563eb"],
+main svg path[stroke="#3b82f6"] {
+    stroke: var(--brand-primary) !important;
+}
+
+main svg circle[fill="#2563eb"],
+main svg circle[fill="#3b82f6"] {
+    fill: var(--brand-primary) !important;
+}
+
+html.dark,
+html.dark body,
+html.dark .app-shell,
+html.dark .app-main,
+html.dark .app-content {
+    background-color: var(--app-bg) !important;
+    color: var(--text-primary) !important;
+}
+
+html.dark body {
+    background:
+        linear-gradient(180deg, rgba(94, 234, 212, 0.04), transparent 22rem),
+        var(--app-bg);
+}
+
+html.dark .app-shell {
+    background:
+        linear-gradient(180deg, rgba(94, 234, 212, 0.045), transparent 18rem),
+        var(--app-bg);
+}
+
+html.dark main .bg-white,
+html.dark main .bg-card,
+html.dark main .bg-popover,
+html.dark main [class*="bg-white"] {
+    background-color: var(--surface) !important;
+    color: var(--text-primary) !important;
+}
+
+html.dark main .bg-slate-50,
+html.dark main .bg-slate-50\/40,
+html.dark main .bg-slate-50\/50,
+html.dark main .bg-slate-50\/60,
+html.dark main .bg-slate-50\/70,
+html.dark main .bg-slate-50\/95,
+html.dark main .bg-slate-100,
+html.dark main .bg-slate-100\/50,
+html.dark main .bg-muted {
+    background-color: var(--surface-muted) !important;
+    color: var(--text-primary) !important;
+}
+
+html.dark main .bg-slate-200,
+html.dark main .bg-slate-300 {
+    background-color: #2E3B37 !important;
+}
+
+html.dark main .text-slate-950,
+html.dark main .text-slate-900,
+html.dark main .text-slate-800,
+html.dark main .text-slate-700,
+html.dark main .text-foreground,
+html.dark main .text-card-foreground,
+html.dark main .text-popover-foreground {
+    color: var(--text-primary) !important;
+}
+
+html.dark main .text-slate-600,
+html.dark main .text-slate-500,
+html.dark main .text-muted,
+html.dark main .text-muted-foreground {
+    color: var(--text-muted) !important;
+}
+
+html.dark main .text-slate-400,
+html.dark main .text-slate-300 {
+    color: var(--text-soft) !important;
+}
+
+html.dark main .border-slate-100,
+html.dark main .border-slate-200,
+html.dark main .border-slate-300,
+html.dark main .border-border,
+html.dark main .divide-slate-100,
+html.dark main .divide-slate-200 {
+    border-color: var(--border) !important;
+}
+
+html.dark main .bg-violet-50,
+html.dark main .bg-violet-50\/10,
+html.dark main .bg-violet-50\/40,
+html.dark main .bg-violet-50\/60,
+html.dark main .bg-violet-50\/70,
+html.dark main .bg-violet-100,
+html.dark main .bg-purple-50,
+html.dark main .bg-purple-100,
+html.dark main .bg-indigo-50,
+html.dark main .bg-indigo-100,
+html.dark main .bg-blue-50,
+html.dark main .bg-blue-100 {
+    background-color: rgba(94, 234, 212, 0.13) !important;
+}
+
+html.dark main .text-violet-500,
+html.dark main .text-violet-600,
+html.dark main .text-violet-700,
+html.dark main .text-purple-600,
+html.dark main .text-purple-700,
+html.dark main .text-indigo-600,
+html.dark main .text-indigo-700,
+html.dark main .text-blue-600,
+html.dark main .text-blue-700 {
+    color: var(--brand-primary) !important;
+}
+
+html.dark main .btn-primary,
+html.dark main .bg-primary,
+html.dark main .bg-violet-500,
+html.dark main .bg-violet-600,
+html.dark main .bg-violet-700,
+html.dark main .bg-purple-500,
+html.dark main .bg-purple-600,
+html.dark main .bg-indigo-500,
+html.dark main .bg-indigo-600,
+html.dark main .bg-blue-600 {
+    background-color: #0F766E !important;
+    border-color: #0F766E !important;
+    color: #FFFFFF !important;
+}
+
+html.dark input,
+html.dark select,
+html.dark textarea,
+html.dark .form-control,
+html.dark .form-select {
+    background-color: var(--surface-raised) !important;
+    color: var(--text-primary) !important;
+    border-color: var(--border) !important;
+}