Fix dropdown positioning and remove blue tint from dark mode cards

- Add sideOffset prop to FinancialDropdown to position dropdowns below FloatingFinancialHeader
- Convert all dark mode card colors from blue-tinted slate to completely neutral grey (zero saturation)
- Update card-theme.css, card-theme-system.ts, globals.css, and radix-colors.ts
- Update documentation to reflect neutral grey changes
- Fixes dropdown overlap issue and provides truly colorless grey cards in dark mode

Author: sirjamesgray

README.md

@@ -60,6 +60,7 @@ Open [http://localhost:3000](http://localhost:3000) to see WeWrite in action! 
 - **[Current Architecture](docs/CURRENT_ARCHITECTURE.md)** - ⭐ **ESSENTIAL** - Complete system overview and architecture principles
 - **[Payment System Guide](docs/PAYMENT_SYSTEM_GUIDE.md)** - ⭐ **ESSENTIAL** - Complete USD payment system documentation
 - **[Performance Optimization Guide](docs/PERFORMANCE_OPTIMIZATION_GUIDE.md)** - ⭐ **ESSENTIAL** - Optimization strategies (90% cost reduction achieved)
+- **[Design System](docs/design-system.md)** - ⭐ **ESSENTIAL** - FloatingCard component system and glassmorphism guidelines
 
 #### Quick Start Guides
 - **[Environment Quick Reference](docs/ENVIRONMENT_QUICK_REFERENCE.md)** - Development environment setup

app/admin/dashboard/page.tsx

@@ -47,7 +47,7 @@ import { SubscriptionConversionFunnelWidget } from "../../components/admin/Subsc
 import { SubscriptionsOverTimeWidget } from "../../components/admin/SubscriptionsOverTimeWidget";
 import { SubscriptionRevenueWidget } from "../../components/admin/SubscriptionRevenueWidget";
 
-import { DashboardErrorBoundary, WidgetErrorBoundary } from "../../components/admin/DashboardErrorBoundary";
+import { UnifiedErrorBoundary } from "../../components/utils/UnifiedErrorBoundary";
 import { DashboardGridSkeleton, DateRangeFilterSkeleton } from "../../components/admin/DashboardSkeleton";
 import './dashboard.css';
 
@@ -379,7 +379,7 @@ export default function AdminDashboardPage() {
 
         {/* Dashboard Content */}
         <div className="py-6 px-6">
-          <DashboardErrorBoundary>
+          <UnifiedErrorBoundary>
             {(() => {
               if (dashboardLoading) {
                 console.log('🔄🔄🔄 Dashboard is loading, showing skeleton 🔄🔄🔄');
@@ -396,13 +396,13 @@ export default function AdminDashboardPage() {
                   <>
                     {/* Desktop-Optimized Dashboard - Full Width */}
                     <div className="w-full">
-                      <DashboardErrorBoundary>
+                      <UnifiedErrorBoundary>
                         <DesktopOptimizedDashboard
                           dateRange={dateRange}
                           granularity={granularity}
                           globalFilters={globalFilters}
                         />
-                      </DashboardErrorBoundary>
+                      </UnifiedErrorBoundary>
                     </div>
                   </>
                 );
@@ -417,13 +417,13 @@ export default function AdminDashboardPage() {
                           const WidgetComponent = widget.component;
                           return (
                             <DraggableWidget key={widget.id} id={widget.id} index={index} moveWidget={moveWidget}>
-                              <WidgetErrorBoundary widgetName={widget.id}>
+                              <UnifiedErrorBoundary>
                                 <WidgetComponent
                                   dateRange={dateRange}
                                   granularity={granularity}
                                   globalFilters={globalFilters}
                                 />
-                              </WidgetErrorBoundary>
+                              </UnifiedErrorBoundary>
                             </DraggableWidget>
                           );
                         })}
@@ -433,7 +433,7 @@ export default function AdminDashboardPage() {
                 }
               }
             })()}
-          </DashboardErrorBoundary>
+          </UnifiedErrorBoundary>
         </div>
       </div>
     </DndProvider>