@idp.global/catalog 1.1.1

package/ts_web/elements/idp-admin-shell.ts

@@ -0,0 +1,2664 @@
+import { DeesElement, html, property, state, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-badge.js';
+import './idp-icon.js';
+import './idp-data-table.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-admin-shell': IdpAdminShell;
+  }
+}
+
+type TNavItem = {
+  id: TIdpAdminPage;
+  label: string;
+  icon: string;
+  badge?: string;
+};
+
+type TKpi = {
+  label: string;
+  value: string;
+  unit?: string;
+  delta: string;
+  deltaKind: 'up' | 'live';
+  sub: string;
+  accent: string;
+  spark: number[];
+  sparkColor: string;
+};
+
+export type TIdpAdminPage =
+  | 'overview'
+  | 'profile'
+  | 'security'
+  | 'sessions'
+  | 'apps'
+  | 'org-general'
+  | 'org-settings'
+  | 'org-members'
+  | 'org-apps'
+  | 'support'
+  | 'ga-users'
+  | 'ga-orgs'
+  | 'ga-apps';
+
+export interface IIdpAdminUser {
+  name: string;
+  email: string;
+  initials?: string;
+  username?: string;
+  mobileNumber?: string;
+  status?: string;
+}
+
+export interface IIdpAdminOrg {
+  id: string;
+  name: string;
+  slug: string;
+  myRole?: string;
+}
+
+export interface IIdpAdminNavigateEventDetail {
+  page: TIdpAdminPage;
+}
+
+export interface IIdpAdminOrgSelectEventDetail {
+  orgId: string;
+  org: IIdpAdminOrg | null;
+}
+
+export interface IIdpAdminSession {
+  id: string;
+  deviceName: string;
+  browser: string;
+  os: string;
+  ip: string;
+  lastActive: number;
+  createdAt: number;
+  isCurrent: boolean;
+}
+
+export interface IIdpAdminActivity {
+  id: string;
+  action: string;
+  description: string;
+  timestamp: number;
+  ip?: string;
+  targetType?: string;
+}
+
+export interface IIdpAdminApp {
+  id: string;
+  name: string;
+  description?: string;
+  logoUrl?: string;
+  appUrl?: string;
+  category?: string;
+  type?: string;
+  status?: string;
+  isConnected?: boolean;
+  connectionCount?: number;
+  clientId?: string;
+  scopes?: string[];
+  grants?: string[];
+  roleMappings?: IIdpAdminAppRoleMapping[];
+}
+
+export interface IIdpAdminOrgRoleDefinition {
+  key: string;
+  name: string;
+  description?: string;
+  createdAt?: number;
+  updatedAt?: number;
+}
+
+export interface IIdpAdminAppRoleMapping {
+  orgRoleKey: string;
+  appRoles: string[];
+  permissions: string[];
+  scopes: string[];
+}
+
+export interface IIdpAdminMember {
+  userId: string;
+  name: string;
+  email: string;
+  roles: string[];
+  isCurrentUser?: boolean;
+}
+
+export interface IIdpAdminInvitation {
+  id: string;
+  email: string;
+  roles: string[];
+  invitedAt: number;
+  expiresAt: number;
+  status?: string;
+}
+
+export interface IIdpAdminPassportDevice {
+  id: string;
+  label: string;
+  platform: string;
+  status: string;
+  capabilities?: {
+    gps?: boolean;
+    nfc?: boolean;
+    push?: boolean;
+  };
+  appVersion?: string;
+  createdAt: number;
+  lastSeenAt?: number;
+  lastChallengeAt?: number;
+  pushRegistered?: boolean;
+}
+
+export interface IIdpAdminPassportEnrollment {
+  challengeId: string;
+  pairingToken: string;
+  pairingPayload: string;
+  signingPayload: string;
+  expiresAt: number;
+}
+
+export interface IIdpAdminSessionEventDetail {
+  sessionId: string;
+}
+
+export interface IIdpAdminAppToggleEventDetail {
+  appId: string;
+  connected: boolean;
+}
+
+export interface IIdpAdminMemberEventDetail {
+  userId: string;
+}
+
+export interface IIdpAdminMemberRolesEventDetail {
+  userId: string;
+  roles: string[];
+}
+
+export interface IIdpAdminInvitationEventDetail {
+  invitationId: string;
+}
+
+export interface IIdpAdminOrgUpdateEventDetail {
+  organizationId: string;
+  name: string;
+  slug: string;
+  confirmationText: string;
+}
+
+export interface IIdpAdminOrgTransferEventDetail {
+  organizationId: string;
+  newOwnerId: string;
+  confirmationText: string;
+}
+
+export interface IIdpAdminOrgDeleteEventDetail {
+  organizationId: string;
+  confirmationText: string;
+}
+
+export interface IIdpAdminOrgRoleUpsertEventDetail {
+  organizationId: string;
+  roleDefinition: {
+    key: string;
+    name: string;
+    description?: string;
+  };
+}
+
+export interface IIdpAdminOrgRoleDeleteEventDetail {
+  organizationId: string;
+  roleKey: string;
+  confirmationText: string;
+}
+
+export interface IIdpAdminAppRoleMappingsEventDetail {
+  organizationId: string;
+  appId: string;
+  roleMappings: IIdpAdminAppRoleMapping[];
+}
+
+export interface IIdpAdminPasswordChangeEventDetail {
+  currentPassword: string;
+  newPassword: string;
+}
+
+export interface IIdpAdminPassportEnrollmentEventDetail {
+  deviceLabel: string;
+}
+
+export interface IIdpAdminPassportDeviceEventDetail {
+  deviceId: string;
+}
+
+@customElement('idp-admin-shell')
+export class IdpAdminShell extends DeesElement {
+  public static demo = () => html`<idp-admin-shell global-admin></idp-admin-shell>`;
+  public static demoGroups = ['idp.global v3 full pages'];
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+        height: 100vh;
+        max-height: 100vh;
+        min-height: 0;
+        overflow: hidden;
+        color: var(--idp-fg);
+      }
+      .shell {
+        height: 100%;
+        min-height: 0;
+        display: grid;
+        grid-template-columns: 220px minmax(0, 1fr);
+        overflow: hidden;
+        border: 0;
+        background: var(--idp-bg);
+      }
+      .sidebar {
+        height: 100%;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        border-right: 1px solid var(--idp-border);
+        background: var(--idp-bg);
+      }
+      .logo-block {
+        padding: 14px 16px 10px;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .logo {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .logo-icon {
+        width: 26px;
+        height: 26px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border-radius: 7px;
+        background: var(--idp-primary);
+        color: var(--idp-primary-fg);
+      }
+      .logo-text {
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 700;
+        letter-spacing: -0.3px;
+      }
+      .nav-wrap {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        padding: 10px 8px;
+      }
+      .state-card {
+        padding: 42px 24px;
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius);
+        background: var(--idp-card);
+        color: var(--idp-muted-fg);
+        text-align: center;
+      }
+      .state-icon {
+        width: 38px;
+        height: 38px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 12px;
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        background: var(--idp-muted);
+        color: var(--idp-muted-fg);
+      }
+      .state-title {
+        margin-bottom: 4px;
+        color: var(--idp-fg);
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .state-description {
+        max-width: 420px;
+        margin: 0 auto;
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .notice-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 12px;
+        padding: 14px 16px;
+        border: 1px solid var(--idp-info-border);
+        border-radius: var(--idp-radius);
+        background: var(--idp-info-bg);
+        color: var(--idp-info);
+      }
+      .notice-card .muted {
+        color: var(--idp-muted-fg);
+      }
+      .nav-section {
+        margin-bottom: 20px;
+      }
+      .nav-title {
+        padding: 0 8px;
+        margin-bottom: 4px;
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.8px;
+        text-transform: uppercase;
+      }
+      .nav-list {
+        display: grid;
+      }
+      .nav-item,
+      .org-switch,
+      .plain-button {
+        border: 0;
+        font-family: inherit;
+      }
+      .nav-item {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: 7px;
+        background: transparent;
+        color: var(--idp-muted-fg);
+        font-size: 13px;
+        font-weight: 400;
+        text-align: left;
+      }
+      .nav-item.active {
+        background: var(--idp-muted);
+        color: var(--idp-fg);
+        font-weight: 500;
+      }
+      .nav-item idp-icon {
+        color: currentColor;
+      }
+      .nav-item.active idp-icon {
+        color: var(--idp-accent);
+      }
+      .org-switch-wrap {
+        position: relative;
+        margin-bottom: 2px;
+      }
+      .org-switch {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 8px;
+        border-radius: 7px;
+        background: transparent;
+        color: var(--idp-muted-fg);
+        cursor: pointer;
+      }
+      .org-switch:hover {
+        background: var(--idp-muted);
+      }
+      .org-switch.open {
+        background: var(--idp-muted);
+      }
+      .org-switch.open .org-name {
+        color: var(--idp-accent);
+      }
+      .org-switch.open idp-icon {
+        transform: rotate(180deg);
+      }
+      .org-menu {
+        position: absolute;
+        top: calc(100% + 4px);
+        left: 0;
+        right: 0;
+        z-index: 40;
+        overflow: hidden;
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        background: var(--idp-card);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+      }
+      .org-menu-title {
+        padding: 6px 8px 3px;
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.7px;
+        text-transform: uppercase;
+      }
+      .org-menu-item,
+      .org-create {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        border: 0;
+        background: transparent;
+        font-family: inherit;
+        text-align: left;
+      }
+      .org-menu-item {
+        padding: 6px 8px;
+        cursor: pointer;
+      }
+      .org-menu-item.selected {
+        background: var(--idp-accent-soft);
+      }
+      .org-menu-item .org-avatar {
+        width: 20px;
+        height: 20px;
+        font-size: 7px;
+      }
+      .org-menu-name {
+        overflow: hidden;
+        color: var(--idp-fg);
+        font-size: 12px;
+        font-weight: 400;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .org-menu-item.selected .org-menu-name {
+        color: var(--idp-accent);
+      }
+      .org-menu-role {
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+      }
+      .org-menu-divider {
+        height: 1px;
+        margin: 3px 0;
+        background: var(--idp-border);
+      }
+      .org-create {
+        padding: 6px 8px 8px;
+        color: var(--idp-muted-fg);
+        cursor: pointer;
+        font-size: 12px;
+      }
+      .org-create-icon {
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border: 1.5px dashed var(--idp-border);
+        border-radius: 5px;
+      }
+      .org-name {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        color: var(--idp-muted-fg);
+        font-size: 13px;
+        font-weight: 400;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .org-avatar,
+      .user-avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: var(--idp-mono);
+        font-weight: 700;
+      }
+      .org-avatar {
+        width: 14px;
+        height: 14px;
+        border: 1px solid var(--idp-border);
+        border-radius: 6px;
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+        font-size: 5px;
+      }
+      .user-footer {
+        display: flex;
+        align-items: center;
+        gap: 9px;
+        padding: 10px 12px;
+        border-top: 1px solid var(--idp-border);
+      }
+      .user-avatar {
+        width: 26px;
+        height: 26px;
+        border-radius: 50%;
+        background: oklch(0.85 0.08 240);
+        color: oklch(0.3 0.08 240);
+        font-size: 9px;
+      }
+      .user-meta {
+        flex: 1;
+        min-width: 0;
+      }
+      .user-name,
+      .user-email {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .user-name {
+        color: var(--idp-fg);
+        font-size: 12px;
+        font-weight: 500;
+      }
+      .user-email {
+        color: var(--idp-muted-fg);
+        font-size: 10px;
+      }
+      main {
+        height: 100%;
+        min-height: 0;
+        min-width: 0;
+        overflow: auto;
+        background: var(--idp-bg);
+      }
+      .page-head {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 16px;
+        flex-wrap: wrap;
+        padding: 24px 28px 18px;
+        border-bottom: 1px solid var(--idp-border);
+        background: var(--idp-bg);
+      }
+      .eyebrow-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 4px;
+      }
+      .eyebrow {
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        font-size: 10px;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .live-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 1px 7px;
+        border: 1px solid var(--idp-ok-border);
+        border-radius: 999px;
+        background: var(--idp-ok-bg);
+        color: var(--idp-ok);
+        font-family: var(--idp-mono);
+        font-size: 10px;
+        font-weight: 500;
+      }
+      .live-dot,
+      .feed-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--idp-ok);
+        box-shadow: 0 0 6px var(--idp-ok);
+        animation: idp-blink 1.6s ease-in-out infinite;
+      }
+      @keyframes idp-blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.35; }
+      }
+      h1,
+      h2 {
+        margin: 0;
+        color: var(--idp-fg);
+        font-family: var(--idp-display);
+        letter-spacing: -0.025em;
+      }
+      h1 {
+        font-size: 26px;
+        font-weight: 700;
+        line-height: 1.1;
+      }
+      .lead {
+        margin-top: 4px;
+        color: var(--idp-muted-fg);
+        font-size: 13px;
+      }
+      .lead code,
+      .mono {
+        color: var(--idp-info);
+        font-family: var(--idp-mono);
+      }
+      .page-actions {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .tabs {
+        display: inline-flex;
+        gap: 1px;
+        padding: 2px;
+        border: 1px solid var(--idp-border);
+        border-radius: 6px;
+        background: var(--idp-bg-2);
+      }
+      .tab {
+        padding: 4px 10px;
+        border-radius: 4px;
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        font-size: 11px;
+        font-weight: 500;
+      }
+      .tab.active {
+        background: var(--idp-muted);
+        color: var(--idp-fg);
+      }
+      .plain-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        height: 28px;
+        padding: 5px 10px;
+        border-radius: 8px;
+        background: transparent;
+        color: var(--idp-fg);
+        font-size: 12px;
+        font-weight: 500;
+        white-space: nowrap;
+      }
+      .plain-button.outline {
+        border: 1px solid var(--idp-border);
+      }
+      .plain-button.primary {
+        background: var(--idp-accent);
+        color: var(--idp-accent-fg);
+      }
+      .plain-button.destructive {
+        background: var(--idp-destructive);
+        color: var(--idp-accent-fg);
+      }
+      .plain-button.ghost {
+        color: var(--idp-fg);
+      }
+      .plain-button:disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 20px 28px 32px;
+      }
+      .narrow-body {
+        max-width: 700px;
+      }
+      .wide-body {
+        max-width: 860px;
+      }
+      .section-card {
+        margin-bottom: 16px;
+        padding: 20px;
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius);
+        background: var(--idp-card);
+      }
+      .section-card.compact {
+        padding: 14px;
+      }
+      .section-headline {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 16px;
+      }
+      .section-title {
+        color: var(--idp-fg);
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .section-description,
+      .muted {
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        line-height: 1.5;
+      }
+      .form-row {
+        display: grid;
+        grid-template-columns: 180px 1fr;
+        gap: 16px;
+        align-items: start;
+        padding: 12px 0;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .form-row:last-child {
+        border-bottom: 0;
+      }
+      .form-label {
+        display: flex;
+        gap: 3px;
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .form-hint {
+        margin-top: 2px;
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+        line-height: 1.4;
+      }
+      .input,
+      .select,
+      .textarea {
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        outline: none;
+        background: var(--idp-bg);
+        color: var(--idp-fg);
+        font-family: inherit;
+        font-size: 13px;
+      }
+      .input,
+      .select {
+        height: 34px;
+        padding: 0 10px;
+      }
+      .textarea {
+        min-height: 96px;
+        padding: 8px 10px;
+        resize: vertical;
+      }
+      .input-group {
+        display: flex;
+        overflow: hidden;
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        background: var(--idp-bg);
+      }
+      .input-prefix {
+        height: 34px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        border-right: 1px solid var(--idp-border);
+        background: var(--idp-muted);
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        font-size: 12px;
+        white-space: nowrap;
+      }
+      .input-group .input {
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+      }
+      .divider {
+        height: 1px;
+        margin: 16px 0;
+        background: var(--idp-border);
+      }
+      .code-block {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 7px;
+        background: var(--idp-muted);
+      }
+      .code-block code {
+        flex: 1;
+        overflow-wrap: anywhere;
+        color: var(--idp-fg);
+        font-family: var(--idp-mono);
+        font-size: 12px;
+      }
+      .avatar,
+      .app-avatar,
+      .icon-tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+      .avatar {
+        border-radius: 50%;
+        background: oklch(0.85 0.08 240);
+        color: oklch(0.3 0.08 240);
+        font-family: var(--idp-mono);
+        font-weight: 600;
+      }
+      .app-avatar,
+      .icon-tile {
+        border: 1px solid var(--idp-border);
+        border-radius: 10px;
+        background: var(--idp-muted);
+        color: var(--idp-muted-fg);
+      }
+      .app-avatar {
+        width: 40px;
+        height: 40px;
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .icon-tile {
+        width: 38px;
+        height: 38px;
+      }
+      .list-stack {
+        display: grid;
+        gap: 12px;
+      }
+      .row-card {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        padding: 16px;
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius);
+        background: var(--idp-card);
+      }
+      .split-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+      }
+      .chip-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+      .switch {
+        width: 36px;
+        height: 20px;
+        position: relative;
+        flex-shrink: 0;
+        border-radius: 10px;
+        background: var(--idp-accent);
+      }
+      .switch::after {
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 18px;
+        width: 16px;
+        height: 16px;
+        border-radius: 8px;
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+      }
+      .sub-tabs {
+        width: fit-content;
+        display: flex;
+        gap: 2px;
+        margin-bottom: 16px;
+        padding: 3px;
+        border-radius: 8px;
+        background: var(--idp-muted);
+      }
+      .sub-tab {
+        padding: 5px 12px;
+        border-radius: 6px;
+        color: var(--idp-muted-fg);
+        font-size: 12px;
+      }
+      .sub-tab.active {
+        background: var(--idp-bg);
+        color: var(--idp-fg);
+        font-weight: 500;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+      }
+      .kpis {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 12px;
+      }
+      .kpi,
+      .card {
+        border: 1px solid var(--idp-border);
+        background: var(--idp-card);
+      }
+      .kpi {
+        position: relative;
+        min-height: 132px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        overflow: hidden;
+        padding: 18px 20px 14px;
+        border-radius: 10px;
+      }
+      .kpi::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: var(--kpi-accent);
+      }
+      .kpi-label {
+        color: var(--idp-muted-fg);
+        font-size: 11.5px;
+        font-weight: 500;
+        letter-spacing: 0.02em;
+      }
+      .kpi-value {
+        color: var(--idp-fg);
+        font-family: var(--idp-display);
+        font-size: 30px;
+        font-weight: 700;
+        font-variant-numeric: tabular-nums;
+        letter-spacing: -0.025em;
+        line-height: 1.1;
+      }
+      .kpi-value span {
+        margin-left: 2px;
+        color: var(--idp-muted-fg);
+        font-size: 14px;
+        font-weight: 500;
+      }
+      .kpi-sub {
+        color: var(--idp-fg-3);
+        font-family: var(--idp-mono);
+        font-size: 11px;
+      }
+      .kpi-foot {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 8px;
+        margin-top: auto;
+      }
+      .delta {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--idp-ok);
+        font-family: var(--idp-mono);
+        font-size: 11px;
+        font-weight: 600;
+      }
+      .sparkline {
+        width: 84px;
+        opacity: 0.85;
+      }
+      .primary-grid,
+      .secondary-grid {
+        display: grid;
+        grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
+        gap: 16px;
+      }
+      .card {
+        overflow: hidden;
+        border-radius: 8px;
+      }
+      .card-head {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--idp-border-soft);
+      }
+      .card-title {
+        color: var(--idp-fg);
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .feed-dot {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        border-radius: 4px;
+        background: var(--dot-color);
+        box-shadow: var(--dot-glow, none);
+      }
+      .feed-meta {
+        color: var(--idp-muted-fg);
+        font-family: var(--idp-mono);
+        font-size: 11.5px;
+      }
+      .feed-item {
+        display: grid;
+        grid-template-columns: 14px 1fr auto;
+        gap: 12px;
+        align-items: center;
+        padding: 11px 16px;
+        border-bottom: 1px solid var(--idp-border-soft);
+      }
+      .feed-item:last-child {
+        border-bottom: 0;
+      }
+      .feed-text {
+        color: var(--idp-fg-2);
+        font-size: 12.5px;
+      }
+      .feed-text strong {
+        color: var(--idp-fg);
+        font-weight: 600;
+      }
+      .dialog-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        background: rgba(0, 0, 0, 0.42);
+      }
+      .dialog-card {
+        width: min(720px, 100%);
+        max-height: min(760px, calc(100vh - 40px));
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        border: 1px solid var(--idp-border);
+        border-radius: 12px;
+        background: var(--idp-card);
+        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
+      }
+      .dialog-card.wide {
+        width: min(980px, 100%);
+      }
+      .dialog-head {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 18px 20px 14px;
+        border-bottom: 1px solid var(--idp-border);
+      }
+      .dialog-title {
+        color: var(--idp-fg);
+        font-size: 15px;
+        font-weight: 700;
+      }
+      .dialog-body {
+        display: grid;
+        gap: 14px;
+        overflow: auto;
+        padding: 18px 20px;
+      }
+      .dialog-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 10px;
+        padding: 14px 20px;
+        border-top: 1px solid var(--idp-border);
+      }
+      .role-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 8px;
+      }
+      .role-option {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 9px;
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        background: var(--idp-bg);
+      }
+      .role-option input {
+        margin-top: 2px;
+      }
+      .mapping-row {
+        display: grid;
+        grid-template-columns: 160px repeat(3, minmax(0, 1fr));
+        gap: 8px;
+        align-items: start;
+        padding: 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: 8px;
+        background: var(--idp-bg);
+      }
+      .mapping-role {
+        color: var(--idp-fg);
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .mapping-role .muted {
+        display: block;
+        margin-top: 2px;
+      }
+      .mapping-row .form-row {
+        display: block;
+        padding: 0;
+        border-bottom: 0;
+      }
+      .mapping-row .form-label {
+        margin-bottom: 4px;
+      }
+      @media (max-width: 1120px) {
+        .shell {
+          grid-template-columns: 1fr;
+        }
+        .sidebar {
+          display: none;
+        }
+        .kpis {
+          grid-template-columns: repeat(2, 1fr);
+        }
+        .primary-grid,
+        .secondary-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      @media (max-width: 720px) {
+        .page-head,
+        .body {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+        .page-actions {
+          flex-wrap: wrap;
+        }
+        .kpis {
+          grid-template-columns: 1fr;
+        }
+        .mapping-row {
+          grid-template-columns: 1fr;
+        }
+      }
+    `,
+  ];
+
+  @property({ type: String })
+  public accessor page: TIdpAdminPage = 'overview';
+
+  @property({ type: Object })
+  public accessor user: IIdpAdminUser = {
+    name: '',
+    email: '',
+  };
+
+  @property({ type: Array })
+  public accessor orgs: IIdpAdminOrg[] = [];
+
+  @property({ type: String, attribute: 'selected-org-id' })
+  public accessor selectedOrgId = '';
+
+  @property({ type: Boolean, attribute: 'global-admin', reflect: true })
+  public accessor globalAdmin = false;
+
+  @property({ type: Boolean, attribute: 'data-loading', reflect: true })
+  public accessor dataLoading = false;
+
+  @property({ type: String, attribute: 'data-error' })
+  public accessor dataError = '';
+
+  @property({ type: Array })
+  public accessor sessions: IIdpAdminSession[] = [];
+
+  @property({ type: Array })
+  public accessor activities: IIdpAdminActivity[] = [];
+
+  @property({ type: Array })
+  public accessor orgMembers: IIdpAdminMember[] = [];
+
+  @property({ type: Array })
+  public accessor orgInvitations: IIdpAdminInvitation[] = [];
+
+  @property({ type: Array })
+  public accessor orgRoleDefinitions: IIdpAdminOrgRoleDefinition[] = [];
+
+  @property({ type: Array })
+  public accessor orgApps: IIdpAdminApp[] = [];
+
+  @property({ type: Array })
+  public accessor accountApps: IIdpAdminApp[] = [];
+
+  @property({ type: Array })
+  public accessor adminApps: IIdpAdminApp[] = [];
+
+  @property({ type: Array })
+  public accessor passportDevices: IIdpAdminPassportDevice[] = [];
+
+  @property({ type: Object })
+  public accessor passportEnrollment: IIdpAdminPassportEnrollment | null = null;
+
+  @property({ type: String, attribute: 'credential-message' })
+  public accessor credentialMessage = '';
+
+  @state()
+  private accessor orgMenuOpen = false;
+
+  @state()
+  private accessor currentPassword = '';
+
+  @state()
+  private accessor newPassword = '';
+
+  @state()
+  private accessor confirmPassword = '';
+
+  @state()
+  private accessor credentialError = '';
+
+  @state()
+  private accessor orgSettingsOrgId = '';
+
+  @state()
+  private accessor orgNameDraft = '';
+
+  @state()
+  private accessor orgSlugDraft = '';
+
+  @state()
+  private accessor orgSettingsConfirmation = '';
+
+  @state()
+  private accessor transferOwnerId = '';
+
+  @state()
+  private accessor transferConfirmation = '';
+
+  @state()
+  private accessor deleteConfirmation = '';
+
+  @state()
+  private accessor orgSettingsError = '';
+
+  @state()
+  private accessor dialogMode: 'none' | 'role-upsert' | 'role-delete' | 'member-roles' | 'app-role-mappings' = 'none';
+
+  @state()
+  private accessor dialogError = '';
+
+  @state()
+  private accessor dialogRoleKey = '';
+
+  @state()
+  private accessor dialogRoleName = '';
+
+  @state()
+  private accessor dialogRoleDescription = '';
+
+  @state()
+  private accessor dialogRoleDeleteConfirmation = '';
+
+  @state()
+  private accessor dialogMember: IIdpAdminMember | null = null;
+
+  @state()
+  private accessor dialogMemberRoles: string[] = [];
+
+  @state()
+  private accessor dialogApp: IIdpAdminApp | null = null;
+
+  @state()
+  private accessor dialogAppMappings: IIdpAdminAppRoleMapping[] = [];
+
+  private workspaceNav: TNavItem[] = [
+    { id: 'overview', label: 'Overview', icon: 'grid' },
+  ];
+
+  private accountNav: TNavItem[] = [
+    { id: 'profile', label: 'Profile', icon: 'user' },
+    { id: 'security', label: 'Security', icon: 'shield' },
+    { id: 'sessions', label: 'Sessions & Devices', icon: 'monitor' },
+    { id: 'apps', label: 'Connected Apps', icon: 'grid' },
+  ];
+
+  private orgNav: TNavItem[] = [
+    { id: 'org-general', label: 'General', icon: 'building' },
+    { id: 'org-settings', label: 'Settings', icon: 'settings' },
+    { id: 'org-members', label: 'Members', icon: 'users' },
+    { id: 'org-apps', label: 'OAuth Apps', icon: 'box' },
+  ];
+
+  private supportNav: TNavItem[] = [
+    { id: 'support', label: 'Support', icon: 'shield' },
+  ];
+
+  private adminNav: TNavItem[] = [
+    { id: 'ga-users', label: 'All Users', icon: 'users' },
+    { id: 'ga-orgs', label: 'All Organisations', icon: 'building' },
+    { id: 'ga-apps', label: 'Platform Apps', icon: 'globe' },
+  ];
+
+  private get safeOrgs(): IIdpAdminOrg[] {
+    return Array.isArray(this.orgs) ? this.orgs.filter(Boolean) : [];
+  }
+
+  private get currentOrg(): IIdpAdminOrg {
+    const orgs = this.safeOrgs;
+    return orgs.find((orgArg) => orgArg.id === this.selectedOrgId) || orgs[0] || {
+      id: '',
+      name: 'No organisation',
+      slug: '',
+      myRole: '',
+    };
+  }
+
+  private get userInitials(): string {
+    if (this.user?.initials) {
+      return this.user.initials;
+    }
+
+    const source = this.user?.name || this.user?.email || '?';
+    return source
+      .split(/\s+|@/)
+      .filter(Boolean)
+      .map((partArg) => partArg[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+
+  private getInitials(valueArg?: string): string {
+    const source = valueArg || '?';
+    return source
+      .split(/\s+|@|-|\./)
+      .filter(Boolean)
+      .map((partArg) => partArg[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+
+  private setPasswordField(fieldArg: 'current' | 'new' | 'confirm', eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    if (fieldArg === 'current') this.currentPassword = value;
+    if (fieldArg === 'new') this.newPassword = value;
+    if (fieldArg === 'confirm') this.confirmPassword = value;
+    this.credentialError = '';
+  }
+
+  private submitPasswordChange() {
+    if (!this.currentPassword || !this.newPassword || !this.confirmPassword) {
+      this.credentialError = 'Enter your current password and confirm the new password.';
+      return;
+    }
+
+    if (this.newPassword.length < 12) {
+      this.credentialError = 'Use at least 12 characters for the new password.';
+      return;
+    }
+
+    if (this.newPassword !== this.confirmPassword) {
+      this.credentialError = 'New password and confirmation do not match.';
+      return;
+    }
+
+    this.dispatchShellEvent<IIdpAdminPasswordChangeEventDetail>('idp-admin-password-change', {
+      currentPassword: this.currentPassword,
+      newPassword: this.newPassword,
+    });
+  }
+
+  private syncOrgSettingsState() {
+    const org = this.currentOrg;
+    if (this.orgSettingsOrgId === org.id) {
+      return;
+    }
+
+    this.orgSettingsOrgId = org.id;
+    this.orgNameDraft = org.name || '';
+    this.orgSlugDraft = org.slug || '';
+    this.orgSettingsConfirmation = '';
+    this.transferOwnerId = '';
+    this.transferConfirmation = '';
+    this.deleteConfirmation = '';
+    this.orgSettingsError = '';
+  }
+
+  private setOrgSettingsField(
+    fieldArg: 'name' | 'slug' | 'settingsConfirmation' | 'transferOwnerId' | 'transferConfirmation' | 'deleteConfirmation',
+    eventArg: Event
+  ) {
+    const value = (eventArg.target as HTMLInputElement | HTMLSelectElement).value;
+    if (fieldArg === 'name') this.orgNameDraft = value;
+    if (fieldArg === 'slug') this.orgSlugDraft = value.trim().toLowerCase();
+    if (fieldArg === 'settingsConfirmation') this.orgSettingsConfirmation = value;
+    if (fieldArg === 'transferOwnerId') this.transferOwnerId = value;
+    if (fieldArg === 'transferConfirmation') this.transferConfirmation = value;
+    if (fieldArg === 'deleteConfirmation') this.deleteConfirmation = value;
+    this.orgSettingsError = '';
+  }
+
+  private submitOrgSettingsUpdate() {
+    const org = this.currentOrg;
+    const name = this.orgNameDraft.trim();
+    const slug = this.orgSlugDraft.trim().toLowerCase();
+    if (!org.id) {
+      this.orgSettingsError = 'Select an organisation before updating settings.';
+      return;
+    }
+    if (!name || !slug) {
+      this.orgSettingsError = 'Organisation name and slug are required.';
+      return;
+    }
+    if (name === org.name && slug === org.slug) {
+      this.orgSettingsError = 'Change the organisation name or slug before applying settings.';
+      return;
+    }
+    if (this.orgSettingsConfirmation.trim() !== org.slug) {
+      this.orgSettingsError = `Type ${org.slug} to confirm organisation settings changes.`;
+      return;
+    }
+
+    this.dispatchShellEvent<IIdpAdminOrgUpdateEventDetail>('idp-admin-org-update', {
+      organizationId: org.id,
+      name,
+      slug,
+      confirmationText: this.orgSettingsConfirmation.trim(),
+    });
+  }
+
+  private submitOrgTransfer() {
+    const org = this.currentOrg;
+    const expectedText = `transfer ${org.slug}`;
+    if (!org.id) {
+      this.orgSettingsError = 'Select an organisation before transferring ownership.';
+      return;
+    }
+    if (!this.transferOwnerId) {
+      this.orgSettingsError = 'Select the member who should become the new owner.';
+      return;
+    }
+    if (this.transferConfirmation.trim() !== expectedText) {
+      this.orgSettingsError = `Type ${expectedText} to confirm ownership transfer.`;
+      return;
+    }
+
+    this.dispatchShellEvent<IIdpAdminOrgTransferEventDetail>('idp-admin-org-transfer', {
+      organizationId: org.id,
+      newOwnerId: this.transferOwnerId,
+      confirmationText: this.transferConfirmation.trim(),
+    });
+  }
+
+  private submitOrgDelete() {
+    const org = this.currentOrg;
+    const expectedText = `delete ${org.slug}`;
+    if (!org.id) {
+      this.orgSettingsError = 'Select an organisation before deleting it.';
+      return;
+    }
+    if (this.deleteConfirmation.trim() !== expectedText) {
+      this.orgSettingsError = `Type ${expectedText} to confirm organisation deletion.`;
+      return;
+    }
+
+    this.dispatchShellEvent<IIdpAdminOrgDeleteEventDetail>('idp-admin-org-delete', {
+      organizationId: org.id,
+      confirmationText: this.deleteConfirmation.trim(),
+    });
+  }
+
+  private requestPassportEnrollment() {
+    const fallbackLabel = typeof navigator !== 'undefined'
+      ? navigator.userAgent.includes('Mobile') ? 'Mobile passport device' : 'Desktop passport device'
+      : 'Passport device';
+    const deviceLabel = globalThis.prompt?.('Device label', fallbackLabel)?.trim();
+    if (!deviceLabel) {
+      return;
+    }
+
+    this.dispatchShellEvent<IIdpAdminPassportEnrollmentEventDetail>('idp-admin-passport-enroll', {
+      deviceLabel,
+    });
+  }
+
+  private setPage(pageArg: TIdpAdminPage) {
+    this.page = pageArg;
+    this.orgMenuOpen = false;
+    this.dispatchEvent(new CustomEvent<IIdpAdminNavigateEventDetail>('idp-admin-navigate', {
+      detail: { page: pageArg },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private selectOrg(orgIdArg: string) {
+    this.selectedOrgId = orgIdArg;
+    this.orgMenuOpen = false;
+    this.page = 'org-general';
+    this.dispatchEvent(new CustomEvent<IIdpAdminOrgSelectEventDetail>('idp-admin-org-select', {
+      detail: {
+        orgId: orgIdArg,
+        org: this.orgs.find((orgArg) => orgArg.id === orgIdArg) || null,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private requestOrgCreate() {
+    this.orgMenuOpen = false;
+    this.dispatchEvent(new CustomEvent('idp-admin-org-create', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private dispatchShellEvent<TDetail>(eventNameArg: string, detailArg: TDetail) {
+    this.dispatchEvent(new CustomEvent<TDetail>(eventNameArg, {
+      detail: detailArg,
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private formatTimeAgo(timestampArg?: number): string {
+    if (!timestampArg) {
+      return 'unknown';
+    }
+
+    const diff = Date.now() - timestampArg;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) return 'just now';
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days < 7) return `${days}d ago`;
+    return new Date(timestampArg).toLocaleDateString();
+  }
+
+  private renderStateCard(titleArg: string, descriptionArg: string, iconArg = 'box'): TemplateResult {
+    return html`
+      <div class="state-card">
+        <span class="state-icon"><idp-icon name=${iconArg as any} size="17"></idp-icon></span>
+        <div class="state-title">${titleArg}</div>
+        <div class="state-description">${descriptionArg}</div>
+      </div>
+    `;
+  }
+
+  private renderDataState(emptyTitleArg: string, emptyDescriptionArg: string, iconArg = 'box'): TemplateResult | null {
+    if (this.dataLoading) {
+      return this.renderStateCard('Loading data', 'Fetching the latest account and organisation data.', 'cloud');
+    }
+
+    if (this.dataError) {
+      return this.renderStateCard('Data unavailable', this.dataError, 'alert');
+    }
+
+    return this.renderStateCard(emptyTitleArg, emptyDescriptionArg, iconArg);
+  }
+
+  private roleVariant(roleArg: string): 'default' | 'accent' | 'ok' | 'warn' | 'error' | 'outline' {
+    if (roleArg === 'owner') return 'accent';
+    if (roleArg === 'admin') return 'warn';
+    if (roleArg === 'editor') return 'ok';
+    if (roleArg === 'outlaw') return 'error';
+    return 'outline';
+  }
+
+  private get platformRoles(): IIdpAdminOrgRoleDefinition[] {
+    return [
+      { key: 'owner', name: 'Owner', description: 'Protected idp.global owner role.' },
+      { key: 'admin', name: 'Admin', description: 'Protected idp.global admin role.' },
+      { key: 'editor', name: 'Editor', description: 'Standard organisation role.' },
+      { key: 'viewer', name: 'Viewer', description: 'Standard organisation role.' },
+      { key: 'guest', name: 'Guest', description: 'Standard organisation role.' },
+      { key: 'outlaw', name: 'Outlaw', description: 'Restricted organisation role.' },
+    ];
+  }
+
+  private get availableOrgRoles(): IIdpAdminOrgRoleDefinition[] {
+    const customRoles = this.orgRoleDefinitions || [];
+    const customRoleKeys = new Set(customRoles.map((roleArg) => roleArg.key));
+    return [
+      ...this.platformRoles.filter((roleArg) => !customRoleKeys.has(roleArg.key)),
+      ...customRoles,
+    ];
+  }
+
+  private parseCsv(valueArg: string): string[] {
+    return [...new Set(valueArg.split(',').map((entryArg) => entryArg.trim()).filter(Boolean))];
+  }
+
+  private normalizeRoleKey(valueArg: string): string {
+    return valueArg.trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+  }
+
+  private closeDialog() {
+    this.dialogMode = 'none';
+    this.dialogError = '';
+    this.dialogRoleKey = '';
+    this.dialogRoleName = '';
+    this.dialogRoleDescription = '';
+    this.dialogRoleDeleteConfirmation = '';
+    this.dialogMember = null;
+    this.dialogMemberRoles = [];
+    this.dialogApp = null;
+    this.dialogAppMappings = [];
+  }
+
+  private openRoleUpsertDialog(roleArg?: IIdpAdminOrgRoleDefinition) {
+    this.dialogMode = 'role-upsert';
+    this.dialogError = '';
+    this.dialogRoleKey = roleArg?.key || '';
+    this.dialogRoleName = roleArg?.name || '';
+    this.dialogRoleDescription = roleArg?.description || '';
+  }
+
+  private openRoleDeleteDialog(roleArg: IIdpAdminOrgRoleDefinition) {
+    this.dialogMode = 'role-delete';
+    this.dialogError = '';
+    this.dialogRoleKey = roleArg.key;
+    this.dialogRoleName = roleArg.name;
+    this.dialogRoleDescription = roleArg.description || '';
+    this.dialogRoleDeleteConfirmation = '';
+  }
+
+  private openMemberRolesDialog(memberArg: IIdpAdminMember) {
+    this.dialogMode = 'member-roles';
+    this.dialogError = '';
+    this.dialogMember = memberArg;
+    this.dialogMemberRoles = [...memberArg.roles];
+  }
+
+  private openAppRoleMappingsDialog(appArg: IIdpAdminApp) {
+    this.dialogMode = 'app-role-mappings';
+    this.dialogError = '';
+    this.dialogApp = appArg;
+    this.dialogAppMappings = this.availableOrgRoles.map((roleArg) => {
+      const existingMapping = (appArg.roleMappings || []).find((mappingArg) => mappingArg.orgRoleKey === roleArg.key);
+      return {
+        orgRoleKey: roleArg.key,
+        appRoles: [...(existingMapping?.appRoles || [])],
+        permissions: [...(existingMapping?.permissions || [])],
+        scopes: [...(existingMapping?.scopes || [])],
+      };
+    });
+  }
+
+  private setDialogRoleField(fieldArg: 'key' | 'name' | 'description' | 'deleteConfirmation', eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    if (fieldArg === 'key') this.dialogRoleKey = this.normalizeRoleKey(value);
+    if (fieldArg === 'name') {
+      this.dialogRoleName = value;
+      if (!this.dialogRoleKey) {
+        this.dialogRoleKey = this.normalizeRoleKey(value);
+      }
+    }
+    if (fieldArg === 'description') this.dialogRoleDescription = value;
+    if (fieldArg === 'deleteConfirmation') this.dialogRoleDeleteConfirmation = value;
+    this.dialogError = '';
+  }
+
+  private toggleDialogMemberRole(roleKeyArg: string, checkedArg: boolean) {
+    const nextRoles = new Set(this.dialogMemberRoles);
+    if (checkedArg) {
+      nextRoles.add(roleKeyArg);
+    } else {
+      nextRoles.delete(roleKeyArg);
+    }
+    this.dialogMemberRoles = [...nextRoles];
+    this.dialogError = '';
+  }
+
+  private setDialogMappingField(roleKeyArg: string, fieldArg: 'appRoles' | 'permissions' | 'scopes', eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    this.dialogAppMappings = this.dialogAppMappings.map((mappingArg) => mappingArg.orgRoleKey === roleKeyArg
+      ? { ...mappingArg, [fieldArg]: this.parseCsv(value) }
+      : mappingArg
+    );
+    this.dialogError = '';
+  }
+
+  private submitRoleUpsertDialog() {
+    const key = this.normalizeRoleKey(this.dialogRoleKey);
+    const name = this.dialogRoleName.trim();
+    if (!key || !name) {
+      this.dialogError = 'Role key and name are required.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminOrgRoleUpsertEventDetail>('idp-admin-org-role-upsert', {
+      organizationId: this.currentOrg.id,
+      roleDefinition: {
+        key,
+        name,
+        description: this.dialogRoleDescription.trim(),
+      },
+    });
+    this.closeDialog();
+  }
+
+  private submitRoleDeleteDialog() {
+    const expectedText = `delete role ${this.dialogRoleKey}`;
+    if (this.dialogRoleDeleteConfirmation.trim() !== expectedText) {
+      this.dialogError = `Type ${expectedText} to confirm role deletion.`;
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminOrgRoleDeleteEventDetail>('idp-admin-org-role-delete', {
+      organizationId: this.currentOrg.id,
+      roleKey: this.dialogRoleKey,
+      confirmationText: this.dialogRoleDeleteConfirmation.trim(),
+    });
+    this.closeDialog();
+  }
+
+  private submitMemberRolesDialog() {
+    if (!this.dialogMember) return;
+    if (!this.dialogMemberRoles.length) {
+      this.dialogError = 'At least one role is required.';
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminMemberRolesEventDetail>('idp-admin-member-roles-update', {
+      userId: this.dialogMember.userId,
+      roles: this.dialogMemberRoles,
+    });
+    this.closeDialog();
+  }
+
+  private submitAppRoleMappingsDialog() {
+    if (!this.dialogApp) return;
+    const roleMappings = this.dialogAppMappings
+      .map((mappingArg) => ({
+        orgRoleKey: mappingArg.orgRoleKey,
+        appRoles: [...mappingArg.appRoles],
+        permissions: [...mappingArg.permissions],
+        scopes: [...mappingArg.scopes],
+      }))
+      .filter((mappingArg) => mappingArg.appRoles.length || mappingArg.permissions.length || mappingArg.scopes.length);
+    const allowedScopes = this.dialogApp.scopes || [];
+    const invalidScopes = roleMappings.flatMap((mappingArg) => mappingArg.scopes).filter((scopeArg) => !allowedScopes.includes(scopeArg));
+    if (invalidScopes.length) {
+      this.dialogError = `Unsupported app scopes: ${[...new Set(invalidScopes)].join(', ')}.`;
+      return;
+    }
+    this.dispatchShellEvent<IIdpAdminAppRoleMappingsEventDetail>('idp-admin-app-role-mappings-update', {
+      organizationId: this.currentOrg.id,
+      appId: this.dialogApp.id,
+      roleMappings,
+    });
+    this.closeDialog();
+  }
+
+  private renderDialogError(): TemplateResult {
+    return this.dialogError
+      ? html`<div class="notice-card" style="border-color:var(--idp-error-border);background:var(--idp-error-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-error)"></idp-icon><div><div class="section-title" style="color:var(--idp-error)">Action blocked</div><div class="muted">${this.dialogError}</div></div></div>`
+      : html``;
+  }
+
+  private renderRoleUpsertDialog(): TemplateResult {
+    const isEdit = this.orgRoleDefinitions.some((roleArg) => roleArg.key === this.dialogRoleKey);
+    return html`
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">${isEdit ? 'Edit custom role' : 'Add custom role'}</div><div class="muted">Custom roles model organisation-specific business access.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${this.renderFormRow('Role name', 'Readable label shown to admins.', html`<input class="input" .value=${this.dialogRoleName} @input=${(eventArg: Event) => this.setDialogRoleField('name', eventArg)} />`, true)}
+          ${this.renderFormRow('Role key', 'Lowercase stable identifier used in assignments and app mappings.', html`<input class="input" .value=${this.dialogRoleKey} @input=${(eventArg: Event) => this.setDialogRoleField('key', eventArg)} ?disabled=${isEdit} />`, true)}
+          ${this.renderFormRow('Description', 'Optional admin note describing when this role should be used.', html`<textarea class="textarea" .value=${this.dialogRoleDescription} @input=${(eventArg: Event) => this.setDialogRoleField('description', eventArg)}></textarea>`)}
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button primary" @click=${() => this.submitRoleUpsertDialog()}>Save role</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderRoleDeleteDialog(): TemplateResult {
+    const expectedText = `delete role ${this.dialogRoleKey}`;
+    return html`
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Delete custom role</div><div class="muted">This removes the role from member assignments and app mappings after backend confirmation.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          <div class="notice-card" style="border-color:var(--idp-error-border);background:var(--idp-error-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-error)"></idp-icon><div><div class="section-title" style="color:var(--idp-error)">${this.dialogRoleName}</div><div class="muted">Type <span class="mono">${expectedText}</span> to confirm deletion.</div></div></div>
+          ${this.renderFormRow('Confirmation', `Type ${expectedText}`, html`<input class="input" .value=${this.dialogRoleDeleteConfirmation} @input=${(eventArg: Event) => this.setDialogRoleField('deleteConfirmation', eventArg)} />`, true)}
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button destructive" @click=${() => this.submitRoleDeleteDialog()}>Delete role</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMemberRolesDialog(): TemplateResult {
+    const member = this.dialogMember;
+    return html`
+      <div class="dialog-card" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Edit member roles</div><div class="muted">${member?.name || member?.email || 'Member'} receives the selected organisation roles.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          <div class="role-grid">
+            ${this.availableOrgRoles.map((roleArg) => {
+              const checked = this.dialogMemberRoles.includes(roleArg.key);
+              return html`
+                <label class="role-option">
+                  <input type="checkbox" .checked=${checked} @change=${(eventArg: Event) => this.toggleDialogMemberRole(roleArg.key, (eventArg.target as HTMLInputElement).checked)} />
+                  <span><span class="section-title">${roleArg.name}</span><span class="muted" style="display:block">${roleArg.description || roleArg.key}</span></span>
+                </label>
+              `;
+            })}
+          </div>
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button primary" @click=${() => this.submitMemberRolesDialog()}>Save roles</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderAppRoleMappingsDialog(): TemplateResult {
+    const app = this.dialogApp;
+    return html`
+      <div class="dialog-card wide" @click=${(eventArg: Event) => eventArg.stopPropagation()}>
+        <div class="dialog-head">
+          <div><div class="dialog-title">Map organisation roles</div><div class="muted">Map ${this.currentOrg.name} roles to app-specific roles, permissions, and OAuth scopes for ${app?.name || 'this app'}.</div></div>
+          <button class="plain-button ghost" @click=${() => this.closeDialog()}>Close</button>
+        </div>
+        <div class="dialog-body">
+          ${this.renderDialogError()}
+          ${app?.scopes?.length ? html`<div class="muted">Available OAuth scopes: <span class="mono">${app.scopes.join(', ')}</span></div>` : html`<div class="muted">This app has no declared OAuth scopes. Role and permission mappings are still supported.</div>`}
+          ${this.dialogAppMappings.map((mappingArg) => {
+            const role = this.availableOrgRoles.find((roleArg) => roleArg.key === mappingArg.orgRoleKey);
+            return html`
+              <div class="mapping-row">
+                <div class="mapping-role">${role?.name || mappingArg.orgRoleKey}<span class="muted">${mappingArg.orgRoleKey}</span></div>
+                <div>${this.renderFormRow('App roles', '', html`<input class="input" .value=${mappingArg.appRoles.join(', ')} @input=${(eventArg: Event) => this.setDialogMappingField(mappingArg.orgRoleKey, 'appRoles', eventArg)} />`)}</div>
+                <div>${this.renderFormRow('Permissions', '', html`<input class="input" .value=${mappingArg.permissions.join(', ')} @input=${(eventArg: Event) => this.setDialogMappingField(mappingArg.orgRoleKey, 'permissions', eventArg)} />`)}</div>
+                <div>${this.renderFormRow('Scopes', '', html`<input class="input" .value=${mappingArg.scopes.join(', ')} @input=${(eventArg: Event) => this.setDialogMappingField(mappingArg.orgRoleKey, 'scopes', eventArg)} />`)}</div>
+              </div>
+            `;
+          })}
+        </div>
+        <div class="dialog-actions">
+          <button class="plain-button outline" @click=${() => this.closeDialog()}>Cancel</button>
+          <button class="plain-button primary" @click=${() => this.submitAppRoleMappingsDialog()}>Save mappings</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderDialog(): TemplateResult {
+    if (this.dialogMode === 'none') {
+      return html``;
+    }
+
+    const dialog = this.dialogMode === 'role-upsert'
+      ? this.renderRoleUpsertDialog()
+      : this.dialogMode === 'role-delete'
+        ? this.renderRoleDeleteDialog()
+        : this.dialogMode === 'member-roles'
+          ? this.renderMemberRolesDialog()
+          : this.renderAppRoleMappingsDialog();
+    return html`<div class="dialog-backdrop" @click=${() => this.closeDialog()}>${dialog}</div>`;
+  }
+
+  private renderNavGroup(items: TNavItem[], active = ''): TemplateResult {
+    return html`
+      <div class="nav-list">
+        ${items.map((item) => html`
+          <button class="nav-item ${item.id === active ? 'active' : ''}" @click=${() => this.setPage(item.id)}>
+            <idp-icon name=${item.icon as any} size="14"></idp-icon>
+            ${item.label}
+            ${item.badge ? html`<idp-badge variant="accent" style="margin-left:auto">${item.badge}</idp-badge>` : html``}
+          </button>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderSidebar(): TemplateResult {
+    const currentOrg = this.currentOrg;
+    return html`
+      <aside class="sidebar">
+        <div class="logo-block">
+          <div class="logo">
+            <div class="logo-icon" aria-hidden="true">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+              </svg>
+            </div>
+            <span class="logo-text">idp.global</span>
+          </div>
+        </div>
+        <div class="nav-wrap">
+          <div class="nav-section"><div class="nav-title">Workspace</div>${this.renderNavGroup(this.workspaceNav, this.page)}</div>
+          <div class="nav-section"><div class="nav-title">My Account</div>${this.renderNavGroup(this.accountNav, this.page)}</div>
+          <div class="nav-section">
+            <div class="nav-title">Organisation</div>
+            <div class="org-switch-wrap">
+              <button class="org-switch ${this.orgMenuOpen ? 'open' : ''}" @click=${() => { this.orgMenuOpen = !this.orgMenuOpen; }}>
+                <span class="org-avatar">${currentOrg.name.slice(0, 2).toUpperCase()}</span>
+                <span class="org-name">${currentOrg.name}</span>
+                <idp-icon name="chevron-down" size="10"></idp-icon>
+              </button>
+              ${this.orgMenuOpen ? html`
+                <div class="org-menu">
+                  <div class="org-menu-title">Switch organisation</div>
+                  ${this.safeOrgs.map((orgArg) => html`
+                    <button class="org-menu-item ${orgArg.id === this.selectedOrgId ? 'selected' : ''}" @click=${() => this.selectOrg(orgArg.id)}>
+                      <span class="org-avatar">${orgArg.name.slice(0, 2).toUpperCase()}</span>
+                      <span style="flex:1;min-width:0"><span class="org-menu-name">${orgArg.name}</span><span class="org-menu-role">${orgArg.myRole || 'member'}</span></span>
+                      ${orgArg.id === this.selectedOrgId ? html`<idp-icon name="check" size="11"></idp-icon>` : html``}
+                    </button>
+                  `)}
+                  <div class="org-menu-divider"></div>
+                  <button class="org-create" @click=${() => this.requestOrgCreate()}><span class="org-create-icon"><idp-icon name="plus" size="9"></idp-icon></span>Create organisation</button>
+                </div>
+              ` : html``}
+            </div>
+            ${this.renderNavGroup(this.orgNav, this.page)}
+          </div>
+          <div class="nav-section"><div class="nav-title">Support</div>${this.renderNavGroup(this.supportNav, this.page)}</div>
+          ${this.globalAdmin ? html`<div class="nav-section"><div class="nav-title">Global Admin</div>${this.renderNavGroup(this.adminNav, this.page)}</div>` : html``}
+        </div>
+        <div class="user-footer">
+          <span class="user-avatar">${this.userInitials}</span>
+          <div class="user-meta"><div class="user-name">${this.user?.name || 'Unknown User'}</div><div class="user-email">${this.user?.email || 'No email'}</div></div>
+        </div>
+      </aside>
+    `;
+  }
+
+  private renderSparkline(data: number[], color: string): TemplateResult {
+    const max = Math.max(...data);
+    const min = Math.min(...data);
+    const range = max - min || 1;
+    const width = 100;
+    const height = 22;
+    const points = data.map((valueArg, indexArg) => {
+      const x = (indexArg / (data.length - 1)) * width;
+      const y = height - ((valueArg - min) / range) * (height - 4) - 2;
+      return `${x},${y}`;
+    }).join(' ');
+    const area = `0,${height} ${points} ${width},${height}`;
+
+    return html`
+      <svg viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
+        <polygon points=${area} fill=${color} opacity="0.12"></polygon>
+        <polyline points=${points} fill="none" stroke=${color} stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></polyline>
+      </svg>
+    `;
+  }
+
+  private renderKpi(kpi: TKpi): TemplateResult {
+    return html`
+      <div class="kpi" style="--kpi-accent:${kpi.accent}">
+        <div class="kpi-label">${kpi.label}</div>
+        <div class="kpi-value">${kpi.value}${kpi.unit ? html`<span>${kpi.unit}</span>` : html``}</div>
+        <div class="kpi-sub">${kpi.sub}</div>
+        <div class="kpi-foot">
+          <span class="delta">${kpi.deltaKind === 'live' ? html`<span class="live-dot"></span>` : html``}${kpi.delta}</span>
+          <div class="sparkline">${this.renderSparkline(kpi.spark, kpi.sparkColor)}</div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderPageHeader(titleArg: string, descriptionArg: string, actionArg?: TemplateResult): TemplateResult {
+    return html`
+      <header class="page-head">
+        <div><h1>${titleArg}</h1><div class="lead">${descriptionArg}</div></div>
+        ${actionArg ? html`<div class="page-actions">${actionArg}</div>` : html``}
+      </header>
+    `;
+  }
+
+  private renderSectionCard(titleArg: string, descriptionArg: string, contentArg: TemplateResult, actionArg?: TemplateResult): TemplateResult {
+    return html`
+      <section class="section-card">
+        ${titleArg || actionArg ? html`
+          <div class="section-headline">
+            <div><div class="section-title">${titleArg}</div>${descriptionArg ? html`<div class="section-description">${descriptionArg}</div>` : html``}</div>
+            ${actionArg}
+          </div>
+        ` : html``}
+        ${contentArg}
+      </section>
+    `;
+  }
+
+  private renderFormRow(labelArg: string, hintArg: string, contentArg: TemplateResult, requiredArg = false): TemplateResult {
+    return html`
+      <div class="form-row">
+        <div><div class="form-label">${labelArg}${requiredArg ? html`<span style="color:var(--idp-error)">*</span>` : html``}</div>${hintArg ? html`<div class="form-hint">${hintArg}</div>` : html``}</div>
+        <div>${contentArg}</div>
+      </div>
+    `;
+  }
+
+  private renderCodeBlock(valueArg: string): TemplateResult {
+    return html`<div class="code-block"><code>${valueArg}</code><idp-icon name="copy" size="13"></idp-icon></div>`;
+  }
+
+  private renderOverview(): TemplateResult {
+    const firstName = this.user?.name?.split(' ')[0] || 'there';
+    const activeSessionCount = this.sessions.filter((sessionArg) => sessionArg.isCurrent).length || this.sessions.length;
+    const activePassportCount = this.passportDevices.filter((deviceArg) => deviceArg.status === 'active').length;
+    const kpis: TKpi[] = [
+      {
+        label: 'Organisations',
+        value: String(this.orgs.length),
+        delta: 'live',
+        deltaKind: 'live',
+        spark: [1, 1, 1, 1, 1, 1, 1, Math.max(this.orgs.length, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-chart-1)',
+        sub: 'Memberships visible to this account',
+      },
+      {
+        label: 'Sessions',
+        value: String(this.sessions.length),
+        delta: `${activeSessionCount} active`,
+        deltaKind: 'up',
+        spark: [1, 2, 1, 2, 3, 2, Math.max(this.sessions.length, 1)],
+        sparkColor: 'var(--idp-spark-up)',
+        accent: 'var(--idp-chart-2)',
+        sub: this.sessions.length ? `Latest ${this.formatTimeAgo(Math.max(...this.sessions.map((sessionArg) => sessionArg.lastActive)))}` : 'No active sessions loaded',
+      },
+      {
+        label: 'Passport devices',
+        value: String(this.passportDevices.length),
+        delta: `${activePassportCount} active`,
+        deltaKind: 'live',
+        spark: [1, 1, 1, Math.max(this.passportDevices.length, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-chart-5)',
+        sub: 'Cryptographic credentials',
+      },
+      {
+        label: 'Activity',
+        value: String(this.activities.length),
+        delta: 'live',
+        deltaKind: 'live',
+        spark: [1, 2, 2, 3, Math.max(this.activities.length, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-info)',
+        sub: 'Recent account events',
+      },
+    ];
+    return html`
+      <header class="page-head">
+        <div>
+          <div class="eyebrow-row"><span class="eyebrow">Account - Overview</span><span class="live-pill"><span class="live-dot"></span>live</span></div>
+          <h1>Good morning, ${firstName}.</h1>
+          <div class="lead">Account-wide operational snapshot using live identity data.</div>
+        </div>
+        <div class="page-actions"><button class="plain-button outline" @click=${() => this.setPage('sessions')}>Review sessions</button><button class="plain-button primary" @click=${() => this.setPage('security')}>Manage security</button></div>
+      </header>
+      <div class="body">
+        <div class="kpis">${kpis.map((kpiArg) => this.renderKpi(kpiArg))}</div>
+        ${this.dataLoading || this.dataError ? this.renderDataState('No overview data', 'The console has not received live account data yet.', 'activity') : html``}
+        <div class="primary-grid">
+          <div class="card">
+            <div class="card-head"><span class="card-title">Recent activity</span><idp-badge>${this.activities.length} events</idp-badge></div>
+            ${this.activities.length ? this.activities.slice(0, 8).map((activityArg) => html`
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
+            `) : this.renderStateCard('No activity yet', 'Activity events will appear here after logins, app changes, and organisation updates.', 'activity')}
+          </div>
+          <div class="card">
+            <div class="card-head"><span class="card-title">Current sessions</span><idp-badge>${this.sessions.length} total</idp-badge></div>
+            ${this.sessions.length ? this.sessions.slice(0, 5).map((sessionArg) => html`
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:${sessionArg.isCurrent ? 'var(--idp-ok)' : 'var(--idp-muted-fg)'}"></span><div class="feed-text"><strong>${sessionArg.deviceName || 'Unknown device'}</strong> - <span class="mono">${sessionArg.browser} ${sessionArg.os}</span></div><span class="feed-meta">${this.formatTimeAgo(sessionArg.lastActive)}</span></div>
+            `) : this.renderStateCard('No sessions loaded', 'Active session telemetry is unavailable or there are no sessions.', 'monitor')}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderProfile(): TemplateResult {
+    const username = this.user?.username || this.user?.email?.split('@')[0] || '';
+    const status = this.user?.status || 'active';
+    return html`
+      ${this.renderPageHeader('Profile', 'Your personal identity details visible to connected apps.')}
+      <div class="body narrow-body">
+        ${this.renderSectionCard('Avatar', 'Shown to apps that request your profile.', html`<div class="split-row" style="justify-content:flex-start"><span class="avatar" style="width:56px;height:56px;font-size:20px">${this.userInitials}</span><div><div class="section-title">${this.user?.name || 'Unknown User'}</div><div class="muted" style="margin-top:5px">Profile update endpoints are not exposed in this console yet.</div></div></div>`)}
+        ${this.renderSectionCard('Personal information', '', html`
+          ${this.renderFormRow('Full name', '', html`<input class="input" .value=${this.user?.name || ''} disabled />`, true)}
+          ${this.renderFormRow('Username', 'Used in your public profile URL', html`<div class="input-group"><span class="input-prefix">idp.global/user/</span><input class="input" .value=${username} disabled /></div>`)}
+          ${this.renderFormRow('Email', 'Primary address for login and notifications', html`<input class="input" .value=${this.user?.email || ''} disabled />`)}
+          ${this.renderFormRow('Mobile number', 'Used for SMS verification', html`<input class="input" .value=${this.user?.mobileNumber || ''} disabled />`)}
+        `)}
+        ${this.renderSectionCard('Account status', '', html`<div class="split-row"><div><div class="section-title">Status</div><div class="muted">Your account is currently ${status}.</div></div><idp-badge variant=${status === 'active' ? 'ok' : status === 'suspended' ? 'error' : 'warn'}>${status}</idp-badge></div>${this.globalAdmin ? html`<div class="divider"></div><div class="split-row"><div><div class="section-title">Global admin</div><div class="muted">You have platform-wide administrative access.</div></div><idp-badge variant="accent">Admin</idp-badge></div>` : html``}`)}
+      </div>
+    `;
+  }
+
+  private renderSecurity(): TemplateResult {
+    const passportRows = this.passportDevices.map((deviceArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(deviceArg.label)}</span>
+            <div>
+              <div class="identity-primary">${deviceArg.label}</div>
+              <div class="identity-secondary">${deviceArg.platform}${deviceArg.appVersion ? ` - ${deviceArg.appVersion}` : ''}</div>
+            </div>
+          </div>
+        `,
+        html`<idp-badge variant=${deviceArg.status === 'active' ? 'ok' : 'error'}>${deviceArg.status}</idp-badge>`,
+        [
+          deviceArg.capabilities?.push ? 'push' : '',
+          deviceArg.capabilities?.nfc ? 'nfc' : '',
+          deviceArg.capabilities?.gps ? 'gps' : '',
+        ].filter(Boolean).join(', ') || '-',
+        deviceArg.lastSeenAt ? this.formatTimeAgo(deviceArg.lastSeenAt) : 'never',
+        html`<div class="cell-actions"><button class="table-action destructive" @click=${() => this.dispatchShellEvent<IIdpAdminPassportDeviceEventDetail>('idp-admin-passport-revoke', { deviceId: deviceArg.id })}>Revoke</button></div>`,
+      ],
+    }));
+
+    return html`
+      ${this.renderPageHeader('Security', 'Manage how you authenticate and protect your account.')}
+      <div class="body wide-body">
+        ${this.credentialMessage ? html`<div class="notice-card"><idp-icon name="shield" size="16"></idp-icon><div><div class="section-title">Credential update</div><div class="muted">${this.credentialMessage}</div></div></div>` : html``}
+        ${this.credentialError ? html`<div class="notice-card" style="border-color:var(--idp-error-border);background:var(--idp-error-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-error)"></idp-icon><div><div class="section-title" style="color:var(--idp-error)">Credential error</div><div class="muted">${this.credentialError}</div></div></div>` : html``}
+        ${this.renderSectionCard('Session security', 'Live session data is available and sessions can be revoked from the device list.', html`
+          <div class="split-row"><div><div class="section-title">Active sessions</div><div class="muted">Review and revoke sessions from the Sessions & Devices page.</div></div><idp-badge variant="accent">${this.sessions.length}</idp-badge></div>
+          <div class="divider"></div>
+          <button class="plain-button outline" @click=${() => this.setPage('sessions')}>Open sessions</button>
+        `)}
+        ${this.renderSectionCard('Password', 'Change your password using the existing production password endpoint. All fields are required.', html`
+          ${this.renderFormRow('Current password', '', html`<input class="input" type="password" autocomplete="current-password" .value=${this.currentPassword} @input=${(eventArg: Event) => this.setPasswordField('current', eventArg)} />`, true)}
+          ${this.renderFormRow('New password', 'Minimum 12 characters.', html`<input class="input" type="password" autocomplete="new-password" .value=${this.newPassword} @input=${(eventArg: Event) => this.setPasswordField('new', eventArg)} />`, true)}
+          ${this.renderFormRow('Confirm password', '', html`<input class="input" type="password" autocomplete="new-password" .value=${this.confirmPassword} @input=${(eventArg: Event) => this.setPasswordField('confirm', eventArg)} />`, true)}
+          <div class="divider"></div>
+          <button class="plain-button primary" @click=${() => this.submitPasswordChange()}>Update password</button>
+        `)}
+        <idp-data-table
+          title="Passport devices"
+          subtitle="Cryptographic IDP Passport devices registered for this account."
+          badge=${`${this.passportDevices.length} total`}
+          empty-title="No passport devices"
+          empty-description="Passport devices will appear here after enrollment from the mobile passport app."
+          .columns=${[
+            { label: 'Device' },
+            { label: 'Status' },
+            { label: 'Capabilities', hideBelow: 'mobile' },
+            { label: 'Last seen', mono: true, hideBelow: 'mobile' },
+            { label: 'Action', align: 'right' },
+          ]}
+          .rows=${passportRows}
+        ></idp-data-table>
+        <div class="section-card">
+          <div class="section-headline">
+            <div><div class="section-title">Enroll passport device</div><div class="section-description">Creates a signed enrollment challenge for the IDP Passport device flow.</div></div>
+            <button class="plain-button outline" @click=${() => this.requestPassportEnrollment()}>Create challenge</button>
+          </div>
+          ${this.passportEnrollment ? html`
+            <div class="notice-card" style="margin-bottom:14px"><idp-icon name="key" size="16"></idp-icon><div><div class="section-title">Enrollment challenge ready</div><div class="muted">Expires ${new Date(this.passportEnrollment.expiresAt).toLocaleString()}. Use the pairing token or payload in a passport client to complete enrollment.</div></div></div>
+            ${this.renderFormRow('Pairing token', '', this.renderCodeBlock(this.passportEnrollment.pairingToken))}
+            ${this.renderFormRow('Pairing payload', '', this.renderCodeBlock(this.passportEnrollment.pairingPayload))}
+            ${this.renderFormRow('Signing payload', '', this.renderCodeBlock(this.passportEnrollment.signingPayload))}
+          ` : html`<div class="muted">No active enrollment challenge.</div>`}
+        </div>
+        <div class="primary-grid">
+          ${this.renderStateCard('TOTP controls not connected', 'No TOTP secret, enrollment, or verification endpoints exist in this backend yet, so no fake TOTP toggle is shown.', 'lock')}
+          ${this.renderStateCard('WebAuthn passkeys not connected', 'No WebAuthn passkey credential model or assertion endpoints exist yet. Passport devices are the available cryptographic credential path.', 'key')}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderSessions(): TemplateResult {
+    return html`
+      ${this.renderPageHeader('Sessions & Devices', 'Active login sessions across all your devices.')}
+      <div class="body narrow-body"><div class="list-stack">
+        ${this.sessions.length ? this.sessions.map((sessionArg) => html`
+          <div class="row-card">
+            <span class="icon-tile"><idp-icon name="monitor" size="17"></idp-icon></span>
+            <div style="flex:1">
+              <div style="display:flex;gap:8px;align-items:center"><span class="section-title">${sessionArg.deviceName || 'Unknown device'}</span>${sessionArg.isCurrent ? html`<idp-badge variant="ok">Current session</idp-badge>` : html``}</div>
+              <div class="muted">${sessionArg.browser || 'Unknown browser'} - ${sessionArg.os || 'Unknown OS'} - IP: <span class="mono">${sessionArg.ip || 'unknown'}</span></div>
+              <div class="muted">Started ${this.formatTimeAgo(sessionArg.createdAt)} - Active ${this.formatTimeAgo(sessionArg.lastActive)}</div>
+            </div>
+            ${sessionArg.isCurrent ? html`` : html`<button class="plain-button ghost" style="color:var(--idp-error)" @click=${() => this.dispatchShellEvent<IIdpAdminSessionEventDetail>('idp-admin-session-revoke', { sessionId: sessionArg.id })}>Revoke</button>`}
+          </div>
+        `) : this.renderDataState('No sessions', 'There are no active sessions for this account or session telemetry is unavailable.', 'monitor')}
+      </div></div>
+    `;
+  }
+
+  private renderAccountApps(): TemplateResult {
+    const apps = this.accountApps;
+    return html`
+      ${this.renderPageHeader('Connected Apps', 'Third-party apps and services that have OAuth access to your account.')}
+      <div class="body narrow-body"><div class="list-stack">
+        ${apps.length ? apps.map((appArg) => html`<div class="row-card"><span class="app-avatar">${appArg.name.slice(0, 2).toUpperCase()}</span><div style="flex:1"><div class="section-title" style="margin-bottom:4px">${appArg.name}</div><div class="chip-row">${(appArg.scopes || []).map((scopeArg) => html`<idp-badge variant="outline">${scopeArg}</idp-badge>`)}</div><div class="muted" style="margin-top:6px">${appArg.description || appArg.appUrl || 'Connected application'}</div></div><button class="plain-button ghost" style="color:var(--idp-error)" @click=${() => this.dispatchShellEvent<IIdpAdminAppToggleEventDetail>('idp-admin-app-toggle', { appId: appArg.id, connected: false })}>Revoke</button></div>`) : this.renderDataState('Account app grants not connected', 'No account-level OAuth grant endpoint is wired into this app yet. Organisation app connections are managed under Organisation > OAuth Apps.', 'grid')}
+      </div></div>
+    `;
+  }
+
+  private renderOrgGeneral(): TemplateResult {
+    const org = this.currentOrg;
+    const connectedAppCount = this.orgApps.filter((appArg) => appArg.isConnected).length;
+    const orgActivities = this.activities
+      .filter((activityArg) => {
+        const searchableText = `${activityArg.targetType || ''} ${activityArg.description || ''}`.toLowerCase();
+        return Boolean(org.slug && searchableText.includes(org.slug.toLowerCase()))
+          || Boolean(org.name && searchableText.includes(org.name.toLowerCase()))
+          || searchableText.includes('org')
+          || searchableText.includes('organization')
+          || searchableText.includes('organisation');
+      })
+      .slice(0, 5);
+    const kpis: TKpi[] = [
+      {
+        label: 'Members',
+        value: String(this.orgMembers.length),
+        delta: `${this.orgInvitations.length} pending`,
+        deltaKind: 'up',
+        spark: [1, 1, 2, Math.max(this.orgMembers.length, 1)],
+        sparkColor: 'var(--idp-spark-up)',
+        accent: 'var(--idp-chart-5)',
+        sub: org.name,
+      },
+      {
+        label: 'Connected apps',
+        value: String(connectedAppCount),
+        delta: `${this.orgApps.length} available`,
+        deltaKind: 'live',
+        spark: [1, 2, 2, Math.max(connectedAppCount, 1)],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-info)',
+        sub: 'Organisation OAuth catalogue',
+      },
+      {
+        label: 'Role',
+        value: org.myRole || 'member',
+        delta: 'live',
+        deltaKind: 'live',
+        spark: [1, 1, 1, 1],
+        sparkColor: 'var(--idp-spark-info)',
+        accent: 'var(--idp-chart-1)',
+        sub: 'Your access level',
+      },
+      {
+        label: 'Activity',
+        value: String(orgActivities.length),
+        delta: `${this.activities.length} account events`,
+        deltaKind: 'up',
+        spark: [1, 1, Math.max(orgActivities.length, 1)],
+        sparkColor: 'var(--idp-spark-up)',
+        accent: 'var(--idp-chart-2)',
+        sub: 'Recent org-related events',
+      },
+    ];
+
+    return html`
+      <header class="page-head">
+        <div>
+          <div class="eyebrow-row"><span class="eyebrow">Organisation - General</span><span class="live-pill"><span class="live-dot"></span>live</span></div>
+          <h1>${org.name}</h1>
+          <div class="lead">Selected organisation dashboard for <code>${org.slug ? `@${org.slug}` : org.id || 'no organisation selected'}</code>.</div>
+        </div>
+        <div class="page-actions"><button class="plain-button outline" @click=${() => this.setPage('org-members')}>Manage members</button><button class="plain-button primary" @click=${() => this.setPage('org-apps')}>Manage apps</button></div>
+      </header>
+      <div class="body">
+        <div class="kpis">${kpis.map((kpiArg) => this.renderKpi(kpiArg))}</div>
+        ${this.dataLoading || this.dataError ? this.renderDataState('No organisation data', 'The console has not received live organisation data yet.', 'building') : html``}
+        <div class="primary-grid">
+          <div class="card">
+            <div class="card-head"><span class="card-title">Organisation profile</span><idp-badge>${org.myRole || 'member'}</idp-badge></div>
+            <div style="padding:16px">
+              <div style="display:flex;align-items:center;gap:14px;margin-bottom:16px"><span class="org-avatar" style="width:48px;height:48px;font-size:17px">${org.name.slice(0, 2).toUpperCase()}</span><div><div style="font-size:16px;font-weight:600;color:var(--idp-fg)">${org.name}</div><div class="mono">idp.global/org/${org.slug || 'unassigned'}</div></div></div>
+              ${this.renderCodeBlock(org.id || 'No organisation selected')}
+              <div class="muted" style="margin-top:10px">Rename, slug updates, ownership transfer, and deletion are available from Settings with server-side audited confirmation.</div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-head"><span class="card-title">Recent organisation activity</span><idp-badge>${orgActivities.length} events</idp-badge></div>
+            ${orgActivities.length ? orgActivities.map((activityArg) => html`
+              <div class="feed-item"><span class="feed-dot" style="--dot-color:var(--idp-info)"></span><div class="feed-text"><strong>${activityArg.action.replace(/_/g, ' ')}</strong> - ${activityArg.description}</div><span class="feed-meta">${this.formatTimeAgo(activityArg.timestamp)}</span></div>
+            `) : this.renderStateCard('No org activity yet', 'Organisation-related activity will appear here when the backend reports matching activity events.', 'activity')}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private renderOrgSettings(): TemplateResult {
+    const org = this.currentOrg;
+    this.syncOrgSettingsState();
+    const transferCandidates = this.orgMembers.filter((memberArg) => !memberArg.isCurrentUser);
+    const transferConfirmText = `transfer ${org.slug}`;
+    const deleteConfirmText = `delete ${org.slug}`;
+    const identityChanged = this.orgNameDraft.trim() !== org.name || this.orgSlugDraft.trim().toLowerCase() !== org.slug;
+    return html`
+      ${this.renderPageHeader('Organisation Settings', 'Audited configuration and owner-controlled destructive operations.')}
+      <div class="body narrow-body">
+        ${this.orgSettingsError ? html`<div class="notice-card" style="border-color:var(--idp-error-border);background:var(--idp-error-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-error)"></idp-icon><div><div class="section-title" style="color:var(--idp-error)">Settings action blocked</div><div class="muted">${this.orgSettingsError}</div></div></div>` : html``}
+        ${this.renderSectionCard('Organisation identity', `Type ${org.slug} to confirm name or slug changes. The backend verifies this confirmation before saving.`, html`
+          <div style="display:flex;align-items:center;gap:14px;margin-bottom:20px"><span class="org-avatar" style="width:48px;height:48px;font-size:17px">${org.name.slice(0, 2).toUpperCase()}</span><div><div style="font-size:16px;font-weight:600;color:var(--idp-fg)">${org.name}</div><div class="mono">idp.global/org/${org.slug}</div></div></div>
+          ${this.renderFormRow('Organisation name', '', html`<input class="input" .value=${this.orgNameDraft} @input=${(eventArg: Event) => this.setOrgSettingsField('name', eventArg)} />`, true)}
+          ${this.renderFormRow('URL slug', "Used in your org's public URLs.", html`<div class="input-group"><span class="input-prefix">idp.global/org/</span><input class="input" .value=${this.orgSlugDraft} @input=${(eventArg: Event) => this.setOrgSettingsField('slug', eventArg)} /></div>`)}
+          ${this.renderFormRow('Confirmation', `Type ${org.slug}`, html`<input class="input" .value=${this.orgSettingsConfirmation} @input=${(eventArg: Event) => this.setOrgSettingsField('settingsConfirmation', eventArg)} />`)}
+          <div class="divider"></div>
+          <button class="plain-button primary" ?disabled=${!identityChanged} @click=${() => this.submitOrgSettingsUpdate()}>Apply identity changes</button>
+        `)}
+        ${this.renderSectionCard('Organisation ID', 'Use this identifier when making API calls.', this.renderCodeBlock(org.id))}
+        ${this.renderSectionCard('Transfer ownership', `Owner-only operation. Type ${transferConfirmText} to confirm.`, html`
+          ${transferCandidates.length ? html`
+            ${this.renderFormRow('New owner', 'The target user must already be an organisation member.', html`
+              <select class="select" .value=${this.transferOwnerId} @change=${(eventArg: Event) => this.setOrgSettingsField('transferOwnerId', eventArg)}>
+                <option value="">Select a member</option>
+                ${transferCandidates.map((memberArg) => html`<option value=${memberArg.userId}>${memberArg.name || memberArg.email} (${memberArg.email})</option>`)}
+              </select>
+            `, true)}
+            ${this.renderFormRow('Confirmation', `Type ${transferConfirmText}`, html`<input class="input" .value=${this.transferConfirmation} @input=${(eventArg: Event) => this.setOrgSettingsField('transferConfirmation', eventArg)} />`)}
+            <div class="divider"></div>
+            <button class="plain-button outline" @click=${() => this.submitOrgTransfer()}>Transfer ownership</button>
+          ` : this.renderStateCard('No transfer candidates loaded', 'Load organisation members before transferring ownership.', 'users')}
+        `)}
+        ${this.renderSectionCard('Delete organisation', `Owner-only destructive operation. Type ${deleteConfirmText} to permanently remove this organisation, its memberships, pending invitations, billing records, and app connections.`, html`
+          ${this.renderFormRow('Confirmation', `Type ${deleteConfirmText}`, html`<input class="input" .value=${this.deleteConfirmation} @input=${(eventArg: Event) => this.setOrgSettingsField('deleteConfirmation', eventArg)} />`)}
+          <div class="divider"></div>
+          <button class="plain-button destructive" @click=${() => this.submitOrgDelete()}>Delete organisation</button>
+        `)}
+      </div>
+    `;
+  }
+
+  private renderOrgMembers(): TemplateResult {
+    const customRoleRows = this.orgRoleDefinitions.map((roleArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(roleArg.name)}</span>
+            <div>
+              <div class="identity-primary">${roleArg.name}</div>
+              <div class="identity-secondary">${roleArg.description || 'Custom organisation role'}</div>
+            </div>
+          </div>
+        `,
+        roleArg.key,
+        html`
+          <div class="cell-actions">
+            <button class="table-action" @click=${() => this.openRoleUpsertDialog(roleArg)}>Edit</button>
+            <button class="table-action destructive" @click=${() => this.openRoleDeleteDialog(roleArg)}>Delete</button>
+          </div>
+        `,
+      ],
+    }));
+    const memberRows = this.orgMembers.map((memberArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(memberArg.name || memberArg.email)}</span>
+            <div>
+              <div class="identity-primary">${memberArg.name || memberArg.email}</div>
+              <div class="identity-secondary">${memberArg.email}</div>
+            </div>
+          </div>
+        `,
+        html`<div class="chip-row">${memberArg.roles.map((roleArg) => html`<idp-badge variant=${this.roleVariant(roleArg)}>${roleArg}</idp-badge>`)}</div>`,
+        memberArg.isCurrentUser ? html`<idp-badge variant="accent">You</idp-badge>` : html`<idp-badge variant="outline">Member</idp-badge>`,
+        memberArg.roles.includes('owner') || memberArg.isCurrentUser
+          ? html`<div class="cell-actions"><button class="table-action" @click=${() => this.openMemberRolesDialog(memberArg)}>Edit roles</button></div>`
+          : html`<div class="cell-actions"><button class="table-action" @click=${() => this.openMemberRolesDialog(memberArg)}>Edit roles</button><button class="table-action destructive" @click=${() => this.dispatchShellEvent<IIdpAdminMemberEventDetail>('idp-admin-member-remove', { userId: memberArg.userId })}>Remove</button></div>`,
+      ],
+    }));
+    const invitationRows = this.orgInvitations.map((inviteArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(inviteArg.email)}</span>
+            <div>
+              <div class="identity-primary">${inviteArg.email}</div>
+              <div class="identity-secondary">Invited ${this.formatTimeAgo(inviteArg.invitedAt)}</div>
+            </div>
+          </div>
+        `,
+        html`<div class="chip-row">${inviteArg.roles.map((roleArg) => html`<idp-badge variant=${this.roleVariant(roleArg)}>${roleArg}</idp-badge>`)}</div>`,
+        new Date(inviteArg.expiresAt).toLocaleDateString(),
+        html`
+          <div class="cell-actions">
+            <button class="table-action" @click=${() => this.dispatchShellEvent<IIdpAdminInvitationEventDetail>('idp-admin-invitation-resend', { invitationId: inviteArg.id })}>Resend</button>
+            <button class="table-action destructive" @click=${() => this.dispatchShellEvent<IIdpAdminInvitationEventDetail>('idp-admin-invitation-cancel', { invitationId: inviteArg.id })}>Cancel</button>
+          </div>
+        `,
+      ],
+    }));
+
+    return html`
+      ${this.renderPageHeader('Members', `${this.orgMembers.length} members - ${this.orgInvitations.length} pending invitations`, html`<button class="plain-button primary" @click=${() => this.dispatchShellEvent('idp-admin-member-invite', { orgId: this.currentOrg.id })}><idp-icon name="plus" size="12"></idp-icon>Invite member</button>`)}
+      <div class="body wide-body">
+        ${this.orgSettingsError ? html`<div class="notice-card" style="border-color:var(--idp-error-border);background:var(--idp-error-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-error)"></idp-icon><div><div class="section-title" style="color:var(--idp-error)">Role action blocked</div><div class="muted">${this.orgSettingsError}</div></div></div>` : html``}
+        <idp-data-table
+          title="Custom organisation roles"
+          subtitle="Business roles defined by this organisation. Platform roles like owner/admin remain protected."
+          badge=${`${this.orgRoleDefinitions.length} custom`}
+          empty-title="No custom roles"
+          empty-description="Create custom roles such as Finance, Support Lead, or Contractor, then assign them to members."
+          .columns=${[
+            { label: 'Role' },
+            { label: 'Key', mono: true },
+            { label: 'Action', align: 'right' },
+          ]}
+          .rows=${customRoleRows}
+        ></idp-data-table>
+        <div><button class="plain-button outline" @click=${() => this.openRoleUpsertDialog()}><idp-icon name="plus" size="12"></idp-icon>Add custom role</button></div>
+        <idp-data-table
+          title="Members"
+          badge=${`${this.orgMembers.length} total`}
+          empty-title="No members loaded"
+          empty-description="Members will appear here after organisation membership data is loaded."
+          .columns=${[
+            { label: 'User' },
+            { label: 'Roles', hideBelow: 'mobile' },
+            { label: 'Status' },
+            { label: 'Action', align: 'right' },
+          ]}
+          .rows=${memberRows}
+        ></idp-data-table>
+        ${this.orgInvitations.length ? html`
+          <idp-data-table
+            title="Pending invitations"
+            badge=${`${this.orgInvitations.length} total`}
+            .columns=${[
+              { label: 'Invitee' },
+              { label: 'Roles', hideBelow: 'mobile' },
+              { label: 'Expires', mono: true },
+              { label: 'Action', align: 'right' },
+            ]}
+            .rows=${invitationRows}
+          ></idp-data-table>
+        ` : html``}
+      </div>
+    `;
+  }
+
+  private renderOrgApps(): TemplateResult {
+    const appRows = this.orgApps.map((appArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(appArg.name)}</span>
+            <div>
+              <div class="identity-primary">${appArg.name}</div>
+              <div class="identity-secondary">${appArg.description || appArg.appUrl || 'Global app'}</div>
+            </div>
+          </div>
+        `,
+        appArg.clientId || '-',
+        html`<div class="chip-row">${(appArg.scopes || []).slice(0, 4).map((scopeArg) => html`<idp-badge variant="outline">${scopeArg}</idp-badge>`)}</div>`,
+        html`<idp-badge variant=${appArg.isConnected ? 'ok' : 'outline'}>${appArg.isConnected ? 'connected' : 'available'}</idp-badge>`,
+        html`<idp-badge variant=${appArg.roleMappings?.length ? 'accent' : 'outline'}>${appArg.roleMappings?.length || 0} mappings</idp-badge>`,
+        html`<div class="cell-actions">${appArg.isConnected ? html`<button class="table-action" @click=${() => this.openAppRoleMappingsDialog(appArg)}>Map roles</button>` : html``}<button class="table-action ${appArg.isConnected ? '' : 'primary'}" @click=${() => this.dispatchShellEvent<IIdpAdminAppToggleEventDetail>('idp-admin-app-toggle', { appId: appArg.id, connected: !appArg.isConnected })}>${appArg.isConnected ? 'Disconnect' : 'Connect'}</button></div>`,
+      ],
+    }));
+
+    return html`
+      ${this.renderPageHeader('Apps', "Global apps connected to this organisation.")}
+      <div class="body wide-body">
+        ${this.orgSettingsError ? html`<div class="notice-card" style="border-color:var(--idp-error-border);background:var(--idp-error-bg)"><idp-icon name="alert" size="16" style="color:var(--idp-error)"></idp-icon><div><div class="section-title" style="color:var(--idp-error)">App mapping blocked</div><div class="muted">${this.orgSettingsError}</div></div></div>` : html``}
+        <idp-data-table
+          title="OAuth apps"
+          badge=${`${this.orgApps.length} total`}
+          empty-title="No apps available"
+          empty-description="Global apps will appear here after app catalogue data is loaded."
+          .columns=${[
+            { label: 'App' },
+            { label: 'Client ID', mono: true, hideBelow: 'tablet' },
+            { label: 'Scopes', hideBelow: 'mobile' },
+            { label: 'Status' },
+            { label: 'Role mappings' },
+            { label: 'Action', align: 'right' },
+          ]}
+          .rows=${appRows}
+        ></idp-data-table>
+      </div>
+    `;
+  }
+
+  private renderSupport(): TemplateResult {
+    const services = [
+      ['Account Recovery', 'Lost access to your account or locked out of your organisation? Our team will verify your identity and restore access securely.', 'EUR149', 'per incident', 'key', '1-2 business days'],
+      ['Organisation Recovery', 'All owners have lost access to your organisation. We can verify ownership and restore admin access.', 'EUR249', 'per incident', 'building', '2-3 business days'],
+      ['Data Export & Migration', 'Full export of your org data - users, sessions, app connections - for migration or compliance.', 'EUR199', 'per request', 'box', '3-5 business days'],
+      ['Identity & SSO Consulting', 'Architecture review, OIDC guidance, and custom SSO setup for your organisation stack.', 'EUR190', 'per hour', 'globe', 'Scheduled session'],
+      ['Security Review', 'Audit of connected apps, active sessions, passkey policies, and role assignments.', 'EUR390', 'per review', 'shield', '5-7 business days'],
+    ];
+    return html`
+      ${this.renderPageHeader('Support', 'idp.global is free for everyone. Paid options cover hands-on recovery and consulting work.')}
+      <div class="body narrow-body"><div class="row-card" style="background:var(--idp-accent-soft);border-color:var(--idp-info-border)"><idp-icon name="shield" size="16" style="color:var(--idp-accent)"></idp-icon><div><div class="section-title" style="color:var(--idp-accent)">idp.global is free, forever</div><div class="muted">All platform features - authentication, passkeys, OIDC apps, team management - are included at no cost.</div></div></div><div class="list-stack">${services.map((serviceArg) => html`<div class="row-card"><span class="icon-tile"><idp-icon name=${serviceArg[4] as any} size="16"></idp-icon></span><div style="flex:1"><div style="display:flex;gap:8px;align-items:baseline"><span class="section-title">${serviceArg[0]}</span><span class="muted">- ${serviceArg[5]}</span></div><div class="muted">${serviceArg[1]}</div><div style="display:flex;align-items:center;justify-content:space-between;margin-top:10px"><div><span style="font-size:16px;font-weight:700;color:var(--idp-fg)">${serviceArg[2]}</span> <span class="muted">${serviceArg[3]}</span></div><button class="plain-button outline" disabled>Request flow pending</button></div></div></div>`)}</div></div>
+    `;
+  }
+
+  private renderGAUsers(): TemplateResult {
+    return html`${this.renderPageHeader('All Users', 'Platform-wide user administration.')}<div class="body wide-body">${this.renderDataState('User directory not connected', 'The shell is ready for global user data, but no platform user-list endpoint is wired into this app yet. No demo users are shown in production mode.', 'users')}</div>`;
+  }
+
+  private renderGAOrgs(): TemplateResult {
+    const orgRows = this.orgs.map((orgArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(orgArg.name)}</span>
+            <div>
+              <div class="identity-primary">${orgArg.name}</div>
+              <div class="identity-secondary">${orgArg.slug ? `idp.global/org/${orgArg.slug}` : 'No slug'}</div>
+            </div>
+          </div>
+        `,
+        orgArg.slug || '-',
+        html`<idp-badge variant=${this.roleVariant(orgArg.myRole || 'member')}>${orgArg.myRole || 'member'}</idp-badge>`,
+        orgArg.id,
+      ],
+    }));
+
+    return html`
+      ${this.renderPageHeader('All Organisations', `${this.orgs.length} organisations visible to this admin session`)}
+      <div class="body wide-body">
+        <idp-data-table
+          title="Organisations"
+          badge=${`${this.orgs.length} total`}
+          empty-title="No organisations"
+          empty-description="No organisations are visible to this admin session."
+          .columns=${[
+            { label: 'Organisation' },
+            { label: 'Slug', mono: true, hideBelow: 'mobile' },
+            { label: 'Role' },
+            { label: 'Identifier', mono: true, hideBelow: 'tablet' },
+          ]}
+          .rows=${orgRows}
+        ></idp-data-table>
+      </div>
+    `;
+  }
+
+  private renderGAApps(): TemplateResult {
+    const apps = this.adminApps.length ? this.adminApps : this.orgApps;
+    const appRows = apps.map((appArg) => ({
+      cells: [
+        html`
+          <div class="identity-cell">
+            <span class="identity-avatar">${this.getInitials(appArg.name)}</span>
+            <div>
+              <div class="identity-primary">${appArg.name}</div>
+              <div class="identity-secondary">${appArg.description || appArg.appUrl || 'Platform app'}</div>
+            </div>
+          </div>
+        `,
+        html`<idp-badge variant=${appArg.type === 'global' ? 'accent' : 'outline'}>${appArg.type || 'global'}</idp-badge>`,
+        appArg.category || '-',
+        appArg.connectionCount ?? '-',
+        html`<idp-badge variant=${appArg.status === 'suspended' ? 'error' : appArg.status === 'pending_review' ? 'warn' : 'ok'}>${appArg.status || 'active'}</idp-badge>`,
+      ],
+    }));
+
+    return html`
+      ${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.')}
+      <div class="body wide-body">
+        <idp-data-table
+          title="Platform apps"
+          badge=${`${apps.length} total`}
+          empty-title="No platform apps"
+          empty-description="Global app administration data is not available for this session."
+          .columns=${[
+            { label: 'App' },
+            { label: 'Type' },
+            { label: 'Category', hideBelow: 'mobile' },
+            { label: 'Connections', align: 'right', mono: true, hideBelow: 'mobile' },
+            { label: 'Status' },
+          ]}
+          .rows=${appRows}
+        ></idp-data-table>
+      </div>
+    `;
+  }
+
+  private renderMainContent(): TemplateResult {
+    const renderers: Record<TIdpAdminPage, () => TemplateResult> = {
+      overview: () => this.renderOverview(),
+      profile: () => this.renderProfile(),
+      security: () => this.renderSecurity(),
+      sessions: () => this.renderSessions(),
+      apps: () => this.renderAccountApps(),
+      'org-general': () => this.renderOrgGeneral(),
+      'org-settings': () => this.renderOrgSettings(),
+      'org-members': () => this.renderOrgMembers(),
+      'org-apps': () => this.renderOrgApps(),
+      support: () => this.renderSupport(),
+      'ga-users': () => this.renderGAUsers(),
+      'ga-orgs': () => this.renderGAOrgs(),
+      'ga-apps': () => this.renderGAApps(),
+    };
+    return (renderers[this.page] || renderers.overview)();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="shell">
+        ${this.renderSidebar()}
+        <main>${this.renderMainContent()}</main>
+      </div>
+      ${this.renderDialog()}
+    `;
+  }
+}