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

@@ -36,7 +36,7 @@ export function AdminMobileWrapper({
 				<button
 					type="button"
 					onClick={() => setOpen(!open)}
-					className="flex items-center justify-center w-9 h-9 rounded-lg transition-colors hover:bg-[var(--admin-accent)]/15"
+					className="flex items-center justify-center w-9 h-9 rounded-lg"
 					style={{ color: "var(--admin-text-muted)" }}
 				>
 					{open ? <X size={18} /> : <Menu size={18} />}
@@ -52,16 +52,18 @@ export function AdminMobileWrapper({
 			{/* Backdrop */}
 			{open && (
 				<div
-					className="fixed inset-0 z-40 lg:hidden bg-black/50"
+					className="fixed inset-0 z-40 lg:hidden"
 					onClick={() => setOpen(false)}
+					style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
 				/>
 			)}
 
 			{/* Sidebar */}
 			<div
-				className={`fixed inset-y-0 left-0 z-50 w-[260px] transform transition-transform duration-300 ease-in-out lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
+				className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
 					open ? "translate-x-0" : "-translate-x-full"
 				}`}
+				style={{ transition: "transform 300ms ease-in-out" }}
 			>
 				{sidebar}
 			</div>