tag so the key still semantically marks itself as a stable identifier, but visually it follows the table-cell typography (same family, size, weight, and Gray 95 color as Display name or Application). No monospace, no code-block tint, no inline padding — reads like a normal table value (Frances QA 2026-05-29). */ #permsPanel .pm-catalog-tbl .pm-key-code { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: var(--text-primary, #171C20); background: transparent; padding: 0; letter-spacing: 0; } /* Catalog rows are read-only — no cursor/hover treatment, no focus outline, no row-click affordance (drawer removed 2026-05-29). The shared `.tbl tbody tr` rule provides any baseline row styling. */ /* "Not assigned" treatment in the Used-in column — neutral muted text so it reads as a benign empty state, not an error. */ #permsPanel .pm-used-none { color: var(--text-muted, #6A8095); font-style: italic; } /* ─── Status chips (Permission Catalog) ────────────────────────── Status chip — color treatment swapped Frances QA 2026-05-29 (round 2) to match the EDL Component Library "Promoted" chip variant for the Active state. Source: Figma EDL Component Library node 4722-57865 (Type=Default, Color=Promoted, Dark Mode=False, Interaction=Resting). Mapping: • Active → color=Promoted — Figma node 4722-57865 bg = white (sits on table-row surface) border = EDL Indigo 20 (#B8B8FF) text = EDL Indigo 70 (#3611C8) Same indigo token used by `.btn-std` and `.name-link`, so Active reads as the system's primary brand state rather than as a generic neutral pill. • Inactive → color=Demoted — Figma node 4722-57917 (the visual treatment Active used pre-2026-05-29 PM) bg = EDL Gray 15 (#E2E9EC) border = EDL Gray 20 (#D4DEE3) text = EDL Gray 95 (#171C20) Inactive is intentionally muted/neutral — NOT red/pink and NOT error/destructive (per Frances brief). Typography: InspireTWDC Roman 12/18 (T10 token), 400 weight — matches the EDL chip body across all color variants. Height ~22 px, 10 px horizontal padding, pill radius — same geometry the chip used before. */ #permsPanel .pm-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 400; line-height: 18px; border: 1px solid transparent; white-space: nowrap; } #permsPanel .pm-chip--active { background: var(--bg-surface, #FFFFFF); border-color: var(--indigo-20, #B8B8FF); color: var(--indigo-70, #3611C8); } #permsPanel .pm-chip--inactive { background: var(--gray-15, #E2E9EC); border-color: var(--gray-20, #D4DEE3); color: var(--text-primary, #171C20); } /* Permission Catalog drawer/flyout CSS removed Frances QA 2026-05-29 along with the markup and JS. The Permissions tab is a read-only browse table only — no detail panel, no overlay, no slide-in. */ /* ═══════════════════════════════════════════════════════════════════ TEAMS — list panel + Edit Team page (added 2026-05-29) ═══════════════════════════════════════════════════════════════════ All rules below are scoped to #teamsPanel or #editTeamPage so they cannot leak into Users / Roles / Permissions / older versions. The panel re-uses the shared EDL primitives (`.tbar`, `.tbl`, `.search`, `.btn-std`, `.au-card`, `.au-input`) and only adds layout/spacing rules unique to Teams. No new design tokens, no new colors. ═══════════════════════════════════════════════════════════════════ */ /* Inner-page Teams title/subtitle CSS (.tm-pagehead, .tm-page-title, .tm-page-sub) was removed Frances QA 2026-05-29 round 4 along with its markup — the tab label "Teams" already names the sub-view, and no other tab carries an inner title block. The panel now relies on the shared `#usersPanel, #rolesPanel, #teamsPanel { padding-top: 12px }` rule (see top of file) so the toolbar sits flush under the tabs row, matching Users / Roles / Functions exactly. */ /* Teams table — aligned to the Roles (#rpColgroup) rhythm so both tabs feel like the same product surface (Frances QA 2026-05-31). • fixed table-layout + proportional percentages = Roles model • 28px left gutter on the first column = Roles `.rp-role` rule • Members/Created are left-aligned like Roles' right-side metadata ("Created By" / "Create Date"), not right-rail numeric. Percentages: Team 15 / Description 58 / Members 13 / Created 14 match Roles' 15 / 58 / 13 / 14 exactly so column edges line up when scanning between tabs. */ #teamsPanel .tm-tbl { min-width: 0; table-layout: fixed; } /* R58 — Teams intelligent column growth. `mem` (a 1-3 digit count) and `created` (a fixed-format date) are bounded/content-based, so they're pinned in px; `table-layout: fixed` then hands 100% of the remaining width to `name`/`desc` in their existing ~20/80 ratio — Description (the long free-text column) absorbs almost all of the growth as the table widens, Name gets a smaller, proportional share, and the two bounded columns never grow past their content's needs the way a flat percentage would have. */ #tmColgroup col[data-tm-col="name"] { width: 20.00%; } #tmColgroup col[data-tm-col="desc"] { width: 80.00%; } #tmColgroup col[data-tm-col="mem"] { width: 100px; } #tmColgroup col[data-tm-col="created"] { width: 130px; } /* Roles uses `.rp-tbl th.rp-role, .rp-tbl td.rp-role { padding-left: 28px !important }` to anchor the first column to the same left edge as the search input above. Apply the same 28px gutter to the Teams first column so both tables share the same left edge. Round 39 (2026-08-12): both of those now resolve from the card's shared `--iam-card-content-inset` instead (32px — see the "ONE shared content inset" block at the end of this file), which is what actually puts them on the same edge as the search input above and the tab labels above that. This 28px remains for the non-V4 sheets. */ #teamsPanel .tm-tbl th.tm-th-name, #teamsPanel .tm-tbl td.tm-cell-name { padding-left: 28px !important; } /* Team-name link — same visual treatment as Users `.name-link` (see #usersPanel rule above). The Users selector is scoped to #usersPanel so we redeclare the same EDL pattern here, scoped to #teamsPanel, rather than widening the original selector and risking a regression on Users. */ #teamsPanel .tm-tbl tbody .tm-name-link { font-size: 14px; font-weight: 400; line-height: 21px; color: var(--brand-text); text-decoration: none; cursor: pointer; } #teamsPanel .tm-tbl tbody .tm-name-link:hover { color: var(--brand-text-hover); text-decoration: underline; } #teamsPanel .tm-tbl tbody .tm-name-link:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; border-radius: 2px; } /* ── Edit Team page ── Reuses .au-shell / .au-back / .au-header / .au-card geometry from Edit User. The two cards (Team details + Members) inherit .au-card padding and rounded corners. Only the form-row layout and members-table polish are new. */ /* ─── Edit Team alignment grid (Frances QA 2026-05-31) ─── Both cards on the Edit Team page share one internal content grid. `.au-card` already supplies the horizontal padding (24px each side); the section body MUST NOT add a second horizontal inset on top of it, or the form/table content drifts right of the section title. So the card body padding is vertical-only. The Name column of the members table is also pulled flush with the body left edge (overriding `.tbl td { padding: 0 8px }`) so the table's first column aligns with the card title and helper text. The same applies to the trailing column on the right — it uses `padding-right: 0` so the table's right edge lines up with the card's right content edge. Result: the title, helper text, form labels/inputs, table header "Name", and first-column cells all sit on the same content grid. */ /* Shared body wrapper used by BOTH the Team details and Members cards. Vertical breathing room only — horizontal alignment comes from `.au-card`. */ #editTeamPage .au-section-body { padding: 16px 0 8px; } /* Two-up form layout for Name + Description. Inherits the shared body padding above; only the grid columns/gap are local. */ #editTeamPage .tm-details-body { display: grid; /* Fill the card like Edit User fields on wide screens (Frances / HARPS family). */ grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px 24px; } #editTeamPage .tm-details-body .au-input { width: 100%; max-width: none; } #editTeamPage .tm-field-name { grid-column: 1 / 2; } #editTeamPage .tm-field-desc { grid-column: 2 / 3; } @media (max-width: 720px) { #editTeamPage .tm-details-body { grid-template-columns: 1fr; gap: 16px; } #editTeamPage .tm-field-name, #editTeamPage .tm-field-desc { grid-column: 1 / -1; } } /* "Team details" / "Members" section-heading typography — Final-QA (Edit Team header alignment + heading-size correction), Figma node 1003:21682 (ADS `heading/sm`, the same token already confirmed and applied to Edit User's "Basic information" / "Access" card headers): MultiplaneTWDC Display, 20px / 24px line-height, weight 500, 0 letter-spacing, color gray/800 (#161c1e ≈ this codebase's --iam-ads-text). A prior round under-sized these to the 15px/22px Open Sans SemiBold scale used by ACCORDION triggers elsewhere (Create Role, Add/Edit User, Permission Capability); these two headings are the only `.cr-section-header` instances that are NOT accordion triggers (no `role="button"`, no chevron — see the HTML comment above each ``), so they get the heavier heading/sm display treatment instead, matching Edit User's own two non- generic card headers exactly. Also why they must not inherit the generic accordion rule's Indigo link-brand color/hover recolor: these are static headings, not links or buttons. `html[data-iam-version="v4"] #editTeamPage` outranks both the generic accordion rule and its hover/focus recolor on specificity, independent of source order. */ html[data-iam-version="v4"] #editTeamPage .cr-section-header { cursor: default; } html[data-iam-version="v4"] #editTeamPage .cr-section-header .cr-section-title { margin: 0; font-family: "MultiplaneTWDC Display", "Open Sans", sans-serif; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0; /* Color intentionally NOT set here (Round 36, 2026-08-12): "Team details" / "Members" now share the exact same #2D2F8C title color as Edit User's "Basic information" / "Access" — see the Round 26 rule (search this file for "Round 26" near `#auBasicCard`), whose selector list was extended to include this same `#editTeamPage .cr-section-header .cr-section-title` selector rather than duplicating the hex value in a second rule. Typography (family/ size/weight/line-height, all unaffected by this change) stays declared here since Team's heading uses a different type scale rationale (a static ``, not an accordion trigger — see the comment above) than the shared color rule needs to care about. */ } html[data-iam-version="v4"] #editTeamPage .cr-section-header:hover .cr-section-title, html[data-iam-version="v4"] #editTeamPage .cr-section-header:focus-visible .cr-section-title { /* Round 36: no `color` override here either — same reasoning as above. These headings aren't interactive (no `role="button"`, `cursor: default` on the header), so `background: transparent` is the only thing this rule still needs to guarantee. */ background: transparent; } /* Helper text in the Members card. Sits flush-left with the card title and the first column of the table below. */ #editTeamPage .tm-members-helper { margin: 0 0 16px; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-secondary, #526374); } /* Members card header: title left, "+ Add members" action right. `.cr-section-header` is normally a plain flex row; we override only on the Members card so the Add button sits at the right edge of the card content. Scoped to `#editTeamPage` so the shared `.cr-section-header` used by Create Role / Edit User stays untouched. */ #editTeamPage .tm-members-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* The Add members button on Edit Team uses the EDL outlined `.cr-btn-add` base visual (purple border, transparent fill, purple label). This is intentionally NOT the filled-purple variant used inside #createRolePage, because here Add members is a secondary affordance sitting next to a destructive Delete Team ghost link — the secondary visual keeps the action hierarchy correct. Scoped to #editTeamPage so the Create Role override isn't affected. */ #editTeamPage .tm-add-members-btn { align-self: center; flex-shrink: 0; } /* Members table — re-uses .tbl primitives but pins column widths so Name / Email / Role / Actions read in a predictable rhythm and don't reflow when the underlying data changes. The Actions column is a fixed-min cell that hosts the Remove link. */ #editTeamPage .tm-members-tbl { width: 100%; table-layout: fixed; } /* Widths owned by IAM.evenColumns (tm-th-email is fluid). Keep actions compact. */ #editTeamPage .tm-members-tbl .tm-mcol-actions { width: 88px; } #editTeamPage .tm-members-tbl tbody tr { cursor: default; } #editTeamPage .tm-members-tbl tbody tr:hover { background: transparent; } #editTeamPage .tm-th-actions .th-inner { justify-content: flex-end; } #editTeamPage .tm-members-tbl td.tm-cell-actions { text-align: right; } /* Round 37 (2026-08-12) — "Remove" now reuses the shared ADS ghost- button component (the same one Delete Team / Remove Role use — see `html[data-iam-version="v4"] .au-revoke-btn, .tm-delete-btn, .cr-btn-remove, .tm-row-remove` further down this file) instead of this page-specific indigo-link treatment, which is removed entirely. Shape/box-sizing/color/background/border/hover/active/ focus states all now come from that one shared rule group (plus a compact-size modifier scoped to `.tm-row-remove` alone, right next to it) rather than being redeclared here. */ /* First and last column flush with the card's content edges so the header text "Name" lines up under the card title / helper, and the right edge of the table lines up with the card's right content edge. */ #editTeamPage .tm-members-tbl th:first-child, #editTeamPage .tm-members-tbl td:first-child { padding-left: 0; } #editTeamPage .tm-members-tbl th:last-child, #editTeamPage .tm-members-tbl td:last-child { padding-right: 0; } /* `.tm-row-remove`'s box is already flush with the shared column's right boundary, same as this header, per the `:last-child` rule above. Every "Remove" label's own *visible text* actually sits some distance left of that boundary because the button carries its own right padding (needed for its hit-target/hover halo) — text- align:right on the td only flushes the button's box to the column edge, not the label glyphs inside it. The "Actions" header had no equivalent inset, so its glyphs sat visibly right of every "Remove" label's glyphs despite both boxes already sharing one column boundary. Restoring that same inset as the header's own right padding (must come after the generic `:last-child` zero above — identical selector specificity, so source order decides — to actually win the cascade) is the header-side half of one shared Actions-column right-padding contract; the body supplies its half via the button's own padding, so both *rendered* labels land on the exact same right edge instead of just their bounding boxes. Round 37 (2026-08-12): value updated from 6px to 8px to track `.tm-row-remove`'s new compact-ghost right padding (see its size rule further down this file) now that it reuses the shared ADS ghost-button component instead of its own bespoke padding. */ #editTeamPage .tm-members-tbl th.tm-th-actions { padding-right: 8px; } /* Members card body trims its bottom padding now that the "View all in Users" footer CTA is gone (Frances QA 2026-05-31). The card's own `.au-card` padding-bottom (18px) already gives the table comfortable breathing room below the last row. */ #editTeamPage .tm-members-body { padding-bottom: 0; } /* ── Edit Team: Add members modal ─────────────────────────────── Reuses the EDL `.cr-confirm-backdrop` + `.cr-confirm-dialog` shell so the modal stays visually consistent with Remove Role / Remove application / Set user as inactive / Delete permission group. Overrides: • wider max-width (640px) so the search input + 3-column user rows have breathing room without becoming a full-screen sheet • search row sits right under the subtitle • user list is a fixed-height scrollable region (handles 50+ eligible internal users without ballooning the modal) • footer adds a "N selected" status pill on the left so the user sees their selection count without scanning the list Strictly scoped to `.tm-add-dialog` / `#tmAddMembersBackdrop` so no other confirm modal in the app is affected. */ /* Width, header, body padding, search field, result rows and footer all come from the Add User Step-1 picker: this dialog carries `.au-adduser-dialog` alongside `.tm-add-dialog`, and its rows carry the `.au-adduser-option*` classes. What remains below is only what this picker has and Add User doesn't — the row checkbox, the inline results panel (Add User's list is a floating popover; selecting here must not dismiss it), the pre-search helper line, the error/empty copy, and the footer selection count. */ .tm-add-hint { margin: 0; font-family: var(--ff); font-size: 13px; line-height: 18px; color: var(--iam-ads-text-muted, var(--text-muted)); } .tm-add-hint[hidden] { display: none; } /* The results panel takes the dropdown's surface treatment (border, radius, clipped corners) but sits in the modal body rather than floating over it, so the modal grows to fit the list instead of overlaying itself. */ html[data-iam-version="v4"] .tm-add-panel { display: flex; flex-direction: column; min-height: 0; background: var(--iam-ads-surface); border: 1px solid var(--iam-ads-divider); border-radius: var(--iam-ads-control-radius); overflow: hidden; } html[data-iam-version="v4"] .tm-add-panel[hidden] { display: none; } html[data-iam-version="v4"] .tm-add-listbox { /* Scrolls only once the results outgrow it; a short list keeps the modal short. */ max-height: 336px; } .tm-add-option-item { list-style: none; } /* The row is the , so the whole thing is a click target for its checkbox. Layout otherwise comes from `.au-adduser-option`. */ html[data-iam-version="v4"] .tm-add-option { cursor: pointer; user-select: none; } html[data-iam-version="v4"] .tm-add-option.is-selected { background: var(--brand-bg-soft); } html[data-iam-version="v4"] .tm-add-option-check { flex: 0 0 auto; margin: 0; } /* Search state copy — loading, empty, and error all render as a single row inside the listbox so the panel keeps one border and one scroll region regardless of state. */ html[data-iam-version="v4"] .tm-add-state-msg { list-style: none; padding: 12px; font-family: var(--ff); font-size: 13px; line-height: 18px; color: var(--iam-ads-text-secondary); } html[data-iam-version="v4"] .tm-add-state-error { color: var(--ads-red-400, #AF434E); } html[data-iam-version="v4"] .tm-add-retry { margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; color: var(--iam-ads-brand); font-weight: 600; text-decoration: underline; cursor: pointer; } html[data-iam-version="v4"] .tm-add-submit-error { margin: 0; font-family: var(--ff); font-size: 13px; line-height: 18px; color: var(--ads-red-400, #AF434E); } html[data-iam-version="v4"] .tm-add-submit-error[hidden] { display: none; } .tm-add-actions { align-items: center; } .tm-add-actions-spacer { flex: 1; } /* Footer padding is deliberately not overridden here: this modal now takes the shared ADS-modal footer (16px 24px, border-top) so it sits on exactly the same spacing as the Add User picker. The compact 12px variant this used to carry made the two modals visibly different heights when placed side by side. */ .tm-add-selected-count { /* Round 25 (2026-06-09 — Add members footer typography): selected-count text upgraded from 13px/500 → 14px/400 to match EDL body small / secondary text spec referenced in the brief (14px size, 20px line-height, regular weight, Gray 70 color). The existing `.cr-confirm-actions { align-items: center }` rule handles flex-axis centering, but the smaller line-box previously paired with the 32px button row produced a subtle optical drop (the count looked low next to the buttons' upper-cap baseline). The 2px top padding nudges the glyph baseline up by the same amount the EDL Promoted button uses for its own optical centering (`.au-btn-save { padding: 2px 16px 0 }`), so the "0 selected" baseline now sits on the same optical horizon as the Cancel and Add members labels. */ font-family: var(--ff); font-size: 14px; font-weight: 400; line-height: 20px; color: var(--text-secondary); padding: 2px 0 0; } /* ════════════════════════════════════════════════════════════════════ ADS Preview · Pass-7 — ADS v2.1 alignment polish (May 30, 2026). Source of truth: • /Users/frances.sun/My Drive/Cursor and Code/ads-design-system (ADS v2.1 reference folder added 2026-05-29 by Frances) • ads-cursor-setup/ads-components.json v2.1.0 releaseDate 2026-05-29 • ads-cursor-setup/.cursor/rules/ads.mdc conventions • design.md Platform layer notes What this pass does (ADS theme only): 1. Promotes the Permission Catalog status chips to ADS Chip language under ADS Preview only. Active = brand-wash + brand text/border (Indigo 50 / 300, the published "promoted" chip). Inactive = recessed-gray + neutral primary text (the published "demoted/neutral" chip). The base global `.pm-chip--*` rules (lines ~6122-6143) keep painting EDL Light / EDL Dark with the original EDL Indigo 70 / Gray 95 values — they are not touched. 2. Adds an ADS-scoped :disabled paint for form inputs so disabled state reads consistently across the theme (the only existing :disabled rule was `.pc-page .cr-input:disabled` and only for the Permission Capability page). 3. Adds an ADS-scoped hover/active/focus treatment for the destructive `.cr-btn-danger-solid` button. Pass-3 already pins the 6 px radius; this fills in the remaining states using the published ADS red ramp (Red 300 surface, Red 400 hover). What this pass deliberately does NOT do: • Does not change layout, IA, routing, data, avatar behaviour, permission/team/role logic, or v1/v2 page content. • Does not modify EDL Light (`:root`) or EDL Dark (`[data-theme="dark"]`) tokens or rules. • Does not modify any selector outside `[data-theme="ads-preview"]`. • Does not retrofit em-dashes in pre-existing comments (ads.mdc rule applies to net-new prompt-pack output, not to a 6 K-line file's comments; touching those would be a cross-theme edit and the brief forbids it). QA guarantee: every selector below is prefixed with `[data-theme="ads-preview"]` and only paints when the user opts into ADS Preview from the profile-menu theme switcher. Switch to EDL Light or EDL Dark and these rules stop firing. ════════════════════════════════════════════════════════════════════ */ /* ─── P7-1. Permission Catalog status chips — ADS Chip language ────── Per ads-components.json the Chip family is folded under the broader surface-and-text token system; the published "Active = Promoted" chip uses the brand hue (Indigo) for both text and border, with a wash background. The "Inactive = Demoted" chip uses the recessed- gray surface with neutral primary text. This mirrors Pass-6 P4-14 (Permission Management Type column chips: Default / Custom) which already maps Default → neutral surface + brand text and Custom → brand wash + brand text. Repainting Active → brand wash + brand text gives Active and Custom the same chromatic family so the two "this row uses brand" affordances read consistently. Geometry (height, padding, font-size, line-height, radius) is inherited from the base `.pm-chip` rule (lines ~6122). We only re-target the colour triplet (background / border / text). */ [data-theme="ads-preview"] #permsPanel .pm-chip--active { background: var(--brand-bg-soft); /* Indigo 50 #E2E3F2 */ border-color: var(--brand); /* Indigo 300 #4045C2 */ color: var(--brand-text); /* Indigo 300 #4045C2 */ } [data-theme="ads-preview"] #permsPanel .pm-chip--inactive { background: var(--ads-surface-recessed); /* rgba(15,18,20,0.05) */ border-color: var(--border-default); /* rgba(15,18,20,0.2) */ color: var(--text-primary); /* Gray 600 #1E2528 */ } /* ─── P7-2. Form input disabled paint — ADS Field disabled state ───── The published ADS Field component pairs disabled inputs with a recessed surface + muted ink so the read-only intent is obvious without resorting to opacity (which carries low-contrast a11y risk). Mirrors the existing `.pc-page .cr-input:disabled` rule (line ~5030) but extends it to every ADS-themed form control. Scope is narrow on purpose: only inputs that already participate in the ADS Preview re-skin (search, filter inputs, combo inputs, create-role / create-permission inputs). Native `` keeps the platform's UA paint — ADS does not publish a styled native-select disabled state, and overriding it here would contradict the "do not invent" rule in ads.mdc. */ [data-theme="ads-preview"] .search input:disabled, [data-theme="ads-preview"] .flt-input:disabled, [data-theme="ads-preview"] .edl-combo-input:disabled, [data-theme="ads-preview"] .cr-input:disabled, [data-theme="ads-preview"] .cr-textarea:disabled { background: var(--ads-surface-recessed); color: var(--text-muted); border-color: var(--border-input); cursor: not-allowed; -webkit-text-fill-color: var(--text-muted); opacity: 1; } /* ─── Delete/Remove confirmation buttons — ADS Primary Button, not a red "danger" variant (app-wide Delete/Remove audit, 2026-08-11) ─── This block used to repaint `.cr-btn-danger-solid` red under ADS Preview (`--ads-red-300` rest / `--ads-red-400` hover/active — a destructive-button treatment that does not exist as an approved ADS Button variant in this system; ads-components.json only lists primary / secondary / tertiary / ghost). Per the app-wide decision to never use a red destructive button in this prototype, that override is removed entirely — no replacement rule is needed here, because `.cr-btn-danger-solid` already sits in every shared `html[data-iam-version="v4"]` box-model/typography/focus-visible group alongside `.cr-btn-save` / `.au-btn-save` (see e.g. the min-height:36px/padding/radius/font block and the `outline:2px solid #4045c2` focus-visible block elsewhere in this file), and its own un-scoped base rule (~line 1485) already uses `var(--brand)` / `var(--brand-hover)` / `var(--indigo-95)` / `var(--brand-disabled-bg)` — the exact same tokens `.cr-btn-save` uses. Removing this block simply lets that base rule (and the shared box-model rules) win under ADS Preview too, so every button with this class now renders pixel-identical to the canonical ADS Primary Button in every state (rest/hover/active/focus/disabled) — reusing the existing component instead of inventing a new "destructive" visual language. The class name `.cr-btn-danger-solid` is left as-is (renaming it is a larger, purely mechanical change across HTML/JS with no visual benefit — every consumer's loading- spinner wiring and JS `.classList` toggles key off this exact class name), but nothing about its rendered appearance is destructive/red any longer. Consumers: Remove Role, Remove application, Remove Member, Delete Team, Delete Permission Group, Set as Inactive, Change User — every one of them now renders as ADS Primary. */ /* ════════════════════════════════════════════════════════════════════ ADS Preview · Pass-8 — Coverage polish from the May 30 audit. Three doubly-scoped fixes that the Part 3 audit surfaced as the only remaining ADS spec gaps inside this theme. Every rule below begins with [data-theme="ads-preview"]; nothing here can reach EDL Light or EDL Dark by CSS specificity. No HTML, no JS, no token authoring. Items intentionally NOT included in Pass-8 (held for product call): - Inline form error styling: ads-components.json publishes a Field validation sub-component, but no IAM screen ships inline error text yet. ads.mdc rule "tokens follow implementation" applies. - Edit User permission card radius (16): explicitly designed at 16 in the project Figma (node 847:16382). ADS Card publishes 6. The brief blocks Edit User layout edits, so this stays at 16 across all themes pending a design decision. ═══════════════════════════════════════════════════════════════════ */ /* ─── P8-A. Filter drawer close button — ADS Modal close anatomy ──── The audit noted that the drawer Close (filter panel, scoped under .flt-close) had radius and target size aligned, but no hover or focus treatment under ADS. ads-components.json publishes Modal / Sheet close as "always neutral" with a hover wash via color/surface/recessed; ads.mdc reinforces this as a hard rule (close buttons are never status-tinted, in any variant). We add the missing hover wash and focus ring. Color stays neutral (we do not push brand or status), which is what ADS expects. */ [data-theme="ads-preview"] .flt-close { transition: background-color .12s ease, color .12s ease; } [data-theme="ads-preview"] .flt-close:hover { background: var(--ads-surface-recessed); color: var(--text-primary); } [data-theme="ads-preview"] .flt-close:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; } /* ─── P8-B. Dropdown option disabled state — ADS Dropdown spec ────── The audit noted that .cr-dd-option.is-disabled already had its hover background suppressed under ADS (Pass-5 §P5), but did not carry the matching ink and cursor that ads-components.json Dropdown publishes for the disabled option state (text/muted + cursor: not-allowed). Today this is a latent issue: no IAM screen ships a disabled option in the live data set, but the class can be applied at runtime by the access-level dropdown if a license tier reduces options. Closing the loop now keeps the theme self-consistent regardless of which option set ships. */ [data-theme="ads-preview"] .cr-dd-option.is-disabled { color: var(--text-muted); cursor: not-allowed; opacity: 1; } /* ─── P8-C. Edit User identity status icon — ADS Success token ────── The Basic Information block on the Edit User page renders a green check-circle SVG to signal an Active user. Inline markup ships stroke="#056C07" (EDL Green 70). ads-components.json names color/green/300 (#568E6D) as the success anchor under ADS v2.1. CSS overrides the inline SVG stroke attribute because presentation attributes have lowest CSS specificity; any matching CSS rule wins. Selector is doubly-scoped: ADS theme + .au-id-status descendant svg only. EDL Light / EDL Dark continue rendering #056C07 from the inline attribute. We reach through the existing --ads-green-300 token declared at the top of this theme block (file ~3040), so we author no new token. */ [data-theme="ads-preview"] .au-id-status svg { stroke: var(--ads-green-300); } /* ═══════════════════════════════════════════════════════════════════════════ IAM VERSION 4 (ADS) — standalone overrides, additive. V4 is a byte-identical fork of V3 whose HTML forces `` on boot. Every existing token/selector in this stylesheet keeps working; the ADS Preview block above supplies the full ADS visual language. This block only carries the V4-specific *product* affordances that don't belong in the ADS Preview theme itself: 1. Hide the Theme submenu (V4 is locked to ADS, so exposing a theme toggle would be misleading — clicking Light/Dark would appear to succeed for one paint but bootstrap re-forces ads-preview on the next load). 2. Emit a subtle "V4 · ADS" chip next to the H1 so anyone comparing side-by-side can tell V3 from V4 at a glance. 3. A small pass of ADS polish that ADS Preview under V3 did not need (V3 shipped as an opt-in preview; V4 is the default surface). Source of truth: • ADS DS component manifest — /Users/frances.sun/Downloads/ads-components.json • ADS DS design.md — brand hue Indigo, body Open Sans, display MultiplaneTWDC • Figma layout node 770-17443 — Users table with Filter / Internal-External / Search / Add Users toolbar and sortable header, indigo brand, opaque rows • Rate Card visual direction (for polish only — no product content leaks) All selectors below are scoped to [data-iam-version="v4"]. V3 renders the same file without this attribute and is unaffected. ─────────────────────────────────────────────────────────────────────── */ /* 1. Lock V4 to ADS by hiding the Theme submenu. V4's HTML bootstrap hard-sets data-theme="ads-preview" every pageload, ignoring localStorage. Exposing the toggle would let users click "EDL Light" and see a broken flash for one session before ADS reasserts on reload. Cleaner to remove the affordance entirely on V4. V3 continues to expose all three themes. */ [data-iam-version="v4"] #userMenuTheme, [data-iam-version="v4"] #userMenuTheme + .user-menu-sep { display: none; } /* 2. V4 · ADS chip — a small pill inline with the page title so the version is visible without opening the user menu. Uses the ADS Indigo 50 brand-wash + Indigo 300 anchor already declared in the ADS Preview block, so no new token is authored. Positioned inline via inline-flex so it never wraps to its own line at the current desktop widths. */ [data-iam-version="v4"] .hdr { position: relative; } [data-iam-version="v4"] .hdr h1 { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } [data-iam-version="v4"] .hdr h1::after { content: "V4 · ADS"; display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-family: 'Open Sans', var(--ff); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ads-indigo-300, #4045C2); background: var(--ads-indigo-50, #E2E3F2); border: 1px solid var(--ads-indigo-100, #6567CE); border-radius: var(--ads-radius-pill, 100px); vertical-align: middle; -webkit-font-smoothing: antialiased; } /* 3. Small ADS polish beyond the V3 ads-preview theme. Each of these is a targeted refinement that a real production ADS surface would ship, but that V3's opt-in preview omitted (V3 kept diffs minimal to protect the EDL default). All rules are scoped to [data-iam-version="v4"] so V3 is untouched. */ /* 3a. Card surface — ADS DS Card publishes a hairline border on the elevation/low variant. V3 ads-preview kept the EDL card shadow to minimize visual diff; V4 elevates cards with the ADS hairline + a single soft shadow so tables feel like ADS "surface-chrome wrapper" cards, not floating panels. */ [data-iam-version="v4"] .card { border: 1px solid var(--border-default); box-shadow: var(--shadow-tip); } /* 3b. Sort arrows — REMOVED (2026-08-10, ADS sort-header audit). This rule set `color` on the sort SVG/wrapper, but the arrow paths use an explicit `fill` (not `fill: currentColor`), so it never actually painted anything — dead CSS masking the real icon-color bug (see the shared `.sort-dn`/`.sort-up` rules, which now carry the exact Figma-specified colors). */ /* 3c. Row hover — ADS DS Table publishes an opaque hover surface aliased to `color/surface/table/hover`. V3 ads-preview supplies a wash via --bg-hover-soft; V4 layers a subtle indigo tint so row hover reads as brand-family without becoming a "selected" state. Selected rows continue to use the brand-wash background supplied by the ADS Preview block. */ [data-iam-version="v4"] .tbl tbody tr:hover:not(.is-selected):not([aria-selected="true"]) { background: color-mix(in srgb, var(--ads-indigo-50) 45%, var(--bg-surface)); } /* 3d. Primary action buttons — ADS DS Button publishes a subtle shadow on the primary variant to lift it off dense table toolbars. V3 ads-preview left the flat treatment; V4 reintroduces the ADS elevation. */ [data-iam-version="v4"] .btn-primary, [data-iam-version="v4"] .flt-btn-apply, [data-iam-version="v4"] .cr-btn-save, [data-iam-version="v4"] .au-btn-save { box-shadow: 0 1px 2px rgba(15, 18, 20, 0.14); } [data-iam-version="v4"] .btn-primary:hover, [data-iam-version="v4"] .flt-btn-apply:hover, [data-iam-version="v4"] .cr-btn-save:hover, [data-iam-version="v4"] .au-btn-save:hover { box-shadow: 0 2px 6px rgba(15, 18, 20, 0.18); } [data-iam-version="v4"] .btn-primary:active, [data-iam-version="v4"] .flt-btn-apply:active, [data-iam-version="v4"] .cr-btn-save:active, [data-iam-version="v4"] .au-btn-save:active { box-shadow: inset 0 1px 2px rgba(15, 18, 20, 0.12); } /* 3e. Section headers — ADS DS uses MultiplaneTWDC Display for heading anchors. V3 already routes .hdr h1 to the Display family; V4 extends this to the secondary section headers used on Edit User / Edit Role / Edit Team, so the whole stack reads consistently as ADS product typography. */ [data-iam-version="v4"] .cr-title, [data-iam-version="v4"] .au-title, [data-iam-version="v4"] .tm-title { font-family: 'MultiplaneTWDC Display', 'Open Sans', var(--ff); letter-spacing: -0.005em; } /* 3f. Nav — the ADS DS navigation component pairs Indigo 300 with tighter horizontal padding on the top-bar links. V3 ads-preview supplies the color; V4 tightens the padding so the top nav reads at ADS product density (matches the Rate Card polish direction — cleaner, more enterprise). */ [data-iam-version="v4"] .nav-c .nav-a { padding-left: 12px; padding-right: 12px; } /* 3g. Pagination — ADS DS Pagination publishes `pagination/size/item` with a minimum-width of 36px on the digit variant (see ads-components.json note: "Digit variants HUG + minWidth 36 for page 100+ breathing room"). V4 enforces the min-width so the numeric page cells maintain even rhythm regardless of digit count. */ [data-iam-version="v4"] .pgn .pgn-page, [data-iam-version="v4"] .pgn .pg-nums button { min-width: 36px; } /* 3h. Focus ring — a single semantic focus pattern per the ADS DS global rule ("One semantic focus pattern; no per-component focus tokens.") V4 makes sure the ring is visible on every interactive element regardless of what V3 ads-preview covered. Uses the ADS Indigo 300 anchor and the ADS standard 2px ring + 2px offset. */ [data-iam-version="v4"] :focus-visible { outline: 2px solid var(--ads-indigo-300, #4045C2); outline-offset: 2px; } /* 3i. Chip/pill treatment for the "+N roles" affordance in the Users table Role column. ADS DS Chip publishes a filled indigo-brand-wash variant with Indigo 300 text; the Figma node 770:17443 renders this exactly. V3 ads-preview left the EDL treatment on this specific element. Restyle here. */ [data-iam-version="v4"] .role-extra { flex: 0 0 auto; background: var(--ads-indigo-50, #E2E3F2); color: var(--ads-indigo-300, #4045C2); border-radius: var(--ads-radius-pill, 100px); padding: 2px 8px; font-weight: 600; } [data-iam-version="v4"] .role-extra:hover { background: color-mix(in srgb, var(--ads-indigo-100, #6567CE) 22%, var(--ads-indigo-50, #E2E3F2)); color: var(--ads-indigo-300, #4045C2); } /* ═══════════════════════════════════════════════════════════════════════════ V4 — Round 33 refinement pass. Rigorous QA against Figma node 770-17443 and the ADS component manifest surfaced a small handful of remaining EDL leftovers plus polish gaps. Each item here has a documented Figma or ADS-JSON justification. Rules are scoped to [data-iam-version="v4"] so V3 stays byte-clean. Sources: • Figma 770:17443 metadata dump — header row 32px, data rows 48px, avatars 40x40, table columns Name 296 / Role 408 / Status 64 / Team 264 / Region 144, toolbar 16px symmetric padding • ads-components.json — Table (opaque rows, sticky-ready header underline), Chip (indigo wash + Indigo 300 text), Field (6px radius, 0.2-alpha border), Modal (18 tokens, neutral close), Accordion (Card wrapper, foreground-only hover, indigo trigger) • design.md — Green 300 = success, Red 300 = destructive ─────────────────────────────────────────────────────────────────────── */ /* R33-1. Display face for the page title. The ADS Preview block (line ~5015) intentionally routes .hdr h1 through `var(--ff)` (Open Sans) so V3's ADS preview could ship without the private Disney Multiplane face. V4 already carries the MultiplaneTWDC Display .woff2 in `public/assets/fonts/` and declares it via @font-face at the top of this stylesheet — so on V4 we can and should restore the real Disney display face on page titles for a true ADS product feel. Weight/size/line-height/tracking follow the ADS DS display slot: Medium (500), 30px, 36px line, -1% tracking. */ [data-iam-version="v4"] .hdr h1, [data-iam-version="v4"] .cr-title, [data-iam-version="v4"] .au-title { font-family: 'MultiplaneTWDC Display', 'Open Sans', var(--ff); font-weight: 500; letter-spacing: -0.01em; } /* R33-2. Adjust the "V4 · ADS" chip vertical rhythm now that the H1 uses MultiplaneTWDC at 500 weight. The 24px chip height sits cleanly on the 36px display cap so the chip and the title top-align to the same optical baseline. */ [data-iam-version="v4"] .hdr h1::after { height: 24px; padding: 0 12px; align-self: center; transform: translateY(1px); /* nudge to optical center of Multiplane cap */ } /* R33-3. Status icons in the Users table — the icons ship as inline SVG with hardcoded EDL greens/reds (`fill="#056C07"` for Active, `fill="#D40909"` for Inactive). ADS DS names Green 300 (#568E6D) as the success anchor and Red 300 (#AF434E) as the destructive anchor (see the tokens declared at the top of the ADS Preview block). CSS `fill:` overrides the SVG presentation attribute, so we can remap without touching the JS render path. Selector uses the `data-status-tooltip` attribute which the JS always sets on the wrapper (renderStatusHtml in app.js). */ [data-iam-version="v4"] .status-icon-wrap[data-status-tooltip="Active"] svg path { fill: var(--ads-green-300, #568E6D); } [data-iam-version="v4"] .status-icon-wrap[data-status-tooltip="Inactive"] svg path { fill: var(--ads-red-300, #AF434E); } /* R33-4. Table header — bump weight and darken slightly for stronger scanability at ADS enterprise density. ADS DS Table row-header uses Gray 200 (#3B4347) at 12px/500 with a subtle 0.04em tracking. The 32px row height + 1px 0.2-alpha bottom border is already set by the ADS Preview block. */ [data-iam-version="v4"] .tbl thead th { color: var(--text-secondary); /* Gray 200 #3B4347 */ font-weight: 500; letter-spacing: 0.01em; } [data-iam-version="v4"] .tbl thead th[data-sort]:hover, [data-iam-version="v4"] .tbl thead th[data-rp-sort]:hover, [data-iam-version="v4"] .tbl thead th[data-tm-sort]:hover { color: var(--text-primary); } /* R33-5. Pagination current-page pill — the 0.5-alpha bold border was leftover from the neutral-focus token; on a filled indigo pill it reads as a stroke halo. ADS DS Pagination shows the selected item as a seamless filled brand pill (no stroke). Radius stays 8px per `pagination/size/item/radius`. */ [data-iam-version="v4"] .pgn .pg-nums button.on, [data-iam-version="v4"] .pgn .pg-nums button[aria-current] { border: 1px solid transparent; box-shadow: 0 1px 2px rgba(15, 18, 20, 0.14); } [data-iam-version="v4"] .pgn .pg-nums button:not(.on):not([aria-current]):hover { background: var(--ads-indigo-50, #E2E3F2); color: var(--ads-indigo-300, #4045C2); } /* R33-6. Toolbar right-padding — V3 shipped .tbar with asymmetric padding (`8px 56px 8px 16px`) to leave clearance for a legacy secondary action. Figma 770:17443 shows 16px symmetric horizontal padding on the toolbar with the Add User button aligned to the card's right edge. Normalize on V4 so the primary CTA hugs the card's inner right rail like the Figma reference. */ [data-iam-version="v4"] .tbar { padding-right: 16px; } /* R33-7. Edit User / Edit Role / Edit Team inner cards — the outer .card on the users list already carries the ADS hairline (rule R32-3a above), but the inner .au-card / .cr-card / .tm-details-card fell back to the EDL card shadow-only treatment. ADS DS Card elevation/low = 1px 0.1-alpha border + 0 1px 4px 0.3-alpha shadow, so we restate the hairline explicitly. */ [data-iam-version="v4"] .au-card, [data-iam-version="v4"] .cr-card, [data-iam-version="v4"] .tm-details-card, [data-iam-version="v4"] .tm-members-card { border: 1px solid var(--border-subtle); box-shadow: 0 1px 4px rgba(15, 18, 20, 0.06); } /* R33-8. Section header inside cards — .cr-section-header is the shared expand/collapse trigger used by Edit User, Edit Role, and Edit Team. ADS DS Accordion trigger spec: title + caret in brand (Indigo 300), foreground-only hover (title + caret shift to the hover indigo, no background wash — that's an explicit "don't" in ads-components.json). Padding uses spacing tokens comparable to the Card content padding so the trigger reads as part of the Card, not a separate row. */ [data-iam-version="v4"] .cr-section-header { transition: color .12s ease; } [data-iam-version="v4"] .cr-section-header .cr-section-title, [data-iam-version="v4"] .cr-section-header .cr-section-chev { color: var(--ads-indigo-300, #4045C2); transition: color .12s ease; } [data-iam-version="v4"] .cr-section-header:hover .cr-section-title, [data-iam-version="v4"] .cr-section-header:hover .cr-section-chev, [data-iam-version="v4"] .cr-section-header:focus-visible .cr-section-title, [data-iam-version="v4"] .cr-section-header:focus-visible .cr-section-chev { color: var(--ads-indigo-400, #3B3FBA); background: transparent; /* ADS "don't" — no bg tint on hover */ } [data-iam-version="v4"] .cr-section-header { background: transparent; } /* R33-9. Access table inside Edit User — the small effective-access table's header row was rendering at the same 400 weight as body text (very faint). Bring it up to the same ADS Table Header treatment used on the main Users table for consistency across the app. Selector matches the V3 declaration at line 6130 (2 IDs + 2 classes) so we tie on specificity and win on cascade order. */ [data-iam-version="v4"] #addUsersPage #auRolesCard .au-eff-tbl thead th { color: var(--text-secondary); font-weight: 500; letter-spacing: 0.01em; border-bottom: 1px solid var(--border-default); } /* R33-10. Form input focus — ADS DS Field / Input publishes a single semantic focus-ring pattern (2px indigo outline). The universal :focus-visible rule (R32-3h) covers keyboard focus; add a matching input-focus style to also handle mouse-focus on where browsers may not fire :focus-visible under certain input methods. */ [data-iam-version="v4"] .cr-input:focus, [data-iam-version="v4"] .cr-textarea:focus, [data-iam-version="v4"] .au-input:focus, [data-iam-version="v4"] .flt-input:focus, [data-iam-version="v4"] .edl-combo-input:focus, [data-iam-version="v4"] .flt-select:focus { border-color: var(--ads-indigo-300, #4045C2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ads-indigo-300, #4045C2) 18%, transparent); outline: none; } /* R33-11. Row cursor — clicking a user row's name-link navigates to Edit User. Reflect that affordance with a hand cursor on the entire clickable name area (Figma link semantics). */ [data-iam-version="v4"] #usersTable tbody tr .name-link, [data-iam-version="v4"] #usersTable tbody tr a[data-uid], [data-iam-version="v4"] #teamsTable tbody tr .name-link { cursor: pointer; } /* R33-12. Modal chrome — ADS DS Modal ships with a 12px border-radius (larger than Card's 6px per ads-components.json size scale) plus a stronger elevation/high shadow. V3 renders modals with the EDL default 8px radius. Under V4, restate the ADS chrome. Selectors cover the shared modal patterns used across Edit User / Edit Team / Edit Role: `.tm-add-modal`, `.au-eff-breakdown`, `.cr-confirm-dialog`. */ [data-iam-version="v4"] .tm-add-modal, [data-iam-version="v4"] .au-eff-breakdown, [data-iam-version="v4"] .cr-confirm-dialog, [data-iam-version="v4"] .modal-panel, [data-iam-version="v4"] .flt-panel { border-radius: var(--ads-radius-lg, 12px); box-shadow: 0 8px 24px rgba(15, 18, 20, 0.3), 0 1px 2px rgba(15, 18, 20, 0.3); border: 1px solid var(--border-subtle); } /* R33-13. Modal / dialog close buttons — ADS DS global rule (see ads-components.json globalRules.closeButtons): "Always neutral, never tinted by status." V3 tints some close buttons with brand; force neutral under V4 across every modal chrome we've defined. */ [data-iam-version="v4"] .tm-add-close, [data-iam-version="v4"] .au-eff-close, [data-iam-version="v4"] .cr-confirm-close, [data-iam-version="v4"] .modal-close, [data-iam-version="v4"] .flt-close { color: var(--text-secondary); background: transparent; } [data-iam-version="v4"] .tm-add-close:hover, [data-iam-version="v4"] .au-eff-close:hover, [data-iam-version="v4"] .cr-confirm-close:hover, [data-iam-version="v4"] .modal-close:hover, [data-iam-version="v4"] .flt-close:hover { background: rgba(15, 18, 20, 0.05); color: var(--text-primary); } /* R33-14. Toast — superseded by the full ADS Toast token block under "R52 — Toast" further down this file (exact Figma 70:62 values: 6px radius, 5px semantic left border only, no all-round hairline, dismiss button tinted per variant to match the exported assets). Kept as a comment marker so this section number isn't silently reused. */ /* R33-15. Empty avatar treatment — internal users without a photo fall back to `.name-avatar` (a colored circle with initials). Existing rule (line 3765) sets background: --ads-violet-10; keep that but tighten to ADS Indigo 50 for consistency with the brand wash used everywhere else. Also lock the border-radius to 50% in case any inline style leaks through. */ [data-iam-version="v4"] .name-avatar { background: var(--ads-indigo-50, #E2E3F2); color: var(--ads-indigo-300, #4045C2); border-radius: 50%; font-weight: 600; font-size: 13px; } /* R33-16. Toggle Group (Internal / External) — ADS DS Toggle Group selected-state anchors to the brand-wash (Indigo 50) with Indigo 300 text and a subtle 1px hairline on the parent container. The V3 ads-preview theme delivers most of this; we tighten the transition and ensure the selected pill is inset by 2px inside the container so the outer border reads cleanly (rather than the pill touching the container edge). */ [data-iam-version="v4"] .seg-ctrl { padding: 1px; gap: 0; } [data-iam-version="v4"] .seg-btn { transition: background-color .12s ease, color .12s ease; border-radius: 5px; /* -1 vs container 6px so the pill fits inside */ } [data-iam-version="v4"] .seg-btn.on { box-shadow: 0 1px 2px rgba(15, 18, 20, 0.08); } /* R33-17. Filter button icon-label alignment — ADS DS Button ships with a 6px icon-to-label gap on the sm size; V3 renders the Filter icon flush against the label. Add the ADS gap so the icon reads as a separate glyph rather than a prefix. */ [data-iam-version="v4"] .tbar .btn-std { gap: 6px; } /* R33-18. Table cell text — ADS DS Table body ships at 14px/500 on primary text and 13px/400 on secondary. Body cells are already 14px; tune the vertical rhythm on the Name cell so the two-line name-link + email reads with balanced leading. Selector matches the V3 declaration at line 647 (2 IDs + 1 tag + 1 class) so we tie on specificity and win on cascade order. */ [data-iam-version="v4"] #usersPanel #usersTable tbody .name-link { font-weight: 500; } [data-iam-version="v4"] #usersTable tbody td.c-nm .name-email, [data-iam-version="v4"] #usersTable tbody td.c-nm .row-email { font-size: 13px; color: var(--text-muted); } /* R33-19. Filter side panel — the ADS Preview block already restyles .flt-panel; V4 adds the ADS Modal chrome (radius+shadow) via R33-12 and here tightens the section spacing so the panel reads as a modern ADS filter drawer rather than a raw form column. */ [data-iam-version="v4"] .flt-title { font-family: 'MultiplaneTWDC Display', 'Open Sans', var(--ff); font-weight: 500; letter-spacing: -0.005em; } /* R33-20. Nav bar height — Figma 770:17443 renders the ADS top bar at 48px height (see nav's `height: 48` in our audit). V3 shipped the nav at 64px height under EDL; the ads-preview theme scaled it down. Enforce the 48px height explicitly on V4 in case any late- loading rule (or window-height math) tries to expand it. NOTE: R34 (below) supersedes this and pushes the nav to 56px per the Q2C nav reference (Figma node 3606:53124). The 48px rule is left in the file for cascade documentation but is overridden. */ [data-iam-version="v4"] .nav { min-height: 48px; } /* ═══════════════════════════════════════════════════════════════════════════ V4 — Round 34 — Top navigation bar: Q2C / ADS treatment. Source of truth (nav layout + tokens): • Figma node 3606:53124 — Q2C Design ATLAS Navigation https://www.figma.com/design/I616m31h1PZ5YlSYB2Hoe9/Q2C-Design-%E2%80%94-ATLAS?node-id=3606-53124 • ads-components.json — TopBar + Icon tokens • design.md — Indigo 300 brand anchor, Open Sans body / Multiplane display Q2C nav spec (from the Figma metadata): • Container height = 56px (was 48px on V4) • Horizontal padding = 24px (was 32px on V4) • Background = Indigo 300 #4045C2 (already correct) • Brand cluster (LEFT): • Vector 32×28 logo ← we KEEP Marge's wordmark unchanged • "Disney Advertising" MultiplaneTWDC Display Bold 18/24 white (already baked into the current logo SVG — no new node) • 8px gap between icon and text (already correct in SVG) • Middle: two flex spacers — no product-nav in the Q2C reference • Utilities (RIGHT): • Bell 20×20 (was 15×17 — swapped in HTML for the Figma path) • Sparkle 20×20 (replaces the old three-dot "More" glyph) • Avatar 32×32 ← Marge Simpson avatar, kept unchanged • 16px gap between each utility (already correct) User carve-outs honored: • Marge Simpson W-logo wordmark stays byte-identical (../nav/logo.svg) • Marge Simpson avatar stays byte-identical (../nav/avatar.png) • The logo's visual size (145×26) is preserved; only the container height changed. Flex align-items:center keeps it visually centered. Product-nav strategy: The Q2C Figma reference contains NO center product nav — only brand + utilities. To match the layout, the .nav-c cluster is hidden on V4 (display:none). The DOM stays intact so V3 renders the product-nav normally under EDL. All selectors below are scoped to [data-iam-version="v4"] so V3 remains byte-clean. ─────────────────────────────────────────────────────────────────────── */ /* R34-1. Container height + horizontal padding per Figma. Overrides the R33-20 48px rule above (later cascade + equal specificity wins). The right inset (24px) is measured directly off the utilities group in Figma node 1003:10545 and lines up exactly with this codebase's rendered bell/sparkle/avatar cluster already. LEFT inset is now 0 — the old 16px value here was a padding-based approximation of "(64 - 32) / 2 = 16" (centering the D-glyph on the 64px-wide `.sidebar` rail by faking the rail's geometry with nav padding instead of building a real rail element). Final-QA (product-name horizontal position correction) replaced that hack with an actual `.atlas-brand-rail` box below, sized to the sidebar's own 64px width, so this padding would now double-count the inset — removed accordingly. */ [data-iam-version="v4"] .nav { min-height: 56px; height: 56px; padding: 0 24px 0 0; gap: 0; align-items: center; } /* R34-2. Hide the center product-nav. Q2C nav layout has brand LEFT + utilities RIGHT with only flex spacers between them. Sales/Planning/Ad Ops/Billing/Admin do not appear in the Figma reference and are hidden on V4. The DOM elements remain so any V3 CSS or JS references stay valid — they simply do not render on V4. */ [data-iam-version="v4"] .nav-c { display: none; } /* R34-3. Brand cluster — the wordmark image is preserved at its native size. Vertically center in the 56px container via flex (nav's align-items:center takes care of this). Left offset is now 24px (nav padding) instead of 32px per the Q2C reference. */ [data-iam-version="v4"] .nav-l { padding: 0; margin: 0; } [data-iam-version="v4"] .nav-logo-img { /* Locked width/height so the wordmark's visual identity never shifts, even if the surrounding container gets restyled again. */ height: 26px; width: auto; display: block; } /* R34-4. Utilities cluster — the Q2C spec puts these on the far right with 16px gap between items. Existing V3/V4 CSS already applies 16px gap; restate explicitly so any downstream override doesn't break the rhythm. */ [data-iam-version="v4"] .nav-r { gap: 16px; padding: 0; margin-left: auto; /* pushes cluster to the right rail per Figma spacers */ } /* R34-5. Utility buttons — 40×40 hit target with a centered 20×20 icon. The Figma vector containers are 20×20 (just the icon), but we keep the surrounding 40×40 hit target for WCAG 2.5.5 (target size). Icon color inherits from the nav's white text, which is already set in the ADS Preview block. */ [data-iam-version="v4"] .nav-r .nav-r-btn { width: 40px; height: 40px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: transparent; color: #FFFFFF; border: 0; transition: background-color .12s ease; } [data-iam-version="v4"] .nav-r .nav-r-btn .nav-ico { width: 20px; height: 20px; display: block; } [data-iam-version="v4"] .nav-r .nav-r-btn:hover { background: rgba(255, 255, 255, 0.12); } [data-iam-version="v4"] .nav-r .nav-r-btn:active { background: rgba(255, 255, 255, 0.18); } [data-iam-version="v4"] .nav-r .nav-r-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; background: rgba(255, 255, 255, 0.12); } /* R34-6. Avatar — Marge Simpson's photo is kept at exactly 32×32 per the Figma reference AND the user's explicit "do not resize" carve-out. The 40×40 button around it is unchanged from V3 (accessibility hit target). We only tune the img's on-screen size, not the wrapper. */ [data-iam-version="v4"] #userMenuTrigger { width: 40px; height: 40px; padding: 0; } [data-iam-version="v4"] .nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: cover; } /* R34-7. Legacy nav divider spacer (`.nav-divider`) — the V3 nav ships a small vertical rule between the logo group and the module label under EDL. The Q2C reference has no such divider; hide it on V4. */ [data-iam-version="v4"] .nav-divider { display: none; } /* R34-8. Legacy EDL bell is hidden on V4 in favor of the inline SVG (which now uses the Figma Q2C path at native 20×20). Restate the hide rule explicitly with V4 specificity so it doesn't rely on the older ads-preview theme block. */ [data-iam-version="v4"] .nav-bell-img { display: none; } /* R34-9. Ensure the V4 · ADS chip on the page-body H1 stays a chip and never leaks into the nav bar. Guardrail — no functional change under normal renders, but blocks any future accidental nav ::after chip. */ [data-iam-version="v4"] .nav::after, [data-iam-version="v4"] .nav::before { content: none; } /* R34-10. Page body offset — no change needed. The .nav sits above `` which has `padding-top: 0` and no fixed positioning. Bumping the nav from 48 → 56px shifts the whole page down by 8px, which is exactly the desired outcome (page body itself is untouched per the "nav bar only" scope). */ /* R58. Responsive content-container model — fixes the "empty right side at 1920/2560" regression. `main.page` (above) intentionally has `max-width: none` so its *padding* can encode the sidebar offset; that leaves the actual growth-and-centering job to its direct list card. Below ~1888px available content width (1920 viewport minus the collapsed-sidebar gutters) the card just fills 100% of `main.page`'s content box, so it grows continuously from 1024 up through 1440 and 1920 with no artificial ceiling. Only once the *available* width exceeds `--v4-content-max-width` (2560-class viewports and wider) does growth stop and the leftover space resolve into equal left/right whitespace via `margin-inline: auto` — i.e. centered *within the content region to the right of the fixed sidebar*, not the full browser viewport (a fixed sidebar is not a "gutter" and is intentionally excluded from that centering). 1920px was chosen as the max because the ADS pilot itself only commits to two desktop targets — 1440px and 1920px (see `ads-design-system/design.md`, "Pilot constraint") — so 1920px is the largest width the table/typography/column system was actually designed against. Beyond it we hold the line rather than inventing an undesigned, arbitrarily-wider table. This must resolve to a *single* declaration for `main.page > .card` in the whole file — a second, later rule that re-sets `max-width` on `main.page` itself previously undid the `max-width: none` above by cascade order (same selector, same specificity, declared later wins) and was the actual root cause of the bug; see R58 note by the `background: transparent` header-band rule further down. */ html[data-iam-version="v4"] main.page > .card { width: 100%; max-width: var(--v4-content-max-width, 1920px); margin-inline: auto; } /* ═══════════════════════════════════════════════════════════════════ R39 — ATLAS brand composition parity (V4 only) Figma reference: Q2C-Design — ATLAS • file: I616m31h1PZ5YlSYB2Hoe9 • navigation node: 3606:53124 (56×1440, bg #4045c2) • brand cluster node: 3606:51560 (gap 8, 32×28 glyph + text) • D-glyph vector: 3606:51561 (32×28, `imgVector`) • "Disney Advertising": 3606:51562 (MultiplaneTWDC Display Bold 18/24 white) R34 already delivered the container geometry (height 56, padding 0 24, bg #4045c2), utility buttons (40×40 hit target, 20×20 icons), Marge avatar (32×32 preserved), and the hidden `.nav-c` product- nav. The remaining drift was the BRAND composition: the .nav-mod wrapper still carried an EDL padding-left of 48px, which offset the logo to ~72px from the viewport edge (24 + 48). The Figma spec starts the D-glyph at exactly 24px (nav's padding), followed by the MultiplaneTWDC "Disney Advertising" wordmark 8px later. This block: • zeroes .nav-mod / .nav-logo-group / .nav-logo-link padding • lays the D-glyph + text on a flex track with 8px gap • sizes the glyph to Figma's exact 32×28 and paints it white • renders the text in MultiplaneTWDC Display 18/24 (weight 500, the only Multiplane weight shipped in /assets/fonts — 500 reads visually equivalent to Figma's 700 given the small size and the white-on-indigo contrast; documenting the trade-off here in case the Bold woff2 becomes available) All rules are scoped to `html[data-iam-version="v4"]` so V1/V2/V3 remain visually untouched (they still ship their own logo.svg wordmark via the base .nav-logo-img rule). */ /* R39-1. Strip residual EDL padding off the brand-cluster ancestors so the D-glyph sits at exactly 24px from the viewport edge. Higher specificity than the base `.nav-mod { padding: 10px 16px 10px 48px }` at line 208. */ html[data-iam-version="v4"] .nav-mod { padding: 0; gap: 0; height: 100%; align-items: center; } html[data-iam-version="v4"] .nav-logo-group { padding: 0; gap: 0; height: 100%; align-items: center; } html[data-iam-version="v4"] .nav-logo-link { padding: 0; margin: 0; height: 100%; align-items: center; } /* R53. Brand-lockup gap tightening (Ad Console moved closer to logo) — the shared wrapper for the two brand pieces (`.atlas-brand-rail` + `.atlas-brand-text`). R52 first collapsed a two-place 32px-effective gap down to one real flex `gap: 12px` (see its comment below, still accurate history-wise). This pass tightens that single gap further, from 12px to the exact 8px Figma originally specified for the brand cluster (node 3606:51560, "gap 8" — see the R39 header comment above). `flex-wrap: nowrap` is explicit (not just the flex default) so the lockup can never wrap onto two lines regardless of viewport. This remains the ONLY rule in the codebase that sets this gap — no page-level override, no per-breakpoint value (R39-6 below only resizes the text's font-size at ≤768px, never this gap) — so every V4 page renders the identical 8px lockup automatically. */ html[data-iam-version="v4"] .atlas-brand { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; color: #ffffff; text-decoration: none; line-height: 1; border-radius: 4px; } html[data-iam-version="v4"] .atlas-brand:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; } /* R39-2a. Logo rail — Final-QA (product-name horizontal position correction). Previously the D-glyph's centering on the left-nav's 64px rail column was faked with asymmetric `.nav` padding (`16px` left vs `24px` right, see R34-1's old comment) and the product name sat a flat 8px after the glyph itself — which put "Ad Console"'s left edge at viewport x=56, i.e. INSIDE the 64px rail column instead of clear of it. This box is a real rail matching `.sidebar`'s own 64px width (`.nav`'s own left padding is now 0, see R34-1), so the D-glyph centers inside it exactly where it already rendered before — `(64 - 32) / 2 = 16`, unchanged, per the "do not move the logo" constraint — while now being an actual structural column instead of a padding approximation. The product name (R39-2b) is a sibling positioned AFTER this rail's right edge, not after the glyph. */ html[data-iam-version="v4"] .atlas-brand-rail { display: flex; align-items: center; justify-content: center; width: 64px; height: 100%; flex-shrink: 0; } /* R39-3. D-glyph — Figma renders it at 32×28 in WHITE on the indigo bar. Because R40 inlines the SVG element (was in R39, which isolated the SVG from CSS color inheritance and rendered the glyph in the browser default black), the parent's `color: #fff` now cascades into `` and paints the path white. Explicit `fill: #ffffff` also set on the .path selector below as a defensive belt-and-suspenders in case the `fill` attribute is dropped by future refactors. */ html[data-iam-version="v4"] .atlas-brand-glyph { display: block; width: 32px; height: 28px; flex-shrink: 0; color: #ffffff; fill: currentColor; } html[data-iam-version="v4"] .atlas-brand-glyph path { fill: currentColor; } /* R39-4. Wordmark — MultiplaneTWDC Display 18/24 white. Figma spec is weight 700; the /assets/fonts folder ships only the Medium woff2 (500), and browsers will substitute Medium for 500 requests cleanly (any synthetic bold looks blurred against the tiny 18px x-height, so we don't force it). The text is uppercase-free — preserves the "Disney Advertising" case exactly from Figma. R52: the old `margin-left: 16px` (superseded R39-2b) is removed — spacing now comes entirely from `.atlas-brand`'s own `gap: 12px` above, so there is exactly one source of truth for the logo↔text gap instead of a margin stacked on a fixed rail width. */ html[data-iam-version="v4"] .atlas-brand-text { font-family: 'MultiplaneTWDC Display', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-weight: 500; font-size: 18px; line-height: 24px; color: #ffffff; letter-spacing: 0; white-space: nowrap; display: inline-block; } /* R39-5. Neutralize the legacy `.nav-logo-img` sizing on V4 so any future/stale reference to that class can't apply the 145×26 wordmark dimensions to a 32×28 glyph. `.atlas-brand-glyph`'s fixed dimensions win on the current markup, but this is a defensive rule for any future stylesheet reordering. */ html[data-iam-version="v4"] .atlas-brand .atlas-brand-glyph.nav-logo-img, html[data-iam-version="v4"] .atlas-brand .nav-logo-img { width: 32px; height: 28px; } /* R39-6. Responsive parity — the brand text never wraps or clips, even at narrower viewports. The R34 nav padding already reduces at ≤1024/≤768, but the brand cluster's own gap and glyph size stay pinned to the Figma spec. */ @media (max-width: 768px) { html[data-iam-version="v4"] .atlas-brand-text { font-size: 16px; line-height: 22px; } } /* ═══════════════════════════════════════════════════════════════════ R38 — IAM table card parity with Rate Card Manager (V4 only) Wraps the tabs row + all three panels (Users/Roles/Teams) into a single elevated white "table card" that visually matches the Rate Card Manager table treatment. This is a container-level parity fix only — every internal element (tabs, toolbar controls, table rows, pagination) keeps its existing content, layout, columns, sort logic, and JS behavior. What changes: • Outer surface → white card, 16px radius, subtle box-shadow, hairline border, overflow:hidden so all four corners clip cleanly. • Page canvas → unchanged; ADS Ink 05 (#ECEEEE) already reads as the Rate Card gray canvas behind the card. • Tabs row → seats at top of card, hairline underline as divider before the toolbar (was already there, now sits inside the rounded frame). • Toolbar → drops its 16px external bottom margin; picks up 16px 20px internal padding so filter / segmented / search / Add User buttons sit on the card's inner grid. • Table body → unchanged density (32px thead, 48-64px rows); removes the residual outer horizontal padding that pushed cells past the card edges. • Pagination → gains a 1px top divider and 12px 20px padding, inherits the card's rounded bottom corners automatically via overflow:hidden. The card is scoped to V4 only (`html[data-iam-version="v4"]`), so V1/V2/V3 remain visually untouched. The `.v4-card` wrapper element was added in index.html (R38); no other JS/HTML behavior changed. */ /* R38-1. Card container. Uses higher specificity than the base `#usersPanel { padding-top: 12px }` so the residual padding is removed and the tabs row sits flush with the card's top edge. */ html[data-iam-version="v4"] .v4-card { background: #ffffff; border: 1px solid rgba(15, 18, 20, 0.08); border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 18, 20, 0.04), 0 4px 12px rgba(15, 18, 20, 0.06); overflow: hidden; margin: 4px 0 24px; } /* R38-2. Tabs row inside the card — flush to top, gray hairline underline separates tabs from the toolbar. The base rule already provides border-bottom + padding; we only override the padding to sit on the card's inner 20px grid and drop the 8px right/bottom asymmetry from the pre-card layout. */ html[data-iam-version="v4"] .v4-card .tabs-row { padding: 12px 20px 0; border-bottom: 1px solid rgba(15, 18, 20, 0.1); background: #ffffff; } /* R38-3. Panel wrappers drop their top padding (the card already gives internal chrome its rhythm via the tabs-row + tbar padding). */ html[data-iam-version="v4"] .v4-card #usersPanel, html[data-iam-version="v4"] .v4-card #rolesPanel, html[data-iam-version="v4"] .v4-card #teamsPanel { padding-top: 0; } /* R38-4. Toolbar — internal 16px vertical / 20px horizontal padding, drops the pre-card bottom margin so the table butts up cleanly against the underlying divider. Height auto so wrapped controls don't clip when the page is narrower than 1280px. */ html[data-iam-version="v4"] .v4-card .tbar { padding: 16px 20px; margin-bottom: 0; height: auto; min-height: 56px; background: #ffffff; } /* Base rule sets `#usersPanel .tbar { margin-bottom: 10px }` — reset. */ html[data-iam-version="v4"] .v4-card #usersPanel .tbar { margin-bottom: 0; } /* R38-5. Table wrapper — no extra horizontal padding, keep h-scroll. */ html[data-iam-version="v4"] .v4-card .tbl-wrap { padding: 0; background: #ffffff; } /* R38-6 (superseded — Figma final-QA, node 1003:17844/1003:17845-51, "Data Table / Example Row Header"): Dev Mode shows `bg-white` on the header row with a single hairline `border-b border-[#d4dee3]` — no gray tint and no border-top. The previous #FAFAFB "Rate Card" tint was an approximation from an earlier pass; this exact node overrides it. Border moves to `th` (not `tr`) because table row borders are not reliably painted by browsers — the divider must live on the cell to guarantee a single, visible header/body divider. */ html[data-iam-version="v4"] .v4-card .tbl thead tr { background: var(--iam-ads-surface); } html[data-iam-version="v4"] .v4-card .tbl thead th { background: var(--iam-ads-surface); border-bottom: 1px solid var(--iam-ads-divider); } /* R38-7. Pagination footer — 1px top divider, 12px vertical / 20px horizontal padding. Rounded bottom corners inherit from `.v4-card { overflow: hidden; border-radius: 16px }` on the parent, so no explicit radius needed here. */ html[data-iam-version="v4"] .v4-card .pgn { padding: 12px 20px; height: auto; min-height: 48px; border-top: 1px solid rgba(15, 18, 20, 0.08); background: #ffffff; } /* R38-8. Bottom edge of the card — make sure the last block inside the card (whichever panel is active) doesn't add trailing space. The panels themselves have no bottom margin, but the pagination already sits at the bottom of each panel, so this is a safety guard for future panel additions. */ html[data-iam-version="v4"] .v4-card > div:last-child { margin-bottom: 0; } /* R38-9. Responsive parity — narrower viewports keep the card's internal padding proportional (base tbar/pgn rules already reduce horizontal padding at 1280/1024/768; we only need to keep them in sync with the card's 20px inner grid). */ @media (max-width: 1024px) { html[data-iam-version="v4"] .v4-card .tabs-row { padding-left: 16px; padding-right: 16px; } html[data-iam-version="v4"] .v4-card .tbar { padding: 12px 16px; } html[data-iam-version="v4"] .v4-card .pgn { padding: 10px 16px; } } @media (max-width: 768px) { html[data-iam-version="v4"] .v4-card { border-radius: 12px; } html[data-iam-version="v4"] .v4-card .tabs-row { padding-left: 12px; padding-right: 12px; } html[data-iam-version="v4"] .v4-card .tbar { padding: 10px 12px; } html[data-iam-version="v4"] .v4-card .pgn { padding: 8px 12px; } } /* ═══════════════════════════════════════════════════════════════════ R37 — ATLAS nav parity pass (V4 only) Figma reference: Q2C-Design — ATLAS • file: I616m31h1PZ5YlSYB2Hoe9 • top nav node: 3606:53124 (56×1440, bg #4045c2) The R34+R36 stack already delivers pixel parity for the top nav (56px height, 24px horizontal padding, #4045c2 background from `--ads-surface-brand`, 8px brand-cluster gap, 16px utilities gap, 20×20 icons, 32×32 avatar). No CSS change needed for the top nav in this round — only the sidebar item list was rebuilt in HTML. The R35/R36 sidebar CSS is agnostic to the number of items and which item is active — it keys off `.sb-item` and the `sb-item- active` / `data-active="true"` markers. R37's HTML swap therefore inherits every existing token: 240 open / 62 collapsed, 40px item height, 20×20 icons, 6px radius, #e2e3f2 active bg, #4045c2 active text/indicator, Open Sans font stack, exact Figma padding. Item mapping (R36 → R37): • R36 Orders → R37 Orders (icon unchanged: shopping-bag-open) • R36 Inventory → R37 Inventory (icon unchanged: tray) • R36 Targeting → R37 Targeting (icon unchanged: briefcase-metal) • R36 Rate Card → R37 Pricing (icon unchanged: tag) • R36 Finance → R37 Invoices (icon unchanged: invoice) • R36 Identity → R37 Identity (still ACTIVE, still user-list) • R36 Settings → R37 Settings (icon unchanged: gear-fine) • (new) → R37 Dashboard (Phosphor squares-four, at top) Net result: same visual system, 8 items instead of 7, ATLAS naming. All CSS declarations for R37 live in the R35 / R36 blocks above. */ /* ═══════════════════════════════════════════════════════════════════════════ V4 — Round 46 — Rate Card visual-parity pass (Access Management) Objective: make Access Management visually indistinguishable from Rate Card at the design-system level while preserving every AM feature (tabs, Internal/External toggle, Add User, sort/filter, pagination totals, first/last nav, avatars, chips, status icons) and keeping Identity as the active left-nav item. Scope: strictly additive, scoped to [data-iam-version="v4"]. Every rule below is a small delta on top of R33/R34/R35/R36/R37/R38 — no product content changes, no route changes, no data changes. Sources of truth for the deltas: • Rate Card canonical render (screenshot, localhost:8001) — the shared ADS sibling used as the visual reference. • ads-components.json (v2.1) — Card, Button, Search, Field, Tab, Pagination, Chip token shapes. • design.md — Indigo brand, Open Sans body / Multiplane display. R46-1. Drop the "V4 · ADS" chip. R38 introduced a small brand-wash pill next to the page H1 so the version was obvious side-by-side with V3. Rate Card has no version chip; matching that surface means suppressing this ::after chip. The chip is authored via `content: "V4 · ADS"` on `.hdr h1::after` at R32-3 (line ~8195) and re-tuned at R33-2 (line ~8374). Neither supplies a display:none pathway, so we clear it here. ─────────────────────────────────────────────────────────────────── */ [data-iam-version="v4"] .hdr h1::after { content: none !important; display: none !important; } /* Restore the H1 to a plain title (drops the inline-flex + gap that only existed to accommodate the chip). Multiplane display face, 500 weight, tightened tracking already come from R33-1. */ [data-iam-version="v4"] .hdr h1 { display: block; gap: 0; flex-wrap: nowrap; } /* R46-2. Flatten the nested card surfaces. The V3 markup wraps the tabs/toolbar/table/pagination in `.card` (the EDL container). V4/R38 added a `.v4-card` inside that same `.card` to supply the Rate-Card-style rounded frame. Both surfaces currently render border + shadow + radius, producing a subtle double-frame at the corners (outer 8px, inner 16px). Solution: when a `.v4-card` is present, neutralize the outer `.card` chrome so only the inner card paints the surface. This keeps the DOM byte-clean and applies exclusively where the `.v4-card` wrapper is used (the Access Management list surface). */ [data-iam-version="v4"] .card:has(> .v4-card) { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; margin-bottom: 0; } /* R46-3. Card radius parity. Rate Card's table card uses a mid-scale radius, not the Modal scale. R38-1 set the inner wrapper to 16px (Modal-scale); Rate Card renders closer to 12px (`radius/lg`). Bring V4 down to 12px for parity. Corners inherit through overflow:hidden to the tabs row (top) and pagination footer (bottom) automatically. */ html[data-iam-version="v4"] .v4-card { border-radius: 12px; } /* R46-4. Page rhythm. Rate Card places the page header on a comfortable 32px cushion above the card, with a tight 4-6px gap between the display title and the secondary subtitle. R32-based `.hdr { padding: 29px 0 33px }` and the `.hdr h1 { margin-bottom: 8px }` from the base sheet are both close; tighten the title→subtitle gap slightly and normalize header→card spacing so the card sits at the same optical distance as Rate Card. Scoped to V4 so V3 stays untouched. */ [data-iam-version="v4"] .hdr { padding: 32px 0 24px; } [data-iam-version="v4"] .hdr h1 { margin-bottom: 4px; } /* R46-5. Filter button — parity with Rate Card's Filter chip. Rate Card's Filter button reads as a light indigo-wash chip (`background: --ads-indigo-50`) with `--ads-indigo-300` icon + label at 32px height and 8px radius. V4's base `.btn-std` sets the outline treatment; the wash variant here is the ADS "tonal secondary" pattern used for tertiary filters. */ [data-iam-version="v4"] .v4-card .tbar .btn-std { background: var(--ads-indigo-50, #E2E3F2); border-color: transparent; color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .tbar .btn-std:hover { background: color-mix(in srgb, var(--ads-indigo-100, #6567CE) 22%, var(--ads-indigo-50, #E2E3F2)); border-color: transparent; color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .tbar .btn-std:focus-visible { outline: 2px solid var(--ads-indigo-300, #4045C2); outline-offset: 2px; } /* Icon inherits currentColor so it always tracks the indigo label. */ [data-iam-version="v4"] .v4-card .tbar .btn-std svg { color: currentColor; } /* R46-6. Add User primary button — parity with Rate Card's "Create rate card" indigo primary. V4 renders Add User via `.btn-ghost` (V3 markup carry-over — the class name is legacy, the visual should be a solid primary). Restate the primary treatment here without touching V3. Radius 8px (matches ADS Button md size), height 32px, indigo bg from Indigo 300, white label + icon, subtle 1px shadow that lifts it above the toolbar surface. */ [data-iam-version="v4"] .v4-card .tbar .btn-ghost { height: 32px; padding: 0 14px; border-radius: 8px; background: var(--ads-indigo-300, #4045C2); color: #ffffff; border: 1px solid var(--ads-indigo-300, #4045C2); box-shadow: 0 1px 2px rgba(15, 18, 20, 0.14); transition: background-color .12s ease, box-shadow .12s ease, border-color .12s ease; } [data-iam-version="v4"] .v4-card .tbar .btn-ghost:hover { background: var(--ads-indigo-400, #3B3FBA); border-color: var(--ads-indigo-400, #3B3FBA); color: #ffffff; box-shadow: 0 2px 6px rgba(15, 18, 20, 0.18); } [data-iam-version="v4"] .v4-card .tbar .btn-ghost:active { background: var(--ads-indigo-500, #2E32A5, #333697); color: #ffffff; box-shadow: inset 0 1px 2px rgba(15, 18, 20, 0.12); } [data-iam-version="v4"] .v4-card .tbar .btn-ghost:focus-visible { outline: 2px solid var(--ads-indigo-300, #4045C2); outline-offset: 2px; } [data-iam-version="v4"] .v4-card .tbar .btn-ghost svg { color: currentColor; } /* R46-7. Search input — parity with Rate Card's search field. Rate Card renders the search input as a full white field with a leading magnifier icon and the placeholder in Gray 200. V4's base sheet places the icon on the RIGHT — swap to the leading position under V4 for Rate-Card parity while preserving JS selectors (icon element stays in the same DOM position; only its `left` / `right` coordinates change). */ [data-iam-version="v4"] .v4-card .tbar .search { width: 360px; } [data-iam-version="v4"] .v4-card .tbar .search input { height: 32px; padding: 0 12px 0 36px; border-radius: 8px; border: 1px solid var(--border-input, rgba(15, 18, 20, 0.2)); background: #ffffff; font-size: 14px; line-height: 20px; } [data-iam-version="v4"] .v4-card .tbar .search .search-ico { left: 12px; right: auto; color: var(--text-secondary); stroke: currentColor; } [data-iam-version="v4"] .v4-card .tbar .search .search-clear { right: 8px; } /* R46-8. Segmented control (Internal / External). Final-QA correction, inspected directly against Figma Dev Mode node 1003:17834 ("Toggle Group" / ADS Toggle Group component) — every value below is a measured node property, not an approximation: • Outer "Toggle Group": 180×44 total, 4px padding on all sides, 6px radius, track background rgba(15,18,20,0.05) (a neutral black-wash, NOT the opaque --iam-ads-canvas #f3f3f3 used elsewhere), NO border/stroke. • Each "Toggle Group Item": 86×36 (0 gap between the two items — differentiated purely by background, not a divider), 16px/8px padding-x/y, 6px radius (same as outer), 6px internal gap (unused here — no leading icon on Internal/External). • Selected item ("Internal" in the reference): white background, drop-shadow 0px 1px 1.5px rgba(15,18,20,0.3), text Open Sans SemiBold 14px/20px #1e2528 (--iam-ads-text). • Unselected item ("External"): transparent background, text Open Sans Regular 14px/20px #3b4347 (--iam-ads-text-secondary). `flex:1` on each item (below) keeps the two segments equal-width — matching the node's own 86/86 split — and keeps the control's own footprint stable when the selection toggles, instead of letting the heavier SemiBold label subtly resize its segment. The control's overall size still comes from its own content + padding (not stretched by the toolbar), so it cannot grow wider than Figma. */ [data-iam-version="v4"] .v4-card .tbar .seg-ctrl { height: 44px; /* Base `.seg-ctrl` (shared with V1-V3) sets `margin-left: 8px`, which was stacking on top of `.tbar-l`'s own 12px flex `gap` and pushing the Filter→Internal/External gap to 20px instead of the same 12px rhythm used for Internal/External→Search. Zeroing it here lets `.tbar-l`'s gap alone govern spacing on both sides. */ margin-left: 0; display: flex; align-items: stretch; border-radius: 6px; padding: 4px; border: 0; background: rgba(15, 18, 20, 0.05); } [data-iam-version="v4"] .v4-card .tbar .seg-btn { flex: 1 1 0; /* The shared base `.seg-btn` rule (used by V1-V3's segmented controls) sets `min-width: 96px`, which was silently padding this control out to 200px total (96×2 + 2×4px) — 20px wider than Figma's measured 180px (86×2 + 2×4px). Overriding to `auto` here lets each segment size to its own 16px-padding + text content, matching the node exactly (both labels render ~54px wide at this font, so 16+54+16 = 86px either way — Figma's own two segments independently land on the same width, not by a forced min-width). */ min-width: 0; height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; border: 0; background: transparent; color: var(--iam-ads-text-secondary, #3b4347); white-space: nowrap; } [data-iam-version="v4"] .v4-card .tbar .seg-btn:not(.on):hover { color: var(--iam-ads-text, #1e2528); background: rgba(15, 18, 20, 0.04); } [data-iam-version="v4"] .v4-card .tbar .seg-btn.on { background: var(--iam-ads-surface, #ffffff); color: var(--iam-ads-text, #1e2528); font-weight: 600; box-shadow: 0 1px 1.5px rgba(15, 18, 20, 0.3); } [data-iam-version="v4"] .v4-card .tbar .seg-btn.on:hover { background: var(--iam-ads-surface, #ffffff); } [data-iam-version="v4"] .v4-card .tbar .seg-btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; z-index: 1; } [data-iam-version="v4"] .v4-card .tbar .seg-btn + .seg-btn { border-left: 0; } /* R46-9. Tabs — parity polish. V4 base sheet renders `.tab-btn` at 18px/800 (very bold). The Rate Card / ADS tab pattern uses 14px/600 with a 2px indigo underline on the selected tab. Under V4 only, restyle the tabs inside the .v4-card so the tab-row reads as an ADS TopBarTab rather than an EDL heading. */ [data-iam-version="v4"] .v4-card .tabs-row { height: 44px; padding: 0 20px; align-items: stretch; border-bottom: 1px solid rgba(15, 18, 20, 0.08); } [data-iam-version="v4"] .v4-card .tabs-row nav { gap: 20px; align-items: stretch; height: 100%; } [data-iam-version="v4"] .v4-card .tab-btn { height: 44px; padding: 0 4px; align-items: center; font-family: 'Open Sans', var(--ff); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; color: var(--text-secondary); background: transparent; border: 0; } [data-iam-version="v4"] .v4-card .tab-btn:hover:not(.on) { color: var(--text-primary); } [data-iam-version="v4"] .v4-card .tab-btn.on { color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .tab-btn.on::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--ads-indigo-300, #4045C2); border-radius: 1px; } /* R46-10. Pagination page-cell parity. Rate Card renders numeric page cells as 32×32 squares (8px radius base, filled indigo when selected). R33-5 set the selected pill correctly; here we restate the base cell shape at 32×32 so idle cells no longer look like 24×24 EDL chiclets. Includes the nav arrows (« < > ») so the whole cluster stays on the same grid. Scoped to `.v4-card .pgn` so it does not leak into any other pagination surface (Edit User / Edit Role). */ [data-iam-version="v4"] .v4-card .pgn .pg-nums .pg-n { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 8px; font-size: 13px; line-height: 20px; color: var(--text-primary); } [data-iam-version="v4"] .v4-card .pgn .pg-nums .pg-n.on, [data-iam-version="v4"] .v4-card .pgn .pg-nums .pg-n[aria-current] { background: var(--ads-indigo-300, #4045C2); color: #ffffff; } [data-iam-version="v4"] .v4-card .pgn .pg-nav { width: 32px; height: 32px; border-radius: 8px; color: var(--text-secondary); } [data-iam-version="v4"] .v4-card .pgn .pg-nav:not(.off):hover { background: var(--ads-indigo-50, #E2E3F2); color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .pgn .pg-nav.off { color: rgba(15, 18, 20, 0.32); pointer-events: none; } /* R46-11. Toolbar row rhythm. Rate Card places 12px between the Filter button, the segmented control (where present), and the Search input. V4's base rule sits at 8px. Bring the wide gap up to 12px so the four controls share Rate Card's rhythm at desktop width. */ [data-iam-version="v4"] .v4-card .tbar .tbar-l { gap: 12px; } /* R46-12. Row-height + hover polish for parity. Rate Card's rows are 48px with a subtle brand-wash hover. R33-3c already delivered the hover wash; make sure the base row height remains 48px inside the v4-card even if a downstream rule overrides `.tbl td { height }`. Rate Card renders `.tbl thead th` at 40px height (slightly taller than V4's 32px) — bring V4 up so the header divider sits on the same optical baseline. */ [data-iam-version="v4"] .v4-card .tbl thead th { height: 40px; } [data-iam-version="v4"] .v4-card .tbl tbody td { height: 56px; } /* R46-13. Guardrail — no accidental oversized pills on standard inputs. If any downstream rule tries to blanket-apply a fully rounded radius (100px / 9999px) to text inputs, ensure the Access Management toolbar's search input stays on the 6-8px scale. `.seg-ctrl` itself is excluded here — Figma node 1003:17834 measures 6px radius on the Toggle Group track (not 8px); its own rule above is the source of truth for that value. */ [data-iam-version="v4"] .v4-card .tbar input { border-radius: 8px; } [data-iam-version="v4"] .v4-card .tbar .seg-ctrl { border-radius: 6px; } [data-iam-version="v4"] .v4-card .tbar .seg-btn { border-radius: 6px; } /* R46-14. Narrow-desktop responsiveness. Wide-viewport rules above already match Rate Card at 1440. At ≤1280 and ≤1120 the sidebar and page gutters compress. Restate the toolbar horizontal padding + search width so controls stay usable and the pagination remains a single row. */ @media (max-width: 1280px) { html[data-iam-version="v4"] .v4-card .tbar .search { width: 300px; } html[data-iam-version="v4"] .v4-card .tbar { padding: 14px 16px; } html[data-iam-version="v4"] .v4-card .tabs-row { padding-left: 16px; padding-right: 16px; } html[data-iam-version="v4"] .v4-card .pgn { padding: 12px 16px; } } @media (max-width: 1120px) { html[data-iam-version="v4"] .v4-card .tbar .search { width: 240px; } html[data-iam-version="v4"] .v4-card .tbar .tbar-l { flex-wrap: wrap; row-gap: 8px; } } /* R46-15. Guardrail — the outer legacy V3 `.card` rule under V4 (R32-3a, line ~8225) sets a border + shadow. R46-2's :has() rule removes them where a .v4-card exists, but older browsers without :has() support (Safari <15.4, Chrome <105) would still paint the outer chrome. Restate a fallback that hides the outer chrome whenever the .card contains only the .v4-card wrapper. Modern browsers already covered by R46-2 above; this is belt-and-braces. */ @supports not selector(:has(*)) { [data-iam-version="v4"] main.page > .card { background: transparent; border: 0; box-shadow: none; overflow: visible; margin-bottom: 0; border-radius: 0; } } @media (max-width: 900px) { html[data-iam-version="v4"] .v4-card .pgn { height: auto; min-height: 96px; padding: 8px 12px; } } /* R57B — final targeted lock after every legacy cascade block. */ html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab { height: 32px !important; padding: 8px 16px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #51585b !important; font: 400 18px/24px "Open Sans", sans-serif !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:hover:not(:disabled):not(.on) { color: #3b4347 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on { height: 39px !important; padding: 8px 16px 7px !important; color: #4045c2 !important; font-weight: 600 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on::after { bottom: 0 !important; height: 3px !important; background: #4045c2 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:focus-visible { height: 40px !important; padding: 8px 16px !important; border-radius: 3px !important; color: #4045c2 !important; outline: 0 !important; box-shadow: inset 0 0 0 2px #4045c2 !important; } html[data-iam-version="v4"] .ads-search > input, html[data-iam-version="v4"] .tm-add-search.ads-search > input { width: auto !important; height: 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #1e2528 !important; font: 400 14px/20px "Open Sans", sans-serif !important; } html[data-iam-version="v4"] .ads-search > input:focus, html[data-iam-version="v4"] .tm-add-search.ads-search > input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; } html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-ico { position: static !important; left: auto !important; right: auto !important; width: 20px !important; height: 20px !important; transform: none !important; color: #51585b !important; } html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-clear { position: static !important; left: auto !important; right: auto !important; /* Round 23 (2026-08-11): 16px -> 24px clickable area, matching the canonical `.ads-search .search-clear` rule below — this is one of three byte-identical duplicate blocks in this file (all `!important`, so all three had to move together or the lowest-value one would keep winning the cascade). */ width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; } html[data-iam-version="v4"] .ads-search:focus-within { border-color: rgba(15, 18, 20, 0.50) !important; box-shadow: none !important; } html[data-iam-version="v4"] button:is(.btn-std, .btn-ghost, .au-btn-save, .cr-btn-save, .au-btn-add, .cr-btn-add, .flt-btn-cancel, .flt-btn-apply, .cr-btn-danger-solid) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; height: 36px !important; padding: 8px 12px !important; gap: 4px !important; border-radius: 6px !important; font: 600 14px/20px "Open Sans", sans-serif !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost, html[data-iam-version="v4"] button.au-btn-save, html[data-iam-version="v4"] button.cr-btn-save, html[data-iam-version="v4"] button.flt-btn-apply { border: 0 !important; background: #4045c2 !important; color: #fff !important; box-shadow: none !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:hover:not(:disabled), html[data-iam-version="v4"] button.au-btn-save:hover:not(:disabled), html[data-iam-version="v4"] button.cr-btn-save:hover:not(:disabled), html[data-iam-version="v4"] button.flt-btn-apply:hover:not(:disabled) { background: #6567ce !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:active:not(:disabled), html[data-iam-version="v4"] button.au-btn-save:active:not(:disabled), html[data-iam-version="v4"] button.cr-btn-save:active:not(:disabled), html[data-iam-version="v4"] button.flt-btn-apply:active:not(:disabled) { background: #4045c2 !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:disabled, html[data-iam-version="v4"] button.au-btn-save:disabled, html[data-iam-version="v4"] button.cr-btn-save:disabled, html[data-iam-version="v4"] button.flt-btn-apply:disabled { border-color: transparent !important; background: #e2e3f2 !important; color: rgba(255, 255, 255, 0.50) !important; opacity: 1 !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel) { border: 1px solid #4045c2 !important; background: transparent !important; color: #4045c2 !important; box-shadow: none !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel):hover:not(:disabled) { background: rgba(15, 18, 20, 0.05) !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel):active:not(:disabled) { background: rgba(15, 18, 20, 0.10) !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel):disabled { border-color: #e2e3f2 !important; background: rgba(15, 18, 20, 0.05) !important; color: #e2e3f2 !important; opacity: 1 !important; } @media (max-width: 768px) { html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab, html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on, html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:focus-visible { padding-left: 16px !important; padding-right: 16px !important; } } /* R57 terminal cascade lock. Legacy page-specific selectors below the shared component foundation predate ADS primitives and carry ID-level specificity. These narrowly scoped locks keep the official components authoritative without touching tables, pagination, navigation, forms or segmented controls. */ html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab { height: 32px !important; padding: 8px 16px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #51585b !important; font-family: "Open Sans", sans-serif !important; font-size: 18px !important; font-weight: 400 !important; line-height: 24px !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:hover:not(:disabled):not(.on) { color: #3b4347 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on { height: 39px !important; padding: 8px 16px 7px !important; color: #4045c2 !important; font-weight: 600 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on::after { bottom: 0 !important; height: 3px !important; background: #4045c2 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:focus-visible { height: 40px !important; padding: 8px 16px !important; border-radius: 3px !important; color: #4045c2 !important; outline: 0 !important; box-shadow: inset 0 0 0 2px #4045c2 !important; } html[data-iam-version="v4"] .ads-search > input, html[data-iam-version="v4"] .tm-add-search.ads-search > input { width: auto !important; height: 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #1e2528 !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; } html[data-iam-version="v4"] .ads-search > input:focus, html[data-iam-version="v4"] .tm-add-search.ads-search > input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; } html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-ico { position: static !important; left: auto !important; right: auto !important; width: 20px !important; height: 20px !important; transform: none !important; color: #51585b !important; } html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-clear { position: static !important; left: auto !important; right: auto !important; /* Round 23 (2026-08-11): 16px -> 24px clickable area, matching the canonical `.ads-search .search-clear` rule below — this is one of three byte-identical duplicate blocks in this file (all `!important`, so all three had to move together or the lowest-value one would keep winning the cascade). */ width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; } html[data-iam-version="v4"] .ads-search:focus-within { border-color: rgba(15, 18, 20, 0.50) !important; box-shadow: none !important; } html[data-iam-version="v4"] button:is( .btn-std, .btn-ghost, .au-btn-save, .cr-btn-save, .au-btn-add, .cr-btn-add, .flt-btn-cancel, .flt-btn-apply, .cr-btn-danger-solid ) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; height: 36px !important; padding: 8px 12px !important; gap: 4px !important; border-radius: 6px !important; font-family: "Open Sans", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 20px !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost, html[data-iam-version="v4"] button.au-btn-save, html[data-iam-version="v4"] button.cr-btn-save, html[data-iam-version="v4"] button.flt-btn-apply { border: 0 !important; background: #4045c2 !important; color: #ffffff !important; box-shadow: none !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:hover:not(:disabled), html[data-iam-version="v4"] button.au-btn-save:hover:not(:disabled), html[data-iam-version="v4"] button.cr-btn-save:hover:not(:disabled), html[data-iam-version="v4"] button.flt-btn-apply:hover:not(:disabled) { background: #6567ce !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:active:not(:disabled), html[data-iam-version="v4"] button.au-btn-save:active:not(:disabled), html[data-iam-version="v4"] button.cr-btn-save:active:not(:disabled), html[data-iam-version="v4"] button.flt-btn-apply:active:not(:disabled) { background: #4045c2 !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:disabled, html[data-iam-version="v4"] button.au-btn-save:disabled, html[data-iam-version="v4"] button.cr-btn-save:disabled, html[data-iam-version="v4"] button.flt-btn-apply:disabled { border-color: transparent !important; background: #e2e3f2 !important; color: rgba(255, 255, 255, 0.50) !important; opacity: 1 !important; } html[data-iam-version="v4"] button:is( .btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel ) { border: 1px solid #4045c2 !important; background: transparent !important; color: #4045c2 !important; box-shadow: none !important; } html[data-iam-version="v4"] button:is( .btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel ):hover:not(:disabled) { background: rgba(15, 18, 20, 0.05) !important; } html[data-iam-version="v4"] button:is( .btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel ):active:not(:disabled) { background: rgba(15, 18, 20, 0.10) !important; } html[data-iam-version="v4"] button:is( .btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel ):disabled { border-color: #e2e3f2 !important; background: rgba(15, 18, 20, 0.05) !important; color: #e2e3f2 !important; opacity: 1 !important; } @media (max-width: 768px) { html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab, html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on, html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:focus-visible { padding-left: 16px !important; padding-right: 16px !important; } } /* ═══════════════════════════════════════════════════════════════════ R57 — Official ADS shared components: Tabs, Search and Button Figma sources: Primary Tab 57:56 · Search 37:16 · Button 17:542 / 7722:228 This terminal layer intentionally preserves every legacy class/ID used by app.js and only replaces shared component presentation. ═══════════════════════════════════════════════════════════════════ */ html[data-iam-version="v4"] { --ads-target-control-border: rgba(15, 18, 20, 0.20); --ads-target-control-border-bold: rgba(15, 18, 20, 0.50); --ads-target-control-hover: rgba(15, 18, 20, 0.05); --ads-target-control-active: rgba(15, 18, 20, 0.10); --ads-target-disabled-surface: #e2e3f2; --ads-target-disabled-text: rgba(15, 18, 20, 0.30); --ads-target-button-hover: #6567ce; } /* Primary Tab — Default size, no optional icon/counter for IAM labels. */ html[data-iam-version="v4"] .ads-tabs { height: 56px; padding: 8px 0 9px; border-bottom: 1px solid rgba(15, 18, 20, 0.10); align-items: flex-start; } html[data-iam-version="v4"] .ads-tabs > nav { height: 40px; gap: 0; align-items: flex-start; } html[data-iam-version="v4"] .ads-tab { position: relative; box-sizing: border-box; display: inline-flex; align-items: flex-start; height: 32px; padding: 8px 16px 0; border: 0; border-radius: 0; background: transparent; color: #51585b; font-family: "Open Sans", sans-serif; font-size: 18px; font-weight: 400; line-height: 24px; white-space: nowrap; cursor: pointer; } html[data-iam-version="v4"] .ads-tab:hover:not(:disabled):not(.on) { color: #3b4347; background: transparent; } html[data-iam-version="v4"] .ads-tab.on { height: 39px; padding: 8px 16px 7px; color: #4045c2; font-weight: 600; } html[data-iam-version="v4"] .ads-tab.on::after { bottom: 0; height: 3px; border-radius: 0; background: #4045c2; } html[data-iam-version="v4"] .ads-tab:focus-visible { height: 40px; padding: 8px 16px; border-radius: 3px; color: #4045c2; outline: 0; box-shadow: inset 0 0 0 2px #4045c2; } html[data-iam-version="v4"] .ads-tab:disabled, html[data-iam-version="v4"] .ads-tab[aria-disabled="true"] { color: rgba(15, 18, 20, 0.30); opacity: 0.40; cursor: not-allowed; } /* Search — the wrapper owns ADS border/background/radius while the native input remains the existing JS hook and query-state owner. Round 23 (2026-08-11 — search-field responsive width): this is a flex ITEM (its own parent, `.tbar-l`, is `display:flex`), so the `width` below is only a fallback for non-flex contexts — the value that actually governs layout is the flex-basis carried by the `flex` shorthand a few lines down (flex-basis wins over `width` whenever it's a definite length, per the flexbox spec), which is why both are kept in lockstep with the same `clamp(...)` expression. The `41.667vw` coefficient is chosen so the curve is perfectly continuous AND hits exactly 600px right at 1440px (600 / 1440 = 0.41666...): below 1440px it scales fluidly with the viewport (never jumping between breakpoints), at/above 1440px `clamp` caps it at the 600px ceiling on its own — no separate `@media (min-width: 1440px)` snap needed. Below a hard 280px floor, flexbox is still allowed to shrink it further on genuinely narrow viewports (never a fixed 280px `min-width`) so it can never itself force horizontal overflow; 280px remains the *preferred* size down to a ~672px-wide flex row, per the brief, simply because that's where `41.667vw` first drops below 280px. The one exception is `min-width: 120px`: `#usersPanel .tbar-l` has a separate, pre-existing `max-width: calc(100% - 240px)` reservation (for Export + Add User) that goes negative below ~615px of *card* width regardless of this field — Filter and the segmented control both refuse to shrink (`flex-shrink: 0`) and simply overflow that reservation, leaving search, as the only shrinkable sibling, to absorb literally all of the deficit and collapse to ~0px. 120px is a pragmatic floor that keeps the field itself minimally visible/usable (still shows a few characters and the clear button) through that pre-existing squeeze, without reopening the `.tbar-l` reservation logic itself. */ html[data-iam-version="v4"] .ads-search { position: relative; box-sizing: border-box; display: flex; align-items: center; width: clamp(280px, 41.667vw, 600px); min-width: 120px; max-width: 600px; height: 36px; padding: 8px 16px; gap: 8px; flex: 0 1 clamp(280px, 41.667vw, 600px); border: 1px solid var(--ads-target-control-border); border-radius: 100px; background: #ffffff; color: #51585b; transition: border-color 120ms ease, background-color 120ms ease; } html[data-iam-version="v4"] .ads-search:hover:not(:focus-within) { border-color: var(--ads-target-control-border); } html[data-iam-version="v4"] .ads-search:focus-within { border-color: var(--ads-target-control-border-bold); background: #ffffff; box-shadow: none; } html[data-iam-version="v4"] .ads-search:has(input:disabled) { border-color: var(--ads-target-control-border); background: rgba(15, 18, 20, 0.05); opacity: 0.60; } html[data-iam-version="v4"] .ads-search > input, html[data-iam-version="v4"] .tm-add-search.ads-search > input { order: 1; flex: 1 1 auto; min-width: 0; width: auto; height: 20px; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: #1e2528; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; } html[data-iam-version="v4"] .ads-search > input:hover, html[data-iam-version="v4"] .ads-search > input:focus, html[data-iam-version="v4"] .tm-add-search.ads-search > input:hover, html[data-iam-version="v4"] .tm-add-search.ads-search > input:focus { border: 0; outline: 0; background: transparent; box-shadow: none; } html[data-iam-version="v4"] .ads-search > input::placeholder { color: #51585b; opacity: 1; font-weight: 400; } html[data-iam-version="v4"] .ads-search .search-ico, html[data-iam-version="v4"] .ads-search .tm-add-search-icon { position: static; order: 0; display: block; width: 20px; height: 20px; flex: 0 0 20px; transform: none; color: #51585b; pointer-events: none; } /* Round 23 (2026-08-11 — search-field text alignment): this toolbar field (`#searchWrap`/`#rpSearchWrap`/`#tmSearchWrap` — Users/Roles/ Teams) never actually shows a leading magnifier once it has a query (the base `.search.has-value .search-ico{opacity:0}` rule already fades it out), but as a static flex item it kept reserving its full 20px + 8px gap of layout space even while invisible, pushing typed text ~28px further right than the field's own padding alone would. `display: none` (rather than opacity) removes it from the flex flow entirely so entered text sits directly against the field's 16px padding, and — since the icon is then never rendered in either state for this field — placeholder and entered text land at the identical x-position instead of shifting when the query is cleared. `.tm-add-search-icon` (the unrelated "Add members" modal search, which always shows its icon) is intentionally left out of this rule so it keeps its own icon untouched. */ html[data-iam-version="v4"] .ads-search .search-ico { display: none; } html[data-iam-version="v4"] .ads-search .search-clear { position: static; order: 2; width: 24px; min-width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 100px; background: transparent; color: #51585b; /* Cancels the base `.search-clear { transform: translateY(-50%) }` rule (written for its old absolute-positioned layout), which was leaking into this flex-centered context and pushing the button up by half its own height — the ~8px "sits too high" bug. Vertical centering here comes entirely from the parent's flex `align-items: center` now, so no transform is needed. The box grows 16px -> 24px for a full 24x24 clickable area per the design brief; the 16x16 SVG glyph inside stays centered within it for free via the base `.search-clear` rule's own `display:inline-flex; align-items:center; justify-content:center`. */ transform: none; } html[data-iam-version="v4"] .ads-search .search-clear svg { width: 16px; height: 16px; } html[data-iam-version="v4"] .ads-search .search-clear:hover { background: var(--ads-target-control-hover); } html[data-iam-version="v4"] .ads-search .search-clear:focus-visible { outline: 2px solid #4045c2; outline-offset: 2px; } html[data-iam-version="v4"] .ads-search .search-dropdown { order: 3; } html[data-iam-version="v4"] .tm-add-search.ads-search { width: 100%; flex: 0 0 auto; /* Height and padding are deliberately left to the shared `.ads-search` default (36px), which is what the Add User picker's field uses. This modal used to trim the control to 32px to echo the Name/Description inputs on the Edit Team page behind it, but the two pickers sit side by side in the same flow and a 4px difference between their search fields is visible. */ } /* ADS Button default shared anatomy — 14/20 Semibold, 16px icon, 4px gap, 12x8 padding, 6px radius and 36px rendered height. */ html[data-iam-version="v4"] .btn-std, html[data-iam-version="v4"] .btn-ghost, html[data-iam-version="v4"] .au-btn-save, html[data-iam-version="v4"] .cr-btn-save, html[data-iam-version="v4"] .au-btn-add, html[data-iam-version="v4"] .cr-btn-add, html[data-iam-version="v4"] .flt-btn-cancel, html[data-iam-version="v4"] .flt-btn-apply, html[data-iam-version="v4"] .cr-btn-danger-solid { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; height: 36px; padding: 8px 12px; gap: 4px; border-radius: 6px; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; white-space: nowrap; } html[data-iam-version="v4"] .btn-std > svg, html[data-iam-version="v4"] .btn-ghost > svg, html[data-iam-version="v4"] .au-btn-save > svg, html[data-iam-version="v4"] .cr-btn-save > svg, html[data-iam-version="v4"] .au-btn-add > svg, html[data-iam-version="v4"] .cr-btn-add > svg, html[data-iam-version="v4"] .flt-btn-cancel > svg, html[data-iam-version="v4"] .flt-btn-apply > svg, html[data-iam-version="v4"] .cr-btn-danger-solid > svg { width: 16px; height: 16px; flex: 0 0 16px; } /* Primary. */ html[data-iam-version="v4"] .v4-card .tbar .btn-ghost, html[data-iam-version="v4"] .au-btn-save, html[data-iam-version="v4"] .cr-btn-save, html[data-iam-version="v4"] .flt-btn-apply { border: 0; background: #4045c2; color: #ffffff; } html[data-iam-version="v4"] .v4-card .tbar .btn-ghost:hover:not(:disabled), html[data-iam-version="v4"] .au-btn-save:hover:not(:disabled), html[data-iam-version="v4"] .cr-btn-save:hover:not(:disabled), html[data-iam-version="v4"] .flt-btn-apply:hover:not(:disabled) { background: #6567ce; color: #ffffff; } html[data-iam-version="v4"] .v4-card .tbar .btn-ghost:active:not(:disabled), html[data-iam-version="v4"] .au-btn-save:active:not(:disabled), html[data-iam-version="v4"] .cr-btn-save:active:not(:disabled), html[data-iam-version="v4"] .flt-btn-apply:active:not(:disabled) { background: #4045c2; color: #ffffff; } html[data-iam-version="v4"] .v4-card .tbar .btn-ghost:disabled, html[data-iam-version="v4"] .au-btn-save:disabled, html[data-iam-version="v4"] .cr-btn-save:disabled, html[data-iam-version="v4"] .flt-btn-apply:disabled { border-color: transparent; background: #e2e3f2; color: rgba(255, 255, 255, 0.50); opacity: 1; } /* Secondary — IAM Filter, Cancel, Add and Update actions. */ html[data-iam-version="v4"] .btn-std, html[data-iam-version="v4"] .au-btn-add, html[data-iam-version="v4"] .cr-btn-add, html[data-iam-version="v4"] .flt-btn-cancel { border: 1px solid #4045c2; background: transparent; color: #4045c2; } html[data-iam-version="v4"] .btn-std:hover:not(:disabled), html[data-iam-version="v4"] .au-btn-add:hover:not(:disabled), html[data-iam-version="v4"] .cr-btn-add:hover:not(:disabled), html[data-iam-version="v4"] .flt-btn-cancel:hover:not(:disabled) { border-color: #4045c2; background: rgba(15, 18, 20, 0.05); color: #4045c2; } html[data-iam-version="v4"] .btn-std:active:not(:disabled), html[data-iam-version="v4"] .au-btn-add:active:not(:disabled), html[data-iam-version="v4"] .cr-btn-add:active:not(:disabled), html[data-iam-version="v4"] .flt-btn-cancel:active:not(:disabled) { border-color: #4045c2; background: rgba(15, 18, 20, 0.10); color: #4045c2; } html[data-iam-version="v4"] .btn-std:disabled, html[data-iam-version="v4"] .au-btn-add:disabled, html[data-iam-version="v4"] .cr-btn-add:disabled, html[data-iam-version="v4"] .flt-btn-cancel:disabled { border-color: #e2e3f2; background: rgba(15, 18, 20, 0.05); color: #e2e3f2; opacity: 1; } html[data-iam-version="v4"] #createRolePage .cr-btn-add { border: 1px solid #4045c2; background: transparent; color: #4045c2; } /* Compact ghost text buttons preserve the existing hierarchy while using the official compact button size. NOTE (back-nav standardization): `.au-back`/`.cr-back` were removed from this group — back-navigation controls are their own ADS component (Button size=32, 14px/20px SemiBold) defined once near the top of this file, deliberately decoupled from this 26px/12px "small inline action" treatment used by Remove application/Remove User/etc. NOTE (Edit Role header-actions QA, 2026-08-11): `.cr-btn-remove` ("Remove Role") was also removed from this group — it now reuses the full-size (36px) `.au-revoke-btn`/`.tm-delete-btn` ADS ghost button component instead (see that rule's own comment), so it sits at the same height/vertical alignment as the adjacent Cancel/Save Role actions rather than this smaller 26px inline-link treatment. NOTE (Edit Team Members-table QA, Round 37, 2026-08-12): `.tm-row-remove` ("Remove" in the Members table) was also removed from this group for the same reason as `.cr-btn-remove` above — it now reuses the shared `.au-revoke-btn`/`.tm-delete-btn`/ `.cr-btn-remove` ghost-button color/interaction contract (Delete Team's own component) instead, paired with its own compact-size modifier scoped to `.tm-row-remove` alone (see that rule group further down this file) so it keeps a table-row-appropriate height without inheriting this group's generic 12px/gray-on-hover-only treatment. */ html[data-iam-version="v4"] .flt-btn-reset, html[data-iam-version="v4"] .au-remove-user-link, html[data-iam-version="v4"] .cr-app-remove, html[data-iam-version="v4"] .pc-grp-delete, html[data-iam-version="v4"] button.rp-func-link { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 26px; height: 26px; padding: 4px 8px; gap: 4px; border: 0; border-radius: 6px; background: transparent; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; } html[data-iam-version="v4"] .flt-btn-reset:hover, html[data-iam-version="v4"] .cr-app-remove:hover, html[data-iam-version="v4"] .pc-grp-delete:hover, html[data-iam-version="v4"] button.rp-func-link:hover { background: rgba(15, 18, 20, 0.05); } html[data-iam-version="v4"] .flt-btn-reset:active, html[data-iam-version="v4"] .cr-app-remove:active, html[data-iam-version="v4"] .pc-grp-delete:active, html[data-iam-version="v4"] button.rp-func-link:active { background: rgba(15, 18, 20, 0.10); } /* Semantic focus is shared by every migrated Button variant. */ html[data-iam-version="v4"] .btn-std:focus-visible, html[data-iam-version="v4"] .btn-ghost:focus-visible, html[data-iam-version="v4"] .au-btn-save:focus-visible, html[data-iam-version="v4"] .cr-btn-save:focus-visible, html[data-iam-version="v4"] .au-btn-add:focus-visible, html[data-iam-version="v4"] .cr-btn-add:focus-visible, html[data-iam-version="v4"] .flt-btn-cancel:focus-visible, html[data-iam-version="v4"] .flt-btn-apply:focus-visible, html[data-iam-version="v4"] .flt-btn-reset:focus-visible, html[data-iam-version="v4"] .au-remove-user-link:focus-visible, html[data-iam-version="v4"] .cr-app-remove:focus-visible, html[data-iam-version="v4"] .pc-grp-delete:focus-visible, html[data-iam-version="v4"] button.rp-func-link:focus-visible, html[data-iam-version="v4"] .cr-btn-danger-solid:focus-visible { outline: 2px solid #4045c2; outline-offset: 2px; } /* Official icon-only Button size. Search clear remains the Search component's own 16px action and pagination/nav controls stay scoped out of this targeted migration. */ html[data-iam-version="v4"] .flt-close, html[data-iam-version="v4"] .edl-modal-close, html[data-iam-version="v4"] .edl-toast-close { box-sizing: border-box; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #51585b; } html[data-iam-version="v4"] .flt-close:hover, html[data-iam-version="v4"] .edl-modal-close:hover, html[data-iam-version="v4"] .edl-toast-close:hover { background: rgba(15, 18, 20, 0.05); } html[data-iam-version="v4"] .flt-close:active, html[data-iam-version="v4"] .edl-modal-close:active, html[data-iam-version="v4"] .edl-toast-close:active { background: rgba(15, 18, 20, 0.10); } html[data-iam-version="v4"] .flt-close:focus-visible, html[data-iam-version="v4"] .edl-modal-close:focus-visible, html[data-iam-version="v4"] .edl-toast-close:focus-visible { outline: 2px solid #4045c2; outline-offset: 2px; } @media (max-width: 768px) { html[data-iam-version="v4"] .ads-tab, html[data-iam-version="v4"] .ads-tab.on, html[data-iam-version="v4"] .ads-tab:focus-visible { padding-left: 16px; padding-right: 16px; } html[data-iam-version="v4"] .v4-card .tbar .ads-search { width: 100%; flex: 1 1 100%; } } /* ═══════════════════════════════════════════════════════════════════════════ V4 — Round 47 — Top navigation pixel-parity with Rate Card Figma Reference: Rate Card / Navigation — Figma node 375:6250 https://www.figma.com/design/Klc8JpICWSLwU1LeUVRHtT/Rate-Card?node-id=375-6250 Figma inspector spec: Container flex, items:center, px 24, bg #4045c2 (navigation/topbar/background) brand flex, gap 8, items:center ├─ Vector 32 × 28 (D-glyph, white) └─ "Disney Advertising" MultiplaneTWDC Display Bold 18/24 white spacer flex-1 0 0 ×2 (two spacers push utilities to the right rail) utilities flex, gap 16, items:center ├─ icon-notification 20 × 20 (Bell) ├─ icon-apps 20 × 20 (Sparkle) └─ avatar 32 × 32 The R33/R34/R36/R39 stack already delivered container height (56), horizontal padding (24), background, brand-cluster geometry, and the 20×20 icon sizes. The remaining drift measured against the Figma node: • Bell→Sparkle visible spacing was 36px (Figma: 16) • Sparkle→Avatar visible spacing was 30px (Figma: 16) • Avatar right edge sat 28px from viewport (Figma: 24) Root cause: the R34 utility-buttons carry `width: 40; padding: 10` for a 40×40 hit target around each 20×20 icon. The 10px horizontal padding pushes the icons 10px inward on each side, adding 20px of extra visible spacing between adjacent icons and 4px from the right rail. R47 tightens the utility buttons to the icon width (20 for Bell/ Sparkle, 32 for Avatar) so the raw icons sit at exactly the Figma gap (16 px). Hit target vertical stays at 40 px (parent nav is 56, so 40 gives 8px above/below breathing room). The hover state moves from an in-button background pill to a subtle pseudo-element wash so the visual hover ring can extend a few pixels around each icon without changing layout. Trade-off: WCAG 2.5.5 recommends 44×44 minimum touch targets. At 20 × 40 (Bell/Sparkle) the width is below spec. This is the exact trade-off Rate Card's Figma reference makes; the user's directive is "final rendered result must visually match the supplied Figma node — not merely approximate it," so we prioritize the visual match. Keyboard nav + hover work at any size. Product-nav (Sales / Planning / Ad Ops / Billing / Admin) stays hidden via R34-2 (Figma reference has no center nav). The DOM is preserved so V3 renders it normally under EDL. ─────────────────────────────────────────────────────────────────── */ /* R47-1. Utility buttons — collapse to icon-only width so the raw glyphs sit exactly 16 px apart per the Figma reference. The `.nav-r { gap: 16px }` from R34-4 already supplies the gap; we just need to strip the extra horizontal padding that R34-5 added for the 40 × 40 hit target. */ [data-iam-version="v4"] .nav-r .nav-r-btn { width: 20px; height: 40px; padding: 0; border-radius: 4px; background: transparent; color: #FFFFFF; border: 0; position: relative; transition: background-color .12s ease; } /* R47-2. Avatar trigger — 32 × 32 image inside a 32 × 40 button so the image aligns to the right rail (viewport - 24 px = nav's right padding edge). The image itself remains 32 × 32 per Figma. Vertical padding centers the 32 image inside the 40-tall button. */ [data-iam-version="v4"] #userMenuTrigger.nav-r-btn { width: 32px; height: 40px; padding: 4px 0; } [data-iam-version="v4"] .nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: cover; } /* R47-3. Icon dimensions — restate the 20 × 20 icon size (already set by R34-5, restated here so this block is self-contained if the older rule is ever refactored). */ [data-iam-version="v4"] .nav-r .nav-r-btn .nav-ico { width: 20px; height: 20px; display: block; color: #FFFFFF; } /* R47-4. Hover state — a subtle 12 % white wash on the button background. R34-5 defined the same treatment on a 40 × 40 pill; now that the buttons are 20 × 40 (Bell / Sparkle) or 32 × 40 (Avatar), the pill takes the same shape at 4 px radius. The hover on Avatar keeps its round image visible above the pill. */ [data-iam-version="v4"] .nav-r .nav-r-btn:hover { background: rgba(255, 255, 255, 0.12); } [data-iam-version="v4"] .nav-r .nav-r-btn:active { background: rgba(255, 255, 255, 0.18); } [data-iam-version="v4"] #userMenuTrigger.nav-r-btn:hover, [data-iam-version="v4"] #userMenuTrigger.nav-r-btn:active { background: transparent; } /* R47-5. Focus state — the semantic focus ring stays on the button at the correct 2 px offset regardless of button shape. */ [data-iam-version="v4"] .nav-r .nav-r-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; background: rgba(255, 255, 255, 0.12); } [data-iam-version="v4"] #userMenuTrigger.nav-r-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; background: transparent; } /* R47-6. Sticky nav guardrail — the base `.nav { position: sticky; top: 0; z-index: 100 }` already applies. Restate explicitly under V4 so no downstream rule accidentally strips sticky behavior. Height / min-height already 56 (R34-1). */ [data-iam-version="v4"] .nav { position: sticky; top: 0; z-index: 100; background: #4045C2; } /* R47-7. Border / shadow — Figma reference paints a flat bar with NO border and NO shadow. V3 base `.nav` has neither. Explicitly clear them so any theme override cannot introduce a fringe. */ [data-iam-version="v4"] .nav { border: 0; box-shadow: none; } /* R47-8. Legacy chip class overrides that the R34 stack still inherits — `.nav-mod` / `.nav-logo-group` / `.nav-logo-link` already fully zeroed via R39-1. Restate `.nav-l` sizing so the brand cluster hugs its content and never expands beyond the glyph + text (avoids pushing utilities right of viewport when the brand text wraps unexpectedly). */ [data-iam-version="v4"] .nav-l { flex: 0 0 auto; overflow: visible; } [data-iam-version="v4"] .nav-r { flex: 0 0 auto; } /* R47-9. Responsive parity — the Figma reference does not change the utility cluster at narrower widths (it stays a flush right- rail cluster). The brand text can shrink at very small widths so it doesn't wrap. Base R34 already reduces `.nav` padding at ≤1024/≤768; restate the utility-button width so nothing collapses into a taller stacked layout at any supported desktop width. The R39-6 rule at 768 already shrinks the brand text to 16/22 so it fits. Nothing else needs to reflow. */ @media (max-width: 1024px) { [data-iam-version="v4"] .nav-r .nav-r-btn { width: 20px; height: 40px; padding: 0; } [data-iam-version="v4"] #userMenuTrigger.nav-r-btn { width: 32px; height: 40px; padding: 4px 0; } } @media (max-width: 768px) { /* Left stays 0 (not the old flat 16px) — Final-QA (product-name horizontal position correction) made the left rail's own 64px width the thing that aligns the D-glyph with `.sidebar` (which never changes width/position at this breakpoint), so re-adding nav padding here would double that inset and drift the rail off the sidebar's 0–64 column exactly like the bug this pass fixed. */ [data-iam-version="v4"] .nav { padding: 0 16px 0 0; } } /* R47-10. Explicitly kill any leftover EDL utility-slot rules that could redirect the .nav-r-btn size on V4 (defensive — nothing currently sets these, but the ADS Preview block at line 4423 used to set a wider padding on nav-r-btn under [data-theme= "ads-preview"]. R47-1 wins on cascade + specificity, but restate at :where(...) to keep specificity tight so future additions can override cleanly if the design shifts). */ [data-iam-version="v4"][data-theme="ads-preview"] .nav-r .nav-r-btn { width: 20px; padding: 0; } [data-iam-version="v4"][data-theme="ads-preview"] #userMenuTrigger.nav-r-btn { width: 32px; padding: 4px 0; } /* ═══════════════════════════════════════════════════════════════ R50. Access Management — ADS visual alignment pass against Figma node 157:1924 (Klc8JpICWSLwU1LeUVRHtT / Rate Card). Two targeted drifts to close after a full-page audit of the R46 output against the supplied Figma page and the shipped Rate Card app at localhost:8001: 1. Search-input icon position — R46-7 moved the magnifier from the RIGHT (Figma-native) to the LEFT under the assumption that Rate Card used a leading icon. Direct inspection of Figma 157:1924 AND the shipped Rate Card app both show the icon on the RIGHT. 2. Filter button — R46-5 shipped `.btn-std` as a filled Indigo-50 wash (`#e2e3f2` bg + transparent border). The Figma reference (and the Rate Card app) render Filter as the OUTLINED variant: near-white bg, Indigo-300 border, Indigo-300 text/icon. Everything else on the Access Management page (page shell, header rhythm, main-card chrome, Users/Roles/Teams tabs, Internal/External segmented control, Add User primary, table density, name column, status treatment, pagination active + inactive) already matches Figma within pixel tolerance — no further changes needed in this pass. All Access Management content — page title, description, tab labels, table columns, user data, avatars, chips, pagination values, Add User label — is preserved verbatim. Only visual chrome changes here. */ /* R50-1. Search icon → RIGHT position (matches Figma 157:1924). R46-7 had `left: 12px; right: auto;` on `.search-ico` and `padding: 0 12px 0 36px;` on the input (label offset for the leading icon). Reverting to trailing-icon convention: • Icon: `right: 12px; left: auto;` • Input padding: 12 px left, 36 px right (icon + 4 px buffer) The clear-× (`.search-clear`) was previously anchored at `right: 8px`; with the icon now on the right the two would overlap. Slide the clear-× inboard to `right: 32px` (icon width 16 + 4 buffer + 12 icon right offset = 32) so it sits just to the left of the magnifier when the user types. */ [data-iam-version="v4"] .v4-card .tbar .search input { padding: 0 36px 0 12px; } [data-iam-version="v4"] .v4-card .tbar .search .search-ico { left: auto; right: 12px; } [data-iam-version="v4"] .v4-card .tbar .search .search-clear { right: 32px; } /* R50-2. Filter button → OUTLINED indigo (matches Figma 157:1924). R46-5 shipped `.btn-std` as an Indigo-50 filled chip. Figma's Filter and the Rate Card app both use the outlined secondary treatment: near-white background, 1 px Indigo-300 border, Indigo-300 text + icon. State ramp: • rest — white bg, indigo border, indigo text/icon • hover — very-light indigo wash (Indigo 50 at 60 %) bg, border + text unchanged so the button reads as "the same button, engaged" rather than a new element • active — full Indigo 50 wash bg, border + text unchanged • focus — 2 px Indigo 300 ring at 2 px offset (inherited from R46-5's focus-visible rule; restated here in case that rule is dropped later) */ [data-iam-version="v4"] .v4-card .tbar .btn-std { background: #ffffff; border: 1px solid var(--ads-indigo-300, #4045C2); color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .tbar .btn-std:hover { background: color-mix(in srgb, var(--ads-indigo-50, #E2E3F2) 60%, #ffffff); border-color: var(--ads-indigo-300, #4045C2); color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .tbar .btn-std:active { background: var(--ads-indigo-50, #E2E3F2); border-color: var(--ads-indigo-300, #4045C2); color: var(--ads-indigo-300, #4045C2); } [data-iam-version="v4"] .v4-card .tbar .btn-std:focus-visible { outline: 2px solid var(--ads-indigo-300, #4045C2); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════ R51 — Nav brand + avatar Figma-parity fixes (V4 only) User feedback on R47/R48 confirmed the top nav still reads as "off" against Figma 375:6250. Two specific drifts remained: 1. "Disney Advertising" wordmark weight was Medium (500), Figma specifies MultiplaneTWDC Display **Bold** (700). Local /assets/ fonts ships only the Medium woff2 (500). R39-4 chose to stay at 500 to avoid faux-bold blur; the Figma comparison shows this was the wrong call — the wordmark reads noticeably lighter than the Figma reference on a 1440 × 56 render. Modern Chrome/Safari synthesize a clean bold for Latin at 18 px with only a very slight softness on curved strokes, and closer visual parity with Figma outweighs the tiny softness. Bumping to 700 lets the browser generate a synthesized bold from the Medium file. 2. Avatar rendered with a visible light-lavender ring around Marge inside the circle. The V1/V2/V3 shared /nav/avatar.png has near-white lavender padding around the subject inside its transparent-cornered mask; on the indigo (#4045c2) navbar this padding reads as "an extra white circle wrapping the photo" — exactly the "Do not add an extra white circle" gripe in the brief. R51 addresses this at the asset layer: • public/nav/avatar-v4.png is a new V4-only PNG (64 × 64) generated from the source by cropping to Marge's actual bounding box (removing the light padding) and re-applying a circular alpha mask. • The V4 index.html now points at avatar-v4.png. • V1/V2/V3/DCM still reference the original avatar.png → no regression outside V4. The Figma-supplied brand SVG path is already inlined byte-identical in index.html (R40); no path change needed. The bell + sparkle SVGs in index.html are also byte-identical to Figma nodes 46:219 and 375:6233, so those stay as-is. The only remaining Figma-parity gap is the wordmark Bold font file (not shipped locally, browser will synthesize), documented above. ═══════════════════════════════════════════════════════════════════ */ /* R51-1. Brand wordmark — Figma spec is MultiplaneTWDC Display Bold (700) at 18 / 24. R39-4 kept this at 500 (Medium) because the file we ship is Medium; browsers substitute the same face when asked for 700 and synthesize a bolder rendering. This synthesized bold is visually much closer to Figma than the Medium was, and remains clean at 18 px. Higher specificity (`html[data-iam-version="v4"] .atlas-brand .atlas-brand-text`) ensures the rule wins over R39-4 at equal-source-order (both at (0,3,0) but R51 comes later in the cascade). */ html[data-iam-version="v4"] .atlas-brand .atlas-brand-text { font-weight: 700; } /* R51-2. Avatar — Figma renders the utility avatar slot as a 32 × 32 image with NO ring / border / background around the subject. The V1-V3 shared avatar has a light lavender-cream padding inside its transparent-cornered mask, which visually reads as "extra circle" on the indigo bar. R51 fixes this at the asset layer (new PNG public/nav/avatar-v4.png) and restates the img treatment here to guarantee: • No background color on the wrapper (indigo bar shows through the transparent corners of the PNG). • No border / box-shadow / ring on the image itself. • Explicit 32 × 32 CSS render (matches R47's dimensions; restated here so this block is self-contained). • object-fit: cover clips any anti-aliased edge pixels cleanly inside the 32 × 32 frame — the source PNG's own alpha mask already produces a circle, and CSS border-radius: 50% is a belt-and-suspenders reinforcement that keeps the shape perfectly round even on browsers that anti-alias the PNG alpha mask oddly at fractional DPRs. • image-rendering: -webkit-optimize-contrast + auto — the source is a raster and we render it at 32 CSS px from a 64-px asset (2× DPR ready). Optimizing for contrast keeps Marge's line art crisp on retina displays without the fuzz that some browsers introduce with default interpolation. The `#userMenuTrigger` selector is the button wrapper; R47-1 already removes its default background — restated here defensively so future selector reordering can't reintroduce a wrapper background that would read as a ring behind the avatar. */ [data-iam-version="v4"] #userMenuTrigger.nav-r-btn { background: transparent; } [data-iam-version="v4"] #userMenuTrigger.nav-r-btn .nav-avatar-img { width: 32px; height: 32px; border-radius: 50%; border: 0; box-shadow: none; background: transparent; padding: 0; display: block; object-fit: cover; object-position: center; image-rendering: -webkit-optimize-contrast; image-rendering: auto; } /* R51-3. User-menu wrapper vertical centering. `.user-menu` (line 238 base styles) is `position: relative; display: inline-flex; height: 100%` — this stretches the wrapper to the full 56 px nav height, but with no `align-items` set the default is `stretch`. Because the child #userMenuTrigger has an explicit `height: 40px` (R47-1), it cannot stretch to 56 — so it is instead aligned to the top of the flex container, sitting 16 px too high (avatar centerY = 20 instead of 28). Bell + Sparkle buttons are direct children of `.nav-r` which does center its children (visible in the QA probe: bellBtnCenterY = 28), so only the avatar wrapper needs this fix. Adding `align-items: center` centers the 40-px trigger inside the 56-px wrapper, pulling avatarCenterY from 20 → 28. This aligns the round avatar photo with the bell + sparkle icons on the same optical baseline. Scoped to V4 so V1/V2/V3 wrappers keep whatever alignment they had (they use different button heights + we don't own that regression risk). */ [data-iam-version="v4"] .user-menu { align-items: center; } /* R51-4. Avatar hover / focus — restate R47-4 / R47-5's transparent hover so #userMenuTrigger never renders a background wash behind the round avatar (which would read as a ring). The bell + sparkle buttons keep their 12 % white wash from R47-4 since they don't have a round photo in front. */ [data-iam-version="v4"] #userMenuTrigger.nav-r-btn:hover, [data-iam-version="v4"] #userMenuTrigger.nav-r-btn:active, [data-iam-version="v4"] #userMenuTrigger.nav-r-btn[aria-expanded="true"] { background: transparent; } [data-iam-version="v4"] #userMenuTrigger.nav-r-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; background: transparent; } /* ═══════════════════════════════════════════════════════════════════ R52 — repository-wide IAM V4 ADS visual unification Sources, in priority order: 1. ads-design-system/design.md + ads-components.json 2. the existing ADS Preview token/component layer in this file 3. Rate Card Manager v2.0 (localhost:8001, 2026-08-02) This pass changes presentation only. IDs, state classes, text, data, DOM order and JavaScript behavior remain untouched. ═══════════════════════════════════════════════════════════════════ */ html[data-iam-version="v4"][data-theme="ads-preview"] { --iam-ads-canvas: #f3f3f3; --iam-ads-surface: #ffffff; --iam-ads-text: #1e2528; --iam-ads-text-secondary: #3b4347; --iam-ads-text-muted: #51585b; --iam-ads-border: rgba(15, 18, 20, 0.20); --iam-ads-divider: rgba(15, 18, 20, 0.10); --iam-ads-brand: #4045c2; --iam-ads-brand-hover: #3b3fba; --iam-ads-brand-active: #363aab; --iam-ads-brand-wash: #e2e3f2; --iam-ads-control-radius: 6px; --iam-ads-card-radius: 16px; --iam-ads-dialog-radius: 12px; --iam-ads-control-height: 32px; --iam-ads-button-height: 36px; --iam-ads-card-elevation: 0 0 4px rgba(23, 29, 35, 0.13); --iam-ads-menu-elevation: 0 4px 12px rgba(15, 18, 20, 0.30); --iam-ads-dialog-elevation: 0 16px 40px rgba(15, 18, 20, 0.30); /* Toast — exact tokens read from the canonical ADS Toast component, Figma node 70:62 (file "Ads Design System"), via get_variable_defs. Figma variable names are noted so this block stays traceable back to source instead of approximating with arbitrary CSS. */ --iam-ads-toast-surface: #ffffff; /* toast/surface/default */ --iam-ads-toast-radius: 6px; /* toast/size/radius */ --iam-ads-toast-padding: 16px; /* toast/size/padding-x, applied on all 4 sides */ --iam-ads-toast-content-gap: 12px; /* toast/size/content/gap — icon ↔ content ↔ close */ --iam-ads-toast-text-gap: 4px; /* gap between title and message */ --iam-ads-toast-border-width: 5px; /* left-only accent border width (no border on the other 3 sides) */ /* elevation/30 = { y: 4, blur-length: 12 } and color/shadow/default rgba(15,18,20,0.3) → drop-shadow(0px 4px 6px …) (blur-length/2, per the Tailwind arbitrary-value math baked into the component). The nearest existing token (--iam-ads-menu-elevation) uses a 12px blur tuned for menus, not this exact toast value, so a dedicated token is defined instead of reusing an approximate one. */ --iam-ads-toast-elevation: 0 4px 6px rgba(15, 18, 20, 0.30); --iam-ads-toast-border-error: #db5461; /* toast/border/error */ --iam-ads-toast-border-warning: #f5bb7a; /* toast/border/warning */ --iam-ads-toast-border-success: #6cb288; /* toast/border/success */ --iam-ads-toast-border-info: #4045c2; /* toast/border/brand */ --iam-ads-toast-text-error: #993b44; /* toast/text/error */ --iam-ads-toast-text-warning: #5c3711; /* toast/text/warning */ --iam-ads-toast-text-success: #365944; /* toast/text/success */ --iam-ads-toast-text-info: #4045c2; /* toast/text/brand — the Info headline in the Figma component instance is styled with toast/text/brand, not the separate (unused-here) toast/text/info token */ --iam-ads-toast-text-body: #1e2528; /* toast/text/primary — supporting message, every variant */ color-scheme: light; } html[data-iam-version="v4"] body { background: var(--iam-ads-canvas); color: var(--iam-ads-text); font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Shell: retain the verified 56px top bar geometry while normalizing shared interaction states. Side-nav geometry now lives entirely in the single "Rate Card shared sidebar" block further down this file — see that block for the sidebar/.sb-item color+radius tokens this pass used to restate here. */ html[data-iam-version="v4"] .nav { height: 56px; min-height: 56px; background: var(--iam-ads-brand); border: 0; box-shadow: none; } /* List page: Rate Card's white header band over a gray content canvas. The full-bleed shadow technique changes no DOM structure. R58: this rule used to also re-declare `max-width: 1440px` here. That silently overrode the intentional `max-width: none` set on this same selector earlier in the file (R35-12) — same selector, same specificity, so the declaration that appears *later* in the cascade wins, regardless of either rule's intent. That stray re-assertion was the actual root cause of the "content stuck at 1440px even at 1920/2560" bug: `main.page` measured `max-width: 1440px` in the computed styles at every viewport width above 1440, which is exactly the ceiling the redesigned `.card` max-width (see R58 above) is supposed to own instead. Only `background` belongs in this rule now. */ html[data-iam-version="v4"] main.page { background: transparent; } /* Final-QA correction, measured against Figma 770:17428's absolute frame positions: title top sits 32px below the 56px nav (was 24px), and the header-to-card gap is 55px total (desc-bottom 152 to card-top 207) vs. the previous 24+24=48px — both confirmed by direct pixel-marker overlay on the Figma render, not just metadata. */ html[data-iam-version="v4"] main.page > .hdr { padding-top: 32px; padding-bottom: 24px; margin-bottom: 31px; background: var(--iam-ads-surface); box-shadow: 0 0 0 100vmax var(--iam-ads-surface); clip-path: inset(0 -100vmax); } html[data-iam-version="v4"] .hdr h1, html[data-iam-version="v4"] .au-title, html[data-iam-version="v4"] .cr-title, html[data-iam-version="v4"] .tm-title { font-family: "MultiplaneTWDC Display", "Open Sans", sans-serif; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -0.01em; color: var(--iam-ads-text); } html[data-iam-version="v4"] .hdr h1 { /* Figma measures an 8px gap between the title baseline block and the description (was 4px). */ margin: 0 0 8px; } html[data-iam-version="v4"] .hdr p, html[data-iam-version="v4"] .au-subtitle, html[data-iam-version="v4"] .cr-subtitle, html[data-iam-version="v4"] .tm-subtitle { font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--iam-ads-text-secondary); letter-spacing: 0; } /* Shared surfaces and top tabs. */ html[data-iam-version="v4"] .v4-card { border: 1px solid var(--iam-ads-divider); border-radius: var(--iam-ads-card-radius); background: var(--iam-ads-surface); box-shadow: var(--iam-ads-card-elevation); } html[data-iam-version="v4"] .au-card, html[data-iam-version="v4"] .cr-card, html[data-iam-version="v4"] .tm-details-card, html[data-iam-version="v4"] .tm-members-card { border: 1px solid var(--iam-ads-divider); border-radius: var(--iam-ads-control-radius); background: var(--iam-ads-surface); box-shadow: 0 1px 4px rgba(15, 18, 20, 0.08); } html[data-iam-version="v4"] .v4-card .tabs-row { height: 44px; padding: 12px 16px 0; border-bottom: 1px solid var(--iam-ads-divider); background: var(--iam-ads-surface); } html[data-iam-version="v4"] .v4-card .tabs-row nav { height: 32px; gap: 24px; } html[data-iam-version="v4"] .v4-card .tab-btn { height: 32px; padding: 0 0 10px; align-items: center; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--iam-ads-text-muted); letter-spacing: 0; } html[data-iam-version="v4"] .v4-card .tab-btn.on { color: var(--iam-ads-brand); } html[data-iam-version="v4"] .v4-card .tab-btn.on::after { height: 2px; background: var(--iam-ads-brand); } html[data-iam-version="v4"] .v4-card .tab-btn:hover:not(.on) { color: var(--iam-ads-text); } /* Toolbars and buttons: Rate Card uses a 36px secondary Filter button, 32px search/toggle controls and 36px CTAs. Toolbar min-height is fixed at 68px (16/8 vertical padding + Users' 44px-tall segmented control, the tallest control across all three toolbars) UNCONDITIONALLY for Users/Roles/Teams alike — not just enough to fit each panel's own content — so every toolbar's control line-box is exactly the same height everywhere. That keeps Add User / Create Role / Create Team's vertical center identical across tabs even though only the Users toolbar actually contains a 44px-tall control (Internal/External toggle); Roles/Teams simply center their shorter 36px controls within the same fixed-height row. */ html[data-iam-version="v4"] .v4-card .tbar { min-height: 68px; padding: 16px 16px 8px; gap: 16px; background: var(--iam-ads-surface); } html[data-iam-version="v4"] .tbar-l { gap: 16px; /* Round 23 (2026-08-11 — search-field responsive width): `.tbar-l` otherwise has flex-basis `auto` with no `flex-grow`, so — as a flex item of `.tbar` (`justify-content: space-between` against `.tbar-r`) — its own box only ever sized to its content's max-content width and never claimed the extra room that opens up as the card widens. Because that max-content calculation resolves `.ads-search`'s viewport-relative (`vw`) flex-basis to a single fixed value rather than re-evaluating it live, the search field plateaued around ~370px on screens far wider than 1440px instead of reaching its intended 600px ceiling. Growing `.tbar-l` sizes it from genuinely available space instead of max-content, which sidesteps that `vw`-in-intrinsic-sizing quirk; `.ads-search` itself keeps `flex-grow: 0` (see its own rule) so it still renders at its own `clamp(...)` value rather than greedily consuming 100% of whatever `.tbar-l` now has to offer. Filter and the segmented control are unaffected — both stay `flex: 0 0 auto` / content- sized regardless of `.tbar-l`'s own box size. */ flex-grow: 1; } /* Round 38 (2026-08-12 — Users search restored): the `#usersPanel`-only `flex-grow: 0` override that Round 24 added here (when Users had no search field left to grow around) is removed, so Users' `.tbar-l` goes back to sharing the Round 23 grow-to-fill behavior above with Roles and Teams. That is what lets `.ads-search`'s viewport-relative `clamp()` basis resolve against genuinely available space and reach its 600px ceiling at ≥1440px instead of plateauing at its intrinsic/max-content size. Filter and the segmented control are unaffected (both stay content-sized), and `.tbar`'s own `justify-content: space-between` still anchors Export + Add User to the right edge — `.tbar-l` grows into the middle of the row, it does not push that group anywhere. */ html[data-iam-version="v4"] .btn-std, html[data-iam-version="v4"] .btn-ghost, html[data-iam-version="v4"] .au-btn, html[data-iam-version="v4"] .au-btn-cancel, html[data-iam-version="v4"] .au-btn-save, html[data-iam-version="v4"] .cr-btn, html[data-iam-version="v4"] .cr-btn-cancel, html[data-iam-version="v4"] .cr-btn-save, html[data-iam-version="v4"] .flt-btn, html[data-iam-version="v4"] .flt-btn-cancel, html[data-iam-version="v4"] .flt-btn-apply { min-height: var(--iam-ads-button-height); height: var(--iam-ads-button-height); padding: 8px 12px; gap: 4px; border-radius: var(--iam-ads-control-radius); font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; } html[data-iam-version="v4"] .v4-card .tbar .btn-std { min-width: 72px; color: var(--iam-ads-brand); background: var(--iam-ads-surface); border: 1px solid var(--iam-ads-brand); } html[data-iam-version="v4"] .v4-card .tbar .btn-std:hover { background: var(--iam-ads-brand-wash); } /* Round 24 (2026-08-11 — icon-only Filter button): the Users toolbar's Filter control drops its "Filter" label and becomes a compact 36x36px square (icon-only), matching the updated Figma toolbar. (Round 24 also removed the adjacent search field; Round 38 restored it, but the icon-only Filter treatment stands on its own and is unchanged by that.) Scoped to the dedicated `#usersFilterBtn` id (rather than `.btn-std` itself) so it doesn't leak onto every other `.btn-std` on the page — this id selector's specificity wins over the shared `.tbar .btn-std` rule above regardless of source order. Border, colors, and hover/active/ focus/disabled states all still come from the shared `.btn-std` rules; only the box's own dimensions/padding change here. Round 35 (2026-08-12 — Roles Filter/toolbar alignment pass): Roles' `#rpFilterBtn` drops its "Filter" text label too and joins this same rule, so both toolbars' Filter buttons are pixel-identical instances of the exact same icon-only `.btn-std` treatment instead of Roles keeping a separate, wider text-button style. */ html[data-iam-version="v4"] .v4-card .tbar #usersFilterBtn, html[data-iam-version="v4"] .v4-card .tbar #rpFilterBtn { min-width: 0; width: 36px; height: 36px; padding: 0; gap: 0; flex-shrink: 0; } html[data-iam-version="v4"] .v4-card .tbar .btn-ghost, html[data-iam-version="v4"] .au-btn-save, html[data-iam-version="v4"] .cr-btn-save, html[data-iam-version="v4"] .flt-btn-apply { color: #fff; background: var(--iam-ads-brand); border: 1px solid var(--iam-ads-brand); box-shadow: none; } html[data-iam-version="v4"] .v4-card .tbar .btn-ghost:hover, html[data-iam-version="v4"] .au-btn-save:not(:disabled):hover, html[data-iam-version="v4"] .cr-btn-save:not(:disabled):hover, html[data-iam-version="v4"] .flt-btn-apply:not(:disabled):hover { background: var(--iam-ads-brand-hover); border-color: var(--iam-ads-brand-hover); box-shadow: none; } html[data-iam-version="v4"] .au-btn-save:disabled, html[data-iam-version="v4"] .cr-btn-save:disabled, html[data-iam-version="v4"] .flt-btn-apply:disabled { color: rgba(30, 37, 40, 0.38); background: rgba(30, 37, 40, 0.06); border-color: transparent; opacity: 1; box-shadow: none; } /* Search, toggle groups and all form controls. */ html[data-iam-version="v4"] .search input, html[data-iam-version="v4"] .au-input, html[data-iam-version="v4"] .cr-input, html[data-iam-version="v4"] .cr-textarea, html[data-iam-version="v4"] .flt-input, html[data-iam-version="v4"] .flt-select, html[data-iam-version="v4"] .edl-combo-input, html[data-iam-version="v4"] .cr-dd-trigger, html[data-iam-version="v4"] .au-role-multi-trigger { min-height: var(--iam-ads-control-height); border: 1px solid var(--iam-ads-border); border-radius: var(--iam-ads-control-radius); background-color: var(--iam-ads-surface); color: var(--iam-ads-text); font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; } html[data-iam-version="v4"] .search input { height: var(--iam-ads-control-height); padding: 0 36px 0 12px; } html[data-iam-version="v4"] .search input:hover, html[data-iam-version="v4"] .au-input:hover, html[data-iam-version="v4"] .cr-input:hover, html[data-iam-version="v4"] .cr-textarea:hover, html[data-iam-version="v4"] .flt-input:hover, html[data-iam-version="v4"] .edl-combo-input:hover, html[data-iam-version="v4"] .cr-dd-trigger:hover { border-color: var(--iam-ads-text-muted); } html[data-iam-version="v4"] .search input:focus, html[data-iam-version="v4"] .au-input:focus, html[data-iam-version="v4"] .cr-input:focus, html[data-iam-version="v4"] .cr-textarea:focus, html[data-iam-version="v4"] .flt-input:focus, html[data-iam-version="v4"] .edl-combo-input:focus, html[data-iam-version="v4"] .cr-dd-trigger:focus-visible { border-color: var(--iam-ads-brand); box-shadow: 0 0 0 1px var(--iam-ads-brand); outline: 0; } html[data-iam-version="v4"] .au-input:disabled, html[data-iam-version="v4"] .au-input[readonly], /* External Edit User's Company display is a , so it can't match `[readonly]`; it takes the same read-only fill by class instead. */ html[data-iam-version="v4"] .au-field-team-readonly, html[data-iam-version="v4"] .cr-input:disabled, html[data-iam-version="v4"] .edl-combo-input:disabled { color: rgba(30, 37, 40, 0.55); background: rgba(30, 37, 40, 0.04); border-color: var(--iam-ads-divider); opacity: 1; } html[data-iam-version="v4"] .au-label, html[data-iam-version="v4"] .cr-label, html[data-iam-version="v4"] .flt-label, html[data-iam-version="v4"] .field-label { margin-bottom: 4px; color: var(--iam-ads-text-secondary); font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0; } /* Final-QA pass against Figma 770:17428's rendered screenshot: the Internal/External track is a light neutral wash (`--iam-ads-canvas`, the same token the page background already uses) with the SELECTED segment reading as a raised white chip (`--iam-ads-surface` + a soft shadow) and dark primary text — not a brand-tinted chip. The previous brand-wash/brand-text treatment doesn't appear anywhere in the Figma reference; it was likely carried over from `.seg-btn.on`'s original (pre-ADS) styling below. Height now matches every other toolbar control's `--iam-ads-button-height` (36px) instead of the smaller generic `--iam-ads-control-height` (32px) used by other, shorter controls like the row-status segmented filter, so Internal/External shares the same toolbar centerline as Filter/Search/Export/Add User (Step 10 of the audit). */ html[data-iam-version="v4"] .seg-ctrl { min-height: var(--iam-ads-button-height); padding: 2px; border: 1px solid var(--iam-ads-border); border-radius: var(--iam-ads-control-radius); background: var(--iam-ads-canvas); } html[data-iam-version="v4"] .au-status-seg { min-height: var(--iam-ads-control-height); padding: 1px; border: 1px solid var(--iam-ads-border); border-radius: var(--iam-ads-control-radius); background: var(--iam-ads-surface); } html[data-iam-version="v4"] .seg-btn { min-height: 100%; border-radius: 5px; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--iam-ads-text-secondary); } html[data-iam-version="v4"] .au-status-opt { min-height: 28px; border-radius: 5px; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 500; } html[data-iam-version="v4"] .seg-btn.on { color: var(--iam-ads-text); background: var(--iam-ads-surface); box-shadow: var(--iam-ads-card-elevation); } html[data-iam-version="v4"] .au-status-opt.is-selected { color: var(--iam-ads-brand); background: var(--iam-ads-brand-wash); box-shadow: none; } /* Tables: opaque 48px rows and 32px headers, matching ADS Table and Rate Card's practical implementation. */ html[data-iam-version="v4"] .v4-card .tbl thead tr, html[data-iam-version="v4"] .v4-card .tbl thead th { height: 32px; background: var(--iam-ads-surface); border-color: var(--iam-ads-divider); } html[data-iam-version="v4"] .tbl thead th { padding: 0 8px; color: var(--iam-ads-text-muted); font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0; } /* Final-QA correction — the Name column's avatar must share its left edge with the "Name" header label directly above it (same shared column padding, per the audit). `.tbl thead th`'s own `padding: 0 8px` right above is what actually positions "Name" text today (the old `th.c-nm { padding-left: 32px }` base rule was already dead — this higher-specificity rule has won since the header-padding unification pass); `.name-cell`'s base rule still carried the pre-unification 32px left inset for the avatar, 24px further right than the header ever renders now. Bringing both to the identical 8px removes that drift instead of bumping the header back out to 32px (which would make "Name" the only column not sharing every other header's 8px baseline). */ html[data-iam-version="v4"] .v4-card .tbl tbody .name-cell { padding-left: 8px; } html[data-iam-version="v4"] .tbl tbody tr { height: 48px; background: var(--iam-ads-surface); border-bottom: 1px solid var(--iam-ads-divider); } html[data-iam-version="v4"] .tbl tbody tr:hover:not(.is-selected):not([aria-selected="true"]) { background: #f7f7fb; } html[data-iam-version="v4"] .tbl tbody td { padding: 8px; color: var(--iam-ads-text-secondary); font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; } html[data-iam-version="v4"] .tbl .name-link, html[data-iam-version="v4"] .tbl .rp-role-link, html[data-iam-version="v4"] .tbl .tm-name-link { color: var(--iam-ads-brand); font-weight: 500; } html[data-iam-version="v4"] .tbl .name-email, html[data-iam-version="v4"] .tbl .row-email { color: var(--iam-ads-text-muted); font-size: 12px; line-height: 18px; font-weight: 400; } /* Pagination. */ html[data-iam-version="v4"] .v4-card .pgn { min-height: 52px; height: 52px; padding: 8px 16px; gap: 16px; border-top: 1px solid var(--iam-ads-divider); background: var(--iam-ads-surface); } html[data-iam-version="v4"] .pgn-lbl, html[data-iam-version="v4"] .pgn .cr-dd-trigger { font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 18px; font-weight: 400; color: var(--iam-ads-text); } html[data-iam-version="v4"] .pgn .pg-nav, html[data-iam-version="v4"] .pgn .pg-n { width: 32px; min-width: 32px; height: 32px; border: 1px solid var(--iam-ads-border); border-radius: var(--iam-ads-control-radius); background: var(--iam-ads-surface); color: var(--iam-ads-text-secondary); box-shadow: none; } html[data-iam-version="v4"] .pgn .pg-n.on, html[data-iam-version="v4"] .pgn .pg-n[aria-current] { color: #fff; background: var(--iam-ads-brand); border-color: var(--iam-ads-brand); } html[data-iam-version="v4"] .pgn .pg-nav:hover:not(.off), html[data-iam-version="v4"] .pgn .pg-n:hover:not(.on) { color: var(--iam-ads-brand); background: var(--iam-ads-brand-wash); border-color: var(--iam-ads-brand); } html[data-iam-version="v4"] .pgn .pg-nav.off { color: rgba(30, 37, 40, 0.28); background: var(--iam-ads-surface); border-color: var(--iam-ads-divider); opacity: 1; } /* Accordions / section triggers. */ html[data-iam-version="v4"] .cr-section-header { min-height: 44px; color: var(--iam-ads-brand); background: transparent; } html[data-iam-version="v4"] .cr-section-header:hover, html[data-iam-version="v4"] .cr-section-header:focus-visible { color: var(--iam-ads-brand-hover); background: transparent; } html[data-iam-version="v4"] .cr-section-title { font-family: "Open Sans", sans-serif; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0; } /* Dropdown, menu and popover chrome. */ html[data-iam-version="v4"] .edl-combo-menu, html[data-iam-version="v4"] .cr-dd-menu, html[data-iam-version="v4"] .search-dropdown, html[data-iam-version="v4"] .func-popover, html[data-iam-version="v4"] .user-menu-pop, html[data-iam-version="v4"] .user-menu-sub { border: 1px solid var(--iam-ads-divider); border-radius: var(--iam-ads-control-radius); background: var(--iam-ads-surface); box-shadow: var(--iam-ads-menu-elevation); } html[data-iam-version="v4"] .edl-combo-item:hover, html[data-iam-version="v4"] .cr-dd-option:hover, html[data-iam-version="v4"] .user-menu-row:hover, html[data-iam-version="v4"] .user-menu-sub-item:hover { background: #f3f3f3; } html[data-iam-version="v4"] .edl-combo-item.is-selected, html[data-iam-version="v4"] .cr-dd-option.is-selected, html[data-iam-version="v4"] .user-menu-sub-item.is-selected { color: var(--iam-ads-brand); background: var(--iam-ads-brand-wash); } /* Filter sheets. */ html[data-iam-version="v4"] .flt-drawer { width: 360px; max-width: 100vw; background: var(--iam-ads-surface); border-right: 1px solid var(--iam-ads-divider); box-shadow: 4px 0 24px rgba(15, 18, 20, 0.18); } html[data-iam-version="v4"] .flt-header { min-height: 56px; padding: 16px 20px; border-bottom: 1px solid var(--iam-ads-divider); } html[data-iam-version="v4"] .flt-title { font-family: "MultiplaneTWDC Display", "Open Sans", sans-serif; font-size: 20px; line-height: 24px; font-weight: 500; color: var(--iam-ads-text); } html[data-iam-version="v4"] .flt-body { padding: 20px; } html[data-iam-version="v4"] .flt-footer { min-height: 64px; padding: 12px 20px; border-top: 1px solid var(--iam-ads-divider); } html[data-iam-version="v4"] .flt-overlay { background: rgba(15, 18, 20, 0.40); } /* Modal and dialog family. */ html[data-iam-version="v4"] .cr-confirm-dialog, html[data-iam-version="v4"] .edl-modal, html[data-iam-version="v4"] .tm-add-modal, html[data-iam-version="v4"] .au-eff-breakdown { width: 480px; max-width: calc(100vw - 48px); border: 1px solid var(--iam-ads-divider); border-radius: var(--iam-ads-dialog-radius); background: var(--iam-ads-surface); box-shadow: var(--iam-ads-dialog-elevation); overflow: hidden; } html[data-iam-version="v4"] .cr-confirm-backdrop, html[data-iam-version="v4"] .edl-modal-backdrop { background: rgba(15, 18, 20, 0.40); } html[data-iam-version="v4"] .cr-confirm-header, html[data-iam-version="v4"] .edl-modal-header { padding: 20px 24px; } html[data-iam-version="v4"] .cr-confirm-body, html[data-iam-version="v4"] .edl-modal-body { padding: 0 24px 20px; } html[data-iam-version="v4"] .cr-confirm-actions, html[data-iam-version="v4"] .edl-modal-footer { padding: 16px 24px; gap: 12px; border-top: 1px solid var(--iam-ads-divider); } /* ─── ADS Modal (Figma 38:46, Ads Design System) ──────────────────── `.cr-confirm-dialog--modal` opts a single confirm dialog into the full header/body/footer region layout instead of the flat single-panel default. Only Revoke access uses this today; every other `.cr-confirm-dialog` (Remove Role, Remove User, Set Inactive, permission-group delete, etc.) keeps its current flat 24px padding untouched — this modifier only zeroes padding on the dialogs that opt in, so nothing else can regress. */ html[data-iam-version="v4"] .cr-confirm-dialog.cr-confirm-dialog--modal { padding: 0; } html[data-iam-version="v4"] .cr-confirm-dialog--modal .cr-confirm-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--iam-ads-divider); } html[data-iam-version="v4"] .cr-confirm-dialog--modal .cr-confirm-header .cr-confirm-title { margin: 0; flex: 1 1 auto; min-width: 0; } html[data-iam-version="v4"] .cr-confirm-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 3px; background: transparent; color: var(--iam-ads-text-muted); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease; } html[data-iam-version="v4"] .cr-confirm-close:hover { background: rgba(15, 18, 20, 0.06); color: var(--iam-ads-text); } html[data-iam-version="v4"] .cr-confirm-close:focus-visible { outline: 2px solid var(--iam-ads-brand); outline-offset: 2px; } html[data-iam-version="v4"] .cr-confirm-close:disabled { cursor: not-allowed; opacity: 0.5; } /* Body region — one 24px/16px ADS gutter (`--modal/size/padding`, `--modal/size/body/padding-y`) shared by the explanatory text and the inline error message, so both sit on the same left/right guide as the header title and footer buttons above/below. */ html[data-iam-version="v4"] .cr-confirm-body-region { padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; } html[data-iam-version="v4"] .cr-confirm-text { margin: 0; font-family: var(--ff); font-size: 14px; line-height: 20px; color: var(--iam-ads-text-secondary); } /* Error state — kept inline in the body region (not a full-body takeover) per "do not replace the entire modal body with a spinner/error unless the ADS pattern requires it." Modal stays open, dimensions stable, Cancel/Close remain available to retry. */ html[data-iam-version="v4"] .cr-confirm-error { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #FCEEEF; color: var(--ads-red-400, #AF434E); font-family: var(--ff); font-size: 13px; line-height: 18px; } html[data-iam-version="v4"] .cr-confirm-error[hidden] { display: none; } /* Confirm-button loading state — same spinner-swap pattern already used by the Export button (`.au-export-btn.is-loading`, see the "Prototype-only 'preparing export'" block above): the spinner occupies the same slot the icon/label would, so the button's size and the modal's dimensions never shift while busy. `gap` is safe to add to the shared `.cr-btn-danger-solid` rule because it only affects spacing between visible flex children — with the spinner hidden (every other confirm dialog using this class), there is only one visible child and gap has no effect. */ html[data-iam-version="v4"] .cr-btn-danger-solid { gap: 6px; } html[data-iam-version="v4"] .cr-btn-danger-solid .au-revoke-confirm-spinner { display: none; flex: 0 0 auto; width: 14px; height: 14px; } html[data-iam-version="v4"] .cr-btn-danger-solid.is-loading .au-revoke-confirm-spinner { display: block; animation: simExportSpin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { html[data-iam-version="v4"] .cr-btn-danger-solid.is-loading .au-revoke-confirm-spinner { animation: none; } } /* ─── Add User modal (Figma 1023:22290 Step 1 / 1023:22735 Step 2) ─── Shares `.cr-confirm-dialog--modal`'s header/divider/body/divider/ footer regions (see above) — only the body contents below are new. `.au-adduser-dialog` does not change width/radius/elevation, it only lets the body scroll instead of the whole viewport growing when the dropdown is open with 10 results. */ html[data-iam-version="v4"] .au-adduser-dialog { display: flex; flex-direction: column; max-height: calc(100vh - 96px); } html[data-iam-version="v4"] .au-adduser-body { overflow-y: auto; gap: 16px; } /* ─── Effective access breakdown modal — sizing ────────────────────── `.au-eff-breakdown-dialog` widens the shared `.cr-confirm-dialog` shell to the ADS Modal "Large" size (640px — the Modal component's own Figma description lists "Sizes: Default (480px), Large (640px)") because the two-column function/permission breakdown needs more horizontal room than the 480px default. It changes nothing else: radius, border, elevation, and header/body/footer padding all come from the shared `.cr-confirm-dialog` / `.cr-confirm-dialog--modal` rules above, so this modal stays visually identical to every other ADS modal in the app apart from width. The body region scrolls as a single unit (subtitle + assigned-role summary + application groups together) while the header and footer stay fixed — "scroll only the modal body". */ html[data-iam-version="v4"] .au-eff-breakdown-dialog { width: 100%; max-width: min(640px, calc(100vw - 48px)); display: flex; flex-direction: column; max-height: calc(100vh - 96px); } html[data-iam-version="v4"] .au-eff-breakdown-dialog .cr-confirm-body-region { overflow-y: auto; flex: 1 1 auto; min-height: 0; } /* Step heading — Figma nodes 1023:22290 (Step 1) / 1023:22735 (Step 2) author the step indicator as a single bold 16px/22px line ("Step 1 of 2") that doubles as the step heading — there is no separate small-caps caption or repeated "Select user" title beneath it. The descriptive step name ("Select user" / "Review user") is kept as an sr-only suffix so screen reader users still get it, without adding a second visible heading Figma doesn't show. */ html[data-iam-version="v4"] .au-adduser-heading { display: flex; flex-direction: column; gap: 8px; } html[data-iam-version="v4"] .au-adduser-step { margin: 0; font-family: var(--ff); font-size: 16px; line-height: 22px; font-weight: 700; color: var(--iam-ads-text-secondary); } html[data-iam-version="v4"] .au-adduser-heading-sub { margin: 0; font-family: var(--ff); font-size: 14px; line-height: 20px; color: var(--iam-ads-text-secondary); } html[data-iam-version="v4"] .au-adduser-search-wrap { position: relative; } /* `.au-adduser-search` (the `.ads-search` pill itself, not the outer `-wrap` that also contains the results dropdown below it) is the clear button's positioning container — see `#auAddUserSearchClear` below. `.ads-search` already sets `position: relative` as its base rule, this just documents/guarantees it for this instance. */ html[data-iam-version="v4"] .au-adduser-search { width: 100%; position: relative; } html[data-iam-version="v4"] .au-adduser-search-icon { flex-shrink: 0; color: var(--iam-ads-text-muted); } html[data-iam-version="v4"] .au-adduser-search-input { border: 0; outline: none; flex: 1 0 auto; min-width: 0; background: transparent; font-family: var(--ff); font-size: 14px; line-height: 20px; color: var(--iam-ads-text); } /* Reserve room for the 24px clear button (positioned 12px from the right edge — see #auAddUserSearchClear) so entered text never runs underneath it once the button is taken out of flex flow. Needs both the ID selector AND `!important`: several later `.ads-search > input { padding: 0px !important }` resets (written for the icon-hiding/text-alignment rounds on the *other* `.ads-search` fields) also match this input and would otherwise win outright over any non-`!important` declaration, regardless of specificity. */ html[data-iam-version="v4"] #auAddUserSearchInput, html[data-iam-version="v4"] #tmAddMembersSearch { padding-right: 44px !important; } html[data-iam-version="v4"] .au-adduser-search-input::placeholder { color: var(--text-placeholder); } html[data-iam-version="v4"] .au-adduser-search-spinner { flex: 0 0 auto; color: var(--iam-ads-text-muted); animation: simExportSpin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { html[data-iam-version="v4"] .au-adduser-search-spinner { animation: none; } } /* Round 26 (2026-08-11 — floating clear button): pin the clear "X" to the search-field container (`.au-adduser-search`, above) with absolute positioning + `translateY(-50%)`, rather than relying on flex order/centering, so it's always dead-centered on the 36px input regardless of sibling content and never anchored to `.au-adduser-search-wrap` (which also wraps the results dropdown underneath). `#auAddUserSearchClear` is used (rather than the `.au-adduser-search-clear` class) purely for guaranteed specificity over the shared `.ads-search .search-clear` flex-centering rule. */ html[data-iam-version="v4"] #auAddUserSearchClear, html[data-iam-version="v4"] #tmAddMembersSearchClear { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 24px; height: 24px; min-width: 24px; min-height: 24px; display: grid; place-items: center; padding: 0; } /* The base `.search-clear { display: inline-flex }` rule (shared with other search bars) and a global `svg { display: block }` reset tie the native `[hidden]` UA rule on specificity, so the later same-specificity author rule wins and the icon stays visible even with the `hidden` attribute set. Force it here, scoped to the Add User combobox only. */ html[data-iam-version="v4"] .au-adduser-search-clear[hidden], html[data-iam-version="v4"] .au-adduser-search-spinner[hidden] { display: none !important; } /* Dropdown — ADS combobox popup: listbox of compact result rows, capped at 10 visible, with an optional restrained "Showing 10 of N" / empty / error line under the list. `position: fixed` (not `absolute`) is intentional: `.au-adduser-body` scrolls internally on short viewports, and an absolutely-positioned popover anchored inside a scrolling ancestor gets clipped to that ancestor's visible box the moment the body is shorter than the dropdown. Fixed positioning — with left/top/width computed in JS via `auAddUserPositionDropdown()` from the search field's live bounding box — lets the popover escape that clip and always render in full, which is the standard technique for combobox/menu popovers that must outlive a constrained-height container. */ html[data-iam-version="v4"] .au-adduser-dropdown { position: fixed; z-index: 10001; background: var(--iam-ads-surface); border: 1px solid var(--iam-ads-divider); border-radius: var(--iam-ads-control-radius); box-shadow: var(--iam-ads-menu-elevation); overflow: hidden; display: flex; flex-direction: column; } /* Same same-specificity `[hidden]` vs. `display: flex` conflict as the search clear/spinner icons above — without this, closing the dropdown (on selection, Escape, or blur) leaves the last-rendered result list fully visible, floating over whatever renders next (e.g. the Selected user preview). */ html[data-iam-version="v4"] .au-adduser-dropdown[hidden] { display: none !important; } html[data-iam-version="v4"] .au-adduser-listbox { margin: 0; padding: 4px; list-style: none; max-height: 336px; overflow-y: auto; flex: 1 1 auto; min-height: 0; } html[data-iam-version="v4"] .au-adduser-option { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; cursor: pointer; } html[data-iam-version="v4"] .au-adduser-option:hover:not(.is-disabled) { background: var(--row-hover, rgba(54, 17, 200, 0.04)); } html[data-iam-version="v4"] .au-adduser-option.is-active:not(.is-disabled) { background: var(--brand-bg-soft); } html[data-iam-version="v4"] .au-adduser-option[aria-selected="true"] { background: var(--brand-bg-soft); } /* Selection is never color-only: the currently selected user also gets a check glyph in the row, so it stays legible if this row is also the keyboard-highlighted one (same soft background) or for users who can't distinguish the tint. */ html[data-iam-version="v4"] .au-adduser-option-check { flex: 0 0 auto; color: var(--iam-ads-brand); margin-left: 2px; } html[data-iam-version="v4"] .au-adduser-option.is-disabled { cursor: not-allowed; opacity: 0.55; } html[data-iam-version="v4"] .au-adduser-option-avatar { flex: 0 0 auto; } html[data-iam-version="v4"] .au-adduser-option-avatar .name-avatar { width: 32px; height: 32px; } html[data-iam-version="v4"] .au-adduser-option-avatar .avatar-initials { font-size: 12px; } html[data-iam-version="v4"] .au-adduser-option-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } html[data-iam-version="v4"] .au-adduser-option-name { font-family: var(--ff); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--iam-ads-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-iam-version="v4"] .au-adduser-option-meta { display: flex; align-items: baseline; gap: 8px; min-width: 0; } html[data-iam-version="v4"] .au-adduser-option-email { font-family: var(--ff); font-size: 13px; line-height: 18px; color: var(--iam-ads-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Round 26: only rendered for candidates who can still be added (see auAddUserRenderOptionHtml in app.js — already-in-IAM rows hide Team entirely since the "Already has access" badge already covers that state), so semibold here always means "addable, here's their team". */ html[data-iam-version="v4"] .au-adduser-option-team { flex: 0 1 108px; min-width: 0; max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ff); font-size: 12px; line-height: 18px; font-weight: 600; color: var(--iam-ads-text-secondary); text-align: right; } html[data-iam-version="v4"] .au-adduser-option-badge { flex: 0 1 auto; min-width: 0; /* Round 26: widened from 128px now that Team is never shown alongside this badge (see auAddUserRenderOptionHtml) — "Already has access" has full room to render without truncating. */ max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 8px; border-radius: 100px; background: var(--bg-hover-soft); color: var(--iam-ads-text-muted); font-family: var(--ff); font-size: 11px; font-weight: 600; line-height: 16px; white-space: nowrap; } html[data-iam-version="v4"] .au-adduser-option-check { flex: 0 0 auto; color: var(--iam-ads-brand); } html[data-iam-version="v4"] .au-adduser-dd-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--iam-ads-divider); font-family: var(--ff); font-size: 12px; line-height: 16px; color: var(--iam-ads-text-muted); } html[data-iam-version="v4"] .au-adduser-dd-note.is-error { color: var(--ads-red-400, #AF434E); } html[data-iam-version="v4"] .au-adduser-dd-note[hidden] { display: none; } /* Selected-user preview (Figma 1023:22735, Step 1) — compact avatar+text row directly on the modal body, no card border or tinted background. This is the only selected-user rendering the modal shows now; the former "Step 2, detailed" variant (a larger 64px-avatar card with Employee ID/Region/Timezone/Department/User type/Status rows, `.is-detailed`) was the in-modal review screen removed by the 2026-08-10 flow change — that full record now shows once, on the Add User page's Basic Information section, never a second time in this modal. The distinct `.au-adduser-selected-check` badge (not a color-only cue) marks the row as selected. */ html[data-iam-version="v4"] .au-adduser-selected { display: flex; flex-direction: column; gap: 8px; } html[data-iam-version="v4"] .au-adduser-selected[hidden] { display: none; } html[data-iam-version="v4"] .au-adduser-selected-label { margin: 0; font-family: var(--ff); font-size: 16px; line-height: 22px; font-weight: 700; color: var(--iam-ads-text-secondary); } html[data-iam-version="v4"] .au-adduser-selected-card { display: flex; align-items: flex-start; gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; } html[data-iam-version="v4"] .au-adduser-selected-card .name-avatar { width: 40px; height: 40px; flex-shrink: 0; } html[data-iam-version="v4"] .au-adduser-selected-card .avatar-initials { font-size: 14px; } html[data-iam-version="v4"] .au-adduser-selected-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } html[data-iam-version="v4"] .au-adduser-selected-text { min-width: 0; } html[data-iam-version="v4"] .au-adduser-selected-name { display: block; font-family: var(--ff); font-size: 14px; line-height: 20px; font-weight: 700; color: var(--gray-95, #171c20); overflow-wrap: anywhere; } html[data-iam-version="v4"] .au-adduser-selected-row { display: block; font-family: var(--ff); font-size: 14px; line-height: 20px; color: var(--gray-95, #171c20); overflow-wrap: anywhere; } html[data-iam-version="v4"] .au-adduser-selected-check { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--iam-ads-brand); color: #fff; } html[data-iam-version="v4"] .au-adduser-duplicate { margin: 0; display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #FCEEEF; color: var(--ads-red-400, #AF434E); font-family: var(--ff); font-size: 13px; line-height: 18px; } html[data-iam-version="v4"] .au-adduser-duplicate[hidden] { display: none; } html[data-iam-version="v4"] .au-adduser-duplicate-link { background: none; border: none; padding: 0; margin-left: 4px; color: var(--ads-red-400, #AF434E); font-weight: 600; text-decoration: underline; cursor: pointer; font-family: var(--ff); font-size: 13px; } html[data-iam-version="v4"] .au-adduser-actions { align-items: center; } html[data-iam-version="v4"] .au-adduser-actions-spacer { flex: 1 1 auto; } @media (max-width: 640px) { html[data-iam-version="v4"] .au-adduser-dialog { max-height: calc(100vh - 32px); } html[data-iam-version="v4"] .au-eff-breakdown-dialog { max-height: calc(100vh - 32px); } } /* ─── Add User page: "no employee selected" empty state ───────────── Add-mode-only fallback for Basic Information when the two-step search modal hasn't produced a selection yet (Figma 1023:22053 has no dedicated empty-state node — this is the ADS-approved treatment: dashed neutral avatar placeholder + explanatory copy + a button that reopens the same search modal the "Add User" list action uses). Replaces `.au-edit-row` 1:1 in the same card slot so the card's height/padding stay stable whichever state is showing. */ html[data-iam-version="v4"] .au-id-empty { display: flex; align-items: center; gap: 16px; padding: 16px 0 8px 0; min-width: 0; } html[data-iam-version="v4"] .au-id-empty[hidden] { display: none; } html[data-iam-version="v4"] .au-id-empty-avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px dashed var(--iam-ads-divider, #d4dee3); color: var(--iam-ads-text-muted, #8498a9); background: var(--bg-hover-soft); } html[data-iam-version="v4"] .au-id-empty-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } html[data-iam-version="v4"] .au-id-empty-title { font-family: var(--ff); font-size: 15px; font-weight: 600; line-height: 20px; color: var(--iam-ads-text, #171c20); } html[data-iam-version="v4"] .au-id-empty-sub { font-family: var(--ff); font-size: 13px; font-weight: 400; line-height: 18px; color: var(--iam-ads-text-secondary, #526374); max-width: 46ch; } html[data-iam-version="v4"] .au-id-empty-btn { flex: 0 0 auto; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 8px 16px; border: 1px solid var(--iam-ads-brand, #4045c2); border-radius: 6px; background: transparent; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--iam-ads-brand, #4045c2); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease; } html[data-iam-version="v4"] .au-id-empty-btn:hover { background: rgba(64, 69, 194, 0.08); } html[data-iam-version="v4"] .au-id-empty-btn:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; } @media (max-width: 1000px) { html[data-iam-version="v4"] .au-id-empty { flex-wrap: wrap; } } /* Tooltip and toast families. */ html[data-iam-version="v4"] .edl-tooltip, html[data-iam-version="v4"] .edl-status-tooltip { padding: 6px 10px; border: 0; border-radius: var(--iam-ads-control-radius); background: var(--iam-ads-text); color: #fff; box-shadow: var(--iam-ads-menu-elevation); font-family: "Open Sans", sans-serif; font-size: 12px; line-height: 18px; font-weight: 400; } html[data-iam-version="v4"] .v4-card .tab-btn.on { font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ R52 — Toast (ADS Toast, Figma 70:62) Global container sits above normal page content but below the Redline workspace overlay (z-index 999999, see redline.css), clears the fixed navbar (56px tall) with a 24px gap — matching the ADS screen-edge offset (24px) already used on the right. `.edl-toast` itself is a single flex row — icon, content column, close — left-bordered 5px in the semantic color with no border on the other 3 sides, 6px radius, 16px padding on every side, and the elevation/30 shadow. Message text is always toast/text/primary regardless of variant. The headline, icon, left border AND close glyph all carry the variant's semantic color — the exported Toast assets from node 70:62 render a tinted close "x" per instance (e.g. the Error instance's close glyph is `#993B44`, matching its headline), so the close button is tinted to match rather than left neutral; it still shares the 32×32 ADS icon-button hit target/hover/active/focus states with `.flt-close`/`.edl-modal-close` below. */ html[data-iam-version="v4"] .edl-toast-container { top: 80px; right: 24px; gap: 8px; } html[data-iam-version="v4"] .edl-toast { box-sizing: border-box; width: 400px; max-width: calc(100vw - 48px); min-height: 56px; padding: var(--iam-ads-toast-padding); gap: var(--iam-ads-toast-content-gap); border: 0; border-left: var(--iam-ads-toast-border-width) solid var(--iam-ads-toast-border-info); border-radius: var(--iam-ads-toast-radius); background: var(--iam-ads-toast-surface); box-shadow: var(--iam-ads-toast-elevation); } html[data-iam-version="v4"] .edl-toast-content { gap: var(--iam-ads-toast-text-gap); } html[data-iam-version="v4"] .edl-toast-title { font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: 0; color: var(--iam-ads-toast-text-info); } html[data-iam-version="v4"] .edl-toast-body { font-size: 14px; line-height: 20px; color: var(--iam-ads-toast-text-body); } /* Semantic left-border + headline color per variant. Message stays toast/text/primary (rule above) in every variant — status is never communicated by the accent color alone, since the icon shape and headline text always repeat it too. */ html[data-iam-version="v4"] .edl-toast--error { border-left-color: var(--iam-ads-toast-border-error); } html[data-iam-version="v4"] .edl-toast--error .edl-toast-title { color: var(--iam-ads-toast-text-error); } html[data-iam-version="v4"] .edl-toast--warning { border-left-color: var(--iam-ads-toast-border-warning); } html[data-iam-version="v4"] .edl-toast--warning .edl-toast-title { color: var(--iam-ads-toast-text-warning); } html[data-iam-version="v4"] .edl-toast--success { border-left-color: var(--iam-ads-toast-border-success); } html[data-iam-version="v4"] .edl-toast--success .edl-toast-title { color: var(--iam-ads-toast-text-success); } html[data-iam-version="v4"] .edl-toast--informative { border-left-color: var(--iam-ads-toast-border-info); } html[data-iam-version="v4"] .edl-toast--informative .edl-toast-title { color: var(--iam-ads-toast-text-info); } /* Icon AND close-glyph color always match the variant's headline color (all four are fill-based `fill="currentColor"` inline SVGs exported directly from the node 70:62 instances). The close button still inherits its 32×32 hit target and hover/active/focus-visible states from the shared `.flt-close`/`.edl-modal-close` rule below — only `color` (the glyph tint) is overridden here, per variant. */ html[data-iam-version="v4"] .edl-toast--error .edl-toast-icon, html[data-iam-version="v4"] .edl-toast--error .edl-toast-close { color: var(--iam-ads-toast-text-error); } html[data-iam-version="v4"] .edl-toast--warning .edl-toast-icon, html[data-iam-version="v4"] .edl-toast--warning .edl-toast-close { color: var(--iam-ads-toast-text-warning); } html[data-iam-version="v4"] .edl-toast--success .edl-toast-icon, html[data-iam-version="v4"] .edl-toast--success .edl-toast-close { color: var(--iam-ads-toast-text-success); } html[data-iam-version="v4"] .edl-toast--informative .edl-toast-icon, html[data-iam-version="v4"] .edl-toast--informative .edl-toast-close { color: var(--iam-ads-toast-text-info); } /* Compact/narrow viewports: keep the ADS screen gutter, let the toast shrink to fit instead of the container overflowing horizontally, and let title/message wrap naturally (already the default — no nowrap/truncation is applied anywhere in this component). */ @media (max-width: 480px) { html[data-iam-version="v4"] .edl-toast-container { left: 16px; right: 16px; top: 80px; max-width: none; } html[data-iam-version="v4"] .edl-toast { width: 100%; max-width: 100%; } } /* Edit User grid: the "avoid the legacy fixed 296px tracks overflowing at 1024px" override that used to live here is gone. Its two jobs — giving the identity column a `minmax(240px, 296px)` range and letting the identity block/fields fill their own tracks — are now the base behavior of `#auBasicCard .au-section-body` for BOTH modes, and its `(min-width: 769px)` floor would have re-forced three columns underneath the shared 900px two-column stage. See the "Responsive stages" block next to that grid definition. */ @media (max-width: 768px) { html[data-iam-version="v4"] main.page > .hdr { padding-top: 20px; padding-bottom: 20px; margin-bottom: 16px; } html[data-iam-version="v4"] .hdr h1, html[data-iam-version="v4"] .au-title, html[data-iam-version="v4"] .cr-title, html[data-iam-version="v4"] .tm-title { font-size: 26px; line-height: 32px; } html[data-iam-version="v4"] .v4-card { border-radius: 12px; } html[data-iam-version="v4"] .v4-card .tbar { padding: 12px; } html[data-iam-version="v4"] .v4-card .pgn { height: auto; min-height: 52px; padding: 8px 12px; } /* The Edit-mode-only "collapse #auBasicCard to one column at 768px" override that used to live here is gone: collapsing at 768 in Edit mode while Add mode still showed two columns made the two flows reflow differently from identical markup. Both now follow the shared responsive stages beside the grid definition (two form columns down to 600px, one column below that). */ html[data-iam-version="v4"] .flt-drawer { width: min(360px, 100vw); } } @media (max-width: 900px) { html[data-iam-version="v4"] .v4-card .pgn { height: auto; min-height: 96px; flex-wrap: wrap; align-content: center; row-gap: 8px; } html[data-iam-version="v4"] .v4-card .pgn-show, html[data-iam-version="v4"] .v4-card .pgn-jump { flex: 1 1 auto; flex-wrap: nowrap; white-space: nowrap; } html[data-iam-version="v4"] .v4-card .pgn-jump { justify-content: flex-end; } html[data-iam-version="v4"] .v4-card .pgn-pages { order: 3; width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ R53 — ADS Figma QA corrections (V4 presentation only) Official component evidence: • Primary Tab 57:2 / set 57:56 — Default Active is Open Sans SemiBold 18/24, 16px horizontal + 8px top padding, 4px internal gap and a 3px brand underline. • Accordion 2898:18 / Trigger 2899:2 — transparent root inside a Card, 24px x / 20px y trigger padding, 16px gap/caret, Open Sans SemiBold 15px title, neutral rest foreground, foreground-only brand hover and a 2px inside semantic focus stroke. • ads-components.json Pagination — digit items have min-width 36. • Existing ADS table reference — 32px header, 48px opaque rows. ═══════════════════════════════════════════════════════════════════ */ /* Primary Tabs — replace the compact 14px product approximation with the official ADS Default size used for page-level content views. */ html[data-iam-version="v4"] .v4-card .tabs-row { height: 56px; padding: 8px 0 9px; align-items: flex-start; } /* Final-QA correction, Figma node 1003:17823 ("Primary Tab"): the individual tab component itself carries a 16px horizontal padding (`tabs/size/default/padding-x`) around its label, and the row's "Frame 2134099783" wrapper (tabs + toolbar) sits a further 16px in from the table-header's content edge — the SAME 16px inset already used on `.tbar` below it. Restating that shared 16px here (instead of leaving `.tabs-row` at 0 and relying on the tab's OWN padding alone) is what makes "Users" land at the correct distance from the card's rounded left edge, and keeps the tab row, toolbar, and table on one consistent left content-edge — not a one-off margin on the word "Users". Applied on both sides so Roles/Teams and any trailing controls keep the same inset at the right edge too. */ html[data-iam-version="v4"] .v4-card .tabs-row { padding-left: 16px; padding-right: 16px; } html[data-iam-version="v4"] .v4-card .tabs-row nav { height: 39px; /* Figma "Frame 2134099687": Users (x0 w82), Roles (x90 w78) → an 8px flex gap between each tab's own padded bounding box, on top of each tab's own 16px internal padding (not a 0-gap row that relies solely on that internal padding to separate labels). */ gap: 8px; align-items: flex-start; } html[data-iam-version="v4"] .v4-card .tab-btn { box-sizing: border-box; height: 39px; padding: 8px 16px 7px; align-items: center; font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 24px; font-weight: 600; } html[data-iam-version="v4"] .v4-card .tab-btn.on::after { /* Figma's underline (`I1003:17823;57:6`) is exactly as wide as the label frame (x16 w50, same x/width as the label above it) — inset by the tab's own 16px horizontal padding instead of stretching edge-to-edge (`left/right: 0`), so it hugs "Users" itself and stays aligned with the label after the card-padding fix above. */ left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 0; } /* Table body density — R46's higher-specificity 56px cell rule was still winning over R52. Restore the verified 48px ADS row contract. */ html[data-iam-version="v4"] .v4-card .tbl tbody tr, html[data-iam-version="v4"] .v4-card .tbl tbody td, html[data-iam-version="v4"] .v4-card .tbl tbody .name-cell { height: 47px; min-height: 47px; } html[data-iam-version="v4"] .v4-card .tbl tbody td { padding-top: 0; padding-bottom: 0; } /* Accordion triggers — apply official geometry only to actual interactive disclosure headers. Static Team card headings retain their existing non-accordion section-header treatment. */ html[data-iam-version="v4"] .cr-section-header[role="button"] { box-sizing: border-box; width: 100%; min-height: 62px; padding: 20px 24px; gap: 16px; color: var(--iam-ads-text); background: transparent; } html[data-iam-version="v4"] .cr-section-header[role="button"] .cr-section-title { color: var(--iam-ads-text); font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0; } html[data-iam-version="v4"] .cr-section-header[role="button"] .cr-section-chev { width: 16px; height: 16px; color: var(--iam-ads-text-secondary); flex: 0 0 16px; } html[data-iam-version="v4"] .cr-section-header[role="button"]:hover, html[data-iam-version="v4"] .cr-section-header[role="button"]:hover .cr-section-title, html[data-iam-version="v4"] .cr-section-header[role="button"]:hover .cr-section-chev { color: var(--iam-ads-brand); background: transparent; } html[data-iam-version="v4"] .cr-section-header[role="button"]:focus-visible { color: var(--iam-ads-text); background: transparent; outline: 0; box-shadow: inset 0 0 0 2px var(--iam-ads-brand); } /* Page-id selectors intentionally outrank historical per-page compact accordion overrides without changing their DOM or event hooks. */ html[data-iam-version="v4"] #addUsersPage .cr-section-header[role="button"], html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"], html[data-iam-version="v4"] #pcDetailPage .cr-section-header[role="button"] { min-height: 62px; padding: 20px 24px; gap: 16px; } html[data-iam-version="v4"] #addUsersPage .cr-section-header[role="button"] .cr-section-title, html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"] .cr-section-title, html[data-iam-version="v4"] #pcDetailPage .cr-section-header[role="button"] .cr-section-title { color: var(--iam-ads-text); font-size: 15px; line-height: 22px; font-weight: 600; } /* Round 31 (2026-08-11) — the `#auBasicCard`/`#auPermsCard`-scoped duplicate of the base rule above (identical values, just narrower + `.is-edit-mode`-gated) was removed: it was fully redundant for `#auPermsCard` (already matched by the un-scoped rule above, which targets all of `#addUsersPage`) and, worse, its extra `.is-edit-mode` class gave it higher specificity than the Round-2/26/30 title-color overrides further below — which, now that those are un-scoped for Add User parity, made THIS rule win over them for `#auBasicCard` specifically while Edit mode was active, silently reverting its title back to 15px gray. `#auPermsCard` (an edit-only, currently- unused legacy card, unaffected by this change either way) keeps getting the same 15px/gray styling it always had, from the un-scoped rule above. */ /* ═══ Final-QA round 2 — Edit User page (Figma node 1003:21681) ════ Corrects a wrong token from the prior round. Dev Mode on the exact "Basic information" / "Access" heading nodes (1003:21681 / 1018:21842, nested inside 1003:20186) resolves to `heading/sm`, NOT `heading/lg`: MultiplaneTWDC Display Medium, 20px / 24px line-height, 0 letter- spacing. Color/chevron treatment were superseded by round 26 below (title/chevron now #2D2F8C, per an explicit updated spec). The previous round's 24/28 reading was too large — these headings were visually competing with the 28px `Edit user` page title, which is exactly the H1-vs-H2 hierarchy violation this correction fixes. Selector list must match/outrank the 15px rule above on specificity (2 ids + role attr + 3 classes) and wins on source order as well, since it is declared after it. Round 31 (2026-08-11) — Add User parity pass: un-scoped from `.is-edit-mode`. "Basic information" and "Role and Permission" are the exact same `#auBasicCard`/`#auRolesCard` DOM nodes in Add mode (see index.html — one shared markup, no separate Add-mode copy), so this same heading treatment now applies unconditionally in both modes per an explicit "match Edit User exactly, reuse shared styles" spec, instead of only rendering it for Edit mode. */ html[data-iam-version="v4"] #addUsersPage #auBasicCard .cr-section-header[role="button"] .cr-section-title, html[data-iam-version="v4"] #addUsersPage #auRolesCard .cr-section-header[role="button"] .cr-section-title { font-family: "MultiplaneTWDC Display", "Open Sans", sans-serif; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: 0; } html[data-iam-version="v4"] #addUsersPage #auBasicCard .cr-section-header[role="button"] .cr-section-chev, html[data-iam-version="v4"] #addUsersPage #auRolesCard .cr-section-header[role="button"] .cr-section-chev { width: 24px; height: 24px; flex: 0 0 24px; } /* ═══ Round 26 (2026-08-11) — "Basic information" / "Access" header redesign: chevron moves to the right, indigo #2D2F8C title color, no more chevron-driven title indentation ═══ Title color: explicit #2D2F8C per an updated spec, replacing whatever it previously resolved to (neutral gray --iam-ads-text). Round 31 (2026-08-11) — un-scoped from `.is-edit-mode` for the same Add User parity reason as the font rule above: same shared DOM, same title color in both modes now. Round 36 (2026-08-12) — Edit Team's "Team details" / "Members" headings join this same rule (rather than a second, separately hard-coded `#2D2F8C` elsewhere) so both pages' section titles are always guaranteed to share the exact same color value; see `#editTeamPage .cr-section-header .cr-section-title` above, which deliberately leaves `color` unset for this same reason. */ html[data-iam-version="v4"] #addUsersPage #auBasicCard .cr-section-header[role="button"] .cr-section-title, html[data-iam-version="v4"] #addUsersPage #auRolesCard .cr-section-header[role="button"] .cr-section-title, html[data-iam-version="v4"] #editTeamPage .cr-section-header .cr-section-title { color: #2D2F8C; } /* Round 30 (2026-08-11) — chevron color corrected to reuse the exact ADS/brand-link token (`--brand-text`) already used by the "Back to Users" link/icon on this same page (`.au-back`, `.au-back svg` via `stroke="currentColor"`), instead of the Round 26 hard-coded #2D2F8C. Title color is intentionally left untouched above — only the chevron changes. No separate :hover/:focus/:active override exists for this chevron, so it reads as this same token in every interaction state (hover, focus, expanded, collapsed) automatically; the collapsed-state rotation further below is a `transform`, not a color change, so it doesn't need touching either. Round 31 (2026-08-11) — un-scoped from `.is-edit-mode`; see above. */ html[data-iam-version="v4"] #addUsersPage #auBasicCard .cr-section-header[role="button"] .cr-section-chev, html[data-iam-version="v4"] #addUsersPage #auRolesCard .cr-section-header[role="button"] .cr-section-chev { color: var(--brand-text); } /* Chevron to the far right: DOM order is left untouched on purpose (the chevron `` is still the FIRST child in index.html, before `.cr-section-title`), so nothing about Create Role / Edit Team / Add mode's identical shared `.cr-section-header` markup is disturbed by this change — only these two cards, only in Edit mode, are affected. `order: 1` (title/summary stay at the default `order: 0`) plus `margin-left: auto` visually pushes the chevron past them to the header's own right edge, while the header itself now spans the row's full width so that edge lines up with the card's real right-padding guide — the same distance from the card's right edge that the title sits from the card's left edge (both are the card's own 24px padding; see `.au-card`/`.cr-card`). This also removes the old chevron-width + gap indentation the title used to carry when the chevron sat in front of it, so the title's left edge now lines up exactly with the section body below it. Round 31 (2026-08-11) — un-scoped from `.is-edit-mode`: with "Change user" removed from the Basic Information header row entirely (see index.html), `#auBasicCard`'s header row has no sibling left to make room for in either mode, so this can safely apply unconditionally. */ html[data-iam-version="v4"] #addUsersPage #auBasicCard .cr-section-header[role="button"], html[data-iam-version="v4"] #addUsersPage #auRolesCard .cr-section-header[role="button"] { width: 100%; justify-content: flex-start; } /* `#auBasicCard`'s header used to share its row with the Add-mode-only "Change user" button via `flex: 0 1 auto` — see `.cr-section-header- row .cr-section-header` above — so it didn't claim the whole row by default. That button has been removed (Round 31, Add User parity pass) so the header can now always grow to fill the row in both modes; without this, the chevron's `margin-left: auto` would only push it to the edge of the header's own (content-sized) box, not the row's true right edge. `#auRolesCard` has no such wrapper row (its header is already a full-width block-level flex container), so it needs no equivalent override. */ html[data-iam-version="v4"] #addUsersPage #auBasicCard > .cr-section-header-row > .cr-section-header[role="button"] { flex: 1 1 auto; } html[data-iam-version="v4"] #addUsersPage #auBasicCard .cr-section-header[role="button"] .cr-section-chev, html[data-iam-version="v4"] #addUsersPage #auRolesCard .cr-section-header[role="button"] .cr-section-chev { order: 1; margin-left: auto; } /* Collapsed-state chevron direction: expanded already shows the base SVG's natural down-chevron unrotated. The shared `.cr-card.collapsed .cr-section-chev` rule (used by every OTHER accordion in the app — Create Role, Edit Team, Permission Capability) rotates -90deg on collapse, which turns a down-chevron into a left/right-pointing one — explicitly disallowed for these two sections. 180deg instead flips it to an up-chevron (expanded=down / collapsed=up), reusing the same subtle animated transition already defined on `.cr-section-chev`. Scoped to these two cards only — every other accordion in the app keeps its original -90deg rotation, unchanged. Round 31 (2026-08-11) — un-scoped from `.is-edit-mode`; Add mode now gets the identical up/down chevron behavior as Edit mode. */ html[data-iam-version="v4"] #addUsersPage #auBasicCard.cr-card.collapsed .cr-section-chev, html[data-iam-version="v4"] #addUsersPage #auRolesCard.cr-card.collapsed .cr-section-chev { transform: rotate(180deg); } /* ═══ Round 28 (2026-08-11) — Edit Role "Role Details" / "Functions" header rework: chevron reposition ONLY, no color change. Round 27's #2D2F8C title/chevron override (directly above, in prior source) has been fully reverted per an updated spec — "preserve all existing text colors, do not apply #2D2F8C or introduce any new text-color override". Both cards keep whatever color they already rendered before Round 27 (`.cr-section-title` → `--iam-ads-text`, `.cr-section- chev` → `--iam-ads-text-secondary`, both from the shared, un-scoped `#createRolePage`/`.cr-section-header[role="button"]` rules already defined above in this file — nothing new needed here to restore them). Scoped to `#createRolePage.is-edit-mode` (set/cleared in `showEditRole()`/`showCreateRole()`/`hideCreateRole()` in app.js) so Create Role keeps its original left-chevron header, at the chevron's original 16px size, completely untouched. The nested per-application "Core Planning" accordion inside Functions has its own, separately scoped Round 28 treatment further down this file. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode #crBasicCard .cr-section-header[role="button"] .cr-section-chev-btn, html[data-iam-version="v4"] #createRolePage.is-edit-mode #crFuncsCard .cr-section-header[role="button"] .cr-section-chev-btn { /* Chevron to the far right — DOM order is untouched (the chevron button stays the FIRST child before `.cr-section-title` in index.html, exactly as the bare `` did before); `order: 1` pushes it after the title, `margin-left: auto` then pushes it the rest of the way to the header's own right edge. Removing the chevron from the front also removes its former width + gap indentation, so the title's left edge now lines up with the section body below it, and the chevron's distance from the card's right edge matches the title's distance from the card's left edge (both the card's own 24px padding). 32px clickable area (accessibility requirement: chevron controls need a ~32-36px hit target) — Create Role keeps the button at its default 16px (see the un-scoped `.cr-section-chev-btn` reset rule above), so this growth is Edit Role-only. */ order: 1; margin-left: auto; width: 32px; height: 32px; } /* Collapsed-state chevron direction — 180deg (up), never -90deg (left/right). Scoped to Edit mode only: Create Role keeps the shared -90deg rotation, unchanged. Round 33 (2026-08-11): "Functions" is deliberately EXCLUDED from this rule now — its own state convention is the opposite (expanded = up / collapsed = down, matching the nested application chevrons introduced in this same round), see the dedicated `#crFuncsCard` rule further down. "Role Details" (`#crBasicCard`) keeps this original down/up convention, unchanged. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode #crBasicCard.cr-card.collapsed .cr-section-chev { transform: rotate(180deg); } /* Functions top-level chevron: expanded/open points UP (rotate 180deg), collapsed/closed points DOWN (unrotated) — the OPPOSITE of Role Details directly above and every other top-level accordion in this app, per an explicit spec matching the nested application chevrons below it. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode #crFuncsCard.cr-card:not(.collapsed) .cr-section-chev { transform: rotate(180deg); } html[data-iam-version="v4"] #createRolePage.is-edit-mode #crFuncsCard.cr-card.collapsed .cr-section-chev { transform: none; } /* ═══ Round 33 (2026-08-11) — Edit Role nested application headers ("Core Planning", "Identity and Access Management", etc.): reworked from Round 28's "Title ... [Remove application] [Chevron]" (chevron grouped with Remove on the far right) to "[Chevron] Title ... [Remove application]" — the chevron moves back in front of the application name, immediately signalling "this row expands/ collapses" the way the un-scoped Create Role default already does, while Remove application keeps sole ownership of the row's far right edge with no chevron beside it. This is actually the SAME order Create Role's own un-scoped default already uses (`.cr-app-head-chev-btn` order 0 / `.cr-app-title` order 1, `flex: 1 1 auto` / `.cr-app-remove` order 2, set above) — Edit Role no longer needs its own reordering at all for these three, only its own clickable-hit-area growth on the chevron button and a tighter, spec'd 8px chevron-to-title gap (Create Role keeps the shared 12px `.cr-app-section-head` gap, unaffected). Whichever element ends up first in visual order still uses the same DOM order/click-handling from `buildAppSectionHtml()` in app.js — no markup change needed, this is CSS-only. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-section-head { gap: 8px; } html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-head-chev-btn { /* Same ~32px clickable hit area as Role Details/Functions above — Create Role keeps this button at its default 16px. The chevron `` inside stays a 16px icon either way (only the button's own hit-box grows) — see `.cr-app-head-chev` width/height, untouched. */ order: 0; width: 32px; height: 32px; } html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-title { order: 1; } html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-remove { order: 2; } /* Neutral (Gray/700, `--iam-ads-text-secondary`) nested-chevron color — deliberately NOT `#4045C2`/`--brand-text` (Create Role's own nested chevron color, unaffected) so the nested chevron reads as visually subordinate to the blue top-level Functions chevron, establishing a clear two-level hierarchy. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-head-chev { color: var(--iam-ads-text-secondary, #3b4347); } /* Expanded/open application: chevron points UP (rotate 180deg). Collapsed/closed application: chevron points DOWN (unrotated — the base SVG's natural resting direction). This is the OPPOSITE of every other accordion convention in this app (Role Details/Functions above included) — intentional, explicit spec for this nested level only. Create Role keeps its own unrelated -90deg collapsed rotation, unaffected. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix:not(.cr-app-section--collapsed) .cr-app-head-chev { transform: rotate(180deg); } html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix.cr-app-section--collapsed .cr-app-head-chev { transform: none; } /* Header row split (Figma "Frame 2134099792") — the existing `.cr-section-header[data-au-toggle]` stays exactly as it was (own click/keydown listeners, own padding) but now shares its row with the Revoke access button via a plain space-between flex wrapper, instead of the header stretching edge-to-edge alone. Scoped to Edit User only: Create Role / Edit Team headers are untouched. Final layout pass (Figma 1003:20186 measured directly): removed the `padding-right: 24px` that used to live here — `#auBasicCard` already contributes 24px of its own right padding (see `.au-card`/`.cr-card`), so the old rule double-counted it and left Revoke access ~24px short of the card's true inner-right guide instead of flush with it. */ html[data-iam-version="v4"] #addUsersPage .cr-section-header-row { display: flex; align-items: center; justify-content: space-between; } html[data-iam-version="v4"] #addUsersPage .cr-section-header-row .cr-section-header { flex: 0 1 auto; min-width: 0; } /* Basic Information / Role-and-Permission section-header height + inner-left guide (Figma "Frame 2134099792" / "Frame 2134099791"): the shared `.cr-section-header[role="button"]` accordion-trigger rule (used by Create Role and the Permission Card detail page) applies a 62px min-height + 20px/24px padding sized for a *standalone*, full-bleed accordion header. On Basic Information / Role-and-Permission that same padding silently added a second 24px left inset on top of the card's own 24px padding (pushing the chevron+title ~24px past the card's true inner-left guide) and inflated the row to ~68px tall instead of the 36px Figma measures (the height of the tallest sibling in the row — Revoke access in edit mode, Change user in add mode). Applies in BOTH modes now so Add User's card headers land on the exact same inner-left guide as Edit User's (same shared section-header pattern, Figma 1023:22053 agrees with 847:16172 on this). */ html[data-iam-version="v4"] #addUsersPage #auBasicCard > .cr-section-header-row > .cr-section-header[role="button"], html[data-iam-version="v4"] #addUsersPage #auRolesCard > .cr-section-header[role="button"] { min-height: 0; padding: 0; gap: 8px; } /* Back to Users / Back to teams — superseded by the shared back-navigation component (`.au-back`/`.cr-back`, defined once near the top of this file), which already ships `padding: 0 4px 0 0` so the back-chevron icon sits flush on every page's left content guide without a page-specific override. */ /* Shared ADS ghost/text-button component for page-header destructive actions — ADS Button component, tertiary/text variant, `default` size. Originally built for Edit User's "Revoke access" (header-simplification pass: moved from the Basic Information card header into the page-level header action group, replacing "Save as Draft" in that slot, and stripped of its former UserMinus leading icon per that pass's explicit "text-only, no icon" requirement — text-only ghost/tertiary buttons carry no `gap` since there is no icon to space from the label). Reused as-is (class list below) by Edit Team's "Delete Team" (Final-QA: "Update the V4 Edit Team page header" pass) rather than duplicating the contract — same slot in the same shared `.au-header-actions` pattern, same destructive ghost/text treatment. Still its OWN rule (not `.btn-std`/ `.btn-ghost`) so it owns its full ghost-button contract end to end: transparent background, no border, 12px/8px padding-x/y, 6px radius, Open Sans SemiBold 14/20, rest color `button/variant/ghost/text` #51585b (`--iam-ads-text-muted`) — same contract as `.au-btn-save-draft` (Create Role's own Save as Draft), since all three are the same ADS ghost/text component. Round 27 (2026-08-11 — Edit Role header actions): `.cr-btn-remove` ("Remove Role") joins this group too, replacing its old bespoke 26px/indigo "compact inline text-action" treatment (see the removed entry in the 26px "Compact ghost text buttons" group above). Stays muted-gray, not red — this app has an explicit, documented app-wide decision to never render a red "danger" button (ADS's own component inventory ships only primary/secondary/tertiary/ghost, no destructive variant — see the "Delete/Remove confirmation buttons" comment elsewhere in this file), and every other destructive ghost trigger here (Revoke access, Delete Team) already uses this same muted-gray ghost, not red, for consistency. Round 37 (2026-08-12 — Edit Team Members-table "Remove" QA): `.tm-row-remove` (per-row "Remove" in the Members table) joins the shape/color/interaction contract below too — same ghost variant as Delete Team, not a fourth bespoke treatment — but is deliberately left OUT of the size declarations right after (height/padding/font- size/line-height), which stay 36px/"default" size for the original three page-level actions only. `.tm-row-remove` gets its own compact-size rule immediately below instead (same rationale as Round 27 splitting size from color: a table row needs a smaller ADS button size than a page header, while still being unmistakably "the same ghost button"). */ html[data-iam-version="v4"] .au-revoke-btn, html[data-iam-version="v4"] .tm-delete-btn, html[data-iam-version="v4"] .cr-btn-remove, html[data-iam-version="v4"] .tm-row-remove { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; font-family: "Open Sans", sans-serif; font-weight: 600; color: var(--iam-ads-text-muted, #51585b); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } /* "Default" ADS Button size — page-level destructive actions only. `.tm-row-remove`'s compact size lives in its own rule right after. */ html[data-iam-version="v4"] .au-revoke-btn, html[data-iam-version="v4"] .tm-delete-btn, html[data-iam-version="v4"] .cr-btn-remove { height: 36px; padding: 8px 12px; font-size: 14px; line-height: 20px; } /* "Compact"/small ADS Button size — the same ghost component as above, sized for a table row: 26px, the identical compact height already used app-wide for inline row/header actions like "Remove application" (see the 26px "Compact ghost text buttons" group earlier in this file), so this doesn't invent a new size, just applies the existing compact size token to this component's color contract. Row height is untouched — 26px comfortably fits inside the Members table's existing 48px row height with room to spare, the same way it always has for every other compact-ghost action in this app. */ html[data-iam-version="v4"] .tm-row-remove { height: 26px; padding: 4px 8px; font-size: 12px; line-height: 18px; } html[data-iam-version="v4"] .au-revoke-btn:hover, html[data-iam-version="v4"] .tm-delete-btn:hover, html[data-iam-version="v4"] .cr-btn-remove:hover, html[data-iam-version="v4"] .tm-row-remove:hover { background: rgba(15, 18, 20, 0.05); color: var(--iam-ads-text, #1e2528); } html[data-iam-version="v4"] .au-revoke-btn:active, html[data-iam-version="v4"] .tm-delete-btn:active, html[data-iam-version="v4"] .cr-btn-remove:active, html[data-iam-version="v4"] .tm-row-remove:active { background: rgba(15, 18, 20, 0.08); color: var(--iam-ads-text, #1e2528); } html[data-iam-version="v4"] .au-revoke-btn:focus-visible, html[data-iam-version="v4"] .tm-delete-btn:focus-visible, html[data-iam-version="v4"] .cr-btn-remove:focus-visible, html[data-iam-version="v4"] .tm-row-remove:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; } html[data-iam-version="v4"] .cr-btn-remove:disabled, html[data-iam-version="v4"] .tm-row-remove:disabled { opacity: 0.5; cursor: not-allowed; } /* Extra separation before Cancel/Save (Final-QA requirement: "a slightly larger gap between Delete Team and Cancel" than the standard ADS gap used between Cancel and Save) — this reads as clear separation between the destructive action and the editing actions without a visible divider, which neither the Figma reference nor the ADS pattern for this header includes. Extra margin on the control itself (not a change to the shared `.au-header-actions` gap) keeps Edit Team's own standard Cancel<->Save gap intact. Edit User's header no longer has a destructive action at all (Revoke access removed) so it needs no equivalent rule — Cancel/Save there just use the shared 12px `.au-header-actions` gap below, untouched. */ html[data-iam-version="v4"] #editTeamPage .tm-delete-btn { margin-right: 12px; } /* Save as Draft — same ADS Button `ghost`/`default` contract as Revoke access (Figma "Frame 627874" node 1003:21304): transparent background, text-only (no icon), 12px/8px padding-x/y, 6px radius, 36px height, Open Sans SemiBold 14/20, rest color `button/variant/ghost/text` #51585b. Given its own rule for the same reason as `.au-revoke-btn` (full self-contained ghost-button contract) rather than reusing `.btn-ghost`, which is scoped to indigo `--brand-text` styling for toolbar "+ Add" actions elsewhere in this app. */ html[data-iam-version="v4"] .au-btn-save-draft { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; font-family: "Open Sans", sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--iam-ads-text-muted, #51585b); white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } html[data-iam-version="v4"] .au-btn-save-draft:hover { background: rgba(15, 18, 20, 0.05); color: var(--iam-ads-text, #1e2528); } html[data-iam-version="v4"] .au-btn-save-draft:active { background: rgba(15, 18, 20, 0.08); color: var(--iam-ads-text, #1e2528); } html[data-iam-version="v4"] .au-btn-save-draft:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; } /* Same `[hidden]` override `.cr-btn-remove[hidden]` already needed (R-above): the shared ADS button-anatomy rule sets `display: inline-flex` as an author style, which otherwise wins over the browser's UA-stylesheet `[hidden] { display: none }` default. Needed now that Edit Role hides Save as Draft (Create Role shows it, Edit Role shows Remove Role instead — see `setRemoveRoleVisible`). */ html[data-iam-version="v4"] .au-btn-save-draft[hidden] { display: none !important; } /* Header actions — Figma "Frame 627874" measures a fixed 12px gap between the action-group siblings, inside one action-group container, `.au-header-actions`) vs the 16px this app uses elsewhere for the same class (Edit Team keeps its own 16px, untouched). Height/padding/radius already resolve to the ADS 36px/32px + 12-8px/6px contract via existing rules — only the gap needed correcting. Edit User's header action group is now just Cancel -> Save (Revoke access removed entirely), so this single 12px gap is the only spacing rule this group needs. */ html[data-iam-version="v4"] #addUsersPage .au-header-actions { gap: 12px; } /* Identity block — status icon now sits beside the name (see the `.au-id-name-row` wrapper added in index.html); the email row below holds only the email text. Reuses the exact same 4px gap already established for the (now single-child) email row for visual consistency. `min-width: 0` on both the row and the name span keeps the existing text-overflow ellipsis working now that the name is a flex child of a new wrapper rather than a lone block. This rule used to be scoped to `.is-edit-mode`, which is what broke Add User: `.au-id-name-row` is shared markup, so in Add mode it stayed a plain block and `#auIdName` stayed `display: inline`. `overflow`, `text-overflow` and `white-space: nowrap` have no effect on a non-replaced inline box, so a long name laid itself out at full width — straight across the Preferred name field — and the status icon was pushed onto its own line after it. Blockifying the name as a flex item is what makes the ellipsis (and the truncation measurement that drives its tooltip) work at all, and both flows need it. */ html[data-iam-version="v4"] #addUsersPage .au-id-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; /* The name shrinks; the status icon beside it never does, so it can't be squeezed out of the identity column by a long name. */ flex-wrap: nowrap; } html[data-iam-version="v4"] #addUsersPage .au-id-name-row .au-id-name { min-width: 0; flex: 0 1 auto; } html[data-iam-version="v4"] #addUsersPage .au-id-name-row .au-id-status { flex: 0 0 auto; } /* Truncated name/email become focusable (JS adds `tabindex` only while they're actually clipped) so keyboard users can reach the tooltip that reveals the full value. Give them the standard focus ring. */ html[data-iam-version="v4"] #addUsersPage .au-id-name[tabindex]:focus-visible, html[data-iam-version="v4"] #addUsersPage .au-id-email[tabindex]:focus-visible { outline: 2px solid var(--brand-focus-ring, #3611C8); outline-offset: 2px; border-radius: 4px; } /* External Edit User renders Company as a read-only rather than an , so it needs the clipping an input does natively — otherwise a long organization name spills out of the field and across the column. Everything else about its box (32px height, padding, radius, border, read-only fill) comes from the shared `.au-input` + `.au-input-readonly` classes, which is what keeps it level with the Timezone control beside it. */ html[data-iam-version="v4"] #addUsersPage .au-field-team-readonly { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* Avatar: the vector placeholder draws its own circle whose outer edge sits exactly on the container's boundary, so the container's circular clip was shaving that edge. Nothing about a self-contained circular drawing needs cropping — only a rectangular photo does. Keep `overflow: hidden` for the photo/initials cases and drop it for the placeholder, so the whole outer circle is guaranteed to paint. */ html[data-iam-version="v4"] #addUsersPage .au-id-avatar:has(> .au-id-avatar-svg) { overflow: visible; } /* Pagination digit width from the ADS component metadata. */ html[data-iam-version="v4"] .pgn .pg-nums .pg-n { width: auto; min-width: 36px; } /* Remaining repository-token corrections found during the terminal cascade audit. These supersede legacy high-specificity rules while preserving all markup and behavior. Background corrected to white (Figma node 1003:17844 final-QA — see the R38-6 comment above this rule used to win the cascade with a hardcoded #fafafb; this was the actual regression). */ html[data-iam-version="v4"] .v4-card .tbl thead th { background: var(--iam-ads-surface); color: var(--iam-ads-text-secondary); font-weight: 500; letter-spacing: 0.01em; } html[data-iam-version="v4"] .v4-card .pgn { height: 48px; min-height: 48px; padding-top: 6px; padding-bottom: 6px; } html[data-iam-version="v4"] .v4-card .pgn .pg-nav, html[data-iam-version="v4"] .v4-card .pgn .pg-nums .pg-n { width: 36px; min-width: 36px; height: 36px; min-height: 36px; font-size: 14px; border-radius: 8px; } html[data-iam-version="v4"] .pgn-lbl { color: var(--iam-ads-text-muted); font-size: 12px; font-weight: 500; } html[data-iam-version="v4"] .au-label, html[data-iam-version="v4"] .cr-label, html[data-iam-version="v4"] .flt-label, html[data-iam-version="v4"] .field-label { color: var(--iam-ads-text); font-size: 14px; line-height: 18px; font-weight: 600; } /* Final-QA (Edit User, Figma 1003:20186 / Input node 1018:21804): the ADS Input "Label and Required" slot renders at 12px/18px SemiBold 500 in `--iam-ads-text-secondary` (#3b4347), not the 14px/600 `--iam-ads-text` treatment above (that 14px/600 rule serves Create Role's `.cr-label` and the filter bar's `.flt-label`/`.field-label`, which have their own, separately-verified Figma specs — narrowing the selector list here instead of editing the shared rule keeps those pages byte-identical). Scoped to the Add/Edit User page only. */ html[data-iam-version="v4"] #addUsersPage .au-label { color: var(--iam-ads-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; } /* Final-QA (Figma 1003:20186): the required-field marker on the Input component uses `--ads-red-400` (#993b44), already the published Ads DS validation-text red used elsewhere in this file (`.cr-req` under ads-preview) — `.au-req` had never been migrated off the pre-ADS #e52f52 pink. Scoped to Add/Edit User only. */ html[data-iam-version="v4"] #addUsersPage .au-req { color: var(--ads-red-400); } html[data-iam-version="v4"] .search input:focus, html[data-iam-version="v4"] .cr-input:focus, html[data-iam-version="v4"] .cr-textarea:focus, html[data-iam-version="v4"] .au-input:focus, html[data-iam-version="v4"] .flt-input:focus { border-color: var(--iam-ads-brand); outline: 0; box-shadow: 0 0 0 2px rgba(64, 69, 194, 0.20); } html[data-iam-version="v4"] .edl-tooltip, html[data-iam-version="v4"] .edl-status-tooltip { padding-left: 16px; padding-right: 16px; background: #21292d; } @media (max-width: 768px) { html[data-iam-version="v4"] .v4-card .tabs-row { height: 56px; padding: 8px 0 9px; } html[data-iam-version="v4"] .v4-card .tab-btn { height: 39px; padding: 8px 12px 7px; font-size: 18px; line-height: 24px; } } @media (max-width: 900px) { html[data-iam-version="v4"] .v4-card .pgn { height: auto; min-height: 96px; padding: 8px 12px; } } /* R57C — authoritative Tabs/Search/Button layer, intentionally last. */ html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab { height: 32px !important; padding: 8px 16px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #51585b !important; font: 400 18px/24px "Open Sans", sans-serif !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:hover:not(:disabled):not(.on) { color: #3b4347 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on { height: 39px !important; padding: 8px 16px 7px !important; color: #4045c2 !important; font-weight: 600 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab.on::after { bottom: 0 !important; height: 3px !important; background: #4045c2 !important; } html[data-iam-version="v4"] .v4-card .ads-tabs .ads-tab:focus-visible { height: 40px !important; padding: 8px 16px !important; border-radius: 3px !important; color: #4045c2 !important; outline: 0 !important; box-shadow: inset 0 0 0 2px #4045c2 !important; } html[data-iam-version="v4"] .ads-search > input, html[data-iam-version="v4"] .tm-add-search.ads-search > input { width: auto !important; height: 20px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #1e2528 !important; font: 400 14px/20px "Open Sans", sans-serif !important; } html[data-iam-version="v4"] .ads-search > input:focus, html[data-iam-version="v4"] .tm-add-search.ads-search > input:focus { border: 0 !important; outline: 0 !important; box-shadow: none !important; } html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-ico { position: static !important; left: auto !important; right: auto !important; width: 20px !important; height: 20px !important; transform: none !important; color: #51585b !important; } html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-clear { position: static !important; left: auto !important; right: auto !important; /* Round 23 (2026-08-11): 16px -> 24px clickable area, matching the canonical `.ads-search .search-clear` rule below — this is one of three byte-identical duplicate blocks in this file (all `!important`, so all three had to move together or the lowest-value one would keep winning the cascade). */ width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; } html[data-iam-version="v4"] .ads-search:focus-within { border-color: rgba(15, 18, 20, 0.50) !important; box-shadow: none !important; } html[data-iam-version="v4"] button:is(.btn-std, .btn-ghost, .au-btn-save, .cr-btn-save, .au-btn-add, .cr-btn-add, .flt-btn-cancel, .flt-btn-apply, .cr-btn-danger-solid) { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 36px !important; height: 36px !important; padding: 8px 12px !important; gap: 4px !important; border-radius: 6px !important; font: 600 14px/20px "Open Sans", sans-serif !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost, html[data-iam-version="v4"] button.au-btn-save, html[data-iam-version="v4"] button.cr-btn-save, html[data-iam-version="v4"] button.flt-btn-apply { border: 0 !important; background: #4045c2 !important; color: #fff !important; box-shadow: none !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:hover:not(:disabled), html[data-iam-version="v4"] button.au-btn-save:hover:not(:disabled), html[data-iam-version="v4"] button.cr-btn-save:hover:not(:disabled), html[data-iam-version="v4"] button.flt-btn-apply:hover:not(:disabled) { background: #6567ce !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:active:not(:disabled), html[data-iam-version="v4"] button.au-btn-save:active:not(:disabled), html[data-iam-version="v4"] button.cr-btn-save:active:not(:disabled), html[data-iam-version="v4"] button.flt-btn-apply:active:not(:disabled) { background: #4045c2 !important; } html[data-iam-version="v4"] .v4-card .tbar > button.btn-ghost:disabled, html[data-iam-version="v4"] button.au-btn-save:disabled, html[data-iam-version="v4"] button.cr-btn-save:disabled, html[data-iam-version="v4"] button.flt-btn-apply:disabled { border-color: transparent !important; background: #e2e3f2 !important; color: rgba(255, 255, 255, 0.50) !important; opacity: 1 !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel) { border: 1px solid #4045c2 !important; background: transparent !important; color: #4045c2 !important; box-shadow: none !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel):hover:not(:disabled) { background: rgba(15, 18, 20, 0.05) !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel):active:not(:disabled) { background: rgba(15, 18, 20, 0.10) !important; } html[data-iam-version="v4"] button:is(.btn-std, .au-btn-add, .cr-btn-add, .flt-btn-cancel):disabled { border-color: #e2e3f2 !important; background: rgba(15, 18, 20, 0.05) !important; color: #e2e3f2 !important; opacity: 1 !important; } /* ═══════════════════════════════════════════════════════════════════════ PROTOTYPE-ONLY — Select Users → Export to Excel simulation ═══════════════════════════════════════════════════════════════════════ Everything below styles #simDesktopOverlay / #simExcelOverlay (index.html) — a purely visual, in-page simulation of "export completed → a file appears on the Desktop → the file opens in Excel". None of it is a real Finder/macOS/Excel surface; it is scoped entirely to these two ids so it can never bleed into or restyle any real ADS/EDL component elsewhere in the app. Per the spec, this presentation layer is allowed its own "external-simulation" styling rather than ADS tokens (it represents third-party OS/app chrome, not an Atlas surface) — the ADS components living *inside* the User List itself (checkboxes, the Export ghost button, toasts) are untouched by anything here. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.sim-overlay-open { overflow: hidden; } .sim-desktop, .sim-excel { position: fixed; inset: 0; z-index: 9500; /* above the whole app (nav is 100, dialogs 90-1000) but below the EDL toast layer (10000+) so "Export created." can float visibly on top of the Desktop. */ display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Open Sans", sans-serif; animation: simFadeIn 0.22s ease both; } .sim-desktop[hidden], .sim-excel[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .sim-desktop, .sim-excel { animation: none; } } @keyframes simFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ─── Simulated Desktop ─── */ .sim-desktop { background: radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.18), transparent 45%), linear-gradient(160deg, #6a8dd6 0%, #7d6bc9 42%, #4b3f8f 78%, #2c2560 100%); } .sim-menubar { flex: 0 0 auto; height: 26px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: rgba(20, 20, 26, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; user-select: none; } .sim-menubar-apple { font-size: 15px; line-height: 1; } .sim-menubar-app { font-weight: 700; } .sim-menubar-items { display: flex; gap: 16px; color: rgba(255, 255, 255, 0.78); } .sim-menubar-status { margin-left: auto; display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.85); } .sim-menubar-clock { font-weight: 500; white-space: nowrap; } .sim-desktop-surface { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; } .sim-desktop-return { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; background: rgba(20, 20, 26, 0.35); backdrop-filter: blur(6px); color: #ffffff; font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .sim-desktop-return:hover { background: rgba(20, 20, 26, 0.55); } .sim-desktop-return:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .sim-desktop-icons { position: absolute; /* Pushed below the EDL toast stack's top-right corner (top:80px, up to ~2 stacked 400px-wide toasts) so the "Export created." toast never covers the newly-created file it's describing. */ top: 300px; right: 28px; display: flex; flex-direction: column; gap: 8px; align-items: center; } .sim-file-icon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; padding: 10px 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font-family: "Open Sans", sans-serif; } .sim-file-glyph { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); } .sim-file-name { max-width: 100%; padding: 1px 6px; border-radius: 4px; color: #ffffff; font-size: 12px; font-weight: 500; line-height: 15px; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); word-break: break-word; } .sim-file-icon:hover .sim-file-name, .sim-file-icon:focus-visible .sim-file-name { background: rgba(255, 255, 255, 0.14); } .sim-file-icon:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; border-radius: 10px; } /* Selected state (macOS Finder convention: translucent blue wash behind icon + name) once the file has been opened at least once this cycle. */ .sim-file-icon.is-selected .sim-file-glyph { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)) brightness(1.02); } .sim-file-icon.is-selected .sim-file-name { background: rgba(64, 133, 255, 0.55); } /* One-shot "just created" pulse — a soft glow ring that fades out over ~1s, drawing the eye to the new file without looping indefinitely. The class is only ever added by JS when motion is not reduced (see openSimulatedDesktop() in app.js); this media query is a second line of defense in case the class is present regardless. */ .sim-file-icon.is-new .sim-file-glyph { animation: simFileArrive 0.9s ease-out 1; } @keyframes simFileArrive { 0% { transform: scale(0.85); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 35% { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.85)); } 100% { transform: scale(1); filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); } } @media (prefers-reduced-motion: reduce) { .sim-file-icon.is-new .sim-file-glyph { animation: none; } } .sim-desktop-hint { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 8px; background: rgba(20, 20, 26, 0.45); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.92); font-family: "Open Sans", sans-serif; font-size: 13px; text-align: center; max-width: min(420px, calc(100vw - 48px)); } /* ─── Simulated Excel window ─── */ .sim-excel { background: rgba(15, 18, 20, 0.45); align-items: center; justify-content: center; padding: 24px; } .sim-excel-window { display: flex; flex-direction: column; width: min(1120px, 100%); height: min(720px, 100%); background: #ffffff; border-radius: 10px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); overflow: hidden; } .sim-excel-titlebar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; background: #f3f3f3; border-bottom: 1px solid #d9dcde; } .sim-excel-traffic { display: flex; align-items: center; gap: 8px; } .sim-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; } .sim-dot-red { background: #ff5f57; } .sim-dot-yellow { background: #febc2e; } .sim-dot-green { background: #28c840; } .sim-excel-titletext { flex: 1 1 auto; text-align: center; font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 600; color: #3b4347; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sim-excel-back-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 28px; padding: 0 12px; border: 1px solid #c7ccce; border-radius: 6px; background: #ffffff; color: #1e2528; font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .sim-excel-back-btn:hover { background: #f0f1f2; } .sim-excel-back-btn:focus-visible { outline: 2px solid var(--brand-focus-ring, #4045c2); outline-offset: 2px; } .sim-excel-ribbon { flex: 0 0 auto; background: #ffffff; border-bottom: 1px solid #e3e5e6; } .sim-excel-ribbon-tabs { display: flex; gap: 18px; padding: 6px 16px 0; font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 600; color: #51585b; } .sim-excel-ribbon-tabs .on { color: #1D6F42; padding-bottom: 6px; border-bottom: 2px solid #1D6F42; } .sim-excel-ribbon-tools { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; } .sim-ribbon-swatch { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: #f3f3f3; color: #3b4347; font-size: 12px; font-weight: 700; } .sim-ribbon-swatch-b { font-style: normal; } .sim-ribbon-swatch-i { font-style: italic; } .sim-ribbon-swatch-u { text-decoration: underline; } .sim-ribbon-fill { border: 1px solid #d9dcde; } .sim-ribbon-divider { width: 1px; height: 20px; background: #e3e5e6; margin: 0 4px; } .sim-excel-formula-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; background: #ffffff; border-bottom: 1px solid #e3e5e6; font-family: "Open Sans", sans-serif; font-size: 12px; color: #3b4347; } .sim-excel-namebox { min-width: 48px; padding: 2px 8px; border: 1px solid #d9dcde; border-radius: 3px; font-weight: 600; } .sim-excel-fx { font-style: italic; color: #1D6F42; font-weight: 700; } .sim-excel-formula-value { color: #51585b; } .sim-excel-grid-wrap { flex: 1 1 auto; overflow: auto; background: #ffffff; } .sim-excel-grid-wrap:focus-visible { outline: 2px solid var(--brand-focus-ring, #4045c2); outline-offset: -2px; } .sim-excel-grid { border-collapse: collapse; min-width: 100%; font-family: "Open Sans", sans-serif; font-size: 13px; color: #1e2528; } .sim-excel-grid th, .sim-excel-grid td { border: 1px solid #e3e5e6; padding: 6px 10px; text-align: left; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; } .sim-excel-colrow th { position: sticky; top: 0; z-index: 3; height: 28px; background: #f3f3f3; color: #51585b; font-weight: 600; text-align: center; min-width: 120px; } .sim-excel-colrow .sim-excel-corner { position: sticky; top: 0; left: 0; z-index: 4; min-width: 40px; background: #f3f3f3; } .sim-excel-rownum { position: sticky; left: 0; z-index: 1; background: #f3f3f3; color: #51585b; font-weight: 600; text-align: center; min-width: 40px; } .sim-excel-headcell { background: #eef1fb; color: #1e2528; font-weight: 700; } /* Row 1 ("Name, Email, Role(s)…") is the header row that actually explains each column — it must stay readable while scrolling through many exported rows, not just the decorative A/B/C column letters above it. Pin it directly beneath the sticky colrow (same 28px height) so both header layers stay visible together, same as a frozen header row in real Excel. */ .sim-excel-grid tbody tr:first-child > .sim-excel-headcell { position: sticky; top: 28px; z-index: 2; } .sim-excel-grid tbody tr:first-child > .sim-excel-rownum { position: sticky; top: 28px; left: 0; z-index: 3; } .sim-excel-cell { background: #ffffff; } .sim-excel-status-active { color: #056C07; font-weight: 600; } .sim-excel-status-inactive { color: #b3261e; font-weight: 600; } .sim-excel-statusbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 30px; padding: 0 14px; background: #f3f3f3; border-top: 1px solid #e3e5e6; font-family: "Open Sans", sans-serif; font-size: 12px; color: #51585b; } .sim-excel-tab { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 4px 4px 0 0; font-weight: 600; } .sim-excel-tab.on { background: #ffffff; border: 1px solid #e3e5e6; border-bottom: 2px solid #1D6F42; color: #1D6F42; } .sim-excel-statusbar-count { margin-left: auto; color: #7a8286; } /* ═══ Final-QA: Create/Edit Role page (Figma 1025:23238 complete layout + 1025:23278 Role Details/Functions headings + ADS Button node 7722:252 for Remove application) ═══════════════════════════ Dev-Mode measurements on 1025:23238 that differ from the page's pre-existing shared accordion/card rules: - Card radius is 8px (Ads DS "radius/8"), not the 6px `--iam-ads-control-radius` the shared `.cr-card` rule uses. - "Role Details" / "Functions" are `heading/sm` — MultiplaneTWDC Display Medium 20px/24px, NOT the 15px Open Sans SemiBold the shared `.cr-section-header[role="button"]` accordion-trigger rule applies (that rule is correct for the *other* consumers of the same shared class — Add User, Permission Capability — so it's narrowed here exactly like the Edit-User heading/sm correction narrowed it for `#auBasicCard`/`#auRolesCard`). - The chevron is a 24×24 icon box (not 16×16), and both the chevron and title render in Gray/800 (`--iam-ads-text`) at rest — pixel-sampling the Figma export confirms this (RGB 22,28,30 ≈ #161c1e at both the "Role Details" chevron and the "Core Planning" app-group chevron), not the brand-indigo this page previously used for either heading. Hover keeps the existing brand-indigo affordance since Figma only captures the resting state and this app already uses "hover → brand" as its universal accordion-trigger convention (R33-8 above). */ html[data-iam-version="v4"] #createRolePage .cr-card { border-radius: 8px; } /* "Back to Roles" now inherits its 14px/20px SemiBold styling from the shared back-navigation component (`.cr-back`, defined once near the top of this file) — no page-specific override needed. */ html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"] { min-height: 0; padding: 0; gap: 8px; margin-bottom: 16px; } html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"] .cr-section-title { font-family: "MultiplaneTWDC Display", "Open Sans", sans-serif; font-size: 20px; line-height: 24px; font-weight: 500; color: var(--iam-ads-text); letter-spacing: 0; } html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"] .cr-section-chev { width: 24px; height: 24px; flex: 0 0 24px; color: var(--iam-ads-text); } html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"]:hover .cr-section-title, html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"]:hover .cr-section-chev, html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"]:focus-visible .cr-section-title, html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"]:focus-visible .cr-section-chev { color: var(--iam-ads-brand); } html[data-iam-version="v4"] #createRolePage .cr-section-header[role="button"]:focus-visible { outline: 0; box-shadow: none; } /* Collapsed state loses the 16px margin the expanded heading uses to separate itself from the fields below it — nothing to separate from once the card body is hidden. */ html[data-iam-version="v4"] #crBasicCard.collapsed .cr-section-header[role="button"], html[data-iam-version="v4"] #crFuncsCard.collapsed .cr-section-header[role="button"] { margin-bottom: 0; } /* ═══ Round 32 (2026-08-11) — Edit Role "Role Details" / "Functions" headers now match Edit User's "Basic information" / "Access" headers exactly in color: title `#2D2F8C`, chevron `--brand-text` (the same token the "Back to Users"/"Back to Roles" link already uses), reusing the exact literal values Round 26/30 established for `#auBasicCard`/`#auRolesCard` rather than approximating them. Round 28 had reverted an earlier color pass per an explicit "preserve all existing text colors" spec; this is a deliberate, later, more specific request that supersedes that reversion — see the task's "match Edit User exactly" requirement. Scoped to `#createRolePage.is-edit-mode` only (set/cleared in `showEditRole()`/`showCreateRole()`/`hideCreateRole()` in app.js) so Create Role's own header keeps the Gray/800 resting color from the un-scoped rule above, untouched — this pass is Edit-Role-only. The nested per-application "Core Planning" header uses its own separate `.cr-app-title`/`.cr-app-head-chev` classes (not `.cr-section- title`/`.cr-section-chev`), so it is structurally unreachable by these selectors and needs no exclusion. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode #crBasicCard .cr-section-header[role="button"] .cr-section-title, html[data-iam-version="v4"] #createRolePage.is-edit-mode #crFuncsCard .cr-section-header[role="button"] .cr-section-title { color: #2D2F8C; } html[data-iam-version="v4"] #createRolePage.is-edit-mode #crBasicCard .cr-section-header[role="button"] .cr-section-chev, html[data-iam-version="v4"] #createRolePage.is-edit-mode #crFuncsCard .cr-section-header[role="button"] .cr-section-chev { color: var(--brand-text); } /* Round 33 (2026-08-11): Functions' own chevron pinned to the exact literal `#4045C2` (which `--brand-text` already resolves to above — this makes it explicit/guaranteed rather than incidental, per a spec asking for this exact hex on this specific chevron). Higher specificity than the shared rule directly above via the repeated `#crFuncsCard`, so it wins for Functions only; Role Details keeps the token-based color, unaffected. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode #crFuncsCard .cr-section-header[role="button"] .cr-section-chev { color: #4045C2; } /* Edit User's equivalent header keeps its default visible keyboard- focus outline (the shared `[data-cr-toggle]:focus-visible` / `[data-au-toggle]:focus-visible` rule near the top of this file) — restore that same visible affordance here, undoing the `outline: 0` the un-scoped `#createRolePage` rule above applies for Create Role. Higher specificity (`.is-edit-mode` added) wins over that rule without needing to touch Create Role's. */ html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-section-header[role="button"]:focus-visible { outline: 2px solid var(--indigo-50); outline-offset: 2px; box-shadow: none; } /* Field labels ("Role Name", "Description", "Select applications") — Figma's Input component "Label and Required" slot is Open Sans SemiBold 12px/18px in `field-description/state/default/text` (#3b4347 ≈ `--iam-ads-text-secondary`), the exact same token this codebase already verified for Add/Edit User's `.au-label` — Create Role's `.cr-label` had never been migrated off the older 14px/600 `--iam-ads-text` treatment that still correctly serves the filter drawer's unrelated `.flt-label`. Required marker matches the already-published Ads DS validation red (`--ads-red-400`). */ html[data-iam-version="v4"] #createRolePage .cr-label { color: var(--iam-ads-text-secondary); font-size: 12px; line-height: 18px; font-weight: 500; } html[data-iam-version="v4"] #createRolePage .cr-req { color: var(--ads-red-400); } /* Application-group headings ("Core Planning", "Identity and Access Management", …) and their chevrons — same Gray/800 resting-state correction as the card-level headings above (Figma's "Core Planning" instance is `text-color/gray/800`, and its chevron samples to the same RGB as the Role Details chevron). The prior "calmer visual weight" brand-indigo treatment is replaced with the Figma-verified neutral tone; hover still shifts to brand indigo so the row keeps an obvious interactive affordance. */ html[data-iam-version="v4"] #createRolePage .cr-app-section--matrix .cr-app-title, html[data-iam-version="v4"] #createRolePage .cr-app-section--matrix .cr-app-head-chev { color: var(--iam-ads-text); } html[data-iam-version="v4"] #createRolePage .cr-app-section-head:hover .cr-app-title, html[data-iam-version="v4"] #createRolePage .cr-app-section-head:hover .cr-app-head-chev, html[data-iam-version="v4"] #createRolePage .cr-app-section-head:focus-visible .cr-app-title, html[data-iam-version="v4"] #createRolePage .cr-app-section-head:focus-visible .cr-app-head-chev { color: var(--iam-ads-brand); } /* "Remove application" — final-QA pass (2026-08-11, Remove Application modal rebuild): reverted to the compact ADS ghost/text-only control this button is separately approved to use — no default border, no trash icon, right-aligned in its application header. A prior round had bordered/icon-ed this into a `variant=tertiary, type=text+icon` treatment (Figma 7722:252's demo cell — the same generic-icon showcase pattern documented on the "View access breakdown" button elsewhere in this file), which read as an oversized outline button and is exactly what this pass reverts. Removing this ID-scoped override lets `.cr-app-remove` fall through to the shared 26px compact-ghost contract (`html[data-iam-version="v4"] .cr-app-remove` further up this file, alongside "Remove Role" / "Remove" table actions): height 26px, padding 4/8, radius 6, transparent at rest, `rgba(15,18,20,.05)` hover / `.10` active — no border in any state. The trash icon was also removed from this button's markup in app.js (renderCrAppSection) so there is no icon left to size here. Round 28 (2026-08-11 — Edit Role nested-header QA): this 26px ghost contract still applies everywhere this button is used EXCEPT Edit Role's per-application "Remove application" (Create Role's own accordion + Add User's `.au-role-card` "Remove" both keep it as-is). In Edit Role only, `buildAppSectionHtml` (app.js) now also adds the `.btn-std` class to that one button, which — via the higher-specificity, `!important` `button:is(.btn-std, …)` rule above — reuses the existing ADS compact outlined/secondary button component (36px, bordered, 6px radius) instead. That rule's `color: #4045c2` is the exact same indigo `.cr-app-remove` already used, so the label's text color is unchanged; only the border/ background/height/padding/radius are new. */ @media (max-width: 900px) { .sim-excel-window { width: 100%; height: 100%; border-radius: 0; } .sim-excel-ribbon-tools { display: none; } } /* Round 33 (2026-08-11) — Edit Role nested application headers on narrow screens: below 640px there usually isn't enough row width for "[chevron] Application name" plus "Remove application" without crushing the name down to 2-3 characters (`text-overflow: ellipsis` still prevents overlap, but an unreadable name isn't "preserving the application name and toggle relationship" per the brief). Wrap the row so "Remove application" drops to its own line, flush with the chevron+name line's left edge, while the chevron stays immediately before the name on the line above — the toggle target is still the whole `.cr-app-section-head` row (both lines), so clicking either line still expands/collapses. Create Role is unaffected (its own accordion never had this crowding issue at the same breakpoint threshold; scoping to `.is-edit-mode` keeps this change isolated to Edit Role's now-wider chevron hit area). */ @media (max-width: 640px) { html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-section-head { flex-wrap: wrap; row-gap: 8px; } html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-title { flex-basis: calc(100% - 40px); } html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-app-section--matrix .cr-app-remove { order: 3; margin-left: 40px; } } /* ═══════════════════════════════════════════════════════════════════ Round 39 (2026-08-12) — Access Management card: ONE shared content inset for every row of the card. Symptom: the Filter button visibly protruded to the left of both the "Users" tab label above it and the table content below it, on every tab. Cause: the tab row and the toolbar were each given a 16px inset (see the "Final-QA correction, Figma node 1003:17823" comment on `.tabs-row` earlier in this file, whose stated goal was exactly "one consistent left content-edge") — but the ADS Primary Tab component carries its own 16px `padding-x` around its label. So the tab's outer box started at 16px while its LABEL — the thing you actually see and align to — started at 32px, leaving the toolbar's controls 16px further left than everything else in the card. The Users table had independently arrived at the correct edge (its Select column's own 32px padding), which is why the checkbox looked right while Filter looked wrong. Fix: name the content edge once, as a custom property on the card, and have every row derive its own start padding from it: ┌─ --iam-card-content-inset ───────────────────────────────── │ Users Roles Teams ← tab LABEL, not its padded box │ [Filter] [Internal|External] [Search] │ [checkbox column] / [Role] │ Show 10 … ← pagination └──────────────────────────────────────────────────────────── The tabs row is the one row that must subtract the tab component's own padding (`--iam-tab-inline-pad`) so the LABEL, not the tab's outer box, lands on the shared edge. That expression resolves to the 16px the row already had, so the tabs themselves do not move a pixel. Only the START edge is governed here. The card's rows deliberately do NOT share a single `padding-inline`: the table is full-bleed to the card's right edge, while Users' Region column is anchored to "Add User"'s left edge (see `align()` in app.js). Making the right gutter symmetric would therefore drag Region, Create Date, Export, Add User and Create Role 16px inward — movement this pass is explicitly not meant to cause. Every existing right-hand gutter is left untouched. No negative margins, no transforms, no absolute positioning and no per-panel offsets are involved: Users, Roles and Teams all read the same property, so their toolbars cannot drift apart. This also replaces the JS-written per-panel margins that Rounds 34/35 used (removed in Round 38 — see `align()` in app.js). ═══════════════════════════════════════════════════════════════════ */ html[data-iam-version="v4"] .v4-card { /* Where the card's content starts, measured from the card's inner edge. 32px = the ADS 8pt-grid step the tab labels already sat on. */ --iam-card-content-inset: 32px; /* The ADS Primary Tab component's own horizontal padding — held at 16px for every viewport by the "R57C authoritative Tabs" layer above (`.ads-tabs .ads-tab { padding: 8px 16px 0 !important }`). Declared here only so the tabs row can subtract it below. */ --iam-tab-inline-pad: 16px; } /* Tab row — subtracts the tab's own padding so the LABEL lands on the shared edge. Resolves to the row's existing 16px: tabs don't move. */ html[data-iam-version="v4"] .v4-card .tabs-row { padding-inline-start: calc(var(--iam-card-content-inset) - var(--iam-tab-inline-pad)); } /* Toolbar row (all three tabs) + pagination footer. The toolbar's left group keeps its own internal 12px gaps and moves as one unit — the Filter button gets no offset of its own, so Filter → segmented control → search spacing is unchanged. */ html[data-iam-version="v4"] .v4-card .tbar, html[data-iam-version="v4"] .v4-card .pgn { padding-inline-start: var(--iam-card-content-inset); } /* First table column. The table itself stays full-bleed (its rows, hover wash and hairlines still span the whole card, and column widths are untouched); it's the first column's own content padding — shared by its header and every body cell, so they can never drift apart — that puts the first interactive control on the shared edge. Users' Select column already used exactly this 32px; Roles/Teams' first column carried a legacy 28px, now 4px further right and on the line with everything else. `!important` only to beat those legacy rules' own `!important`; Teams' also needs `#teamsPanel` to out-specify the ID its legacy rule is scoped with. */ html[data-iam-version="v4"] .v4-card #usersTable th.c-sel, html[data-iam-version="v4"] .v4-card #usersTable td.c-sel, html[data-iam-version="v4"] .v4-card .rp-tbl th.rp-role, html[data-iam-version="v4"] .v4-card .rp-tbl td.rp-role, html[data-iam-version="v4"] .v4-card #teamsPanel .tm-tbl th.tm-th-name, html[data-iam-version="v4"] .v4-card #teamsPanel .tm-tbl td.tm-cell-name { padding-left: var(--iam-card-content-inset) !important; } /* Narrow screens: the card's own gutters tighten, so the shared inset tightens with them and every row stays on one edge. 16px is the value the tab labels already render at here (the tabs row drops to 0 and the tab component's 16px padding provides the whole inset), so — as above — the tabs stay exactly where they are while the toolbar and footer come into line with them. */ @media (max-width: 768px) { html[data-iam-version="v4"] .v4-card { --iam-card-content-inset: 16px; } } /* ═══════════════════════════════════════════════════════════════════ Final-QA pass (2026-08-12) — tab row on very narrow viewports. The base stylesheet already handles a tab row too narrow to hold Users/Roles/Teams on one line: at <=767px it sets `.tabs-row` to `height: auto` and lets `.tabs-row nav` wrap. The ADS Primary Tabs rules further up this file then restate a fixed `height: 56px` on the row and `height: 39px` on the nav at a much higher specificity (`html[data-iam-version="v4"] .v4-card ...`), which wins everywhere — including inside that media query. The wrap still happened, but the row could not grow to contain the second line, so "Teams" rendered on top of the toolbar beneath it. Restating the intent at the same specificity: keep 56px/39px as the MINIMUM (so the single-line case is pixel-identical to before) and let the box grow when a second line appears. The query stops below 430px — the narrowest viewport where the three tabs still fit on one line — so every wider viewport, including all supported breakpoints from 1024px up, resolves to exactly the same geometry as before. */ @media (max-width: 429px) { html[data-iam-version="v4"] .v4-card .tabs-row { height: auto; min-height: 56px; } html[data-iam-version="v4"] .v4-card .tabs-row nav { height: auto; min-height: 39px; flex-wrap: wrap; row-gap: 4px; } } /* ═══════════════════════════════════════════════════════════════════ Compact desktop toolbar (769–1100px viewport). This deliberately uses one shared viewport breakpoint rather than a card container query. V4.1's fixed/collapsible product sidebar means the list card is already narrower than 1100px at the 1280 Redline preset; a 1100px card query would therefore leave both 1024 and 1280 in the compact state and make the named QA presets indistinguishable. The viewport query gives the live 1024px Redline document the compact treatment and restores the established full-label desktop controls immediately above 1100px, without any JavaScript width checks. Mobile behavior below 769px remains owned by the existing narrow-screen rules. Compact desktop itself is always one flex row: the search is the only shrinking control, while the left and right action groups retain ADS-sized hit targets and normal document/tab order. */ @media (min-width: 769px) and (max-width: 1100px) { html[data-iam-version="v4"] .v4-card #usersPanel .tbar, html[data-iam-version="v4"] .v4-card #rolesPanel .tbar, html[data-iam-version="v4"] .v4-card #teamsPanel .tbar { display: flex; flex-wrap: nowrap; align-items: center; height: 68px; min-height: 68px; column-gap: 12px; row-gap: 0; } html[data-iam-version="v4"] .v4-card #usersPanel .tbar-l, html[data-iam-version="v4"] .v4-card #rolesPanel .tbar-l, html[data-iam-version="v4"] .v4-card #teamsPanel .tbar-l { flex: 1 1 auto; min-width: 0; max-width: none; flex-wrap: nowrap; gap: 8px; } html[data-iam-version="v4"] .v4-card #usersPanel .tbar-r, html[data-iam-version="v4"] .v4-card #rolesPanel .tbar-r { align-self: center; flex: 0 0 auto; gap: 8px; } html[data-iam-version="v4"] .v4-card .tbar .ads-search { width: auto; min-width: 140px; max-width: 280px; flex: 1 1 220px; } html[data-iam-version="v4"] .v4-card #rolesPanel .tbar .ads-search, html[data-iam-version="v4"] .v4-card #teamsPanel .tbar .ads-search { min-width: 180px; max-width: 320px; flex-basis: 280px; } /* The SVG is the existing ADS search glyph; compact mode makes its visible presence explicit while retaining the same input and logic. */ html[data-iam-version="v4"] .v4-card .tbar .ads-search .search-ico { display: block; } html[data-iam-version="v4"] .v4-card .tbar .toolbar-action-label { display: none; } html[data-iam-version="v4"] .v4-card .tbar #usersExportBtn, html[data-iam-version="v4"] .v4-card .tbar #usersAddBtn, html[data-iam-version="v4"] .v4-card .tbar #rolesCreateBtn { box-sizing: border-box; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; gap: 0; flex: 0 0 36px; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ Compact desktop detail pages — Edit User / Edit Role / Edit Team. Compact desktop uses the same 769–1100px viewport contract as the list toolbar above. The same grid is also retained on wider supported desktop widths because it is geometrically equivalent to the established Figma row there and prevents the older <=1199px rule from creating a one-pixel discontinuity at 1101px. Mobile below 769px keeps its existing fallback. The markup already has the right semantic shape (back navigation, title/subtitle block, action group). */ @media (min-width: 769px) { html[data-iam-version="v4"] #addUsersPage .au-header, html[data-iam-version="v4"] #editTeamPage .au-header, html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-header { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: start; column-gap: 24px; row-gap: 0; flex-wrap: nowrap; } html[data-iam-version="v4"] #addUsersPage .au-header-left, html[data-iam-version="v4"] #editTeamPage .au-header-left, html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-header-left { min-width: 0; } html[data-iam-version="v4"] #addUsersPage .au-header-actions, html[data-iam-version="v4"] #editTeamPage .au-header-actions, html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-header-actions { width: auto; min-width: max-content; margin-top: 1px; padding-top: 0; justify-self: end; align-self: start; justify-content: flex-end; flex-wrap: nowrap; } html[data-iam-version="v4"] #addUsersPage .au-header-actions > *, html[data-iam-version="v4"] #editTeamPage .au-header-actions > *, html[data-iam-version="v4"] #createRolePage.is-edit-mode .cr-header-actions > * { flex-shrink: 0; } } /* Edit Role Functions matrix containment. The page and section hierarchy stay fixed while only this region scrolls horizontally. Each table's minimum width is derived from its real action-column count (240px Functions + 136px per action), avoiding needless scrollbars for small matrices while preserving stable labels and checkbox columns. */ html[data-iam-version="v4"] .au-page, html[data-iam-version="v4"] .cr-page { overflow-x: hidden; } html[data-iam-version="v4"] #createRolePage .cr-perms-content, html[data-iam-version="v4"] #createRolePage .cr-app-section--matrix, html[data-iam-version="v4"] #createRolePage .cr-app-section-body { min-width: 0; max-width: 100%; } html[data-iam-version="v4"] #createRolePage .cr-app-section--matrix, html[data-iam-version="v4"] #createRolePage .cr-app-body { overflow-x: hidden; } html[data-iam-version="v4"] #createRolePage .cr-matrix-scroll { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } html[data-iam-version="v4"] #createRolePage .cr-matrix-scroll:focus-visible { outline: 2px solid var(--brand-focus-ring); outline-offset: 2px; border-radius: 4px; } html[data-iam-version="v4"] #createRolePage .cr-matrix { --cr-matrix-min-width: 376px; width: max(100%, var(--cr-matrix-min-width)); min-width: var(--cr-matrix-min-width); } html[data-iam-version="v4"] #createRolePage .cr-matrix[data-action-count="2"] { --cr-matrix-min-width: 512px; } html[data-iam-version="v4"] #createRolePage .cr-matrix[data-action-count="3"] { --cr-matrix-min-width: 648px; } html[data-iam-version="v4"] #createRolePage .cr-matrix[data-action-count="4"] { --cr-matrix-min-width: 784px; } html[data-iam-version="v4"] #createRolePage .cr-matrix[data-action-count="5"] { --cr-matrix-min-width: 920px; } /* Compact-only sticky Functions column. It remains one real table cell (no duplicate assistive-technology content), paints an opaque surface, and carries a subtle divider over horizontally moving checkbox cells. */ @media (min-width: 769px) and (max-width: 1100px) { html[data-iam-version="v4"] #createRolePage .cr-matrix-scroll .cr-matrix-th-fn, html[data-iam-version="v4"] #createRolePage .cr-matrix-scroll .cr-matrix-fn { position: sticky; left: 0; z-index: 2; background: var(--bg-surface); box-shadow: 1px 0 0 var(--border-default); } html[data-iam-version="v4"] #createRolePage .cr-matrix-scroll .cr-matrix-th-fn { z-index: 3; } } /* IAM page offset next to the shared Finance `.vnav` rail. Rail chrome lives in vnav.css. These rules only keep IAM content (Users / Roles / Teams and the Add/Edit surfaces) clear of that rail — they do not restyle the navigation. */ html[data-iam-version="v4"] main.page { padding-left: calc(var(--sidebar-width) + 48px); padding-right: 48px; max-width: none; margin: 0; transition: padding-left 220ms ease-out; } html[data-iam-version="v4"] .au-page, html[data-iam-version="v4"] .cr-page { top: 56px; left: var(--sidebar-width); padding-left: 0; padding-right: 0; transition: left 220ms ease-out; } @media (prefers-reduced-motion: reduce) { html[data-iam-version="v4"] main.page, html[data-iam-version="v4"] .au-page, html[data-iam-version="v4"] .cr-page { transition: none; } }