/* ============================================================= identity-admin-console (D-2) — admin-console.css Compositions for the /admin/identity/* operator surface, built ONLY on the non-overridable --app-identity-* token skeleton (appplatform-identity-ui-tokens.css). No hardcoded colors / spacing / radii — every value resolves to a token, so the surface honours theme propagation (light/dark) across navigation. Loaded after the token skeleton in App.razor . ============================================================= */ .app-identity-admin { width: 100%; /* 55rem == 880px cap; expressed in rem so the responsive max-width scales with the root font-size and never overflows a narrow mobile viewport (width:100% shrinks below the cap). */ max-width: 55rem; margin: 0 auto; padding: var(--app-identity-spacing-lg) var(--app-identity-spacing-md); color: var(--app-identity-color-text-body); } /* --- Admin shell (tab nav: Users · Audit log · Posture) --- */ .app-identity-admin-shell { margin-bottom: var(--app-identity-spacing-lg); border-bottom: 1px solid var(--app-identity-color-border); } .app-identity-admin-tabs { display: flex; flex-wrap: wrap; gap: var(--app-identity-spacing-sm); margin: 0; padding: 0; list-style: none; } .app-identity-admin-tab { display: inline-block; padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md); color: var(--app-identity-color-text-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: var(--app-identity-font-size-sm); white-space: nowrap; } .app-identity-admin-tab:hover { color: var(--app-identity-color-text-heading); background: var(--app-identity-color-bg-hover); } .app-identity-admin-tab-active, .app-identity-admin-tab[aria-current="page"] { color: var(--app-identity-color-text-heading); border-bottom-color: var(--app-identity-color-primary); } .app-identity-admin-tab:focus-visible { outline: var(--app-identity-focus-ring); outline-offset: 2px; } /* --- Cards + facts --- */ .app-identity-admin-card { background: var(--app-identity-color-bg-card); border: 1px solid var(--app-identity-color-border); border-radius: var(--app-identity-radius-card); box-shadow: var(--app-identity-shadow-card); padding: var(--app-identity-spacing-lg); margin-bottom: var(--app-identity-spacing-md); } .app-identity-admin-card h2 { margin-top: 0; color: var(--app-identity-color-text-heading); font-size: var(--app-identity-font-size-lg); } .app-identity-admin-breadcrumb { margin-bottom: var(--app-identity-spacing-md); font-size: var(--app-identity-font-size-sm); } .app-identity-admin-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--app-identity-spacing-xs) var(--app-identity-spacing-md); margin: 0; } .app-identity-admin-facts dt { color: var(--app-identity-color-text-muted); font-size: var(--app-identity-font-size-sm); } .app-identity-admin-facts dd { margin: 0; color: var(--app-identity-color-text-body); } /* --- Search form --- */ .app-identity-admin-search-form { display: flex; flex-wrap: wrap; gap: var(--app-identity-spacing-sm); margin: var(--app-identity-spacing-md) 0; } .app-identity-input { flex: 1 1 220px; padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md); background: var(--app-identity-color-bg-input); color: var(--app-identity-color-text-body); border: 1px solid var(--app-identity-color-border-strong); border-radius: var(--app-identity-radius-input); font-size: var(--app-identity-font-size-base); } .app-identity-input:focus-visible { outline: var(--app-identity-focus-ring); outline-offset: 2px; border-color: var(--app-identity-color-primary); } /* --- User result rows --- */ .app-identity-admin-user-list, .app-identity-admin-role-list, .app-identity-admin-provider-list { list-style: none; margin: var(--app-identity-spacing-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--app-identity-spacing-xs); } .app-identity-admin-role-list, .app-identity-admin-provider-list { flex-direction: row; flex-wrap: wrap; gap: var(--app-identity-spacing-sm); } .app-identity-admin-user-row { display: flex; align-items: center; justify-content: space-between; gap: var(--app-identity-spacing-md); padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md); background: var(--app-identity-color-bg-card); border: 1px solid var(--app-identity-color-border); border-radius: var(--app-identity-radius-input); text-decoration: none; color: var(--app-identity-color-text-body); } .app-identity-admin-user-row:hover { background: var(--app-identity-color-bg-hover); border-color: var(--app-identity-color-border-strong); } .app-identity-admin-user-row:focus-visible { outline: var(--app-identity-focus-ring); outline-offset: 2px; } .app-identity-admin-user-identity { display: flex; flex-direction: column; min-width: 0; } .app-identity-admin-user-email { color: var(--app-identity-color-text-heading); overflow-wrap: anywhere; } .app-identity-admin-user-name { color: var(--app-identity-color-text-muted); font-size: var(--app-identity-font-size-sm); } .app-identity-admin-user-badges { display: flex; gap: var(--app-identity-spacing-xs); flex-shrink: 0; } /* --- Badges --- */ .app-identity-badge { display: inline-block; padding: var(--app-identity-spacing-xs) var(--app-identity-spacing-sm); border-radius: var(--app-identity-radius-pill); font-size: var(--app-identity-font-size-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; } .app-identity-badge-neutral { background: var(--app-identity-color-secondary-bg, var(--app-identity-color-bg-elevated)); color: var(--app-identity-color-text-muted); border: 1px solid var(--app-identity-color-border); } .app-identity-badge-success { background: var(--app-identity-color-success-bg); color: var(--app-identity-color-success); border: 1px solid var(--app-identity-color-success-border); } .app-identity-badge-danger { background: var(--app-identity-color-error-bg); color: var(--app-identity-color-error); border: 1px solid var(--app-identity-color-error-border); } .app-identity-badge-warning { background: var(--app-identity-color-warning-bg); color: var(--app-identity-color-warning); border: 1px solid var(--app-identity-color-warning-border); } /* --- Action button rows + disabled (self-guard) state --- */ .app-identity-admin-action { display: inline; margin: 0; } .app-identity-btn:disabled, .app-identity-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } /* --- WI-06 role assign / revoke --- */ .app-identity-admin-role-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--app-identity-spacing-sm); margin: var(--app-identity-spacing-md) 0 var(--app-identity-spacing-sm); } .app-identity-admin-role-form .app-identity-input { flex: 1 1 12rem; } .app-identity-admin-role-revokes { display: flex; flex-wrap: wrap; gap: var(--app-identity-spacing-sm); align-items: center; } /* --- WI-05 active-session rows --- */ .app-identity-admin-session-list { list-style: none; margin: var(--app-identity-spacing-md) 0; padding: 0; display: flex; flex-direction: column; gap: var(--app-identity-spacing-xs); } .app-identity-admin-session-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--app-identity-spacing-md); padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md); background: var(--app-identity-color-bg-card); border: 1px solid var(--app-identity-color-border); border-radius: var(--app-identity-radius-input); } .app-identity-admin-session-identity { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; } .app-identity-admin-session-device { color: var(--app-identity-color-text-heading); overflow-wrap: anywhere; } .app-identity-admin-session-meta { color: var(--app-identity-color-text-muted); font-size: var(--app-identity-font-size-sm); overflow-wrap: anywhere; } .app-identity-admin-session-action { flex-shrink: 0; } /* --- Section head (posture group / detail sections) --- */ .app-identity-admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--app-identity-spacing-sm); margin-bottom: var(--app-identity-spacing-sm); } .app-identity-admin-section-head h2 { margin: 0; } /* --- WI-07 audit-log filter bar + table --- */ .app-identity-admin-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--app-identity-spacing-sm); margin: var(--app-identity-spacing-md) 0; } .app-identity-field { display: flex; flex-direction: column; gap: var(--app-identity-spacing-xs); flex: 1 1 10rem; } .app-identity-field label { color: var(--app-identity-color-text-muted); font-size: var(--app-identity-font-size-sm); } .app-identity-admin-table-scroll { overflow-x: auto; margin-top: var(--app-identity-spacing-md); } .app-identity-admin-table { width: 100%; border-collapse: collapse; font-size: var(--app-identity-font-size-sm); } .app-identity-admin-table th, .app-identity-admin-table td { text-align: left; padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md); border-bottom: 1px solid var(--app-identity-color-border); vertical-align: top; } .app-identity-admin-table th { color: var(--app-identity-color-text-muted); font-weight: 600; white-space: nowrap; } .app-identity-admin-audit-actor, .app-identity-admin-audit-subject-id { overflow-wrap: anywhere; color: var(--app-identity-color-text-body); } .app-identity-admin-audit-when { white-space: nowrap; color: var(--app-identity-color-text-muted); } /* --- WI-08 posture findings --- */ .app-identity-admin-finding { display: flex; align-items: flex-start; gap: var(--app-identity-spacing-md); padding: var(--app-identity-spacing-sm) var(--app-identity-spacing-md); border: 1px solid var(--app-identity-color-border); border-radius: var(--app-identity-radius-input); text-decoration: none; color: var(--app-identity-color-text-body); margin-top: var(--app-identity-spacing-xs); } .app-identity-admin-finding:hover { background: var(--app-identity-color-bg-hover); border-color: var(--app-identity-color-border-strong); } .app-identity-admin-finding:focus-visible { outline: var(--app-identity-focus-ring); outline-offset: 2px; } .app-identity-admin-finding-body { display: flex; flex-direction: column; min-width: 0; } .app-identity-admin-finding-title { color: var(--app-identity-color-text-heading); overflow-wrap: anywhere; } .app-identity-admin-finding-detail { color: var(--app-identity-color-text-muted); font-size: var(--app-identity-font-size-sm); overflow-wrap: anywhere; } /* --- Accessibility helper --- */ .app-identity-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }