diff --git a/db-fix.sh b/db-fix.sh
index 7ca5d01..ab6ac28 100644
--- a/db-fix.sh
+++ b/db-fix.sh
@@ -32,6 +32,9 @@ ALTER TABLE "users" ADD COLUMN IF NOT EXISTS "company_id" uuid;
 -- Add missing columns to Invoice
 ALTER TABLE "invoices" ADD COLUMN IF NOT EXISTS "qr_code" text;
 ALTER TABLE "invoices" ADD COLUMN IF NOT EXISTS "ai_confidence_score" numeric(4,3);
+ALTER TABLE "invoices" ADD COLUMN IF NOT EXISTS "ai_prompt_tokens" integer DEFAULT 0;
+ALTER TABLE "invoices" ADD COLUMN IF NOT EXISTS "ai_completion_tokens" integer DEFAULT 0;
+ALTER TABLE "invoices" ADD COLUMN IF NOT EXISTS "ai_total_cost" numeric(10,6) DEFAULT 0;
 
 -- Add missing columns to Company
 ALTER TABLE "companies" ADD COLUMN IF NOT EXISTS "certificate_path" varchar(255);
diff --git a/frontend/src/pages/companies/CompaniesPage.tsx b/frontend/src/pages/companies/CompaniesPage.tsx
index 874ee47..ba868dc 100644
--- a/frontend/src/pages/companies/CompaniesPage.tsx
+++ b/frontend/src/pages/companies/CompaniesPage.tsx
@@ -101,7 +101,7 @@ export const CompaniesPage = () => {
             <header className="flex items-center justify-between">
                 <div>
                     <h2 className="text-3xl font-black text-white">إدارة الشركات</h2>
-                    <p className="text-slate-400 mt-1">أضف عملائك وشركاتك لربط فواتيرهم بنظام جو فوترة.</p>
+                    <p className="text-slate-300 mt-1">أضف عملائك وشركاتك لربط فواتيرهم بنظام جو فوترة.</p>
                 </div>
                 <button 
                     onClick={() => setIsAddModalOpen(true)}
@@ -164,12 +164,12 @@ export const CompaniesPage = () => {
                             <h3 className="text-xl font-black text-white mb-4 group-hover:text-emerald-400 transition-colors">{company.name}</h3>
                             
                             <div className="space-y-3 mb-6">
-                                <div className="flex items-center gap-3 text-sm text-slate-400">
-                                    <Hash className="w-4 h-4 text-slate-600" />
+                                <div className="flex items-center gap-3 text-sm text-slate-300">
+                                    <Hash className="w-4 h-4 text-slate-500" />
                                     <span>الرقم الضريبي: <span className="text-slate-200 font-mono font-bold tracking-wider">{company.tax_identification_number || '---'}</span></span>
                                 </div>
-                                <div className="flex items-center gap-3 text-sm text-slate-400">
-                                    <MapPin className="w-4 h-4 text-slate-600" />
+                                <div className="flex items-center gap-3 text-sm text-slate-300">
+                                    <MapPin className="w-4 h-4 text-slate-500" />
                                     <span className="truncate">{company.address || 'العنوان غير محدد'}</span>
                                 </div>
                             </div>
diff --git a/frontend/src/pages/dashboard/MultiEntityDashboard.tsx b/frontend/src/pages/dashboard/MultiEntityDashboard.tsx
index 888e980..ce190e8 100644
--- a/frontend/src/pages/dashboard/MultiEntityDashboard.tsx
+++ b/frontend/src/pages/dashboard/MultiEntityDashboard.tsx
@@ -133,7 +133,7 @@ export const MultiEntityDashboard = () => {
             <Crown className="w-7 h-7 text-emerald-500" />
             <span className="font-semibold text-emerald-500">مُصادَق</span> | لوحة تحكم الشركات
           </h2>
-          <p className="text-slate-500 mt-2 text-sm">نظرة عامة على الموقف الضريبي لجميع عملائك (Elite View)</p>
+          <p className="text-slate-300 mt-2 text-sm">نظرة عامة على الموقف الضريبي لجميع عملائك (Elite View)</p>
         </div>
 
         <div className="flex gap-4">
@@ -189,7 +189,7 @@ export const MultiEntityDashboard = () => {
               >
                 {/* AI Usage Badge */}
                 <div className="absolute top-0 right-0 p-2">
-                   <div className="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-md text-[10px] font-bold text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-slate-700">
+                   <div className="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-md text-[10px] font-bold text-slate-300 dark:text-slate-200 border border-slate-200 dark:border-slate-700">
                       <Cpu className="w-3 h-3 text-purple-400" />
                       <span>{company.aiStats?.totalTokens > 1000 ? `${(company.aiStats.totalTokens / 1000).toFixed(1)}k` : company.aiStats?.totalTokens || 0} tokens</span>
                    </div>
@@ -208,7 +208,7 @@ export const MultiEntityDashboard = () => {
                       </div>
                       <div>
                         <h3 className="text-slate-900 dark:text-white font-medium text-lg">{company.name}</h3>
-                        <p className="text-xs text-slate-400">{company.taxId || '—'}</p>
+                        <p className="text-xs text-slate-300">{company.taxId || '—'}</p>
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/pages/dashboard/RiskMonitorPage.tsx b/frontend/src/pages/dashboard/RiskMonitorPage.tsx
index 9c1eeb2..c689837 100644
--- a/frontend/src/pages/dashboard/RiskMonitorPage.tsx
+++ b/frontend/src/pages/dashboard/RiskMonitorPage.tsx
@@ -72,7 +72,7 @@ export const RiskMonitorPage = () => {
                         </div>
                         <div>
                             <h1 className="text-4xl font-black text-white">مراقبة المخاطر</h1>
-                            <p className="text-slate-400 mt-1 font-medium italic">Risk & Anomaly Monitoring Center</p>
+                            <p className="text-slate-300 mt-1 font-medium italic">Risk & Anomaly Monitoring Center</p>
                         </div>
                     </div>
                     
@@ -130,10 +130,10 @@ export const RiskMonitorPage = () => {
                     <table className="w-full">
                         <thead>
                             <tr className="text-right border-b border-slate-800">
-                                <th className="px-8 py-6 text-slate-500 font-bold uppercase tracking-tighter text-xs">الشركة والفاتورة</th>
-                                <th className="px-8 py-6 text-slate-500 font-bold uppercase tracking-tighter text-xs">نوع الخطر</th>
-                                <th className="px-8 py-6 text-slate-500 font-bold uppercase tracking-tighter text-xs">التاريخ والقيمة</th>
-                                <th className="px-8 py-6 text-slate-500 font-bold uppercase tracking-tighter text-xs text-left">الإجراء</th>
+                                <th className="px-8 py-6 text-slate-300 font-bold uppercase tracking-tighter text-xs">الشركة والفاتورة</th>
+                                <th className="px-8 py-6 text-slate-300 font-bold uppercase tracking-tighter text-xs">نوع الخطر</th>
+                                <th className="px-8 py-6 text-slate-300 font-bold uppercase tracking-tighter text-xs">التاريخ والقيمة</th>
+                                <th className="px-8 py-6 text-slate-300 font-bold uppercase tracking-tighter text-xs text-left">الإجراء</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -149,11 +149,11 @@ export const RiskMonitorPage = () => {
                                         <td className="px-8 py-6">
                                             <div className="flex items-center gap-4">
                                                 <div className="w-12 h-12 rounded-xl bg-slate-800 flex items-center justify-center border border-slate-700">
-                                                    <Building2 className="w-6 h-6 text-slate-400" />
+                                                    <Building2 className="w-6 h-6 text-slate-300" />
                                                 </div>
                                                 <div>
                                                     <p className="text-white font-black">{inv.company?.name}</p>
-                                                    <p className="text-slate-500 text-sm font-bold">#{inv.invoice_number || 'بدون رقم'}</p>
+                                                    <p className="text-slate-400 text-sm font-bold">#{inv.invoice_number || 'بدون رقم'}</p>
                                                 </div>
                                             </div>
                                         </td>
diff --git a/frontend/src/pages/settings/SettingsPage.tsx b/frontend/src/pages/settings/SettingsPage.tsx
index 25d9797..4510478 100644
--- a/frontend/src/pages/settings/SettingsPage.tsx
+++ b/frontend/src/pages/settings/SettingsPage.tsx
@@ -97,7 +97,7 @@ export const SettingsPage = () => {
             <header className="flex items-end justify-between">
                 <div>
                     <h2 className="text-4xl font-black text-white tracking-tight">إعدادات النظام</h2>
-                    <p className="text-slate-400 mt-2 text-lg font-medium">إدارة حسابك الشخصي وتخصيص تجربة "مُصادَق" الخاصة بك.</p>
+                    <p className="text-slate-300 mt-2 text-lg font-medium">إدارة حسابك الشخصي وتخصيص تجربة "مُصادَق" الخاصة بك.</p>
                 </div>
                 <AnimatePresence>
                     {showSuccess && (
@@ -127,10 +127,10 @@ export const SettingsPage = () => {
                                 className={`w-full flex items-center gap-4 px-7 py-5 rounded-[20px] font-bold transition-all relative group ${
                                     isActive 
                                     ? 'bg-emerald-500 text-slate-950 shadow-2xl shadow-emerald-500/30 scale-[1.02]' 
-                                    : 'text-slate-500 hover:bg-slate-800/40 hover:text-slate-200'
+                                    : 'text-slate-400 hover:bg-slate-800/40 hover:text-slate-200'
                                 }`}
                             >
-                                <Icon className={`w-6 h-6 ${isActive ? 'text-slate-950' : 'text-slate-600 group-hover:text-slate-400'}`} />
+                                <Icon className={`w-6 h-6 ${isActive ? 'text-slate-950' : 'text-slate-500 group-hover:text-slate-300'}`} />
                                 <span className="text-lg">{tab.label}</span>
                                 {isActive && (
                                     <motion.div 
@@ -164,8 +164,8 @@ export const SettingsPage = () => {
                                             <span className="bg-emerald-500/10 text-emerald-400 text-xs font-black px-4 py-1.5 rounded-full border border-emerald-500/20 uppercase tracking-widest">
                                                 {user?.role === 'admin' ? 'مدير مكتب' : 'محاسب'}
                                             </span>
-                                            <span className="text-slate-500 font-bold text-sm">•</span>
-                                            <span className="text-slate-500 font-bold text-sm">{formData.email}</span>
+                                            <span className="text-slate-400 font-bold text-sm">•</span>
+                                            <span className="text-slate-400 font-bold text-sm">{formData.email}</span>
                                         </div>
                                     </div>
                                 </div>
diff --git a/frontend/src/pages/staff/StaffPage.tsx b/frontend/src/pages/staff/StaffPage.tsx
index 7a957b6..18735ce 100644
--- a/frontend/src/pages/staff/StaffPage.tsx
+++ b/frontend/src/pages/staff/StaffPage.tsx
@@ -75,7 +75,7 @@ export const StaffPage = () => {
             <header className="flex items-center justify-between">
                 <div>
                     <h2 className="text-3xl font-black text-white">إدارة الموظفين</h2>
-                    <p className="text-slate-400 mt-1">إدارة فريق العمل المالي لمكتب المحاسبة الخاص بك.</p>
+                    <p className="text-slate-300 mt-1">إدارة فريق العمل المالي لمكتب المحاسبة الخاص بك.</p>
                 </div>
                 <button 
                     onClick={() => setIsAddModalOpen(true)}
@@ -121,10 +121,10 @@ export const StaffPage = () => {
                         <table className="w-full text-right">
                             <thead className="bg-slate-800/50 border-b border-slate-800/60">
                                 <tr>
-                                    <th className="px-6 py-4 text-xs font-bold text-slate-400">الاسم الكامل</th>
-                                    <th className="px-6 py-4 text-xs font-bold text-slate-400">البريد الإلكتروني</th>
-                                    <th className="px-6 py-4 text-xs font-bold text-slate-400">الدور الوظيفي</th>
-                                    <th className="px-6 py-4 text-xs font-bold text-slate-400 text-center">إجراءات</th>
+                                    <th className="px-6 py-4 text-xs font-bold text-slate-300">الاسم الكامل</th>
+                                    <th className="px-6 py-4 text-xs font-bold text-slate-300">البريد الإلكتروني</th>
+                                    <th className="px-6 py-4 text-xs font-bold text-slate-300">الدور الوظيفي</th>
+                                    <th className="px-6 py-4 text-xs font-bold text-slate-300 text-center">إجراءات</th>
                                 </tr>
                             </thead>
                             <tbody className="divide-y divide-slate-800/50">
@@ -144,9 +144,9 @@ export const StaffPage = () => {
                                                 {s.name}
                                             </div>
                                         </td>
-                                        <td className="px-6 py-4 text-slate-400">
+                                        <td className="px-6 py-4 text-slate-300">
                                             <div className="flex items-center gap-2">
-                                                <Mail className="w-4 h-4 text-slate-600" />
+                                                <Mail className="w-4 h-4 text-slate-500" />
                                                 {s.email}
                                             </div>
                                         </td>