feat: Sprint 3 — delight, polish, and responsive sidebar

Celebration micro-interactions:
- SuccessToast: auto-dismissing pill toast (success/info/warning variants)
- ConfettiBurst: pure CSS 20-particle confetti on project creation
- Project wizard: confetti + toast on successful creation
- Vacation approval/rejection: contextual toasts
- Allocation status change: success toast
- Button: active:scale-[0.97] press feedback on all variants

Collapsible sidebar + responsive:
- Desktop: toggle collapse (72px icons-only mode) with localStorage persistence
- NavTooltip: hover labels on collapsed icons
- Mobile: hamburger menu + slide-in overlay with backdrop
- Auto-close sidebar on mobile navigation
- Scroll-to-top on route change (smooth behavior)

Hover polish + accessibility:
- Table rows: animated left-border accent + hover-lift
- Stat cards + widgets: hover elevation + border glow
- Timeline blocks: scale(1.02) + shadow-md on hover
- Smooth scroll globally with prefers-reduced-motion fallback
- Filter chips: framer-motion scale+fade enter/exit
- Dropdowns: scaleY origin-top reveal animation
- Preferences modal: scale+fade entrance
- Link underline: animated ::after width expansion on hover

Co-Authored-By: claude-flow <ruv@ruv.net>

apps/web/src/components/allocations/AllocationsClient.tsx

@@ -21,6 +21,7 @@ import { useColumnConfig } from "~/hooks/useColumnConfig.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
 
 /** Left-border color by allocation status for instant visual scanning */
 const STATUS_LEFT_BORDER: Record<string, string> = {
@@ -63,6 +64,7 @@ export function AllocationsClient() {
   const [confirmDelete, setConfirmDelete] = useState<{ single?: AllocationWithDetails; ids?: string[] } | null>(null);
   const [batchStatusPicker, setBatchStatusPicker] = useState(false);
   const [confirmBatchStatus, setConfirmBatchStatus] = useState<{ ids: string[]; status: string } | null>(null);
+  const [showStatusToast, setShowStatusToast] = useState(false);
 
   const selection = useSelection();
   const utils = trpc.useUtils();
@@ -113,6 +115,7 @@ export function AllocationsClient() {
       await utils.allocation.list.invalidate();
       await utils.allocation.listView.invalidate();
       selection.clear();
+      setShowStatusToast(true);
     },
   });
 
@@ -438,6 +441,7 @@ export function AllocationsClient() {
 
   return (
     <div className="app-page space-y-5 pb-24">
+      <SuccessToast show={showStatusToast} message="Allocation status updated" onDone={() => setShowStatusToast(false)} />
       <div className="app-page-header gap-4">
         <div>
           <h1 className="app-page-title">Allocations</h1>