refactor: enhance AnnualBudget component layout with improved dark mode support, streamline table structure, and update CSS for better visual consistency

composables/useCoopBuilder.ts

@@ -102,7 +102,7 @@ export function useCoopBuilder() {
           streams: baseStreams.map(s => {
             // Reduce service revenue by 30%
             if (s.category?.toLowerCase().includes('service') || s.label.toLowerCase().includes('service')) {
-              return { ...s, monthly: (s.monthly || 0) * 0.7 }
+              return { ...s, monthly: Math.round((s.monthly || 0) * 0.7) }
             }
             return s
           })
@@ -128,7 +128,7 @@ export function useCoopBuilder() {
     if (revenueDelay > 0) {
       adjustedStreams = adjustedStreams.map(s => ({
         ...s,
-        monthly: (s.monthly || 0) * Math.max(0, 1 - (revenueDelay / 12))
+        monthly: Math.round((s.monthly || 0) * Math.max(0, 1 - (revenueDelay / 12)))
       }))
     }
 
@@ -251,7 +251,7 @@ export function useCoopBuilder() {
       // Calculate monthly payroll
       const payrollCost = monthlyPayroll(scenarioMembers || [], currentMode) || 0
       const oncostPct = store.payrollOncostPct || 0
-      const totalPayroll = payrollCost * (1 + Math.max(0, oncostPct) / 100)
+      const totalPayroll = Math.round(payrollCost * (1 + Math.max(0, oncostPct) / 100))
 
       // Calculate revenue and costs  
       const totalRevenue = (scenarioStreams || []).reduce((sum, s) => sum + (s.monthly || 0), 0)

composables/useCushionForecast.ts

@@ -63,7 +63,7 @@ export function useCushionForecast() {
     const operatingMode = policiesStore.operatingMode || 'minimum'
     const payrollCost = monthlyPayroll(membersStore.members, operatingMode)
     const oncostPct = policiesStore.payrollOncostPct || 0
-    const totalPayroll = payrollCost * (1 + oncostPct / 100)
+    const totalPayroll = Math.round(payrollCost * (1 + oncostPct / 100))
     const overheadCost = budgetStore.overheadCosts.reduce((sum, cost) => sum + (cost.amount || 0), 0)
     
     return totalPayroll + overheadCost

composables/useDeferredMetrics.ts

@@ -18,7 +18,7 @@ export const useDeferredMetrics = () => {
   ): number => {
     const totalTargetHours = members.reduce((sum, member) => sum + (member.targetHours || 0), 0)
     const grossPayroll = totalTargetHours * hourlyWage
-    return grossPayroll * (1 + oncostPct / 100)
+    return Math.round(grossPayroll * (1 + oncostPct / 100))
   }
   
   const calculateDeferredRatio = (

composables/usePayrollAllocation.ts

@@ -33,7 +33,7 @@ export function usePayrollAllocation() {
   
   // Total payroll with oncosts
   const totalPayrollWithOncosts = computed(() => {
-    return basePayrollBudget.value * (1 + payrollOncostPct.value / 100)
+    return Math.round(basePayrollBudget.value * (1 + payrollOncostPct.value / 100))
   })
   
   // Update member planned pay when allocation changes

composables/useRunway.ts

@@ -23,7 +23,7 @@ export const useRunway = () => {
     
     // Add oncosts
     const oncostPct = policiesStore.payrollOncostPct || 0
-    const totalPayroll = payrollCost * (1 + oncostPct / 100)
+    const totalPayroll = Math.round(payrollCost * (1 + oncostPct / 100))
     
     // Add overhead costs
     const overheadCost = budgetStore.overheadCosts.reduce((sum, cost) => sum + (cost.amount || 0), 0)

composables/useStorSync.ts

@@ -106,7 +106,7 @@ export const useStoreSync = () => {
         id: member.id,
         name: member.displayName,
         role: member.role,
-        hoursPerMonth: Number(((member.hoursPerWeek || 0) * 4.33).toFixed(2)),
+        hoursPerMonth: Math.round((member.hoursPerWeek || 0) * 4.33),
         minMonthlyNeeds: member.minMonthlyNeeds,
         monthlyPayPlanned: member.monthlyPayPlanned,
         targetMonthlyPay: member.targetMonthlyPay,