feat: self-service change password for all roles

- middleware.ts: add /account to isSharedRoute so all roles can reach it
- components/account/change-password-form.tsx: re-auth with current password
  then updateUser({password}) with client-side validation (length, match, diff)
- app/(protected)/account/page.tsx: dedicated account page, no role gate
- sidebar.tsx: Account link (all roles) above Logout in desktop footer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CPf5Rc8QPx6V8KLEEgfKEQ

components/layout/sidebar.tsx

@@ -58,6 +58,11 @@ const IconLogout = () => (
     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
   </svg>
 )
+const IconUser = () => (
+  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+  </svg>
+)
 
 const NAV_ITEMS: Record<string, NavItem[]> = {
   reporter: [
@@ -104,7 +109,7 @@ function useNavItems(role: string): NavItem[] {
 
 function NavLink({ item, pathname }: { item: NavItem; pathname: string }) {
   // Exact match for root-level single-page roles, prefix match otherwise
-  const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report']
+  const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report', '/account']
   const isActive = exactRoots.includes(item.href)
     ? pathname === item.href
     : pathname.startsWith(item.href)
@@ -170,6 +175,19 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
               <p className="text-xs text-gray-500 truncate">{roleLabel}</p>
             </div>
           </div>
+          <Link
+            href="/account"
+            className={`flex items-center gap-2 w-full px-3 py-2 text-sm rounded-lg transition-colors ${
+              pathname === '/account'
+                ? 'bg-blue-50 text-blue-700'
+                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+            }`}
+          >
+            <span className={pathname === '/account' ? 'text-blue-600' : 'text-gray-400'}>
+              <IconUser />
+            </span>
+            Account
+          </Link>
           <button
             onClick={logout}
             className="flex items-center gap-2 w-full px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900 rounded-lg transition-colors"
@@ -183,7 +201,7 @@ export function Sidebar({ role, userName, userEmail }: SidebarProps) {
       {/* Mobile bottom tab bar */}
       <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex z-40 safe-area-pb">
         {mobileItems.map(item => {
-          const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report']
+          const exactRoots = ['/reporter', '/supervisor', '/management', '/capa-owner', '/admin', '/report', '/account']
           const isActive = exactRoots.includes(item.href)
             ? pathname === item.href
             : pathname.startsWith(item.href)