Visibility polish: admin sidebar contrast/focus, table header readability, nav focus rings

src/app/globals.css

@@ -216,6 +216,10 @@ summary,
 		color: var(--color-primary-readable, var(--color-primary));
 		background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
 	}
+	.nav-item:focus-visible {
+		outline: 2px solid var(--color-primary-readable, var(--color-primary));
+		outline-offset: 2px;
+	}
 	.dropdown-item {
 		@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
 		color: var(--color-dropdown-text-readable, var(--color-text-readable));
@@ -225,6 +229,10 @@ summary,
 		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
 		color: var(--color-primary-readable, var(--color-primary));
 	}
+	.dropdown-item:focus-visible {
+		outline: 2px solid var(--color-primary-readable, var(--color-primary));
+		outline-offset: -2px;
+	}
 	.dropdown-menu {
 		background-color: var(--color-dropdown);
 		border: 1px solid
@@ -550,7 +558,7 @@ tbody tr:hover {
 }
 .admin-page thead th {
 	background: color-mix(in srgb, var(--admin-accent) 8%, var(--admin-surface));
-	color: var(--admin-text-muted);
+	color: var(--admin-text);
 	border-bottom: 1px solid var(--admin-border);
 	white-space: nowrap;
 	font-size: 0.68rem;

src/components/admin/admin-mobile-wrapper.tsx

@@ -36,8 +36,9 @@ export function AdminMobileWrapper({
 				<button
 					type="button"
 					onClick={() => setOpen(!open)}
-					className="flex items-center justify-center w-9 h-9 rounded-lg"
+					className="flex items-center justify-center w-9 h-9 rounded-lg
-					style={{ color: "var(--admin-text-muted)" }}
+						focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)]"
+					style={{ color: "var(--admin-sidebar-text-readable)" }}
 				>
 					{open ? <X size={18} /> : <Menu size={18} />}
 				</button>

src/components/admin/admin-nav-link.tsx

@@ -28,11 +28,12 @@ export function AdminNavLink({
 		<Link
 			href={href}
 			aria-current={active ? "page" : undefined}
-			className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-all duration-150 ${
+			className={`group flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm no-underline transition-colors duration-150
-				active
+				focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)] ${
-					? "bg-[var(--admin-accent)]/20 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
+					active
-					: "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
+						? "bg-[var(--admin-accent)]/25 font-semibold text-[var(--admin-sidebar-text-readable)] border-l-2 border-[var(--admin-accent)] shadow-sm"
-			}`}
+						: "font-medium text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
+				}`}
 		>
 			{icon ? (
 				<span

src/components/mobile-nav.tsx

@@ -35,7 +35,8 @@ export function MobileNav({
 				className="list-none cursor-pointer flex items-center justify-center w-11 h-11 rounded-xl shrink-0
 					[&::-webkit-details-marker]:hidden transition-colors duration-150
 					hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
-					active:scale-[0.96]"
+					active:scale-[0.96]
+					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
 				aria-label={"Menu"}
 			>
 				<svg
@@ -102,7 +103,7 @@ export function MobileNav({
 						>
 							{brandLabel}
 						</span>
-						<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-60">
+						<span className="ml-auto text-[11px] font-semibold uppercase tracking-wider opacity-75">
 							{closeLabel}
 						</span>
 					</div>