Add grant details pages and enhance portfolio management

- Create grant details pages for Urban Health Initiative Romania and Digital Education Platform Kenya
- Implement Form Modal pattern for grant detail views with comprehensive project tracking
- Add milestone tracking, budget visualization, and impact assessment charts
- Fix duplicate headers in grant-portfolio page, keep "Global Portfolio Overview"
- Add "New Grant" button to portfolio header and remove "Export Report" dropdown
- Update grant card data consistency between portfolio and detail pages
- Enhance mobile navigation with proper sidebar integration
- Update design system CSS classes and button styling patterns

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: babayomi

design-system/atoms/buttons/index.html

@@ -39,7 +39,7 @@
                             Atoms
                         </a>
                         <span class="text-gray-300 dark:text-gray-600">/</span>
-                        <span class="text-sm font-medium text-gray-900 dark:text-gray-100">Buttons</span>
+                        <span class="text-sm font-medium text-botnar-pink-600 dark:text-botnar-pink-400">Buttons</span>
                     </nav>
 
                     <!-- Theme Toggle -->
@@ -62,7 +62,7 @@
 
             <!-- Page Header -->
             <div class="mb-12">
-                <h1 class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">Button Atoms</h1>
+                <h1 class="text-4xl font-bold text-botnar-pink-600 dark:text-botnar-pink-400 mb-4">Button Atoms</h1>
                 <p class="text-xl text-gray-600 dark:text-gray-300 mb-6">
                     Button components for the Fondation Botnar Dashboard design system
                 </p>
@@ -82,15 +82,15 @@ <h1 class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">Button Atom
                         <div class="text-sm text-gray-600 dark:text-gray-400">States</div>
                     </div>
                     <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 text-center">
-                        <div class="text-2xl font-bold text-gray-900 dark:text-gray-100">100%</div>
+                        <div class="text-2xl font-bold text-botnar-pink-600 dark:text-botnar-pink-400">100%</div>
                         <div class="text-sm text-gray-600 dark:text-gray-400">Accessible</div>
                     </div>
                 </div>
             </div>
 
             <!-- Button Components -->
             <section class="mb-12">
-                <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-8">Components</h2>
+                <h2 class="text-2xl font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-8">Components</h2>
 
                 <div class="grid gap-8">
 
@@ -99,7 +99,7 @@ <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-8">Compone
                         <div class="p-6">
                             <div class="flex items-start justify-between mb-4">
                                 <div>
-                                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+                                    <h3 class="text-xl font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-2">
                                         <a href="./primary-buttons.html" class="hover:text-botnar-blue-600 dark:hover:text-botnar-blue-400">
                                             Primary Buttons
                                         </a>
@@ -147,7 +147,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
 
                             <!-- Features -->
                             <div class="mt-4">
-                                <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Features</h4>
+                                <h4 class="text-sm font-medium text-botnar-pink-600 dark:text-botnar-pink-400 mb-2">Features</h4>
                                 <div class="flex flex-wrap gap-2">
                                     <span class="inline-flex px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
                                         4 variants
@@ -174,7 +174,7 @@ <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Features</
 
             <!-- Button Hierarchy -->
             <section class="mb-12">
-                <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Button Hierarchy</h2>
+                <h2 class="text-2xl font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-6">Button Hierarchy</h2>
 
                 <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                     <div class="overflow-x-auto">
@@ -189,25 +189,25 @@ <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Button
                             </thead>
                             <tbody class="divide-y divide-gray-200 dark:divide-gray-600">
                                 <tr>
-                                    <td class="py-3 px-4 text-sm font-medium text-gray-900 dark:text-gray-100">Primary</td>
+                                    <td class="py-3 px-4 text-sm font-medium text-botnar-pink-600 dark:text-botnar-pink-400">Primary</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Main call-to-action, form submissions</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">High</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Submit Application, Save Changes</td>
                                 </tr>
                                 <tr>
-                                    <td class="py-3 px-4 text-sm font-medium text-gray-900 dark:text-gray-100">Secondary</td>
+                                    <td class="py-3 px-4 text-sm font-medium text-botnar-pink-600 dark:text-botnar-pink-400">Secondary</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Alternative actions, cancel operations</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Medium</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Cancel, Export Data</td>
                                 </tr>
                                 <tr>
-                                    <td class="py-3 px-4 text-sm font-medium text-gray-900 dark:text-gray-100">Ghost</td>
+                                    <td class="py-3 px-4 text-sm font-medium text-botnar-pink-600 dark:text-botnar-pink-400">Ghost</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Tertiary actions, navigation</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Low</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Learn More, Settings</td>
                                 </tr>
                                 <tr>
-                                    <td class="py-3 px-4 text-sm font-medium text-gray-900 dark:text-gray-100">Danger</td>
+                                    <td class="py-3 px-4 text-sm font-medium text-botnar-pink-600 dark:text-botnar-pink-400">Danger</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Destructive actions, deletion</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Critical</td>
                                     <td class="py-3 px-4 text-sm text-gray-700 dark:text-gray-300">Delete Grant, Reject</td>
@@ -220,7 +220,7 @@ <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Button
 
             <!-- Implementation Guidelines -->
             <section class="mb-12">
-                <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Implementation Guidelines</h2>
+                <h2 class="text-2xl font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-6">Implementation Guidelines</h2>
 
                 <div class="grid md:grid-cols-2 gap-6">
                     <!-- Best Practices -->
@@ -263,12 +263,12 @@ <h3 class="font-semibold text-red-900 dark:text-red-100 mb-4 flex items-center">
 
             <!-- Accessibility Features -->
             <section class="mb-12">
-                <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Accessibility Features</h2>
+                <h2 class="text-2xl font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-6">Accessibility Features</h2>
 
                 <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                     <div class="grid md:grid-cols-3 gap-6">
                         <div>
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">WCAG Compliance</h3>
+                            <h3 class="text-lg font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-3">WCAG Compliance</h3>
                             <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
                                 <li class="flex items-center">
                                     <span class="text-green-500 mr-2">✓</span>
@@ -286,7 +286,7 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">WCAG Com
                         </div>
 
                         <div>
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Keyboard Support</h3>
+                            <h3 class="text-lg font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-3">Keyboard Support</h3>
                             <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
                                 <li class="flex items-center">
                                     <span class="text-green-500 mr-2">✓</span>
@@ -304,7 +304,7 @@ <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Keyboard
                         </div>
 
                         <div>
-                            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Screen Readers</h3>
+                            <h3 class="text-lg font-semibold text-botnar-pink-600 dark:text-botnar-pink-400 mb-3">Screen Readers</h3>
                             <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1">
                                 <li class="flex items-center">
                                     <span class="text-green-500 mr-2">✓</span>