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/mobile-nav.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 
 interface MobileNavProps {
-	children: React.ReactNode;
-	/** Accessible label for the menu button. Pass translated string from server. */
+	children: ReactNode;
 	menuLabel?: string;
 	closeLabel?: string;
 }
@@ -15,13 +14,23 @@ export function MobileNav({
 	closeLabel = "Close menu",
 }: MobileNavProps) {
 	const [open, setOpen] = useState(false);
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!open) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === "Escape") setOpen(false);
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [open]);
 
 	return (
 		<>
 			<button
 				type="button"
-				onClick={() => setOpen(!open)}
-				className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150 ml-auto"
+				onClick={() => setOpen((v) => !v)}
+				className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg ml-auto shrink-0"
 				style={{
 					color: "var(--color-navbar-text-readable, var(--color-navbar-text))",
 				}}
@@ -57,18 +66,15 @@ export function MobileNav({
 				<div
 					className="fixed inset-0 z-30 md:hidden"
 					onClick={() => setOpen(false)}
-					style={{
-						backgroundColor: "rgba(0,0,0,0.6)",
-					}}
+					style={{ backgroundColor: "rgba(0,0,0,0.6)" }}
 				/>
 			)}
 
 			<div
 				id="mobile-menu"
+				ref={panelRef}
 				role="menu"
-				className={`${
-					open ? "block" : "hidden"
-				} md:block overflow-y-auto w-full md:w-auto`}
+				className={`${open ? "block" : "hidden"} md:block w-full md:w-auto`}
 				style={{ backgroundColor: "var(--color-navbar)" }}
 			>
 				<div