@burdenoff/microfe-auth 2026.602.1 → 2026.624.1

package/dist/auth/components/profile/UserProfileMenu.js

@@ -60,7 +60,7 @@ function f({ onSwitchWorkspace: f, onLogout: p, position: m = "right" }) {
 				className: "px-4 py-3 border-b border-border-subtle",
 				children: [
 					/* @__PURE__ */ u("p", {
-						className: "text-sm font-medium text-foreground truncate",
+						className: "text-sm font-medium text-text-primary truncate",
 						children: E
 					}),
 					/* @__PURE__ */ u("p", {

package/dist/auth/components/profile/UserProfileMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserProfileMenu.js","names":[],"sources":["../../../../src/auth/components/profile/UserProfileMenu.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { LogOut, ChevronDown, Building2, UserPlus } from \"lucide-react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuthStore } from \"../../store/authStore\";\n\nexport interface UserProfileMenuProps {\n  /**\n   * Callback when workspace switcher should be shown\n   */\n  onSwitchWorkspace?: () => void;\n\n  /**\n   * Logout handler (REQUIRED)\n   * Should clear auth state and redirect to login\n   */\n  onLogout: () => void;\n\n  /**\n   * Position of the dropdown menu\n   * @default 'right'\n   */\n  position?: \"left\" | \"right\";\n}\n\n/**\n * User Profile Menu Component\n *\n * Displays user avatar/icon with dropdown menu containing:\n * - User information\n * - Switch Workspace option\n * - Logout button\n *\n * @example\n * ```tsx\n * import { UserProfileMenu } from '@burdenoff/microfe-auth';\n *\n * function AppHeader() {\n *   return (\n *     <div className=\"header\">\n *       <UserProfileMenu\n *         onSwitchWorkspace={() => setShowWorkspaceSwitcher(true)}\n *         position=\"right\"\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function UserProfileMenu({\n  onSwitchWorkspace,\n  onLogout,\n  position = \"right\",\n}: UserProfileMenuProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const [isOpen, setIsOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const navigate = useNavigate();\n\n  const user = useAuthStore((state) => state.user);\n  const currentWorkspaceId = useAuthStore((state) => state.currentWorkspaceId);\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen]);\n\n  const handleLogout = () => {\n    setIsOpen(false);\n    onLogout();\n  };\n\n  const handleSwitchWorkspace = () => {\n    setIsOpen(false);\n    onSwitchWorkspace?.();\n  };\n\n  if (!user) {\n    return null;\n  }\n\n  // Get user initials for avatar\n  const getInitials = () => {\n    if (user.firstName && user.lastName) {\n      return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();\n    }\n    if (user.name) {\n      const parts = user.name.split(\" \");\n      if (parts.length >= 2) {\n        return `${parts[0][0]}${parts[1][0]}`.toUpperCase();\n      }\n      return user.name.substring(0, 2).toUpperCase();\n    }\n    if (user.username) {\n      return user.username.substring(0, 2).toUpperCase();\n    }\n    return user.email.substring(0, 2).toUpperCase();\n  };\n\n  const displayName =\n    user.name ||\n    `${user.firstName || \"\"} ${user.lastName || \"\"}`.trim() ||\n    user.username;\n\n  return (\n    <div className=\"relative\" ref={menuRef}>\n      {/* Profile Button */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-bg-sunken transition-colors\"\n        aria-label=\"User menu\"\n        aria-expanded={isOpen}\n      >\n        {/* Avatar */}\n        <div className=\"size-8 rounded-full bg-accent-blue flex items-center justify-center text-white text-sm font-medium overflow-hidden\">\n          {user.avatar ? (\n            <img\n              src={user.avatar}\n              alt={tr(\"auth.profileMenu.avatarAlt\", \"Profile picture\")}\n              className=\"size-full object-cover\"\n            />\n          ) : (\n            getInitials()\n          )}\n        </div>\n\n        {/* User Name (optional, hide on small screens) */}\n        <span className=\"hidden sm:block text-sm font-medium text-text-secondary\">\n          {displayName}\n        </span>\n\n        {/* Chevron */}\n        <ChevronDown\n          className={`size-4 text-text-secondary transition-transform ${\n            isOpen ? \"rotate-180\" : \"\"\n          }`}\n        />\n      </button>\n\n      {/* Dropdown Menu */}\n      {isOpen && (\n        <div\n          className={`absolute top-full mt-2 w-64 bg-bg-surface rounded-lg shadow-lg border border-border-subtle py-2 z-50 ${\n            position === \"right\" ? \"right-0\" : \"left-0\"\n          }`}\n        >\n          {/* User Info Section */}\n          <div className=\"px-4 py-3 border-b border-border-subtle\">\n            <p className=\"text-sm font-medium text-foreground truncate\">\n              {displayName}\n            </p>\n            <p className=\"text-xs text-text-secondary truncate\">{user.email}</p>\n            {currentWorkspaceId && (\n              <p className=\"text-xs text-text-tertiary mt-1 truncate\">\n                Workspace: {currentWorkspaceId.substring(0, 8)}...\n              </p>\n            )}\n          </div>\n\n          {/* Menu Items */}\n          <div className=\"py-1\">\n            {/* Switch Workspace */}\n            {onSwitchWorkspace && (\n              <button\n                type=\"button\"\n                onClick={handleSwitchWorkspace}\n                className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n              >\n                <Building2 className=\"size-4\" />\n                <span>\n                  {tr(\"auth.profileMenu.switchWorkspace\", \"Switch Workspace\")}\n                </span>\n              </button>\n            )}\n\n            {/* Add Account */}\n            <button\n              type=\"button\"\n              onClick={() => {\n                setIsOpen(false);\n                const returnTo = encodeURIComponent(\n                  window.location.pathname + window.location.search,\n                );\n                navigate(`/auth/login?mode=add-account&returnTo=${returnTo}`);\n              }}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n            >\n              <UserPlus className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.addAccount\", \"Add account\")}</span>\n            </button>\n\n            {/* Logout */}\n            <button\n              type=\"button\"\n              onClick={handleLogout}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors\"\n            >\n              <LogOut className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.logout\", \"Logout\")}</span>\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"UserProfileMenu.js","names":[],"sources":["../../../../src/auth/components/profile/UserProfileMenu.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { LogOut, ChevronDown, Building2, UserPlus } from \"lucide-react\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuthStore } from \"../../store/authStore\";\n\nexport interface UserProfileMenuProps {\n  /**\n   * Callback when workspace switcher should be shown\n   */\n  onSwitchWorkspace?: () => void;\n\n  /**\n   * Logout handler (REQUIRED)\n   * Should clear auth state and redirect to login\n   */\n  onLogout: () => void;\n\n  /**\n   * Position of the dropdown menu\n   * @default 'right'\n   */\n  position?: \"left\" | \"right\";\n}\n\n/**\n * User Profile Menu Component\n *\n * Displays user avatar/icon with dropdown menu containing:\n * - User information\n * - Switch Workspace option\n * - Logout button\n *\n * @example\n * ```tsx\n * import { UserProfileMenu } from '@burdenoff/microfe-auth';\n *\n * function AppHeader() {\n *   return (\n *     <div className=\"header\">\n *       <UserProfileMenu\n *         onSwitchWorkspace={() => setShowWorkspaceSwitcher(true)}\n *         position=\"right\"\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function UserProfileMenu({\n  onSwitchWorkspace,\n  onLogout,\n  position = \"right\",\n}: UserProfileMenuProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  const [isOpen, setIsOpen] = useState(false);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const navigate = useNavigate();\n\n  const user = useAuthStore((state) => state.user);\n  const currentWorkspaceId = useAuthStore((state) => state.currentWorkspaceId);\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    function handleClickOutside(event: MouseEvent) {\n      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen]);\n\n  const handleLogout = () => {\n    setIsOpen(false);\n    onLogout();\n  };\n\n  const handleSwitchWorkspace = () => {\n    setIsOpen(false);\n    onSwitchWorkspace?.();\n  };\n\n  if (!user) {\n    return null;\n  }\n\n  // Get user initials for avatar\n  const getInitials = () => {\n    if (user.firstName && user.lastName) {\n      return `${user.firstName[0]}${user.lastName[0]}`.toUpperCase();\n    }\n    if (user.name) {\n      const parts = user.name.split(\" \");\n      if (parts.length >= 2) {\n        return `${parts[0][0]}${parts[1][0]}`.toUpperCase();\n      }\n      return user.name.substring(0, 2).toUpperCase();\n    }\n    if (user.username) {\n      return user.username.substring(0, 2).toUpperCase();\n    }\n    return user.email.substring(0, 2).toUpperCase();\n  };\n\n  const displayName =\n    user.name ||\n    `${user.firstName || \"\"} ${user.lastName || \"\"}`.trim() ||\n    user.username;\n\n  return (\n    <div className=\"relative\" ref={menuRef}>\n      {/* Profile Button */}\n      <button\n        type=\"button\"\n        onClick={() => setIsOpen(!isOpen)}\n        className=\"flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-bg-sunken transition-colors\"\n        aria-label=\"User menu\"\n        aria-expanded={isOpen}\n      >\n        {/* Avatar */}\n        <div className=\"size-8 rounded-full bg-accent-blue flex items-center justify-center text-white text-sm font-medium overflow-hidden\">\n          {user.avatar ? (\n            <img\n              src={user.avatar}\n              alt={tr(\"auth.profileMenu.avatarAlt\", \"Profile picture\")}\n              className=\"size-full object-cover\"\n            />\n          ) : (\n            getInitials()\n          )}\n        </div>\n\n        {/* User Name (optional, hide on small screens) */}\n        <span className=\"hidden sm:block text-sm font-medium text-text-secondary\">\n          {displayName}\n        </span>\n\n        {/* Chevron */}\n        <ChevronDown\n          className={`size-4 text-text-secondary transition-transform ${\n            isOpen ? \"rotate-180\" : \"\"\n          }`}\n        />\n      </button>\n\n      {/* Dropdown Menu */}\n      {isOpen && (\n        <div\n          className={`absolute top-full mt-2 w-64 bg-bg-surface rounded-lg shadow-lg border border-border-subtle py-2 z-50 ${\n            position === \"right\" ? \"right-0\" : \"left-0\"\n          }`}\n        >\n          {/* User Info Section */}\n          <div className=\"px-4 py-3 border-b border-border-subtle\">\n            <p className=\"text-sm font-medium text-text-primary truncate\">\n              {displayName}\n            </p>\n            <p className=\"text-xs text-text-secondary truncate\">{user.email}</p>\n            {currentWorkspaceId && (\n              <p className=\"text-xs text-text-tertiary mt-1 truncate\">\n                Workspace: {currentWorkspaceId.substring(0, 8)}...\n              </p>\n            )}\n          </div>\n\n          {/* Menu Items */}\n          <div className=\"py-1\">\n            {/* Switch Workspace */}\n            {onSwitchWorkspace && (\n              <button\n                type=\"button\"\n                onClick={handleSwitchWorkspace}\n                className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n              >\n                <Building2 className=\"size-4\" />\n                <span>\n                  {tr(\"auth.profileMenu.switchWorkspace\", \"Switch Workspace\")}\n                </span>\n              </button>\n            )}\n\n            {/* Add Account */}\n            <button\n              type=\"button\"\n              onClick={() => {\n                setIsOpen(false);\n                const returnTo = encodeURIComponent(\n                  window.location.pathname + window.location.search,\n                );\n                navigate(`/auth/login?mode=add-account&returnTo=${returnTo}`);\n              }}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken transition-colors\"\n            >\n              <UserPlus className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.addAccount\", \"Add account\")}</span>\n            </button>\n\n            {/* Logout */}\n            <button\n              type=\"button\"\n              onClick={handleLogout}\n              className=\"w-full flex items-center gap-3 px-4 py-2 text-sm text-status-error-text hover:bg-status-error-bg-subtle transition-colors\"\n            >\n              <LogOut className=\"size-4\" />\n              <span>{tr(\"auth.profileMenu.logout\", \"Logout\")}</span>\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/components/workspace/WorkspaceSelector.js

@@ -49,7 +49,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 				/* @__PURE__ */ o("div", {
 					className: "space-y-2",
 					children: [/* @__PURE__ */ a("h2", {
-						className: "text-2xl font-semibold text-foreground",
+						className: "text-2xl font-semibold text-text-primary",
 						children: g("auth.workspaceSelector.title", "Select Your Workspace")
 					}), /* @__PURE__ */ a("p", {
 						className: "text-sm text-text-secondary",
@@ -91,7 +91,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 								id: _,
 								value: b || "",
 								onChange: (e) => j(e.target.value),
-								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20",
+								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20",
 								children: [/* @__PURE__ */ a("option", {
 									value: "",
 									children: g("auth.workspaceSelector.selectOrg", "Select organization...")
@@ -134,7 +134,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 								value: S || "",
 								onChange: (e) => M(e.target.value),
 								disabled: !b && E.length > 1,
-								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed",
+								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed",
 								children: [/* @__PURE__ */ a("option", {
 									value: "",
 									children: g("auth.workspaceSelector.selectWorkspace", "Select workspace...")
@@ -174,7 +174,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 								id: y,
 								value: w || "",
 								onChange: (e) => N(e.target.value),
-								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20",
+								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20",
 								children: [/* @__PURE__ */ a("option", {
 									value: "",
 									children: g("auth.workspaceSelector.noProject", "No project selected")
@@ -187,7 +187,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 						k && /* @__PURE__ */ o("div", {
 							className: "rounded-lg bg-bg-sunken p-4 space-y-2",
 							children: [/* @__PURE__ */ a("p", {
-								className: "text-sm font-medium text-foreground",
+								className: "text-sm font-medium text-text-primary",
 								children: g("auth.workspaceSelector.selected", "Selected:")
 							}), /* @__PURE__ */ o("div", {
 								className: "text-sm text-text-secondary space-y-1",
@@ -236,7 +236,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 						type: "button",
 						onClick: P,
 						disabled: !I || p,
-						className: "px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+						className: "px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 						children: p ? g("auth.workspaceSelector.loading", "Loading...") : g("auth.workspaceSelector.continue", "Continue")
 					})]
 				})

package/dist/auth/components/workspace/WorkspaceSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceSelector.js","names":[],"sources":["../../../../src/auth/components/workspace/WorkspaceSelector.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useId } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { Workspace } from \"../../types\";\n\n/**\n * Organization interface (grouped from workspaces)\n */\nexport interface Organization {\n  id: string;\n  name: string;\n  workspaceCount: number;\n}\n\n/**\n * Project interface (optional, for future use)\n */\nexport interface Project {\n  id: string;\n  name: string;\n  workspaceId: string;\n}\n\nexport interface WorkspaceSelectorProps {\n  /**\n   * Control modal visibility\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback when modal is closed without selection\n   */\n  onClose: () => void;\n\n  /**\n   * List of workspaces to choose from\n   */\n  workspaces: Workspace[];\n\n  /**\n   * Optional list of projects (filtered by workspace)\n   */\n  projects?: Project[];\n\n  /**\n   * Callback when workspace is selected and confirmed\n   */\n  onSelect: (workspace: Workspace, project?: Project) => void;\n\n  /**\n   * Loading state while issuing workspace token\n   */\n  isLoading?: boolean;\n\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n}\n\n/**\n * WorkspaceSelector Component\n *\n * Multi-level workspace selection modal for use across all Burdenoff products.\n *\n * Features:\n * - Three-tier selection: Organization → Workspace → Project (optional)\n * - Auto-select if only one option at each level\n * - Loading and error states\n * - Clean, accessible UI\n *\n * Usage:\n * ```tsx\n * import { WorkspaceSelector } from '@burdenoff/microfe-auth';\n *\n * <WorkspaceSelector\n *   isOpen={showSelector}\n *   onClose={() => setShowSelector(false)}\n *   workspaces={workspaces}\n *   onSelect={async (workspace) => {\n *     await issueWorkspaceToken(workspace.id);\n *     navigate('/');\n *   }}\n * />\n * ```\n */\nconst EMPTY_PROJECTS: readonly Project[] = [];\n\nexport function WorkspaceSelector({\n  isOpen,\n  onClose,\n  workspaces,\n  projects = EMPTY_PROJECTS as Project[],\n  onSelect,\n  isLoading = false,\n  error = null,\n}: WorkspaceSelectorProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  // Generated ids for label-control pairing\n  const orgSelectId = useId();\n  const workspaceSelectId = useId();\n  const projectSelectId = useId();\n  // Selection state\n  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);\n  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(\n    null,\n  );\n  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(\n    null,\n  );\n\n  // Group workspaces by organization\n  const organizations = useMemo<Organization[]>(() => {\n    const orgMap = new Map<string, { name: string; count: number }>();\n\n    workspaces.forEach((workspace) => {\n      const orgId = workspace.organizationId || \"default\";\n      if (!orgMap.has(orgId)) {\n        // Use org ID for name since workspace doesn't have organizationName\n        orgMap.set(orgId, {\n          name:\n            orgId === \"default\"\n              ? \"Default\"\n              : `Organization ${orgId.slice(0, 8)}`,\n          count: 0,\n        });\n      }\n      orgMap.get(orgId)!.count++;\n    });\n\n    return Array.from(orgMap.entries()).map(([id, { name, count }]) => ({\n      id,\n      name,\n      workspaceCount: count,\n    }));\n  }, [workspaces]);\n\n  // Filter workspaces by selected organization\n  const filteredWorkspaces = useMemo(() => {\n    if (!selectedOrgId) return workspaces;\n    return workspaces.filter(\n      (w) => (w.organizationId || \"default\") === selectedOrgId,\n    );\n  }, [workspaces, selectedOrgId]);\n\n  // Filter projects by selected workspace\n  const filteredProjects = useMemo(() => {\n    if (!selectedWorkspaceId) return [];\n    return projects.filter((p) => p.workspaceId === selectedWorkspaceId);\n  }, [projects, selectedWorkspaceId]);\n\n  // Get selected workspace object\n  const selectedWorkspace = useMemo(() => {\n    return workspaces.find((w) => w.id === selectedWorkspaceId);\n  }, [workspaces, selectedWorkspaceId]);\n\n  // Get selected project object\n  const selectedProject = useMemo(() => {\n    return projects.find((p) => p.id === selectedProjectId);\n  }, [projects, selectedProjectId]);\n\n  // Auto-select if only one organization\n  useEffect(() => {\n    if (organizations.length === 1 && !selectedOrgId) {\n      setSelectedOrgId(organizations[0].id);\n    }\n  }, [organizations, selectedOrgId]);\n\n  // Auto-select if only one workspace\n  useEffect(() => {\n    if (filteredWorkspaces.length === 1 && !selectedWorkspaceId) {\n      setSelectedWorkspaceId(filteredWorkspaces[0].id);\n    }\n  }, [filteredWorkspaces, selectedWorkspaceId]);\n\n  // Handle organization selection\n  const handleOrgChange = (orgId: string) => {\n    setSelectedOrgId(orgId);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n  };\n\n  // Handle workspace selection\n  const handleWorkspaceChange = (workspaceId: string) => {\n    setSelectedWorkspaceId(workspaceId);\n    setSelectedProjectId(null);\n  };\n\n  // Handle project selection\n  const handleProjectChange = (projectId: string) => {\n    setSelectedProjectId(projectId);\n  };\n\n  // Handle continue button\n  const handleContinue = () => {\n    if (!selectedWorkspace) return;\n    onSelect(selectedWorkspace, selectedProject);\n  };\n\n  // Handle cancel\n  const handleCancel = () => {\n    setSelectedOrgId(null);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n    onClose();\n  };\n\n  // Check if continue button should be enabled\n  const canContinue = selectedWorkspaceId !== null;\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        onClick={handleCancel}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div className=\"relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6\">\n        {/* Header */}\n        <div className=\"space-y-2\">\n          <h2 className=\"text-2xl font-semibold text-foreground\">\n            {tr(\"auth.workspaceSelector.title\", \"Select Your Workspace\")}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              \"auth.workspaceSelector.subtitle\",\n              \"Choose the workspace you want to work in. You can switch workspaces later from the header.\",\n            )}\n          </p>\n        </div>\n\n        {/* Error display */}\n        {error && (\n          <div className=\"rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n            <p className=\"font-medium\">\n              {tr(\"auth.workspaceSelector.error\", \"Error\")}\n            </p>\n            <p>{error}</p>\n          </div>\n        )}\n\n        {/* Form */}\n        <div className=\"space-y-4\">\n          {/* Organization selection */}\n          {organizations.length > 1 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={orgSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                    />\n                  </svg>\n                  Organization\n                </span>\n              </label>\n              <select\n                id={orgSelectId}\n                value={selectedOrgId || \"\"}\n                onChange={(e) => handleOrgChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.selectOrg\",\n                    \"Select organization...\",\n                  )}\n                </option>\n                {organizations.map((org) => (\n                  <option key={org.id} value={org.id}>\n                    {org.name} ({org.workspaceCount} workspace\n                    {org.workspaceCount !== 1 ? \"s\" : \"\"})\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Workspace selection */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor={workspaceSelectId}\n              className=\"block text-sm font-medium text-text-secondary\"\n            >\n              <span className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                  />\n                </svg>\n                Workspace\n              </span>\n            </label>\n            <select\n              id={workspaceSelectId}\n              value={selectedWorkspaceId || \"\"}\n              onChange={(e) => handleWorkspaceChange(e.target.value)}\n              disabled={!selectedOrgId && organizations.length > 1}\n              className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <option value=\"\">\n                {tr(\n                  \"auth.workspaceSelector.selectWorkspace\",\n                  \"Select workspace...\",\n                )}\n              </option>\n              {filteredWorkspaces.map((workspace) => (\n                <option key={workspace.id} value={workspace.id}>\n                  {workspace.name} ({workspace.slug})\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Project selection (optional) */}\n          {filteredProjects.length > 0 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={projectSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                    />\n                  </svg>\n                  Project (Optional)\n                </span>\n              </label>\n              <select\n                id={projectSelectId}\n                value={selectedProjectId || \"\"}\n                onChange={(e) => handleProjectChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-foreground focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.noProject\",\n                    \"No project selected\",\n                  )}\n                </option>\n                {filteredProjects.map((project) => (\n                  <option key={project.id} value={project.id}>\n                    {project.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Selection summary */}\n          {selectedWorkspace && (\n            <div className=\"rounded-lg bg-bg-sunken p-4 space-y-2\">\n              <p className=\"text-sm font-medium text-foreground\">\n                {tr(\"auth.workspaceSelector.selected\", \"Selected:\")}\n              </p>\n              <div className=\"text-sm text-text-secondary space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-3\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                    />\n                  </svg>\n                  <span>{selectedWorkspace.name}</span>\n                </div>\n                {selectedProject && (\n                  <div className=\"flex items-center gap-2\">\n                    <svg\n                      className=\"size-3\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                      />\n                    </svg>\n                    <span>{selectedProject.name}</span>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-3 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleContinue}\n            disabled={!canContinue || isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isLoading\n              ? tr(\"auth.workspaceSelector.loading\", \"Loading...\")\n              : tr(\"auth.workspaceSelector.continue\", \"Continue\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WorkspaceSelector.js","names":[],"sources":["../../../../src/auth/components/workspace/WorkspaceSelector.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useId } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { Workspace } from \"../../types\";\n\n/**\n * Organization interface (grouped from workspaces)\n */\nexport interface Organization {\n  id: string;\n  name: string;\n  workspaceCount: number;\n}\n\n/**\n * Project interface (optional, for future use)\n */\nexport interface Project {\n  id: string;\n  name: string;\n  workspaceId: string;\n}\n\nexport interface WorkspaceSelectorProps {\n  /**\n   * Control modal visibility\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback when modal is closed without selection\n   */\n  onClose: () => void;\n\n  /**\n   * List of workspaces to choose from\n   */\n  workspaces: Workspace[];\n\n  /**\n   * Optional list of projects (filtered by workspace)\n   */\n  projects?: Project[];\n\n  /**\n   * Callback when workspace is selected and confirmed\n   */\n  onSelect: (workspace: Workspace, project?: Project) => void;\n\n  /**\n   * Loading state while issuing workspace token\n   */\n  isLoading?: boolean;\n\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n}\n\n/**\n * WorkspaceSelector Component\n *\n * Multi-level workspace selection modal for use across all Burdenoff products.\n *\n * Features:\n * - Three-tier selection: Organization → Workspace → Project (optional)\n * - Auto-select if only one option at each level\n * - Loading and error states\n * - Clean, accessible UI\n *\n * Usage:\n * ```tsx\n * import { WorkspaceSelector } from '@burdenoff/microfe-auth';\n *\n * <WorkspaceSelector\n *   isOpen={showSelector}\n *   onClose={() => setShowSelector(false)}\n *   workspaces={workspaces}\n *   onSelect={async (workspace) => {\n *     await issueWorkspaceToken(workspace.id);\n *     navigate('/');\n *   }}\n * />\n * ```\n */\nconst EMPTY_PROJECTS: readonly Project[] = [];\n\nexport function WorkspaceSelector({\n  isOpen,\n  onClose,\n  workspaces,\n  projects = EMPTY_PROJECTS as Project[],\n  onSelect,\n  isLoading = false,\n  error = null,\n}: WorkspaceSelectorProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  // Generated ids for label-control pairing\n  const orgSelectId = useId();\n  const workspaceSelectId = useId();\n  const projectSelectId = useId();\n  // Selection state\n  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);\n  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(\n    null,\n  );\n  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(\n    null,\n  );\n\n  // Group workspaces by organization\n  const organizations = useMemo<Organization[]>(() => {\n    const orgMap = new Map<string, { name: string; count: number }>();\n\n    workspaces.forEach((workspace) => {\n      const orgId = workspace.organizationId || \"default\";\n      if (!orgMap.has(orgId)) {\n        // Use org ID for name since workspace doesn't have organizationName\n        orgMap.set(orgId, {\n          name:\n            orgId === \"default\"\n              ? \"Default\"\n              : `Organization ${orgId.slice(0, 8)}`,\n          count: 0,\n        });\n      }\n      orgMap.get(orgId)!.count++;\n    });\n\n    return Array.from(orgMap.entries()).map(([id, { name, count }]) => ({\n      id,\n      name,\n      workspaceCount: count,\n    }));\n  }, [workspaces]);\n\n  // Filter workspaces by selected organization\n  const filteredWorkspaces = useMemo(() => {\n    if (!selectedOrgId) return workspaces;\n    return workspaces.filter(\n      (w) => (w.organizationId || \"default\") === selectedOrgId,\n    );\n  }, [workspaces, selectedOrgId]);\n\n  // Filter projects by selected workspace\n  const filteredProjects = useMemo(() => {\n    if (!selectedWorkspaceId) return [];\n    return projects.filter((p) => p.workspaceId === selectedWorkspaceId);\n  }, [projects, selectedWorkspaceId]);\n\n  // Get selected workspace object\n  const selectedWorkspace = useMemo(() => {\n    return workspaces.find((w) => w.id === selectedWorkspaceId);\n  }, [workspaces, selectedWorkspaceId]);\n\n  // Get selected project object\n  const selectedProject = useMemo(() => {\n    return projects.find((p) => p.id === selectedProjectId);\n  }, [projects, selectedProjectId]);\n\n  // Auto-select if only one organization\n  useEffect(() => {\n    if (organizations.length === 1 && !selectedOrgId) {\n      setSelectedOrgId(organizations[0].id);\n    }\n  }, [organizations, selectedOrgId]);\n\n  // Auto-select if only one workspace\n  useEffect(() => {\n    if (filteredWorkspaces.length === 1 && !selectedWorkspaceId) {\n      setSelectedWorkspaceId(filteredWorkspaces[0].id);\n    }\n  }, [filteredWorkspaces, selectedWorkspaceId]);\n\n  // Handle organization selection\n  const handleOrgChange = (orgId: string) => {\n    setSelectedOrgId(orgId);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n  };\n\n  // Handle workspace selection\n  const handleWorkspaceChange = (workspaceId: string) => {\n    setSelectedWorkspaceId(workspaceId);\n    setSelectedProjectId(null);\n  };\n\n  // Handle project selection\n  const handleProjectChange = (projectId: string) => {\n    setSelectedProjectId(projectId);\n  };\n\n  // Handle continue button\n  const handleContinue = () => {\n    if (!selectedWorkspace) return;\n    onSelect(selectedWorkspace, selectedProject);\n  };\n\n  // Handle cancel\n  const handleCancel = () => {\n    setSelectedOrgId(null);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n    onClose();\n  };\n\n  // Check if continue button should be enabled\n  const canContinue = selectedWorkspaceId !== null;\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        onClick={handleCancel}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div className=\"relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6\">\n        {/* Header */}\n        <div className=\"space-y-2\">\n          <h2 className=\"text-2xl font-semibold text-text-primary\">\n            {tr(\"auth.workspaceSelector.title\", \"Select Your Workspace\")}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              \"auth.workspaceSelector.subtitle\",\n              \"Choose the workspace you want to work in. You can switch workspaces later from the header.\",\n            )}\n          </p>\n        </div>\n\n        {/* Error display */}\n        {error && (\n          <div className=\"rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n            <p className=\"font-medium\">\n              {tr(\"auth.workspaceSelector.error\", \"Error\")}\n            </p>\n            <p>{error}</p>\n          </div>\n        )}\n\n        {/* Form */}\n        <div className=\"space-y-4\">\n          {/* Organization selection */}\n          {organizations.length > 1 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={orgSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                    />\n                  </svg>\n                  Organization\n                </span>\n              </label>\n              <select\n                id={orgSelectId}\n                value={selectedOrgId || \"\"}\n                onChange={(e) => handleOrgChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.selectOrg\",\n                    \"Select organization...\",\n                  )}\n                </option>\n                {organizations.map((org) => (\n                  <option key={org.id} value={org.id}>\n                    {org.name} ({org.workspaceCount} workspace\n                    {org.workspaceCount !== 1 ? \"s\" : \"\"})\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Workspace selection */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor={workspaceSelectId}\n              className=\"block text-sm font-medium text-text-secondary\"\n            >\n              <span className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                  />\n                </svg>\n                Workspace\n              </span>\n            </label>\n            <select\n              id={workspaceSelectId}\n              value={selectedWorkspaceId || \"\"}\n              onChange={(e) => handleWorkspaceChange(e.target.value)}\n              disabled={!selectedOrgId && organizations.length > 1}\n              className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <option value=\"\">\n                {tr(\n                  \"auth.workspaceSelector.selectWorkspace\",\n                  \"Select workspace...\",\n                )}\n              </option>\n              {filteredWorkspaces.map((workspace) => (\n                <option key={workspace.id} value={workspace.id}>\n                  {workspace.name} ({workspace.slug})\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Project selection (optional) */}\n          {filteredProjects.length > 0 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={projectSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                    />\n                  </svg>\n                  Project (Optional)\n                </span>\n              </label>\n              <select\n                id={projectSelectId}\n                value={selectedProjectId || \"\"}\n                onChange={(e) => handleProjectChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.noProject\",\n                    \"No project selected\",\n                  )}\n                </option>\n                {filteredProjects.map((project) => (\n                  <option key={project.id} value={project.id}>\n                    {project.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Selection summary */}\n          {selectedWorkspace && (\n            <div className=\"rounded-lg bg-bg-sunken p-4 space-y-2\">\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tr(\"auth.workspaceSelector.selected\", \"Selected:\")}\n              </p>\n              <div className=\"text-sm text-text-secondary space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-3\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                    />\n                  </svg>\n                  <span>{selectedWorkspace.name}</span>\n                </div>\n                {selectedProject && (\n                  <div className=\"flex items-center gap-2\">\n                    <svg\n                      className=\"size-3\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                      />\n                    </svg>\n                    <span>{selectedProject.name}</span>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-3 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleContinue}\n            disabled={!canContinue || isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isLoading\n              ? tr(\"auth.workspaceSelector.loading\", \"Loading...\")\n              : tr(\"auth.workspaceSelector.continue\", \"Continue\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/AuditLogPage.js

@@ -122,7 +122,7 @@ function p() {
 						className: "flex items-start gap-4",
 						children: [
 							/* @__PURE__ */ c("div", {
-								className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-muted text-xs font-semibold text-text-secondary",
+								className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-semibold text-text-secondary",
 								"aria-hidden": "true",
 								children: k(e.action)
 							}),

package/dist/auth/pages/AuditLogPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuditLogPage.js","names":[],"sources":["../../../src/auth/pages/AuditLogPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\nimport { useFeatureFlagDetails } from \"@burdenoff/fe-libs/shared/feature-flags\";\nimport { formatDateTime } from \"../utils/formatters\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  useAuthAuditLogsQuery,\n  type AuditLogEntry_AuthAuditLogFragment,\n} from \"../../generated/global-operations\";\nimport { useCreateAuthExportJobMutation } from \"../../generated/wspace-operations\";\n\nconst PAGE_SIZE = 20;\n\n/**\n * Security audit log page with pagination and export\n *\n * Fragment: AuditLogEntry_AuthAuditLog (graphql/operations/global/fragments/AuditLogEntry.fragment.graphql)\n * Query: AuthAuditLogs (graphql/operations/global/queries/auditLog.graphql)\n *\n * TODO: When authAuditLogs backend migrates to AuthAuditLogConnection type,\n *   update this query to use: authAuditLogs { auditLogs: [...], totalCount, hasMore }\n *   and remove the client-side hasMore approximation below.\n */\nexport function AuditLogPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const [page, setPage] = useState(1);\n  const offset = (page - 1) * PAGE_SIZE;\n\n  // Default-deny: only show when the flag is explicitly enabled in the system.\n  // useFeatureFlag uses default-allow (returns true when not found), so we use\n  // useFeatureFlagDetails + explicit value check instead.\n  const auditLogFlag = useFeatureFlagDetails(\"auth.audit-log\");\n  const showAuditLog = auditLogFlag?.value === true;\n\n  const { data, loading, error } = useAuthAuditLogsQuery({\n    skip: !showAuditLog,\n    fetchPolicy: \"cache-and-network\",\n    variables: { pagination: { limit: PAGE_SIZE, offset } },\n  });\n\n  const auditLogs = data?.authAuditLogs ?? [];\n  // Approximate hasMore: if we received a full page there may be more\n  const hasMore = auditLogs.length === PAGE_SIZE;\n\n  const wspaceClient = useGatewayClient(\"workspace\");\n  const [createExportJob, { loading: isExporting }] =\n    useCreateAuthExportJobMutation({ client: wspaceClient });\n  const [exportError, setExportError] = useState<string | null>(null);\n\n  const handleExport = async () => {\n    setExportError(null);\n    try {\n      await createExportJob({\n        variables: {\n          input: {\n            name: \"Audit Log Export\",\n            // permission_audit_logs covers auth audit logs in the export system\n            entityTypes: [\"permission_audit_logs\"],\n            format: \"CSV\",\n            exportScope: \"INDIVIDUAL\",\n            includeMetadata: true,\n          },\n        },\n      });\n    } catch (err) {\n      setExportError(\n        err instanceof Error ? err.message : \"Failed to start export\",\n      );\n    }\n  };\n\n  const getEventMarker = (eventType: string) => {\n    switch (eventType) {\n      case \"LOGIN_SUCCESS\":\n        return \"OK\";\n      case \"LOGIN_FAILURE\":\n        return \"ER\";\n      case \"LOGOUT\":\n        return \"LO\";\n      case \"PASSWORD_CHANGE\":\n        return \"PW\";\n      case \"MFA_ENABLED\":\n      case \"MFA_VERIFIED\":\n        return \"MF\";\n      case \"ANOMALY_DETECTED\":\n        return \"AL\";\n      default:\n        return \"AU\";\n    }\n  };\n\n  if (!showAuditLog) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"size-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.auditLog.notAvailable\", \"Page Not Available\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.auditLog.notEnabled\",\n              \"The Security Audit Log is not enabled for your account.\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <h1 className=\"text-3xl font-semibold text-text-primary\">\n          {tr(\"auth.auditLog.title\", \"Security Audit Log\")}\n        </h1>\n        <button\n          type=\"button\"\n          onClick={() => void handleExport()}\n          disabled={isExporting}\n          aria-label={tr(\"auth.auditLog.exportAriaLabel\", \"Export audit log\")}\n          className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n        >\n          {isExporting ? (\n            <>\n              <SpinnerIcon className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n              {tr(\"auth.auditLog.exporting\", \"Exporting...\")}\n            </>\n          ) : (\n            <>\n              <svg\n                className=\"size-4\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                />\n              </svg>\n              {tr(\"auth.auditLog.export\", \"Export\")}\n            </>\n          )}\n        </button>\n      </div>\n\n      {/* Export error */}\n      {exportError && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"size-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"text-sm text-status-error-text\">{exportError}</p>\n        </div>\n      )}\n\n      {loading ? (\n        <div aria-live=\"polite\" aria-busy=\"true\" className=\"text-center py-12\">\n          <SpinnerIcon\n            className=\"size-8 mx-auto text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"mt-3 text-text-secondary\">\n            {tr(\"auth.auditLog.loading\", \"Loading audit events...\")}\n          </p>\n        </div>\n      ) : error ? (\n        <div\n          role=\"alert\"\n          className=\"text-center py-12 border border-status-error-border rounded-xl bg-status-error-bg-subtle\"\n        >\n          <p className=\"text-status-error-text\">\n            {tr(\"auth.auditLog.error\", \"Unable to load audit events\")}\n          </p>\n        </div>\n      ) : auditLogs.length === 0 ? (\n        <output className=\"block text-center py-12\">\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.auditLog.noEvents\", \"No security events recorded\")}\n          </p>\n        </output>\n      ) : (\n        <>\n          <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={loading}>\n            {auditLogs.map((event: AuditLogEntry_AuthAuditLogFragment) => (\n              <div\n                key={event.id}\n                className=\"p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-muted text-xs font-semibold text-text-secondary\"\n                    aria-hidden=\"true\"\n                  >\n                    {getEventMarker(event.action)}\n                  </div>\n                  <div className=\"flex-1\">\n                    <h3 className=\"text-lg font-medium text-text-primary mb-1\">\n                      {event.action.replace(/_/g, \" \")}\n                    </h3>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      <time dateTime={event.createdAt}>\n                        {formatDateTime(event.createdAt)}\n                      </time>\n                    </p>\n                    <p className=\"text-sm text-text-secondary\">\n                      {event.description ??\n                        tr(\n                          \"auth.auditLog.defaultDescription\",\n                          \"Authentication event\",\n                        )}\n                      {event.ipAddress && ` • ${event.ipAddress}`}\n                    </p>\n                  </div>\n                  {event.action.includes(\"FAILURE\") && (\n                    <output className=\"px-3 py-1 rounded-full bg-status-error-bg-subtle text-status-error-text text-sm font-medium\">\n                      {tr(\"auth.auditLog.failed\", \"Failed\")}\n                    </output>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Pagination */}\n          <nav\n            aria-label={tr(\n              \"auth.auditLog.paginationAriaLabel\",\n              \"Audit log pagination\",\n            )}\n            className=\"mt-6 flex items-center justify-between\"\n          >\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\"auth.auditLog.page\", \"Page\")} {page}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => Math.max(1, prev - 1))}\n                disabled={page === 1}\n                aria-label={tr(\n                  \"auth.auditLog.previousPageAriaLabel\",\n                  \"Go to previous page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.previous\", \"Previous\")}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => prev + 1)}\n                disabled={!hasMore}\n                aria-label={tr(\n                  \"auth.auditLog.nextPageAriaLabel\",\n                  \"Go to next page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.next\", \"Next\")}\n              </button>\n            </div>\n          </nav>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuditLogPage.js","names":[],"sources":["../../../src/auth/pages/AuditLogPage.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\nimport { useFeatureFlagDetails } from \"@burdenoff/fe-libs/shared/feature-flags\";\nimport { formatDateTime } from \"../utils/formatters\";\nimport { AlertIcon, SpinnerIcon } from \"../components/AuthIcons\";\nimport {\n  useAuthAuditLogsQuery,\n  type AuditLogEntry_AuthAuditLogFragment,\n} from \"../../generated/global-operations\";\nimport { useCreateAuthExportJobMutation } from \"../../generated/wspace-operations\";\n\nconst PAGE_SIZE = 20;\n\n/**\n * Security audit log page with pagination and export\n *\n * Fragment: AuditLogEntry_AuthAuditLog (graphql/operations/global/fragments/AuditLogEntry.fragment.graphql)\n * Query: AuthAuditLogs (graphql/operations/global/queries/auditLog.graphql)\n *\n * TODO: When authAuditLogs backend migrates to AuthAuditLogConnection type,\n *   update this query to use: authAuditLogs { auditLogs: [...], totalCount, hasMore }\n *   and remove the client-side hasMore approximation below.\n */\nexport function AuditLogPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const [page, setPage] = useState(1);\n  const offset = (page - 1) * PAGE_SIZE;\n\n  // Default-deny: only show when the flag is explicitly enabled in the system.\n  // useFeatureFlag uses default-allow (returns true when not found), so we use\n  // useFeatureFlagDetails + explicit value check instead.\n  const auditLogFlag = useFeatureFlagDetails(\"auth.audit-log\");\n  const showAuditLog = auditLogFlag?.value === true;\n\n  const { data, loading, error } = useAuthAuditLogsQuery({\n    skip: !showAuditLog,\n    fetchPolicy: \"cache-and-network\",\n    variables: { pagination: { limit: PAGE_SIZE, offset } },\n  });\n\n  const auditLogs = data?.authAuditLogs ?? [];\n  // Approximate hasMore: if we received a full page there may be more\n  const hasMore = auditLogs.length === PAGE_SIZE;\n\n  const wspaceClient = useGatewayClient(\"workspace\");\n  const [createExportJob, { loading: isExporting }] =\n    useCreateAuthExportJobMutation({ client: wspaceClient });\n  const [exportError, setExportError] = useState<string | null>(null);\n\n  const handleExport = async () => {\n    setExportError(null);\n    try {\n      await createExportJob({\n        variables: {\n          input: {\n            name: \"Audit Log Export\",\n            // permission_audit_logs covers auth audit logs in the export system\n            entityTypes: [\"permission_audit_logs\"],\n            format: \"CSV\",\n            exportScope: \"INDIVIDUAL\",\n            includeMetadata: true,\n          },\n        },\n      });\n    } catch (err) {\n      setExportError(\n        err instanceof Error ? err.message : \"Failed to start export\",\n      );\n    }\n  };\n\n  const getEventMarker = (eventType: string) => {\n    switch (eventType) {\n      case \"LOGIN_SUCCESS\":\n        return \"OK\";\n      case \"LOGIN_FAILURE\":\n        return \"ER\";\n      case \"LOGOUT\":\n        return \"LO\";\n      case \"PASSWORD_CHANGE\":\n        return \"PW\";\n      case \"MFA_ENABLED\":\n      case \"MFA_VERIFIED\":\n        return \"MF\";\n      case \"ANOMALY_DETECTED\":\n        return \"AL\";\n      default:\n        return \"AU\";\n    }\n  };\n\n  if (!showAuditLog) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"size-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.auditLog.notAvailable\", \"Page Not Available\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.auditLog.notEnabled\",\n              \"The Security Audit Log is not enabled for your account.\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <h1 className=\"text-3xl font-semibold text-text-primary\">\n          {tr(\"auth.auditLog.title\", \"Security Audit Log\")}\n        </h1>\n        <button\n          type=\"button\"\n          onClick={() => void handleExport()}\n          disabled={isExporting}\n          aria-label={tr(\"auth.auditLog.exportAriaLabel\", \"Export audit log\")}\n          className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium\"\n        >\n          {isExporting ? (\n            <>\n              <SpinnerIcon className=\"size-4 animate-spin\" aria-hidden=\"true\" />\n              {tr(\"auth.auditLog.exporting\", \"Exporting...\")}\n            </>\n          ) : (\n            <>\n              <svg\n                className=\"size-4\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                />\n              </svg>\n              {tr(\"auth.auditLog.export\", \"Export\")}\n            </>\n          )}\n        </button>\n      </div>\n\n      {/* Export error */}\n      {exportError && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"size-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"text-sm text-status-error-text\">{exportError}</p>\n        </div>\n      )}\n\n      {loading ? (\n        <div aria-live=\"polite\" aria-busy=\"true\" className=\"text-center py-12\">\n          <SpinnerIcon\n            className=\"size-8 mx-auto text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <p className=\"mt-3 text-text-secondary\">\n            {tr(\"auth.auditLog.loading\", \"Loading audit events...\")}\n          </p>\n        </div>\n      ) : error ? (\n        <div\n          role=\"alert\"\n          className=\"text-center py-12 border border-status-error-border rounded-xl bg-status-error-bg-subtle\"\n        >\n          <p className=\"text-status-error-text\">\n            {tr(\"auth.auditLog.error\", \"Unable to load audit events\")}\n          </p>\n        </div>\n      ) : auditLogs.length === 0 ? (\n        <output className=\"block text-center py-12\">\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.auditLog.noEvents\", \"No security events recorded\")}\n          </p>\n        </output>\n      ) : (\n        <>\n          <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={loading}>\n            {auditLogs.map((event: AuditLogEntry_AuthAuditLogFragment) => (\n              <div\n                key={event.id}\n                className=\"p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-bg-sunken text-xs font-semibold text-text-secondary\"\n                    aria-hidden=\"true\"\n                  >\n                    {getEventMarker(event.action)}\n                  </div>\n                  <div className=\"flex-1\">\n                    <h3 className=\"text-lg font-medium text-text-primary mb-1\">\n                      {event.action.replace(/_/g, \" \")}\n                    </h3>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      <time dateTime={event.createdAt}>\n                        {formatDateTime(event.createdAt)}\n                      </time>\n                    </p>\n                    <p className=\"text-sm text-text-secondary\">\n                      {event.description ??\n                        tr(\n                          \"auth.auditLog.defaultDescription\",\n                          \"Authentication event\",\n                        )}\n                      {event.ipAddress && ` • ${event.ipAddress}`}\n                    </p>\n                  </div>\n                  {event.action.includes(\"FAILURE\") && (\n                    <output className=\"px-3 py-1 rounded-full bg-status-error-bg-subtle text-status-error-text text-sm font-medium\">\n                      {tr(\"auth.auditLog.failed\", \"Failed\")}\n                    </output>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n\n          {/* Pagination */}\n          <nav\n            aria-label={tr(\n              \"auth.auditLog.paginationAriaLabel\",\n              \"Audit log pagination\",\n            )}\n            className=\"mt-6 flex items-center justify-between\"\n          >\n            <p className=\"text-sm text-text-secondary\">\n              {tr(\"auth.auditLog.page\", \"Page\")} {page}\n            </p>\n            <div className=\"flex gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => Math.max(1, prev - 1))}\n                disabled={page === 1}\n                aria-label={tr(\n                  \"auth.auditLog.previousPageAriaLabel\",\n                  \"Go to previous page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.previous\", \"Previous\")}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setPage((prev) => prev + 1)}\n                disabled={!hasMore}\n                aria-label={tr(\n                  \"auth.auditLog.nextPageAriaLabel\",\n                  \"Go to next page\",\n                )}\n                className=\"px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors\"\n              >\n                {tr(\"auth.auditLog.next\", \"Next\")}\n              </button>\n            </div>\n          </nav>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/SecurityPage.js

@@ -323,7 +323,7 @@ function v({ enableAdminRoutes: v = !1 }) {
 								className: "flex items-start gap-4",
 								children: [
 									/* @__PURE__ */ u("div", {
-										className: `size-12 rounded-xl ${e.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`,
+										className: `size-12 rounded-xl ${e.bgColor} flex items-center justify-center flex-shrink-0 transition-transform`,
 										children: /* @__PURE__ */ u(e.icon, { className: `size-6 ${e.color}` })
 									}),
 									/* @__PURE__ */ d("div", {
@@ -358,7 +358,7 @@ function v({ enableAdminRoutes: v = !1 }) {
 								className: "flex items-start gap-4",
 								children: [
 									/* @__PURE__ */ u("div", {
-										className: `size-12 rounded-xl ${e.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`,
+										className: `size-12 rounded-xl ${e.bgColor} flex items-center justify-center flex-shrink-0 transition-transform`,
 										children: /* @__PURE__ */ u(e.icon, { className: `size-6 ${e.color}` })
 									}),
 									/* @__PURE__ */ d("div", {

package/dist/auth/pages/SecurityPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecurityPage.js","names":[],"sources":["../../../src/auth/pages/SecurityPage.tsx"],"sourcesContent":["import { useId, useRef, useEffect, useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { useAuthOperations } from \"../hooks/useAuthOperations\";\nimport { useAccountOperations } from \"../hooks/useAccountOperations\";\nimport { formatDate } from \"../utils/formatters\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n// Icons\nconst ShieldIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n    />\n  </svg>\n);\n\nconst LockIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n    />\n  </svg>\n);\n\n// Hidden — moved to Developer Portal\n// const KeyIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\n//       d=\"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z\" />\n//   </svg>\n// );\n\n// const DelegationIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\n//       d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" />\n//   </svg>\n// );\n\nconst UsersIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst UserProfileIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n    />\n  </svg>\n);\n\nconst LinkIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n    />\n  </svg>\n);\n\nconst ChevronRightIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 5l7 7-7 7\"\n    />\n  </svg>\n);\n\nconst CheckCircleIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ExclamationIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst SpinnerIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n);\n\ninterface NavItem {\n  name: string;\n  description: string;\n  path: string;\n  icon: React.FC<{ className?: string }>;\n  color: string;\n  bgColor: string;\n  adminOnly?: boolean;\n}\n\nconst DELETE_ACCOUNT_CONFIRMATION = \"DELETE MY ACCOUNT\";\n\n/**\n * Security Dashboard - Main hub for all authentication features\n */\nexport function SecurityPage({\n  // Admin-only nav cards (Users → `/auth/users`, SSO Configuration →\n  // `/auth/sso`) point at platform-global super-admin surfaces whose routes\n  // only exist when `enableAdminRoutes={true}` (admin app shell). In\n  // user-facing product hosts those routes dead-end on `/auth/login`, so the\n  // cards are hidden unless admin routes are enabled. Defaults to false.\n  enableAdminRoutes = false,\n}: {\n  enableAdminRoutes?: boolean;\n}) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigate = useNavigate();\n  const user = useAuthStore((state) => state.user);\n  const { signOut } = useAuthOperations({\n    disableCurrentUserQuery: true,\n  });\n  const { deactivateAccount, deleteAccount, isDeactivating, isDeleting } =\n    useAccountOperations();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [showLogoutDialog, setShowLogoutDialog] = useState(false);\n\n  const navigationItems: NavItem[] = [\n    {\n      name: tr(\"auth.security.navProfile\", \"User Profile\"),\n      description: tr(\n        \"auth.security.navProfileDesc\",\n        \"View and edit your profile information\",\n      ),\n      path: \"/auth/profile\",\n      icon: UserProfileIcon,\n      color: \"text-accent-teal\",\n      bgColor: \"bg-accent-teal-subtle\",\n    },\n    {\n      name: tr(\"auth.security.navMfa\", \"Two-Factor Authentication\"),\n      description: tr(\n        \"auth.security.navMfaDesc\",\n        \"Secure your account with TOTP\",\n      ),\n      path: \"/auth/mfa\",\n      icon: LockIcon,\n      color: \"text-accent-purple\",\n      bgColor: \"bg-accent-purple-subtle\",\n    },\n    // Hidden — moved to Developer Portal\n    // {\n    //   name: tr(\"auth.security.navApiKeys\", \"API Keys\"),\n    //   description: tr(\"auth.security.navApiKeysDesc\", \"Manage programmatic access tokens\"),\n    //   path: \"/auth/api-keys\",\n    //   icon: KeyIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    // {\n    //   name: tr(\"auth.security.navDelegations\", \"Delegations\"),\n    //   description: tr(\"auth.security.navDelegationsDesc\", \"Manage apps acting on your behalf\"),\n    //   path: \"/auth/delegations\",\n    //   icon: DelegationIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    {\n      name: tr(\"auth.security.navUsers\", \"Users\"),\n      description: tr(\"auth.security.navUsersDesc\", \"Manage system users\"),\n      path: \"/auth/users\",\n      icon: UsersIcon,\n      color: \"text-accent-indigo\",\n      bgColor: \"bg-accent-indigo-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  const quickActions = [\n    {\n      name: tr(\"auth.security.navSso\", \"SSO Configuration\"),\n      description: tr(\"auth.security.navSsoDesc\", \"Enterprise single sign-on\"),\n      path: \"/auth/sso\",\n      icon: LinkIcon,\n      color: \"text-accent-cyan\",\n      bgColor: \"bg-accent-cyan-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  // Account management modal states\n  const [showDeactivateModal, setShowDeactivateModal] = useState(false);\n  const [showDeleteModal, setShowDeleteModal] = useState(false);\n  const [accountPassword, setAccountPassword] = useState(\"\");\n  const [deleteConfirmPhrase, setDeleteConfirmPhrase] = useState(\"\");\n  const [accountError, setAccountError] = useState<string | null>(null);\n  const [accountSuccess, setAccountSuccess] = useState<string | null>(null);\n\n  // Accessible IDs for modal labels and form fields\n  const deactivateTitleId = useId();\n  const deactivatePasswordId = useId();\n  const deactivateErrorId = useId();\n  const deleteTitleId = useId();\n  const deletePasswordId = useId();\n  const deleteConfirmId = useId();\n  const deleteErrorId = useId();\n\n  // Focus management: refs to restore focus and manage modal focus\n  const deactivateTriggerRef = useRef<HTMLButtonElement>(null);\n  const deleteTriggerRef = useRef<HTMLButtonElement>(null);\n  const deactivateDialogRef = useRef<HTMLDivElement>(null);\n  const deleteDialogRef = useRef<HTMLDivElement>(null);\n\n  // Move focus into modal when it opens; restore to trigger on close\n  useEffect(() => {\n    if (showDeactivateModal) {\n      deactivateDialogRef.current?.focus();\n    } else {\n      deactivateTriggerRef.current?.focus();\n    }\n  }, [showDeactivateModal]);\n\n  useEffect(() => {\n    if (showDeleteModal) {\n      deleteDialogRef.current?.focus();\n    } else {\n      deleteTriggerRef.current?.focus();\n    }\n  }, [showDeleteModal]);\n\n  const handleLogout = async () => {\n    setIsLoggingOut(true);\n    try {\n      await signOut();\n      navigate(\"/auth/login\");\n      setShowLogoutDialog(false);\n    } catch (error) {\n      console.error(\"Logout failed:\", error);\n      setIsLoggingOut(false);\n    }\n  };\n\n  const handleDeactivateAccount = async () => {\n    setAccountError(null);\n    try {\n      const result = await deactivateAccount(accountPassword);\n      if (result.success) {\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        setAccountError(\n          result.message ||\n            tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n        );\n      }\n    } catch (error) {\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n      );\n    }\n  };\n\n  const handleDeleteAccount = async () => {\n    setAccountError(null);\n    if (deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION) {\n      setAccountError(\n        tr(\n          \"auth.security.deleteConfirmMismatch\",\n          'Please type \"DELETE MY ACCOUNT\" to confirm',\n        ),\n      );\n      return;\n    }\n    void nativeImpact(\"medium\");\n    try {\n      const result = await deleteAccount(accountPassword, deleteConfirmPhrase);\n      if (result.success) {\n        void nativeNotify(\"success\");\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        void nativeNotify(\"error\");\n        setAccountError(\n          result.message ||\n            tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n        );\n      }\n    } catch (error) {\n      void nativeNotify(\"error\");\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n      );\n    }\n  };\n\n  const closeModals = () => {\n    setShowDeactivateModal(false);\n    setShowDeleteModal(false);\n    setAccountPassword(\"\");\n    setDeleteConfirmPhrase(\"\");\n    setAccountError(null);\n    setAccountSuccess(null);\n  };\n\n  const isAdmin =\n    user?.role === \"SUPER_ADMIN\" ||\n    user?.role === \"TENANT_ADMIN\" ||\n    user?.role === \"ORG_ADMIN\";\n  const filteredNavItems = navigationItems.filter(\n    (item) => !item.adminOnly || (enableAdminRoutes && isAdmin),\n  );\n  const filteredQuickActions = quickActions.filter(\n    (item) => !item.adminOnly || (enableAdminRoutes && isAdmin),\n  );\n\n  return (\n    <div className=\"bg-bg-canvas p-6\">\n      <ConfirmActionDialog\n        open={showLogoutDialog}\n        onOpenChange={setShowLogoutDialog}\n        title={tr(\"auth.security.signOutDialogTitle\", \"Sign out now?\")}\n        description={tr(\n          \"auth.security.signOutDialogDescription\",\n          \"You will be signed out of this device and returned to the login screen.\",\n        )}\n        confirmText={tr(\"auth.security.signOutDialogConfirm\", \"Sign out\")}\n        variant=\"warning\"\n        isPending={isLoggingOut}\n        onConfirm={handleLogout}\n      />\n      <main className=\"max-w-7xl mx-auto space-y-8\">\n        <div\n          className=\"flex items-center gap-3\"\n          data-tour=\"auth-security-header\"\n        >\n          <div className=\"auth-brand-badge flex size-10 items-center justify-center rounded-xl\">\n            <ShieldIcon className=\"size-6 text-white\" />\n          </div>\n          <div>\n            <h1 className=\"text-lg font-bold text-text-primary\">\n              {tr(\"auth.security.title\", \"Security Center\")}\n            </h1>\n            <p className=\"text-xs text-text-secondary \">\n              {tr(\"auth.security.subtitle\", \"Account & Authentication\")}\n            </p>\n          </div>\n        </div>\n\n        {/* Security Status Banner */}\n        <div\n          className=\"auth-hero-card rounded-2xl p-6\"\n          data-tour=\"auth-security-status-banner\"\n        >\n          <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"size-14 rounded-2xl bg-bg-surface/20 backdrop-blur flex items-center justify-center\">\n                <ShieldIcon className=\"size-8 text-white\" />\n              </div>\n              <div>\n                <h2 className=\"text-xl font-bold\">\n                  {tr(\"auth.security.securityStatus\", \"Security Status\")}\n                </h2>\n                <p className=\"opacity-80\">\n                  {user?.mfaEnabled\n                    ? tr(\n                        \"auth.security.wellProtected\",\n                        \"Your account is well protected\",\n                      )\n                    : tr(\n                        \"auth.security.enableMfaSuggestion\",\n                        \"Enable MFA for better security\",\n                      )}\n                </p>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-3\">\n              {user?.mfaEnabled ? (\n                <span className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface/20 backdrop-blur text-white font-medium\">\n                  <CheckCircleIcon className=\"size-5 text-status-success-text\" />\n                  {tr(\"auth.security.mfaEnabled\", \"MFA Enabled\")}\n                </span>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(\"/auth/mfa\")}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface text-text-link font-semibold hover:bg-status-info-bg-subtle transition-colors shadow-lg\"\n                >\n                  <ExclamationIcon className=\"size-5 text-status-warning-text\" />\n                  {tr(\"auth.security.enableMfaNow\", \"Enable MFA Now\")}\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Account Information Card */}\n        <div\n          className=\"mb-8 p-6 rounded-2xl bg-bg-surface border border-border-subtle shadow-sm\"\n          data-tour=\"auth-account-info-card\"\n        >\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.accountInfo\", \"Account Information\")}\n          </h3>\n          <dl className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n            <div className=\"sm:col-span-2 lg:col-span-1\">\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.email\", \"Email\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                <span className=\"block truncate\" title={user?.email}>\n                  {user?.email}\n                </span>\n                {user?.emailVerified && (\n                  <span className=\"mt-1 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\">\n                    <CheckCircleIcon className=\"size-3\" />\n                    {tr(\"auth.security.verified\", \"Verified\")}\n                  </span>\n                )}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.username\", \"Username\")}\n              </dt>\n              <dd\n                className=\"mt-1 text-text-primary truncate\"\n                title={user?.username ?? undefined}\n              >\n                {user?.username || \"-\"}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.role\", \"Role\")}\n              </dt>\n              <dd className=\"mt-1\">\n                <span className=\"inline-flex px-2.5 py-0.5 rounded-full bg-accent-indigo-subtle text-accent-indigo text-xs font-medium\">\n                  {user?.role || \"USER\"}\n                </span>\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.memberSince\", \"Member Since\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                {user?.createdAt ? formatDate(user.createdAt) : \"-\"}\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        {/* Main Navigation Grid */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.securityAuth\", \"Security & Authentication\")}\n          </h3>\n          <div\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n            data-tour=\"auth-security-nav-grid\"\n          >\n            {filteredNavItems.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`size-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`}\n                  >\n                    <item.icon className={`size-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"size-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Quick Actions */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.quickActions\", \"Quick Actions\")}\n          </h3>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            {filteredQuickActions.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`size-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`}\n                  >\n                    <item.icon className={`size-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"size-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Password & Danger Zone */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Password Section */}\n          <div\n            className=\"p-6 rounded-2xl bg-bg-surface border border-border-subtle\"\n            data-tour=\"auth-password-section\"\n          >\n            <div className=\"flex items-start justify-between\">\n              <div>\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {tr(\"auth.security.password\", \"Password\")}\n                </h3>\n                <p className=\"mt-1 text-sm text-text-secondary \">\n                  {tr(\n                    \"auth.security.updatePassword\",\n                    \"Update your password to keep your account secure\",\n                  )}\n                </p>\n                <p className=\"mt-2 text-xs text-text-tertiary \">\n                  {tr(\"auth.security.lastChanged\", \"Last changed: Never\")}\n                </p>\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate(\"/auth/reset-password\")}\n              className=\"auth-primary-button mt-4 w-full px-5 py-2.5 font-semibold sm:w-auto\"\n            >\n              {tr(\"auth.security.changePassword\", \"Change Password\")}\n            </button>\n          </div>\n\n          {/* Danger Zone */}\n          <div\n            className=\"p-6 rounded-2xl bg-status-error-bg-subtle border border-status-error-border\"\n            data-tour=\"auth-danger-zone\"\n          >\n            <h3 className=\"text-lg font-semibold text-status-error-text\">\n              {tr(\"auth.security.dangerZone\", \"Danger Zone\")}\n            </h3>\n            <p className=\"mt-1 text-sm text-status-error-text/80\">\n              {tr(\n                \"auth.security.dangerWarning\",\n                \"These actions affect your account. Proceed with caution.\",\n              )}\n            </p>\n            <div className=\"mt-4 flex flex-wrap gap-3\">\n              <button\n                ref={deactivateTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeactivateModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-warning-border text-status-warning-text font-semibold hover:bg-status-warning-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deactivateAccount\", \"Deactivate Account\")}\n              </button>\n              <button\n                ref={deleteTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeleteModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-error-border text-status-error-text font-semibold hover:bg-status-error-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deleteAccount\", \"Delete Account\")}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Deactivate Account Modal */}\n        {showDeactivateModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deactivateDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deactivateTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deactivateTitleId}\n                className=\"text-xl font-bold text-text-primary mb-2\"\n              >\n                {tr(\"auth.security.deactivateTitle\", \"Deactivate Account\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deactivateDesc\",\n                  \"Your account will be temporarily disabled. You can reactivate it by signing in again with your credentials.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deactivateErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <output className=\"block mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\">\n                  {accountSuccess}\n                </output>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deactivatePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordConfirm\",\n                    \"Enter your password to confirm\",\n                  )}\n                </label>\n                <input\n                  id={deactivatePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-label={tr(\n                    \"auth.security.enterPasswordConfirm\",\n                    \"Enter your password to confirm\",\n                  )}\n                  aria-describedby={\n                    accountError ? deactivateErrorId : undefined\n                  }\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-warning-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeactivateAccount()}\n                  disabled={!accountPassword || isDeactivating}\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-warning-bg text-white font-medium hover:bg-status-warning-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeactivating && (\n                    <SpinnerIcon className=\"size-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deactivateBtn\", \"Deactivate\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Delete Account Modal */}\n        {showDeleteModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deleteDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deleteTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deleteTitleId}\n                className=\"text-xl font-bold text-status-error-text mb-2\"\n              >\n                {tr(\"auth.security.deleteTitle\", \"Delete Account Permanently\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deleteDesc\",\n                  \"This action is irreversible. All your data will be permanently deleted and cannot be recovered.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deleteErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <output className=\"block mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\">\n                  {accountSuccess}\n                </output>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deletePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordDelete\",\n                    \"Enter your password\",\n                  )}\n                </label>\n                <input\n                  id={deletePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-label={tr(\n                    \"auth.security.enterPasswordDelete\",\n                    \"Enter your password\",\n                  )}\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deleteConfirmId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\"auth.security.type\", \"Type\")}{\" \"}\n                  <code className=\"px-1 py-0.5 rounded bg-bg-sunken text-status-error-text font-mono text-sm\">\n                    {DELETE_ACCOUNT_CONFIRMATION}\n                  </code>{\" \"}\n                  {tr(\"auth.security.toConfirm\", \"to confirm\")}\n                </label>\n                <input\n                  id={deleteConfirmId}\n                  type=\"text\"\n                  value={deleteConfirmPhrase}\n                  onChange={(e) => setDeleteConfirmPhrase(e.target.value)}\n                  aria-required=\"true\"\n                  aria-label={tr(\n                    \"auth.security.deleteConfirmAriaLabel\",\n                    \"Type DELETE MY ACCOUNT to confirm\",\n                  )}\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={\n                    deleteConfirmPhrase.length > 0 &&\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION\n                  }\n                  autoComplete=\"off\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent font-mono\"\n                  placeholder={tr(\n                    \"auth.security.deleteConfirmPlaceholder\",\n                    \"DELETE MY ACCOUNT\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeleteAccount()}\n                  disabled={\n                    !accountPassword ||\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION ||\n                    isDeleting\n                  }\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeleting && (\n                    <SpinnerIcon className=\"size-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deleteForever\", \"Delete Forever\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Footer */}\n        <footer className=\"mt-12 pt-6 border-t border-border-subtle \">\n          <div\n            className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm text-text-secondary \"\n            data-tour=\"auth-footer-actions\"\n          >\n            <p>\n              {tr(\"auth.security.signedInAs\", \"Signed in as\")}{\" \"}\n              <span className=\"font-medium text-text-primary \">\n                {user?.email}\n              </span>\n            </p>\n            <div className=\"flex items-center gap-4\">\n              <button\n                type=\"button\"\n                onClick={() => navigate(\"/auth/login\")}\n                className=\"hover:text-text-primary transition-colors\"\n              >\n                {tr(\"auth.security.switchAccount\", \"Switch Account\")}\n              </button>\n              <span className=\"text-text-muted\" aria-hidden=\"true\">\n                |\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setShowLogoutDialog(true)}\n                className=\"hover:text-status-error-text transition-colors\"\n              >\n                {tr(\"auth.security.signOut\", \"Sign Out\")}\n              </button>\n            </div>\n          </div>\n        </footer>\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SecurityPage.js","names":[],"sources":["../../../src/auth/pages/SecurityPage.tsx"],"sourcesContent":["import { useId, useRef, useEffect, useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { useAuthOperations } from \"../hooks/useAuthOperations\";\nimport { useAccountOperations } from \"../hooks/useAccountOperations\";\nimport { formatDate } from \"../utils/formatters\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n// Icons\nconst ShieldIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n    />\n  </svg>\n);\n\nconst LockIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n    />\n  </svg>\n);\n\n// Hidden — moved to Developer Portal\n// const KeyIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\n//       d=\"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z\" />\n//   </svg>\n// );\n\n// const DelegationIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\n//       d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" />\n//   </svg>\n// );\n\nconst UsersIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst UserProfileIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n    />\n  </svg>\n);\n\nconst LinkIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n    />\n  </svg>\n);\n\nconst ChevronRightIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 5l7 7-7 7\"\n    />\n  </svg>\n);\n\nconst CheckCircleIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ExclamationIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst SpinnerIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n);\n\ninterface NavItem {\n  name: string;\n  description: string;\n  path: string;\n  icon: React.FC<{ className?: string }>;\n  color: string;\n  bgColor: string;\n  adminOnly?: boolean;\n}\n\nconst DELETE_ACCOUNT_CONFIRMATION = \"DELETE MY ACCOUNT\";\n\n/**\n * Security Dashboard - Main hub for all authentication features\n */\nexport function SecurityPage({\n  // Admin-only nav cards (Users → `/auth/users`, SSO Configuration →\n  // `/auth/sso`) point at platform-global super-admin surfaces whose routes\n  // only exist when `enableAdminRoutes={true}` (admin app shell). In\n  // user-facing product hosts those routes dead-end on `/auth/login`, so the\n  // cards are hidden unless admin routes are enabled. Defaults to false.\n  enableAdminRoutes = false,\n}: {\n  enableAdminRoutes?: boolean;\n}) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigate = useNavigate();\n  const user = useAuthStore((state) => state.user);\n  const { signOut } = useAuthOperations({\n    disableCurrentUserQuery: true,\n  });\n  const { deactivateAccount, deleteAccount, isDeactivating, isDeleting } =\n    useAccountOperations();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [showLogoutDialog, setShowLogoutDialog] = useState(false);\n\n  const navigationItems: NavItem[] = [\n    {\n      name: tr(\"auth.security.navProfile\", \"User Profile\"),\n      description: tr(\n        \"auth.security.navProfileDesc\",\n        \"View and edit your profile information\",\n      ),\n      path: \"/auth/profile\",\n      icon: UserProfileIcon,\n      color: \"text-accent-teal\",\n      bgColor: \"bg-accent-teal-subtle\",\n    },\n    {\n      name: tr(\"auth.security.navMfa\", \"Two-Factor Authentication\"),\n      description: tr(\n        \"auth.security.navMfaDesc\",\n        \"Secure your account with TOTP\",\n      ),\n      path: \"/auth/mfa\",\n      icon: LockIcon,\n      color: \"text-accent-purple\",\n      bgColor: \"bg-accent-purple-subtle\",\n    },\n    // Hidden — moved to Developer Portal\n    // {\n    //   name: tr(\"auth.security.navApiKeys\", \"API Keys\"),\n    //   description: tr(\"auth.security.navApiKeysDesc\", \"Manage programmatic access tokens\"),\n    //   path: \"/auth/api-keys\",\n    //   icon: KeyIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    // {\n    //   name: tr(\"auth.security.navDelegations\", \"Delegations\"),\n    //   description: tr(\"auth.security.navDelegationsDesc\", \"Manage apps acting on your behalf\"),\n    //   path: \"/auth/delegations\",\n    //   icon: DelegationIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    {\n      name: tr(\"auth.security.navUsers\", \"Users\"),\n      description: tr(\"auth.security.navUsersDesc\", \"Manage system users\"),\n      path: \"/auth/users\",\n      icon: UsersIcon,\n      color: \"text-accent-indigo\",\n      bgColor: \"bg-accent-indigo-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  const quickActions = [\n    {\n      name: tr(\"auth.security.navSso\", \"SSO Configuration\"),\n      description: tr(\"auth.security.navSsoDesc\", \"Enterprise single sign-on\"),\n      path: \"/auth/sso\",\n      icon: LinkIcon,\n      color: \"text-accent-cyan\",\n      bgColor: \"bg-accent-cyan-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  // Account management modal states\n  const [showDeactivateModal, setShowDeactivateModal] = useState(false);\n  const [showDeleteModal, setShowDeleteModal] = useState(false);\n  const [accountPassword, setAccountPassword] = useState(\"\");\n  const [deleteConfirmPhrase, setDeleteConfirmPhrase] = useState(\"\");\n  const [accountError, setAccountError] = useState<string | null>(null);\n  const [accountSuccess, setAccountSuccess] = useState<string | null>(null);\n\n  // Accessible IDs for modal labels and form fields\n  const deactivateTitleId = useId();\n  const deactivatePasswordId = useId();\n  const deactivateErrorId = useId();\n  const deleteTitleId = useId();\n  const deletePasswordId = useId();\n  const deleteConfirmId = useId();\n  const deleteErrorId = useId();\n\n  // Focus management: refs to restore focus and manage modal focus\n  const deactivateTriggerRef = useRef<HTMLButtonElement>(null);\n  const deleteTriggerRef = useRef<HTMLButtonElement>(null);\n  const deactivateDialogRef = useRef<HTMLDivElement>(null);\n  const deleteDialogRef = useRef<HTMLDivElement>(null);\n\n  // Move focus into modal when it opens; restore to trigger on close\n  useEffect(() => {\n    if (showDeactivateModal) {\n      deactivateDialogRef.current?.focus();\n    } else {\n      deactivateTriggerRef.current?.focus();\n    }\n  }, [showDeactivateModal]);\n\n  useEffect(() => {\n    if (showDeleteModal) {\n      deleteDialogRef.current?.focus();\n    } else {\n      deleteTriggerRef.current?.focus();\n    }\n  }, [showDeleteModal]);\n\n  const handleLogout = async () => {\n    setIsLoggingOut(true);\n    try {\n      await signOut();\n      navigate(\"/auth/login\");\n      setShowLogoutDialog(false);\n    } catch (error) {\n      console.error(\"Logout failed:\", error);\n      setIsLoggingOut(false);\n    }\n  };\n\n  const handleDeactivateAccount = async () => {\n    setAccountError(null);\n    try {\n      const result = await deactivateAccount(accountPassword);\n      if (result.success) {\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        setAccountError(\n          result.message ||\n            tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n        );\n      }\n    } catch (error) {\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n      );\n    }\n  };\n\n  const handleDeleteAccount = async () => {\n    setAccountError(null);\n    if (deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION) {\n      setAccountError(\n        tr(\n          \"auth.security.deleteConfirmMismatch\",\n          'Please type \"DELETE MY ACCOUNT\" to confirm',\n        ),\n      );\n      return;\n    }\n    void nativeImpact(\"medium\");\n    try {\n      const result = await deleteAccount(accountPassword, deleteConfirmPhrase);\n      if (result.success) {\n        void nativeNotify(\"success\");\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        void nativeNotify(\"error\");\n        setAccountError(\n          result.message ||\n            tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n        );\n      }\n    } catch (error) {\n      void nativeNotify(\"error\");\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n      );\n    }\n  };\n\n  const closeModals = () => {\n    setShowDeactivateModal(false);\n    setShowDeleteModal(false);\n    setAccountPassword(\"\");\n    setDeleteConfirmPhrase(\"\");\n    setAccountError(null);\n    setAccountSuccess(null);\n  };\n\n  const isAdmin =\n    user?.role === \"SUPER_ADMIN\" ||\n    user?.role === \"TENANT_ADMIN\" ||\n    user?.role === \"ORG_ADMIN\";\n  const filteredNavItems = navigationItems.filter(\n    (item) => !item.adminOnly || (enableAdminRoutes && isAdmin),\n  );\n  const filteredQuickActions = quickActions.filter(\n    (item) => !item.adminOnly || (enableAdminRoutes && isAdmin),\n  );\n\n  return (\n    <div className=\"bg-bg-canvas p-6\">\n      <ConfirmActionDialog\n        open={showLogoutDialog}\n        onOpenChange={setShowLogoutDialog}\n        title={tr(\"auth.security.signOutDialogTitle\", \"Sign out now?\")}\n        description={tr(\n          \"auth.security.signOutDialogDescription\",\n          \"You will be signed out of this device and returned to the login screen.\",\n        )}\n        confirmText={tr(\"auth.security.signOutDialogConfirm\", \"Sign out\")}\n        variant=\"warning\"\n        isPending={isLoggingOut}\n        onConfirm={handleLogout}\n      />\n      <main className=\"max-w-7xl mx-auto space-y-8\">\n        <div\n          className=\"flex items-center gap-3\"\n          data-tour=\"auth-security-header\"\n        >\n          <div className=\"auth-brand-badge flex size-10 items-center justify-center rounded-xl\">\n            <ShieldIcon className=\"size-6 text-white\" />\n          </div>\n          <div>\n            <h1 className=\"text-lg font-bold text-text-primary\">\n              {tr(\"auth.security.title\", \"Security Center\")}\n            </h1>\n            <p className=\"text-xs text-text-secondary \">\n              {tr(\"auth.security.subtitle\", \"Account & Authentication\")}\n            </p>\n          </div>\n        </div>\n\n        {/* Security Status Banner */}\n        <div\n          className=\"auth-hero-card rounded-2xl p-6\"\n          data-tour=\"auth-security-status-banner\"\n        >\n          <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"size-14 rounded-2xl bg-bg-surface/20 backdrop-blur flex items-center justify-center\">\n                <ShieldIcon className=\"size-8 text-white\" />\n              </div>\n              <div>\n                <h2 className=\"text-xl font-bold\">\n                  {tr(\"auth.security.securityStatus\", \"Security Status\")}\n                </h2>\n                <p className=\"opacity-80\">\n                  {user?.mfaEnabled\n                    ? tr(\n                        \"auth.security.wellProtected\",\n                        \"Your account is well protected\",\n                      )\n                    : tr(\n                        \"auth.security.enableMfaSuggestion\",\n                        \"Enable MFA for better security\",\n                      )}\n                </p>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-3\">\n              {user?.mfaEnabled ? (\n                <span className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface/20 backdrop-blur text-white font-medium\">\n                  <CheckCircleIcon className=\"size-5 text-status-success-text\" />\n                  {tr(\"auth.security.mfaEnabled\", \"MFA Enabled\")}\n                </span>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(\"/auth/mfa\")}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface text-text-link font-semibold hover:bg-status-info-bg-subtle transition-colors shadow-lg\"\n                >\n                  <ExclamationIcon className=\"size-5 text-status-warning-text\" />\n                  {tr(\"auth.security.enableMfaNow\", \"Enable MFA Now\")}\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Account Information Card */}\n        <div\n          className=\"mb-8 p-6 rounded-2xl bg-bg-surface border border-border-subtle shadow-sm\"\n          data-tour=\"auth-account-info-card\"\n        >\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.accountInfo\", \"Account Information\")}\n          </h3>\n          <dl className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n            <div className=\"sm:col-span-2 lg:col-span-1\">\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.email\", \"Email\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                <span className=\"block truncate\" title={user?.email}>\n                  {user?.email}\n                </span>\n                {user?.emailVerified && (\n                  <span className=\"mt-1 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\">\n                    <CheckCircleIcon className=\"size-3\" />\n                    {tr(\"auth.security.verified\", \"Verified\")}\n                  </span>\n                )}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.username\", \"Username\")}\n              </dt>\n              <dd\n                className=\"mt-1 text-text-primary truncate\"\n                title={user?.username ?? undefined}\n              >\n                {user?.username || \"-\"}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.role\", \"Role\")}\n              </dt>\n              <dd className=\"mt-1\">\n                <span className=\"inline-flex px-2.5 py-0.5 rounded-full bg-accent-indigo-subtle text-accent-indigo text-xs font-medium\">\n                  {user?.role || \"USER\"}\n                </span>\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.memberSince\", \"Member Since\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                {user?.createdAt ? formatDate(user.createdAt) : \"-\"}\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        {/* Main Navigation Grid */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.securityAuth\", \"Security & Authentication\")}\n          </h3>\n          <div\n            className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"\n            data-tour=\"auth-security-nav-grid\"\n          >\n            {filteredNavItems.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`size-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform`}\n                  >\n                    <item.icon className={`size-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"size-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Quick Actions */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.quickActions\", \"Quick Actions\")}\n          </h3>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            {filteredQuickActions.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`size-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform`}\n                  >\n                    <item.icon className={`size-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"size-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Password & Danger Zone */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Password Section */}\n          <div\n            className=\"p-6 rounded-2xl bg-bg-surface border border-border-subtle\"\n            data-tour=\"auth-password-section\"\n          >\n            <div className=\"flex items-start justify-between\">\n              <div>\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {tr(\"auth.security.password\", \"Password\")}\n                </h3>\n                <p className=\"mt-1 text-sm text-text-secondary \">\n                  {tr(\n                    \"auth.security.updatePassword\",\n                    \"Update your password to keep your account secure\",\n                  )}\n                </p>\n                <p className=\"mt-2 text-xs text-text-tertiary \">\n                  {tr(\"auth.security.lastChanged\", \"Last changed: Never\")}\n                </p>\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate(\"/auth/reset-password\")}\n              className=\"auth-primary-button mt-4 w-full px-5 py-2.5 font-semibold sm:w-auto\"\n            >\n              {tr(\"auth.security.changePassword\", \"Change Password\")}\n            </button>\n          </div>\n\n          {/* Danger Zone */}\n          <div\n            className=\"p-6 rounded-2xl bg-status-error-bg-subtle border border-status-error-border\"\n            data-tour=\"auth-danger-zone\"\n          >\n            <h3 className=\"text-lg font-semibold text-status-error-text\">\n              {tr(\"auth.security.dangerZone\", \"Danger Zone\")}\n            </h3>\n            <p className=\"mt-1 text-sm text-status-error-text/80\">\n              {tr(\n                \"auth.security.dangerWarning\",\n                \"These actions affect your account. Proceed with caution.\",\n              )}\n            </p>\n            <div className=\"mt-4 flex flex-wrap gap-3\">\n              <button\n                ref={deactivateTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeactivateModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-warning-border text-status-warning-text font-semibold hover:bg-status-warning-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deactivateAccount\", \"Deactivate Account\")}\n              </button>\n              <button\n                ref={deleteTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeleteModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-error-border text-status-error-text font-semibold hover:bg-status-error-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deleteAccount\", \"Delete Account\")}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Deactivate Account Modal */}\n        {showDeactivateModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deactivateDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deactivateTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deactivateTitleId}\n                className=\"text-xl font-bold text-text-primary mb-2\"\n              >\n                {tr(\"auth.security.deactivateTitle\", \"Deactivate Account\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deactivateDesc\",\n                  \"Your account will be temporarily disabled. You can reactivate it by signing in again with your credentials.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deactivateErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <output className=\"block mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\">\n                  {accountSuccess}\n                </output>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deactivatePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordConfirm\",\n                    \"Enter your password to confirm\",\n                  )}\n                </label>\n                <input\n                  id={deactivatePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-label={tr(\n                    \"auth.security.enterPasswordConfirm\",\n                    \"Enter your password to confirm\",\n                  )}\n                  aria-describedby={\n                    accountError ? deactivateErrorId : undefined\n                  }\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-warning-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeactivateAccount()}\n                  disabled={!accountPassword || isDeactivating}\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-warning-bg text-white font-medium hover:bg-status-warning-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeactivating && (\n                    <SpinnerIcon className=\"size-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deactivateBtn\", \"Deactivate\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Delete Account Modal */}\n        {showDeleteModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deleteDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deleteTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deleteTitleId}\n                className=\"text-xl font-bold text-status-error-text mb-2\"\n              >\n                {tr(\"auth.security.deleteTitle\", \"Delete Account Permanently\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deleteDesc\",\n                  \"This action is irreversible. All your data will be permanently deleted and cannot be recovered.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deleteErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <output className=\"block mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\">\n                  {accountSuccess}\n                </output>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deletePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordDelete\",\n                    \"Enter your password\",\n                  )}\n                </label>\n                <input\n                  id={deletePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-label={tr(\n                    \"auth.security.enterPasswordDelete\",\n                    \"Enter your password\",\n                  )}\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deleteConfirmId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\"auth.security.type\", \"Type\")}{\" \"}\n                  <code className=\"px-1 py-0.5 rounded bg-bg-sunken text-status-error-text font-mono text-sm\">\n                    {DELETE_ACCOUNT_CONFIRMATION}\n                  </code>{\" \"}\n                  {tr(\"auth.security.toConfirm\", \"to confirm\")}\n                </label>\n                <input\n                  id={deleteConfirmId}\n                  type=\"text\"\n                  value={deleteConfirmPhrase}\n                  onChange={(e) => setDeleteConfirmPhrase(e.target.value)}\n                  aria-required=\"true\"\n                  aria-label={tr(\n                    \"auth.security.deleteConfirmAriaLabel\",\n                    \"Type DELETE MY ACCOUNT to confirm\",\n                  )}\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={\n                    deleteConfirmPhrase.length > 0 &&\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION\n                  }\n                  autoComplete=\"off\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent font-mono\"\n                  placeholder={tr(\n                    \"auth.security.deleteConfirmPlaceholder\",\n                    \"DELETE MY ACCOUNT\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeleteAccount()}\n                  disabled={\n                    !accountPassword ||\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION ||\n                    isDeleting\n                  }\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeleting && (\n                    <SpinnerIcon className=\"size-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deleteForever\", \"Delete Forever\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Footer */}\n        <footer className=\"mt-12 pt-6 border-t border-border-subtle \">\n          <div\n            className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm text-text-secondary \"\n            data-tour=\"auth-footer-actions\"\n          >\n            <p>\n              {tr(\"auth.security.signedInAs\", \"Signed in as\")}{\" \"}\n              <span className=\"font-medium text-text-primary \">\n                {user?.email}\n              </span>\n            </p>\n            <div className=\"flex items-center gap-4\">\n              <button\n                type=\"button\"\n                onClick={() => navigate(\"/auth/login\")}\n                className=\"hover:text-text-primary transition-colors\"\n              >\n                {tr(\"auth.security.switchAccount\", \"Switch Account\")}\n              </button>\n              <span className=\"text-text-muted\" aria-hidden=\"true\">\n                |\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setShowLogoutDialog(true)}\n                className=\"hover:text-status-error-text transition-colors\"\n              >\n                {tr(\"auth.security.signOut\", \"Sign Out\")}\n              </button>\n            </div>\n          </div>\n        </footer>\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/SessionsPage.js

@@ -143,7 +143,7 @@ function p() {
 			}) : E.length === 0 ? /* @__PURE__ */ f("output", {
 				className: "block text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 				children: [/* @__PURE__ */ d("div", {
-					className: "size-16 mx-auto mb-4 rounded-full bg-bg-muted flex items-center justify-center",
+					className: "size-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
 						className: "size-8 text-text-tertiary",
 						fill: "none",

package/dist/auth/pages/SessionsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionsPage.js","names":[],"sources":["../../../src/auth/pages/SessionsPage.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSessionOperations } from \"../hooks/useSessionOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport {\n  formatRelativeTime,\n  parseDeviceName,\n  parseBrowserName,\n} from \"../utils/formatters\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\n\n/**\n * Active sessions management page with professional UI\n *\n * Fragment: SessionCard_Session (src/operations/global/fragments/SessionCard.fragment.graphql)\n * Query: ActiveSessions (src/operations/global/queries/sessions.graphql)\n */\nexport function SessionsPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const {\n    activeSessions,\n    revokeSession,\n    revokeAllSessions,\n    isLoading,\n    page,\n    totalPages,\n    totalCount,\n    hasMore,\n    goToNextPage,\n    goToPrevPage,\n  } = useSessionOperations({ disableTokenInfoQuery: true, pageSize: 20 });\n\n  // One entry per device: keep the most-recently-active session for each device name\n  const dedupedSessions = useMemo(() => {\n    const byDevice = new Map<string, (typeof activeSessions)[number]>();\n    for (const s of activeSessions) {\n      const device = parseDeviceName(s.userAgent ?? \"\");\n      const existing = byDevice.get(device);\n      if (\n        !existing ||\n        new Date(s.lastActivityAt) > new Date(existing.lastActivityAt)\n      ) {\n        byDevice.set(device, s);\n      }\n    }\n    return [...byDevice.values()];\n  }, [activeSessions]);\n\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pendingSessionId, setPendingSessionId] = useState<string | null>(null);\n  const [showRevokeAllDialog, setShowRevokeAllDialog] = useState(false);\n\n  const handleRevokeSession = async (sessionId: string) => {\n    try {\n      await revokeSession(sessionId);\n      setSuccessMessage(\"Session revoked successfully\");\n      setPendingSessionId(null);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to revoke session\");\n    }\n  };\n\n  const handleRevokeAll = async () => {\n    try {\n      await revokeAllSessions();\n      setSuccessMessage(\"All other sessions have been revoked\");\n      setShowRevokeAllDialog(false);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : \"Failed to revoke all sessions\",\n      );\n    }\n  };\n\n  if (!isAuthenticated) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"size-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.sessions.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.sessions.signInToView\",\n              \"Please sign in to view your active sessions\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      <ConfirmActionDialog\n        open={pendingSessionId !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setPendingSessionId(null);\n          }\n        }}\n        title=\"Revoke this session?\"\n        description=\"The selected device will be signed out immediately and will need to authenticate again.\"\n        confirmText=\"Revoke session\"\n        variant=\"danger\"\n        isPending={isLoading}\n        onConfirm={async () => {\n          if (pendingSessionId) {\n            await handleRevokeSession(pendingSessionId);\n          }\n        }}\n      />\n      <ConfirmActionDialog\n        open={showRevokeAllDialog}\n        onOpenChange={setShowRevokeAllDialog}\n        title=\"Revoke every other session?\"\n        description=\"All devices except your current one will be signed out immediately.\"\n        confirmText=\"Revoke all other sessions\"\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleRevokeAll}\n      />\n\n      {/* Live regions for screen reader announcements */}\n      <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {successMessage}\n      </div>\n      <div\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n      >\n        {error}\n      </div>\n\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <div>\n          <h1 className=\"text-3xl font-semibold text-text-primary\">\n            {tr(\"auth.sessions.title\", \"Active Sessions\")}\n          </h1>\n          <p className=\"text-text-secondary mt-2\">\n            {tr(\"auth.sessions.sessionCount\", \"You have\")} {totalCount}{\" \"}\n            {tr(\n              totalCount !== 1\n                ? \"auth.sessions.sessionsPlural\"\n                : \"auth.sessions.sessionsSingular\",\n              totalCount !== 1 ? \"active sessions\" : \"active session\",\n            )}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Export button — commented out until wspace-export-svc is wired for auth_sessions\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            disabled={isExporting}\n            aria-label={tr(\n              \"auth.sessions.exportAriaLabel\",\n              \"Export sessions data\",\n            )}\n            className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200\"\n          >\n            {isExporting ? (\n              <>\n                <SpinnerIcon\n                  className=\"size-4 animate-spin\"\n                  aria-hidden=\"true\"\n                />\n                {tr(\"auth.sessions.exporting\", \"Exporting...\")}\n              </>\n            ) : (\n              <>\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                  />\n                </svg>\n                {tr(\"auth.sessions.export\", \"Export\")}\n              </>\n            )}\n          </button>\n          */}\n          {totalCount > 1 && (\n            <button\n              type=\"button\"\n              onClick={() => setShowRevokeAllDialog(true)}\n              className=\"px-4 py-2.5 rounded-xl border border-status-error-border text-status-error-text font-medium hover:bg-status-error-bg-subtle transition-colors duration-200\"\n            >\n              {tr(\"auth.sessions.revokeAll\", \"Revoke All Sessions\")}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <output className=\"block mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border\">\n          <p className=\"text-status-success-text\">{successMessage}</p>\n          <button\n            type=\"button\"\n            onClick={() => setSuccessMessage(null)}\n            className=\"mt-2 text-sm text-status-success-text hover:underline transition-colors duration-200\"\n          >\n            Dismiss\n          </button>\n        </output>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"size-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n            <button\n              type=\"button\"\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-status-error-text hover:underline transition-colors duration-200\"\n            >\n              Dismiss\n            </button>\n          </div>\n        </div>\n      )}\n\n      {isLoading ? (\n        <div\n          aria-live=\"polite\"\n          aria-busy=\"true\"\n          className=\"flex items-center justify-center py-12\"\n        >\n          <SpinnerIcon\n            className=\"size-8 text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"ml-3 text-text-secondary\">\n            {tr(\"auth.sessions.loading\", \"Loading sessions...\")}\n          </span>\n        </div>\n      ) : dedupedSessions.length === 0 ? (\n        <output className=\"block text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-bg-muted flex items-center justify-center\">\n            <svg\n              className=\"size-8 text-text-tertiary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n              />\n            </svg>\n          </div>\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.sessions.noSessions\", \"No active sessions found\")}\n          </p>\n        </output>\n      ) : (\n        <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={isLoading}>\n          {dedupedSessions.map((session) => (\n            <div\n              key={session.id}\n              className=\"p-6 rounded-xl border border-border-default bg-bg-surface shadow-sm hover:shadow-md transition-shadow\"\n            >\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-start gap-4\">\n                  {/* Device Icon */}\n                  <div\n                    className=\"size-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0\"\n                    aria-hidden=\"true\"\n                  >\n                    <svg\n                      className=\"size-6 text-text-link\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={1.5}\n                        d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                      />\n                    </svg>\n                  </div>\n\n                  <div className=\"flex-1\">\n                    <div className=\"flex items-center gap-3 mb-1\">\n                      <h3 className=\"text-lg font-semibold text-text-primary\">\n                        {session.isCurrent &&\n                        parseDeviceName(session.userAgent) === \"Unknown Device\"\n                          ? tr(\"auth.sessions.thisDevice\", \"This Device\")\n                          : parseDeviceName(session.userAgent)}\n                      </h3>\n                      {session.isCurrent && (\n                        <output className=\"px-2.5 py-1 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\">\n                          {tr(\n                            \"auth.sessions.currentSession\",\n                            \"Current Session\",\n                          )}\n                        </output>\n                      )}\n                    </div>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      {parseBrowserName(session.userAgent) ===\n                        \"Unknown Browser\" && session.isCurrent\n                        ? tr(\"auth.sessions.currentBrowser\", \"Current Browser\")\n                        : parseBrowserName(session.userAgent)}\n                    </p>\n                    <dl className=\"flex flex-wrap gap-4 text-sm text-text-secondary\">\n                      {session.ipAddress && session.ipAddress !== \"unknown\" && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"size-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">IP address</dt>\n                          <dd>{session.ipAddress}</dd>\n                        </div>\n                      )}\n                      {session.location && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"size-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n                            />\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">Location</dt>\n                          <dd>{session.location}</dd>\n                        </div>\n                      )}\n                      <div className=\"flex items-center gap-1.5\">\n                        <svg\n                          className=\"size-4\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                          aria-hidden=\"true\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n                          />\n                        </svg>\n                        <dt className=\"sr-only\">Last active</dt>\n                        <dd>\n                          {tr(\"auth.sessions.lastActive\", \"Last active\")}{\" \"}\n                          {formatRelativeTime(session.lastActivityAt)}\n                        </dd>\n                      </div>\n                    </dl>\n                  </div>\n                </div>\n\n                {!session.isCurrent && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setPendingSessionId(session.id)}\n                    aria-label={`${tr(\"auth.sessions.revoke\", \"Revoke\")} ${parseDeviceName(session.userAgent)} session`}\n                    className=\"ml-4 px-4 py-2 rounded-lg text-sm font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors duration-200\"\n                  >\n                    {tr(\"auth.sessions.revoke\", \"Revoke\")}\n                  </button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Pagination controls */}\n      {!isLoading && totalPages > 1 && (\n        <div className=\"flex items-center justify-between mt-6 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={goToPrevPage}\n            disabled={page === 0}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.prevPage\", \"Previous page\")}\n          >\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n            {tr(\"auth.sessions.prev\", \"Previous\")}\n          </button>\n\n          <span className=\"text-sm text-text-secondary\">\n            {tr(\"auth.sessions.pageOf\", \"Page\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{page + 1}</span>{\" \"}\n            {tr(\"auth.sessions.of\", \"of\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{totalPages}</span>\n          </span>\n\n          <button\n            type=\"button\"\n            onClick={goToNextPage}\n            disabled={!hasMore}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.nextPage\", \"Next page\")}\n          >\n            {tr(\"auth.sessions.next\", \"Next\")}\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SessionsPage.js","names":[],"sources":["../../../src/auth/pages/SessionsPage.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSessionOperations } from \"../hooks/useSessionOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport {\n  formatRelativeTime,\n  parseDeviceName,\n  parseBrowserName,\n} from \"../utils/formatters\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\n\n/**\n * Active sessions management page with professional UI\n *\n * Fragment: SessionCard_Session (src/operations/global/fragments/SessionCard.fragment.graphql)\n * Query: ActiveSessions (src/operations/global/queries/sessions.graphql)\n */\nexport function SessionsPage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const {\n    activeSessions,\n    revokeSession,\n    revokeAllSessions,\n    isLoading,\n    page,\n    totalPages,\n    totalCount,\n    hasMore,\n    goToNextPage,\n    goToPrevPage,\n  } = useSessionOperations({ disableTokenInfoQuery: true, pageSize: 20 });\n\n  // One entry per device: keep the most-recently-active session for each device name\n  const dedupedSessions = useMemo(() => {\n    const byDevice = new Map<string, (typeof activeSessions)[number]>();\n    for (const s of activeSessions) {\n      const device = parseDeviceName(s.userAgent ?? \"\");\n      const existing = byDevice.get(device);\n      if (\n        !existing ||\n        new Date(s.lastActivityAt) > new Date(existing.lastActivityAt)\n      ) {\n        byDevice.set(device, s);\n      }\n    }\n    return [...byDevice.values()];\n  }, [activeSessions]);\n\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pendingSessionId, setPendingSessionId] = useState<string | null>(null);\n  const [showRevokeAllDialog, setShowRevokeAllDialog] = useState(false);\n\n  const handleRevokeSession = async (sessionId: string) => {\n    try {\n      await revokeSession(sessionId);\n      setSuccessMessage(\"Session revoked successfully\");\n      setPendingSessionId(null);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to revoke session\");\n    }\n  };\n\n  const handleRevokeAll = async () => {\n    try {\n      await revokeAllSessions();\n      setSuccessMessage(\"All other sessions have been revoked\");\n      setShowRevokeAllDialog(false);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : \"Failed to revoke all sessions\",\n      );\n    }\n  };\n\n  if (!isAuthenticated) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"size-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.sessions.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.sessions.signInToView\",\n              \"Please sign in to view your active sessions\",\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      <ConfirmActionDialog\n        open={pendingSessionId !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setPendingSessionId(null);\n          }\n        }}\n        title=\"Revoke this session?\"\n        description=\"The selected device will be signed out immediately and will need to authenticate again.\"\n        confirmText=\"Revoke session\"\n        variant=\"danger\"\n        isPending={isLoading}\n        onConfirm={async () => {\n          if (pendingSessionId) {\n            await handleRevokeSession(pendingSessionId);\n          }\n        }}\n      />\n      <ConfirmActionDialog\n        open={showRevokeAllDialog}\n        onOpenChange={setShowRevokeAllDialog}\n        title=\"Revoke every other session?\"\n        description=\"All devices except your current one will be signed out immediately.\"\n        confirmText=\"Revoke all other sessions\"\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleRevokeAll}\n      />\n\n      {/* Live regions for screen reader announcements */}\n      <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {successMessage}\n      </div>\n      <div\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n      >\n        {error}\n      </div>\n\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <div>\n          <h1 className=\"text-3xl font-semibold text-text-primary\">\n            {tr(\"auth.sessions.title\", \"Active Sessions\")}\n          </h1>\n          <p className=\"text-text-secondary mt-2\">\n            {tr(\"auth.sessions.sessionCount\", \"You have\")} {totalCount}{\" \"}\n            {tr(\n              totalCount !== 1\n                ? \"auth.sessions.sessionsPlural\"\n                : \"auth.sessions.sessionsSingular\",\n              totalCount !== 1 ? \"active sessions\" : \"active session\",\n            )}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Export button — commented out until wspace-export-svc is wired for auth_sessions\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            disabled={isExporting}\n            aria-label={tr(\n              \"auth.sessions.exportAriaLabel\",\n              \"Export sessions data\",\n            )}\n            className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200\"\n          >\n            {isExporting ? (\n              <>\n                <SpinnerIcon\n                  className=\"size-4 animate-spin\"\n                  aria-hidden=\"true\"\n                />\n                {tr(\"auth.sessions.exporting\", \"Exporting...\")}\n              </>\n            ) : (\n              <>\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                  />\n                </svg>\n                {tr(\"auth.sessions.export\", \"Export\")}\n              </>\n            )}\n          </button>\n          */}\n          {totalCount > 1 && (\n            <button\n              type=\"button\"\n              onClick={() => setShowRevokeAllDialog(true)}\n              className=\"px-4 py-2.5 rounded-xl border border-status-error-border text-status-error-text font-medium hover:bg-status-error-bg-subtle transition-colors duration-200\"\n            >\n              {tr(\"auth.sessions.revokeAll\", \"Revoke All Sessions\")}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <output className=\"block mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border\">\n          <p className=\"text-status-success-text\">{successMessage}</p>\n          <button\n            type=\"button\"\n            onClick={() => setSuccessMessage(null)}\n            className=\"mt-2 text-sm text-status-success-text hover:underline transition-colors duration-200\"\n          >\n            Dismiss\n          </button>\n        </output>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"size-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n            <button\n              type=\"button\"\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-status-error-text hover:underline transition-colors duration-200\"\n            >\n              Dismiss\n            </button>\n          </div>\n        </div>\n      )}\n\n      {isLoading ? (\n        <div\n          aria-live=\"polite\"\n          aria-busy=\"true\"\n          className=\"flex items-center justify-center py-12\"\n        >\n          <SpinnerIcon\n            className=\"size-8 text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"ml-3 text-text-secondary\">\n            {tr(\"auth.sessions.loading\", \"Loading sessions...\")}\n          </span>\n        </div>\n      ) : dedupedSessions.length === 0 ? (\n        <output className=\"block text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center\">\n            <svg\n              className=\"size-8 text-text-tertiary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n              />\n            </svg>\n          </div>\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.sessions.noSessions\", \"No active sessions found\")}\n          </p>\n        </output>\n      ) : (\n        <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={isLoading}>\n          {dedupedSessions.map((session) => (\n            <div\n              key={session.id}\n              className=\"p-6 rounded-xl border border-border-default bg-bg-surface shadow-sm hover:shadow-md transition-shadow\"\n            >\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-start gap-4\">\n                  {/* Device Icon */}\n                  <div\n                    className=\"size-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0\"\n                    aria-hidden=\"true\"\n                  >\n                    <svg\n                      className=\"size-6 text-text-link\"\n                      fill=\"none\"\n                      viewBox=\"0 0 24 24\"\n                      stroke=\"currentColor\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={1.5}\n                        d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                      />\n                    </svg>\n                  </div>\n\n                  <div className=\"flex-1\">\n                    <div className=\"flex items-center gap-3 mb-1\">\n                      <h3 className=\"text-lg font-semibold text-text-primary\">\n                        {session.isCurrent &&\n                        parseDeviceName(session.userAgent) === \"Unknown Device\"\n                          ? tr(\"auth.sessions.thisDevice\", \"This Device\")\n                          : parseDeviceName(session.userAgent)}\n                      </h3>\n                      {session.isCurrent && (\n                        <output className=\"px-2.5 py-1 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\">\n                          {tr(\n                            \"auth.sessions.currentSession\",\n                            \"Current Session\",\n                          )}\n                        </output>\n                      )}\n                    </div>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      {parseBrowserName(session.userAgent) ===\n                        \"Unknown Browser\" && session.isCurrent\n                        ? tr(\"auth.sessions.currentBrowser\", \"Current Browser\")\n                        : parseBrowserName(session.userAgent)}\n                    </p>\n                    <dl className=\"flex flex-wrap gap-4 text-sm text-text-secondary\">\n                      {session.ipAddress && session.ipAddress !== \"unknown\" && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"size-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">IP address</dt>\n                          <dd>{session.ipAddress}</dd>\n                        </div>\n                      )}\n                      {session.location && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"size-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n                            />\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">Location</dt>\n                          <dd>{session.location}</dd>\n                        </div>\n                      )}\n                      <div className=\"flex items-center gap-1.5\">\n                        <svg\n                          className=\"size-4\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                          aria-hidden=\"true\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n                          />\n                        </svg>\n                        <dt className=\"sr-only\">Last active</dt>\n                        <dd>\n                          {tr(\"auth.sessions.lastActive\", \"Last active\")}{\" \"}\n                          {formatRelativeTime(session.lastActivityAt)}\n                        </dd>\n                      </div>\n                    </dl>\n                  </div>\n                </div>\n\n                {!session.isCurrent && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setPendingSessionId(session.id)}\n                    aria-label={`${tr(\"auth.sessions.revoke\", \"Revoke\")} ${parseDeviceName(session.userAgent)} session`}\n                    className=\"ml-4 px-4 py-2 rounded-lg text-sm font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors duration-200\"\n                  >\n                    {tr(\"auth.sessions.revoke\", \"Revoke\")}\n                  </button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Pagination controls */}\n      {!isLoading && totalPages > 1 && (\n        <div className=\"flex items-center justify-between mt-6 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={goToPrevPage}\n            disabled={page === 0}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.prevPage\", \"Previous page\")}\n          >\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n            {tr(\"auth.sessions.prev\", \"Previous\")}\n          </button>\n\n          <span className=\"text-sm text-text-secondary\">\n            {tr(\"auth.sessions.pageOf\", \"Page\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{page + 1}</span>{\" \"}\n            {tr(\"auth.sessions.of\", \"of\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{totalPages}</span>\n          </span>\n\n          <button\n            type=\"button\"\n            onClick={goToNextPage}\n            disabled={!hasMore}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.nextPage\", \"Next page\")}\n          >\n            {tr(\"auth.sessions.next\", \"Next\")}\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,IAAe;CAC7B,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAkB,GAAc,MAAU,EAAM,gBAAgB,EAChE,EACJ,mBACA,kBACA,sBACA,cACA,SACA,eACA,eACA,YACA,iBACA,oBACE,EAAqB;EAAE,uBAAuB;EAAM,UAAU;EAAI,CAAC,EAGjE,IAAkB,QAAc;EACpC,IAAM,oBAAW,IAAI,KAA8C;AACnE,OAAK,IAAM,KAAK,GAAgB;GAC9B,IAAM,IAAS,EAAgB,EAAE,aAAa,GAAG,EAC3C,IAAW,EAAS,IAAI,EAAO;AACrC,IACE,CAAC,KACD,IAAI,KAAK,EAAE,eAAe,GAAG,IAAI,KAAK,EAAS,eAAe,KAE9D,EAAS,IAAI,GAAQ,EAAE;;AAG3B,SAAO,CAAC,GAAG,EAAS,QAAQ,CAAC;IAC5B,CAAC,EAAe,CAAC,EAEd,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EACnE,CAAC,GAAkB,KAAuB,EAAwB,KAAK,EACvE,CAAC,GAAqB,KAA0B,EAAS,GAAM,EAE/D,IAAsB,OAAO,MAAsB;AACvD,MAAI;AAGF,GAFA,MAAM,EAAc,EAAU,EAC9B,EAAkB,+BAA+B,EACjD,EAAoB,KAAK;WAClB,GAAK;AACZ,KAAS,aAAe,QAAQ,EAAI,UAAU,2BAA2B;;;AAwC7E,QAxBK,IAyBH,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,MAAM,MAAqB;IAC3B,eAAe,MAAS;AACtB,KAAK,KACH,EAAoB,KAAK;;IAG7B,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,SAAQ;IACR,WAAW;IACX,WAAW,YAAY;AACrB,KAAI,KACF,MAAM,EAAoB,EAAiB;;IAG/C,CAAA;GACF,kBAAC,GAAD;IACE,MAAM;IACN,cAAc;IACd,OAAM;IACN,aAAY;IACZ,aAAY;IACZ,SAAQ;IACR,WAAW;IACX,WAhEkB,YAAY;AAClC,SAAI;AAGF,MAFA,MAAM,GAAmB,EACzB,EAAkB,uCAAuC,EACzD,EAAuB,GAAM;cACtB,GAAK;AACZ,QACE,aAAe,QAAQ,EAAI,UAAU,gCACtC;;;IAyDC,CAAA;GAGF,kBAAC,OAAD;IAAK,aAAU;IAAS,eAAY;IAAO,WAAU;cAClD;IACG,CAAA;GACN,kBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;cAET;IACG,CAAA;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,uBAAuB,kBAAkB;KAC1C,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAG,8BAA8B,WAAW;MAAC;MAAE;MAAY;MAC3D,EACC,MAAe,IAEX,mCADA,gCAEJ,MAAe,IAAwB,mBAApB,kBACpB;MACC;OACA,EAAA,CAAA,EACN,kBAAC,OAAD;KAAK,WAAU;eAyCZ,IAAa,KACZ,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAuB,GAAK;MAC3C,WAAU;gBAET,EAAG,2BAA2B,sBAAsB;MAC9C,CAAA;KAEP,CAAA,CACF;;GAGL,KACC,kBAAC,UAAD;IAAQ,WAAU;cAAlB,CACE,kBAAC,KAAD;KAAG,WAAU;eAA4B;KAAmB,CAAA,EAC5D,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,EAAkB,KAAK;KACtC,WAAU;eACX;KAEQ,CAAA,CACF;;GAIV,KACC,kBAAC,OAAD;IACE,MAAK;IACL,WAAU;cAFZ,CAIE,kBAAC,GAAD;KACE,WAAU;KACV,eAAY;KACZ,CAAA,EACF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,WAAU;gBAAkC;MAAU,CAAA,EACzD,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAS,KAAK;MAC7B,WAAU;gBACX;MAEQ,CAAA,CACL;OACF;;GAGP,IACC,kBAAC,OAAD;IACE,aAAU;IACV,aAAU;IACV,WAAU;cAHZ,CAKE,kBAAC,GAAD;KACE,WAAU;KACV,eAAY;KACZ,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eACb,EAAG,yBAAyB,sBAAsB;KAC9C,CAAA,CACH;QACJ,EAAgB,WAAW,IAC7B,kBAAC,UAAD;IAAQ,WAAU;cAAlB,CACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,SAAQ;MACR,QAAO;MACP,eAAY;gBAEZ,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,aAAa;OACb,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA,EACN,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,4BAA4B,2BAA2B;KACzD,CAAA,CACG;QAET,kBAAC,OAAD;IAAK,WAAU;IAAY,aAAU;IAAS,aAAW;cACtD,EAAgB,KAAK,MACpB,kBAAC,OAAD;KAEE,WAAU;eAEV,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CAEE,kBAAC,OAAD;QACE,WAAU;QACV,eAAY;kBAEZ,kBAAC,OAAD;SACE,WAAU;SACV,MAAK;SACL,SAAQ;SACR,QAAO;mBAEP,kBAAC,QAAD;UACE,eAAc;UACd,gBAAe;UACf,aAAa;UACb,GAAE;UACF,CAAA;SACE,CAAA;QACF,CAAA,EAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAQ,aACT,EAAgB,EAAQ,UAAU,KAAK,mBACnC,EAAG,4BAA4B,cAAc,GAC7C,EAAgB,EAAQ,UAAU;WACnC,CAAA,EACJ,EAAQ,aACP,kBAAC,UAAD;WAAQ,WAAU;qBACf,EACC,gCACA,kBACD;WACM,CAAA,CAEP;;SACN,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAiB,EAAQ,UAAU,KAClC,qBAAqB,EAAQ,YAC3B,EAAG,gCAAgC,kBAAkB,GACrD,EAAiB,EAAQ,UAAU;UACrC,CAAA;SACJ,kBAAC,MAAD;UAAI,WAAU;oBAAd;WACG,EAAQ,aAAa,EAAQ,cAAc,aAC1C,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACE,kBAAC,OAAD;cACE,WAAU;cACV,MAAK;cACL,SAAQ;cACR,QAAO;cACP,eAAY;wBAEZ,kBAAC,QAAD;eACE,eAAc;eACd,gBAAe;eACf,aAAa;eACb,GAAE;eACF,CAAA;cACE,CAAA;aACN,kBAAC,MAAD;cAAI,WAAU;wBAAU;cAAe,CAAA;aACvC,kBAAC,MAAD,EAAA,UAAK,EAAQ,WAAe,CAAA;aACxB;;WAEP,EAAQ,YACP,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACE,kBAAC,OAAD;cACE,WAAU;cACV,MAAK;cACL,SAAQ;cACR,QAAO;cACP,eAAY;wBALd,CAOE,kBAAC,QAAD;eACE,eAAc;eACd,gBAAe;eACf,aAAa;eACb,GAAE;eACF,CAAA,EACF,kBAAC,QAAD;eACE,eAAc;eACd,gBAAe;eACf,aAAa;eACb,GAAE;eACF,CAAA,CACE;;aACN,kBAAC,MAAD;cAAI,WAAU;wBAAU;cAAa,CAAA;aACrC,kBAAC,MAAD,EAAA,UAAK,EAAQ,UAAc,CAAA;aACvB;;WAER,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACE,kBAAC,OAAD;cACE,WAAU;cACV,MAAK;cACL,SAAQ;cACR,QAAO;cACP,eAAY;wBAEZ,kBAAC,QAAD;eACE,eAAc;eACd,gBAAe;eACf,aAAa;eACb,GAAE;eACF,CAAA;cACE,CAAA;aACN,kBAAC,MAAD;cAAI,WAAU;wBAAU;cAAgB,CAAA;aACxC,kBAAC,MAAD,EAAA,UAAA;cACG,EAAG,4BAA4B,cAAc;cAAE;cAC/C,EAAmB,EAAQ,eAAe;cACxC,EAAA,CAAA;aACD;;WACH;;SACD;UACF;UAEL,CAAC,EAAQ,aACR,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAoB,EAAQ,GAAG;OAC9C,cAAY,GAAG,EAAG,wBAAwB,SAAS,CAAC,GAAG,EAAgB,EAAQ,UAAU,CAAC;OAC1F,WAAU;iBAET,EAAG,wBAAwB,SAAS;OAC9B,CAAA,CAEP;;KACF,EAnIC,EAAQ,GAmIT,CACN;IACE,CAAA;GAIP,CAAC,KAAa,IAAa,KAC1B,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,MAAS;MACnB,WAAU;MACV,cAAY,EAAG,0BAA0B,gBAAgB;gBAL3D,CAOE,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;OACP,eAAY;iBAEZ,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA,EACL,EAAG,sBAAsB,WAAW,CAC9B;;KAET,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,EAAG,wBAAwB,OAAO;OAAE;OACrC,kBAAC,QAAD;QAAM,WAAU;kBAAiC,IAAO;QAAS,CAAA;OAAC;OACjE,EAAG,oBAAoB,KAAK;OAAE;OAC/B,kBAAC,QAAD;QAAM,WAAU;kBAAiC;QAAkB,CAAA;OAC9D;;KAEP,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,UAAU,CAAC;MACX,WAAU;MACV,cAAY,EAAG,0BAA0B,YAAY;gBALvD,CAOG,EAAG,sBAAsB,OAAO,EACjC,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;OACP,eAAY;iBAEZ,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,aAAa;QACb,GAAE;QACF,CAAA;OACE,CAAA,CACC;;KACL;;GAEJ;MAvZJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MACE,WAAU;MACV,eAAY;MACZ,CAAA;KACE,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,8BAA8B,0BAA0B;KACzD,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,8BACA,8CACD;KACC,CAAA;IACA;;EACF,CAAA"}

package/dist/microfe-auth.css

@@ -1,3 +1,3 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono:"JetBrains Mono", ui-monospace, monospace;--color-indigo-500:oklch(58.5% .233 277.117);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:.5rem;--color-background:0 0% 100%;--color-foreground:222.2 84% 4.9%;--color-primary:221.2 83.2% 53.3%;--color-primary-foreground:210 40% 98%}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.-top-40{top:calc(var(--spacing) * -40)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.top-full{top:100%}.-right-20{right:calc(var(--spacing) * -20)}.right-0{right:calc(var(--spacing) * 0)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-40{bottom:calc(var(--spacing) * -40)}.bottom-0{bottom:calc(var(--spacing) * 0)}.-left-40{left:calc(var(--spacing) * -40)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/4{left:25%}.z-10{z-index:10}.z-50{z-index:50}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.my-8{margin-block:calc(var(--spacing) * 8)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-48{width:calc(var(--spacing) * 48);height:calc(var(--spacing) * 48)}.size-72{width:calc(var(--spacing) * 72);height:calc(var(--spacing) * 72)}.size-80{width:calc(var(--spacing) * 80);height:calc(var(--spacing) * 80)}.size-96{width:calc(var(--spacing) * 96);height:calc(var(--spacing) * 96)}.size-full{width:100%;height:100%}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-12{height:calc(var(--spacing) * 12)}.h-full{height:100%}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-1\/4{width:25%}.w-2\/4{width:50%}.w-3\/4{width:75%}.w-10{width:calc(var(--spacing) * 10)}.w-48{width:calc(var(--spacing) * 48)}.w-64{width:calc(var(--spacing) * 64)}.w-\[80px\]{width:80px}.w-\[100px\]{width:100px}.w-\[130px\]{width:130px}.w-\[180px\]{width:180px}.w-\[280px\]{width:280px}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[200px\]{min-width:200px}.min-w-\[800px\]{min-width:800px}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.rotate-180{rotate:180deg}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:var(--radius)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--color-accent-primary\)\]{border-color:var(--color-accent-primary)}.border-\[var\(--color-border-default\)\]{border-color:var(--color-border-default)}.border-\[var\(--color-border-primary\)\]{border-color:var(--color-border-primary)}.border-\[var\(--color-border-subtle\)\]{border-color:var(--color-border-subtle)}.border-\[var\(--color-status-error-border\)\]{border-color:var(--color-status-error-border)}.border-\[var\(--color-status-success-border\)\]{border-color:var(--color-status-success-border)}.border-\[var\(--color-status-warning-border\)\]{border-color:var(--color-status-warning-border)}.border-primary{border-color:var(--color-primary)}.border-t-transparent{border-top-color:#0000}.bg-\[var\(--color-accent-primary\)\]{background-color:var(--color-accent-primary)}.bg-\[var\(--color-action-primary-bg\)\]{background-color:var(--color-action-primary-bg)}.bg-\[var\(--color-action-secondary-bg-subtle\)\]{background-color:var(--color-action-secondary-bg-subtle)}.bg-\[var\(--color-background-base\)\]{background-color:var(--color-background-base)}.bg-\[var\(--color-bg-accent\)\]{background-color:var(--color-bg-accent)}.bg-\[var\(--color-bg-canvas\)\]{background-color:var(--color-bg-canvas)}.bg-\[var\(--color-bg-disabled\)\]{background-color:var(--color-bg-disabled)}.bg-\[var\(--color-bg-muted\)\]{background-color:var(--color-bg-muted)}.bg-\[var\(--color-bg-sunken\)\]{background-color:var(--color-bg-sunken)}.bg-\[var\(--color-bg-surface\)\]{background-color:var(--color-bg-surface)}.bg-\[var\(--color-status-error-bg\)\]{background-color:var(--color-status-error-bg)}.bg-\[var\(--color-status-error-bg-subtle\)\]{background-color:var(--color-status-error-bg-subtle)}.bg-\[var\(--color-status-error-subtle\)\]{background-color:var(--color-status-error-subtle)}.bg-\[var\(--color-status-info-bg-subtle\)\]{background-color:var(--color-status-info-bg-subtle)}.bg-\[var\(--color-status-success-bg-subtle\)\]{background-color:var(--color-status-success-bg-subtle)}.bg-\[var\(--color-status-success-subtle\)\]{background-color:var(--color-status-success-subtle)}.bg-\[var\(--color-status-warning-bg\)\]{background-color:var(--color-status-warning-bg)}.bg-\[var\(--color-status-warning-bg-subtle\)\]{background-color:var(--color-status-warning-bg-subtle)}.bg-background{background-color:var(--color-background)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-primary{background-color:var(--color-primary)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-12{padding:calc(var(--spacing) * 12)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pr-3\.5{padding-right:calc(var(--spacing) * 3.5)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-\[3\.5rem\]{padding-left:3.5rem}.pl-\[3\.25rem\]{padding-left:3.25rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--color-accent-primary\)\]{color:var(--color-accent-primary)}.text-\[var\(--color-action-primary-text\)\]{color:var(--color-action-primary-text)}.text-\[var\(--color-action-secondary-text\)\]{color:var(--color-action-secondary-text)}.text-\[var\(--color-status-error\)\]{color:var(--color-status-error)}.text-\[var\(--color-status-error-text\)\]{color:var(--color-status-error-text)}.text-\[var\(--color-status-info-text\)\]{color:var(--color-status-info-text)}.text-\[var\(--color-status-success\)\]{color:var(--color-status-success)}.text-\[var\(--color-status-success-text\)\]{color:var(--color-status-success-text)}.text-\[var\(--color-status-warning-text\)\]{color:var(--color-status-warning-text)}.text-\[var\(--color-text-disabled\)\]{color:var(--color-text-disabled)}.text-\[var\(--color-text-inverse\)\]{color:var(--color-text-inverse)}.text-\[var\(--color-text-link\)\]{color:var(--color-text-link)}.text-\[var\(--color-text-primary\)\]{color:var(--color-text-primary)}.text-\[var\(--color-text-secondary\)\]{color:var(--color-text-secondary)}.text-\[var\(--color-text-tertiary\)\]{color:var(--color-text-tertiary)}.text-foreground{color:var(--color-foreground)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-white{color:var(--color-white)}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.placeholder-\[var\(--color-text-secondary\)\]::placeholder{color:var(--color-text-secondary)}.opacity-0{opacity:0}.opacity-5{opacity:.05}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}@media (hover:hover){.group-hover\:scale-110:is(:where(.group):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:bg-\[var\(--color-action-primary-bg-subtle\)\]:is(:where(.group):hover *){background-color:var(--color-action-primary-bg-subtle)}.group-hover\:bg-\[var\(--color-action-secondary-bg-subtle\)\]:is(:where(.group):hover *){background-color:var(--color-action-secondary-bg-subtle)}.group-hover\:text-\[var\(--color-text-primary\)\]:is(:where(.group):hover *){color:var(--color-text-primary)}.group-hover\:text-indigo-500:is(:where(.group):hover *){color:var(--color-indigo-500)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.peer-checked\:opacity-100:is(:where(.peer):checked~*){opacity:1}.peer-focus\:ring-2:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.placeholder\:text-\[var\(--color-text-tertiary\)\]::placeholder{color:var(--color-text-tertiary)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-\[var\(--color-action-primary-border\)\]:hover{border-color:var(--color-action-primary-border)}.hover\:border-\[var\(--color-action-secondary-border\)\]:hover{border-color:var(--color-action-secondary-border)}.hover\:border-\[var\(--color-border-strong\)\]:hover{border-color:var(--color-border-strong)}.hover\:bg-\[var\(--color-accent-primary-hover\)\]:hover{background-color:var(--color-accent-primary-hover)}.hover\:bg-\[var\(--color-action-primary-bgHover\)\]:hover{background-color:var(--color-action-primary-bgHover)}.hover\:bg-\[var\(--color-bg-muted\)\]:hover{background-color:var(--color-bg-muted)}.hover\:bg-\[var\(--color-bg-subtle\)\]:hover{background-color:var(--color-bg-subtle)}.hover\:bg-\[var\(--color-bg-sunken\)\]:hover{background-color:var(--color-bg-sunken)}.hover\:bg-\[var\(--color-status-error-bg-subtle\)\]:hover{background-color:var(--color-status-error-bg-subtle)}.hover\:bg-primary\/90:hover{background-color:color-mix(in srgb, 221.2 83.2% 53.3% 90%, transparent)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary) 90%, transparent)}}.hover\:text-\[var\(--color-text-primary\)\]:hover{color:var(--color-text-primary)}.hover\:text-\[var\(--color-text-secondary\)\]:hover{color:var(--color-text-secondary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-primary:focus{border-color:var(--color-primary)}.focus\:border-transparent:focus{border-color:#0000}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-\[var\(--color-accent-primary\)\]:focus{--tw-ring-color:var(--color-accent-primary)}.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in srgb, 221.2 83.2% 53.3% 20%, transparent)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (width>=40rem){.sm\:not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.sm\:top-6{top:calc(var(--spacing) * 6)}.sm\:right-6{right:calc(var(--spacing) * 6)}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:h-14{height:calc(var(--spacing) * 14)}.sm\:w-12{width:calc(var(--spacing) * 12)}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:p-12{padding:calc(var(--spacing) * 12)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media (width>=48rem){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}}@media (width>=64rem){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-1\/2{width:50%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:text-left{text-align:left}}}.dark{--color-background:222.2 84% 4.9%;--color-foreground:210 40% 98%;--color-card:222.2 84% 4.9%;--color-card-foreground:210 40% 98%;--color-popover:222.2 84% 4.9%;--color-popover-foreground:210 40% 98%;--color-primary:217.2 91.2% 59.8%;--color-primary-foreground:222.2 47.4% 11.2%;--color-secondary:217.2 32.6% 17.5%;--color-secondary-foreground:210 40% 98%;--color-muted:217.2 32.6% 17.5%;--color-muted-foreground:215 20.2% 65.1%;--color-accent:217.2 32.6% 17.5%;--color-accent-foreground:210 40% 98%;--color-destructive:0 62.8% 30.6%;--color-destructive-foreground:210 40% 98%;--color-border:217.2 32.6% 17.5%;--color-input:217.2 32.6% 17.5%;--color-ring:224.3 76.3% 48%}body{font-feature-settings:"rlig" 1, "calt" 1}.auth-primary-button{background:var(--color-action-primary-bg);color:var(--color-action-primary-text);box-shadow:0 12px 30px var(--color-action-primary-bg);border-radius:.75rem}@supports (color:color-mix(in lab, red, red)){.auth-primary-button{box-shadow:0 12px 30px color-mix(in srgb, var(--color-action-primary-bg) 24%, transparent)}}.auth-primary-button{transition:opacity .16s,transform .16s,box-shadow .16s,background-color .16s}.auth-primary-button:hover{opacity:.96;box-shadow:0 16px 36px var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-primary-button:hover{box-shadow:0 16px 36px color-mix(in srgb, var(--color-action-primary-bg) 30%, transparent)}}.auth-primary-button:focus-visible{outline:2px solid var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-primary-button:focus-visible{outline:2px solid color-mix(in srgb, var(--color-action-primary-bg) 45%, transparent)}}.auth-primary-button:focus-visible{outline-offset:2px}.auth-primary-button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.auth-brand-badge{background:linear-gradient(135deg, var(--color-action-primary-bg) 0%, var(--color-action-primary-bg) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-brand-badge{background:linear-gradient(135deg, color-mix(in srgb, var(--color-action-primary-bg) 92%, white 8%) 0%, color-mix(in srgb, var(--color-action-primary-bg) 72%, var(--color-bg-surface) 28%) 100%)}}.auth-brand-badge{color:var(--color-action-primary-text);box-shadow:0 12px 30px var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-brand-badge{box-shadow:0 12px 30px color-mix(in srgb, var(--color-action-primary-bg) 22%, transparent)}}.auth-brand-panel{background:radial-gradient(circle at top left, var(--color-action-primary-bg) 0%, transparent 35%), radial-gradient(circle at bottom right, var(--color-text-link) 0%, transparent 38%), linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-canvas) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-brand-panel{background:radial-gradient(circle at top left, color-mix(in srgb, var(--color-action-primary-bg) 20%, transparent) 0%, transparent 35%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--color-text-link) 18%, transparent) 0%, transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--color-bg-surface) 92%, black 8%) 0%, color-mix(in srgb, var(--color-bg-canvas) 70%, black 30%) 100%)}}.auth-brand-panel,.auth-brand-copy{color:var(--color-text-primary)}@supports (color:color-mix(in lab, red, red)){.auth-brand-copy{color:color-mix(in srgb, var(--color-text-primary) 88%, white 12%)}}.auth-brand-copy-muted{color:var(--color-text-secondary)}@supports (color:color-mix(in lab, red, red)){.auth-brand-copy-muted{color:color-mix(in srgb, var(--color-text-secondary) 75%, white 25%)}}.auth-highlight-chip{background:var(--color-bg-surface)}@supports (color:color-mix(in lab, red, red)){.auth-highlight-chip{background:color-mix(in srgb, var(--color-bg-surface) 84%, transparent)}}.auth-highlight-chip{border:1px solid var(--color-border-subtle)}@supports (color:color-mix(in lab, red, red)){.auth-highlight-chip{border:1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent)}}.auth-highlight-chip{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.auth-shell-gradient{background:linear-gradient(180deg, var(--color-bg-canvas) 0%, var(--color-bg-surface) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-shell-gradient{background:linear-gradient(180deg, color-mix(in srgb, var(--color-bg-canvas) 96%, transparent) 0%, color-mix(in srgb, var(--color-bg-surface) 96%, transparent) 100%)}}.auth-hero-card{background:linear-gradient(135deg, var(--color-action-primary-bg) 0%, var(--color-text-link) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-hero-card{background:linear-gradient(135deg, color-mix(in srgb, var(--color-action-primary-bg) 90%, transparent) 0%, color-mix(in srgb, var(--color-text-link) 70%, var(--color-action-primary-bg) 30%) 100%)}}.auth-hero-card{color:var(--color-action-primary-text);box-shadow:0 18px 42px var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-hero-card{box-shadow:0 18px 42px color-mix(in srgb, var(--color-action-primary-bg) 26%, transparent)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono:"JetBrains Mono", ui-monospace, monospace;--color-indigo-500:oklch(58.5% .233 277.117);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:.5rem;--color-primary:221.2 83.2% 53.3%}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.-top-40{top:calc(var(--spacing) * -40)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.top-full{top:100%}.-right-20{right:calc(var(--spacing) * -20)}.right-0{right:calc(var(--spacing) * 0)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-40{bottom:calc(var(--spacing) * -40)}.bottom-0{bottom:calc(var(--spacing) * 0)}.-left-40{left:calc(var(--spacing) * -40)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/4{left:25%}.z-10{z-index:10}.z-50{z-index:50}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.my-8{margin-block:calc(var(--spacing) * 8)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.ml-3{margin-left:calc(var(--spacing) * 3)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-48{width:calc(var(--spacing) * 48);height:calc(var(--spacing) * 48)}.size-72{width:calc(var(--spacing) * 72);height:calc(var(--spacing) * 72)}.size-80{width:calc(var(--spacing) * 80);height:calc(var(--spacing) * 80)}.size-96{width:calc(var(--spacing) * 96);height:calc(var(--spacing) * 96)}.size-full{width:100%;height:100%}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-12{height:calc(var(--spacing) * 12)}.h-full{height:100%}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-1\/4{width:25%}.w-2\/4{width:50%}.w-3\/4{width:75%}.w-10{width:calc(var(--spacing) * 10)}.w-48{width:calc(var(--spacing) * 48)}.w-64{width:calc(var(--spacing) * 64)}.w-\[80px\]{width:80px}.w-\[100px\]{width:100px}.w-\[130px\]{width:130px}.w-\[180px\]{width:180px}.w-\[280px\]{width:280px}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[200px\]{min-width:200px}.min-w-\[800px\]{min-width:800px}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.rotate-180{rotate:180deg}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:var(--radius)}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--color-accent-primary\)\]{border-color:var(--color-accent-primary)}.border-\[var\(--color-border-default\)\]{border-color:var(--color-border-default)}.border-\[var\(--color-border-primary\)\]{border-color:var(--color-border-primary)}.border-\[var\(--color-border-subtle\)\]{border-color:var(--color-border-subtle)}.border-\[var\(--color-status-error-border\)\]{border-color:var(--color-status-error-border)}.border-\[var\(--color-status-success-border\)\]{border-color:var(--color-status-success-border)}.border-\[var\(--color-status-warning-border\)\]{border-color:var(--color-status-warning-border)}.border-primary{border-color:var(--color-primary)}.border-t-transparent{border-top-color:#0000}.bg-\[var\(--color-accent-primary\)\]{background-color:var(--color-accent-primary)}.bg-\[var\(--color-action-primary-bg\)\]{background-color:var(--color-action-primary-bg)}.bg-\[var\(--color-action-secondary-bg-subtle\)\]{background-color:var(--color-action-secondary-bg-subtle)}.bg-\[var\(--color-background-base\)\]{background-color:var(--color-background-base)}.bg-\[var\(--color-bg-accent\)\]{background-color:var(--color-bg-accent)}.bg-\[var\(--color-bg-canvas\)\]{background-color:var(--color-bg-canvas)}.bg-\[var\(--color-bg-disabled\)\]{background-color:var(--color-bg-disabled)}.bg-\[var\(--color-bg-muted\)\]{background-color:var(--color-bg-muted)}.bg-\[var\(--color-bg-sunken\)\]{background-color:var(--color-bg-sunken)}.bg-\[var\(--color-bg-surface\)\]{background-color:var(--color-bg-surface)}.bg-\[var\(--color-status-error-bg\)\]{background-color:var(--color-status-error-bg)}.bg-\[var\(--color-status-error-bg-subtle\)\]{background-color:var(--color-status-error-bg-subtle)}.bg-\[var\(--color-status-error-subtle\)\]{background-color:var(--color-status-error-subtle)}.bg-\[var\(--color-status-info-bg-subtle\)\]{background-color:var(--color-status-info-bg-subtle)}.bg-\[var\(--color-status-success-bg-subtle\)\]{background-color:var(--color-status-success-bg-subtle)}.bg-\[var\(--color-status-success-subtle\)\]{background-color:var(--color-status-success-subtle)}.bg-\[var\(--color-status-warning-bg\)\]{background-color:var(--color-status-warning-bg)}.bg-\[var\(--color-status-warning-bg-subtle\)\]{background-color:var(--color-status-warning-bg-subtle)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-12{padding:calc(var(--spacing) * 12)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pr-3\.5{padding-right:calc(var(--spacing) * 3.5)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-12{padding-right:calc(var(--spacing) * 12)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-\[3\.5rem\]{padding-left:3.5rem}.pl-\[3\.25rem\]{padding-left:3.25rem}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--color-accent-primary\)\]{color:var(--color-accent-primary)}.text-\[var\(--color-action-primary-text\)\]{color:var(--color-action-primary-text)}.text-\[var\(--color-action-secondary-text\)\]{color:var(--color-action-secondary-text)}.text-\[var\(--color-status-error\)\]{color:var(--color-status-error)}.text-\[var\(--color-status-error-text\)\]{color:var(--color-status-error-text)}.text-\[var\(--color-status-info-text\)\]{color:var(--color-status-info-text)}.text-\[var\(--color-status-success\)\]{color:var(--color-status-success)}.text-\[var\(--color-status-success-text\)\]{color:var(--color-status-success-text)}.text-\[var\(--color-status-warning-text\)\]{color:var(--color-status-warning-text)}.text-\[var\(--color-text-disabled\)\]{color:var(--color-text-disabled)}.text-\[var\(--color-text-inverse\)\]{color:var(--color-text-inverse)}.text-\[var\(--color-text-link\)\]{color:var(--color-text-link)}.text-\[var\(--color-text-primary\)\]{color:var(--color-text-primary)}.text-\[var\(--color-text-secondary\)\]{color:var(--color-text-secondary)}.text-\[var\(--color-text-tertiary\)\]{color:var(--color-text-tertiary)}.text-white{color:var(--color-white)}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.placeholder-\[var\(--color-text-secondary\)\]::placeholder{color:var(--color-text-secondary)}.opacity-0{opacity:0}.opacity-5{opacity:.05}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}@media (hover:hover){.group-hover\:bg-\[var\(--color-action-primary-bg-subtle\)\]:is(:where(.group):hover *){background-color:var(--color-action-primary-bg-subtle)}.group-hover\:bg-\[var\(--color-action-secondary-bg-subtle\)\]:is(:where(.group):hover *){background-color:var(--color-action-secondary-bg-subtle)}.group-hover\:text-\[var\(--color-text-primary\)\]:is(:where(.group):hover *){color:var(--color-text-primary)}.group-hover\:text-indigo-500:is(:where(.group):hover *){color:var(--color-indigo-500)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.peer-checked\:opacity-100:is(:where(.peer):checked~*){opacity:1}.peer-focus\:ring-2:is(:where(.peer):focus~*){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.placeholder\:text-\[var\(--color-text-tertiary\)\]::placeholder{color:var(--color-text-tertiary)}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.hover\:border-\[var\(--color-action-primary-border\)\]:hover{border-color:var(--color-action-primary-border)}.hover\:border-\[var\(--color-action-secondary-border\)\]:hover{border-color:var(--color-action-secondary-border)}.hover\:border-\[var\(--color-border-strong\)\]:hover{border-color:var(--color-border-strong)}.hover\:bg-\[var\(--color-accent-primary-hover\)\]:hover{background-color:var(--color-accent-primary-hover)}.hover\:bg-\[var\(--color-action-primary-bgHover\)\]:hover{background-color:var(--color-action-primary-bgHover)}.hover\:bg-\[var\(--color-bg-muted\)\]:hover{background-color:var(--color-bg-muted)}.hover\:bg-\[var\(--color-bg-subtle\)\]:hover{background-color:var(--color-bg-subtle)}.hover\:bg-\[var\(--color-bg-sunken\)\]:hover{background-color:var(--color-bg-sunken)}.hover\:bg-\[var\(--color-status-error-bg-subtle\)\]:hover{background-color:var(--color-status-error-bg-subtle)}.hover\:text-\[var\(--color-text-primary\)\]:hover{color:var(--color-text-primary)}.hover\:text-\[var\(--color-text-secondary\)\]:hover{color:var(--color-text-secondary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-primary:focus{border-color:var(--color-primary)}.focus\:border-transparent:focus{border-color:#0000}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-\[var\(--color-accent-primary\)\]:focus{--tw-ring-color:var(--color-accent-primary)}.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in srgb, 221.2 83.2% 53.3% 20%, transparent)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-primary\/20:focus{--tw-ring-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (width>=40rem){.sm\:not-sr-only{clip-path:none;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}.sm\:top-6{top:calc(var(--spacing) * 6)}.sm\:right-6{right:calc(var(--spacing) * 6)}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:h-14{height:calc(var(--spacing) * 14)}.sm\:w-12{width:calc(var(--spacing) * 12)}.sm\:w-auto{width:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:p-12{padding:calc(var(--spacing) * 12)}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}}@media (width>=48rem){.md\:col-span-2{grid-column:span 2/span 2}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}}@media (width>=64rem){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-1\/2{width:50%}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:text-left{text-align:left}}}.dark{--color-background:222.2 84% 4.9%;--color-foreground:210 40% 98%;--color-card:222.2 84% 4.9%;--color-card-foreground:210 40% 98%;--color-popover:222.2 84% 4.9%;--color-popover-foreground:210 40% 98%;--color-primary:217.2 91.2% 59.8%;--color-primary-foreground:222.2 47.4% 11.2%;--color-secondary:217.2 32.6% 17.5%;--color-secondary-foreground:210 40% 98%;--color-muted:217.2 32.6% 17.5%;--color-muted-foreground:215 20.2% 65.1%;--color-accent:217.2 32.6% 17.5%;--color-accent-foreground:210 40% 98%;--color-destructive:0 62.8% 30.6%;--color-destructive-foreground:210 40% 98%;--color-border:217.2 32.6% 17.5%;--color-input:217.2 32.6% 17.5%;--color-ring:224.3 76.3% 48%}body{font-feature-settings:"rlig" 1, "calt" 1}.auth-primary-button{background:var(--color-action-primary-bg);color:var(--color-action-primary-text);box-shadow:0 12px 30px var(--color-action-primary-bg);border-radius:.75rem}@supports (color:color-mix(in lab, red, red)){.auth-primary-button{box-shadow:0 12px 30px color-mix(in srgb, var(--color-action-primary-bg) 24%, transparent)}}.auth-primary-button{transition:opacity .16s,transform .16s,box-shadow .16s,background-color .16s}.auth-primary-button:hover{opacity:.96;box-shadow:0 16px 36px var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-primary-button:hover{box-shadow:0 16px 36px color-mix(in srgb, var(--color-action-primary-bg) 30%, transparent)}}.auth-primary-button:focus-visible{outline:2px solid var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-primary-button:focus-visible{outline:2px solid color-mix(in srgb, var(--color-action-primary-bg) 45%, transparent)}}.auth-primary-button:focus-visible{outline-offset:2px}.auth-primary-button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none}.auth-brand-badge{background:linear-gradient(135deg, var(--color-action-primary-bg) 0%, var(--color-action-primary-bg) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-brand-badge{background:linear-gradient(135deg, color-mix(in srgb, var(--color-action-primary-bg) 92%, white 8%) 0%, color-mix(in srgb, var(--color-action-primary-bg) 72%, var(--color-bg-surface) 28%) 100%)}}.auth-brand-badge{color:var(--color-action-primary-text);box-shadow:0 12px 30px var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-brand-badge{box-shadow:0 12px 30px color-mix(in srgb, var(--color-action-primary-bg) 22%, transparent)}}.auth-brand-panel{background:radial-gradient(circle at top left, var(--color-action-primary-bg) 0%, transparent 35%), radial-gradient(circle at bottom right, var(--color-text-link) 0%, transparent 38%), linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-canvas) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-brand-panel{background:radial-gradient(circle at top left, color-mix(in srgb, var(--color-action-primary-bg) 20%, transparent) 0%, transparent 35%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--color-text-link) 18%, transparent) 0%, transparent 38%), linear-gradient(135deg, color-mix(in srgb, var(--color-bg-surface) 92%, black 8%) 0%, color-mix(in srgb, var(--color-bg-canvas) 70%, black 30%) 100%)}}.auth-brand-panel,.auth-brand-copy{color:var(--color-text-primary)}@supports (color:color-mix(in lab, red, red)){.auth-brand-copy{color:color-mix(in srgb, var(--color-text-primary) 88%, white 12%)}}.auth-brand-copy-muted{color:var(--color-text-secondary)}@supports (color:color-mix(in lab, red, red)){.auth-brand-copy-muted{color:color-mix(in srgb, var(--color-text-secondary) 75%, white 25%)}}.auth-highlight-chip{background:var(--color-bg-surface)}@supports (color:color-mix(in lab, red, red)){.auth-highlight-chip{background:color-mix(in srgb, var(--color-bg-surface) 84%, transparent)}}.auth-highlight-chip{border:1px solid var(--color-border-subtle)}@supports (color:color-mix(in lab, red, red)){.auth-highlight-chip{border:1px solid color-mix(in srgb, var(--color-border-subtle) 65%, transparent)}}.auth-highlight-chip{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.auth-shell-gradient{background:linear-gradient(180deg, var(--color-bg-canvas) 0%, var(--color-bg-surface) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-shell-gradient{background:linear-gradient(180deg, color-mix(in srgb, var(--color-bg-canvas) 96%, transparent) 0%, color-mix(in srgb, var(--color-bg-surface) 96%, transparent) 100%)}}.auth-hero-card{background:linear-gradient(135deg, var(--color-action-primary-bg) 0%, var(--color-text-link) 100%)}@supports (color:color-mix(in lab, red, red)){.auth-hero-card{background:linear-gradient(135deg, color-mix(in srgb, var(--color-action-primary-bg) 90%, transparent) 0%, color-mix(in srgb, var(--color-text-link) 70%, var(--color-action-primary-bg) 30%) 100%)}}.auth-hero-card{color:var(--color-action-primary-text);box-shadow:0 18px 42px var(--color-action-primary-bg)}@supports (color:color-mix(in lab, red, red)){.auth-hero-card{box-shadow:0 18px 42px color-mix(in srgb, var(--color-action-primary-bg) 26%, transparent)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-auth",
-  "version": "2026.602.1",
+  "version": "2026.624.1",
   "description": "Auth microfrontend for Burdenoff products",
   "type": "module",
   "imports": {