Fixed styling of NWS columns and summary graph

src/Budget.Client/src/index.css

@@ -472,8 +472,8 @@ td select { min-width: 80px; }
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
-.badge-need { background: var(--amber-100);  color: #92400e; }
-.badge-want { background: #ede9fe;           color: #5b21b6; }
+.badge-need { background: var(--red-100);   color: var(--red-600); }
+.badge-want { background: var(--amber-100); color: #92400e; }
 .badge-save { background: var(--green-100); color: var(--green-800); }
 
 /* ---- Auth landing ---- */

src/Budget.Client/src/pages/OutgoPage.tsx

@@ -35,6 +35,7 @@ import type { SortState } from '../components/SortableHeader';
 
 const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 const OUTGO_TYPES = ['Need', 'Want', 'Save'] as const;
+const TYPE_ORDER: Record<string, number> = { Need: 0, Want: 1, Save: 2 };
 
 const TYPE_BADGE: Record<string, string> = {
   Need: 'badge badge-need',
@@ -335,7 +336,7 @@ export function OutgoPage() {
       switch (sort.column) {
         case 'name':          cmp = a.name.localeCompare(b.name); break;
         case 'category':      cmp = (a.category ?? '').localeCompare(b.category ?? ''); break;
-        case 'type':          cmp = a.type.localeCompare(b.type); break;
+        case 'type':          cmp = (TYPE_ORDER[a.type] ?? 0) - (TYPE_ORDER[b.type] ?? 0); break;
         case 'frequency':     cmp = a.frequency.localeCompare(b.frequency); break;
         case 'amount':        cmp = a.amount - b.amount; break;
         case 'monthly':       cmp = a.monthly - b.monthly; break;

src/Budget.Client/src/pages/SummaryPage.tsx

@@ -7,8 +7,8 @@ import { useSummary } from '../api/summary';
 const fmt = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
 
 const SEGMENT_COLORS: Record<string, string> = {
-  Need:    '#f59e0b',
-  Want:    '#8b5cf6',
+  Need:    '#ef4444',
+  Want:    '#f59e0b',
   Save:    '#16a34a',
   Unspent: '#9ca3af',
 };