refactor: admin section UX/UI redesign

- Fix critical --bg-base token bug (dark mode broken), replace with --bg-surface
- Replace hand-rolled admin nav with Tabs composite (proper ARIA)
- Migrate AuditLog from custom table to DataTable with sorting, row accents, card wrapper
- Remove duplicate h2 page titles (breadcrumb + tab already identify the page)
- Rework user creation with provider-aware form (Local/OIDC RadioGroup)
- Add Security section with password reset for local users, OIDC info for external
- Add toast notifications to all RBAC mutations (create/delete/add/remove)
- Add confirmation dialogs for cascading removals (group/role)
- Add keyboard accessibility to entity lists (role/tabIndex/aria-selected)
- Add empty search states, duplicate name validation
- Replace lock emoji with Badge, fix radii/shadow/padding consistency
- Badge dashed variant keeps background color
- Inherited roles shown with dashed outline + reduced opacity
- Inline MultiSelect (+Add) for groups, roles, members, child groups
- Center OIDC form, replace inline styles with CSS modules

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/Admin/Admin.tsx

@@ -2,14 +2,15 @@ import { useNavigate, useLocation } from 'react-router-dom'
 import { AppShell } from '../../design-system/layout/AppShell/AppShell'
 import { Sidebar } from '../../design-system/layout/Sidebar/Sidebar'
 import { TopBar } from '../../design-system/layout/TopBar/TopBar'
+import { Tabs } from '../../design-system/composites/Tabs/Tabs'
 import { SIDEBAR_APPS } from '../../mocks/sidebar'
 import styles from './Admin.module.css'
 import type { ReactNode } from 'react'
 
 const ADMIN_TABS = [
-  { label: 'User Management', path: '/admin/rbac' },
-  { label: 'Audit Log', path: '/admin/audit' },
-  { label: 'OIDC', path: '/admin/oidc' },
+  { label: 'User Management', value: '/admin/rbac' },
+  { label: 'Audit Log', value: '/admin/audit' },
+  { label: 'OIDC', value: '/admin/oidc' },
 ]
 
 interface AdminLayoutProps {
@@ -31,18 +32,11 @@ export function AdminLayout({ title, children }: AdminLayoutProps) {
         environment="PRODUCTION"
         user={{ name: 'hendrik' }}
       />
-      <nav className={styles.adminNav} aria-label="Admin sections">
-        {ADMIN_TABS.map((tab) => (
-          <button
-            key={tab.path}
-            className={`${styles.adminTab} ${location.pathname === tab.path ? styles.adminTabActive : ''}`}
-            onClick={() => navigate(tab.path)}
-            type="button"
-          >
-            {tab.label}
-          </button>
-        ))}
-      </nav>
+      <Tabs
+        tabs={ADMIN_TABS}
+        active={location.pathname}
+        onChange={(path) => navigate(path)}
+      />
       <div className={styles.adminContent}>
         {children}
       </div>