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

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()}
    `;
  }
}