feat: timeline multi-select, demand popover, resource hover card, merged tooltips, dark mode fixes

Major timeline enhancements:
- Right-click drag multi-selection with floating action bar (batch delete/assign)
- DemandPopover for demand strip details (replaces broken "Loading" modal)
- ResourceHoverCard on name hover showing skills, rates, role, chapter
- Merged heatmap+vacation tooltips into unified TimelineTooltip component
- Fixed overbooking blink animation (date normalization, z-index ordering)
- Fixed dark mode sticky column bleed-through in project view
- System roles admin page, notification task management, performance review docs

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

apps/web/src/components/notifications/NotificationBell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import type { Route } from "next";
@@ -27,6 +28,9 @@ export function NotificationBell() {
   const [open, setOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<TabKey>("all");
   const ref = useRef<HTMLDivElement>(null);
+  const bellRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   const { data: session, status } = useSession();
   const isAuthenticated = status === "authenticated" && !!session?.user?.email;
 
@@ -34,13 +38,13 @@ export function NotificationBell() {
 
   const { data: unreadCount = 0 } = trpc.notification.unreadCount.useQuery(undefined, {
     enabled: isAuthenticated,
-    refetchInterval: 30_000,
+    refetchInterval: 60_000,
     retry: false,
   });
 
   const { data: taskCounts } = trpc.notification.taskCounts.useQuery(undefined, {
     enabled: isAuthenticated,
-    refetchInterval: 30_000,
+    refetchInterval: 60_000,
     retry: false,
   });
 
@@ -77,11 +81,32 @@ export function NotificationBell() {
     },
   });
 
+  // Compute dropdown position when opening
+  const updatePosition = useCallback(() => {
+    if (!bellRef.current) return;
+    const rect = bellRef.current.getBoundingClientRect();
+    const panelHeight = 440; // approximate max height
+    let top = rect.top;
+    // If it would overflow the bottom, flip upward
+    if (top + panelHeight > window.innerHeight) {
+      top = Math.max(8, window.innerHeight - panelHeight - 8);
+    }
+    setDropdownPos({ top, left: rect.right + 8 });
+  }, []);
+
+  useEffect(() => {
+    if (open) updatePosition();
+  }, [open, updatePosition]);
+
   // Close dropdown on outside click
   useEffect(() => {
     if (!open) return;
     function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      const target = e.target as Node;
+      if (
+        ref.current && !ref.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
         setOpen(false);
       }
     }
@@ -113,6 +138,7 @@ export function NotificationBell() {
     <div ref={ref} className="relative">
       {/* Bell button */}
       <button
+        ref={bellRef}
         type="button"
         onClick={() => setOpen((v) => !v)}
         className="relative p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
@@ -146,9 +172,13 @@ export function NotificationBell() {
         )}
       </button>
 
-      {/* Dropdown panel */}
-      {open && (
-        <div className="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-50 overflow-hidden">
+      {/* Dropdown panel — rendered via portal to escape sidebar overflow */}
+      {open && createPortal(
+        <div
+          ref={dropdownRef}
+          className="fixed w-96 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg z-[9999] overflow-hidden"
+          style={{ top: dropdownPos.top, left: dropdownPos.left }}
+        >
           {/* Header */}
           <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-800">
             <span className="text-sm font-semibold text-gray-900 dark:text-gray-50">
@@ -335,7 +365,8 @@ export function NotificationBell() {
               View all &rarr;
             </Link>
           </div>
-        </div>
+        </div>,
+        document.body,
       )}
     </div>
   );