fix the background color in dashboard ,also fix sidebar and others small thing

app/app.css

@@ -82,6 +82,10 @@ html[dir="rtl"] body {
 :root {
   --radius: 0.5rem;
 
+  /* primary colors */
+  --color-pr-gray : #3F415A;
+  --color-pr-green :#3AEA83;
+
   /* Light theme colors */
   --background: #ffffff;
   --foreground: #0a0a0a;

app/components/dashboard/header.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router";
 import { cn } from "~/lib/utils";
 import { Button } from "~/components/ui/button";
 import {
+PanelLeft,
   Search,
   Bell,
   Settings,
@@ -34,7 +35,7 @@ export function Header({
   return (
     <header
       className={cn(
-        "bg-gray-800/95 backdrop-blur-sm border-b border-gray-500/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30",
+        "backdrop-blur-sm border-b border-gray-400/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30",
         className,
       )}
     >
@@ -53,7 +54,7 @@ export function Header({
         )}
 
         {/* Page Title */}
-        <h1 className="text-xl font-bold text-white font-persian">{title}</h1>
+        <h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian"><PanelLeft /> {title}</h1>
       </div>
 
       {/* Right Section */}

app/components/dashboard/layout.tsx

@@ -27,8 +27,8 @@ export function DashboardLayout({
 
   return (
     <div
-      className="h-screen flex overflow-hidden bg-gray-800 relative overflow-x-hidden"
+      className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden"
-      dir="rtl"
+       dir="rtl"
     >
       {/* Gradient overlay */}
       <div className="absolute inset-0  pointer-events-none" />

app/components/dashboard/project-management/project-management-page.tsx

@@ -15,10 +15,6 @@ import {
   ChevronUp,
   ChevronDown,
   RefreshCw,
-  Calendar,
-  DollarSign,
-  Users,
-  Target,
 } from "lucide-react";
 import apiService from "~/lib/api";
 import toast from "react-hot-toast";
@@ -401,7 +397,7 @@ export function ProjectManagementPage() {
           </Button>
         </div>
         {/* Data Table */}
-        <Card className="bg-gray-800/90 backdrop-blur-sm rounded-2xl overflow-hidden">
+        <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
           <CardContent className="p-0">
             <div className="relative">
               <div className="overflow-auto max-h-[calc(100vh-250px)]">

app/components/dashboard/sidebar.tsx

@@ -260,7 +260,7 @@ export function Sidebar({
   return (
     <div
       className={cn(
-        "bg-gray-800/95 backdrop-blur-sm h-full flex flex-col transition-all duration-300",
+        " backdrop-blur-sm h-full flex flex-col transition-all duration-300",
         isCollapsed ? "w-16" : "w-64",
         className,
       )}
@@ -271,9 +271,10 @@ export function Sidebar({
           {!isCollapsed ? (
             <div className="flex items-center gap-3">
               <GalleryVerticalEnd
-                enableBackground="green"
+              color="black"
                 size={32}
                 strokeWidth={1}
+                className="bg-green-400 p-1.5 rounded-lg"
               />
               <div className="font-persian">
                 <div className="text-sm font-semibold text-white">
@@ -312,7 +313,7 @@ export function Sidebar({
 
       {/* Collapse Toggle */}
       {onToggleCollapse && (
-        <div className="p-3 border-t border-emerald-500/30">
+        <div className="p-3 border-t border-gray-500/30">
           <button
             onClick={onToggleCollapse}
             className="w-full p-2 rounded-md hover:bg-emerald-500/20 transition-colors flex justify-center items-center gap-2"