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/vacations/VacationClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { VacationStatus, VacationType } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { VacationModal } from "./VacationModal.js";
@@ -11,6 +11,7 @@ import { useTableSort } from "~/hooks/useTableSort.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { VACATION_STATUS_BADGE as STATUS_BADGE, VACATION_TYPE_LABELS as TYPE_LABELS, VACATION_TYPE_BADGE } from "~/lib/status-styles.js";
+import { SuccessToast } from "~/components/ui/SuccessToast.js";
 
 type VacationStatusFilter = VacationStatus | "ALL";
 type VacationTypeFilter = VacationType | "ALL";
@@ -25,6 +26,12 @@ export function VacationClient() {
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [batchRejectReason, setBatchRejectReason] = useState("");
   const [showBatchRejectInput, setShowBatchRejectInput] = useState(false);
+  const [toast, setToast] = useState<{ show: boolean; message: string; variant: "success" | "warning" }>({
+    show: false,
+    message: "",
+    variant: "success",
+  });
+  const clearToast = useCallback(() => setToast((t) => ({ ...t, show: false })), []);
 
   const { data: vacations, isLoading, error: vacationError, refetch } = trpc.vacation.list.useQuery(
     {
@@ -61,6 +68,7 @@ export function VacationClient() {
   const batchApproveMutation = trpc.vacation.batchApprove.useMutation({
     onSuccess: async () => {
       setSelected(new Set());
+      setToast({ show: true, message: "Vacations approved", variant: "success" });
       await invalidateAll();
     },
   });
@@ -69,6 +77,7 @@ export function VacationClient() {
       setSelected(new Set());
       setShowBatchRejectInput(false);
       setBatchRejectReason("");
+      setToast({ show: true, message: "Vacations rejected", variant: "warning" });
       await invalidateAll();
     },
   });
@@ -122,6 +131,7 @@ export function VacationClient() {
 
   return (
     <div className="p-6 max-w-5xl mx-auto space-y-6">
+      <SuccessToast show={toast.show} message={toast.message} variant={toast.variant} onDone={clearToast} />
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>