From 34b9aff6e7fad38d29031ac3edcc2526d89f9e80 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 23 Sep 2025 21:36:50 +0200
Subject: [PATCH] fix: light mode : review some styles

---
 src/app/globals.css                           | 86 +++++++++++++++++++
 .../dashboard/ManagerWeeklySummary.tsx        | 70 +++++++--------
 .../dashboard/charts/MetricsOverview.tsx      | 30 +++----
 .../dashboard/charts/ProductivityInsights.tsx | 26 +++---
 .../deadline/CriticalDeadlinesCard.tsx        | 12 ++-
 5 files changed, 160 insertions(+), 64 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index cfc143e..7ea8ed2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -69,6 +69,92 @@ body {
   background: var(--primary);
 }
 
+/* Outline card styles pour meilleure lisibilité */
+.outline-card-blue {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
+  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
+}
+
+.outline-card-green {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--success);
+  background-color: color-mix(in srgb, var(--success) 8%, transparent);
+  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
+}
+
+.outline-card-orange {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--accent);
+  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
+}
+
+.outline-card-red {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--destructive);
+  background-color: color-mix(in srgb, var(--destructive) 8%, transparent);
+  border-color: color-mix(in srgb, var(--destructive) 25%, var(--border));
+}
+
+.outline-card-purple {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: #8b5cf6; /* purple-500 */
+  background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
+  border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
+}
+
+.outline-card-yellow {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: #eab308; /* yellow-500 */
+  background-color: color-mix(in srgb, #eab308 8%, transparent);
+  border-color: color-mix(in srgb, #eab308 25%, var(--border));
+}
+
+.outline-card-gray {
+  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--muted-foreground);
+  background-color: color-mix(in srgb, var(--muted) 8%, transparent);
+  border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
+}
+
+/* Variantes pour les métriques (padding plus large) */
+.outline-metric-blue {
+  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--primary);
+  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
+  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
+}
+
+.outline-metric-green {
+  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--success);
+  background-color: color-mix(in srgb, var(--success) 8%, transparent);
+  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
+}
+
+.outline-metric-orange {
+  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--accent);
+  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
+}
+
+.outline-metric-purple {
+  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: #8b5cf6; /* purple-500 */
+  background-color: color-mix(in srgb, #8b5cf6 8%, transparent);
+  border-color: color-mix(in srgb, #8b5cf6 25%, var(--border));
+}
+
+.outline-metric-gray {
+  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
+  color: var(--muted-foreground);
+  background-color: color-mix(in srgb, var(--muted) 8%, transparent);
+  border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
+}
+
 /* Animations tech */
 @keyframes glow {
   0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.3); }
diff --git a/src/components/dashboard/ManagerWeeklySummary.tsx b/src/components/dashboard/ManagerWeeklySummary.tsx
index 2d96033..7d72d4a 100644
--- a/src/components/dashboard/ManagerWeeklySummary.tsx
+++ b/src/components/dashboard/ManagerWeeklySummary.tsx
@@ -32,19 +32,19 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
 
   const getPriorityBadgeStyle = (priority: 'low' | 'medium' | 'high') => {
     const config = getPriorityConfig(priority);
-    const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium';
+    const baseClasses = 'text-xs px-2 py-0.5 rounded font-medium border';
     
     switch (config.color) {
       case 'blue':
-        return `${baseClasses} bg-blue-100 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400`;
+        return `${baseClasses} text-[var(--primary)] bg-[var(--primary)]/10 border-[var(--primary)]/20`;
       case 'yellow':
-        return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/20 text-yellow-600 dark:text-yellow-400`;
+        return `${baseClasses} text-[var(--accent)] bg-[var(--accent)]/10 border-[var(--accent)]/20`;
       case 'purple':
-        return `${baseClasses} bg-purple-100 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400`;
+        return `${baseClasses} text-[#8b5cf6] bg-[#8b5cf6]/10 border-[#8b5cf6]/20`;
       case 'red':
-        return `${baseClasses} bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400`;
+        return `${baseClasses} text-[var(--destructive)] bg-[var(--destructive)]/10 border-[var(--destructive)]/20`;
       default:
-        return `${baseClasses} bg-gray-100 dark:bg-gray-900/20 text-gray-600 dark:text-gray-400`;
+        return `${baseClasses} text-[var(--muted-foreground)] bg-[var(--muted)]/10 border-[var(--muted)]/20`;
     }
   };
 
@@ -123,19 +123,19 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
               </h2>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-400">
-                <h3 className="font-medium text-blue-900 mb-2">🎯 Points clés accomplis</h3>
-                <p className="text-blue-800">{summary.narrative.weekHighlight}</p>
+              <div className="outline-card-blue p-4">
+                <h3 className="font-medium mb-2">🎯 Points clés accomplis</h3>
+                <p>{summary.narrative.weekHighlight}</p>
               </div>
               
-              <div className="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-400">
-                <h3 className="font-medium text-yellow-900 mb-2">⚡ Défis traités</h3>
-                <p className="text-yellow-800">{summary.narrative.mainChallenges}</p>
+              <div className="outline-card-yellow p-4">
+                <h3 className="font-medium mb-2">⚡ Défis traités</h3>
+                <p>{summary.narrative.mainChallenges}</p>
               </div>
               
-              <div className="bg-green-50 p-4 rounded-lg border-l-4 border-green-400">
-                <h3 className="font-medium text-green-900 mb-2">🔮 Focus 7 prochains jours</h3>
-                <p className="text-green-800">{summary.narrative.nextWeekFocus}</p>
+              <div className="outline-card-green p-4">
+                <h3 className="font-medium mb-2">🔮 Focus 7 prochains jours</h3>
+                <p>{summary.narrative.nextWeekFocus}</p>
               </div>
             </CardContent>
           </Card>
@@ -147,42 +147,42 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
             </CardHeader>
             <CardContent>
               <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-                <div className="text-center p-4 bg-blue-50 rounded-lg">
-                  <div className="text-2xl font-bold text-blue-600">
+                <div className="outline-metric-blue">
+                  <div className="text-2xl font-bold">
                     {summary.metrics.totalTasksCompleted}
                   </div>
-                  <div className="text-sm text-blue-600">Tâches complétées</div>
-                  <div className="text-xs text-blue-500">
+                  <div className="text-sm">Tâches complétées</div>
+                  <div className="text-xs opacity-75">
                     dont {summary.metrics.highPriorityTasksCompleted} priorité haute
                   </div>
                 </div>
                 
-                <div className="text-center p-4 bg-green-50 rounded-lg">
-                  <div className="text-2xl font-bold text-green-600">
+                <div className="outline-metric-green">
+                  <div className="text-2xl font-bold">
                     {summary.metrics.totalCheckboxesCompleted}
                   </div>
-                  <div className="text-sm text-green-600">Todos complétés</div>
-                  <div className="text-xs text-green-500">
+                  <div className="text-sm">Todos complétés</div>
+                  <div className="text-xs opacity-75">
                     dont {summary.metrics.meetingCheckboxesCompleted} meetings
                   </div>
                 </div>
                 
-                <div className="text-center p-4 bg-purple-50 rounded-lg">
-                  <div className="text-2xl font-bold text-purple-600">
+                <div className="outline-metric-purple">
+                  <div className="text-2xl font-bold">
                     {summary.keyAccomplishments.filter(a => a.impact === 'high').length}
                   </div>
-                  <div className="text-sm text-purple-600">Items à fort impact</div>
-                  <div className="text-xs text-purple-500">
+                  <div className="text-sm">Items à fort impact</div>
+                  <div className="text-xs opacity-75">
                     / {summary.keyAccomplishments.length} accomplissements
                   </div>
                 </div>
                 
-                <div className="text-center p-4 bg-orange-50 rounded-lg">
-                  <div className="text-2xl font-bold text-orange-600">
+                <div className="outline-metric-orange">
+                  <div className="text-2xl font-bold">
                     {summary.upcomingChallenges.filter(c => c.priority === 'high').length}
                   </div>
-                  <div className="text-sm text-orange-600">Priorités critiques</div>
-                  <div className="text-xs text-orange-500">
+                  <div className="text-sm">Priorités critiques</div>
+                  <div className="text-xs opacity-75">
                     / {summary.upcomingChallenges.length} enjeux
                   </div>
                 </div>
@@ -214,7 +214,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
                         {/* Header compact */}
                         <div className="flex items-center justify-between mb-2">
                           <div className="flex items-center gap-2">
-                            <span className="w-5 h-5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-bold flex items-center justify-center">
+                            <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
                               #{index + 1}
                             </span>
                             <span className={getPriorityBadgeStyle(accomplishment.impact)}>
@@ -288,7 +288,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
                         {/* Header compact */}
                         <div className="flex items-center justify-between mb-2">
                           <div className="flex items-center gap-2">
-                            <span className="w-5 h-5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-bold flex items-center justify-center">
+                            <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
                               #{index + 1}
                             </span>
                             <span className={getPriorityBadgeStyle(challenge.priority)}>
@@ -364,7 +364,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
                   {/* Header compact */}
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-2">
-                      <span className="w-5 h-5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 rounded-full text-xs font-bold flex items-center justify-center">
+                      <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--success)] bg-[var(--success)]/15 border border-[var(--success)]/25">
                         #{index + 1}
                       </span>
                       <span className={getPriorityBadgeStyle(accomplishment.impact)}>
