Rebuild all menus from scratch for pixel-perfect rendering on every device

- mobile-nav: pure block/hidden toggle, no transforms, no transition-all
- nav-dropdown: clean block/hidden toggle, no CSS animation hacks
- navigation: removed shadow-sm, no will-change, no GPU compositing
- top-header: consistent mobile layout, clean details/summary dropdowns
- admin-mobile-wrapper: inline transition instead of CSS class for sidebar
- globals.css: removed transition-all from nav-item/dropdown-item, replaced
  with specific color/background-color transitions only, added hover bg

src/components/nav-dropdown.tsx

@@ -14,30 +14,29 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 	const ref = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		function handleClick(e: MouseEvent) {
+		if (!open) return;
+		const onClick = (e: MouseEvent) => {
 			if (ref.current && !ref.current.contains(e.target as Node))
 				setOpen(false);
-		}
-		function handleKey(e: KeyboardEvent) {
+		};
+		const onKey = (e: KeyboardEvent) => {
 			if (e.key === "Escape") setOpen(false);
-		}
-		if (open) {
-			document.addEventListener("mousedown", handleClick);
-			document.addEventListener("keydown", handleKey);
-		}
+		};
+		document.addEventListener("mousedown", onClick);
+		document.addEventListener("keydown", onKey);
 		return () => {
-			document.removeEventListener("mousedown", handleClick);
-			document.removeEventListener("keydown", handleKey);
+			document.removeEventListener("mousedown", onClick);
+			document.removeEventListener("keydown", onKey);
 		};
 	}, [open]);
 
 	return (
-		<div ref={ref} className="relative group md:flex">
+		<div ref={ref} className="relative md:flex">
 			<button
 				type="button"
-				onClick={() => setOpen(!open)}
+				onClick={() => setOpen((v) => !v)}
 				onKeyDown={(e) => {
-					if (e.key === "Enter" || e.key === " ") setOpen(!open);
+					if (e.key === "Enter" || e.key === " ") setOpen((v) => !v);
 				}}
 				className="nav-item cursor-pointer"
 				aria-expanded={open}
@@ -55,7 +54,7 @@ export function NavDropdown({ label, icon, children }: NavDropdownProps) {
 				) : null}
 				{label}
 				<svg
-					className={`ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+					className={`ml-auto md:ml-1 w-3 h-3 ${open ? "rotate-180" : ""}`}
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"