diff --git a/prisma/seed.dev.ts b/prisma/seed.dev.ts
index eecb156..df6687d 100644
--- a/prisma/seed.dev.ts
+++ b/prisma/seed.dev.ts
@@ -250,7 +250,7 @@ async function main() {
     await prisma.breachRecord.upsert({
       where: { employeeId_breachId: { employeeId: employee.id, breachId: breach.id } },
       update: {},
-      create: { employeeId: employee.id, breachId: breach.id, exposedData: r.data, detectedAt: new Date(r.date) },
+      create: { employeeId: employee.id, breachId: breach.id, exposedData: r.data, artifacts: [], sources: ["HIBP"], detectedAt: new Date(r.date) },
     })
   }
 
diff --git a/src/app/api/dashboard/detail/[kind]/[id]/route.ts b/src/app/api/dashboard/detail/[kind]/[id]/route.ts
new file mode 100644
index 0000000..494806e
--- /dev/null
+++ b/src/app/api/dashboard/detail/[kind]/[id]/route.ts
@@ -0,0 +1,202 @@
+import { NextResponse } from "next/server"
+import { requireAuth } from "@/lib/apiAuth"
+import { prisma } from "@/lib/prisma"
+
+// Rich detail for the dashboard drawer. Each widget element links to one of
+// these entities; the drawer fetches the full record on click so it can show
+// far more than the compact row carries.
+
+type Field = { label: string; value: string | number }
+type Group = { heading?: string; fields: Field[] }
+type DetailResponse = {
+  title: string
+  subtitle?: string
+  variant?: string
+  tags?: string[]
+  groups: Group[]
+}
+
+const fmtDate = (d: Date | string) =>
+  new Date(d).toLocaleDateString("en-US", { day: "numeric", month: "short", year: "numeric" })
+
+const prettyList = (xs: string[]) =>
+  xs.length ? xs.map((x) => x.replace(/_/g, " ")).join(", ") : "None"
+
+export async function GET(
+  _req: Request,
+  { params }: { params: Promise<{ kind: string; id: string }> }
+) {
+  const { session, error } = await requireAuth()
+  if (error) return error
+
+  const { kind, id } = await params
+  const companyId = session.user.companyId
+
+  if (kind === "employee") {
+    const emp = await prisma.employee.findFirst({
+      where: { id, companyId },
+      include: {
+        breachRecords: { include: { breach: true }, orderBy: { detectedAt: "desc" } },
+        alerts: { include: { breach: true }, orderBy: { createdAt: "desc" } },
+      },
+    })
+    if (!emp) return NextResponse.json({ error: "Not found" }, { status: 404 })
+
+    const openAlerts = emp.alerts.filter((a) => a.status === "OPEN").length
+    const groups: Group[] = [
+      {
+        fields: [
+          { label: "Email", value: emp.email },
+          { label: "Department", value: emp.department ?? "Unknown" },
+          { label: "MFA", value: emp.mfaEnabled == null ? "Unknown" : emp.mfaEnabled ? "Enabled" : "Disabled" },
+          { label: "Breaches", value: emp.breachRecords.length },
+          { label: "Open alerts", value: openAlerts },
+        ],
+      },
+      ...emp.breachRecords.map((r) => ({
+        heading: r.breach.name,
+        fields: [
+          { label: "Breach date", value: fmtDate(r.breach.breachDate) },
+          { label: "Detected", value: fmtDate(r.detectedAt) },
+          { label: "Exposed data", value: prettyList(r.exposedData) },
+          ...(r.artifacts.length ? [{ label: "Artifacts", value: prettyList(r.artifacts) }] : []),
+          { label: "Reported by", value: r.sources.length ? r.sources.join(", ") : r.breach.source },
+          ...(r.malwareFamily ? [{ label: "Malware", value: r.malwareFamily }] : []),
+          ...(r.machineId ? [{ label: "Machine ID", value: r.machineId }] : []),
+          ...(r.capturedAt ? [{ label: "Captured", value: fmtDate(r.capturedAt) }] : []),
+        ],
+      })),
+    ]
+
+    const empRemediations = await prisma.remediationAction.findMany({
+      where: { employeeId: id, companyId },
+      orderBy: { createdAt: "desc" },
+      take: 20,
+    })
+    if (empRemediations.length) {
+      groups.push({
+        heading: "Remediation",
+        fields: empRemediations.map((a) => ({
+          label: `${a.action} (${a.status})`,
+          value: fmtDate(a.createdAt),
+        })),
+      })
+    }
+
+    return NextResponse.json({
+      title: `${emp.firstName} ${emp.lastName}`,
+      subtitle: emp.department ?? emp.email,
+      variant: openAlerts > 0 ? "critical" : emp.breachRecords.length > 0 ? "high" : "ok",
+      groups,
+    } satisfies DetailResponse)
+  }
+
+  if (kind === "breach") {
+    const breach = await prisma.breach.findFirst({
+      where: { id },
+      include: {
+        records: { include: { employee: true }, orderBy: { detectedAt: "desc" } },
+      },
+    })
+    // Scope: only expose breaches that hit this company's employees.
+    const own = breach?.records.filter((r) => r.employee.companyId === companyId) ?? []
+    if (!breach || own.length === 0) return NextResponse.json({ error: "Not found" }, { status: 404 })
+
+    const groups: Group[] = [
+      {
+        fields: [
+          { label: "Source", value: breach.source },
+          { label: "Breach date", value: fmtDate(breach.breachDate) },
+          { label: "Affected employees", value: own.length },
+          { label: "Data types", value: prettyList(breach.dataTypes) },
+          ...(breach.description ? [{ label: "Description", value: breach.description }] : []),
+        ],
+      },
+      ...own.slice(0, 50).map((r) => ({
+        heading: `${r.employee.firstName} ${r.employee.lastName}`,
+        fields: [
+          { label: "Department", value: r.employee.department ?? "Unknown" },
+          { label: "Exposed data", value: prettyList(r.exposedData) },
+          ...(r.artifacts.length ? [{ label: "Artifacts", value: prettyList(r.artifacts) }] : []),
+          { label: "Detected", value: fmtDate(r.detectedAt) },
+        ],
+      })),
+    ]
+
+    return NextResponse.json({
+      title: breach.name,
+      subtitle: String(breach.source),
+      variant: "medium",
+      tags: breach.dataTypes.map((t) => t.replace(/_/g, " ")),
+      groups,
+    } satisfies DetailResponse)
+  }
+
+  if (kind === "alert") {
+    const alert = await prisma.alert.findFirst({
+      where: { id, companyId },
+      include: {
+        employee: { include: { breachRecords: { include: { breach: true } } } },
+        breach: true,
+      },
+    })
+    if (!alert) return NextResponse.json({ error: "Not found" }, { status: 404 })
+
+    const groups: Group[] = [
+      {
+        fields: [
+          { label: "Severity", value: alert.severity },
+          { label: "Confidence", value: alert.confidence },
+          { label: "Status", value: alert.status },
+          { label: "Created", value: fmtDate(alert.createdAt) },
+          { label: "Message", value: alert.message },
+        ],
+      },
+    ]
+    if (alert.employee) {
+      groups.push({
+        heading: `${alert.employee.firstName} ${alert.employee.lastName}`,
+        fields: [
+          { label: "Email", value: alert.employee.email },
+          { label: "Department", value: alert.employee.department ?? "Unknown" },
+          { label: "Total breaches", value: alert.employee.breachRecords.length },
+          { label: "MFA", value: alert.employee.mfaEnabled == null ? "Unknown" : alert.employee.mfaEnabled ? "Enabled" : "Disabled" },
+        ],
+      })
+    }
+    if (alert.breach) {
+      groups.push({
+        heading: alert.breach.name,
+        fields: [
+          { label: "Source", value: alert.breach.source },
+          { label: "Breach date", value: fmtDate(alert.breach.breachDate) },
+          { label: "Data types", value: prettyList(alert.breach.dataTypes) },
+        ],
+      })
+    }
+
+    const alertRemediations = await prisma.remediationAction.findMany({
+      where: { alertId: id, companyId },
+      orderBy: { createdAt: "desc" },
+      take: 20,
+    })
+    if (alertRemediations.length) {
+      groups.push({
+        heading: "Remediation",
+        fields: alertRemediations.map((a) => ({
+          label: `${a.action} (${a.status})`,
+          value: fmtDate(a.createdAt),
+        })),
+      })
+    }
+
+    return NextResponse.json({
+      title: alert.employee ? `${alert.employee.firstName} ${alert.employee.lastName}` : "Alert",
+      subtitle: alert.breach?.name ?? String(alert.severity),
+      variant: String(alert.severity).toLowerCase(),
+      groups,
+    } satisfies DetailResponse)
+  }
+
+  return NextResponse.json({ error: "Unknown detail kind" }, { status: 400 })
+}
diff --git a/src/components/dashboard/AlertStatusBreakdown.tsx b/src/components/dashboard/AlertStatusBreakdown.tsx
index 877e119..bb6dac0 100644
--- a/src/components/dashboard/AlertStatusBreakdown.tsx
+++ b/src/components/dashboard/AlertStatusBreakdown.tsx
@@ -34,10 +34,9 @@ export function AlertStatusBreakdown({ data }: { data: StatusCounts }) {
   const total = data.open + data.acknowledged + data.resolved
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">{total} total alerts</p>
       </div>
 
       {total === 0 ? (
diff --git a/src/components/dashboard/AlertVelocity.tsx b/src/components/dashboard/AlertVelocity.tsx
index 14fbd45..9082df6 100644
--- a/src/components/dashboard/AlertVelocity.tsx
+++ b/src/components/dashboard/AlertVelocity.tsx
@@ -29,11 +29,10 @@ export function AlertVelocity({ data }: { data: VelocityData[] }) {
   const isEmpty = total === 0
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-3 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">Daily alerts — last 30 days</p>
         </div>
         <div className="flex items-center gap-1 rounded-md px-2 py-1" style={{ background: `${trendColor}1a` }}>
           <TrendIcon className="size-3.5" style={{ color: trendColor }} />
diff --git a/src/components/dashboard/AlertsByDepartment.tsx b/src/components/dashboard/AlertsByDepartment.tsx
index 3cdeeaf..426bc35 100644
--- a/src/components/dashboard/AlertsByDepartment.tsx
+++ b/src/components/dashboard/AlertsByDepartment.tsx
@@ -27,10 +27,9 @@ export function AlertsByDepartment({ data }: { data: DeptData[] }) {
   const isEmpty = data.length === 0 || data.every((d) => d.total === 0)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">Alert volume per department</p>
       </div>
 
       {isEmpty ? (
diff --git a/src/components/dashboard/AlertsByMonth.tsx b/src/components/dashboard/AlertsByMonth.tsx
index effa9ee..1d6e4f2 100644
--- a/src/components/dashboard/AlertsByMonth.tsx
+++ b/src/components/dashboard/AlertsByMonth.tsx
@@ -37,11 +37,10 @@ export function AlertsByMonth({ data }: { data: MonthData[] }) {
   const isEmpty = sliced.every((d) => d.critical + d.high + d.medium + d.low === 0)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">Alert volume — {period.label}</p>
         </div>
         {editing && (
           <button
diff --git a/src/components/dashboard/AlertsFeed.tsx b/src/components/dashboard/AlertsFeed.tsx
index fa4e010..8f07c96 100644
--- a/src/components/dashboard/AlertsFeed.tsx
+++ b/src/components/dashboard/AlertsFeed.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react"
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer, type DetailVariant } from "@/contexts/DetailDrawerContext"
 import { cn } from "@/lib/utils"
 
 type Alert = {
@@ -40,16 +41,16 @@ const STATUS_LABELS: Record<string, string> = {
 
 export function AlertsFeed({ data }: { data: Alert[] }) {
   const { title } = useWidgetTitle("alerts-feed", "Recent Alerts")
+  const { openRef } = useDetailDrawer()
   const [filter, setFilter] = useState<"ALL" | "OPEN" | "RESOLVED">("ALL")
 
   const filtered = data.filter((a) => filter === "ALL" || a.status === filter)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-3 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">{data.length} recent alerts</p>
         </div>
       </div>
 
@@ -75,10 +76,20 @@ export function AlertsFeed({ data }: { data: Alert[] }) {
       ) : (
         <div className="flex-1 min-h-0 overflow-y-auto space-y-1.5">
           {filtered.map((alert) => (
-            <div
+            <button
               key={alert.id}
+              type="button"
+              onClick={() =>
+                openRef({
+                  kind: "alert",
+                  id: alert.id,
+                  title: alert.employeeName ?? "Unknown employee",
+                  subtitle: alert.breachName ?? undefined,
+                  variant: alert.severity.toLowerCase() as DetailVariant,
+                })
+              }
               className={cn(
-                "flex items-center gap-3 rounded-lg border border-border border-l-2 bg-background px-3 py-2.5",
+                "flex w-full items-center gap-3 rounded-lg border border-border border-l-2 bg-background px-3 py-2.5 text-left transition-colors hover:border-primary/40 hover:bg-muted",
                 SEVERITY_BORDER[alert.severity]
               )}
             >
@@ -100,7 +111,7 @@ export function AlertsFeed({ data }: { data: Alert[] }) {
                   {new Date(alert.createdAt).toLocaleDateString("en-US", { day: "numeric", month: "short" })}
                 </span>
               </div>
-            </div>
+            </button>
           ))}
         </div>
       )}
diff --git a/src/components/dashboard/BreachSourceDonut.tsx b/src/components/dashboard/BreachSourceDonut.tsx
index ff21027..c111801 100644
--- a/src/components/dashboard/BreachSourceDonut.tsx
+++ b/src/components/dashboard/BreachSourceDonut.tsx
@@ -35,10 +35,9 @@ export function BreachSourceDonut({ data }: { data: BreachSource[] }) {
   const total = data.length
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">{total} breach{total !== 1 ? "es" : ""} by origin</p>
       </div>
 
       {total === 0 ? (
diff --git a/src/components/dashboard/BreachSourcesList.tsx b/src/components/dashboard/BreachSourcesList.tsx
index 31e983f..47e563a 100644
--- a/src/components/dashboard/BreachSourcesList.tsx
+++ b/src/components/dashboard/BreachSourcesList.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer } from "@/contexts/DetailDrawerContext"
 import { cn } from "@/lib/utils"
 import { ShieldAlert, Globe, Eye } from "lucide-react"
 
@@ -27,13 +28,13 @@ const SOURCE_COLORS: Record<string, string> = {
 
 export function BreachSourcesList({ data }: { data: BreachSource[] }) {
   const { title } = useWidgetTitle("breach-sources", "Breach Sources")
+  const { openRef } = useDetailDrawer()
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">Sites that exposed your company data</p>
         </div>
         <ShieldAlert className="size-4 text-muted-foreground shrink-0" />
       </div>
@@ -45,9 +46,19 @@ export function BreachSourcesList({ data }: { data: BreachSource[] }) {
       ) : (
         <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
           {data.map((breach) => (
-            <div
+            <button
               key={breach.id}
-              className="flex items-start justify-between gap-3 rounded-lg border border-border bg-background p-3"
+              type="button"
+              onClick={() =>
+                openRef({
+                  kind: "breach",
+                  id: breach.id,
+                  title: breach.name,
+                  subtitle: SOURCE_LABELS[breach.source] ?? breach.source,
+                  variant: "medium",
+                })
+              }
+              className="flex w-full items-start justify-between gap-3 rounded-lg border border-border bg-background p-3 text-left transition-colors hover:border-primary/40 hover:bg-muted"
             >
               <div className="flex items-start gap-2.5 min-w-0">
                 <div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md bg-muted">
@@ -82,7 +93,7 @@ export function BreachSourcesList({ data }: { data: BreachSource[] }) {
                   <span className="text-muted-foreground">emp.</span>
                 </div>
               </div>
-            </div>
+            </button>
           ))}
         </div>
       )}
diff --git a/src/components/dashboard/BreachTimeline.tsx b/src/components/dashboard/BreachTimeline.tsx
index f1e2930..1a946ec 100644
--- a/src/components/dashboard/BreachTimeline.tsx
+++ b/src/components/dashboard/BreachTimeline.tsx
@@ -25,10 +25,9 @@ export function BreachTimeline({ data }: { data: BreachSource[] }) {
   const filtered = config.filter === "ALL" ? sorted : sorted.filter((b) => b.source === config.filter)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-3 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">{filtered.length} breaches</p>
       </div>
 
       {/* Source filter */}
diff --git a/src/components/dashboard/CriticalAlertsList.tsx b/src/components/dashboard/CriticalAlertsList.tsx
index e0ee45a..6e61599 100644
--- a/src/components/dashboard/CriticalAlertsList.tsx
+++ b/src/components/dashboard/CriticalAlertsList.tsx
@@ -2,6 +2,7 @@
 
 import { useWidgetConfig } from "@/hooks/useWidgetConfig"
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer, type DetailVariant } from "@/contexts/DetailDrawerContext"
 import { cn } from "@/lib/utils"
 
 type UrgentAlert = {
@@ -22,15 +23,15 @@ const SEV_BADGE_CLASSES: Record<string, string> = {
 
 export function CriticalAlertsList({ data }: { data: UrgentAlert[] }) {
   const { title } = useWidgetTitle("critical-alerts", "Urgent Alerts")
+  const { openRef } = useDetailDrawer()
   const [config, setConfig] = useWidgetConfig<{ filter: Filter }>("critical-alerts", { filter: "ALL" })
 
   const filtered = config.filter === "ALL" ? data : data.filter((a) => a.severity === config.filter)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-3 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">{filtered.length} open — action required</p>
       </div>
 
       <div className="mb-3 shrink-0 flex gap-1.5">
@@ -57,9 +58,19 @@ export function CriticalAlertsList({ data }: { data: UrgentAlert[] }) {
       ) : (
         <div className="flex-1 min-h-0 overflow-y-auto space-y-1.5">
           {filtered.map((alert) => (
-            <div
+            <button
               key={alert.id}
-              className="flex items-start gap-2.5 rounded-lg border border-border bg-background px-3 py-2.5"
+              type="button"
+              onClick={() =>
+                openRef({
+                  kind: "alert",
+                  id: alert.id,
+                  title: alert.employeeName ?? "Unknown employee",
+                  subtitle: alert.breachName ?? undefined,
+                  variant: alert.severity.toLowerCase() as DetailVariant,
+                })
+              }
+              className="flex w-full items-start gap-2.5 rounded-lg border border-border bg-background px-3 py-2.5 text-left transition-colors hover:border-primary/40 hover:bg-muted"
             >
               <span className={cn("mt-0.5 shrink-0 rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide", SEV_BADGE_CLASSES[alert.severity] ?? "bg-muted text-muted-foreground")}>
                 {alert.severity}
@@ -78,7 +89,7 @@ export function CriticalAlertsList({ data }: { data: UrgentAlert[] }) {
               <span className="shrink-0 text-[10px] text-muted-foreground whitespace-nowrap">
                 {new Date(alert.createdAt).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
               </span>
-            </div>
+            </button>
           ))}
         </div>
       )}
diff --git a/src/components/dashboard/DashboardCanvas.tsx b/src/components/dashboard/DashboardCanvas.tsx
index f9c484c..b05ee6a 100644
--- a/src/components/dashboard/DashboardCanvas.tsx
+++ b/src/components/dashboard/DashboardCanvas.tsx
@@ -12,6 +12,7 @@ import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { DashboardEditContext } from "@/contexts/DashboardEditContext"
 import { DashboardConfigContext } from "@/contexts/DashboardConfigContext"
+import { DetailDrawerProvider } from "@/contexts/DetailDrawerContext"
 import { type GridItemLayout, type WidgetMeta, type DashboardPreset, SOURCE_FILTERABLE_WIDGETS } from "@/types/dashboard"
 
 export type SourceOption = { id: string; label: string }
@@ -358,6 +359,7 @@ export function DashboardCanvas({
     : false
 
   return (
+    <DetailDrawerProvider>
     <DashboardEditContext.Provider value={editing}>
       <DashboardConfigContext.Provider value={{ getTitle, setTitle, editing, requestRows }}>
         <div className="flex flex-1 flex-col min-h-0">
@@ -575,5 +577,6 @@ export function DashboardCanvas({
         </div>
       </DashboardConfigContext.Provider>
     </DashboardEditContext.Provider>
+    </DetailDrawerProvider>
   )
 }
diff --git a/src/components/dashboard/DataTypeBreakdown.tsx b/src/components/dashboard/DataTypeBreakdown.tsx
index 10b4344..6b64649 100644
--- a/src/components/dashboard/DataTypeBreakdown.tsx
+++ b/src/components/dashboard/DataTypeBreakdown.tsx
@@ -6,6 +6,7 @@ import { useWidgetConfig } from "@/hooks/useWidgetConfig"
 import { PRESET_DATA_TYPES } from "@/lib/dataTypes"
 import { useDashboardEditing } from "@/contexts/DashboardEditContext"
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer } from "@/contexts/DetailDrawerContext"
 import { cn } from "@/lib/utils"
 
 type DataItem = { type: string; count: number; percentage: number }
@@ -22,6 +23,7 @@ export function DataTypeBreakdown({ data }: DataTypeBreakdownProps) {
   const [showSettings, setShowSettings] = useState(false)
   const [newType, setNewType] = useState("")
   const { title } = useWidgetTitle("data-type-breakdown", "Exposed Data Types")
+  const { open } = useDetailDrawer()
 
   const toggle = (key: string) => {
     const already = config.trackedTypes.includes(key)
@@ -57,11 +59,10 @@ export function DataTypeBreakdown({ data }: DataTypeBreakdownProps) {
   const customTypes = config.trackedTypes.filter((t) => !presetKeys.has(t as never))
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">Distribution of compromised data categories</p>
         </div>
         {editing && <button
           onClick={() => setShowSettings((s) => !s)}
@@ -143,7 +144,22 @@ export function DataTypeBreakdown({ data }: DataTypeBreakdownProps) {
       ) : (
         <div className="flex-1 min-h-0 overflow-y-auto space-y-3">
           {merged.map(({ type, count, percentage }) => (
-            <div key={type}>
+            <button
+              key={type}
+              type="button"
+              onClick={() =>
+                open({
+                  title: type.replace(/_/g, " "),
+                  subtitle: count > 0 ? `${percentage}% of exposures` : "Not detected",
+                  fields: [
+                    { label: "Exposures", value: count },
+                    { label: "Share", value: `${percentage}%` },
+                    { label: "Total exposures", value: totalCount },
+                  ],
+                })
+              }
+              className="block w-full text-left"
+            >
               <div className="mb-1.5 flex items-center justify-between">
                 <span className={cn("text-sm capitalize", count === 0 ? "text-muted-foreground" : "text-foreground")}>
                   {type.replace(/_/g, " ")}
@@ -158,7 +174,7 @@ export function DataTypeBreakdown({ data }: DataTypeBreakdownProps) {
                   style={{ width: count === 0 ? "100%" : `${percentage}%` }}
                 />
               </div>
-            </div>
+            </button>
           ))}
         </div>
       )}
diff --git a/src/components/dashboard/DataTypeRadar.tsx b/src/components/dashboard/DataTypeRadar.tsx
index 387bd3c..484f779 100644
--- a/src/components/dashboard/DataTypeRadar.tsx
+++ b/src/components/dashboard/DataTypeRadar.tsx
@@ -23,10 +23,9 @@ export function DataTypeRadar({ data }: { data: DataType[] }) {
   const isEmpty = data.length === 0
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">Compromised data category spread</p>
       </div>
 
       {isEmpty ? (
diff --git a/src/components/dashboard/DepartmentRisk.tsx b/src/components/dashboard/DepartmentRisk.tsx
index 35bca84..7001855 100644
--- a/src/components/dashboard/DepartmentRisk.tsx
+++ b/src/components/dashboard/DepartmentRisk.tsx
@@ -2,18 +2,19 @@
 
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from "recharts"
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer, type DetailVariant } from "@/contexts/DetailDrawerContext"
 
 type DeptData = { department: string; total: number; compromised: number; percentage: number }
 
 export function DepartmentRisk({ data }: { data: DeptData[] }) {
   const { title } = useWidgetTitle("department-risk", "Department Exposure")
+  const { open } = useDetailDrawer()
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">Compromised employees by department</p>
         </div>
       </div>
 
@@ -62,6 +63,23 @@ export function DepartmentRisk({ data }: { data: DeptData[] }) {
                 {data.map((entry) => (
                   <Cell
                     key={entry.department}
+                    style={{ cursor: "pointer" }}
+                    onClick={() =>
+                      open({
+                        title: entry.department,
+                        subtitle: `${entry.percentage}% exposed`,
+                        variant: (entry.percentage >= 50
+                          ? "critical"
+                          : entry.percentage >= 25
+                          ? "high"
+                          : "medium") as DetailVariant,
+                        fields: [
+                          { label: "Compromised", value: entry.compromised },
+                          { label: "Total employees", value: entry.total },
+                          { label: "Exposure", value: `${entry.percentage}%` },
+                        ],
+                      })
+                    }
                     fill={
                       entry.percentage >= 50
                         ? "oklch(var(--severity-critical))"
diff --git a/src/components/dashboard/EmployeeExposure.tsx b/src/components/dashboard/EmployeeExposure.tsx
index a42b56d..3e9acdf 100644
--- a/src/components/dashboard/EmployeeExposure.tsx
+++ b/src/components/dashboard/EmployeeExposure.tsx
@@ -36,10 +36,9 @@ export function EmployeeExposure({ data, totalEmployees }: { data: ExposureLevel
   ]
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">{totalEmployees} employees total</p>
       </div>
 
       <div className="flex flex-1 min-h-0 items-center">
diff --git a/src/components/dashboard/MfaCoverage.tsx b/src/components/dashboard/MfaCoverage.tsx
index b793f2a..6cb8756 100644
--- a/src/components/dashboard/MfaCoverage.tsx
+++ b/src/components/dashboard/MfaCoverage.tsx
@@ -13,9 +13,6 @@ export type MfaCoverageData = {
 
 export function MfaCoverage({ data }: { data: MfaCoverageData }) {
   const { title } = useWidgetTitle("mfa-coverage", "MFA Coverage")
-  const known = data.enabled + data.disabled
-  const coverage = known > 0 ? Math.round((data.enabled / known) * 100) : 0
-
   const tiers = [
     { label: "MFA on", count: data.enabled, icon: ShieldCheck, color: "oklch(var(--severity-low))" },
     { label: "MFA off", count: data.disabled, icon: ShieldX, color: "oklch(var(--severity-critical))" },
@@ -23,10 +20,9 @@ export function MfaCoverage({ data }: { data: MfaCoverageData }) {
   ]
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">{coverage}% of known accounts enrolled</p>
       </div>
 
       <div className="grid grid-cols-3 gap-3">
diff --git a/src/components/dashboard/RiskGauge.tsx b/src/components/dashboard/RiskGauge.tsx
index 39043eb..848ee1a 100644
--- a/src/components/dashboard/RiskGauge.tsx
+++ b/src/components/dashboard/RiskGauge.tsx
@@ -56,10 +56,9 @@ export function RiskGauge({ riskScore }: { riskScore: number }) {
   })
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-1 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">Company security score</p>
       </div>
       <div className="flex flex-1 min-h-0 items-center justify-center">
         <svg viewBox="0 0 200 112" className="w-full max-w-[280px]">
diff --git a/src/components/dashboard/SeverityDonut.tsx b/src/components/dashboard/SeverityDonut.tsx
index 1cc7457..d498e59 100644
--- a/src/components/dashboard/SeverityDonut.tsx
+++ b/src/components/dashboard/SeverityDonut.tsx
@@ -2,6 +2,7 @@
 
 import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from "recharts"
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer, type DetailVariant } from "@/contexts/DetailDrawerContext"
 
 type AlertSeverity = { critical: number; high: number; medium: number; low: number }
 
@@ -14,6 +15,7 @@ const SEVERITY = [
 
 export function SeverityDonut({ data }: { data: AlertSeverity }) {
   const { title } = useWidgetTitle("severity-donut", "Alert Severity")
+  const { open } = useDetailDrawer()
 
   const chartData = SEVERITY
     .map((s) => ({ name: s.label, value: data[s.key], color: s.color }))
@@ -22,11 +24,10 @@ export function SeverityDonut({ data }: { data: AlertSeverity }) {
   const total = Object.values(data).reduce((a, b) => a + b, 0)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">{total} open alerts</p>
         </div>
       </div>
 
@@ -48,7 +49,26 @@ export function SeverityDonut({ data }: { data: AlertSeverity }) {
                 dataKey="value"
               >
                 {chartData.map((entry) => (
-                  <Cell key={entry.name} fill={entry.color} stroke="none" />
+                  <Cell
+                    key={entry.name}
+                    fill={entry.color}
+                    stroke="none"
+                    style={{ cursor: "pointer" }}
+                    onClick={() =>
+                      open({
+                        title: `${entry.name} alerts`,
+                        variant: entry.name.toLowerCase() as DetailVariant,
+                        fields: [
+                          { label: "Count", value: entry.value },
+                          {
+                            label: "Share",
+                            value: total > 0 ? `${Math.round((entry.value / total) * 100)}%` : "0%",
+                          },
+                          { label: "Total alerts", value: total },
+                        ],
+                      })
+                    }
+                  />
                 ))}
               </Pie>
               <Tooltip
diff --git a/src/components/dashboard/StatCard.tsx b/src/components/dashboard/StatCard.tsx
index 59587bd..ac085a5 100644
--- a/src/components/dashboard/StatCard.tsx
+++ b/src/components/dashboard/StatCard.tsx
@@ -12,37 +12,17 @@ interface StatCardProps {
   label: string
   value: string | number
   description?: string
-  icon: LucideIcon
+  icon?: LucideIcon
   variant?: "default" | "critical" | "high" | "medium" | "ok"
   delta?: StatDelta
 }
 
 const variants = {
-  default: {
-    value: "text-foreground",
-    icon: "text-muted-foreground",
-    iconBg: "bg-muted",
-  },
-  critical: {
-    value: "text-severity-critical",
-    icon: "text-severity-critical",
-    iconBg: "bg-severity-critical/10",
-  },
-  high: {
-    value: "text-severity-high",
-    icon: "text-severity-high",
-    iconBg: "bg-severity-high/10",
-  },
-  medium: {
-    value: "text-severity-medium",
-    icon: "text-severity-medium",
-    iconBg: "bg-severity-medium/10",
-  },
-  ok: {
-    value: "text-severity-ok",
-    icon: "text-severity-ok",
-    iconBg: "bg-severity-ok/10",
-  },
+  default: { value: "text-foreground", icon: "text-muted-foreground", iconBg: "bg-muted" },
+  critical: { value: "text-severity-critical", icon: "text-severity-critical", iconBg: "bg-severity-critical/10" },
+  high: { value: "text-severity-high", icon: "text-severity-high", iconBg: "bg-severity-high/10" },
+  medium: { value: "text-severity-medium", icon: "text-severity-medium", iconBg: "bg-severity-medium/10" },
+  ok: { value: "text-severity-ok", icon: "text-severity-ok", iconBg: "bg-severity-ok/10" },
 }
 
 export function StatCard({
@@ -55,8 +35,24 @@ export function StatCard({
 }: StatCardProps) {
   const v = variants[variant]
 
+  // Compact layout (dashboard): no icon/description -> label left, value right.
+  if (!Icon && !description) {
+    return (
+      <div className="rounded-xl border border-border/60 bg-card p-5 shadow-sm">
+        <div className="flex items-center justify-between gap-4">
+          <p className="text-sm font-medium text-muted-foreground">{label}</p>
+          <div className="flex flex-col items-end">
+            <p className={cn("text-2xl font-bold tabular-nums", v.value)}>{value}</p>
+            {delta && <DeltaPill delta={delta} />}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Detailed layout (reports): label/value left, boxed icon right.
   return (
-    <div className="rounded-xl border border-border bg-card p-5">
+    <div className="rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="flex items-start justify-between gap-4">
         <div className="min-w-0 space-y-1">
           <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
@@ -68,9 +64,11 @@ export function StatCard({
           )}
           {delta && <DeltaPill delta={delta} />}
         </div>
-        <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg", v.iconBg)}>
-          <Icon className={cn("size-5", v.icon)} />
-        </div>
+        {Icon && (
+          <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg", v.iconBg)}>
+            <Icon className={cn("size-5", v.icon)} />
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/dashboard/StatsRow.tsx b/src/components/dashboard/StatsRow.tsx
index 1354f1f..026fe75 100644
--- a/src/components/dashboard/StatsRow.tsx
+++ b/src/components/dashboard/StatsRow.tsx
@@ -4,7 +4,6 @@ import { useState, useEffect } from "react"
 import { Settings2, Check } from "lucide-react"
 import { StatCard } from "@/components/dashboard/StatCard"
 import { getRiskLevel } from "@/lib/risk"
-import { Users, Bell, Database, ShieldAlert } from "lucide-react"
 import { useWidgetConfig } from "@/hooks/useWidgetConfig"
 import { useDashboardEditing } from "@/contexts/DashboardEditContext"
 import { useDashboardConfig } from "@/contexts/DashboardConfigContext"
@@ -35,7 +34,6 @@ interface StatsRowProps {
 
 export function StatsRow({
   compromisedEmployees,
-  totalEmployees,
   openAlerts,
   recentBreaches,
   riskScore,
@@ -71,32 +69,24 @@ export function StatsRow({
       key: "employees" as CardKey,
       label: "Employees at risk",
       value: compromisedEmployees,
-      description: `out of ${totalEmployees} monitored`,
-      icon: Users,
       variant: (compromisedEmployees > 0 ? "critical" : "ok") as "critical" | "ok",
     },
     {
       key: "alerts" as CardKey,
       label: "Active alerts",
       value: openAlerts,
-      description: "requiring attention",
-      icon: Bell,
       variant: (openAlerts > 0 ? "high" : "ok") as "high" | "ok",
     },
     {
       key: "detections" as CardKey,
       label: "New detections",
       value: recentBreaches,
-      description: "in the last 30 days",
-      icon: Database,
       variant: (recentBreaches > 0 ? "medium" : "ok") as "medium" | "ok",
     },
     {
       key: "risk" as CardKey,
       label: "Risk score",
       value: `${riskScore} / 100`,
-      description: risk.label,
-      icon: ShieldAlert,
       variant: risk.variant,
     },
   ]
diff --git a/src/components/dashboard/TopBreaches.tsx b/src/components/dashboard/TopBreaches.tsx
index 6411a3c..9dcf376 100644
--- a/src/components/dashboard/TopBreaches.tsx
+++ b/src/components/dashboard/TopBreaches.tsx
@@ -4,6 +4,7 @@ import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell,
 } from "recharts"
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer } from "@/contexts/DetailDrawerContext"
 
 type BreachSource = {
   id: string; name: string; source: string
@@ -18,6 +19,7 @@ const SOURCE_COLOR: Record<string, string> = {
 
 export function TopBreaches({ data }: { data: BreachSource[] }) {
   const { title } = useWidgetTitle("top-breaches", "Top Breaches by Impact")
+  const { openRef } = useDetailDrawer()
 
   const sorted = [...data]
     .sort((a, b) => b.affectedEmployees - a.affectedEmployees)
@@ -27,10 +29,9 @@ export function TopBreaches({ data }: { data: BreachSource[] }) {
   const isEmpty = sorted.length === 0
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0">
         <h2 className="text-sm font-medium text-foreground">{title}</h2>
-        <p className="text-xs text-muted-foreground">Ranked by affected employees</p>
       </div>
 
       {isEmpty ? (
@@ -77,7 +78,20 @@ export function TopBreaches({ data }: { data: BreachSource[] }) {
               />
               <Bar dataKey="affectedEmployees" name="Affected" radius={[0, 4, 4, 0]}>
                 {sorted.map((entry) => (
-                  <Cell key={entry.id} fill={SOURCE_COLOR[entry.source] ?? "oklch(var(--primary))"} />
+                  <Cell
+                    key={entry.id}
+                    style={{ cursor: "pointer" }}
+                    onClick={() =>
+                      openRef({
+                        kind: "breach",
+                        id: entry.id,
+                        title: entry.name,
+                        subtitle: entry.source,
+                        variant: "medium",
+                      })
+                    }
+                    fill={SOURCE_COLOR[entry.source] ?? "oklch(var(--primary))"}
+                  />
                 ))}
               </Bar>
             </BarChart>
diff --git a/src/components/dashboard/TopRiskyEmployees.tsx b/src/components/dashboard/TopRiskyEmployees.tsx
index 6f08852..75fbbab 100644
--- a/src/components/dashboard/TopRiskyEmployees.tsx
+++ b/src/components/dashboard/TopRiskyEmployees.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { useWidgetTitle } from "@/hooks/useWidgetTitle"
+import { useDetailDrawer } from "@/contexts/DetailDrawerContext"
 import { cn } from "@/lib/utils"
 import { ShieldAlert, AlertTriangle } from "lucide-react"
 
@@ -33,13 +34,13 @@ const SCORE_BAR: Record<string, string> = {
 
 export function TopRiskyEmployees({ data }: { data: Employee[] }) {
   const { title } = useWidgetTitle("top-risky-employees", "Top Employees at Risk")
+  const { openRef } = useDetailDrawer()
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">Employees to contact first</p>
         </div>
         <AlertTriangle className="size-4 text-muted-foreground shrink-0" />
       </div>
@@ -51,7 +52,19 @@ export function TopRiskyEmployees({ data }: { data: Employee[] }) {
       ) : (
         <div className="flex-1 min-h-0 overflow-y-auto space-y-2">
           {data.map((emp, i) => (
-            <div key={emp.id} className="flex items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5">
+            <button
+              key={emp.id}
+              type="button"
+              onClick={() =>
+                openRef({
+                  kind: "employee",
+                  id: emp.id,
+                  title: emp.name,
+                  subtitle: emp.department ?? undefined,
+                  variant: emp.riskVariant,
+                })
+              }
+              className="flex w-full items-center gap-3 rounded-lg border border-border bg-background px-3 py-2.5 text-left transition-colors hover:border-primary/40 hover:bg-muted">
               <span className="shrink-0 w-5 text-xs font-medium text-muted-foreground tabular-nums">
                 {i + 1}
               </span>
@@ -83,7 +96,7 @@ export function TopRiskyEmployees({ data }: { data: Employee[] }) {
                   />
                 </div>
               </div>
-            </div>
+            </button>
           ))}
         </div>
       )}
diff --git a/src/components/dashboard/TrendChart.tsx b/src/components/dashboard/TrendChart.tsx
index f529858..f32a9e8 100644
--- a/src/components/dashboard/TrendChart.tsx
+++ b/src/components/dashboard/TrendChart.tsx
@@ -36,13 +36,10 @@ export function TrendChart({ data }: TrendChartProps) {
   const isEmpty = sliced.every((d) => d.count === 0)
 
   return (
-    <div className="flex h-full flex-col rounded-xl border border-border bg-card p-5">
+    <div className="flex h-full flex-col rounded-xl border border-border/60 bg-card p-5 shadow-sm">
       <div className="mb-4 shrink-0 flex items-start justify-between">
         <div>
           <h2 className="text-sm font-medium text-foreground">{title}</h2>
-          <p className="text-xs text-muted-foreground">
-            New detections — {selectedPeriod.label}
-          </p>
         </div>
         {editing && (
           <button
diff --git a/src/contexts/DetailDrawerContext.tsx b/src/contexts/DetailDrawerContext.tsx
new file mode 100644
index 0000000..3c4721c
--- /dev/null
+++ b/src/contexts/DetailDrawerContext.tsx
@@ -0,0 +1,204 @@
+"use client"
+
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react"
+import { createPortal } from "react-dom"
+import { X, Loader2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export type DetailVariant = "critical" | "high" | "medium" | "low" | "ok" | "default"
+
+export type DetailField = { label: string; value: ReactNode }
+
+export type DetailGroup = { heading?: string; fields: DetailField[] }
+
+export type DetailPayload = {
+  title: string
+  subtitle?: string
+  variant?: DetailVariant
+  tags?: string[]
+  // Either flat fields (static callers) or grouped sections (rich fetches).
+  fields?: DetailField[]
+  groups?: DetailGroup[]
+}
+
+// Reference to an entity the drawer can fetch rich detail for on click.
+export type DetailRef = {
+  kind: "employee" | "breach" | "alert"
+  id: string
+  title: string
+  subtitle?: string
+  variant?: DetailVariant
+}
+
+type DetailDrawerCtx = {
+  open: (payload: DetailPayload) => void
+  openRef: (ref: DetailRef) => void
+  close: () => void
+}
+
+const Ctx = createContext<DetailDrawerCtx | null>(null)
+
+export function useDetailDrawer(): DetailDrawerCtx {
+  const ctx = useContext(Ctx)
+  if (!ctx) throw new Error("useDetailDrawer must be used within DetailDrawerProvider")
+  return ctx
+}
+
+const dotColor: Record<DetailVariant, string> = {
+  critical: "bg-severity-critical",
+  high: "bg-severity-high",
+  medium: "bg-severity-medium",
+  low: "bg-severity-low",
+  ok: "bg-severity-ok",
+  default: "bg-muted-foreground",
+}
+
+export function DetailDrawerProvider({ children }: { children: ReactNode }) {
+  const [payload, setPayload] = useState<DetailPayload | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => setMounted(true), [])
+
+  const open = useCallback((p: DetailPayload) => {
+    setLoading(false)
+    setPayload(p)
+  }, [])
+
+  const close = useCallback(() => {
+    setPayload(null)
+    setLoading(false)
+  }, [])
+
+  const openRef = useCallback((ref: DetailRef) => {
+    // Show what we already know immediately, then enrich from the API.
+    setPayload({ title: ref.title, subtitle: ref.subtitle, variant: ref.variant, groups: [] })
+    setLoading(true)
+    fetch(`/api/dashboard/detail/${ref.kind}/${ref.id}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
+      .then((data: DetailPayload) => setPayload(data))
+      .catch(() =>
+        setPayload({
+          title: ref.title,
+          subtitle: ref.subtitle,
+          variant: ref.variant,
+          fields: [{ label: "Error", value: "Could not load details" }],
+        })
+      )
+      .finally(() => setLoading(false))
+  }, [])
+
+  useEffect(() => {
+    if (!payload) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close()
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [payload, close])
+
+  return (
+    <Ctx.Provider value={{ open, openRef, close }}>
+      {children}
+      {mounted &&
+        createPortal(
+          <div
+            aria-hidden={!payload}
+            className={cn(
+              "fixed inset-0 z-[60]",
+              payload ? "pointer-events-auto" : "pointer-events-none"
+            )}
+          >
+            <div
+              onClick={close}
+              className={cn(
+                "absolute inset-0 bg-black/40 transition-opacity duration-200",
+                payload ? "opacity-100" : "opacity-0"
+              )}
+            />
+            <aside
+              role="dialog"
+              aria-modal="true"
+              className={cn(
+                "absolute right-0 top-0 flex h-full w-full max-w-md flex-col border-l border-border bg-card shadow-xl transition-transform duration-200 ease-out",
+                payload ? "translate-x-0" : "translate-x-full"
+              )}
+            >
+              {payload && (
+                <>
+                  <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        {payload.variant && (
+                          <span className={cn("size-2 shrink-0 rounded-full", dotColor[payload.variant])} />
+                        )}
+                        <h2 className="truncate text-sm font-semibold text-foreground">{payload.title}</h2>
+                        {loading && <Loader2 className="size-3.5 shrink-0 animate-spin text-muted-foreground" />}
+                      </div>
+                      {payload.subtitle && (
+                        <p className="mt-0.5 truncate text-[11px] text-muted-foreground">{payload.subtitle}</p>
+                      )}
+                    </div>
+                    <button
+                      type="button"
+                      onClick={close}
+                      className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                      aria-label="Close"
+                    >
+                      <X className="size-4" />
+                    </button>
+                  </div>
+
+                  <div className="flex-1 overflow-y-auto px-5 py-4">
+                    {payload.tags && payload.tags.length > 0 && (
+                      <div className="mb-4 flex flex-wrap gap-1.5">
+                        {payload.tags.map((t) => (
+                          <span
+                            key={t}
+                            className="rounded bg-muted px-2 py-0.5 text-[11px] capitalize text-muted-foreground"
+                          >
+                            {t}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+
+                    {payload.fields && <FieldList fields={payload.fields} />}
+
+                    {payload.groups?.map((g, gi) => (
+                      <div key={gi} className={cn(gi > 0 && "mt-5")}>
+                        {g.heading && (
+                          <p className="mb-1 text-xs font-semibold text-foreground">{g.heading}</p>
+                        )}
+                        <FieldList fields={g.fields} />
+                      </div>
+                    ))}
+
+                    {loading && (!payload.groups || payload.groups.length === 0) && !payload.fields && (
+                      <p className="py-6 text-center text-sm text-muted-foreground">Loading details...</p>
+                    )}
+                  </div>
+                </>
+              )}
+            </aside>
+          </div>,
+          document.body
+        )}
+    </Ctx.Provider>
+  )
+}
+
+function FieldList({ fields }: { fields: DetailField[] }) {
+  return (
+    <dl className="divide-y divide-border">
+      {fields.map((f, i) => (
+        <div key={i} className="flex items-start justify-between gap-4 py-2.5">
+          <dt className="shrink-0 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            {f.label}
+          </dt>
+          <dd className="text-right text-xs font-medium text-foreground">{f.value}</dd>
+        </div>
+      ))}
+    </dl>
+  )
+}