update the scroll style in fix some style in tables

app/app.css

@@ -402,3 +402,42 @@ html[dir="rtl"] body {
     background-position: 200% 0;
   }
 }
+
+/* Table/container specific custom dark scrollbar */
+.custom-scrollbar {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(100, 116, 139, 0.6) transparent; /* thumb track */
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 2px;
+  height: 2px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(241, 245, 249, 0.6); /* slate-100 */
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.9)); /* emerald */
+  border-radius: 9999px;
+  border: .5px solid transparent;
+  background-clip: padding-box;
+}
+
+.custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.8), rgba(16, 185, 129, 1));
+}
+
+.dark .custom-scrollbar {
+  scrollbar-color: rgba(16, 185, 129, 0.6) rgba(30, 41, 59, 0.6); /* thumb track */
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(30, 41, 59, 0.6); /* slate-800 */
+}
+
+.dark .custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.9));
+  border-color: rgba(30, 41, 59, 0.6);
+}

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

@@ -161,7 +161,7 @@ export function ProcessInnovationPage() {
       id: "currency-reduction",
       title: "کاهش ارز بری",
       value: formatNumber(stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum),
-      description: "میلیون ریال کاهش یافته",
+      description: "دلار کاهش یافته",
       icon: <DollarSign/>,
       color: "text-emerald-400",
     },
@@ -690,16 +690,15 @@ export function ProcessInnovationPage() {
 
         {/* Data Table */}
         <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
-          <CardContent>
+          <CardContent className="p-0">
             <div className="relative">
-              <div className="overflow-auto max-h-[calc(100vh-400px)]">
+                <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
-                <Table>
                   <TableHeader>
                     <TableRow className="bg-[#3F415A]">
                       {columns.map((column) => (
                         <TableHead
                           key={column.key}
-                          className="text-right font-persian whitespace-nowrap text-gray-200 font-medium"
+                          className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A]"
                           style={{ width: column.width }}
                         >
                           {column.key === "select" ? (
@@ -713,7 +712,7 @@ export function ProcessInnovationPage() {
                           ) : column.sortable ? (
                             <button
                               onClick={() => handleSort(column.key)}
-                              className="flex items-center gap-2 hover:text-emerald-400 transition-colors"
+                              className="flex items-center gap-2"
                             >
                               <span>{column.label}</span>
                               {sortConfig.field === column.key ? (
@@ -735,17 +734,17 @@ export function ProcessInnovationPage() {
                   </TableHeader>
                   <TableBody>
                     {loading ? (
-                      // Skeleton loading rows
+                      // Skeleton loading rows (compact)
                       Array.from({ length: 10 }).map((_, index) => (
-                        <TableRow key={`skeleton-${index}`}>
+                        <TableRow key={`skeleton-${index}`} className="text-sm leading-tight h-8">
                           {columns.map((column) => (
                             <TableCell
                               key={column.key}
-                              className="text-right whitespace-nowrap border-emerald-500/20"
+                              className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
                             >
                               <div className="flex items-center gap-2">
-                                <div className="w-3 h-3 bg-gray-600 rounded-full animate-pulse" />
+                                <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
-                                <div className="h-4 bg-gray-600 rounded animate-pulse" style={{ width: `${Math.random() * 60 + 40}%` }} />
+                                <div className="h-2.5 bg-gray-600 rounded animate-pulse" style={{ width: `${Math.random() * 60 + 40}%` }} />
                               </div>
                             </TableCell>
                           ))}
@@ -764,11 +763,11 @@ export function ProcessInnovationPage() {
                       </TableRow>
                     ) : (
                       projects.map((project, index) => (
-                        <TableRow key={`${project.project_no}-${index}`}>
+                        <TableRow key={`${project.project_no}-${index}`} className="text-sm leading-tight h-8">
                           {columns.map((column) => (
                             <TableCell
                               key={column.key}
-                              className={`text-right whitespace-nowrap border-emerald-500/20 ${column.key==="select" ? "flex justify-center items-center" :""}`}
+                              className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key==="select" ? "flex justify-center items-center" :""}`}
                             >
                               {renderCellContent(project, column)}
                             </TableCell>
@@ -778,7 +777,6 @@ export function ProcessInnovationPage() {
                     )}
                   </TableBody>
                 </Table>
-              </div>
             </div>
 
             {/* Infinite scroll trigger */}

app/components/ui/table.tsx

@@ -2,18 +2,21 @@ import * as React from "react"
 
 import { cn } from "~/lib/utils"
 
-const Table = React.forwardRef<
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
-  HTMLTableElement,
+  containerClassName?: string
-  React.HTMLAttributes<HTMLTableElement>
+}
->(({ className, ...props }, ref) => (
+
-  <div className="relative w-full overflow-auto">
+const Table = React.forwardRef<HTMLTableElement, TableProps>(
-    <table
+  ({ className, containerClassName, ...props }, ref) => (
-      ref={ref}
+    <div className={cn("relative w-full", containerClassName)}>
-      className={cn("w-full caption-bottom text-sm", className)}
+      <table
-      {...props}
+        ref={ref}
-    />
+        className={cn("w-full caption-bottom text-sm", className)}
-  </div>
+        {...props}
-))
+      />
+    </div>
+  )
+)
 Table.displayName = "Table"
 
 const TableHeader = React.forwardRef<
@@ -58,7 +61,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors  data-[state=selected]:bg-muted",
       className
     )}
     {...props}