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/top-header.tsx

@@ -14,24 +14,17 @@ function Currency({
 	amount: number;
 	label: string;
 }) {
+	const textColor = "var(--color-navbar-text-readable, var(--color-navbar-text))";
+	const valueColor =
+		"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
+
 	return (
 		<div className="flex gap-x-1 sm:gap-x-2 items-center">
 			<div
 				className={`h-[20px] w-[20px] sm:h-[25px] sm:w-[25px] rounded-full outline-offset-[3px] ${icon}`}
 			/>
-			<div
-				style={{
-					color:
-						"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text-muted)))",
-				}}
-			>
-				<span
-					className="font-semibold text-xs sm:text-sm"
-					style={{
-						color:
-							"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
-					}}
-				>
+			<div style={{ color: textColor }}>
+				<span className="font-semibold text-xs sm:text-sm" style={{ color: valueColor }}>
 					{amount.toLocaleString()}
 				</span>{" "}
 				<span className="hidden sm:inline text-xs">{label}</span>
@@ -74,6 +67,8 @@ export async function TopHeader() {
 		)) ?? "";
 	const avatar = avatarImageUrl(imager, look, { headOnly: true, direction: 2 });
 	const isStaff = (session.user.rank ?? 0) >= 7;
+	const textColor =
+		"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
 
 	return (
 		<div style={{ backgroundColor: "var(--color-navbar)" }}>
@@ -93,10 +88,7 @@ export async function TopHeader() {
 						<details className="relative">
 							<summary
 								className="list-none cursor-pointer font-semibold text-xs sm:text-sm [&::-webkit-details-marker]:hidden"
-								style={{
-									color:
-										"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
-								}}
+								style={{ color: textColor }}
 							>
 								<span className="hidden sm:inline">Administration</span>
 								<span className="sm:hidden">Admin</span>
@@ -144,10 +136,7 @@ export async function TopHeader() {
 							/>
 							<span
 								className="hidden sm:inline -ml-2 font-semibold"
-								style={{
-									color:
-										"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))",
-								}}
+								style={{ color: textColor }}
 							>
 								{session.user.name}
 							</span>