Add 1 files

index.html

@@ -9,10 +9,63 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            DEFAULT: '#0A84FF',
+                            dark: '#0984FF'
+                        },
+                        secondary: {
+                            DEFAULT: '#5E5CE6',
+                            dark: '#5E5CE6'
+                        },
+                        background: {
+                            DEFAULT: '#FFFFFF',
+                            dark: '#1C1C1E'
+                        },
+                        surface: {
+                            DEFAULT: '#F2F2F7',
+                            dark: '#2C2C2E'
+                        },
+                        card: {
+                            DEFAULT: '#FFFFFF',
+                            dark: '#2C2C2E'
+                        },
+                        border: {
+                            DEFAULT: '#D1D1D6',
+                            dark: '#38383A'
+                        },
+                        text: {
+                            DEFAULT: '#1C1C1E',
+                            dark: '#FFFFFF'
+                        },
+                        subtitle: {
+                            DEFAULT: '#636366',
+                            dark: '#8E8E93'
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
     <style>
+        body {
+            @apply bg-background dark:bg-background-dark text-text dark:text-text-dark font-sans;
+            -webkit-font-smoothing: antialiased;
+        }
+        
         .sidebar {
             transition: all 0.3s;
+            @apply bg-surface dark:bg-surface-dark border-r border-border dark:border-border-dark;
         }
+        
         @media (max-width: 768px) {
             .sidebar {
                 transform: translateX(-100%);
@@ -21,64 +74,110 @@
                 transform: translateX(0);
             }
         }
+        
         .invoice-preview {
             width: 210mm;
             min-height: 297mm;
             margin: auto;
             padding: 20mm;
             box-shadow: 0 0 10px rgba(0,0,0,0.1);
-            background: white;
+            @apply bg-card dark:bg-card-dark;
+        }
+        
+        /* iOS-like elements */
+        .ios-card {
+            @apply rounded-xl shadow-sm overflow-hidden border border-border dark:border-border-dark;
+        }
+        
+        .ios-button {
+            @apply rounded-full px-4 py-2 text-center font-medium text-white bg-primary dark:bg-primary-dark;
+        }
+        
+        .ios-segmented-control {
+            @apply inline-flex rounded-full p-1 bg-surface dark:bg-surface-dark;
+        }
+        
+        .ios-segmented-control button {
+            @apply px-4 py-1 rounded-full text-sm font-medium;
+        }
+        
+        .ios-segmented-control button.active {
+            @apply bg-primary dark:bg-primary-dark text-white;
+        }
+        
+        .ios-table-cell {
+            @apply px-4 py-3 border-b border-border dark:border-border-dark;
+        }
+        
+        .ios-badge {
+            @apply rounded-full px-2 py-0.5 text-xs font-medium;
+        }
+        
+        /* Dark mode toggle */
+        .dark-mode-toggle {
+            @apply w-12 h-6 rounded-full p-1 bg-gray-300 dark:bg-gray-600 flex items-center transition duration-300;
+        }
+        
+        .dark-mode-toggle span {
+            @apply w-4 h-4 rounded-full bg-white dark:bg-gray-800 shadow-md transform transition duration-300 translate-x-0 dark:translate-x-6;
         }
     </style>
 </head>
-<body class="bg-gray-50 font-sans">
+<body class="dark:bg-background-dark">
+    <!-- Dark Mode Toggle -->
+    <div class="fixed top-4 right-4 z-50">
+        <button id="darkModeToggle" class="dark-mode-toggle">
+            <span></span>
+        </button>
+    </div>
+
     <!-- Mobile Menu Button -->
-    <button id="mobileMenuButton" class="md:hidden fixed top-4 left-4 z-50 bg-blue-600 text-white p-2 rounded-lg">
+    <button id="mobileMenuButton" class="md:hidden fixed top-4 left-4 z-40 bg-primary dark:bg-primary-dark text-white p-2 rounded-full">
         <i class="fas fa-bars"></i>
     </button>
 
     <!-- Sidebar -->
-    <div id="sidebar" class="sidebar fixed top-0 left-0 h-full w-64 bg-blue-800 text-white p-4 shadow-lg z-40">
+    <div id="sidebar" class="sidebar fixed top-0 left-0 h-full w-64 p-4 z-30">
         <div class="flex items-center mb-8">
-            <div class="bg-white text-blue-800 rounded-lg p-2 mr-3">
-                <i class="fas fa-chart-line text-2xl"></i>
+            <div class="bg-primary dark:bg-primary-dark text-white rounded-xl p-3 mr-3">
+                <i class="fas fa-chart-line text-xl"></i>
             </div>
             <h1 class="text-2xl font-bold">Samfact</h1>
         </div>
         
         <nav>
-            <ul class="space-y-2">
+            <ul class="space-y-1">
                 <li>
-                    <a href="#" id="dashboardLink" class="flex items-center p-3 rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-home mr-3"></i> Tableau de bord
+                    <a href="#" id="dashboardLink" class="flex items-center p-3 rounded-lg hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <i class="fas fa-home mr-3 text-subtitle dark:text-subtitle-dark"></i> Tableau de bord
                     </a>
                 </li>
                 <li>
-                    <a href="#" id="projectsLink" class="flex items-center p-3 rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-project-diagram mr-3"></i> Projets
+                    <a href="#" id="projectsLink" class="flex items-center p-3 rounded-lg hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <i class="fas fa-project-diagram mr-3 text-subtitle dark:text-subtitle-dark"></i> Projets
                     </a>
                 </li>
                 <li>
-                    <a href="#" id="clientsLink" class="flex items-center p-3 rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-users mr-3"></i> Clients
+                    <a href="#" id="clientsLink" class="flex items-center p-3 rounded-lg hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <i class="fas fa-users mr-3 text-subtitle dark:text-subtitle-dark"></i> Clients
                     </a>
                 </li>
                 <li>
-                    <a href="#" id="invoicesLink" class="flex items-center p-3 rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-file-invoice-dollar mr-3"></i> Factures & Devis
+                    <a href="#" id="invoicesLink" class="flex items-center p-3 rounded-lg hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <i class="fas fa-file-invoice-dollar mr-3 text-subtitle dark:text-subtitle-dark"></i> Factures & Devis
                     </a>
                 </li>
                 <li>
-                    <a href="#" id="settingsLink" class="flex items-center p-3 rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-cog mr-3"></i> Paramètres
+                    <a href="#" id="settingsLink" class="flex items-center p-3 rounded-lg hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <i class="fas fa-cog mr-3 text-subtitle dark:text-subtitle-dark"></i> Paramètres
                     </a>
                 </li>
             </ul>
         </nav>
         
         <div class="absolute bottom-0 left-0 w-full p-4">
-            <div class="bg-blue-700 p-3 rounded-lg">
-                <p class="text-sm">Auto-entrepreneur</p>
+            <div class="bg-surface dark:bg-surface-dark p-3 rounded-xl">
+                <p class="text-sm text-subtitle dark:text-subtitle-dark">Auto-entrepreneur</p>
                 <p class="font-semibold">Data Analyse</p>
             </div>
         </div>
@@ -87,17 +186,17 @@
     <!-- Main Content -->
     <div class="ml-0 md:ml-64 transition-all duration-300">
         <!-- Header -->
-        <header class="bg-white shadow-sm p-4 flex justify-between items-center">
-            <h2 id="pageTitle" class="text-xl font-semibold text-gray-800">Tableau de bord</h2>
+        <header class="bg-card dark:bg-card-dark border-b border-border dark:border-border-dark p-4 flex justify-between items-center">
+            <h2 id="pageTitle" class="text-xl font-semibold">Tableau de bord</h2>
             <div class="flex items-center space-x-4">
                 <div class="relative">
-                    <button class="bg-blue-600 text-white p-2 rounded-lg hover:bg-blue-700 transition">
-                        <i class="fas fa-bell"></i>
+                    <button class="bg-surface dark:bg-surface-dark p-2 rounded-full hover:bg-surface dark:hover:bg-surface-dark transition">
+                        <i class="fas fa-bell text-subtitle dark:text-subtitle-dark"></i>
                     </button>
                     <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
                 </div>
                 <div class="flex items-center">
-                    <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
+                    <div class="w-8 h-8 rounded-full bg-primary dark:bg-primary-dark flex items-center justify-center text-white">
                         <i class="fas fa-user"></i>
                     </div>
                     <span class="ml-2 font-medium hidden md:inline">Sam</span>
@@ -111,35 +210,35 @@
             <section id="dashboardSection">
                 <!-- Stats Cards -->
                 <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-                    <div class="bg-white p-4 rounded-lg shadow">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4">
+                    <div class="ios-card">
+                        <div class="flex items-center p-4">
+                            <div class="p-3 rounded-lg bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 mr-4">
                                 <i class="fas fa-project-diagram"></i>
                             </div>
                             <div>
-                                <p class="text-gray-500">Projets en cours</p>
+                                <p class="text-subtitle dark:text-subtitle-dark">Projets en cours</p>
                                 <h3 id="activeProjectsCount" class="text-2xl font-bold">0</h3>
                             </div>
                         </div>
                     </div>
-                    <div class="bg-white p-4 rounded-lg shadow">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-lg bg-green-100 text-green-600 mr-4">
+                    <div class="ios-card">
+                        <div class="flex items-center p-4">
+                            <div class="p-3 rounded-lg bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-400 mr-4">
                                 <i class="fas fa-calendar-day"></i>
                             </div>
                             <div>
-                                <p class="text-gray-500">Jours travaillés</p>
+                                <p class="text-subtitle dark:text-subtitle-dark">Jours travaillés</p>
                                 <h3 id="daysWorkedCount" class="text-2xl font-bold">0</h3>
                             </div>
                         </div>
                     </div>
-                    <div class="bg-white p-4 rounded-lg shadow">
-                        <div class="flex items-center">
-                            <div class="p-3 rounded-lg bg-purple-100 text-purple-600 mr-4">
+                    <div class="ios-card">
+                        <div class="flex items-center p-4">
+                            <div class="p-3 rounded-lg bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-400 mr-4">
                                 <i class="fas fa-euro-sign"></i>
                             </div>
                             <div>
-                                <p class="text-gray-500">Revenus HT</p>
+                                <p class="text-subtitle dark:text-subtitle-dark">Revenus HT</p>
                                 <h3 id="totalRevenue" class="text-2xl font-bold">0€</h3>
                             </div>
                         </div>
@@ -147,10 +246,10 @@
                 </div>
 
                 <!-- Chart -->
-                <div class="bg-white p-4 rounded-lg shadow mb-6">
+                <div class="ios-card p-4 mb-6">
                     <div class="flex justify-between items-center mb-4">
-                        <h3 class="font-semibold text-gray-800">Revenus par mois</h3>
-                        <select id="chartRange" class="border rounded px-3 py-1 text-sm">
+                        <h3 class="font-semibold">Revenus par mois</h3>
+                        <select id="chartRange" class="border border-border dark:border-border-dark rounded-full px-3 py-1 text-sm bg-card dark:bg-card-dark">
                             <option value="3">3 mois</option>
                             <option value="6">6 mois</option>
                             <option value="12">12 mois</option>
@@ -160,26 +259,26 @@
                 </div>
 
                 <!-- Projects Table -->
-                <div class="bg-white rounded-lg shadow overflow-hidden">
-                    <div class="flex justify-between items-center p-4 border-b">
-                        <h3 class="font-semibold text-gray-800">Mes projets</h3>
-                        <button id="addProjectBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center">
+                <div class="ios-card overflow-hidden">
+                    <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
+                        <h3 class="font-semibold">Mes projets</h3>
+                        <button id="addProjectBtn" class="ios-button flex items-center">
                             <i class="fas fa-plus mr-2"></i> Nouveau projet
                         </button>
                     </div>
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                        <table class="min-w-full divide-y divide-border dark:divide-border-dark">
+                            <thead class="bg-surface dark:bg-surface-dark">
                                 <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jours</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forfait</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total HT</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Projet</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Client</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Jours</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Forfait</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Total HT</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="projectsTableBody" class="bg-white divide-y divide-gray-200">
+                            <tbody id="projectsTableBody" class="divide-y divide-border dark:divide-border-dark">
                                 <!-- Projects will be added here dynamically -->
                             </tbody>
                         </table>
@@ -189,28 +288,28 @@
 
             <!-- Projects Section -->
             <section id="projectsSection" class="hidden">
-                <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
-                    <div class="flex justify-between items-center p-4 border-b">
-                        <h3 class="font-semibold text-gray-800">Tous les projets</h3>
-                        <button id="addProjectBtn2" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center">
+                <div class="ios-card overflow-hidden mb-6">
+                    <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
+                        <h3 class="font-semibold">Tous les projets</h3>
+                        <button id="addProjectBtn2" class="ios-button flex items-center">
                             <i class="fas fa-plus mr-2"></i> Nouveau projet
                         </button>
                     </div>
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                        <table class="min-w-full divide-y divide-border dark:divide-border-dark">
+                            <thead class="bg-surface dark:bg-surface-dark">
                                 <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Projet</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date début</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date fin</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jours</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total HT</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Projet</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Client</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Date début</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Date fin</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Jours</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Total HT</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Statut</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="allProjectsTableBody" class="bg-white divide-y divide-gray-200">
+                            <tbody id="allProjectsTableBody" class="divide-y divide-border dark:divide-border-dark">
                                 <!-- All projects will be added here dynamically -->
                             </tbody>
                         </table>
@@ -220,25 +319,25 @@
 
             <!-- Clients Section -->
             <section id="clientsSection" class="hidden">
-                <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
-                    <div class="flex justify-between items-center p-4 border-b">
-                        <h3 class="font-semibold text-gray-800">Mes clients</h3>
-                        <button id="addClientBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center">
+                <div class="ios-card overflow-hidden mb-6">
+                    <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
+                        <h3 class="font-semibold">Mes clients</h3>
+                        <button id="addClientBtn" class="ios-button flex items-center">
                             <i class="fas fa-plus mr-2"></i> Nouveau client
                         </button>
                     </div>
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                        <table class="min-w-full divide-y divide-border dark:divide-border-dark">
+                            <thead class="bg-surface dark:bg-surface-dark">
                                 <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Adresse</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SIRET</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Nom</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Email</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Adresse</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">SIRET</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="clientsTableBody" class="bg-white divide-y divide-gray-200">
+                            <tbody id="clientsTableBody" class="divide-y divide-border dark:divide-border-dark">
                                 <!-- Clients will be added here dynamically -->
                             </tbody>
                         </table>
@@ -249,51 +348,51 @@
             <!-- Invoices Section -->
             <section id="invoicesSection" class="hidden">
                 <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-                    <button id="allInvoicesBtn" class="bg-blue-600 text-white p-4 rounded-lg shadow hover:bg-blue-700 transition">
-                        <p class="text-sm">Toutes</p>
+                    <button id="allInvoicesBtn" class="ios-card p-4 text-left hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <p class="text-sm text-subtitle dark:text-subtitle-dark">Toutes</p>
                         <h3 id="allInvoicesCount" class="text-2xl font-bold">0</h3>
                     </button>
-                    <button id="draftInvoicesBtn" class="bg-gray-200 text-gray-800 p-4 rounded-lg shadow hover:bg-gray-300 transition">
-                        <p class="text-sm">Brouillons</p>
+                    <button id="draftInvoicesBtn" class="ios-card p-4 text-left hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <p class="text-sm text-subtitle dark:text-subtitle-dark">Brouillons</p>
                         <h3 id="draftInvoicesCount" class="text-2xl font-bold">0</h3>
                     </button>
-                    <button id="sentInvoicesBtn" class="bg-yellow-100 text-yellow-800 p-4 rounded-lg shadow hover:bg-yellow-200 transition">
-                        <p class="text-sm">Envoyées</p>
+                    <button id="sentInvoicesBtn" class="ios-card p-4 text-left hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <p class="text-sm text-subtitle dark:text-subtitle-dark">Envoyées</p>
                         <h3 id="sentInvoicesCount" class="text-2xl font-bold">0</h3>
                     </button>
-                    <button id="paidInvoicesBtn" class="bg-green-100 text-green-800 p-4 rounded-lg shadow hover:bg-green-200 transition">
-                        <p class="text-sm">Payées</p>
+                    <button id="paidInvoicesBtn" class="ios-card p-4 text-left hover:bg-surface dark:hover:bg-surface-dark transition active:bg-surface dark:active:bg-surface-dark">
+                        <p class="text-sm text-subtitle dark:text-subtitle-dark">Payées</p>
                         <h3 id="paidInvoicesCount" class="text-2xl font-bold">0</h3>
                     </button>
                 </div>
 
-                <div class="bg-white rounded-lg shadow overflow-hidden">
-                    <div class="flex justify-between items-center p-4 border-b">
-                        <h3 class="font-semibold text-gray-800">Factures & Devis</h3>
+                <div class="ios-card overflow-hidden">
+                    <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
+                        <h3 class="font-semibold">Factures & Devis</h3>
                         <div class="flex space-x-2">
-                            <button id="addInvoiceBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition flex items-center">
+                            <button id="addInvoiceBtn" class="ios-button flex items-center">
                                 <i class="fas fa-file-invoice-dollar mr-2"></i> Nouvelle facture
                             </button>
-                            <button id="addQuoteBtn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition flex items-center">
+                            <button id="addQuoteBtn" class="bg-secondary dark:bg-secondary-dark text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition flex items-center">
                                 <i class="fas fa-file-signature mr-2"></i> Nouveau devis
                             </button>
                         </div>
                     </div>
                     <div class="overflow-x-auto">
-                        <table class="min-w-full divide-y divide-gray-200">
-                            <thead class="bg-gray-50">
+                        <table class="min-w-full divide-y divide-border dark:divide-border-dark">
+                            <thead class="bg-surface dark:bg-surface-dark">
                                 <tr>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Numéro</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Échéance</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total HT</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
-                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Numéro</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Client</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Date</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Échéance</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Total HT</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Statut</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Type</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Actions</th>
                                 </tr>
                             </thead>
-                            <tbody id="invoicesTableBody" class="bg-white divide-y divide-gray-200">
+                            <tbody id="invoicesTableBody" class="divide-y divide-border dark:divide-border-dark">
                                 <!-- Invoices will be added here dynamically -->
                             </tbody>
                         </table>
@@ -303,64 +402,64 @@
 
             <!-- Settings Section -->
             <section id="settingsSection" class="hidden">
-                <div class="bg-white rounded-lg shadow overflow-hidden p-6">
-                    <h3 class="font-semibold text-gray-800 text-lg mb-6">Paramètres</h3>
+                <div class="ios-card overflow-hidden p-6">
+                    <h3 class="font-semibold text-lg mb-6">Paramètres</h3>
                     
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                         <!-- Personal Info -->
-                        <div class="border rounded-lg p-4">
-                            <h4 class="font-medium text-gray-700 mb-4">Informations personnelles</h4>
+                        <div class="ios-card p-4">
+                            <h4 class="font-medium mb-4">Informations personnelles</h4>
                             <div class="space-y-4">
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Nom complet</label>
-                                    <input type="text" id="userName" class="w-full border rounded px-3 py-2">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Nom complet</label>
+                                    <input type="text" id="userName" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Email</label>
-                                    <input type="email" id="userEmail" class="w-full border rounded px-3 py-2">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Email</label>
+                                    <input type="email" id="userEmail" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Adresse</label>
-                                    <textarea id="userAddress" class="w-full border rounded px-3 py-2"></textarea>
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Adresse</label>
+                                    <textarea id="userAddress" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark"></textarea>
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">SIRET</label>
-                                    <input type="text" id="userSiret" class="w-full border rounded px-3 py-2">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">SIRET</label>
+                                    <input type="text" id="userSiret" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                 </div>
-                                <button id="savePersonalInfoBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
+                                <button id="savePersonalInfoBtn" class="ios-button w-full">
                                     Enregistrer
                                 </button>
                             </div>
                         </div>
                         
                         <!-- Business Settings -->
-                        <div class="border rounded-lg p-4">
-                            <h4 class="font-medium text-gray-700 mb-4">Paramètres professionnels</h4>
+                        <div class="ios-card p-4">
+                            <h4 class="font-medium mb-4">Paramètres professionnels</h4>
                             <div class="space-y-4">
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Forfait journalier par défaut (€)</label>
-                                    <input type="number" id="defaultRate" class="w-full border rounded px-3 py-2">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Forfait journalier par défaut (€)</label>
+                                    <input type="number" id="defaultRate" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Conditions de paiement</label>
-                                    <input type="text" id="paymentTerms" class="w-full border rounded px-3 py-2" placeholder="Ex: 30 jours net">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Conditions de paiement</label>
+                                    <input type="text" id="paymentTerms" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" placeholder="Ex: 30 jours net">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Logo</label>
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Logo</label>
                                     <div class="flex items-center space-x-4">
-                                        <div class="w-16 h-16 bg-gray-200 rounded-lg flex items-center justify-center overflow-hidden">
+                                        <div class="w-16 h-16 bg-surface dark:bg-surface-dark rounded-lg flex items-center justify-center overflow-hidden">
                                             <img id="logoPreview" src="" alt="Logo" class="hidden max-w-full max-h-full">
-                                            <i class="fas fa-camera text-gray-400"></i>
+                                            <i class="fas fa-camera text-subtitle dark:text-subtitle-dark"></i>
                                         </div>
                                         <div>
                                             <input type="file" id="logoUpload" class="hidden" accept="image/*">
-                                            <button id="uploadLogoBtn" class="text-sm bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded">
+                                            <button id="uploadLogoBtn" class="text-sm bg-surface dark:bg-surface-dark hover:bg-opacity-80 px-3 py-1 rounded-lg">
                                                 Choisir un logo
                                             </button>
                                         </div>
                                     </div>
                                 </div>
-                                <button id="saveBusinessSettingsBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
+                                <button id="saveBusinessSettingsBtn" class="ios-button w-full">
                                     Enregistrer
                                 </button>
                             </div>
@@ -374,10 +473,10 @@
     <!-- Modals -->
     <!-- Add Project Modal -->
     <div id="projectModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-            <div class="flex justify-between items-center p-4 border-b">
+        <div class="ios-card w-full max-w-md">
+            <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
                 <h3 class="font-semibold text-lg">Nouveau projet</h3>
-                <button id="closeProjectModal" class="text-gray-500 hover:text-gray-700">
+                <button id="closeProjectModal" class="text-subtitle dark:text-subtitle-dark hover:text-text dark:hover:text-text-dark">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
@@ -385,46 +484,46 @@
                 <form id="projectForm">
                     <div class="space-y-4">
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Nom du projet*</label>
-                            <input type="text" id="projectName" class="w-full border rounded px-3 py-2" required>
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Nom du projet*</label>
+                            <input type="text" id="projectName" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                         </div>
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Client*</label>
-                            <select id="projectClient" class="w-full border rounded px-3 py-2" required>
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Client*</label>
+                            <select id="projectClient" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                                 <option value="">Sélectionner un client</option>
                                 <!-- Clients will be added here dynamically -->
                             </select>
                         </div>
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <label class="block text-sm text-gray-500 mb-1">Date de début*</label>
-                                <input type="date" id="projectStartDate" class="w-full border rounded px-3 py-2" required>
+                                <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Date de début*</label>
+                                <input type="date" id="projectStartDate" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                             </div>
                             <div>
-                                <label class="block text-sm text-gray-500 mb-1">Date de fin</label>
-                                <input type="date" id="projectEndDate" class="w-full border rounded px-3 py-2">
+                                <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Date de fin</label>
+                                <input type="date" id="projectEndDate" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                             </div>
                         </div>
                         <div class="grid grid-cols-2 gap-4">
                             <div>
-                                <label class="block text-sm text-gray-500 mb-1">Jours travaillés*</label>
-                                <input type="number" id="projectDays" class="w-full border rounded px-3 py-2" required>
+                                <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Jours travaillés*</label>
+                                <input type="number" id="projectDays" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                             </div>
                             <div>
-                                <label class="block text-sm text-gray-500 mb-1">Forfait journalier (€)*</label>
-                                <input type="number" id="projectRate" class="w-full border rounded px-3 py-2" required>
+                                <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Forfait journalier (€)*</label>
+                                <input type="number" id="projectRate" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                             </div>
                         </div>
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Description</label>
-                            <textarea id="projectDescription" class="w-full border rounded px-3 py-2"></textarea>
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Description</label>
+                            <textarea id="projectDescription" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark"></textarea>
                         </div>
                     </div>
                     <div class="flex justify-end space-x-2 mt-6">
-                        <button type="button" id="cancelProjectBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">
+                        <button type="button" id="cancelProjectBtn" class="px-4 py-2 border border-border dark:border-border-dark rounded-lg hover:bg-surface dark:hover:bg-surface-dark">
                             Annuler
                         </button>
-                        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
+                        <button type="submit" class="ios-button">
                             Enregistrer
                         </button>
                     </div>
@@ -435,10 +534,10 @@
 
     <!-- Add Client Modal -->
     <div id="clientModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-            <div class="flex justify-between items-center p-4 border-b">
+        <div class="ios-card w-full max-w-md">
+            <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
                 <h3 class="font-semibold text-lg">Nouveau client</h3>
-                <button id="closeClientModal" class="text-gray-500 hover:text-gray-700">
+                <button id="closeClientModal" class="text-subtitle dark:text-subtitle-dark hover:text-text dark:hover:text-text-dark">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
@@ -446,31 +545,31 @@
                 <form id="clientForm">
                     <div class="space-y-4">
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Nom*</label>
-                            <input type="text" id="clientName" class="w-full border rounded px-3 py-2" required>
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Nom*</label>
+                            <input type="text" id="clientName" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                         </div>
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Email*</label>
-                            <input type="email" id="clientEmail" class="w-full border rounded px-3 py-2" required>
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Email*</label>
+                            <input type="email" id="clientEmail" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                         </div>
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Adresse</label>
-                            <textarea id="clientAddress" class="w-full border rounded px-3 py-2"></textarea>
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Adresse</label>
+                            <textarea id="clientAddress" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark"></textarea>
                         </div>
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">SIRET</label>
-                            <input type="text" id="clientSiret" class="w-full border rounded px-3 py-2">
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">SIRET</label>
+                            <input type="text" id="clientSiret" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                         </div>
                         <div>
-                            <label class="block text-sm text-gray-500 mb-1">Téléphone</label>
-                            <input type="tel" id="clientPhone" class="w-full border rounded px-3 py-2">
+                            <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Téléphone</label>
+                            <input type="tel" id="clientPhone" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                         </div>
                     </div>
                     <div class="flex justify-end space-x-2 mt-6">
-                        <button type="button" id="cancelClientBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">
+                        <button type="button" id="cancelClientBtn" class="px-4 py-2 border border-border dark:border-border-dark rounded-lg hover:bg-surface dark:hover:bg-surface-dark">
                             Annuler
                         </button>
-                        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
+                        <button type="submit" class="ios-button">
                             Enregistrer
                         </button>
                     </div>
@@ -481,10 +580,10 @@
 
     <!-- Add Invoice/Quote Modal -->
     <div id="invoiceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl">
-            <div class="flex justify-between items-center p-4 border-b">
+        <div class="ios-card w-full max-w-4xl">
+            <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
                 <h3 id="invoiceModalTitle" class="font-semibold text-lg">Nouvelle facture</h3>
-                <button id="closeInvoiceModal" class="text-gray-500 hover:text-gray-700">
+                <button id="closeInvoiceModal" class="text-subtitle dark:text-subtitle-dark hover:text-text dark:hover:text-text-dark">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
@@ -496,29 +595,29 @@
                         <div>
                             <div class="space-y-4">
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Client*</label>
-                                    <select id="invoiceClient" class="w-full border rounded px-3 py-2" required>
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Client*</label>
+                                    <select id="invoiceClient" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                                         <option value="">Sélectionner un client</option>
                                         <!-- Clients will be added here dynamically -->
                                     </select>
                                 </div>
                                 <div class="grid grid-cols-2 gap-4">
                                     <div>
-                                        <label class="block text-sm text-gray-500 mb-1">Date*</label>
-                                        <input type="date" id="invoiceDate" class="w-full border rounded px-3 py-2" required>
+                                        <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Date*</label>
+                                        <input type="date" id="invoiceDate" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" required>
                                     </div>
                                     <div>
-                                        <label class="block text-sm text-gray-500 mb-1">Échéance</label>
-                                        <input type="date" id="invoiceDueDate" class="w-full border rounded px-3 py-2">
+                                        <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Échéance</label>
+                                        <input type="date" id="invoiceDueDate" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                     </div>
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Numéro</label>
-                                    <input type="text" id="invoiceNumber" class="w-full border rounded px-3 py-2 bg-gray-100" readonly>
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Numéro</label>
+                                    <input type="text" id="invoiceNumber" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" readonly>
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Statut</label>
-                                    <select id="invoiceStatus" class="w-full border rounded px-3 py-2">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Statut</label>
+                                    <select id="invoiceStatus" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                         <option value="draft">Brouillon</option>
                                         <option value="sent">Envoyé</option>
                                         <option value="paid">Payé</option>
@@ -529,57 +628,57 @@
                         <div>
                             <div class="space-y-4">
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Projet associé</label>
-                                    <select id="invoiceProject" class="w-full border rounded px-3 py-2">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Projet associé</label>
+                                    <select id="invoiceProject" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark">
                                         <option value="">Aucun projet</option>
                                         <!-- Projects will be added here dynamically -->
                                     </select>
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Conditions de paiement</label>
-                                    <input type="text" id="invoicePaymentTerms" class="w-full border rounded px-3 py-2" placeholder="Ex: 30 jours net">
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Conditions de paiement</label>
+                                    <input type="text" id="invoicePaymentTerms" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark" placeholder="Ex: 30 jours net">
                                 </div>
                                 <div>
-                                    <label class="block text-sm text-gray-500 mb-1">Notes</label>
-                                    <textarea id="invoiceNotes" class="w-full border rounded px-3 py-2"></textarea>
+                                    <label class="block text-sm text-subtitle dark:text-subtitle-dark mb-1">Notes</label>
+                                    <textarea id="invoiceNotes" class="w-full border border-border dark:border-border-dark rounded-lg px-3 py-2 bg-card dark:bg-card-dark"></textarea>
                                 </div>
                             </div>
                         </div>
                     </div>
                     
                     <div class="mt-6">
-                        <h4 class="font-medium text-gray-700 mb-2">Services</h4>
+                        <h4 class="font-medium mb-2">Services</h4>
                         <div class="overflow-x-auto">
-                            <table class="min-w-full divide-y divide-gray-200">
-                                <thead class="bg-gray-50">
+                            <table class="min-w-full divide-y divide-border dark:divide-border-dark">
+                                <thead class="bg-surface dark:bg-surface-dark">
                                     <tr>
-                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
-                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jours</th>
-                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Forfait</th>
-                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
-                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Description</th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Jours</th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Forfait</th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider">Total</th>
+                                        <th class="px-4 py-2 text-left text-xs font-medium text-subtitle dark:text-subtitle-dark uppercase tracking-wider"></th>
                                     </tr>
                                 </thead>
-                                <tbody id="invoiceItemsTable" class="bg-white divide-y divide-gray-200">
+                                <tbody id="invoiceItemsTable" class="divide-y divide-border dark:divide-border-dark">
                                     <tr>
-                                        <td class="px-4 py-2"><input type="text" class="w-full border rounded px-2 py-1 invoice-item-desc" placeholder="Description"></td>
-                                        <td class="px-4 py-2"><input type="number" class="w-full border rounded px-2 py-1 invoice-item-days" placeholder="Jours"></td>
-                                        <td class="px-4 py-2"><input type="number" class="w-full border rounded px-2 py-1 invoice-item-rate" placeholder="Forfait"></td>
-                                        <td class="px-4 py-2"><input type="text" class="w-full border rounded px-2 py-1 invoice-item-total bg-gray-100" placeholder="0.00" readonly></td>
+                                        <td class="px-4 py-2"><input type="text" class="w-full border border-border dark:border-border-dark rounded-lg px-2 py-1 bg-card dark:bg-card-dark invoice-item-desc" placeholder="Description"></td>
+                                        <td class="px-4 py-2"><input type="number" class="w-full border border-border dark:border-border-dark rounded-lg px-2 py-1 bg-card dark:bg-card-dark invoice-item-days" placeholder="Jours"></td>
+                                        <td class="px-4 py-2"><input type="number" class="w-full border border-border dark:border-border-dark rounded-lg px-2 py-1 bg-card dark:bg-card-dark invoice-item-rate" placeholder="Forfait"></td>
+                                        <td class="px-4 py-2"><input type="text" class="w-full border border-border dark:border-border-dark rounded-lg px-2 py-1 bg-card dark:bg-card-dark invoice-item-total" placeholder="0.00" readonly></td>
                                         <td class="px-4 py-2"><button type="button" class="text-red-500 hover:text-red-700 remove-item-btn"><i class="fas fa-trash"></i></button></td>
                                     </tr>
                                 </tbody>
                                 <tfoot>
                                     <tr>
                                         <td colspan="5" class="px-4 py-2">
-                                            <button type="button" id="addInvoiceItemBtn" class="text-blue-600 hover:text-blue-800 text-sm">
+                                            <button type="button" id="addInvoiceItemBtn" class="text-primary dark:text-primary-dark hover:text-opacity-80 text-sm">
                                                 <i class="fas fa-plus mr-1"></i> Ajouter un service
                                             </button>
                                         </td>
                                     </tr>
                                     <tr>
                                         <td colspan="3" class="px-4 py-2 text-right font-medium">Total HT</td>
-                                        <td colspan="2" class="px-4 py-2"><input type="text" id="invoiceSubtotal" class="w-full border rounded px-2 py-1 bg-gray-100" value="0.00" readonly></td>
+                                        <td colspan="2" class="px-4 py-2"><input type="text" id="invoiceSubtotal" class="w-full border border-border dark:border-border-dark rounded-lg px-2 py-1 bg-card dark:bg-card-dark" value="0.00" readonly></td>
                                     </tr>
                                 </tfoot>
                             </table>
@@ -587,10 +686,10 @@
                     </div>
                     
                     <div class="flex justify-end space-x-2 mt-6">
-                        <button type="button" id="cancelInvoiceBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">
+                        <button type="button" id="cancelInvoiceBtn" class="px-4 py-2 border border-border dark:border-border-dark rounded-lg hover:bg-surface dark:hover:bg-surface-dark">
                             Annuler
                         </button>
-                        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
+                        <button type="submit" class="ios-button">
                             Enregistrer
                         </button>
                     </div>
@@ -601,17 +700,17 @@
 
     <!-- Invoice Preview Modal -->
     <div id="invoicePreviewModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden overflow-y-auto">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-4xl m-4">
-            <div class="flex justify-between items-center p-4 border-b">
+        <div class="ios-card w-full max-w-4xl m-4">
+            <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
                 <h3 id="invoicePreviewTitle" class="font-semibold text-lg">Aperçu</h3>
                 <div class="flex space-x-2">
-                    <button id="printInvoiceBtn" class="bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded flex items-center">
+                    <button id="printInvoiceBtn" class="bg-surface dark:bg-surface-dark hover:bg-opacity-80 px-3 py-1 rounded-lg flex items-center">
                         <i class="fas fa-print mr-2"></i> Imprimer
                     </button>
-                    <button id="downloadPdfBtn" class="bg-blue-600 text-white px-3 py-1 rounded flex items-center hover:bg-blue-700">
+                    <button id="downloadPdfBtn" class="ios-button px-3 py-1 flex items-center">
                         <i class="fas fa-file-pdf mr-2"></i> PDF
                     </button>
-                    <button id="closeInvoicePreview" class="text-gray-500 hover:text-gray-700">
+                    <button id="closeInvoicePreview" class="text-subtitle dark:text-subtitle-dark hover:text-text dark:hover:text-text-dark">
                         <i class="fas fa-times"></i>
                     </button>
                 </div>
@@ -626,31 +725,31 @@
 
     <!-- CSV Import Modal -->
     <div id="csvImportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
-            <div class="flex justify-between items-center p-4 border-b">
+        <div class="ios-card w-full max-w-md">
+            <div class="flex justify-between items-center p-4 border-b border-border dark:border-border-dark">
                 <h3 class="font-semibold text-lg">Importer des données</h3>
-                <button id="closeCsvImportModal" class="text-gray-500 hover:text-gray-700">
+                <button id="closeCsvImportModal" class="text-subtitle dark:text-subtitle-dark hover:text-text dark:hover:text-text-dark">
                     <i class="fas fa-times"></i>
                 </button>
             </div>
             <div class="p-4">
                 <div class="mb-4">
-                    <p class="text-sm text-gray-600">Sélectionnez un fichier CSV contenant vos projets existants.</p>
-                    <p class="text-xs text-gray-500 mt-1">Colonnes attendues: Projet, Client, Jours travaillés, Forfait journalier</p>
+                    <p class="text-sm text-subtitle dark:text-subtitle-dark">Sélectionnez un fichier CSV contenant vos projets existants.</p>
+                    <p class="text-xs text-subtitle dark:text-subtitle-dark mt-1">Colonnes attendues: Projet, Client, Jours travaillés, Forfait journalier</p>
                 </div>
-                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
+                <div class="border-2 border-dashed border-border dark:border-border-dark rounded-lg p-6 text-center">
                     <input type="file" id="csvFileInput" class="hidden" accept=".csv">
                     <label for="csvFileInput" class="cursor-pointer">
-                        <i class="fas fa-file-csv text-4xl text-gray-400 mb-2"></i>
-                        <p class="text-sm text-gray-600">Glissez-déposez un fichier ou cliquez pour sélectionner</p>
-                        <p id="csvFileName" class="text-xs text-gray-500 mt-2 hidden"></p>
+                        <i class="fas fa-file-csv text-4xl text-subtitle dark:text-subtitle-dark mb-2"></i>
+                        <p class="text-sm text-subtitle dark:text-subtitle-dark">Glissez-déposez un fichier ou cliquez pour sélectionner</p>
+                        <p id="csvFileName" class="text-xs text-subtitle dark:text-subtitle-dark mt-2 hidden"></p>
                     </label>
                 </div>
                 <div class="flex justify-end space-x-2 mt-6">
-                    <button type="button" id="cancelCsvImportBtn" class="px-4 py-2 border rounded-lg hover:bg-gray-100">
+                    <button type="button" id="cancelCsvImportBtn" class="px-4 py-2 border border-border dark:border-border-dark rounded-lg hover:bg-surface dark:hover:bg-surface-dark">
                         Annuler
                     </button>
-                    <button type="button" id="confirmCsvImportBtn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition disabled:opacity-50" disabled>
+                    <button type="button" id="confirmCsvImportBtn" class="ios-button disabled:opacity-50" disabled>
                         Importer
                     </button>
                 </div>
@@ -661,6 +760,28 @@
     <script>
         // Initialize the application when DOM is loaded
         document.addEventListener('DOMContentLoaded', function() {
+            // Dark mode toggle
+            const darkModeToggle = document.getElementById('darkModeToggle');
+            const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+            
+            // Check localStorage for dark mode preference
+            if (localStorage.getItem('darkMode') === 'enabled' || 
+                (!localStorage.getItem('darkMode') && prefersDarkScheme.matches)) {
+                document.documentElement.classList.add('dark');
+                darkModeToggle.classList.add('bg-primary-dark');
+            }
+            
+            darkModeToggle.addEventListener('click', function() {
+                document.documentElement.classList.toggle('dark');
+                if (document.documentElement.classList.contains('dark')) {
+                    localStorage.setItem('darkMode', 'enabled');
+                    darkModeToggle.classList.add('bg-primary-dark');
+                } else {
+                    localStorage.setItem('darkMode', 'disabled');
+                    darkModeToggle.classList.remove('bg-primary-dark');
+                }
+            });
+
             // Mobile menu toggle
             const mobileMenuButton = document.getElementById('mobileMenuButton');
             const sidebar = document.getElementById('sidebar');
@@ -815,25 +936,25 @@
                     const row = document.createElement('tr');
                     row.innerHTML = `
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="font-medium text-gray-900">${project.name}</div>
+                            <div class="font-medium">${project.name}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${client.name || '-'}</div>
+                            <div>${client.name || '-'}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${project.days}</div>
+                            <div>${project.days}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${project.rate.toLocaleString('fr-FR')}€</div>
+                            <div>${project.rate.toLocaleString('fr-FR')}€</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900 font-medium">${total.toLocaleString('fr-FR')}€</div>
+                            <div class="font-medium">${total.toLocaleString('fr-FR')}€</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <button class="text-blue-600 hover:text-blue-900 mr-2 edit-project-btn" data-id="${project.id}">
+                            <button class="text-primary dark:text-primary-dark hover:text-opacity-80 mr-2 edit-project-btn" data-id="${project.id}">
                                 <i class="fas fa-edit"></i>
                             </button>
-                            <button class="text-red-600 hover:text-red-900 delete-project-btn" data-id="${project.id}">
+                            <button class="text-red-500 hover:text-red-700 delete-project-btn" data-id="${project.id}">
                                 <i class="fas fa-trash"></i>
                             </button>
                         </td>
@@ -856,7 +977,7 @@
                     });
                 });
             }
-
+            
             function updateRevenueChart() {
                 const range = parseInt(document.getElementById('chartRange').value);
                 const now = new Date();
@@ -884,6 +1005,13 @@
                     window.revenueChart.destroy();
                 }
                 
+                // Set chart colors based on dark mode
+                const isDarkMode = document.documentElement.classList.contains('dark');
+                const bgColor = isDarkMode ? 'rgba(59, 130, 246, 0.5)' : 'rgba(10, 132, 255, 0.5)';
+                const borderColor = isDarkMode ? 'rgba(59, 130, 246, 1)' : 'rgba(10, 132, 255, 1)';
+                const textColor = isDarkMode ? '#FFFFFF' : '#1C1C1E';
+                const gridColor = isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+                
                 window.revenueChart = new Chart(ctx, {
                     type: 'bar',
                     data: {
@@ -891,8 +1019,8 @@
                         datasets: [{
                             label: 'Revenus HT (€)',
                             data: revenueData,
-                            backgroundColor: 'rgba(59, 130, 246, 0.5)',
-                            borderColor: 'rgba(59, 130, 246, 1)',
+                            backgroundColor: bgColor,
+                            borderColor: borderColor,
                             borderWidth: 1
                         }]
                     },
@@ -904,7 +1032,19 @@
                                 ticks: {
                                     callback: function(value) {
                                         return value.toLocaleString('fr-FR') + '€';
-                                    }
+                                    },
+                                    color: textColor
+                                },
+                                grid: {
+                                    color: gridColor
+                                }
+                            },
+                            x: {
+                                ticks: {
+                                    color: textColor
+                                },
+                                grid: {
+                                    color: gridColor
                                 }
                             }
                         },
@@ -915,6 +1055,11 @@
                                         return context.dataset.label + ': ' + context.raw.toLocaleString('fr-FR') + '��';
                                     }
                                 }
+                            },
+                            legend: {
+                                labels: {
+                                    color: textColor
+                                }
                             }
                         }
                     }
@@ -931,38 +1076,38 @@
                 appData.projects.forEach(project => {
                     const client = appData.clients.find(c => c.id === project.clientId) || {};
                     const total = project.days * project.rate;
-                    const statusClass = project.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800';
+                    const statusClass = project.status === 'active' ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200';
                     const statusText = project.status === 'active' ? 'Actif' : 'Terminé';
                     
                     const row = document.createElement('tr');
                     row.innerHTML = `
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="font-medium text-gray-900">${project.name}</div>
-                            <div class="text-sm text-gray-500">${project.description || ''}</div>
+                            <div class="font-medium">${project.name}</div>
+                            <div class="text-sm text-subtitle dark:text-subtitle-dark">${project.description || ''}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${client.name || '-'}</div>
+                            <div>${client.name || '-'}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${project.startDate ? new Date(project.startDate).toLocaleDateString('fr-FR') : '-'}</div>
+                            <div>${project.startDate ? new Date(project.startDate).toLocaleDateString('fr-FR') : '-'}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${project.endDate ? new Date(project.endDate).toLocaleDateString('fr-FR') : '-'}</div>
+                            <div>${project.endDate ? new Date(project.endDate).toLocaleDateString('fr-FR') : '-'}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${project.days}</div>
+                            <div>${project.days}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900 font-medium">${total.toLocaleString('fr-FR')}€</div>
+                            <div class="font-medium">${total.toLocaleString('fr-FR')}€</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
                             <span class="px-2 py-1 text-xs rounded-full ${statusClass}">${statusText}</span>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <button class="text-blue-600 hover:text-blue-900 mr-2 edit-project-btn" data-id="${project.id}">
+                            <button class="text-primary dark:text-primary-dark hover:text-opacity-80 mr-2 edit-project-btn" data-id="${project.id}">
                                 <i class="fas fa-edit"></i>
                             </button>
-                            <button class="text-red-600 hover:text-red-900 delete-project-btn" data-id="${project.id}">
+                            <button class="text-red-500 hover:text-red-700 delete-project-btn" data-id="${project.id}">
                                 <i class="fas fa-trash"></i>
                             </button>
                         </td>
@@ -1119,22 +1264,22 @@
                     const row = document.createElement('tr');
                     row.innerHTML = `
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="font-medium text-gray-900">${client.name}</div>
+                            <div class="font-medium">${client.name}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${client.email}</div>
+                            <div>${client.email}</div>
                         </td>
                         <td class="px-6 py-4">
-                            <div class="text-gray-900">${client.address || '-'}</div>
+                            <div>${client.address || '-'}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${client.siret || '-'}</div>
+                            <div>${client.siret || '-'}</div>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap">
-                            <button class="text-blue-600 hover:text-blue-900 mr-2 edit-client-btn" data-id="${client.id}">
+                            <button class="text-primary dark:text-primary-dark hover:text-opacity-80 mr-2 edit-client-btn" data-id="${client.id}">
                                 <i class="fas fa-edit"></i>
                             </button>
-                            <button class="text-red-600 hover:text-red-900 delete-client-btn" data-id="${client.id}">
+                            <button class="text-red-500 hover:text-red-700 delete-client-btn" data-id="${client.id}">
                                 <i class="fas fa-trash"></i>
                             </button>
                         </td>
@@ -1282,206 +1427,5 @@
                 } else if (filter === 'sent') {
                     invoicesToShow = appData.invoices.filter(i => i.status === 'sent');
                 } else if (filter === 'paid') {
-                    invoicesToShow = appData.invoices.filter(i => i.status === 'paid');
-                }
-                
-                // Sort by date (newest first)
-                invoicesToShow.sort((a, b) => new Date(b.date) - new Date(a.date));
-                
-                invoicesToShow.forEach(invoice => {
-                    const client = appData.clients.find(c => c.id === invoice.clientId) || {};
-                    const project = invoice.projectId ? appData.projects.find(p => p.id === invoice.projectId) : null;
-                    const total = invoice.items.reduce((sum, item) => sum + item.total, 0);
-                    
-                    let statusClass = '';
-                    let statusText = '';
-                    
-                    if (invoice.status === 'draft') {
-                        statusClass = 'bg-gray-100 text-gray-800';
-                        statusText = 'Brouillon';
-                    } else if (invoice.status === 'sent') {
-                        statusClass = 'bg-yellow-100 text-yellow-800';
-                        statusText = 'Envoyé';
-                    } else if (invoice.status === 'paid') {
-                        statusClass = 'bg-green-100 text-green-800';
-                        statusText = 'Payé';
-                    }
-                    
-                    const typeText = invoice.type === 'invoice' ? 'Facture' : 'Devis';
-                    const typeClass = invoice.type === 'invoice' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800';
-                    
-                    const row = document.createElement('tr');
-                    row.innerHTML = `
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="font-medium text-gray-900">${invoice.number}</div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${client.name || '-'}</div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${new Date(invoice.date).toLocaleDateString('fr-FR')}</div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900">${invoice.dueDate ? new Date(invoice.dueDate).toLocaleDateString('fr-FR') : '-'}</div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <div class="text-gray-900 font-medium">${total.toLocaleString('fr-FR')}€</div>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="px-2 py-1 text-xs rounded-full ${statusClass}">${statusText}</span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <span class="px-2 py-1 text-xs rounded-full ${typeClass}">${typeText}</span>
-                        </td>
-                        <td class="px-6 py-4 whitespace-nowrap">
-                            <button class="text-blue-600 hover:text-blue-900 mr-2 edit-invoice-btn" data-id="${invoice.id}">
-                                <i class="fas fa-edit"></i>
-                            </button>
-                            <button class="text-purple-600 hover:text-purple-900 mr-2 preview-invoice-btn" data-id="${invoice.id}">
-                                <i class="fas fa-eye"></i>
-                            </button>
-                            <button class="text-red-600 hover:text-red-900 delete-invoice-btn" data-id="${invoice.id}">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </td>
-                    `;
-                    tableBody.appendChild(row);
-                });
-
-                // Add event listeners to buttons
-                document.querySelectorAll('.edit-invoice-btn').forEach(btn => {
-                    btn.addEventListener('click', function() {
-                        openEditInvoiceModal(parseInt(this.getAttribute('data-id')));
-                    });
-                });
-
-                document.querySelectorAll('.preview-invoice-btn').forEach(btn => {
-                    btn.addEventListener('click', function() {
-                        previewInvoice(parseInt(this.getAttribute('data-id')));
-                    });
-                });
-
-                document.querySelectorAll('.delete-invoice-btn').forEach(btn => {
-                    btn.addEventListener('click', function() {
-                        if (confirm('Voulez-vous vraiment supprimer ce document ?')) {
-                            deleteInvoice(parseInt(this.getAttribute('data-id')));
-                        }
-                    });
-                });
-            }
-
-            // Filter buttons
-            document.getElementById('allInvoicesBtn').addEventListener('click', function() {
-                renderInvoicesTable();
-            });
-
-            document.getElementById('draftInvoicesBtn').addEventListener('click', function() {
-                renderInvoicesTable('draft');
-            });
-
-            document.getElementById('sentInvoicesBtn').addEventListener('click', function() {
-                renderInvoicesTable('sent');
-            });
-
-            document.getElementById('paidInvoicesBtn').addEventListener('click', function() {
-                renderInvoicesTable('paid');
-            });
-
-            // Invoice modal functions
-            const invoiceModal = document.getElementById('invoiceModal');
-            const invoiceForm = document.getElementById('invoiceForm');
-            const closeInvoiceModal = document.getElementById('closeInvoiceModal');
-            const cancelInvoiceBtn = document.getElementById('cancelInvoiceBtn');
-            
-            // Open modal for new invoice or quote
-            document.getElementById('addInvoiceBtn').addEventListener('click', function() {
-                openNewInvoiceModal('invoice');
-            });
-            
-            document.getElementById('addQuoteBtn').addEventListener('click', function() {
-                openNewInvoiceModal('quote');
-            });
-            
-            function openNewInvoiceModal(type) {
-                document.getElementById('invoiceForm').reset();
-                document.getElementById('invoiceType').value = type;
-                document.getElementById('invoiceModalTitle').textContent = type === 'invoice' ? 'Nouvelle facture' : 'Nouveau devis';
-                document.getElementById('invoiceId').value = '';
-                
-                // Generate invoice/quote number
-                const now = new Date();
-                const year = now.getFullYear();
-                
-                if (type === 'invoice') {
-                    const nextNum = appData.nextInvoiceNumber.toString().padStart(3, '0');
-                    document.getElementById('invoiceNumber').value = `F${year}-${nextNum}`;
-                } else {
-                    const nextNum = appData.nextQuoteNumber.toString().padStart(3, '0');
-                    document.getElementById('invoiceNumber').value = `D${year}-${nextNum}`;
-                }
-                
-                // Set default date to today
-                document.getElementById('invoiceDate').valueAsDate = now;
-                
-                // Set default payment terms from settings
-                document.getElementById('invoicePaymentTerms').value = appData.settings.paymentTerms || '';
-                
-                // Populate client dropdown
-                const clientSelect = document.getElementById('invoiceClient');
-                clientSelect.innerHTML = '<option value="">Sélectionner un client</option>';
-                
-                appData.clients.forEach(client => {
-                    const option = document.createElement('option');
-                    option.value = client.id;
-                    option.textContent = client.name;
-                    clientSelect.appendChild(option);
-                });
-                
-                // Populate project dropdown
-                const projectSelect = document.getElementById('invoiceProject');
-                projectSelect.innerHTML = '<option value="">Aucun projet</option>';
-                
-                appData.projects.forEach(project => {
-                    const option = document.createElement('option');
-                    option.value = project.id;
-                    option.textContent = project.name;
-                    projectSelect.appendChild(option);
-                });
-                
-                // Clear items table except first row
-                const itemsTable = document.getElementById('invoiceItemsTable');
-                while (itemsTable.rows.length > 1) {
-                    itemsTable.deleteRow(1);
-                }
-                
-                // Reset first row
-                const firstRow = itemsTable.rows[0];
-                firstRow.cells[0].querySelector('input').value = '';
-                firstRow.cells[1].querySelector('input').value = '';
-                firstRow.cells[2].querySelector('input').value = appData.settings.defaultRate || '';
-                firstRow.cells[3].querySelector('input').value = '0.00';
-                
-                invoiceModal.classList.remove('hidden');
-            }
-            
-            function openEditInvoiceModal(invoiceId) {
-                const invoice = appData.invoices.find(i => i.id === invoiceId);
-                if (!invoice) return;
-                
-                document.getElementById('invoiceModalTitle').textContent = invoice.type === 'invoice' ? 'Modifier facture' : 'Modifier devis';
-                document.getElementById('invoiceType').value = invoice.type;
-                document.getElementById('invoiceId').value = invoice.id;
-                
-                // Fill basic info
-                document.getElementById('invoiceNumber').value = invoice.number;
-                document.getElementById('invoiceDate').value = invoice.date;
-                document.getElementById('invoiceDueDate').value = invoice.dueDate || '';
-                document.getElementById('invoiceStatus').value = invoice.status;
-                document.getElementById('invoicePaymentTerms').value = invoice.paymentTerms || '';
-                document.getElementById('invoiceNotes').value = invoice.notes || '';
-                
-                // Populate client dropdown
-                const clientSelect = document.getElementById('invoiceClient');
-                clientSelect.innerHTML = '<option value="">Sélectionner un client</option>';
-
+                    invoicesToShow
 </html>