Improve admin panel UX with toasts, evolution CRUD, sorting, drag-and-drop, and responsive layout

Add sonner toast notifications to all mutations, evolution management backend
(CRUD endpoints with search/pagination) and frontend (form modal with pokemon
selector, paginated list page), sortable AdminTable columns (Region/Gen/Year
on Games), drag-and-drop route reordering via @dnd-kit, skeleton loading states,
card-styled table wrappers, and responsive mobile nav in AdminLayout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/admin/AdminLayout.tsx

@@ -3,21 +3,22 @@ import { NavLink, Outlet } from 'react-router-dom'
 const navItems = [
   { to: '/admin/games', label: 'Games' },
   { to: '/admin/pokemon', label: 'Pokemon' },
+  { to: '/admin/evolutions', label: 'Evolutions' },
 ]
 
 export function AdminLayout() {
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
       <h1 className="text-2xl font-bold mb-6">Admin Panel</h1>
-      <div className="flex gap-8">
-        <nav className="w-48 flex-shrink-0">
-          <ul className="space-y-1">
+      <div className="flex flex-col sm:flex-row gap-6 sm:gap-8">
+        <nav className="flex-shrink-0 sm:w-48">
+          <ul className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-visible">
             {navItems.map((item) => (
-              <li key={item.to}>
+              <li key={item.to} className="flex-shrink-0">
                 <NavLink
                   to={item.to}
                   className={({ isActive }) =>
-                    `block px-3 py-2 rounded-md text-sm font-medium ${
+                    `block px-3 py-2 rounded-md text-sm font-medium whitespace-nowrap ${
                       isActive
                         ? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
                         : 'hover:bg-gray-100 dark:hover:bg-gray-700'