/* * Tops Design System - Global MudBlazor overrides. * Purpose: apply shared Figma-aligned defaults to raw Mud components until wrappers are fully adopted. * Scope: Helper + Admin via tops-design-system.css import. */ :root { /* Stroke chevron mask for MudSelect / MudAutocomplete (Figma 1331-509). Black strokes paint via background-color + mask so state tokens control the glyph color. */ --tops-input-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 10 12 14.5 16.5 10' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Mud vars mapped to tops tokens for broad component consistency */ --mud-default-borderradius: var(--tops-card-radius); --mud-palette-background: var(--tops-background); --mud-palette-surface: var(--tops-surface); --mud-palette-text-primary: var(--tops-text-primary); --mud-palette-text-secondary: var(--tops-text-secondary); --mud-palette-lines-default: var(--tops-divider); --mud-palette-lines-inputs: var(--tops-input-border-default); --mud-typography-default-family: var(--tops-body-font); } html, body { max-width: 100%; overflow-x: hidden; } /* overflow-x: hidden on html/body breaks position: sticky; clip does not. */ html:has(.helper-layout), body:has(.helper-layout) { overflow-x: clip; } /* Typography baseline */ .mud-typography, .mud-button-root, .mud-input-slot, .mud-table, .mud-alert, .mud-chip, .mud-snackbar, .mud-tooltip { font-family: var(--tops-body-font); } .mud-typography-h1 { font-size: var(--tops-h1-size); font-weight: var(--tops-h1-weight); letter-spacing: var(--tops-h1-spacing); line-height: var(--tops-h1-line); } .mud-typography-h2 { font-size: var(--tops-h2-size); font-weight: var(--tops-h2-weight); letter-spacing: var(--tops-h2-spacing); line-height: var(--tops-h2-line); } .mud-typography-h3 { font-size: var(--tops-h3-size); font-weight: var(--tops-h3-weight); letter-spacing: var(--tops-h3-spacing); line-height: var(--tops-h3-line); } .mud-typography-body1 { font-size: var(--tops-body-size); font-weight: var(--tops-body-weight); letter-spacing: var(--tops-body-spacing); line-height: var(--tops-body-line); } .mud-typography-body2, .mud-typography-subtitle1 { font-size: var(--tops-body-size); letter-spacing: var(--tops-body-spacing); line-height: var(--tops-body-line); } /* MudBlazor's .mud-typography-overline sets text-transform from an undefined MudBlazor CSS variable (--mud-typography-overline-text-transform), which resolves to inherited/normal case. This file always loads after MudBlazor.min.css (see index.html link order), so it reliably wins the cascade for any element that needs true uppercase overline styling. */ .workspace-contact-section__label { text-transform: uppercase; font-weight: var(--font-weight-bold); } /* Section title for the generic/positioned Helper workspace fallback (forms without an authored Helper Layout published in Forms Studio) — matches the authored Helper Layout's section title styling (FormPlatformWorkspaceFieldColumn.razor.css) so both paths render identically. Global for the same reason as .workspace-contact-section__label above: this element also carries MudBlazor's .mud-typography-subtitle2 class. */ /* Authored Helper Layout section card (HelperLayoutRenderer output) — same bordered-card treatment as .authored-section-plain (the generic/positioned fallback), so both paths look identical. Deliberately global with a doubled class for specificity (0,2,0) rather than living in FormPlatformWorkspaceFieldColumn.razor.css's component-scoped bundle: that bundle is imported early (via AdamsTax.Helper.styles.css) using a fingerprint repeatedly observed stale relative to the live source, serving HelperLayoutRenderer.razor.css's original mud-palette-based rule instead. The doubled class here reliably beats that stale rule's [b-xxx] attribute specificity without depending on load order or scope-hash matching. */ .authored-layout-section.authored-layout-section { margin-bottom: 0 !important; /* !important on every property here, including padding: the stale early-bundle copy of HelperLayoutRenderer.razor.css's original rule (padding: 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius)) keeps winning at matched (0,2,0) specificity — observed concretely: padding stayed 16px (should be 0, letting the right panel's fields sit flush) until !important was added here too. Pinned defensively until the underlying stale-fingerprint-import issue is fixed at its root (see comment in FormPlatformWorkspaceFieldColumn.razor.css). */ padding: 0 !important; border: var(--workspace-editor-border-width) solid var(--tops-card-border) !important; /* Square — this is an inner content box, not one of the left/right panel's own outer corners (those live on .form-platform-editor-paper, the shared outer wrapper). */ border-radius: 0 !important; background: var(--tops-card-bg) !important; overflow: hidden; } .authored-layout-section-field-grid.authored-layout-section-field-grid, .authored-layout-grid-canvas.authored-layout-grid-canvas, .authored-layout-row-grid.authored-layout-row-grid { /* Gap width matches --workspace-editor-border-width (this section's own border thickness) + this background color, revealed only in that gap (each field's own opaque background covers everything else) — draws a single-thickness line between adjacent fields instead of two stacked per-field borders meeting at the same seam. No gap (and so no line) at the grid's own outer edge, where the section's own single border is already the only line. */ gap: var(--workspace-editor-border-width) !important; background: var(--tops-card-border) !important; padding: 0 !important; margin: 0 !important; /* Stretch every cell in a grid row to the tallest cell's height (default grid cross-axis alignment is "start", which lets shorter fields stay short). */ align-items: stretch !important; } .authored-layout-cell.authored-layout-cell { padding: 0; /* A stretched grid cell only grows the cell box itself; its own child (the field container) is still a block element sized to its content unless the cell also becomes a flex container, which stretches that child to fill the cell by default. */ display: flex; } /* Generic/positioned-layout fallback's field grid needs the same row-height-matching treatment as the authored layout above, so both rendering paths behave identically. */ .form-platform-generic-section-grid.form-platform-generic-section-grid { align-items: stretch !important; } .form-platform-generic-field-cell.form-platform-generic-field-cell { display: flex; } /* Field card fills the full height of its (now-stretched) grid cell; extra height on a shorter field just becomes blank space below its content, matching the tallest sibling in the same row rather than each field sizing to its own content only. */ .form-platform-field-container.form-platform-field-container { flex: 1 1 auto; display: flex; flex-direction: column; box-sizing: border-box; /* Square — inner content box, not one of the left/right panel's own outer corners. */ border-radius: 0; } .authored-layout-section > .mud-typography-subtitle1 { font-family: var(--tops-body-font); font-size: var(--tops-body-sm-size); font-weight: var(--tops-body-sm-heavy-weight); letter-spacing: 0.06em; line-height: var(--tops-body-sm-line); text-transform: uppercase; /* Light-blue bg / dark-blue text — Design Library's canonical "info bar" pairing (matches --tops-table-header-bg/-color: brand-100 background, brand-600 text). */ color: var(--tops-brand-600); margin: 0; padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem); background: var(--tops-brand-100); border-bottom: var(--workspace-editor-border-width) solid var(--tops-card-border); } .authored-section-plain__title { display: block; font-family: var(--tops-body-font); font-size: var(--tops-body-sm-size); font-weight: var(--tops-body-sm-heavy-weight); letter-spacing: 0.06em; line-height: var(--tops-body-sm-line); text-transform: uppercase; /* Light-blue bg / dark-blue text — Design Library's canonical "info bar" pairing (matches --tops-table-header-bg/-color: brand-100 background, brand-600 text). */ color: var(--tops-brand-600); margin: 0; padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem); background: var(--tops-brand-100); border-bottom: var(--workspace-editor-border-width) solid var(--tops-card-border); } /* Individual IRS field card — Design Library card border token (--tops-card-border), applied per field per request. Lives here (global), not in a page-scoped .razor.css, since FormPlatformEditorPage.razor (Add) has no scoped CSS file of its own — kept global so both Add and Edit render identically. */ /* No border on the field itself — see .authored-layout-section-field-grid / .form-platform-generic-section-grid below for how the shared 1px lines between adjacent fields are drawn (a single background color revealed through a 1px grid gap), so touching fields show one consistent-thickness line, never two stacked borders at the same seam. */ /* Customer fill: the section bar and the space between field cards are white. Doubled classes beat a stale scoped bundle that still paints the bar brand-100 and lets the page canvas show through the grid gap. */ .resolved-layout.resolved-layout, .resolved-layout__section-title.resolved-layout__section-title, .form-boxes-section-title.form-boxes-section-title, .resolved-layout__grid.resolved-layout__grid, .resolved-layout__cell.resolved-layout__cell, .form-editor-field-column.form-editor-field-column, .form-editor-field-column__content.form-editor-field-column__content { background: var(--tops-card-bg); } /* Presence mark sits beside the box number. Global so it stays visible when the scoped bundle fingerprint is stale. Required uses the error red. */ .form-platform-field-required-marker.form-platform-field-required-marker, .form-platform-field-optional-marker.form-platform-field-optional-marker { display: inline-block; font-size: 1rem; font-weight: 700; line-height: 1; } .form-platform-field-required-marker.form-platform-field-required-marker { color: var(--tops-error); } .form-platform-field-optional-marker.form-platform-field-optional-marker { color: var(--tops-gray-600); } /* Help icon is a MudIconButton, so the field editor's scoped rule never matches it. */ .form-platform-field-label-row__tooltip .mud-icon-button.mud-icon-button { color: var(--tops-brand-700); width: 1.5rem; height: 1.5rem; min-width: 1.5rem; padding: 0; } .form-platform-field-label-row__tooltip .mud-icon-root { font-size: 1.125rem; color: var(--tops-brand-700); } .form-platform-field-container { /* border-radius intentionally omitted — the doubled-class rule above (.form-platform-field-container.form-platform-field-container) always wins specificity and squares this corner (border-radius: 0) per the Design Library decision to square all IRS field cards; a border-radius here would be dead. */ padding: var(--spacing-2, 0.5rem); scroll-margin-top: 72px; background: var(--tops-card-bg); /* Without this, a flex child's default min-width is "auto" — it won't shrink below its content's natural (unwrapped) width. For a narrow single-column field (e.g. a 1-column-wide State field whose label text alone needs more room than that), the field container was overflowing its own grid cell by tens of pixels rather than letting the label text wrap, spilling straight over the shared border/gap and the next field entirely, which is why no border was visible between fields like Payer State and Payer Postal Code. */ min-width: 0; } .form-platform-field-container-compact { padding: var(--spacing-1, 0.25rem); } /* Currency + badge fields: right-align the $ prefix with the badge above it instead of left-aligning it at the start of the (already-indented) input area. Global (not in FormPlatformWorkspaceFieldEditor.razor.css, which owns .form-platform-field- control-column--indented) because .tops-currency-input is rendered by a different component (FormPlatformFieldRenderer) — a descendant selector reaching across that component boundary from a scoped stylesheet never matches (each component's scoped CSS only applies its own scope attribute to elements it itself renders). The outer column's own padding-left is removed here and recreated inside the currency input's own grid instead (1.25rem prefix column + the same gap), so the input box still starts at the exact same x-position as the label text (unchanged) — but the $ character, right-aligned within that 1.25rem-wide prefix column, now ends at the same x-position as the badge's own right edge, directly above it. (Without removing the outer padding-left here, the badge-width offset would be applied twice — once by this padding, once by the prefix column below — pushing the $ well past the badge instead of aligning with it.) */ .form-platform-field-control-column--indented:has(.tops-currency-input:not(.tops-currency-input--inset)) { padding-left: 0 !important; } .form-platform-field-control-column--indented .tops-currency-input:not(.tops-currency-input--inset).tops-currency-input { grid-template-columns: 1.25rem 1fr; column-gap: var(--spacing-2, 8px); } .form-platform-field-control-column--indented .tops-currency-input:not(.tops-currency-input--inset) .tops-currency-input__prefix.tops-currency-input__prefix { justify-content: flex-end; } /* Helper workspace editor only (AT-2753 plan 13): flush IRS box inputs with the badge above. */ .workspace-editor-layout .form-platform-field-control-column--indented { padding-left: 0; } /* MudCheckbox's clickable hit-target padding sits around the checkbox glyph itself, so the glyph renders inset from the control column's own left edge — visually offset from the label text above it even though the column itself is correctly aligned. Pull it back by that same padding so the visible checkbox square lines up with the label text's left edge instead of sitting to the right of it. */ .form-platform-field-control-column .mud-checkbox .mud-button-root { margin-left: -12px; } /* AdamsTaxCheckBox zeroes button margin in the glyph rules above; IRS box rows still need the same left pull so the 14px glyph lines up with the badge and text inputs in the column. */ .form-platform-field-container:has(.form-platform-field-box-badge) .form-platform-field-control-column .adamstax-checkbox .mud-checkbox .mud-button-root.mud-icon-button { margin-left: -12px; } /* Boxed checkbox fields: keep the bordered row flush with the badge; inset the glyph like text inputs. */ .workspace-editor-layout .form-platform-field-container:has(.form-platform-field-box-badge) .form-platform-checkbox-row .adamstax-checkbox { margin-left: var(--spacing-2, 8px); } .workspace-editor-layout .form-platform-field-container:has(.form-platform-field-box-badge) .form-platform-checkbox-row .adamstax-checkbox .mud-checkbox .mud-button-root.mud-icon-button { margin-left: 0; } /* MudMenu's own root renders display: inline-flex (sizes to its content by default), and does not reliably carry the Blazor CSS scope attribute of the component that references it (WorkspaceIssuerPicker.razor, in this case) — a scoped rule there can silently fail to match this element. Global + explicit width, applied via a dedicated class directly on the markup, so this doesn't depend on beating .mud-menu's own specificity or on Blazor's scope attribute reaching this element at all. */ /* MudMenu FullWidth sizes the activator to the card. MudBlazor 9 defaults RelativeWidth to Ignore, which lets the popover grow with long names (observed: card 285px, list 469px, max-width:none). Relative pins the dropdown to the activator so BR-004 wrap can happen. */ .workspace-issuer-picker-menu-full-width, .workspace-recipient-picker-menu-full-width { display: block; width: 100%; box-sizing: border-box; } /* Issuer/Recipient search popovers — transparent host; panel shell owns the shadow. */ .mud-popover.workspace-contact-picker-popover { box-shadow: none !important; border: none !important; background: transparent; overflow: visible; } .mud-popover.workspace-contact-picker-popover .mud-paper { box-shadow: none !important; background: transparent; border: none !important; overflow: visible !important; } .mud-popover.workspace-contact-picker-popover .mud-list { border: none !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } /* Forms delivery pill hover popovers — teleported MudMenu shell; right-align to pill so panel extends left, not over Actions. */ .mud-popover.forms-delivery-pill-popover-mail, .mud-popover.forms-delivery-pill-popover-email { overflow: visible; z-index: var(--mud-zindex-popover); } .mud-popover.forms-delivery-pill-popover-mail .mud-paper, .mud-popover.forms-delivery-pill-popover-email .mud-paper { box-shadow: var(--tops-popover-shadow); border: 1px solid var(--tops-neutral-200); border-radius: var(--spacing-2); background: var(--tops-white, #fff); overflow: visible !important; max-height: min(calc(100vh - 4rem), 40rem); } .mud-popover.forms-delivery-pill-popover-mail .mud-list, .mud-popover.forms-delivery-pill-popover-email .mud-list { padding: 0 !important; background: transparent !important; max-height: none !important; overflow: visible !important; } /* Activator fills the bled MudMenu root; card/empty-card stay inset to section content. */ .workspace-issuer-picker__section-activator, .workspace-recipient-picker__section-activator { display: block; width: 100%; margin: 0; padding: 0; border: none; background: transparent; text-align: left; cursor: default; box-sizing: border-box; } .workspace-issuer-picker__section-activator:focus, .workspace-issuer-picker__section-activator:focus-visible, .workspace-recipient-picker__section-activator:focus, .workspace-recipient-picker__section-activator:focus-visible { outline: none; } .workspace-issuer-picker__section-activator:disabled, .workspace-recipient-picker__section-activator:disabled { cursor: default; } /* Design Library card frame on Issuer/Recipient cards: unfocused = --tops-card-border (light gray); focused = --tops-input-border (brand-600). Stroke width stays constant (2× input stroke) — only color changes on focus. Top corners use --tops-card-radius to mirror the readonly grid's bottom corners. */ .workspace-issuer-card { border: calc(var(--tops-input-stroke-width) * 2) solid var(--tops-card-border); border-radius: var(--tops-card-radius); background: var(--tops-white); transition: border-color 0.15s ease; } /* Name + caret row. Picker markup is a child component, so this cannot live only in FormEditorContactColumn.razor.css — scoped isolation would miss it and the gray left-panel canvas would show through. Read-only fields below stay --tops-gray-100. Top radii inherit from the card so this square header fill does not cover the inner curve of the card's 2px rounded outline (gray idle / blue focus). */ .workspace-issuer-card__header, .workspace-issuer-picker__card-header, .workspace-recipient-picker__card-header { background: var(--tops-white); border-top-left-radius: inherit; border-top-right-radius: inherit; } .workspace-contact-block:focus .workspace-issuer-card, .workspace-issuer-picker--open .workspace-issuer-card, .workspace-recipient-picker--open .workspace-issuer-card { border-color: var(--tops-input-border); border-width: calc(var(--tops-input-stroke-width) * 2); } .workspace-contact-block { outline: none; } /* Caret is a nested button — do not use :focus-within (the search field is portaled and would drop the border). --open keeps the active blue border while the search list is visible. */ .workspace-contact-block:focus .workspace-contact-readonly-fields, .workspace-contact-block:has(.workspace-issuer-picker--open) .workspace-contact-readonly-fields, .workspace-contact-block:has(.workspace-recipient-picker--open) .workspace-contact-readonly-fields { border-color: var(--tops-input-border); } /* Open picker: drop bottom edge so the card joins the search panel. */ .workspace-issuer-picker--open .workspace-issuer-card, .workspace-recipient-picker--open .workspace-issuer-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } .workspace-contact-empty-card:focus, .workspace-contact-empty-card:focus-visible { outline: none; } .workspace-issuer-picker--open .workspace-contact-empty-card, .workspace-recipient-picker--open .workspace-contact-empty-card, .workspace-contact-empty-card:focus-visible { border-style: solid; border-color: var(--tops-input-border); border-width: calc(var(--tops-input-stroke-width) * 3); } /* While any Issuer or Recipient field has an error (FormEditorContactColumn adds the error class to the block), the card — picker, empty and read-only shapes — takes the error border and background, and its name row gets a red outline too. The cards are drawn by child components, so this must be global; scoped CSS in FormEditorContactColumn would not reach them. Keep this block after every focus, hover and open rule for these cards. The class is repeated three times so the specificity (0,4,0) beats those rules (0,3,0 or lower) whatever the source order. */ .workspace-contact-block--error.workspace-contact-block--error.workspace-contact-block--error .workspace-issuer-card, .workspace-contact-block--error.workspace-contact-block--error.workspace-contact-block--error .workspace-contact-empty-card, .workspace-contact-block--error.workspace-contact-block--error.workspace-contact-block--error .workspace-contact-readonly-fields { border-color: var(--tops-input-border-error); background: var(--tops-input-bg-error); } .workspace-contact-block--error.workspace-contact-block--error.workspace-contact-block--error .workspace-issuer-card__header, .workspace-contact-block--error.workspace-contact-block--error.workspace-contact-block--error .workspace-issuer-picker__card-header, .workspace-contact-block--error.workspace-contact-block--error.workspace-contact-block--error .workspace-recipient-picker__card-header { background: var(--tops-input-bg-error); outline: var(--tops-input-stroke-width) solid var(--tops-input-border-error); outline-offset: calc(var(--tops-input-stroke-width) * -1); } .form-platform-field-readonly { /* Same background as every other field card (IRS or Payer/Recipient) — read-only state is conveyed by the field's own disabled/readonly input styling, not a different card background. */ background: var(--tops-card-bg); } .form-platform-field-invalid { /* Validation errors need their own visible border regardless of the shared-line grid technique above (field-container has no border by default) — an invalid field must stand out on its own, not just show the normal gray grid line. */ border: var(--workspace-editor-border-width) solid var(--tops-error); background: var(--tops-error-bg); } .mud-typography-subtitle1 { font-weight: var(--tops-body-heavy-weight); } .mud-typography-caption { font-size: var(--tops-body-sm-size); letter-spacing: var(--tops-body-sm-spacing); line-height: var(--tops-body-sm-line); } /* Core layout */ .mud-appbar { background-color: var(--tops-brand-700) !important; color: var(--tops-white) !important; min-height: 56px; } .mud-drawer { background-color: var(--tops-brand-700) !important; border-right: 1px solid var(--tops-brand-800); } .mud-navmenu .mud-nav-link { border-radius: var(--tops-nav-item-radius); color: var(--tops-nav-item-color); margin: 2px 8px; padding: 8px 10px; } .mud-navmenu .mud-nav-link:hover, .mud-navmenu .mud-nav-group > .mud-nav-link:hover, .mud-navmenu .mud-nav-group > .mud-collapse-container .mud-nav-link:hover { background-color: var(--tops-nav-item-hover-bg); color: var(--tops-white); } /* Beat MudBlazor .mud-navmenu-default .mud-nav-link.active { color: primary } on the navy drawer */ .mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled), .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: var(--tops-nav-item-active-bg); color: var(--tops-white); font-weight: 600; } .mud-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon, .mud-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--tops-white); } /* Group header row only — nested child links use --tops-nav-item-color below */ .mud-navmenu .mud-nav-group > .mud-nav-link { color: var(--tops-nav-group-color); font-weight: 600; } .mud-navmenu .mud-nav-group > .mud-collapse-container .mud-nav-link { color: var(--tops-nav-item-color); font-weight: 500; } .mud-navmenu .mud-nav-group.mud-nav-group-expanded > .mud-nav-link { background-color: var(--tops-nav-item-hover-bg); } .mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon, .mud-navmenu .mud-nav-group > .mud-nav-link svg { color: var(--tops-nav-group-icon-color); } .mud-navmenu .mud-nav-group > .mud-nav-link:hover .mud-nav-link-expand-icon, .mud-navmenu .mud-nav-group > .mud-nav-link:hover svg, .mud-navmenu .mud-nav-group.mud-nav-group-expanded > .mud-nav-link .mud-nav-link-expand-icon, .mud-navmenu .mud-nav-group.mud-nav-group-expanded > .mud-nav-link svg { color: var(--tops-white); } .mud-drawer .mud-navmenu { max-width: 100%; min-width: 0; overflow-x: hidden; overflow-y: auto; scrollbar-color: var(--tops-drawer-scrollbar-thumb) var(--tops-drawer-scrollbar-track); scrollbar-width: thin; } .mud-drawer .mud-navmenu::-webkit-scrollbar { width: 8px; } .mud-drawer .mud-nav-link { max-width: 100%; min-width: 0; overflow: hidden; } /* * The label is a clipping box so long names truncate with an ellipsis instead of * widening the fixed 260px drawer. That clipping is vertical too, so the line box * must stay taller than the font's glyph extent — MudBlazor's mini-drawer rule * (.mud-drawer-mini .mud-nav-link { line-height: 1 }) applies to this drawer even * while it is expanded and would otherwise shear off descenders (g, y, p). * --line-height-snug (1.44) clears the glyph box and still reads compact. */ .mud-drawer .mud-nav-link .mud-nav-link-text { min-width: 0; flex: 1 1 auto; line-height: var(--line-height-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mud-drawer .mud-navmenu::-webkit-scrollbar-thumb { background-color: var(--tops-drawer-scrollbar-thumb); border-radius: 999px; } .mud-drawer .mud-navmenu::-webkit-scrollbar-track { background-color: var(--tops-drawer-scrollbar-track); } /* * Side nav — collapsed rail, utility footer, logout (Helper + Admin shared NavMenu). * Expanded links use .mud-navmenu rules above; same --tops-nav-* tokens throughout. */ .helper-nav-utility { border-top: 1px solid var(--tops-nav-utility-divider); } .helper-nav-link-external { align-items: center; color: inherit; display: flex; text-decoration: none; } .helper-nav-link-external .mud-nav-link-icon, .helper-nav-link-external .mud-nav-link-text { color: inherit; } .helper-nav-logout-button { border-radius: var(--tops-nav-item-radius); color: var(--tops-nav-item-color) !important; justify-content: flex-start; text-transform: none; } .helper-nav-logout-button:hover { background-color: var(--tops-nav-item-hover-bg); } .helper-nav-rail-item { align-items: center; background: transparent; border: none; border-radius: var(--tops-nav-item-radius); color: var(--tops-nav-group-icon-color); cursor: pointer; display: inline-flex; height: 40px; justify-content: center; text-decoration: none; width: 40px; } .helper-nav-rail-item:hover { background-color: var(--tops-nav-item-hover-bg); color: var(--tops-white); } /* AT-192: the collapsed rail's Customers entry when the signed-in admin holds no customer-service role. It stays visible and locked, matching the expanded AdminRestrictedNavLink, and drops the hover affordance so it does not read as something that will open. */ .helper-nav-rail-item--restricted, .helper-nav-rail-item--restricted:hover { background-color: transparent; color: var(--tops-gray-300); cursor: default; } .helper-nav-rail-item.active-green { background-color: var(--color-brand-green-200); color: var(--color-brand-blue-800); } @media (min-width: 960px) { .mud-layout:not(.helper-layout) .mud-drawer::after { background-color: var(--tops-brand-800); content: ""; height: 100%; pointer-events: none; position: absolute; right: 0; top: 0; width: 2px; } } /* Paper/cards */ .mud-paper { border-radius: var(--tops-card-radius); } .mud-paper.mud-paper-outlined, .mud-paper.mud-elevation-0 { background-color: var(--tops-card-bg); border: 1px solid var(--tops-card-border); } .mud-paper.mud-elevation-1, .mud-paper.mud-elevation-2, .mud-paper.mud-elevation-3 { box-shadow: var(--tops-card-shadow); } /* BEGIN GENERATED-BUTTON-SIZES */ /* Buttons — Medium (default) */ .mud-button-root { border-radius: var(--tops-btn-radius); font-size: var(--tops-btn-font-size); font-weight: var(--tops-btn-font-weight); letter-spacing: var(--tops-btn-letter-spacing); line-height: var(--tops-btn-line-height); min-height: var(--tops-btn-min-height); padding: var(--tops-btn-padding-y) var(--tops-btn-padding-x); text-transform: none; } /* Buttons — Small (filled + outlined) */ .mud-button-root.mud-button-filled-size-small, .mud-button-root.mud-button-outlined-size-small { border-radius: var(--tops-btn-radius-sm); font-size: var(--tops-btn-font-size-sm); height: var(--tops-btn-min-height-sm); line-height: var(--tops-btn-line-height-sm); min-height: var(--tops-btn-min-height-sm); padding-block: 0; padding-inline: var(--tops-btn-padding-x-sm); } /* Buttons — Small (text variant) */ .mud-button-root.mud-button-text-size-small { border-radius: var(--tops-btn-radius); font-size: var(--tops-body-sm-size); line-height: 1.2; min-height: unset; padding: 4px 8px; } /* Buttons — Medium (text variant) */ .mud-button-root.mud-button-text:not(.mud-button-text-size-small):not(.mud-button-text-size-large) { font-size: var(--tops-body-md-size); line-height: 1; min-height: unset; padding: 4px 8px; } /* Buttons — Large (filled + outlined) */ .mud-button-root.mud-button-filled-size-large, .mud-button-root.mud-button-outlined-size-large { border-radius: var(--tops-btn-radius-md); font-size: var(--tops-btn-font-size-lg); line-height: var(--tops-btn-line-height-lg); min-height: var(--tops-btn-min-height-lg); padding: var(--tops-btn-padding-y-lg) var(--tops-btn-padding-x-lg); } /* Buttons — Large (text variant) */ .mud-button-root.mud-button-text-size-large { border-radius: var(--tops-btn-radius); font-size: var(--tops-btn-font-size-xl); line-height: 1; min-height: unset; padding: 8px 16px; } /* Buttons — ExtraLarge (MudBlazor has no XL Size; applied via btn-size-xl class on Large) */ .mud-button-root.mud-button-filled-size-large.btn-size-xl, .mud-button-root.mud-button-outlined-size-large.btn-size-xl { border-radius: var(--tops-btn-radius-md); font-size: var(--tops-btn-font-size-xl); line-height: var(--tops-btn-line-height-xl); min-height: var(--tops-btn-min-height-xl); padding: var(--tops-btn-padding-y-lg) var(--tops-btn-padding-x-lg); } /* END GENERATED-BUTTON-SIZES */ /* Filled buttons. Default maps to Primary: the Design Library 3.0 has no neutral-grey filled button, so a MudButton with Color.Default (developer omission) still reads as the navy primary action. */ .mud-button-filled.mud-button-filled-primary, .mud-button-filled.mud-button-filled-default { background-color: var(--tops-btn-primary-bg); color: var(--tops-btn-primary-color); /* Crop hover/ripple to the button radius (no rectangular halo outside). */ overflow: hidden; } .mud-button-filled.mud-button-filled-primary:hover, .mud-button-filled.mud-button-filled-default:hover { background-color: var(--tops-btn-primary-hover-bg); } .mud-button-filled.mud-button-filled-primary:active, .mud-button-filled.mud-button-filled-default:active { background-color: var(--tops-btn-primary-active-bg); } /* Outlined buttons. Default maps to the secondary (navy outline) treatment unless NeutralOutlinedButton applies .tops-neutral-outlined-btn. */ .mud-button-outlined.mud-button-outlined-primary, .mud-button-outlined.mud-button-outlined-default { background-color: var(--tops-btn-secondary-bg); border-color: var(--tops-btn-secondary-border); color: var(--tops-btn-secondary-color); } /* Table row Actions — AC says Stormy Grey 100, but that token is the wrong shade. Use --color-misty-grey-400 for the border per design. */ .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn { background-color: var(--color-white-100); border-color: var(--color-misty-grey-400); color: var(--color-stormy-grey-600); } .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn:hover { background-color: var(--color-white-100); border-color: var(--color-misty-grey-400); color: var(--color-stormy-grey-600); } .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn:active { background-color: var(--color-white-100); border-color: var(--color-misty-grey-400); color: var(--color-stormy-grey-600); } .mud-button-outlined.mud-button-outlined-primary:hover, .mud-button-outlined.mud-button-outlined-default:hover { background-color: var(--tops-btn-secondary-hover-bg); border-color: var(--tops-btn-secondary-hover-border); color: var(--tops-btn-secondary-hover-color); } .mud-button-outlined.mud-button-outlined-primary:active, .mud-button-outlined.mud-button-outlined-default:active { background-color: var(--tops-btn-secondary-active-bg); border-color: var(--tops-btn-secondary-active-border); color: var(--tops-btn-secondary-active-color); } .mud-button-text.mud-button-text-primary { background-color: var(--tops-btn-text-bg); color: var(--tops-btn-text-color); } .mud-button-text.mud-button-text-primary:hover { background-color: var(--tops-btn-text-hover-bg); color: var(--tops-btn-text-hover-color); } .mud-button-text.mud-button-text-primary:active { background-color: var(--tops-btn-text-active-bg); color: var(--tops-btn-text-active-color); } .mud-link { color: var(--tops-btn-text-color); } .mud-link:hover { color: var(--tops-btn-text-hover-color); } .mud-button-root.mud-disabled { opacity: 1; } .mud-button-filled.mud-disabled { background-color: var(--tops-btn-primary-disabled-bg); color: var(--tops-btn-primary-disabled-color); } .mud-button-outlined.mud-disabled { border-color: var(--tops-btn-secondary-disabled-border); color: var(--tops-btn-secondary-disabled-color); } .mud-button-text.mud-disabled { color: var(--tops-btn-text-disabled-color); opacity: var(--tops-btn-text-disabled-opacity); } .mud-button-root.tops-btn-block { width: 100%; } /* Green urgent CTA — Figma 1062-571 (nodes 1286:83 arrow, 1286:84 add, 1286:82 FAB) */ .mud-button-root.mud-button-filled.btn-urgent { background-color: var(--tops-btn-urgent-bg); box-shadow: var(--tops-btn-urgent-shadow); color: var(--tops-btn-urgent-color); font-size: 16px; font-weight: 600; line-height: 1.6; padding: 16px 24px; text-transform: none; } /* Arrow CTA — radius/md (8px) for every state, same as all other buttons. Figma 1286:83: the visible button and its shadow layer use radius/md; the 9999px on the outer frame is layout metadata, not the rendered corner. The product has no pill CTAs. */ .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--end-icon { border-radius: var(--tops-btn-urgent-arrow-radius) !important; gap: 8px; min-width: 211px; } /* Arrow CTA layout (Figma 1286:83): label centered in the left region, arrow pinned to the right edge. */ .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--end-icon .mud-button-label { align-items: center; display: flex; justify-content: center; padding-right: 24px; position: relative; width: 100%; } .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--end-icon .mud-button-label .mud-button-icon-end { align-items: center; display: flex; margin: 0; position: absolute; right: 0; } /* Add CTA — radius/lg (12px), fixed width 211px (Figma 1286:84) */ .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon { border-radius: var(--tops-btn-urgent-add-radius) !important; box-shadow: var(--tops-btn-urgent-shadow-strong); gap: 8px; justify-content: center; min-width: 211px; } .mud-button-root.mud-button-filled.btn-urgent:hover { background-color: var(--tops-btn-urgent-hover-bg); } .mud-button-root.mud-button-filled.btn-urgent:active { background-color: var(--tops-btn-urgent-active-bg); } .mud-button-root.mud-button-filled.btn-urgent:disabled, .mud-button-root.mud-button-filled.btn-urgent.mud-disabled { background-color: var(--tops-btn-urgent-bg) !important; box-shadow: var(--tops-btn-urgent-shadow) !important; color: var(--tops-btn-urgent-color) !important; opacity: var(--tops-btn-urgent-disabled-opacity); } /* Bulk bar mint pills — same disabled rule as green urgent (keep fill, fade). !important: .mud-button-filled.mud-disabled and Color.Inherit replace the mint with stormy-grey / transparent, which disappears on the navy rail. */ .tops-bulk-bar .mud-button-root.mud-button-filled.tops-bulk-bar__action { background-color: var(--color-brand-green-200); box-shadow: none; color: var(--color-brand-blue-600); } .tops-bulk-bar .mud-button-root.mud-button-filled.tops-bulk-bar__action:hover:not(:disabled):not(.mud-disabled) { background-color: var(--color-brand-green-300); } .tops-bulk-bar .mud-button-root.mud-button-filled.tops-bulk-bar__action:disabled, .tops-bulk-bar .mud-button-root.mud-button-filled.tops-bulk-bar__action.mud-disabled { background-color: var(--color-brand-green-200) !important; box-shadow: none !important; color: var(--color-brand-blue-600) !important; opacity: var(--tops-btn-urgent-disabled-opacity); } .mud-button-root.mud-button-filled.btn-urgent .mud-button-label { font-size: inherit; font-weight: inherit; line-height: inherit; } .mud-button-root.mud-button-filled.btn-urgent:disabled .mud-icon-root, .mud-button-root.mud-button-filled.btn-urgent.mud-disabled .mud-icon-root, .mud-icon-button.btn-urgent-fab:disabled .mud-icon-root, .mud-icon-button.btn-urgent-fab.mud-disabled .mud-icon-root { color: var(--tops-btn-urgent-color) !important; } /* Compact green CTA — CtaButton with Size="Medium". The default btn-urgent treatment is the oversized Add/Pay-Now CTA (211px min-width, 16/24 padding, strong shadow). When the caller opts into Size="Medium", keep the green CTA color tokens but render at the standard medium-button scale so it lines up with adjacent header buttons. MudBlazor Medium has no size-specific class, so we match btn-urgent WITHOUT the small/large modifier. */ .mud-button-root.mud-button-filled.btn-urgent:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large) { border-radius: var(--tops-btn-radius) !important; box-shadow: none; font-size: var(--tops-btn-font-size); font-weight: var(--tops-btn-font-weight); line-height: var(--tops-btn-line-height); min-height: var(--tops-btn-min-height); min-width: 0; padding: var(--tops-btn-padding-y) var(--tops-btn-padding-x); } .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large), .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--end-icon:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large) { border-radius: var(--tops-btn-radius) !important; box-shadow: none; gap: 6px; min-width: 0; } /* Compact green CTA — CtaButton with Size="Small". Same concept as Medium above but at the small-button scale for tighter header layouts. */ .mud-button-root.mud-button-filled.btn-urgent.mud-button-filled-size-small { border-radius: var(--tops-btn-radius-sm) !important; box-shadow: none; font-size: var(--tops-btn-font-size-sm); font-weight: 500; height: var(--tops-btn-min-height-sm); line-height: var(--tops-btn-line-height-sm); min-height: var(--tops-btn-min-height-sm); padding-block: 0; padding-inline: var(--tops-btn-padding-x-sm); } .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon.mud-button-filled-size-small, .mud-button-root.mud-button-filled.btn-urgent.btn-urgent--end-icon.mud-button-filled-size-small { border-radius: var(--tops-btn-radius-sm) !important; box-shadow: none; gap: 6px; min-width: 0; } /* Recipients / Issuers TIN Check — smaller circle, tighter check than Material CheckCircle. */ .mud-button-root.recipients-tin-check-btn .mud-button-icon-start, .mud-button-root.recipients-tin-check-btn .mud-icon-root, .mud-button-root.issuers-tin-check-btn .mud-button-icon-start, .mud-button-root.issuers-tin-check-btn .mud-icon-root { width: 14px; height: 14px; min-width: 14px; min-height: 14px; font-size: 0; line-height: 0; } .mud-button-root.recipients-tin-check-btn .mud-icon-root, .mud-button-root.issuers-tin-check-btn .mud-icon-root { background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.35' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M5.2 7.15l1.05 1.1 2.35-2.45' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='7' cy='7' r='5.35' stroke='black' stroke-width='1.2'/%3E%3Cpath d='M5.2 7.15l1.05 1.1 2.35-2.45' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } .mud-button-root.recipients-tin-check-btn .mud-icon-root svg, .mud-button-root.recipients-tin-check-btn .mud-icon-root path, .mud-button-root.recipients-tin-check-btn .mud-icon-root *, .mud-button-root.issuers-tin-check-btn .mud-icon-root svg, .mud-button-root.issuers-tin-check-btn .mud-icon-root path, .mud-button-root.issuers-tin-check-btn .mud-icon-root * { display: none; } /* Forms workspace: correction entry unavailable — disabled look; reason via hover tooltip (H0-606). */ .mud-popover.forms-page-mud-popover .forms-correction-menu-item-tooltip-host { display: block; width: 100%; } .mud-popover.forms-page-mud-popover .mud-menu-item.forms-correction-entry-unavailable, .mud-popover.forms-page-mud-popover [data-correction-entry-unavailable="true"].mud-menu-item { cursor: default !important; color: var(--tops-btn-text-disabled-color) !important; opacity: 0.38 !important; } .mud-popover.forms-page-mud-popover .mud-menu-item.forms-correction-entry-unavailable:hover, .mud-popover.forms-page-mud-popover [data-correction-entry-unavailable="true"].mud-menu-item:hover { background-color: transparent !important; } .mud-popover.forms-page-mud-popover [data-correction-entry-unavailable="true"] .mud-icon-root, .mud-popover.forms-page-mud-popover [data-correction-entry-unavailable="true"] .mud-menu-item-icon, .mud-popover.forms-page-mud-popover [data-correction-entry-unavailable="true"] .mud-menu-item-text, .mud-popover.forms-page-mud-popover [data-correction-entry-unavailable="true"] .mud-typography { color: var(--tops-btn-text-disabled-color) !important; fill: var(--tops-btn-text-disabled-color) !important; } .mud-icon-button { border-radius: var(--tops-input-radius); } /* FAB — 48px circle; after generic icon-button so radius wins */ .mud-icon-button.btn-urgent-fab { background-color: var(--tops-btn-urgent-bg); border-radius: var(--tops-btn-urgent-fab-radius); box-shadow: var(--tops-btn-urgent-shadow); color: var(--tops-btn-urgent-color); height: var(--tops-btn-urgent-fab-size); width: var(--tops-btn-urgent-fab-size); } .mud-icon-button.btn-urgent-fab:hover { background-color: var(--tops-btn-urgent-hover-bg); } .mud-icon-button.btn-urgent-fab:active { background-color: var(--tops-btn-urgent-active-bg); } .mud-icon-button.btn-urgent-fab:disabled, .mud-icon-button.btn-urgent-fab.mud-disabled { background-color: var(--tops-btn-urgent-bg) !important; color: var(--tops-btn-urgent-color) !important; opacity: var(--tops-btn-urgent-disabled-opacity); } .mud-icon-button:hover { background-color: var(--tops-surface-alt); } /* Inputs/select/date — Figma 1331-509 form fields */ /* Stacked label: label above the outlined border (not floating inside). */ .mud-input-control { display: flex; flex-direction: column; margin-top: 0 !important; } .mud-input-control-input-container { display: flex; flex-direction: column; align-items: stretch; order: 1; } .mud-input-control > .mud-input-helper-text, .mud-input-control > .mud-input-error { order: 2; margin-top: 4px; } .mud-input-control-input-container > .mud-input-label.mud-input-label-outlined { position: static !important; transform: none !important; -webkit-transform: none !important; translate: none !important; order: -1; max-width: 100% !important; width: auto !important; margin: 0 0 4px !important; pointer-events: none; color: var(--tops-brand-600) !important; font-family: var(--tops-body-font); font-size: var(--tops-label-helper-size) !important; font-weight: var(--tops-label-helper-weight); line-height: var(--tops-label-helper-line); text-transform: none; } .mud-input-control.mud-input-error .mud-input-label, .mud-input.mud-input-error .mud-input-label { color: var(--tops-error); } /* One required mark: a space, then alerts-red/400. Label text that already ends in "*" must be stripped so this does not paint a second mark. */ .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after, .mud-input-control.mud-input-required .mud-input-label-text::after { content: "\00a0*"; color: var(--color-alerts-red-400); } /* Inside a form field the small Mud mark is off; the field draws the one large red asterisk itself (AT-2753). */ .form-platform-field-control .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after, .form-platform-field-control .mud-input-control.mud-input-required .mud-input-label-text::after { content: none; } .form-platform-field-control--required .mud-input-control > .mud-input-control-input-container > .mud-input-label::after, .form-platform-field-control--required .mud-input-label-text::after { content: "\00a0*"; color: var(--tops-error); font-weight: 700; font-size: 1.25em; line-height: 1; } .mud-input-control input.mud-input-slot, .mud-input-control .mud-select-input, .mud-input-control textarea.mud-input-slot, .mud-input input.mud-input-slot, .mud-input .mud-select-input { color: var(--tops-text-primary); font-family: var(--tops-body-font); font-size: var(--tops-body-input-size); line-height: var(--tops-body-input-line); font-weight: var(--tops-body-input-weight); } .mud-input-control .mud-input-root-outlined, .mud-input .mud-input-root-outlined { font-size: var(--tops-body-input-size); line-height: var(--tops-body-input-line); } /* No floating-label inset — Mud 9 applies padding directly on input/select root. */ .mud-input-control input.mud-input-slot.mud-input-root-outlined:not(textarea), .mud-input-control .mud-select-input.mud-input-root-outlined, .mud-input input.mud-input-slot.mud-input-root-outlined:not(textarea), .mud-input .mud-select-input.mud-input-root-outlined { box-sizing: border-box; min-height: var(--tops-input-height); height: var(--tops-input-height); padding-top: 8px !important; padding-bottom: 8px !important; } /* Collapse fieldset legend notch; visible label sits above the border (Figma 1331-509). Mud 9 expands legend on .mud-shrink / :focus-within — must beat those rules. */ .mud-input-outlined > .mud-input-outlined-border legend, .mud-input.mud-input-outlined > .mud-input-outlined-border legend, .mud-input-outlined.mud-shrink > .mud-input-outlined-border legend, .mud-input.mud-input-outlined.mud-shrink > .mud-input-outlined-border legend, .mud-input-outlined:focus-within > .mud-input-outlined-border legend, .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border legend, .mud-input.mud-input-outlined:focus-within.mud-shrink > .mud-input-outlined-border legend { width: 0 !important; max-width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; visibility: hidden !important; font-size: 0 !important; line-height: 0 !important; border: none !important; } /* Stacked label: no extra top inset Mud reserves for floating labels. */ .mud-input.mud-input-outlined.mud-input-outlined-with-label, .mud-input-control.mud-input-outlined-with-label { margin-top: 0 !important; } .mud-input-control > .mud-input-control-helper-container { order: 2; margin-top: 4px; padding-left: 0 !important; padding-right: 0 !important; } .mud-input-control .mud-input-slot::placeholder, .mud-input .mud-input-slot::placeholder { color: var(--tops-gray-400); } input.mud-input-slot, .mud-select-input { min-height: var(--tops-input-height); } /* Compact toolbar selects live in Issuers.razor.css and IssuerDetail.razor.css (page-local). */ input.mud-input-slot[type="number"] { -moz-appearance: textfield; appearance: textfield; padding-right: 0.5rem; } input.mud-input-slot[type="number"]::-webkit-inner-spin-button, input.mud-input-slot[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; } /* Numeric spin stepper — Figma Input/Numeric; same ArrowDropUp/Down glyphs and compact layout as AdamsTaxDatePicker day stepper (node 1311:328). Mud defaults to KeyboardArrowUp/Down; ::after replaces the glyph so existing MudNumericField call sites pick up the house stepper without a wrapper swap. */ .mud-input-control.mud-input-number-control .mud-input-numeric-spin { align-items: center; bottom: unset; height: auto; inset-inline-end: 8px; inset-inline-start: unset; justify-content: center; top: 50%; transform: translateY(-50%); width: 16px; } .mud-input-control.mud-input-number-control .mud-input-numeric-spin button { align-items: center; background-color: transparent; border-radius: 0; color: var(--tops-gray-300); display: inline-flex; height: 10px; justify-content: center; min-height: 10px; min-width: 16px; overflow: hidden; padding: 0; width: 16px; } .mud-input-control.mud-input-number-control .mud-input-numeric-spin button:hover { background-color: transparent; color: var(--tops-gray-500); } .mud-input-control.mud-input-number-control.mud-disabled .mud-input-numeric-spin button, .mud-input-control.mud-input-number-control .mud-input-numeric-spin button:disabled { color: var(--tops-gray-400); } .mud-input-control.mud-input-number-control .mud-input-numeric-spin button .mud-icon-root { font-size: 0; height: 22px; line-height: 10px; position: relative; width: 22px; } .mud-input-control.mud-input-number-control .mud-input-numeric-spin button .mud-icon-root::after { -webkit-font-smoothing: antialiased; color: inherit; font-family: "Material Icons"; font-size: 22px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 10px; speak: none; text-transform: none; } .mud-input-control.mud-input-number-control .mud-input-numeric-spin button:first-child .mud-icon-root::after { content: "arrow_drop_up"; } .mud-input-control.mud-input-number-control .mud-input-numeric-spin button:last-child .mud-icon-root::after { content: "arrow_drop_down"; } textarea.mud-input-slot { min-height: 96px; } .mud-input-outlined .mud-input-outlined-border { border-color: var(--tops-input-border-default); border-radius: var(--tops-input-radius); border-width: var(--tops-input-stroke-width); } .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--tops-gray-400); } .mud-input-control.mud-disabled .mud-input-outlined-border, .mud-input.mud-disabled .mud-input-outlined-border { border-color: var(--tops-input-border-disabled); background-color: var(--tops-input-bg-disabled); } /* Disabled = muted affordance (cannot interact / not applicable). */ .mud-input-control.mud-disabled input.mud-input-slot, .mud-input.mud-disabled input.mud-input-slot, .mud-input-control.mud-disabled textarea.mud-input-slot, .mud-input.mud-disabled textarea.mud-input-slot, .mud-input-control.mud-disabled .mud-select-input, .mud-input.mud-disabled .mud-select-input { background-color: var(--tops-input-bg-disabled); color: var(--tops-text-secondary); -webkit-text-fill-color: var(--tops-text-secondary); } /* Read-only = filed-snapshot / locked workspace: keep values readable. */ .mud-input-control.mud-input-readonly input.mud-input-slot, .mud-input.mud-input-readonly input.mud-input-slot, .mud-input-control.mud-input-readonly textarea.mud-input-slot, .mud-input.mud-input-readonly textarea.mud-input-slot, .mud-input-control.mud-input-readonly .mud-select-input, .mud-input.mud-input-readonly .mud-select-input { background-color: var(--tops-input-bg-disabled); /* Filed-snapshot / locked workspace: gray-400 on gray-200 was ~1.8:1 and looked "empty". */ color: var(--tops-text-primary); -webkit-text-fill-color: var(--tops-text-primary); } .mud-input-control.mud-disabled .mud-input-label, .mud-input.mud-disabled .mud-input-label { color: var(--tops-text-secondary); } .mud-input-control.mud-input-readonly .mud-input-label, .mud-input.mud-input-readonly .mud-input-label { color: var(--tops-text-secondary); } .mud-input.mud-input-focused .mud-input-outlined-border, .mud-input-control.mud-input-focused .mud-input-outlined-border, .mud-input-outlined:focus-within > .mud-input-outlined-border, .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border { border-color: var(--tops-input-border) !important; border-width: var(--tops-input-stroke-width-focus) !important; } .mud-input-control.mud-input-error .mud-input-outlined-border, .mud-input.mud-input-error .mud-input-outlined-border { border-color: var(--tops-input-border-error) !important; } /* State fills paint the whole input box (container + text slot) so adorned controls (date pickers, selects, search fields) are not two-tone — the adornment icon area is a sibling of the text slot and would otherwise show the page canvas behind it. */ .mud-input.mud-input-error, .mud-input-control.mud-input-error .mud-input, .mud-input-control.mud-input-error input.mud-input-slot, .mud-input.mud-input-error input.mud-input-slot, .mud-input-control.mud-input-error textarea.mud-input-slot, .mud-input.mud-input-error textarea.mud-input-slot { background-color: var(--tops-input-bg-error) !important; } .mud-input.mud-input-error, .mud-input-control.mud-input-error .mud-input { border-radius: var(--tops-input-radius); } .mud-input-control.tops-input-state-success .mud-input-outlined-border, .mud-input.tops-input-state-success .mud-input-outlined-border { border-color: var(--tops-input-border-success) !important; border-width: var(--tops-input-stroke-width); } .mud-input.tops-input-state-success, .mud-input-control.tops-input-state-success .mud-input, .mud-input-control.tops-input-state-success input.mud-input-slot, .mud-input.tops-input-state-success input.mud-input-slot, .mud-input-control.tops-input-state-success textarea.mud-input-slot, .mud-input.tops-input-state-success textarea.mud-input-slot { background-color: var(--tops-input-bg-success) !important; } .mud-input.tops-input-state-success, .mud-input-control.tops-input-state-success .mud-input { border-radius: var(--tops-input-radius); } .mud-input-control.tops-input-state-success .mud-input-helper-text, .mud-input.tops-input-state-success .mud-input-helper-text { color: var(--tops-success); } .mud-input.tops-input-state-filled, .mud-input-control.tops-input-state-filled .mud-input, .mud-input-control.tops-input-state-filled input.mud-input-slot, .mud-input.tops-input-state-filled input.mud-input-slot, .mud-input-control.tops-input-state-filled textarea.mud-input-slot, .mud-input.tops-input-state-filled textarea.mud-input-slot { background-color: var(--tops-input-bg-filled) !important; } .mud-input.tops-input-state-filled, .mud-input-control.tops-input-state-filled .mud-input { border-radius: var(--tops-input-radius); } .mud-input-helper-text { color: var(--tops-gray-500); font-family: var(--tops-body-font); font-size: var(--tops-label-helper-size); line-height: var(--tops-label-helper-line); font-weight: var(--tops-label-helper-weight); } .mud-input-control.mud-input-error .mud-input-helper-text, .mud-input.mud-input-error .mud-input-helper-text { color: var(--tops-error); } /* Dropdown chevron — Figma stroke V replaces Mud ArrowDropDown/Up solid triangles. */ .mud-select .mud-select-icon, .mud-select.mud-autocomplete .mud-input-adornment-end { margin-inline-end: 12px; margin-inline-start: 0; } .mud-select .mud-select-icon .mud-icon-button, .mud-select.mud-autocomplete .mud-input-adornment-end .mud-icon-button, .party-autocomplete .mud-input-adornment-end .mud-icon-button, .party-multiselect .mud-input-adornment-end .mud-icon-button { width: 24px; height: 24px; min-width: 24px; min-height: 24px; padding: 0; } .mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-select.mud-autocomplete .mud-input-adornment-end .mud-icon-root:not(:has(svg)) { width: 16px; height: 16px; font-size: 0 !important; /* hide Material ArrowDropDown/Up glyph */ line-height: 0; color: transparent; background-color: var(--tops-gray-500); -webkit-mask: var(--tops-input-chevron-mask) center / contain no-repeat; mask: var(--tops-input-chevron-mask) center / contain no-repeat; transition: transform 0.15s ease, background-color 0.15s ease; } .mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-select.mud-autocomplete .mud-input-adornment-end .mud-icon-root:has(svg) { display: inline-flex; align-items: center; justify-content: center; color: var(--tops-gray-500); transition: color 0.15s ease; } .mud-select .mud-select-icon .mud-icon-root:has(svg) svg, .mud-select.mud-autocomplete .mud-input-adornment-end .mud-icon-root:has(svg) svg { width: 16px; height: 16px; display: block; } /* Open menu — chevron points up */ .mud-select .mud-select-icon .mud-icon-button[aria-expanded="true"] .mud-icon-root, .mud-select.mud-autocomplete .mud-input-adornment-end .mud-icon-button[aria-expanded="true"] .mud-icon-root { transform: rotate(180deg); } /* Chevron state colors (Figma 1331-509) — mask glyphs and inline SVG chevrons */ .mud-input-control.mud-input-focused .mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.mud-input-focused .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input-control.mud-input-focused.mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.mud-input-focused.mud-autocomplete .mud-input-adornment-end .mud-icon-root:not(:has(svg)), .mud-input-control.mud-input-focused .mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.mud-input-focused .mud-select-icon .mud-icon-root:has(svg), .mud-input-control.mud-input-focused.mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.mud-input-focused.mud-autocomplete .mud-input-adornment-end .mud-icon-root:has(svg) { background-color: var(--tops-input-border); color: var(--tops-input-border); } .mud-input-control.mud-input-error .mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.mud-input-error .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input-control.mud-input-error.mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.mud-input-error.mud-autocomplete .mud-input-adornment-end .mud-icon-root:not(:has(svg)), .mud-input-control.mud-input-error .mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.mud-input-error .mud-select-icon .mud-icon-root:has(svg), .mud-input-control.mud-input-error.mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.mud-input-error.mud-autocomplete .mud-input-adornment-end .mud-icon-root:has(svg) { background-color: var(--tops-input-border-error); color: var(--tops-input-border-error); } /* MudSelect chevron on error: the arrow lives in .mud-select-input / .mud-input-adornment-end (not .mud-select-icon), so the rule above misses it. Redden the glyph via currentColor to match the errored field — color only, so there's no red background box behind the arrow (H0-973). */ .mud-input-control.mud-input-error .mud-select-input .mud-icon-root, .mud-input.mud-input-error .mud-select-input .mud-icon-root { color: var(--tops-input-border-error); } .mud-input-control.tops-input-state-success .mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.tops-input-state-success .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input-control.tops-input-state-success.mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.tops-input-state-success.mud-autocomplete .mud-input-adornment-end .mud-icon-root:not(:has(svg)), .mud-input-control.tops-input-state-success .mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.tops-input-state-success .mud-select-icon .mud-icon-root:has(svg), .mud-input-control.tops-input-state-success.mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.tops-input-state-success.mud-autocomplete .mud-input-adornment-end .mud-icon-root:has(svg) { background-color: var(--tops-input-border-success); color: var(--tops-input-border-success); } .mud-input-control.mud-disabled .mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.mud-disabled .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input-control.mud-disabled.mud-select .mud-select-icon .mud-icon-root:not(:has(svg)), .mud-input.mud-disabled.mud-autocomplete .mud-input-adornment-end .mud-icon-root:not(:has(svg)), .mud-input-control.mud-disabled .mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.mud-disabled .mud-select-icon .mud-icon-root:has(svg), .mud-input-control.mud-disabled.mud-select .mud-select-icon .mud-icon-root:has(svg), .mud-input.mud-disabled.mud-autocomplete .mud-input-adornment-end .mud-icon-root:has(svg) { background-color: var(--tops-gray-400); color: var(--tops-gray-400); } .mud-picker .mud-input-adornment-end .mud-icon-button, .mud-picker .mud-input-adornment-start .mud-icon-button, .tops-input-search .mud-input-adornment-end .mud-icon-root { color: var(--tops-gray-500); } /* Date picker — Figma stroke calendar SVG (1311:328), 22×22 in the adornment slot. */ .mud-picker .mud-input-adornment-end .mud-icon-root:has(svg), .mud-picker .mud-input-adornment-start .mud-icon-root:has(svg) { display: inline-flex; align-items: center; justify-content: center; } .mud-picker .mud-input-adornment-end .mud-icon-root:has(svg) svg, .mud-picker .mud-input-adornment-start .mud-icon-root:has(svg) svg { display: block; height: 22px; width: 22px; } /* Date field — Figma Input/Date (1311:328): full-box fills + calendar glyph states. Text slot transparency lives in AdamsTaxDatePicker.razor.css; paint here so Helper/Admin share the same state colours outside the design-library catalog. */ .adamstax-date-field .mud-input.mud-disabled, .adamstax-date-field .mud-input-control.mud-disabled .mud-input, .adamstax-date-field .mud-input.mud-input-readonly, .adamstax-date-field .mud-input-control.mud-input-readonly .mud-input { background-color: var(--tops-input-bg-disabled) !important; } .adamstax-date-field .mud-input.mud-input-focused .mud-input-adornment-end .mud-icon-button, .adamstax-date-field .mud-input-control.mud-input-focused .mud-input-adornment-end .mud-icon-button, .adamstax-date-field .mud-input.mud-input-outlined:focus-within .mud-input-adornment-end .mud-icon-button { color: var(--tops-input-border); } .adamstax-date-field .mud-input-control.mud-input-error .mud-input-adornment-end .mud-icon-button, .adamstax-date-field .mud-input.mud-input-error .mud-input-adornment-end .mud-icon-button { color: var(--tops-input-border-error); } .adamstax-date-field .mud-input-control.tops-input-state-success .mud-input-adornment-end .mud-icon-button, .adamstax-date-field .mud-input.tops-input-state-success .mud-input-adornment-end .mud-icon-button { color: var(--tops-input-border-success); } .adamstax-date-field .mud-input-control.mud-disabled .mud-input-adornment-end .mud-icon-button, .adamstax-date-field .mud-input.mud-disabled .mud-input-adornment-end .mud-icon-button { color: var(--tops-gray-400); } /* Search — magnifying glass end-aligned inside the outlined box (Figma 1331-509). */ .tops-input-search .mud-input-adornment-end { margin-inline-end: 4px; } /* Currency — dollar prefix sits outside the left border (Figma 1331-509). */ .tops-currency-input { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; width: 100%; } .tops-currency-input__prefix { grid-column: 1; grid-row: 2; align-self: center; height: var(--tops-input-height); display: flex; align-items: center; color: var(--tops-text-primary); font-family: var(--tops-body-font); font-size: var(--tops-body-input-size); line-height: var(--tops-body-input-line); font-weight: var(--tops-body-input-weight); } .tops-currency-input:has(.mud-disabled) .tops-currency-input__prefix { color: var(--tops-gray-400); } .tops-currency-input .mud-input-control, .tops-currency-input .mud-input-control-input-container { display: contents; } .tops-currency-input .mud-input-label.mud-input-label-outlined { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; } .tops-currency-input .mud-input.mud-input-outlined { grid-column: 2; grid-row: 2; width: 100%; min-width: 0; } .tops-currency-input .mud-input-control-helper-container, .tops-currency-input > .mud-input-error, .tops-currency-input .mud-input-control > .mud-input-error { grid-column: 2; grid-row: 3; } .tops-currency-input .tops-currency-input__field { width: 100%; min-width: 0; } /* An empty amount draws no "$", so it needs no prefix column: the input takes the full width. */ .tops-currency-input.tops-currency-input--empty { grid-template-columns: 1fr; } .tops-currency-input.tops-currency-input--empty .mud-input-label.mud-input-label-outlined, .tops-currency-input.tops-currency-input--empty .mud-input.mud-input-outlined, .tops-currency-input.tops-currency-input--empty .mud-input-control-helper-container, .tops-currency-input.tops-currency-input--empty > .mud-input-error, .tops-currency-input.tops-currency-input--empty .mud-input-control > .mud-input-error { grid-column: 1; } /* Form pages (label row outside the input): the "$" is part of the input text, immediately left of the digits, and the amount reads right-aligned like Figma. */ .tops-currency-input.tops-currency-input--inset { display: block; position: relative; } .tops-currency-input--inset .mud-input-control, .tops-currency-input--inset .mud-input-control-input-container { display: block; } .tops-currency-input--inset .mud-input-slot.mud-input-root { text-align: right; } /* Forms workspace (new + edit): amounts stay left-aligned while typing and when blurred. */ .workspace-editor-layout .tops-currency-input--inset .mud-input-slot.mud-input-root, .workspace-editor-layout .tops-currency-input--inset .mud-input-slot.mud-input-root input { text-align: left; } .workspace-editor-layout [data-numeric-kind] input, .workspace-editor-layout .form-platform-field-numeric input { text-align: left; } /* Workspace editor two-column layout — shared by SubmissionWorkspace.razor (Edit) and FormPlatformEditorPage.razor (Add). FormPlatformEditorPage has no page-scoped .razor.css file, so a page-scoped rule for this class would only ever apply to the Edit page; kept global here so the grid and gap render identically on both pages. The "paper" card look (border/background) comes from the .form-platform-editor-paper class applied alongside this one, not from this rule — see below. */ /* Right fields column — stretch with the editor grid. When the left panel is taller, leftover whitespace under the form sections keeps left/right borders matching .authored-layout-section / .authored-section-plain (no top — would double the last section's bottom border; no bottom — flush with the outer editor paper edge). The ::after flex filler collapses to zero height when there is no leftover space. */ .workspace-editor-fields-column { min-width: 0; align-self: stretch; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; /* Filler ::after side lines are half the workspace editor border weight (plan 11). */ --workspace-editor-fields-column-filler-side-width: calc(var(--workspace-editor-border-width, calc(var(--tops-input-stroke-width) * 2)) / 2); } .workspace-editor-fields-column > .form-editor-field-column__content, .workspace-editor-fields-column > .form-platform-authored-form, .workspace-editor-fields-column > .form-platform-generic-form { flex: 0 0 auto; } .workspace-editor-fields-column::after { content: ""; flex: 1 1 0; min-height: 0; pointer-events: none; box-shadow: inset var(--workspace-editor-fields-column-filler-side-width) 0 0 0 var(--tops-card-border), inset calc(var(--workspace-editor-fields-column-filler-side-width) * -1) 0 0 0 var(--tops-card-border); } /* New-form resolved grid pads box fields with --spacing-4; the flex filler below the grid must use the same horizontal inset so leftover Payment Information whitespace does not look wider than the IRS box columns above. */ .workspace-editor-fields-column:has(.resolved-layout)::after { margin-inline: var(--spacing-4, 1rem); } /* ResolvedLayoutRenderer grid (Model B new-form path) — horizontal inset only when the component scoped bundle fingerprint is stale (same class of bug as .authored-layout-section above). Do not set row-gap, gap, or vertical padding here; vertical row spacing stays as at be0e68bbd (scoped row-gap + default field label/container sizing). */ .workspace-editor-layout .resolved-layout__grid.resolved-layout__grid { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; align-items: stretch !important; padding-inline: var(--spacing-4, 1rem) !important; background: transparent !important; } .workspace-editor-layout .resolved-layout__cell.resolved-layout__cell { min-width: 0; display: flex; } .workspace-editor-layout { display: grid; /* ~22.5% / ~77.5% split (9fr : 31fr) — 50% wider than the previous ~15% share (0.15 * 1.5 = 0.225). */ grid-template-columns: minmax(0, 9fr) minmax(0, 31fr); gap: 0; /* Stretch (not "start") so the shorter panel (usually the left, Issuer/Recipient cards) grows to match the taller one's height — needed so the vertical divider border below always runs the full editor height, not just as far down as the left panel's own content happens to reach. */ align-items: stretch; /* Zero out the MudBlazor .pa-4 utility applied alongside this class — the right panel (fields column) must sit flush with the outer border; the left panel (FormEditorContactColumn) restores its own inset padding independently. */ padding: 0 !important; /* Every border inside the workspace editor (both panels) is twice the normal input stroke width — defined once here and inherited by every descendant border rule below, rather than doubling --tops-input-stroke-width itself, which would also thicken ordinary input borders everywhere else in the app. */ --workspace-editor-border-width: calc(var(--tops-input-stroke-width) * 2); /* Zero out the MudBlazor .mb-4 utility applied alongside this class — with the Form Checks panel hidden and the File Form row removed, the Cancel/Save footer now sits directly after this element and should be flush with its bottom edge, not offset by this element's own trailing margin. */ margin-bottom: 0 !important; } .workspace-editor-layout--stacked, .workspace-editor-layout--line { grid-template-columns: 1fr; } @media (max-width: 960px) { .workspace-editor-layout { grid-template-columns: 1fr; } } /* Workspace editor "paper" card treatment — same class the outer wrapper used to carry before it moved onto .workspace-editor-layout. Kept global (not page-scoped) so it renders identically on the Add (FormPlatformEditorPage, no scoped CSS file) and Edit (SubmissionWorkspace) workspaces. */ .mud-paper.form-platform-editor-paper, .form-platform-editor-paper { border: var(--workspace-editor-border-width, calc(var(--tops-input-stroke-width) * 2)) solid var(--tops-card-border); background: var(--tops-card-bg); /* All 4 of this combined left+right panel box's corners are explicitly rounded (top-left/bottom-left = left panel's outer corners, top-right/bottom-right = right panel's outer corners) — confirmed with the developer. Explicit rather than relying on MudBlazor's .mud-paper default so this can't drift silently. */ border-radius: var(--tops-card-radius); overflow: hidden; /* Flat canvas — the two-column editor sits on a border, not a card drop shadow. Beats .mud-paper.mud-elevation-1 { box-shadow: var(--tops-card-shadow) } if elevation is still on the same element. */ box-shadow: none; } /* Workspace contact empty-card activator — shared by WorkspaceIssuerPicker and WorkspaceRecipientPicker (Figma FormsWorkspaceIssuerPayerLeftPanel). Kept global (not component-scoped) so both components render identically. */ .workspace-contact-empty-card { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; box-sizing: border-box; padding: var(--spacing-3) var(--spacing-4); /* Heavier than the standard workspace-editor border weight (3x, not 2x), so the empty-state "not selected yet" card reads as a distinctly weightier dashed outline rather than matching the same weight as solid borders elsewhere. */ border: calc(var(--tops-input-stroke-width) * 3) dashed var(--tops-brand-200); border-radius: var(--tops-card-radius); /* Match the populated Issuer/Recipient card's light-blue background and full width so the UX looks the same before and after selection — only the dashed border and icon/hint content change to signal "not yet selected". */ background: var(--tops-brand-100); cursor: pointer; text-align: left; } .workspace-contact-empty-card:disabled { cursor: not-allowed; opacity: 0.6; } .workspace-contact-empty-card__icon-box { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--tops-rhythm-rem) * 2.5); height: calc(var(--tops-rhythm-rem) * 2.5); border-radius: var(--radius-sm); background: var(--tops-gray-100); } .workspace-contact-empty-card__icon { color: var(--tops-gray-500); } .workspace-contact-empty-card__text { display: flex; flex-direction: column; gap: calc(var(--spacing-1) / 2); min-width: 0; flex: 1 1 auto; } .workspace-contact-empty-card__title { font-family: var(--tops-body-font); font-size: var(--tops-body-size); font-weight: var(--tops-body-heavy-weight); color: var(--tops-gray-900); text-align: left; } .workspace-contact-empty-card__hint { font-family: var(--tops-body-font); font-size: var(--tops-body-sm-size); line-height: var(--tops-body-sm-line); color: var(--tops-gray-600); text-align: left; } .workspace-contact-empty-card__input-decoy { /* Hidden — this decorative placeholder only ever renders in the "nothing selected" empty-card state (there's no value to show), and the developer asked for it to not be shown in that state. */ display: none; } .workspace-contact-empty-card__chevron { flex: 0 0 auto; color: var(--tops-brand-700); } .workspace-contact-empty-card__chevron.mud-icon-root, .workspace-contact-empty-card__chevron.mud-icon-root svg { color: var(--tops-brand-700); fill: currentColor; } /* Workspace Issuer/Recipient pickers — MudIcon renders .mud-icon-root, not .mud-icon-button. Height stays ~2× Mud's 1.5rem default; width is slightly tighter so the chevron is not boxy. */ .workspace-issuer-card__caret { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin: 0; padding: 0; border: none; background: transparent; color: var(--tops-brand-700); line-height: 0; cursor: pointer; } .workspace-issuer-card__caret:disabled { cursor: default; } .workspace-issuer-card__caret:focus, .workspace-issuer-card__caret:focus-visible { outline: none; } .workspace-issuer-card__caret .workspace-issuer-card__chevron.mud-icon-root, .workspace-issuer-card__caret .workspace-issuer-picker__card-chevron.mud-icon-root, .workspace-issuer-card__caret .workspace-recipient-picker__card-chevron.mud-icon-root { width: 2.25rem; height: 3rem; font-size: 3rem; color: var(--tops-brand-700); transition: transform 0.15s ease; } .workspace-issuer-card__caret .workspace-issuer-card__chevron.mud-icon-root svg, .workspace-issuer-card__caret .workspace-issuer-picker__card-chevron.mud-icon-root svg, .workspace-issuer-card__caret .workspace-recipient-picker__card-chevron.mud-icon-root svg { width: 2.25rem; height: 3rem; fill: currentColor; } .workspace-issuer-picker--open .workspace-issuer-picker__card-chevron.mud-icon-root, .workspace-issuer-picker--open .workspace-contact-empty-card__chevron.mud-icon-root, .workspace-recipient-picker--open .workspace-recipient-picker__card-chevron.mud-icon-root, .workspace-recipient-picker--open .workspace-contact-empty-card__chevron.mud-icon-root { transform: rotate(180deg); } /* Workspace Issuer/Recipient picker panels + readonly grid — global (not scoped bundle). MudMenu popover content is teleported outside the component subtree, so scoped rules cannot reach it reliably. (A stale copy of AdamsTax.Components.bundle.scp.css was once observed here; index.html also linked that file directly, unfingerprinted, and the direct link 404'd when deployed. AT-2691 removed it: the scoped bundle now arrives only through the fingerprinted @import at the top of each app's *.styles.css.) These class-only rules load after MudBlazor and always match portal content. */ /* Outer shell: shadow lives here so overflow clipping on the panel cannot hide it. */ .workspace-issuer-picker__panel-shell, .workspace-recipient-picker__panel-shell { width: 100%; box-sizing: border-box; margin-top: calc(var(--spacing-1) * -1); border-radius: var(--radius-md) var(--radius-md) var(--radius-lg) var(--radius-lg); box-shadow: var(--tops-popover-shadow); background: transparent; } .workspace-issuer-picker__panel, .workspace-recipient-picker__panel { width: 100%; box-sizing: border-box; padding: 0; background: var(--tops-white); /* Rounded rect is the true outer edge — clip descendants to it. */ border: none; border-radius: var(--radius-md) var(--radius-md) var(--radius-lg) var(--radius-lg); box-shadow: none; overflow: hidden; /* Hard clip (overflow alone can leave 1px AA square tips on button borders). */ clip-path: inset(0 round var(--radius-md) var(--radius-md) var(--radius-lg) var(--radius-lg)); font-size: var(--tops-body-xs-size); line-height: var(--tops-body-xs-line); } .workspace-issuer-picker__search, .workspace-recipient-picker__search { /* No bottom padding/margin — flush against the contacts list. */ padding: var(--spacing-2) var(--spacing-2) 0; margin: 0 !important; border: var(--tops-input-stroke-width) solid var(--tops-neutral-200); border-bottom: none; border-radius: 0; box-sizing: border-box; } .workspace-issuer-picker__search.mud-input-control, .workspace-recipient-picker__search.mud-input-control, .workspace-issuer-picker__search .mud-input-control-helper-container, .workspace-recipient-picker__search .mud-input-control-helper-container { margin: 0 !important; margin-bottom: 0 !important; min-height: 0; padding-bottom: 0; } /* BR-004 (Decision 3): rows are content-sized, so a wrapped name/entity-type grows the row taller — a wrapped row is no longer "1 single-line row" worth of height. Raised from 3.75 (the original "4 single-line rows" cap, ~60px/row) to 6 rhythm units/row (~96px) so the box still shows roughly 4 rows once wrapping is common, rather than shrinking to ~2-3 visible rows at the old cap. Still a hard cap — overflow-y: auto keeps it scrollable beyond that. These two lists pass Virtualized="false" for the same reason: Virtualize sizes its scroll extent from a fixed ItemSize it never verifies, which a row that grows on demand cannot honor. H0-915's virtualization still applies to every other party list. */ .workspace-issuer-picker__list, .workspace-recipient-picker__list { max-height: calc(4 * 6 * var(--tops-rhythm-rem)); overflow-y: auto; margin: 0; padding: 0 var(--spacing-2); border-left: var(--tops-input-stroke-width) solid var(--tops-neutral-200); border-right: var(--tops-input-stroke-width) solid var(--tops-neutral-200); border-bottom: var(--tops-input-stroke-width) solid var(--tops-neutral-200); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-sizing: border-box; } .workspace-issuer-picker__empty, .workspace-recipient-picker__empty { margin: var(--spacing-2); color: var(--tops-gray-600); font-size: var(--tops-body-xs-size); line-height: var(--tops-body-xs-line); } .workspace-issuer-picker__row, .workspace-recipient-picker__row { display: flex; align-items: center; gap: var(--spacing-2); width: 100%; max-width: 100%; padding: var(--spacing-2) 0; border: 0; border-bottom: var(--tops-input-stroke-width) solid var(--tops-gray-100); background: transparent; text-align: left; cursor: pointer; white-space: normal; } .workspace-issuer-picker__row:hover, .workspace-recipient-picker__row:hover { background: var(--color-brand-blue-50); } .workspace-issuer-picker__row--selected, .workspace-recipient-picker__row--selected { background: var(--tops-brand-100); } .workspace-issuer-picker__avatar, .workspace-recipient-picker__avatar { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--tops-rhythm-rem) * 2); height: calc(var(--tops-rhythm-rem) * 2); border-radius: var(--radius-sm); background: var(--tops-brand-700); color: var(--tops-white); font-size: var(--tops-label-helper-size); font-weight: var(--tops-body-sm-heavy-weight); flex-shrink: 0; } /* BR-002: badge moved from the search-list row to the card name header (issuer picker, recipient picker, and FormEditorContactColumn's two non-editable branches — 4 sites). Reuses the row avatar's size/spacing/square treatment; the row's margin-top (optical alignment against a shorter single-line label) is neutralized in this header context, which aligns the badge with the name's cap height instead. */ .workspace-issuer-card__identity-row { display: flex; align-items: flex-start; gap: var(--spacing-2); flex: 1 1 auto; min-width: 0; } .workspace-issuer-card__identity-row .workspace-issuer-picker__avatar, .workspace-issuer-card__identity-row .workspace-recipient-picker__avatar { margin-top: 0; } .workspace-issuer-picker__row-body, .workspace-recipient-picker__row-body { flex: 1; min-width: 0; } /* BR-004: search-list rows wrap long text instead of truncating — no overflow/ ellipsis/nowrap here. This is the authoritative copy (scoped .razor.css files carry the same rule but can lag); the row is content-sized so a wrapped name simply grows the row taller. */ .workspace-issuer-picker__name, .workspace-recipient-picker__name { display: block; font-size: var(--tops-body-xs-size); font-weight: var(--tops-body-sm-heavy-weight); line-height: var(--tops-body-xs-line); color: var(--tops-brand-700); white-space: normal; overflow-wrap: anywhere; } /* Card title name — bold; section overline labels unchanged. Shared by the Issuer and Recipient card headers (both markups use this class). overflow-wrap: a name already wraps at spaces, but a single token longer than the header spilled outside the card because there was nowhere to break it. Breaking mid-token keeps it inside and grows the header downward instead. */ .workspace-issuer-card__name { font-size: var(--tops-body-sm-size); font-weight: var(--font-weight-bold); line-height: var(--tops-body-sm-line); overflow-wrap: anywhere; } /* BR-004 (search-list rows only): no truncation — see .workspace-issuer-picker__name comment above. Deliberately NOT combined with .workspace-issuer-card__entity-type below (the card header line, not a search-list row) — that trap is called out in SYSTEM-DESIGN Decision 3: the card keeps truncating, only the list rows wrap. */ .workspace-issuer-picker__entity-type, .workspace-recipient-picker__entity-type { display: block; font-size: var(--tops-body-xs-size); line-height: var(--tops-body-xs-line); /* Design Library brand-600 (blue), not brand-700 (dark navy used for the name). */ color: var(--tops-brand-600); } .workspace-issuer-card__entity-type { display: block; font-size: var(--tops-body-xs-size); line-height: var(--tops-body-xs-line); color: var(--tops-brand-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .workspace-issuer-picker__tin, .workspace-recipient-picker__tin { padding: var(--spacing-1) var(--spacing-2); background: var(--tops-gray-100); border: var(--tops-input-stroke-width) solid var(--tops-neutral-200); border-radius: var(--radius-sm); font-size: var(--tops-body-xs-size); line-height: var(--tops-body-xs-line); color: var(--tops-gray-700); flex-shrink: 0; margin-top: calc(var(--spacing-1) / 2); } .workspace-issuer-picker__search .mud-input-slot, .workspace-recipient-picker__search .mud-input-slot, .workspace-issuer-picker__search .mud-input-adornment, .workspace-recipient-picker__search .mud-input-adornment { font-size: var(--tops-body-xs-size) !important; line-height: var(--tops-body-xs-line); } .workspace-contact-section { background: var(--tops-white); } .workspace-contact-section--recipient { margin-top: 0; border-top: none; border-bottom: none; } /* BR-003 header Add/Edit. MudBlazor `.mud-button` sets min-width: 64px — that is why the chrome stays wide after the SVG shrinks. DesignSystemIcon scoped CSS paints stormy-grey, so color needs three classes to win. (That scoped CSS used to load again *after* this file through a direct link in index.html; AT-2691 removed the link, so it now loads only through the app's *.styles.css @import, before this file. The three classes are kept.) Dark navy = Brand 700. */ .workspace-contact-section__actions .workspace-contact-section__icon-btn.mud-button-root { min-width: 0; width: auto; padding: var(--spacing-1); line-height: 0; } .workspace-contact-section__actions .workspace-contact-section__icon-btn.mud-button-root .mud-button-label { min-width: 0; padding: 0; margin: 0; } .workspace-contact-section__icon-btn.mud-button-root .design-system-icon.workspace-contact-section__icon { color: var(--tops-brand-700); width: 20px; height: 20px; } .workspace-contact-block:has(.workspace-contact-readonly-fields) .workspace-issuer-card { /* Keep top corners at card radius (same token as readonly bottom); square the join. */ border-radius: var(--tops-card-radius) var(--tops-card-radius) 0 0; border-bottom: none; } .workspace-contact-readonly-fields { display: grid; /* BR-005/BR-006: two columns is the layout. Which row shows one column is decided by the *data* — a value past the length threshold takes the whole row via --full below — not by the viewport. The track minimum is therefore pinned to half the card: max(5.5rem, calc(50% - var(--spacing-4))) The 50% term makes two tracks fill the card, so auto-fit can never seat a third. The 5.5rem term is BR-006(b): once half the card is narrower than that, two tracks stop fitting and the grid drops to one column on its own, still with no measurement (SYSTEM-DESIGN Decision 1). This replaces a plain `minmax(9rem, 1fr)`, which was calibrated without checking the card it lives in. FormEditorContactColumn sits in the 9fr side of .workspace-editor-layout's 9fr:31fr split, so the card's content box is only ~282px at 1920 — 30px short of the 312px two 9rem tracks needed. It collapsed to a single column at every real width, which silently disabled BR-005 and BR-006(a) as well (with one column every cell already spans it, so --full could not do anything). The same rule overshot in the other direction below 960px, where the editor stacks and the card goes full width: 9rem minimums then fitted four columns, not two. */ grid-template-columns: repeat(auto-fit, minmax(max(5.5rem, calc(50% - var(--spacing-4))), 1fr)); /* BR-005 (Decision 5, reversed 2026-08-25): fields keep their declared order. When a long value is pushed onto its own row and spans it, the half column left behind stays empty and the next field starts below — it is not backfilled. Dense packing did backfill it, which pulled an unrelated field (Street Address 1) up between First Name and Last Name and read as if it belonged to the name. */ grid-auto-flow: row; column-gap: var(--spacing-4); row-gap: var(--spacing-3); margin-top: 0; padding: var(--spacing-4) var(--tops-btn-padding-x-sm); background: var(--tops-gray-100); border: var(--workspace-editor-border-width, calc(var(--tops-input-stroke-width) * 2)) solid var(--tops-card-border); border-top: none; border-radius: 0 0 var(--tops-card-radius) var(--tops-card-radius); box-sizing: border-box; width: 100%; } .workspace-contact-readonly-fields__cell { display: flex; flex-direction: column; gap: calc(var(--spacing-1) / 2); min-width: 0; } /* BR-005: a value over the calibrated length threshold (FormEditorContactPresentation.FullWidthValueLengthThreshold) spans both columns. */ .workspace-contact-readonly-fields__cell--full { grid-column: 1 / -1; } .workspace-contact-readonly-fields__label { font-size: var(--tops-body-sm-size); font-weight: var(--tops-body-sm-heavy-weight); line-height: var(--tops-body-sm-line); color: var(--tops-brand-700); } .workspace-contact-readonly-fields__value { font-size: var(--tops-body-sm-size); font-weight: var(--tops-body-sm-weight); line-height: var(--tops-body-sm-line); color: var(--tops-gray-700); word-break: break-word; } /* Dropdown and popover lists */ .mud-popover .mud-list { background-color: var(--tops-white); border: 1px solid var(--tops-card-border); border-radius: var(--tops-card-radius); color: var(--tops-text-primary); padding: 4px; } .mud-popover .mud-list .mud-list-item { border-radius: 6px; } .mud-popover .mud-list .mud-list-item:hover { background-color: var(--tops-brand-100); } .mud-popover .mud-list .mud-selected-item { background-color: var(--tops-brand-100); color: var(--tops-brand-600); font-weight: 600; } /* Popover calendar shell only — do not border inline field pickers. */ .mud-picker:not(.mud-picker-inline) { border: 1px solid var(--tops-card-border); border-radius: var(--tops-card-radius); } /* Figma date popup is calendar-only. Hide the selected-date toolbar ("2025" / "Sun, 20 Apr") even when the paper is portaled to body. */ .mud-picker-datepicker-toolbar { display: none; } /* Mud sizes .mud-picker-content for toolbar + a 5-week grid and clips overflow. After hiding the toolbar, a 6-week month (Aug 2026) loses days 30/31. Grow the paper so every day stays clickable. */ .mud-picker-content { justify-content: flex-start; min-height: 380px; overflow: visible; } .mud-picker-calendar-transition { min-height: 264px; } .mud-picker-popover-paper { overflow: visible; } .mud-picker .mud-picker-calendar-header { background-color: var(--tops-date-header-bg); border-radius: 6px; color: var(--tops-date-header-color); margin: 4px; padding: 4px; } .mud-picker .mud-picker-calendar-header .mud-button-root, .mud-picker .mud-picker-calendar-header .mud-icon-button, .mud-picker .mud-picker-calendar-header .mud-typography { color: var(--tops-date-header-color); } /* Prev/next month: keep arrows visible on the blue header. Global icon-button hover uses a light surface fill that reads as blank white squares here. */ .mud-picker .mud-picker-calendar-header .mud-icon-button.mud-button-root { background-color: transparent; color: var(--tops-date-header-color); } .mud-picker .mud-picker-calendar-header .mud-icon-button.mud-button-root:hover { background-color: var(--tops-date-header-icon-hover-bg); } .mud-picker .mud-picker-calendar-header .mud-icon-root, .mud-picker .mud-picker-calendar-header .mud-svg-icon, .mud-picker .mud-picker-calendar-header svg { color: var(--tops-date-header-color); fill: currentColor; } .mud-picker-calendar .mud-picker-calendar-week { color: var(--tops-gray-600); font-size: var(--tops-body-sm-size); } .mud-picker-calendar .mud-day { border-radius: 6px; color: var(--tops-gray-700); font-weight: 600; } .mud-picker-calendar .mud-day:hover { background-color: var(--tops-date-day-hover-bg); } .mud-picker-calendar .mud-day.mud-selected, .mud-picker-calendar .mud-day.mud-current.mud-selected { background-color: var(--tops-date-day-selected-bg); color: var(--tops-date-day-selected-color); } .mud-picker-calendar .mud-day.mud-current:not(.mud-selected) { border: 1px solid var(--tops-date-day-today-ring); } /* Checkbox/radio/switch */ .mud-checkbox .mud-typography, .mud-radio-group .mud-radio .mud-typography, .mud-switch .mud-typography { color: var(--tops-gray-700); font-size: 14px; } .mud-switch .mud-switch-track { background-color: var(--tops-stepper-inactive-bg); } .mud-switch.mud-checked .mud-switch-track { background-color: var(--tops-focus-ring); } /* Table/grid */ .mud-table { border-bottom: 1px solid var(--tops-table-border); border-left: 0; border-right: 0; border-top: 1px solid var(--tops-table-border); border-radius: 0; box-shadow: none; overflow: hidden; } .mud-table.mud-paper.mud-elevation-1, .mud-table.mud-paper.mud-elevation-2, .mud-table.mud-paper.mud-elevation-3, .mud-simple-table.mud-paper.mud-elevation-1, .mud-simple-table.mud-paper.mud-elevation-2, .mud-simple-table.mud-paper.mud-elevation-3 { box-shadow: none; } .mud-table .mud-table-container { border-radius: inherit; overflow-x: auto; } .mud-table .mud-table-head, .mud-table .mud-table-body, .mud-table .mud-table-footer { background-color: var(--tops-white); } .mud-table .mud-table-head .mud-table-cell { background-color: var(--tops-table-header-bg); border-bottom: 1px solid var(--tops-table-border); color: var(--tops-table-header-color); font-size: var(--tops-table-header-size); font-weight: var(--tops-table-header-weight); letter-spacing: 0.06em; line-height: var(--tops-table-header-line); padding: var(--tops-table-header-padding-y) var(--tops-table-cell-padding-x); text-transform: uppercase; vertical-align: middle; white-space: nowrap; } /* Keep the full header label on one line even when it wraps a sort trigger or icon (the inner span is inline-flex, which can otherwise wrap the text). This guarantees column header names stay fully visible across every table. */ .mud-table .mud-table-head .mud-table-cell > * { white-space: nowrap; } .mud-table .mud-table-head .mud-table-row { height: var(--tops-table-header-row-height); } .mud-table .mud-table-body .mud-table-cell, .mud-table .mud-table-footer .mud-table-cell { border-bottom: 1px solid var(--tops-table-row-border); color: var(--tops-table-body-color); font-size: var(--tops-table-body-size); font-weight: var(--tops-table-body-weight); line-height: var(--tops-table-body-line); padding: var(--tops-table-body-padding-y) var(--tops-table-cell-padding-x); vertical-align: middle; } .mud-table .mud-table-body .mud-table-row { height: var(--tops-table-row-height); background-color: var(--tops-table-row-base-bg); } .mud-table .mud-table-body .mud-table-row:nth-child(even), .mud-table .mud-table-body tr:nth-child(even) { background-color: var(--tops-table-zebra-bg); } .mud-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell, .mud-table .mud-table-body tr:nth-child(odd) > td { background-color: var(--tops-table-row-base-bg); } .mud-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell, .mud-table .mud-table-body tr:nth-child(even) > td { background-color: var(--tops-table-zebra-bg); } .mud-table-hover .mud-table-body .mud-table-row:hover, .mud-table-hover .mud-table-body tr:hover { background-color: var(--tops-table-row-hover-bg); } /* MudBlazor 9 — table container DOM + cell hover tint */ .mud-table-hover .mud-table-container table tbody tr:hover, .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover { background-color: var(--tops-table-row-hover-bg); } .mud-table-hover .mud-table-container table tbody tr:hover > td, .mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover .mud-table-cell, .mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell, .mud-table-hover .mud-table-body tr:hover > td { background-color: var(--tops-table-row-hover-bg); } .mud-simple-table { border-bottom: 1px solid var(--tops-table-border); border-left: 0; border-right: 0; border-top: 1px solid var(--tops-table-border); border-radius: 0; overflow-x: auto; } .mud-simple-table table { border-collapse: separate; border-spacing: 0; min-width: 100%; width: max-content; } .mud-simple-table thead th { background-color: var(--tops-simple-table-header-bg); border-bottom: 1px solid var(--tops-table-border); color: var(--tops-simple-table-header-color); font-size: var(--tops-table-header-size); font-weight: var(--tops-table-header-weight); letter-spacing: 0.06em; line-height: var(--tops-table-header-line); padding: var(--tops-table-header-padding-y) var(--tops-table-cell-padding-x); text-transform: uppercase; white-space: nowrap; } .mud-simple-table tbody td { border-bottom: 1px solid var(--tops-simple-table-row-border); color: var(--tops-table-body-color); font-size: var(--tops-table-body-size); font-weight: var(--tops-table-body-weight); line-height: var(--tops-table-body-line); padding: var(--tops-table-body-padding-y) var(--tops-table-cell-padding-x); vertical-align: middle; } .mud-simple-table tbody tr { height: var(--tops-table-row-height); background-color: var(--tops-table-row-base-bg); } .mud-simple-table tbody tr:nth-child(even) { background-color: var(--tops-table-zebra-bg); } .mud-simple-table tbody tr:nth-child(odd) td { background-color: var(--tops-table-row-base-bg); } .mud-simple-table tbody tr:nth-child(even) td { background-color: var(--tops-table-zebra-bg); } .mud-simple-table tbody tr:hover { background-color: var(--tops-table-row-hover-bg); } /* Table checkbox — let MudBlazor render its default checkbox glyph (an outlined square SVG when unchecked, filled with a check when checked). The previous overrides drew an invisible 16x16 white-on-white square (no border, border-radius: 0) and tinted the SVG inside gray, which made the checkbox effectively disappear in the All Forms grid. We only set layout here; Color="Color.Primary" on the markup pulls brand-500 from the palette for the checked state. */ .mud-table .mud-checkbox, .mud-simple-table .mud-checkbox { align-items: center; display: inline-flex; margin: 0; vertical-align: middle; } /* Size the glyph only. Mud v9 state is on the button (mud-checkbox-true/false/null). H0-1050 AC7: checked fill is --tops-brand-700. The ticket name --tops-color-primary does not exist; --tops-primary is a CTA shade. Mud paints the filled glyph via --checkbox-color — color on the icon alone is not enough (Forms already does this). */ .mud-table .mud-checkbox .mud-icon-root, .mud-simple-table .mud-checkbox .mud-icon-root { font-size: var(--tops-table-checkbox-size); height: var(--tops-table-checkbox-size); width: var(--tops-table-checkbox-size); } .mud-table .mud-checkbox > .mud-button-root.mud-checkbox-true, .mud-table .mud-checkbox > .mud-button-root.mud-checkbox-null, .mud-simple-table .mud-checkbox > .mud-button-root.mud-checkbox-true, .mud-simple-table .mud-checkbox > .mud-button-root.mud-checkbox-null { --checkbox-color: var(--tops-brand-700); } .mud-table .mud-checkbox > .mud-button-root.mud-checkbox-true .mud-icon-root, .mud-table .mud-checkbox > .mud-button-root.mud-checkbox-null .mud-icon-root, .mud-simple-table .mud-checkbox > .mud-button-root.mud-checkbox-true .mud-icon-root, .mud-simple-table .mud-checkbox > .mud-button-root.mud-checkbox-null .mud-icon-root { color: var(--tops-brand-700); } .mud-table .mud-checkbox > .mud-button-root.mud-checkbox-false .mud-icon-root, .mud-simple-table .mud-checkbox > .mud-button-root.mud-checkbox-false .mud-icon-root { color: var(--tops-brand-600); } .mud-table .mud-table-body .mud-table-cell a, .mud-table .mud-table-body .mud-table-cell .mud-link, .mud-simple-table tbody td a, .mud-simple-table tbody td .mud-link { color: var(--tops-brand-500); } /* Action icon-buttons inside tables (e.g. row Actions menu trigger). Excludes anything inside a checkbox so MudCheckBox keeps its own coloring. */ .mud-table .mud-icon-button:not([class*="error"]):not([class*="warning"]):not([class*="success"]):not([class*="info"]):not(.mud-checkbox *), .mud-simple-table .mud-icon-button:not([class*="error"]):not([class*="warning"]):not([class*="success"]):not([class*="info"]):not(.mud-checkbox *) { color: var(--tops-action-icon-color); } .mud-table .mud-icon-button:not(.mud-checkbox *):hover, .mud-simple-table .mud-icon-button:not(.mud-checkbox *):hover { background-color: var(--tops-action-icon-hover-bg); } /* AdamsTaxCheckBox — Recipients 14×14 CSS glyph. Default for new checkboxes. Table selectors must match .mud-table .mud-checkbox .mud-icon-root (0,3,0). */ .adamstax-checkbox { --adamstax-checkbox-size: 14px; align-items: center; display: inline-flex; line-height: 0; } .adamstax-checkbox .mud-checkbox { column-gap: var(--spacing-2); margin: 0; padding: 0; } .adamstax-checkbox .mud-checkbox .mud-button-root.mud-icon-button, .mud-table .adamstax-checkbox .mud-checkbox .mud-button-root.mud-icon-button, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-button-root.mud-icon-button, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-button-root.mud-icon-button { height: var(--adamstax-checkbox-size); margin: 0; min-height: var(--adamstax-checkbox-size); min-width: var(--adamstax-checkbox-size); overflow: visible; padding: 0; width: var(--adamstax-checkbox-size); } .adamstax-checkbox .mud-checkbox .mud-icon-root, .mud-table .adamstax-checkbox .mud-checkbox .mud-icon-root, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-icon-root, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-icon-root { background-color: var(--color-white-100); border: 1.75px solid currentColor; border-radius: 2px; box-shadow: none; box-sizing: border-box; color: var(--color-brand-blue-600); display: inline-block; font-size: 0; height: var(--adamstax-checkbox-size); line-height: 0; overflow: hidden; position: relative; width: var(--adamstax-checkbox-size); } .adamstax-checkbox .mud-checkbox .mud-icon-root *, .adamstax-checkbox .mud-checkbox .mud-icon-root svg, .adamstax-checkbox .mud-checkbox .mud-icon-root path, .adamstax-checkbox .mud-checkbox .mud-icon-root::before, .mud-table .adamstax-checkbox .mud-checkbox .mud-icon-root *, .mud-table .adamstax-checkbox .mud-checkbox .mud-icon-root svg, .mud-table .adamstax-checkbox .mud-checkbox .mud-icon-root path, .mud-table .adamstax-checkbox .mud-checkbox .mud-icon-root::before, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-icon-root *, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-icon-root svg, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-icon-root path, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-icon-root::before, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-icon-root *, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-icon-root svg, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-icon-root path, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-icon-root::before { display: none; } .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root, .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root, .mud-table .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root, .mud-table .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root { background-color: currentColor; } .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after, .mud-table .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .mud-table .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after { background-color: var(--color-white-100); content: ""; inset: 0; position: absolute; } .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .mud-table .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-checkbox-true .mud-icon-root::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='black' fill-rule='evenodd' d='M11.695 3.705a.7.7 0 0 1 0 .99l-5.6 5.6a.7.7 0 0 1-.99 0l-2.8-2.8a.7.7 0 1 1 .99-.99L5.6 8.81l5.105-5.105a.7.7 0 0 1 .99 0Z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='black' fill-rule='evenodd' d='M11.695 3.705a.7.7 0 0 1 0 .99l-5.6 5.6a.7.7 0 0 1-.99 0l-2.8-2.8a.7.7 0 1 1 .99-.99L5.6 8.81l5.105-5.105a.7.7 0 0 1 .99 0Z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after, .mud-table .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after, .mud-simple-table .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after, .recipients-table .recipients-col-select .adamstax-checkbox .mud-checkbox .mud-checkbox-null .mud-icon-root::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='3.5' y='6.25' width='7' height='1.5' rx='0.75' fill='black'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='3.5' y='6.25' width='7' height='1.5' rx='0.75' fill='black'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } /* Dialog + overlays */ .mud-overlay-dialog { background-color: var(--tops-overlay-bg) !important; } .mud-dialog { background-color: var(--tops-card-bg); border: 1px solid var(--tops-card-border); border-radius: var(--tops-card-radius); box-shadow: var(--tops-card-shadow); min-width: min(var(--tops-dialog-min-width), calc(100vw - 2rem)); } .mud-dialog-title { color: var(--tops-brand-600); font-size: var(--tops-dialog-title-size); font-weight: 600; letter-spacing: var(--tops-dialog-title-spacing); line-height: var(--tops-dialog-title-line); } /* Confirm prompts put the title in the body, so it does not inherit .mud-dialog-title. */ .mud-dialog.adamstax-confirm-dialog > .mud-dialog-content, .mud-dialog.adamstax-confirm-dialog > .mud-dialog-content:first-child { padding: 24px 24px 0 !important; } .mud-dialog.discard-changes-dialog, .mud-dialog.discard-changes-dialog.mud-dialog-width-xs, .mud-dialog.discard-changes-dialog.mud-dialog-width-full { max-width: min(440px, calc(100vw - 2rem)); min-width: min(440px, calc(100vw - 2rem)); width: min(440px, calc(100vw - 2rem)); } .mud-dialog.discard-changes-dialog.global-recipient-inactive-confirm-dialog, .mud-dialog.discard-changes-dialog.global-recipient-inactive-confirm-dialog.mud-dialog-width-xs, .mud-dialog.discard-changes-dialog.global-recipient-inactive-confirm-dialog.mud-dialog-width-full, .mud-dialog.discard-changes-dialog.global-recipient-active-confirm-dialog, .mud-dialog.discard-changes-dialog.global-recipient-active-confirm-dialog.mud-dialog-width-xs, .mud-dialog.discard-changes-dialog.global-recipient-active-confirm-dialog.mud-dialog-width-full { max-width: min(520px, calc(100vw - 2rem)); min-width: min(520px, calc(100vw - 2rem)); width: min(520px, calc(100vw - 2rem)); } .mud-dialog.discard-changes-dialog > .mud-dialog-title { display: none; } .mud-dialog.discard-changes-dialog .mud-dialog-content { padding: 24px !important; position: relative; } .mud-dialog.discard-changes-dialog .discard-changes-dialog__close { align-items: center; background: transparent; border: 0; color: var(--color-stormy-grey-500); cursor: pointer; display: inline-flex; height: 24px; justify-content: center; padding: 0; position: absolute; right: 24px; top: 24px; width: 24px; } .mud-dialog.discard-changes-dialog .discard-changes-dialog__title { color: var(--color-brand-blue-600); font-family: var(--tops-body-font); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 32px 16px 0; } .mud-dialog.discard-changes-dialog .discard-changes-dialog__message { color: var(--color-stormy-grey-500); font-family: var(--tops-body-font); font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0; } .mud-dialog.discard-changes-dialog .discard-changes-dialog__actions { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 24px; } .mud-dialog.global-recipient-inactive-confirm-dialog .discard-changes-dialog__title, .mud-dialog.global-recipient-active-confirm-dialog .discard-changes-dialog__title { margin-bottom: 20px; } .mud-dialog.global-recipient-inactive-confirm-dialog .discard-changes-dialog__actions, .mud-dialog.global-recipient-active-confirm-dialog .discard-changes-dialog__actions { margin-top: 32px; } /* MudCheckBox keeps an 8px column-gap for its own label slot. This dialog puts the label in a sibling, so that slot plus the row gap doubled the space. */ .mud-dialog.global-recipient-inactive-confirm-dialog .global-recipient-inactive-confirm-dialog__checkbox-row { align-items: center; gap: 12px; margin-left: 1.25rem; } .mud-dialog.global-recipient-inactive-confirm-dialog .global-recipient-inactive-confirm-dialog__checkbox-row .mud-checkbox { column-gap: 0; } .mud-dialog.global-recipient-inactive-confirm-dialog .global-recipient-inactive-confirm-dialog__checkbox-text { line-height: 14px; padding-top: 0; } /* Design-system Dialog (P2 Void / Remove): 12px radius, title row with a close button, body, then a grey footer band with the actions on the right. */ .mud-dialog.adamstax-confirm-dialog { border: none; border-radius: var(--radius-lg); overflow: hidden; } .mud-dialog.adamstax-confirm-dialog > .mud-dialog-title { padding: 20px 24px 12px; } /* MudDialog wraps the body in a focus trap, so the body is not the title's sibling. */ .mud-dialog.adamstax-confirm-dialog:has(> .mud-dialog-title) .mud-dialog-content { padding: 0 24px 20px !important; } .mud-dialog.adamstax-confirm-dialog .adamstax-confirm-dialog__header { display: flex; align-items: flex-start; gap: 16px; } .mud-dialog.adamstax-confirm-dialog .adamstax-confirm-dialog__title { flex: 1 1 auto; min-width: 0; color: var(--color-brand-blue-600); font-family: var(--tops-h2-font); font-size: var(--tops-h2-size); font-weight: var(--tops-h2-weight); line-height: var(--tops-h2-line); letter-spacing: 0; margin: 0; } /* A dialog that still puts its title in the body (no TitleContent) keeps the old spacing. */ .mud-dialog.adamstax-confirm-dialog:not(:has(> .mud-dialog-title)) .adamstax-confirm-dialog__title { margin: 0 0 24px; } .mud-dialog.adamstax-confirm-dialog .adamstax-confirm-dialog__close { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; margin: -2px -4px 0 0; border-radius: var(--radius-md); color: var(--color-brand-blue-600); } .mud-dialog.adamstax-confirm-dialog .adamstax-confirm-dialog__close .mud-icon-root { font-size: 18px; } .mud-dialog.adamstax-confirm-dialog .adamstax-confirm-dialog__message { margin: 0; color: var(--color-stormy-grey-900); font-size: 14px; line-height: 1.6; } .mud-dialog.adamstax-confirm-dialog .mud-dialog-actions { gap: 8px; padding: 16px 24px; border-top: 1px solid var(--tops-card-border); background: var(--tops-card-header-bg); } .mud-dialog-content { color: var(--tops-gray-700); } /* H0-1270: bulk delete preview dialog uses custom internal padding via its own .recipient-bulk-delete-preview-dialog wrapper. MudDialog applies padding-top: 20px on .mud-dialog-content:first-child when no is rendered; the :first-child selector is higher specificity than a plain class match, so !important is required to zero it out and let the component's scoped CSS own all spacing. */ .mud-dialog.recipient-bulk-delete-preview-dialog-root { max-width: min(680px, calc(100vw - 2rem)); } .mud-dialog.recipient-bulk-delete-preview-dialog-root .mud-dialog-content, .mud-dialog.recipient-bulk-delete-preview-dialog-root > .mud-dialog-content:first-child { padding: 0 !important; } /* Issuer delete preview owns its 24px inset. Mud's title bar and 8px 24px content padding stack on top of that and push the copy past 40px. */ .mud-dialog.issuer-delete-preview-dialog .mud-dialog-title { display: none; } .mud-dialog.issuer-delete-preview-dialog .mud-dialog-content, .mud-dialog.issuer-delete-preview-dialog > .mud-dialog-content:first-child { padding: 0 !important; } /* Plain confirm dialogs: 24px inset, no divider above the buttons. */ .mud-dialog.unverified-tin-dialog .mud-dialog-title { padding: 24px 88px 0 24px; } .mud-dialog.unverified-tin-dialog .mud-button-close { top: 24px; right: 24px; } .mud-dialog.delivery-warning-dialog .mud-button-close { top: 24px; right: 24px; } .mud-dialog.unverified-tin-dialog .mud-dialog-content { padding: 24px 24px 0; } .mud-dialog.unverified-tin-dialog .mud-dialog-actions { border-top: none; padding: 24px; } .mud-dialog.delivery-warning-dialog .mud-dialog-actions { border-top: none; padding: 24px; } .mud-dialog.delivery-warning-dialog, .mud-dialog.delivery-warning-dialog.mud-dialog-width-full { border-radius: 16px; display: flex; flex-direction: column; max-width: min(560px, calc(100vw - 2rem)); min-width: min(560px, calc(100vw - 2rem)); overflow: hidden; width: min(560px, calc(100vw - 2rem)); } /* Status History is 728px (PoC 1813:9482). Beats .mud-dialog-width-md (960px) if Medium/FullWidth is set. */ .mud-dialog.forms-status-history-dialog-root, .mud-dialog.forms-status-history-dialog-root.mud-dialog-width-md, .mud-dialog.forms-status-history-dialog-root.mud-dialog-width-full, .mud-dialog.forms-status-history-dialog-root.mud-dialog-width-md.mud-dialog-width-full { box-sizing: border-box; border-radius: var(--radius-md); width: 728px; min-width: 728px; max-width: 728px; } /* Focus trap sits between .mud-dialog and .mud-dialog-content, so a child combinator misses it. Mud's .mud-dialog-content:first-child padding needs !important, same as the other custom dialogs. */ .mud-dialog.forms-status-history-dialog-root .mud-dialog-content, .mud-dialog.forms-status-history-dialog-root > .mud-dialog-content, .mud-dialog.forms-status-history-dialog-root .mud-dialog-content:first-child { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0 !important; overflow: hidden; } .mud-dialog.delivery-warning-dialog .mud-dialog-title { align-items: center; background: var(--color-brand-blue-100); display: flex; justify-content: flex-start; padding: 24px; text-align: left; } .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__title { color: var(--tops-brand-600); font-weight: 600; text-align: left; } .mud-dialog.delivery-warning-dialog .mud-dialog-content { padding: 24px 24px 0; text-align: left; } .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__body { color: var(--tops-gray-700); text-align: left; } .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__actions, .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__row { width: 100%; } .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__row { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; width: 100%; } .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__ack { flex: 0 1 auto; text-align: left; } .mud-dialog.delivery-warning-dialog .delivery-warning-dialog__buttons { flex: 0 0 auto; } .mud-dialog-actions { border-top: 1px solid var(--tops-divider-light); } /* Linked issuers: same 24px inset and divider weight as the other dialogs. Mud's title/content/action padding and the faint action rule sit on top of the card. */ .mud-dialog.recipient-issuer-association-dialog .mud-dialog-title, .mud-dialog.recipient-bulk-link-issuer-dialog .mud-dialog-title, .mud-dialog.recipient-bulk-unlink-issuer-dialog .mud-dialog-title { border-bottom: 1px solid var(--tops-divider); padding: 24px 64px 16px 24px; } .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-description { color: var(--color-stormy-grey-400); font-size: 16px; font-weight: 400; line-height: 1.4; } .mud-dialog.recipient-issuer-association-dialog .mud-button-close, .mud-dialog.recipient-bulk-link-issuer-dialog .mud-button-close, .mud-dialog.recipient-bulk-unlink-issuer-dialog .mud-button-close { right: 24px; top: 24px; } .mud-dialog.recipient-issuer-association-dialog .mud-dialog-content, .mud-dialog.recipient-issuer-association-dialog > .mud-dialog-content, .mud-dialog.recipient-bulk-link-issuer-dialog .mud-dialog-content, .mud-dialog.recipient-bulk-link-issuer-dialog > .mud-dialog-content, .mud-dialog.recipient-bulk-unlink-issuer-dialog .mud-dialog-content, .mud-dialog.recipient-bulk-unlink-issuer-dialog > .mud-dialog-content { padding: 16px 24px 0 !important; } .mud-dialog.recipient-issuer-association-dialog .mud-dialog-actions, .mud-dialog.recipient-bulk-link-issuer-dialog .mud-dialog-actions, .mud-dialog.recipient-bulk-unlink-issuer-dialog .mud-dialog-actions { border-top: 1px solid var(--tops-divider); padding: 16px 24px 24px; } .mud-dialog.recipient-issuer-association-dialog--unlink .mud-dialog-actions { border-top: none; } .mud-dialog.recipient-issuer-association-dialog--unlink .recipient-issuer-association-row--selectable .mud-checkbox { column-gap: 0; } /* Same search field as the issuer-filter and Add Recipient popups. */ .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search .mud-input-control, .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search .mud-input, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search .mud-input-control, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search .mud-input, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search .mud-input-control, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search .mud-input { margin: 0; padding-bottom: 0; } .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search .mud-input-control-input-container, .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search .mud-input-outlined, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search .mud-input-control-input-container, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search .mud-input-outlined, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search .mud-input-control-input-container, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search .mud-input-outlined { height: 2rem; min-height: 2rem; background: var(--color-white-100); } .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search .mud-input-outlined-border, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search .mud-input-outlined-border, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search .mud-input-outlined-border { border: 1px solid var(--color-stormy-grey-200); border-radius: var(--radius-md); } .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search input, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search input, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search input { color: var(--color-brand-blue-600); font-family: var(--tops-body-font); font-size: var(--tops-body-md-size); } .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search input::placeholder, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search input::placeholder, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search input::placeholder { color: var(--color-stormy-grey-400); opacity: 1; } .mud-dialog.recipient-issuer-association-dialog .recipient-issuer-association-search .mud-input-adornment .mud-icon-root, .mud-dialog.recipient-bulk-link-issuer-dialog .recipient-issuer-association-search .mud-input-adornment .mud-icon-root, .mud-dialog.recipient-bulk-unlink-issuer-dialog .recipient-issuer-association-search .mud-input-adornment .mud-icon-root { color: var(--color-stormy-grey-400); font-size: var(--font-size-lg); } .mud-dialog.tops-form-dialog .mud-dialog-content .mud-input-control { margin-bottom: 0.75rem; } .mud-dialog.tops-form-dialog .mud-dialog-content .mud-input-control:last-child { margin-bottom: 0; } .mud-dialog.tops-form-dialog { width: min(640px, calc(100vw - 2rem)); } /* Alerts */ .mud-alert { border: 1px solid transparent; border-radius: var(--tops-card-radius); font-size: 14px; } .mud-alert.mud-alert-text-info, .mud-alert.mud-alert-filled-info { background-color: var(--tops-alert-info-bg); border-color: var(--tops-cta-200); color: var(--tops-brand-600); } .mud-alert.mud-alert-text-success, .mud-alert.mud-alert-filled-success { background-color: var(--tops-success-bg); border-color: var(--tops-success-label); color: var(--tops-success); } .mud-alert.mud-alert-text-warning, .mud-alert.mud-alert-filled-warning { background-color: var(--tops-alert-warning-surface); border-color: var(--tops-alert-warning-outline); color: var(--tops-alert-warning-ink); } /* Warning-alert icon: swap the stock Material glyph for the rounded-outline triangle the design calls for, tinted with the ink token. Done here (not per alert) so every Severity.Warning alert app-wide gets it. The stock glyph is hidden and a mask paints the custom SVG — the mask defines the shape's alpha, background-color supplies the color. NOTE: this couples to MudBlazor's .mud-alert-icon > .mud-icon-root DOM; revisit if a MudBlazor upgrade changes it. */ .mud-alert.mud-alert-text-warning .mud-alert-icon > .mud-icon-root, .mud-alert.mud-alert-filled-warning .mud-alert-icon > .mud-icon-root { display: none; } .mud-alert.mud-alert-text-warning .mud-alert-icon::before, .mud-alert.mud-alert-filled-warning .mud-alert-icon::before { content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; background-color: var(--tops-alert-warning-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.29%203.86%201.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200Z'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10.29%203.86%201.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200Z'/%3E%3Cpath%20d='M12%209v4'/%3E%3Cpath%20d='M12%2017h.01'/%3E%3C/svg%3E") center / contain no-repeat; } .mud-alert.mud-alert-text-error, .mud-alert.mud-alert-filled-error { background-color: var(--tops-error-bg); border-color: var(--tops-error); color: var(--tops-error); } /* Tabs */ .mud-tabs-toolbar { border-bottom: 1px solid var(--tops-divider); } .mud-tab { color: var(--tops-gray-500); font-size: var(--tops-body-size); font-weight: 600; text-transform: none; } .mud-tab.mud-tab-active { color: var(--tops-brand-600); } .mud-tab-slider { background-color: var(--tops-sunglow); } /* Chips */ .mud-chip { border-radius: var(--tops-chip-radius); font-size: var(--tops-body-sm-size); font-weight: 600; } .mud-chip.mud-chip-filled { background-color: var(--tops-chip-bg); color: var(--tops-chip-color); } .mud-chip.mud-chip-outlined { border-color: var(--tops-chip-color); color: var(--tops-chip-color); } /* Progress + pagination + badge + tooltip + snackbar */ .mud-progress-linear { border-radius: 999px; height: var(--tops-progress-height); } .mud-progress-linear .mud-progress-linear-buffer { background-color: var(--tops-stepper-inactive-bg); } .mud-progress-circular { color: var(--tops-primary); } .mud-pagination .mud-button-root { border: 1px solid var(--tops-divider); border-radius: var(--tops-pagination-radius); min-height: 32px; min-width: 32px; padding: 0 8px; } .mud-badge { background-color: var(--tops-brand-500); color: var(--tops-white); font-size: 10px; font-weight: 600; min-width: 16px; } .mud-tooltip { background-color: var(--tops-tooltip-bg, var(--tops-brand-700)); border-radius: var(--radius-sm, 4px); color: var(--tops-tooltip-color); font-size: var(--tops-body-sm-size); line-height: var(--tops-body-sm-line); max-width: 260px; padding: 8px 12px; } .mud-tooltip .mud-tooltip-arrow { color: var(--tops-tooltip-bg, var(--tops-brand-700)); } .mud-snackbar { border-radius: var(--tops-card-radius); font-size: 14px; } .mud-snackbar-success { background-color: var(--tops-success); color: var(--tops-white); } .mud-snackbar-error { background-color: var(--tops-error); color: var(--tops-white); } .mud-snackbar-warning { background-color: var(--tops-alert); color: var(--tops-brand-600); } .mud-snackbar-info { background-color: var(--tops-primary); color: var(--tops-white); } .mud-main-content { overflow-x: clip; } /* Sticky sidebars (checkout, prepaid) live inside main content; clip breaks position: sticky. */ .helper-layout .mud-main-content { overflow: visible; } /* Print page: do not let the two-pane grid grow the document. Outer scroll would drag the print footer into the middle of the viewport. */ html:has(.submission-print-page), body:has(.submission-print-page) { height: 100%; overflow: hidden; } .helper-layout.tops-shell .mud-main-content:has(.submission-print-page) { overflow: hidden; } .mud-main-content .mud-grid-item { min-width: 0; } .mud-main-content .mud-table-container, .mud-main-content .mud-simple-table { max-width: 100%; overflow-x: auto; } /* Focus visibility */ .mud-button-root:focus-visible, .mud-icon-button:focus-visible, .mud-link:focus-visible, .mud-nav-link:focus-visible, .mud-tab:focus-visible, .mud-input-slot:focus-visible { outline: 2px solid var(--tops-primary); outline-offset: 2px; } /* * Helper shell overrides (Design Library 3.0: side nav 1899-414, top bar 2029-2175; * in-situ composition Helper 3.0_Master 3629-13696). * Scope to .helper-layout so Admin keeps existing dark shell. */ .helper-layout .mud-appbar { background-color: var(--tops-white) !important; border-bottom: none; box-shadow: none !important; color: var(--color-brand-blue-600) !important; height: var(--helper-appbar-height, 5rem); min-height: var(--helper-appbar-height, 5rem); } /* H0-1383 AC3 / Master 3629-13696: white top bar starts to the right of the rail. Overlay (<960) keeps a full-width bar so the hamburger can sit in chrome. */ .helper-layout.tops-shell.tops-nav-expanded:not(.helper-layout--overlay) .mud-appbar { left: 222px !important; margin-left: 0 !important; right: 0 !important; width: calc(100% - 222px) !important; } .helper-layout.tops-shell.tops-nav-mini:not(.helper-layout--overlay) .mud-appbar { left: 72px !important; margin-left: 0 !important; right: 0 !important; width: calc(100% - 72px) !important; } .helper-layout .mud-appbar .mud-toolbar { box-sizing: border-box; height: var(--helper-appbar-height, 5rem); min-height: var(--helper-appbar-height, 5rem); padding-left: 24px; padding-right: 24px; } /* Keep the 376 lockup at native size. A global img { max-width: 100% } would shrink the whole wordmark. Narrow chrome clips after "adams" (178px) instead of swapping to the 144 packed mark. */ .helper-layout .helper-brand-lockup img { height: 29px !important; max-width: none !important; width: 376px !important; } .helper-layout .mud-drawer { background-color: var(--color-brand-blue-600) !important; border-right: none; } .helper-layout .mud-appbar .mud-icon-root, .helper-layout .mud-appbar .mud-typography, .helper-layout .mud-appbar .mud-link, .helper-layout .mud-appbar .design-system-icon { color: var(--color-brand-blue-600) !important; } /* DesignSystemIcon defaults to stormy-grey/600. Rail glyphs must inherit item/toggle color (blue-200 default, blue-600 active). */ .helper-layout .helper-rail .design-system-icon { color: inherit; } /* Expanded create CTA is Figma 191×46 / radius 12, not the compact 40px urgent. */ .helper-layout .helper-rail__cta.mud-button-root.mud-button-filled.btn-urgent, .helper-layout .helper-rail__cta.mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon, .helper-layout .helper-rail__cta.mud-button-root.mud-button-filled.btn-urgent:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large), .helper-layout .helper-rail__cta.mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large), .side-nav-catalog__cta.mud-button-root.mud-button-filled.btn-urgent, .side-nav-catalog__cta.mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon, .side-nav-catalog__cta.mud-button-root.mud-button-filled.btn-urgent:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large), .side-nav-catalog__cta.mud-button-root.mud-button-filled.btn-urgent.btn-urgent--start-icon:not(.mud-button-filled-size-small):not(.mud-button-filled-size-large) { border-radius: var(--radius-lg, 12px) !important; box-shadow: none !important; font-family: var(--tops-font-inter, Inter, sans-serif); font-size: 16px !important; font-weight: var(--font-weight-semibold, 600) !important; gap: 8px !important; height: 46px !important; line-height: 1.6; max-width: 191px !important; min-height: 46px !important; min-width: 0 !important; padding: 8px 24px !important; width: 100%; } .helper-layout .helper-rail__cta .mud-icon-root, .side-nav-catalog__cta .mud-icon-root { font-size: 14px; height: 14px; width: 14px; } .helper-layout .helper-rail__fab .mud-icon-root, .helper-layout .helper-rail__fab-glyph { color: var(--color-brand-blue-700); font-size: 14px !important; height: 14px !important; width: 14px !important; } @media (max-width: 767px) { .mud-dialog { min-width: calc(100vw - 1rem); } } /* * Admin shell — app bar only; drawer width/rail layout use .tops-shell (tops-shell.css). * Drawer background, expanded nav, and collapsed rail colors: .mud-drawer / .mud-navmenu / .helper-nav-rail-item above. */ .admin-layout .mud-appbar.admin-appbar { background-color: var(--tops-brand-700) !important; color: var(--tops-white) !important; } /* Recipients tab bar — thin grey baseline across the card. Active tab draws a 2px navy stroke only under its hit area (left edge to end of label). No visible box around the tab. Table keeps its own top stroke. */ .recipients-tabs .recipients-tab-bar.mud-tabs { flex: 1 1 auto; width: auto !important; min-width: 0; } .recipients-tab-bar, .recipients-tab-bar *, .recipients-tab-bar .mud-tabs-panels { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } .recipients-tab-bar .mud-tabs-panels { display: none !important; height: 0 !important; padding: 0 !important; border: 0 !important; } .recipients-tab-bar [class*="mud-tabs-tabbar"], .recipients-tab-bar .mud-tabs-toolbar, .recipients-tab-bar .mud-toolbar { background: transparent !important; background-color: transparent !important; border-bottom: 0 !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; padding: 0 !important; overflow: visible !important; } .recipients-tab-bar [class*="mud-tabs-tabbar"] .mud-tabs-toolbar-content, .recipients-tab-bar .mud-tabs-tabbar-wrapper, .recipients-tab-bar .mud-tooltip-root { justify-content: flex-start !important; min-height: 0 !important; align-items: stretch !important; height: 100%; } .recipients-tab-bar .mud-tab { position: relative; font-size: 0.875rem; font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--color-stormy-grey-500); min-width: auto !important; max-width: fit-content !important; min-height: 0 !important; height: auto !important; flex: 0 0 auto !important; align-self: stretch; padding: 0.625rem 0.25rem 0.5rem; margin: 0 1.5rem 0 0 !important; background: transparent !important; border: 0 !important; overflow: visible; } .recipients-tab-bar .mud-tab:first-child { margin-left: 0 !important; margin-right: 0.25rem !important; padding-left: 1.25rem; padding-right: 1.75rem; } .recipients-tab-bar .mud-tab-active { color: var(--tops-brand-600) !important; font-weight: 600; border: 0 !important; } .recipients-tab-bar .mud-tab-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background-color: var(--tops-brand-600); pointer-events: none; } .recipients-tab-bar .mud-tab.mud-disabled { color: var(--color-stormy-grey-400); } .recipients-tab-bar [class*="mud-tab-slider"], .recipients-tab-bar [class*="mud-tabs-slider"] { display: none !important; height: 0 !important; } /* Recipients / Issuers search field — misty-grey-100 fill per Figma (H0-1050) */ .recipients-search-field .mud-input-control, .recipients-search-field .mud-input, .recipients-search-field .mud-input-slot, .recipients-search-field .mud-input-outlined, .recipients-search-field .mud-input-root, .recipients-search-field .mud-input-root-outlined, .issuers-search-field .mud-input-control, .issuers-search-field .mud-input, .issuers-search-field .mud-input-slot, .issuers-search-field .mud-input-outlined, .issuers-search-field .mud-input-root, .issuers-search-field .mud-input-root-outlined { background-color: var(--color-misty-grey-100) !important; border-radius: 8px !important; height: var(--tops-input-height); margin-top: 0; margin-bottom: 0; } .recipients-search-field .mud-input-outlined-border, .issuers-search-field .mud-input-outlined-border { border-color: var(--color-misty-grey-200) !important; border-radius: 8px !important; } .recipients-search-field .mud-input-adornment-start, .issuers-search-field .mud-input-adornment-start { background-color: var(--color-misty-grey-100) !important; } /* Shared with the Recipients list. Scoped copies on Recipients.razor cannot reach other pages. */ .recipients-search-wrap { flex: 0 0 auto; width: 25.8125rem; max-width: 100%; height: var(--tops-input-height); } .recipients-filter-activator, .recipients-sort-activator { display: inline-flex; align-items: center; gap: var(--spacing-2); box-sizing: border-box; height: var(--tops-input-height); padding-inline: var(--tops-btn-padding-x); border: 1px solid var(--color-misty-grey-200); border-radius: 8px; background-color: var(--color-misty-grey-100); color: var(--color-brand-blue-600); font-family: var(--tops-btn-font); font-size: var(--tops-body-sm-size); font-weight: 500; line-height: 1; cursor: pointer; user-select: none; } .recipients-filter-activator:hover, .recipients-filter-activator--open, .recipients-sort-activator:hover, .recipients-sort-activator--open { background-color: var(--color-misty-grey-200); } .recipients-filter-activator:focus-visible, .recipients-sort-activator:focus-visible { outline: 2px solid var(--tops-brand-500); outline-offset: 2px; } .recipients-tin-pill { display: inline-flex; align-items: center; box-sizing: border-box; min-height: var(--tops-btn-min-height-sm); padding: 0 6px; border-radius: var(--radius-sm); background: var(--color-brand-blue-100); border: 1px solid var(--color-brand-blue-200); font-size: var(--tops-body-xs-size); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-brand-blue-700); } /* Issuers list — View forms link navy (brand-blue/700), not Mud primary blue. */ .mud-button-root.issuers-view-forms-link, .mud-button-root.issuers-view-forms-link .mud-button-label, .mud-button-root.issuers-view-forms-link .mud-icon-root { color: var(--color-brand-blue-700) !important; } .mud-button-root.issuers-view-forms-link:hover, .mud-button-root.issuers-view-forms-link:hover .mud-button-label, .mud-button-root.issuers-view-forms-link:hover .mud-icon-root { color: var(--color-brand-blue-700) !important; } /* Recipients / Issuers header Import — outlined secondary is transparent; fill white on the page canvas. */ .recipients-header-actions .mud-button-outlined.mud-button-outlined-primary, .recipients-header-import.mud-button-outlined, .issuers-header-actions .mud-button-outlined.mud-button-outlined-primary, .issuers-header-import.mud-button-outlined { background-color: var(--color-white-100); } /* Recipients Sort/Filter toolbar buttons — same 36px row as search + All issuers */ .recipients-toolbar-btn.mud-button-root, .mud-button-root.recipients-toolbar-btn { background-color: var(--color-misty-grey-100) !important; color: var(--color-brand-blue-600) !important; border: 1px solid var(--color-misty-grey-200) !important; border-radius: 8px !important; box-shadow: none !important; box-sizing: border-box; height: var(--tops-input-height) !important; min-height: var(--tops-input-height) !important; max-height: var(--tops-input-height); padding-block: 0 !important; padding-inline: var(--tops-btn-padding-x) !important; line-height: 1; font-size: var(--tops-btn-font-size); font-weight: 500; } .recipients-toolbar-btn.mud-button-root .mud-button-label, .mud-button-root.recipients-toolbar-btn .mud-button-label { display: inline-flex; align-items: center; gap: var(--spacing-2); } .recipients-toolbar-btn.mud-button-root .mud-button-icon-start, .mud-button-root.recipients-toolbar-btn .mud-button-icon-start { margin-inline-start: 0; margin-inline-end: 0; } .mud-button-root.recipients-sort-btn .mud-button-icon-start, .mud-button-root.recipients-sort-btn .mud-icon-root, .mud-button-root.recipients-filter-btn .mud-button-icon-start, .mud-button-root.recipients-filter-btn .mud-icon-root { width: 12px; height: 12px; min-width: 12px; min-height: 12px; font-size: 0; line-height: 0; } .mud-button-root.recipients-sort-btn .mud-icon-root, .mud-button-root.recipients-filter-btn .mud-icon-root { background-color: currentColor; } .mud-button-root.recipients-sort-btn .mud-icon-root { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.25 9.2V2.85M1.7 4.35 3.25 2.65 4.8 4.35M8.75 2.8v6.35M7.2 7.65 8.75 9.35 10.3 7.65' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.25 9.2V2.85M1.7 4.35 3.25 2.65 4.8 4.35M8.75 2.8v6.35M7.2 7.65 8.75 9.35 10.3 7.65' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .mud-button-root.recipients-filter-btn .mud-icon-root { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 3.45h8M3.15 6h5.7M4.35 8.55h3.3' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 3.45h8M3.15 6h5.7M4.35 8.55h3.3' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .mud-button-root.recipients-sort-btn .mud-icon-root svg, .mud-button-root.recipients-sort-btn .mud-icon-root *, .mud-button-root.recipients-filter-btn .mud-icon-root svg, .mud-button-root.recipients-filter-btn .mud-icon-root * { display: none; } .recipients-toolbar .mud-menu.recipients-toolbar-menu { display: inline-flex; align-items: center; height: var(--tops-input-height); } .recipients-toolbar-btn.mud-button-root:hover, .mud-button-root.recipients-toolbar-btn:hover { background-color: var(--color-misty-grey-200) !important; } /* Toolbar filter pill — Figma 3579:9179. AC2: hug the selected label for short names. AC3: expand to fit long issuer names without truncation. Trigger only — the portaled dropdown must not inherit this width. */ .tops-filter-pill { position: relative; display: inline-flex; align-items: center; width: max-content; min-width: 0; } .tops-filter-pill.mud-input-control, .tops-filter-pill .mud-input-control, .tops-filter-pill .mud-input-control-input-container, .tops-filter-pill .mud-input, .tops-filter-pill .mud-input-root, .tops-filter-pill .party-multiselect, .tops-filter-pill .party-multiselect__menu, .tops-filter-pill .party-multiselect__activator-wrap, .tops-filter-pill .party-multiselect__field, .tops-filter-pill .recipients-issuer-inline { width: max-content !important; max-width: none; flex-grow: 0; min-width: 0; } .tops-filter-pill .mud-select-input, .tops-filter-pill input.mud-input-slot, .tops-filter-pill .mud-input-slot { field-sizing: content; width: auto !important; min-width: 0; flex: 0 0 auto; } .tops-filter-pill__badge { position: static; flex: 0 0 auto; min-width: 1rem; height: 1rem; border-radius: var(--radius-full); background-color: var(--color-brand-blue-600); color: var(--color-white-100); font-size: 0.625rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; pointer-events: none; } /* Portaled list — size to issuer names, not the hugged trigger (Forms pattern). */ .mud-popover.tops-filter-pill-popover { min-width: 16rem; width: max-content; max-width: min(90vw, 24rem); } .mud-popover.tops-filter-pill-popover .mud-list-item-text, .mud-popover.tops-filter-pill-popover .mud-list-item-text .mud-typography { white-space: nowrap; } /* Recipients inline issuer select — outlined pill in toolbar row (H0-1050) */ .recipients-issuer-inline .mud-input-outlined .mud-input-outlined-border { border-color: var(--color-stormy-grey-100) !important; border-radius: var(--radius-md) !important; } .recipients-toolbar .party-multiselect__pill-activator { padding-block: 0; padding-inline: var(--tops-btn-padding-x); background-color: var(--color-misty-grey-100); border: 1px solid var(--color-misty-grey-200); border-radius: 8px; } .recipients-toolbar .party-multiselect__pill-activator:hover, .recipients-toolbar .party-multiselect__pill-activator--open { background-color: var(--color-misty-grey-200); } .recipients-toolbar .party-multiselect__pill-label, .recipients-issuer-inline .mud-select-input { color: var(--color-brand-blue-600) !important; font-family: var(--tops-btn-font); font-size: var(--tops-body-md-size); font-weight: var(--tops-btn-font-weight); } .recipients-issuer-inline .mud-input-root { height: auto !important; min-height: unset !important; padding: 0.25rem 0.25rem 0.25rem 0.5rem; } .recipients-issuer-inline .mud-input-adornment-end { margin: 0; padding: 0; min-width: 1rem; width: 1rem; } .recipients-issuer-inline .mud-input-adornment-end .mud-icon-root { font-size: 0.875rem; width: 0.875rem; height: 0.875rem; } /* Recipients / Issuers table headers — neutral grey per design (H0-1050). This overrides the shared blue table-header background. AC8 / Figma 3579:9193: lg (16px) block padding; height follows the label, not --tops-table-header-row-height plus Mud checkbox min-height. */ .recipients-card .mud-table.recipients-table, .issuers-card .mud-table.issuers-table { border-top: 0; } .recipients-table .mud-table-head, .recipients-table .mud-table-head .mud-table-row, .issuers-table .mud-table-head, .issuers-table .mud-table-head .mud-table-row, .forms-data-table .mud-table-head, .forms-data-table .mud-table-head .mud-table-row { background-color: var(--tops-table-footer-bg); } .recipients-table .mud-table-head .mud-table-cell, .recipients-table th, .recipients-table .mud-table-cell-custom-group-header, .issuers-table .mud-table-head .mud-table-cell, .issuers-table th, .issuers-table .mud-table-cell-custom-group-header, .forms-data-table .mud-table-head .mud-table-cell, .forms-data-table th, .forms-data-table .mud-table-cell-custom-group-header { color: var(--color-stormy-grey-500) !important; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; background-color: var(--tops-table-footer-bg) !important; border-bottom: 0 !important; padding-block: var(--spacing-4); padding-inline: var(--tops-table-cell-padding-x); } .tops-table-header-lg .mud-table-head .mud-table-row { height: auto; } .tops-table-header-lg .mud-table-head .mud-table-cell { padding-block: var(--spacing-4); line-height: 1.2; } .tops-table-header-lg .mud-table-head .mud-checkbox .mud-button-root { height: auto; min-height: unset; min-width: unset; padding: 0; } .recipients-table { --recipients-checkbox-size: 14px; } .issuers-table { --issuers-checkbox-size: 14px; } .recipients-table .mud-table-head .mud-table-cell.recipients-col-select, .recipients-table .mud-table-body .mud-table-cell.recipients-col-select { width: 4rem; max-width: 4rem; padding-right: 0.25rem; } .issuers-table .mud-table-root { width: 100%; table-layout: fixed; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-select, .issuers-table .mud-table-body .mud-table-cell.issuers-col-select { width: 6%; max-width: none; padding-right: 0.25rem; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-issuer, .issuers-table .mud-table-body .mud-table-cell.issuers-col-issuer { width: 20%; white-space: normal; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-tin, .issuers-table .mud-table-body .mud-table-cell.issuers-col-tin { width: 10%; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-tin-status, .issuers-table .mud-table-body .mud-table-cell.issuers-col-tin-status { width: 13%; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-source, .issuers-table .mud-table-body .mud-table-cell.issuers-col-source { width: 13%; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-forms, .issuers-table .mud-table-body .mud-table-cell.issuers-col-forms { width: 8%; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-form-status, .issuers-table .mud-table-body .mud-table-cell.issuers-col-form-status { width: 15%; } .issuers-table .mud-table-head .mud-table-cell.issuers-col-actions, .issuers-table .mud-table-body .mud-table-cell.issuers-col-actions { width: 15%; } .recipients-table .mud-table-head .mud-table-cell.recipients-col-recipient, .recipients-table .mud-table-body .mud-table-cell.recipients-col-recipient, .issuers-table .mud-table-head .mud-table-cell.issuers-col-issuer, .issuers-table .mud-table-body .mud-table-cell.issuers-col-issuer { padding-left: 0.5rem; } .recipients-table .mud-table-head .mud-table-cell.recipients-col-recipient, .recipients-table .mud-table-body .mud-table-cell.recipients-col-recipient { min-width: 16rem; width: 16rem; max-width: 16rem; white-space: normal; vertical-align: middle; } /* Keep TIN’s left edge; open space only between TIN → Type → Status → Issuers. */ .recipients-table .mud-table-head .mud-table-cell.recipients-col-tin, .recipients-table .mud-table-body .mud-table-cell.recipients-col-tin { padding-right: var(--spacing-6); } .recipients-table .mud-table-head .mud-table-cell.recipients-col-tin-type, .recipients-table .mud-table-body .mud-table-cell.recipients-col-tin-type, .recipients-table .mud-table-head .mud-table-cell.recipients-col-tin-status, .recipients-table .mud-table-body .mud-table-cell.recipients-col-tin-status { padding-left: var(--spacing-6); padding-right: var(--spacing-6); } .recipients-table .mud-table-head .mud-table-cell.recipients-col-linked-issuers, .recipients-table .mud-table-body .mud-table-cell.recipients-col-linked-issuers { padding-left: var(--spacing-6); } .recipients-table .mud-table-head .mud-table-cell.recipients-col-forms, .recipients-table .mud-table-body .mud-table-cell.recipients-col-forms, .recipients-table .mud-table-head .mud-table-cell.recipients-col-last-activity, .recipients-table .mud-table-body .mud-table-cell.recipients-col-last-activity { padding-left: var(--spacing-6); padding-right: var(--spacing-6); } /* Keep Issuer’s left edge; open space between TIN → Status → Source → Forms → Form Status → Actions. Gaps stay inside the card so the table does not grow a horizontal scrollbar. */ .issuers-table .mud-table-head .mud-table-cell.issuers-col-tin, .issuers-table .mud-table-body .mud-table-cell.issuers-col-tin { padding-right: var(--spacing-2); } .issuers-table .mud-table-head .mud-table-cell.issuers-col-tin-status, .issuers-table .mud-table-body .mud-table-cell.issuers-col-tin-status, .issuers-table .mud-table-head .mud-table-cell.issuers-col-source, .issuers-table .mud-table-body .mud-table-cell.issuers-col-source, .issuers-table .mud-table-head .mud-table-cell.issuers-col-forms, .issuers-table .mud-table-body .mud-table-cell.issuers-col-forms { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } .issuers-table .mud-table-head .mud-table-cell.issuers-col-form-status, .issuers-table .mud-table-body .mud-table-cell.issuers-col-form-status { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } .issuers-table .mud-table-head .mud-table-cell.issuers-col-actions, .issuers-table .mud-table-body .mud-table-cell.issuers-col-actions { padding-left: var(--spacing-2); padding-right: var(--spacing-4); text-align: left; } .recipients-table .recipients-col-select .mud-checkbox, .issuers-table .issuers-col-select .mud-checkbox { display: flex; justify-content: flex-start; margin-left: calc(0.75rem + 9px); } /* Recipients / Issuers table: no zebra striping — all rows white, color only on hover (H0-1050) */ .recipients-table .mud-table-body, .recipients-table .mud-table-container, .recipients-table .mud-table-body .mud-table-row, .recipients-table .mud-table-body tr, .recipients-table .mud-table-body .mud-table-row:nth-child(even), .recipients-table .mud-table-body tr:nth-child(even), .recipients-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell, .recipients-table .mud-table-body tr:nth-child(even) > td, .recipients-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell, .recipients-table .mud-table-body tr:nth-child(odd) > td, .recipients-table .mud-table-body .mud-table-cell, .issuers-table .mud-table-body, .issuers-table .mud-table-container, .issuers-table .mud-table-body .mud-table-row, .issuers-table .mud-table-body tr, .issuers-table .mud-table-body .mud-table-row:nth-child(even), .issuers-table .mud-table-body tr:nth-child(even), .issuers-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell, .issuers-table .mud-table-body tr:nth-child(even) > td, .issuers-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell, .issuers-table .mud-table-body tr:nth-child(odd) > td, .issuers-table .mud-table-body .mud-table-cell { background-color: var(--tops-white) !important; } .recipients-table .mud-table-body .mud-table-cell:only-child, .recipients-table .mud-table-empty, .recipients-table--empty .mud-table-empty-row, .recipients-table--empty .mud-table-empty-row td, .issuers-table .mud-table-body .mud-table-cell:only-child, .issuers-table .mud-table-empty, .issuers-table--empty .mud-table-empty-row, .issuers-table--empty .mud-table-empty-row td { background-color: var(--tops-white) !important; border-bottom: 0 !important; text-transform: none; letter-spacing: normal; } .recipients-table--empty .mud-table-body, .recipients-table--empty .mud-table-empty-row, .recipients-table--empty .mud-table-empty-row td { height: 22.5rem; min-height: 22.5rem; } .issuers-table--empty .mud-table-body, .issuers-table--empty .mud-table-empty-row, .issuers-table--empty .mud-table-empty-row td { height: calc(5 * 4.5rem); min-height: calc(5 * 4.5rem); } /* Copy forms dashboard modal — wider than Figma 1456-4441 (684px) so issuer/recipient + status can breathe. !important: MudDialog portal + FullWidth/ExtraLarge set inline max-width. */ .mud-dialog.copy-forms-from-last-year-modal-root, .mud-dialog.copy-forms-from-last-year-modal-root.mud-dialog-fullwidth, .mud-dialog.copy-forms-from-last-year-modal-root.mud-width-full { max-width: 60rem !important; width: min(60rem, calc(100vw - 2rem)) !important; } /* Same first-child padding-top trap as H0-1270 recipient preview — Figma 1456-4441 is 24px inset. */ .mud-dialog.copy-forms-from-last-year-modal-root .mud-dialog-content, .mud-dialog.copy-forms-from-last-year-modal-root > .mud-dialog-content:first-child { padding: var(--spacing-6) !important; } /* Copy forms modal table — Figma 1456-4449: frame border only, no Mud outer grid line (H0-893) */ .mud-table.copy-forms-modal-table, .copy-forms-modal-table.mud-table-root { border: 0 !important; } .copy-forms-modal-table .mud-table-container, .copy-forms-modal-table table.mud-table-root { border-top: 0 !important; } .copy-forms-modal-table table.mud-table-root { table-layout: fixed !important; width: 100% !important; } .copy-forms-modal-table .mud-table-head .copy-forms-modal-table__col-corrected { color: transparent !important; font-size: 0 !important; line-height: 0 !important; } /* Import Center copy-forms grid — Figma 3838-12256. Column widths live in workflow scoped CSS. Global .mud-table-container { overflow-x: auto } is why a scrollbar appeared beside empty space. */ .copy-forms-import-table.mud-table .mud-table-container { overflow-x: hidden; width: 100%; } .copy-forms-import-table table.mud-table-root { table-layout: fixed !important; width: 100% !important; } .copy-forms-import-table .mud-table-body .mud-table-row, .copy-forms-import-table .mud-table-body tr, .copy-forms-import-table .mud-table-body .mud-table-row:nth-child(even), .copy-forms-import-table .mud-table-body tr:nth-child(even), .copy-forms-import-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell, .copy-forms-import-table .mud-table-body tr:nth-child(even) > td, .copy-forms-import-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell, .copy-forms-import-table .mud-table-body tr:nth-child(odd) > td, .copy-forms-import-table .mud-table-body .mud-table-row:hover, .copy-forms-import-table .mud-table-body tr:hover, .copy-forms-import-table .mud-table-body .mud-table-row:hover .mud-table-cell, .copy-forms-import-table .mud-table-body tr:hover > td { background-color: var(--color-white-100) !important; } .copy-forms-modal-table .mud-table-body .mud-table-row, .copy-forms-modal-table .mud-table-body tr, .copy-forms-modal-table .mud-table-body .mud-table-row:nth-child(even), .copy-forms-modal-table .mud-table-body tr:nth-child(even), .copy-forms-modal-table .mud-table-body .mud-table-row:nth-child(even) .mud-table-cell, .copy-forms-modal-table .mud-table-body tr:nth-child(even) > td, .copy-forms-modal-table .mud-table-body .mud-table-row:nth-child(odd) .mud-table-cell, .copy-forms-modal-table .mud-table-body tr:nth-child(odd) > td, .copy-forms-modal-table .mud-table-body .mud-table-row:hover, .copy-forms-modal-table .mud-table-body tr:hover, .copy-forms-modal-table .mud-table-body .mud-table-row:hover .mud-table-cell, .copy-forms-modal-table .mud-table-body tr:hover > td { background-color: var(--color-white-100) !important; } /* Recipients toggle is now a custom CSS component — no MudSwitch overrides needed */ /* Table footer Prev/Next — Figma 3579:9294 / AC4: text + 14px chevron, no chrome. */ .mud-button-root.tops-pagination-text-btn, .mud-button-root.recipients-pagination-btn, .mud-button-root.issuers-pagination-btn { background-color: transparent; border: none; box-shadow: none; min-width: unset; min-height: unset; padding: 4px 6px; color: var(--color-brand-blue-600); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; text-transform: none; } .mud-button-root.tops-pagination-text-btn:hover:not(.mud-disabled), .mud-button-root.tops-pagination-text-btn:focus:not(.mud-disabled), .mud-button-root.tops-pagination-text-btn:active:not(.mud-disabled), .mud-button-root.recipients-pagination-btn:hover:not(.mud-disabled), .mud-button-root.recipients-pagination-btn:focus:not(.mud-disabled), .mud-button-root.recipients-pagination-btn:active:not(.mud-disabled), .mud-button-root.issuers-pagination-btn:hover:not(.mud-disabled), .mud-button-root.issuers-pagination-btn:focus:not(.mud-disabled), .mud-button-root.issuers-pagination-btn:active:not(.mud-disabled) { background-color: transparent; border: none; box-shadow: none; color: var(--color-brand-blue-600); } .mud-button-root.tops-pagination-text-btn.mud-disabled, .mud-button-root.recipients-pagination-btn.mud-disabled, .mud-button-root.issuers-pagination-btn.mud-disabled { background-color: transparent; color: var(--color-stormy-grey-400); opacity: 1; } .mud-button-root.tops-pagination-text-btn.mud-disabled .mud-button-label, .mud-button-root.recipients-pagination-btn.mud-disabled .mud-button-label, .mud-button-root.issuers-pagination-btn.mud-disabled .mud-button-label, .mud-button-root.tops-pagination-text-btn.mud-disabled .mud-icon-root, .mud-button-root.recipients-pagination-btn.mud-disabled .mud-icon-root, .mud-button-root.issuers-pagination-btn.mud-disabled .mud-icon-root { color: var(--color-stormy-grey-400); } .mud-button-root.tops-pagination-text-btn .mud-button-label, .mud-button-root.recipients-pagination-btn .mud-button-label, .mud-button-root.issuers-pagination-btn .mud-button-label { color: inherit; } .mud-button-root.tops-pagination-text-btn .mud-icon-root, .mud-button-root.recipients-pagination-btn .mud-icon-root, .mud-button-root.issuers-pagination-btn .mud-icon-root { color: inherit; font-size: 14px; width: 14px; height: 14px; } /* Active page — Figma 3579:9294 / AC5: tight circular navy badge (#031b3b). */ .mud-button-root.tops-pagination-page-btn { min-width: 1.5rem; width: 1.5rem; height: 1.5rem; padding: 0; border: none; box-shadow: none; border-radius: var(--radius-full); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; } .recipients-footer .mud-button-root.tops-pagination-page-btn, .issuers-footer .mud-button-root.tops-pagination-page-btn, .mud-button-root.recipients-page-number-btn, .mud-button-root.issuers-page-number-btn { border-radius: var(--radius-md); } .mud-button-root.tops-pagination-page-btn--active, .mud-button-root.tops-pagination-page-btn.mud-button-filled, .mud-button-root.tops-pagination-page-btn.mud-button-filled-primary { background-color: var(--color-brand-blue-700); color: var(--color-white-100); } .mud-button-root.tops-pagination-page-btn--active:hover, .mud-button-root.tops-pagination-page-btn.mud-button-filled:hover, .mud-button-root.tops-pagination-page-btn.mud-button-filled-primary:hover { background-color: var(--color-brand-blue-700); color: var(--color-white-100); } .mud-button-root.tops-pagination-page-btn.mud-button-text, .mud-button-root.tops-pagination-page-btn.mud-button-outlined { background-color: transparent; border: none; box-shadow: none; color: var(--color-brand-blue-600); } /* Prev / page / Next cluster — Figma 3579:9294 / AC6: no outer frame. */ .tops-pagination-nav { background-color: transparent; border: none; box-shadow: none; } .tops-pagination-nav .mud-button-group, .tops-pagination-nav.mud-button-group, .tops-pagination-nav .mud-pagination { background-color: transparent; border: none; box-shadow: none; } /* Recipients TIN status chips — status-specific colors per design (H0-1050) */ .mud-chip.recipients-chip-ready, .mud-chip.recipients-chip-verified, .mud-chip.recipients-chip-pending, .mud-chip.recipients-chip-actionable, .mud-chip.recipients-chip-neutral, .mud-chip.recipients-chip-queued, .mud-chip.recipients-chip-processing, .mud-chip.recipients-chip-notfound, .mud-chip.recipients-chip-nomatch { font-weight: var(--tops-label-weight); } .mud-chip.recipients-chip-ready { background-color: var(--color-stormy-grey-100) !important; color: var(--color-stormy-grey-700) !important; } .mud-chip.recipients-chip-verified { background-color: var(--tops-status-success-bg) !important; color: var(--tops-status-success-text) !important; } .mud-chip.recipients-chip-pending { background-color: var(--color-stormy-grey-100) !important; color: var(--color-stormy-grey-700) !important; } .mud-chip.recipients-chip-actionable { background-color: var(--tops-status-error-bg) !important; color: var(--tops-status-error-text) !important; } .mud-chip.recipients-chip-neutral { background-color: var(--tops-surface-alt) !important; color: var(--color-stormy-grey-600) !important; } .mud-chip.recipients-chip-queued { background-color: var(--tops-status-info-bg) !important; color: var(--tops-status-info-text) !important; } .mud-chip.recipients-chip-processing { background-color: var(--tops-status-warning-bg) !important; color: var(--tops-status-warning-text) !important; } .mud-chip.recipients-chip-notfound, .mud-chip.recipients-chip-nomatch { background-color: var(--tops-status-error-bg) !important; color: var(--tops-status-error-text) !important; } /* ───────────────────────────────────────────────────────────────────────────── Reports Suite status pills Why these live here and not in a page's scoped stylesheet: the `.mud-chip.mud-chip-filled` baseline above paints EVERY filled chip with the neutral chip tokens, and it does so with two class selectors. MudBlazor's own `mud-chip-color-success` / `-error` carry the same specificity, so the baseline wins on order and a `Color="Color.Success"` chip renders in the pale neutral blue instead of green. A page-scoped `::deep` rule ties on specificity too and loses the same way. So the Reports pages do what the Recipients TIN chips above already do — the blessed pattern for a status-coloured MudChip in this codebase: an explicit named class resolved from the row status, declared here against the shared `--tops-status-*` families. `Color=` is not set on those chips at all; the class is the single source of the colour. ───────────────────────────────────────────────────────────────────────────── */ /* Delivered / accessed / accepted — a completed, successful outcome. */ .mud-chip.reports-pill-success { background-color: var(--tops-status-success-bg) !important; color: var(--tops-status-success-text) !important; } /* Reserved for real failures: a send that never left, a rejected transmission. */ .mud-chip.reports-pill-error { background-color: var(--tops-status-error-bg) !important; color: var(--tops-status-error-text) !important; } /* Still in flight — queued, processing. No colour verdict yet. */ .mud-chip.reports-pill-neutral { background-color: var(--tops-surface-alt) !important; color: var(--color-stormy-grey-600) !important; } /* The peach "Not accessed" pill. The design system has no peach primitive, so this reuses the warning family — the system's warm, non-failure attention colour. "Not accessed" is a real state, not an error: it must read as attention, never as red. */ .mud-chip.reports-pill-attention { background-color: var(--tops-status-warning-bg) !important; border: 1px solid var(--tops-status-warning-border) !important; color: var(--tops-status-warning-text) !important; } /* Forms grid status pills. Colour lives here so a scoped bundle cannot leave the words unpainted. */ .forms-status-ready { background-color: var(--tops-form-status-ready-bg); color: var(--tops-form-status-ready-text); } .forms-status-incomplete { background-color: var(--tops-form-status-incomplete-bg); color: var(--tops-form-status-incomplete-text); } .forms-status-submitted, .forms-status-queued, .forms-status-processing { background-color: var(--tops-form-status-processing-bg); color: var(--tops-form-status-processing-text); } .forms-status-accepted, .forms-status-complete, .forms-status-paper-filed { background-color: var(--tops-form-status-accepted-bg); color: var(--tops-form-status-accepted-text); } .forms-status-accepted-with-errors, .forms-status-rejected, .forms-status-needs-action { background-color: var(--tops-form-status-needs-action-bg); color: var(--tops-form-status-needs-action-text); } .forms-status-federal-neutral { background-color: var(--tops-form-status-na-bg); color: var(--tops-form-status-na-text); } /* The outlined delivery-method indicator. Same flattening applies to `.mud-chip-outlined`, which would paint it brand blue; it must stay colour neutral so it never competes with the status pill beside it for colour meaning. */ .mud-chip.mud-chip-outlined.reports-pill-outline-neutral { border-color: var(--color-stormy-grey-300) !important; color: var(--color-stormy-grey-700) !important; } /* ───────────────────────────────────────────────────────────────────────────── AdminStatusChip tones (AT-2111). Same reason as the Reports pills above: the filled-chip baseline flattens `Color=` to the neutral brand tint, so a status needs a named class. The shared `AdminStatusChip` component emits `admin-status-chip--{tone}` from its `Tone`; it also keeps MudBlazor's `mud-chip-color-*` class, which these rules outrank. Every text/background pair clears WCAG AA 4.5:1 (success 6.2, warning 8.4, error 5.7, info 12.4, neutral 5.8). The `--tops-status-*-text` success/warning tokens used by the Reports pills do not (3.3 / 2.8), which is why these use the deeper green-700 and the alert-warning ink instead. These rules went missing in an unrelated list-UI change (3d4e2e094), after which every AdminStatusChip painted the neutral brand outline — Activity's amber "Needs your attention" and red "Not completed" chips included (AT-110 QA). AdminStatusChipCssTests pins them. ───────────────────────────────────────────────────────────────────────────── */ .mud-chip.admin-status-chip--success { background-color: var(--tops-success-bg) !important; color: var(--color-brand-green-700) !important; } .mud-chip.admin-status-chip--warning { background-color: var(--tops-alert-warning-bg) !important; color: var(--tops-alert-warning-text) !important; } .mud-chip.admin-status-chip--error { background-color: var(--tops-error-bg) !important; color: var(--tops-error) !important; } .mud-chip.admin-status-chip--info { background-color: var(--tops-status-info-bg) !important; color: var(--tops-status-info-text) !important; } .mud-chip.admin-status-chip--neutral { background-color: var(--tops-surface-alt) !important; color: var(--color-stormy-grey-600) !important; } .mud-chip.admin-status-chip--accent { background-color: var(--tops-chip-bg) !important; color: var(--tops-chip-color) !important; } /* Outlined: transparent fill, the tone's border, and the tone's text colour. */ .mud-chip.mud-chip-outlined.admin-status-chip { background-color: transparent !important; } .mud-chip.mud-chip-outlined.admin-status-chip--success { border-color: var(--tops-status-success-border) !important; color: var(--color-brand-green-700) !important; } .mud-chip.mud-chip-outlined.admin-status-chip--warning { border-color: var(--tops-alert-warning-border) !important; color: var(--tops-alert-warning-text) !important; } .mud-chip.mud-chip-outlined.admin-status-chip--error { border-color: var(--tops-error) !important; color: var(--tops-error) !important; } .mud-chip.mud-chip-outlined.admin-status-chip--info { border-color: var(--tops-status-info-border) !important; color: var(--tops-status-info-text) !important; } .mud-chip.mud-chip-outlined.admin-status-chip--neutral { border-color: var(--color-stormy-grey-300) !important; color: var(--color-stormy-grey-600) !important; } .mud-chip.mud-chip-outlined.admin-status-chip--accent { border-color: var(--tops-chip-color) !important; color: var(--tops-chip-color) !important; } /* The chip icon follows the tone's text colour. */ .mud-chip.admin-status-chip .mud-chip-icon { color: inherit !important; } /* The shared MainLayout footer ("Terms of Use | Legal") is dashboard chrome. The four Reports pages are full-workspace screens whose own printable record ends at the results table, and the footer reads there as a stray, vestigial line below the report. Suppressed for the Reports pages only — on screen and on paper — via the same `:has()` scoping this file already uses for `.helper-layout`. The links themselves are live routes (`/terms`, `/legal`) and stay working everywhere else in the app; nothing is removed from the layout. */ body:has(.reports-shell) [data-cy="dashboard-footer"] { display: none; } /* Recipients row Actions — blue label, light grey outline, hug the label+chevron. */ .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn:hover, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn:active, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn:focus, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn:hover, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn:active, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn:focus { width: auto; min-width: unset; padding-inline: var(--spacing-2); border-color: var(--color-misty-grey-400); color: var(--color-brand-blue-600); } .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn .mud-button-label, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn .mud-icon-root, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn .mud-button-label, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn .mud-icon-root { color: var(--color-brand-blue-600); } .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.recipients-actions-btn .mud-button-icon-end, .mud-button-outlined.mud-button-outlined-default.tops-neutral-outlined-btn.issuers-actions-btn .mud-button-icon-end { margin-inline-start: var(--spacing-1); margin-left: var(--spacing-1); } /* Recipients / Issuers row Actions — compact card; 14px icons stay aligned in one column. */ .mud-popover.recipients-page-mud-popover.recipients-actions-popover, .mud-popover.recipients-page-mud-popover.recipients-actions-popover.mud-paper, .mud-popover.recipients-page-mud-popover.recipients-actions-popover.mud-elevation-8, .mud-popover.issuers-page-mud-popover.issuers-actions-popover, .mud-popover.issuers-page-mud-popover.issuers-actions-popover.mud-paper, .mud-popover.issuers-page-mud-popover.issuers-actions-popover.mud-elevation-8 { box-sizing: border-box; width: 176px; min-width: 176px; padding: 0; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-list.mud-menu-list, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-list.mud-menu-list { box-sizing: border-box; width: 176px; min-width: 176px; padding: 6px 0; overflow: hidden; background: var(--color-white-100); border: 0; border-radius: var(--radius-md); box-shadow: var(--tops-card-shadow); } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item { min-height: 28px; height: 28px; padding: 0 var(--spacing-3); gap: 6px; font-family: var(--tops-body-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: 1.5; color: var(--color-brand-blue-600) !important; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item .mud-menu-item-text, .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item .mud-typography, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item .mud-menu-item-text, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item .mud-typography { font-family: var(--tops-body-font); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); line-height: 1.5; color: inherit; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item .mud-menu-item-icon, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item .mud-menu-item-icon { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--font-size-md); min-width: var(--font-size-md); height: var(--font-size-md); margin-inline-end: 0; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-divider, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-divider { margin: 2px 8px; border-color: var(--color-stormy-grey-100); } /* Recipients TIN + issuer filter cards — Figma 4669:2668 (portaled MudMenu; must be global). MudMenu paints a mud-paper/elevation-8 shell; the designed card is the inner panel. Kill the shell so the gap under the activator is empty, not a second box. */ .mud-popover.recipients-tin-filter-popover, .mud-popover.recipients-tin-filter-popover.mud-paper, .mud-popover.recipients-tin-filter-popover.mud-elevation-8 { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .mud-popover.recipients-tin-filter-popover .mud-list, .mud-popover.recipients-tin-filter-popover .mud-menu-list { padding: 0; border: none; background: transparent; box-shadow: none; overflow: visible; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel { box-sizing: border-box; width: 14.75rem; margin-top: var(--spacing-2); padding: var(--spacing-4) var(--spacing-3) var(--spacing-3); background: var(--color-white-100); border-radius: var(--radius-md); box-shadow: var(--mud-elevation-8); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__title { display: block; margin: 0 0 var(--spacing-5); color: var(--color-brand-blue-600); font-family: var(--tops-body-font); font-size: var(--tops-body-size); font-weight: var(--tops-body-lg-semibold-weight); line-height: var(--tops-body-line); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__section { margin: 0 0 var(--spacing-2); color: var(--color-stormy-grey-400); font-family: var(--tops-label-font); font-size: var(--tops-label-nav-size); font-weight: var(--tops-label-nav-weight); line-height: var(--tops-label-nav-line); letter-spacing: 0; text-transform: uppercase; } .mud-popover.recipients-tin-filter-popover .issuers-filter-source-section { margin-top: var(--spacing-4); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--match, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--match .mud-typography { color: var(--color-brand-green-700); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--mismatch, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--mismatch .mud-typography { color: var(--color-alerts-red-700); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--invalid, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--invalid .mud-typography, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--rejected, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--rejected .mud-typography, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--not-checked, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--not-checked .mud-typography, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--pending, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-option--pending .mud-typography { color: var(--color-brand-blue-600); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__options { display: flex; flex-direction: column; gap: var(--spacing-2); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox { --recipients-filter-checkbox-size: 14px; display: flex; align-items: center; margin: 0; padding: 0; min-height: 0; height: auto; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-button-root, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox > .mud-button-root.mud-icon-button.mud-checkbox-dense { position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto; padding: 0; min-width: var(--recipients-filter-checkbox-size); width: var(--recipients-filter-checkbox-size); height: var(--recipients-filter-checkbox-size); min-height: var(--recipients-filter-checkbox-size); max-width: var(--recipients-filter-checkbox-size); max-height: var(--recipients-filter-checkbox-size); margin-inline-end: var(--spacing-2); background-color: var(--color-white-100); /* Figma Checkbox 4760:17134 — 14px box, 1px #77777A stroke; 2px radius softens the corner. */ border: 1px solid var(--color-stormy-grey-500); border-radius: 2px; overflow: hidden; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox > .mud-button-root.mud-icon-button.mud-checkbox-dense.mud-checkbox-false { --checkbox-color: var(--color-stormy-grey-400); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox > .mud-button-root.mud-icon-button.mud-checkbox-dense.mud-checkbox-true, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox > .mud-button-root.mud-icon-button.mud-checkbox-dense.mud-checkbox-null { --checkbox-color: var(--color-brand-blue-600); background-color: var(--color-brand-blue-600); border-color: var(--color-brand-blue-600); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-icon-root { position: relative; display: none; width: 0; height: 0; font-size: 0; line-height: 0; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-icon-root *, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-icon-root svg, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-icon-root path, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-icon-root::before { display: none; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox-true.mud-button-root::after, .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox-null.mud-button-root::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); background-color: var(--color-white-100); pointer-events: none; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox-true.mud-button-root::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='black' fill-rule='evenodd' d='M11.695 3.705a.7.7 0 0 1 0 .99l-5.6 5.6a.7.7 0 0 1-.99 0l-2.8-2.8a.7.7 0 1 1 .99-.99L5.6 8.81l5.105-5.105a.7.7 0 0 1 .99 0Z'/%3E%3C/svg%3E") center / 10px 10px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='black' fill-rule='evenodd' d='M11.695 3.705a.7.7 0 0 1 0 .99l-5.6 5.6a.7.7 0 0 1-.99 0l-2.8-2.8a.7.7 0 1 1 .99-.99L5.6 8.81l5.105-5.105a.7.7 0 0 1 .99 0Z'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox-null.mud-button-root::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='3.5' y='6.25' width='7' height='1.5' rx='0.75' fill='black'/%3E%3C/svg%3E") center / 10px 10px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='3.5' y='6.25' width='7' height='1.5' rx='0.75' fill='black'/%3E%3C/svg%3E") center / 10px 10px no-repeat; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel .mud-checkbox .mud-typography { font-family: var(--tops-body-font); font-size: var(--tops-body-sm-size); font-weight: var(--tops-body-sm-weight); line-height: var(--tops-body-sm-line); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-top: var(--spacing-4); padding-top: var(--spacing-3); border-top: 1px solid var(--color-stormy-grey-100); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__count { color: var(--color-stormy-grey-400); font-family: var(--tops-body-font); font-size: var(--tops-body-xs-size); font-weight: var(--tops-body-weight); line-height: var(--tops-body-xs-line); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__count-num { color: var(--color-stormy-grey-500); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__actions { display: flex; align-items: center; gap: var(--spacing-2); } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__clear.mud-button-root { min-width: 0; height: var(--tops-btn-min-height-sm); min-height: var(--tops-btn-min-height-sm); padding: var(--spacing-2); text-transform: none; } .mud-popover.recipients-tin-filter-popover .recipients-tin-filter-panel__done.mud-button-root { min-width: 0; height: var(--tops-btn-min-height-sm); min-height: var(--tops-btn-min-height-sm); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-full); font-size: var(--tops-btn-font-size-sm); font-weight: var(--tops-label-nav-weight); line-height: var(--tops-btn-line-height-sm); text-transform: none; } /* Issuer filter: same card chrome as TIN status; rows grow so wrapped names stay readable. */ .mud-popover.recipients-issuer-filter-popover .recipients-tin-filter-panel { width: 18rem; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel .mud-checkbox { display: flex; align-items: center; height: auto; min-height: 0; overflow: visible; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel .mud-checkbox .mud-button-root { align-self: center; margin-inline-end: var(--spacing-2); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-option .mud-typography { display: flex; align-items: center; margin: 0; overflow: visible; white-space: normal; line-height: var(--tops-body-sm-line); } .mud-popover.recipients-issuer-filter-popover .recipients-tin-filter-panel__title { margin-bottom: var(--spacing-3); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search { margin: 0 0 var(--spacing-3); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-control, .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input { margin: 0; padding-bottom: 0; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-helper-text, .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-control > .mud-input-error { display: none; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-control-input-container, .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-outlined { min-height: 2rem; height: 2rem; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-outlined { background: var(--color-white-100); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-outlined-border { border-color: var(--color-stormy-grey-200); border-radius: var(--radius-md); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search input { color: var(--color-brand-blue-600); font-family: var(--tops-body-font); font-size: var(--tops-body-md-size); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__search .mud-input-adornment .mud-icon-root { color: var(--color-stormy-grey-400); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__options { display: flex; flex-direction: column; gap: var(--spacing-2); max-height: 11.5rem; min-height: 0; height: auto; overflow-x: hidden; overflow-y: auto; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__options > .mud-input-control { width: 100%; flex: 0 0 auto; margin: 0; } .mud-popover.recipients-issuer-filter-popover .recipients-tin-filter-panel__foot { margin-top: var(--spacing-2); padding-top: var(--spacing-2); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__actions { display: flex; align-items: center; gap: var(--spacing-2); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__clear.mud-button-root { min-width: 0; height: var(--tops-btn-min-height-sm); min-height: var(--tops-btn-min-height-sm); padding: var(--spacing-2); text-transform: none; } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-option, .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-option .mud-typography { color: var(--color-brand-blue-600); } .mud-popover.recipients-issuer-filter-popover .recipients-issuer-filter-panel__empty { margin: 0; color: var(--color-stormy-grey-400); font-family: var(--tops-body-font); font-size: var(--tops-body-sm-size); } .mud-popover.recipients-page-mud-popover:not(.recipients-actions-popover) .mud-menu-item { font-size: 0.875rem; font-weight: 500; color: var(--color-brand-blue-700) !important; } .mud-popover.recipients-page-mud-popover:not(.recipients-actions-popover) .mud-menu-item .mud-icon-root { color: var(--color-brand-blue-700) !important; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item .mud-icon-root, .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item .mud-icon-root svg, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item .mud-icon-root, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item .mud-icon-root svg { display: block; width: var(--font-size-md); height: var(--font-size-md); min-width: var(--font-size-md); overflow: visible; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item .mud-icon-root, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item .mud-icon-root { font-size: var(--font-size-md); color: var(--color-brand-blue-600) !important; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item.recipients-action-delete, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item.issuers-action-delete { color: var(--color-alerts-red-500) !important; } .mud-popover.recipients-page-mud-popover.recipients-actions-popover .mud-menu-item.recipients-action-delete .mud-icon-root, .mud-popover.issuers-page-mud-popover.issuers-actions-popover .mud-menu-item.issuers-action-delete .mud-icon-root { color: var(--color-alerts-red-500) !important; } /* Required asterisk at the end of a field title: large, bold and the error red (AT-2753). Global because the editor's label row and the renderer's checkbox row both draw it. */ .form-platform-field-required-marker { margin-inline-start: var(--spacing-1); color: var(--tops-error); font-size: 1.25em; font-weight: 700; line-height: 1; }