@@ -436,7 +436,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
                   {/* Header compact */}
                   <div className="flex items-center justify-between mb-2">
                     <div className="flex items-center gap-2">
-                      <span className="w-5 h-5 bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300 rounded-full text-xs font-bold flex items-center justify-center">
+                      <span className="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center text-[var(--accent)] bg-[var(--accent)]/15 border border-[var(--accent)]/25">
                         #{index + 1}
                       </span>
                       <span className={getPriorityBadgeStyle(challenge.priority)}>
diff --git a/src/components/dashboard/charts/MetricsOverview.tsx b/src/components/dashboard/charts/MetricsOverview.tsx
index c06358d..16c5142 100644
--- a/src/components/dashboard/charts/MetricsOverview.tsx
+++ b/src/components/dashboard/charts/MetricsOverview.tsx
@@ -33,41 +33,41 @@ export function MetricsOverview({ metrics }: MetricsOverviewProps) {
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
-          <div className="text-center p-4 bg-green-50 dark:bg-green-950/20 rounded-lg">
-            <div className="text-2xl font-bold text-green-600">
+          <div className="outline-metric-green">
+            <div className="text-2xl font-bold">
               {metrics.summary.totalTasksCompleted}
             </div>
-            <div className="text-sm text-green-600">Terminées</div>
+            <div className="text-sm">Terminées</div>
           </div>
           
-          <div className="text-center p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
-            <div className="text-2xl font-bold text-blue-600">
+          <div className="outline-metric-blue">
+            <div className="text-2xl font-bold">
               {metrics.summary.totalTasksCreated}
             </div>
-            <div className="text-sm text-blue-600">Créées</div>
+            <div className="text-sm">Créées</div>
           </div>
           
-          <div className="text-center p-4 bg-purple-50 dark:bg-purple-950/20 rounded-lg">
-            <div className="text-2xl font-bold text-purple-600">
+          <div className="outline-metric-purple">
+            <div className="text-2xl font-bold">
               {metrics.summary.averageCompletionRate.toFixed(1)}%
             </div>
-            <div className="text-sm text-purple-600">Taux moyen</div>
+            <div className="text-sm">Taux moyen</div>
           </div>
           
-          <div className="text-center p-4 bg-orange-50 dark:bg-orange-950/20 rounded-lg">
-            <div className="text-2xl font-bold text-orange-600">
+          <div className="outline-metric-orange">
+            <div className="text-2xl font-bold">
               {getTrendIcon(metrics.summary.trendsAnalysis.completionTrend)}
             </div>
-            <div className="text-sm text-orange-600 capitalize">
+            <div className="text-sm capitalize">
               {metrics.summary.trendsAnalysis.completionTrend}
             </div>
           </div>
           
-          <div className="text-center p-4 bg-gray-50 dark:bg-gray-950/20 rounded-lg">
-            <div className="text-2xl font-bold text-gray-600">
+          <div className="outline-metric-gray">
+            <div className="text-2xl font-bold">
               {getPatternIcon(metrics.summary.trendsAnalysis.productivityPattern)}
             </div>
-            <div className="text-sm text-gray-600">
+            <div className="text-sm">
               {metrics.summary.trendsAnalysis.productivityPattern === 'consistent' ? 'Régulier' :
                metrics.summary.trendsAnalysis.productivityPattern === 'variable' ? 'Variable' : 'Weekend+'}
             </div>
diff --git a/src/components/dashboard/charts/ProductivityInsights.tsx b/src/components/dashboard/charts/ProductivityInsights.tsx
index 159cd66..0e0196b 100644
--- a/src/components/dashboard/charts/ProductivityInsights.tsx
+++ b/src/components/dashboard/charts/ProductivityInsights.tsx
@@ -76,37 +76,37 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
         {/* Insights principaux */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {/* Jour le plus productif */}
-          <div className="p-4 bg-green-50 dark:bg-green-950/20 rounded-lg">
+          <div className="outline-card-green p-4">
             <div className="flex items-center justify-between mb-2">
-              <h4 className="font-medium text-green-900 dark:text-green-100">
+              <h4 className="font-medium">
                 🏆 Jour champion
               </h4>
-              <span className="text-2xl font-bold text-green-600">
+              <span className="text-2xl font-bold">
                 {mostProductiveDay.completed}
               </span>
             </div>
-            <p className="text-sm text-green-800 dark:text-green-200">
+            <p className="text-sm">
               {mostProductiveDay.dayName} - {mostProductiveDay.completed} tâches terminées
             </p>
-            <p className="text-xs text-green-600 mt-1">
+            <p className="text-xs opacity-75 mt-1">
               Taux: {mostProductiveDay.completionRate.toFixed(1)}%
             </p>
           </div>
 
           {/* Jour le plus créatif */}
-          <div className="p-4 bg-blue-50 dark:bg-blue-950/20 rounded-lg">
+          <div className="outline-card-blue p-4">
             <div className="flex items-center justify-between mb-2">
-              <h4 className="font-medium text-blue-900 dark:text-blue-100">
+              <h4 className="font-medium">
                 💡 Jour créatif
               </h4>
-              <span className="text-2xl font-bold text-blue-600">
+              <span className="text-2xl font-bold">
                 {mostCreativeDay.newTasks}
               </span>
             </div>
-            <p className="text-sm text-blue-800 dark:text-blue-200">
+            <p className="text-sm">
               {mostCreativeDay.dayName} - {mostCreativeDay.newTasks} nouvelles tâches
             </p>
-            <p className="text-xs text-blue-600 mt-1">
+            <p className="text-xs opacity-75 mt-1">
               {mostCreativeDay.dayName === mostProductiveDay.dayName ? 
                 'Également jour le plus productif!' : 
                 'Journée de planification'}
@@ -162,11 +162,11 @@ export function ProductivityInsights({ data, className }: ProductivityInsightsPr
         </div>
 
         {/* Recommandations */}
-        <div className="p-4 bg-yellow-50 dark:bg-yellow-950/20 rounded-lg">
-          <h4 className="font-medium text-yellow-900 dark:text-yellow-100 mb-2 flex items-center gap-2">
+        <div className="outline-card-yellow p-4">
+          <h4 className="font-medium mb-2 flex items-center gap-2">
             💡 Recommandations
           </h4>
-          <div className="space-y-1 text-sm text-yellow-800 dark:text-yellow-200">
+          <div className="space-y-1 text-sm">
             {trend === 'down' && (
               <p>• Essayez de retrouver votre rythme du début de semaine</p>
             )}
diff --git a/src/components/deadline/CriticalDeadlinesCard.tsx b/src/components/deadline/CriticalDeadlinesCard.tsx
index 9f91405..7d8a948 100644
--- a/src/components/deadline/CriticalDeadlinesCard.tsx
+++ b/src/components/deadline/CriticalDeadlinesCard.tsx
@@ -93,10 +93,20 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
         {urgentTasks.map((task) => {
           const urgencyStyle = getUrgencyStyle(task);
           
+          const getStyleClass = (urgencyLevel: string) => {
+            if (urgencyLevel === 'overdue') {
+              return 'outline-card-red';
+            } else if (urgencyLevel === 'critical') {
+              return 'outline-card-orange';
+            } else {
+              return 'outline-card-yellow';
+            }
+          };
+
           return (
             <div 
               key={task.id} 
-              className={`p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01] ${urgencyStyle.style}`}
+              className={getStyleClass(task.urgencyLevel)}
             >
               <div className="flex items-start justify-between gap-2">
                 <div className="flex-1 min-w-0">