/* ─────────────────────────────────────────────────────────────
Concentus Dashboard
File: styles--components-move-money-additions.css
Version: 2026-06-24 v37
Batch: GY-2 (change RM in import review) · GY · GR-MM
Build: BUILD_TIMESTAMP
v37 GY-2: import-review editable RM cell — .mm-rm-edit-trigger (dashed pill;
.edited gold, .unresolved amber, .active), .mm-rm-pencil, .mm-rm-revert, and
the body-portaled advisor picker (.mm-rm-pop + -title/-search/-revert/-list/
-empty).
v36 GY: Reassign-RM styles. Drawer header button (.mm-rm-btn-wrap +
.mm-rm-btn aria-expanded state) with an absolutely-positioned dropdown
(.mm-rm-list.mm-reassign-list + .mm-rm-list-title). Bulk gold "Set RM"
button (.mm-bulk-btn.rm) + popover search/states (.mm-bulk-pop-search,
#mmBulkRmList, .mm-bulk-pop-empty).
v35 GR-MM: .mm-mode-seg (Full|Supplemental preview toggle) + commit-prompt
modal styles (.mm-commit-overlay/-modal/-head/-title/-sub/-choices/-choice/
-cd/-foot, .mm-cpill, .mm-btn-ghost, .mm-commit-go).
v34 GQ-fix: .mm-search-clear (✕) button styles.
v33 GQ-fix: .mm-sec-row pinned left + sticky (was justify-content
space-between, which pushed the per-section date filters off the right edge
of the wide horizontally-scrolling ledger).
v32 GQ: .mm-preview-email-btn (commit-bar ghost button) + the notification
email preview modal (.mm-emailprev-overlay / -modal / -head / -title /
-recip / -close / -status / -body + isolated iframe).
v31 GQ changes vs v30 GH (appended at end of file):
- Three-section ledger: .mm-section-head (+ .info read-only variant),
.mm-sec-row / -left / -chev / -count / -tag / -filter / -select,
collapsed chevron rotate, .mm-sec-empty. Lighter-navy tinted band,
low-contrast (per Paul's mockup-v8 feedback).
- Transaction Status pills: .mm-ts + .mm-ts-active/-complete/-failed/
-unresolved/-inactive.
- .mm-unknown placeholder; .mm-dir-icon.both (bidirectional setup);
.mm-suppress-email (import commit-bar bypass checkbox).
v30 GH change vs v29:
- .mm-drawer-close centres its glyph so the whole 30px box is the
hit target, not just the lower half (matches the Prospecting
drawer close-button fix in the same batch).
v29 GG-fix1 changes vs v28 GG-fix1:
- Import preflight: .mm-dest-line / .mm-dest-acct / .mm-dest-flag /
.mm-dest-ok for the destination sub-line in review rows;
.mm-dest-trigger modifier on the inline HH trigger; .mm-reverify-btn
for the new commit-bar Re-verify button; .mm-commit-summary-stale /
-warn / -ok state colors.
v28 GG-fix1 changes vs v27 GG:
- .mm-to-map-view: removed `overflow: hidden`. It clipped the
To-side picker's results dropdown (.mm-hh-picker-results is
position:absolute, opens downward from an input low in the
block). Header top corners are now rounded directly via
.mm-to-map-head { border-radius: 7px 7px 0 0 }.
v27 GG changes vs v26 FF:
- ITEM 1: new .mm-to-map-view / .mm-to-map-head / .mm-to-map-body
for the To-side destination HH picker block, plus a
.mm-leg-map-link:disabled state. Search/preview internals reuse
the existing .mm-hh-picker-* / .mm-hh-preview-* rules.
- ITEM 2a: new .mm-import-head-ctrl (replaces the import pane's
.card-controls, which tripped js--app.js injectControls()).
- ITEM 2b: .mm-card.card-collapsed rules so the two-pane Move
Money card collapses to just its (nested) ledger header instead
of disappearing entirely.
v26 FF changes vs v25 EE:
- ITEM 1: new .mm-row-setup (subtle gray row tint) + .mm-setup-badge
(neutral gray pill) for Schwab "Set-Up" authorization rows in
the import preview. Setup rows are also .mm-row-skip (dimmed +
strikethrough); the gray tint distinguishes them from plain
user-excluded rows.
- ITEM 4: new .mm-drawer-sf-task-link — the SF Task anchor in the
drawer's Transaction facts grid. Styled as a blue text link.
v25 EE changes vs v24 CC-fix2:
- Removed the .mm-row-paired-tint rule (faint gold row background
on paired transactions in the ledger). Paired rows still carry
the ⇄ pair glyph next to the Client/Account cell, so the tint
was redundant identification. js--card-move-money.js v31 drops
the matching classList.toggle so the class is no longer applied.
v24 CC-fix2 changes vs v23 CC-fix1:
- Last-note author treatment: dropped bold + navy color from both
rules for .mm-notes-preview .mm-notes-author (line ~485 and
line ~1055). Author now reads as normal table text, same weight
and color as the note body. Was rendering "Author:" inline as
a bold navy link-style prefix which read like a hyperlink and
stole visual weight from the actual note content.
v23 CC-fix1 changes vs v22 CC:
- REMOVED .owner-badge.firm-default rule. Badge no longer rendered
by ownerCellHTML(); the firm-default fallback is normal behavior
and doesn't warrant per-row signalling. .owner-badge.override
rule remains for per-row reassignments.
- REMOVED .mm-rm-chip and .mm-rm-empty rules. RM column no longer
renders as a tinted pill.
- ADDED .mm-rm-name rule. Plain bold name styling matching the
.owner-name style — 13px, color #1a1a2e, weight 600. Used by
both the main ledger and the Review modal rows.
v22 CC adds (see bottom of file):
- .owner-cell / .owner-role / .owner-name-row / .owner-name —
two-line Owner cell. Role label on top, resolved person below.
- .owner-name.unassigned — italic gray "unassigned" state.
- .owner-badge.override — navy pill, inline beside the name.
- .owner-badge.firm-default — gold pill (REMOVED in v23 CC-fix1).
- .mm-reassign-wrap / .mm-reassign-btn / .mm-reassign-list /
.mm-reassign-item / .mm-reassign-item-current /
.mm-reassign-item-clear / .mm-reassign-tag /
.mm-reassign-tag-current / .mm-reassign-empty — drawer
Reassign-trader affordance + dropdown list.
v21 BY adds (see bottom of file):
- .mm-refresh-badge — last refreshed timestamp pill w/ pulsing dot,
amber state on failure, "paused" suffix when inhibited
- .mm-extflows-chip — toggle chip with pressed state
- .mm-filters-spacer — pushes the chip to the right end
- .mm-kebab-new-pill — gold "New" badge next to a kebab item
- .mm-notif-overlay / .mm-notif-modal — Notifications modal shell
- .mm-notif-row / .mm-switch / .mm-switch-slider — toggle rows
- .mm-row-paired-tint — faint gold background for paired rows
v20 BX changes vs v19 BW:
- .mm-drawer-sub: font-family override removed. Subtitle (the
"5103-1300: Joint, Taxable …" line) now renders in the same
sans stack as the rest of the drawer instead of monospace.
- .mm-drawer-title-link: new style. Title (the household name)
is now an anchor that links to SF. Navy text, dotted-underline
on hover, inline external-link arrow next to the name.
- .mm-leg-block: visual refresh from a 3px colored left stripe
to a full tinted background + colored full border per tone.
Outgoing = light red wash + red border; Incoming = light green
wash + green border; External = neutral surface, unchanged.
- .mm-leg-pill: tone-aware pills upgraded from rgba bg + colored
text to solid colored bg + white text, matching the new fill
treatment of the parent block.
v19 BW changes vs v18 BV:
- .mm-drawer-admin-row: layout updated from justify-content:
space-between (2 children) to gap:10px + margin-right:auto on
the label so it accommodates 3 children: label, Archive button,
Delete button. Label hugs left; buttons group right.
- .mm-btn-archive added (navy outline, hover fill, disabled with
dashed-ish low-contrast inert state, .archived-ok modifier in
green for the post-archive checkmark state).
v18 BV changes vs v17 BU-fix2:
- .mm-helptip: added max-height: calc(100vh - 40px) +
overflow-y:auto (was overflow:hidden). The help guide grew
from 5 to 9 sections; a tall popover now scrolls within the
viewport instead of clipping. overflow-x stays hidden.
- Pair glyph: the BU-fix2 nested .mm-pair-tip-card rules were
removed (clipped by the Client cell's overflow:hidden — only
the help cursor showed, no content). Replaced with a body-
anchored .mm-pair-tip / .mm-pair-tip-head / .mm-pair-tip-body
popover (mirrors .mm-note-pop). The duplicate
`.mm-pair-glyph { cursor: help; position: relative; }`
override is gone; the canonical .mm-pair-glyph rule sets
cursor:pointer.
- Dirty-button: #mmDrawerSaveBtn.dirty → #mmDrawerSaveCloseBtn.dirty.
The three-button actionbar puts the gold dirty-ring on the
primary "Save & close" button only. .mm-drawer-save.dirty kept
for the paired-drawer save button.
- .mm-drawer-actionbar: justify-content flex-end → space-between.
Cancel/Close ghost button on the left, Save pair on the right.
v17 BU-fix2 changes vs v16 BU:
- DROPPED gold tint on the three optional columns (Counterparty /
Account # / Counterparty Acct #). Per user request, columns
should look the same as all other columns.
- FIXED resize floor on the three optional columns. Added
max-width: 0 + overflow: hidden + text-overflow: ellipsis to
both the and cells — without these, white-space: nowrap
was preventing the column from shrinking below the natural width
of the header label ("COUNTERPARTY ACCT #" was the worst
offender). Now the user can drag down to the 80px floor and
the text truncates with an ellipsis.
- ADDED .mm-paired-body left-rail (2px border-left + 14px padding-
left + 20px margin-left) so the per-leg / merged blocks read as
children of the apply-to-both checkbox state.
- ADDED column-reorder visual cues: .mm-th-drag-handle (subtle
grab cursor on the body of the TH), .mm-th-dragging (low
opacity on the row being dragged), .mm-th-drop-target-left /
.mm-th-drop-target-right (left/right border highlight on the
insertion target).
- ADDED .mm-paired-hold-row (date input wrapper inside per-leg
and merged action blocks for Hold).
- FIXED .mm-derived-chip → uses canonical .mm-derived structure
now. Removed the invalid wrapper class from v16.
- Merged sub-band styles tweaked: bg-faint base, colored left
borders per leg direction.
v16 BU changes vs v15 BT-refactor:
- RESTORED .mm-apply-both-row, .mm-leg-action-row,
.mm-merged-action-row, .mm-leg-action-row-label,
.mm-merged-action-row-label, .mm-select.mixed, .mm-mixed-text,
.mm-derived.mixed, .mm-merged-current-row. The two-row paired
model is back — paired drawer renders these classes via
renderPairedWorkflow() / renderLegActionBlock() /
renderMergedActionBlock().
- Preserved unchanged: .mm-paired-tag, .mm-note-leg-tag.{out,in},
.mm-drawer.is-paired.
v15 BT-refactor changes vs v14 BT-2 (RETRACTED in v16):
- Removed .mm-apply-both-row, .mm-leg-action-row, .mm-merged-action-row,
.mm-leg-action-row-label, .mm-merged-action-row-label, .mm-select.mixed,
.mm-mixed-text, .mm-derived.mixed, .mm-merged-current-row. None of the
BT-2 paired-workflow markup is rendered anymore; the styles served no
other element.
- Kept .mm-paired-tag (⇄ Paired eyebrow badge — still meaningful in
single-row pair model), .mm-note-leg-tag.{out,in} (auto-transition
note pills), and .mm-drawer.is-paired hook.
v14 BT-2 changes vs v13 BS:
- New .mm-drawer-eyebrow-row wrapping the eyebrow text + the
new .mm-paired-tag (⇄ Paired) gold badge that surfaces when
the open row is part of a pair.
- New .mm-apply-both-row — bg-faint flex row carrying the
"Apply the same Action to both legs" checkbox + hint text.
- New .mm-leg-action-row — bordered card with colored left
border per leg (red outgoing / green incoming), used in the
apply-to-both-OFF paired workflow path. Two stacked rows,
each with its own Action picker + derived row.
- New .mm-merged-action-row — bordered card with gold left
border, used in the apply-to-both-ON path. Contains the
6-option merged Action picker + a derived row that includes
a 2-up sub-row showing each leg's CURRENT owner.
- .mm-select.mixed + .mm-mixed-text + .mm-derived.mixed for the
mixed-state visuals (apply-to-both ON with legs at different
actions, before user picks one of the 6 real options).
- .mm-note-leg-tag.{out,in} — small pill rendered in note meta
when note.leg_tag is set (auto-transition notes only; user
free-text notes stay leg-agnostic and unpilled).
- .mm-drawer.is-paired class on the drawer root toggles
paired-mode-specific visibility (e.g. suppresses the
single-leg workflow leg-label in the section header).
v13 BS changes vs v12 BR:
- New drawer two-column layout block: .mm-drawer-2col (0.85fr / 1.15fr),
.mm-drawer-left (transaction facts, 70px key col), .mm-drawer-right
(stacked From + To leg blocks, 100px key col inside each).
- New .mm-leg-block with [data-leg-tone] variants (outgoing / incoming /
external) driving colored left border + pill background. Outgoing =
red (var(--status-action) / --mm-status-action), Incoming = green
(--status-complete / --mm-status-complete), External = neutral gray.
- .mm-leg-pill colored to match parent leg-tone. Used in both the leg
head and the Workflow section's leg label.
- .mm-leg-ext-line single-line custodian text variant. .mm-leg-na for
italic muted "n/a" cells. .mm-leg-note-gold for the cross-HH note
stripe. .mm-leg-map-link / .mm-leg-hh-other / .mm-leg-sf-link for
the in-leg link variants.
- .mm-drawer-head-actions stacks Re-map button + close horizontally
on the top-right of the drawer head.
- .mm-drawer-unmatched-block: full-width gold callout that replaces
the 2-col grid when CWA-side leg has no SF household match. Re-uses
existing .mm-hh-picker-* + .mm-hh-preview styles.
- .mm-drawer-section-titlerow: section title with optional adjacent
leg label (used in Workflow section).
- Ledger optional-column treatment: .mm-th-optional + td[data-col-...]
get a subtle gold tint background. Gold "New" badge in the column
picker until both new cols reliably populate post-BT.
- .mm-pair-glyph: small gold ⇄ icon, rendered next to Client / Account
cell when row.pair_id is truthy (BS stub; lights up post-BT).
- .mm-col-new-badge: gold "New" pill in the column picker rows.
- .mm-kebab-item line-height tightened so the new two-line Export
item doesn't visually overpower the single-line Import item.
v12 BR changes vs v11 BP:
- Dropped .mm-drawer-footer-hint + .dirty + ::before. The "Unsaved
changes" footer text is gone; the gold Save Changes button is the
sole dirty indicator now. (Also kills the broken `\u25CF` CSS
unicode-escape typo that was rendering as literal "u25CF " text.)
- .mm-drawer-actionbar justify-content: space-between → flex-end
(only one child remains — the buttons).
- .mm-note: width: 100% + box-sizing: border-box made authoritative
in this file (was being defeated by the orphan .mm-note max-width:
140px rule deleted from styles--components.css this batch).
- New .mm-note.mm-note-system + .mm-note-avatar-sys for the system
"Imported from Schwab" entry: gold left accent stripe, gold
download-icon avatar, no body row.
v11 BP changes vs v10 BO:
- .mm-helptip restyled from white-on-navy to navy-on-light. Now
matches the canonical Tasks pattern (dark background #1a2244,
light text, arrow tail). The BO popover was lifted from Important
Dates but Tasks is the newer convention, so this brings Move
Money in line.
- .mm-view-toggle: active button now gets navy fill + white text
(option A from the BP toggle mockup). Previous white-pill-on-
tinted-strip pattern was unreadable in the new sub-toolbar
(both backgrounds white-ish).
- .mm-stat-num.blocked color (purple) for the new 6th tile.
- .card-title SVG inherits navy via fill="none" stroke="#00247f"
in HTML; the gap: 7px already applies from the canonical
layout file so no extra rule needed.
v10 BO changes vs v9 BN:
- .mm-sub-toolbar (new): row directly below the card-header that
holds view toggle (left), refresh/columns/kebab (right). Light
tinted background, single border-bottom, comfortable padding.
- .mm-help-icon (new): `?` chip next to card title, matches the
Important Dates pattern. Hover-only popover lives at .mm-helptip.
- .mm-helptip (new): body-anchored explainer popover. Title +
scrollable section list + video tutorial link. Mirrors idate
visual treatment.
- .mm-kebab-wrap / .mm-kebab-menu (new): ⋮ button with dropdown
menu. Houses Import CSV. Animations: fade + 6px slide. Click
outside or Esc to close.
- .mm-review-summary tiles converted to elements with
.mm-stat: now show pointer cursor, hover lift, .active state
(gold border + tinted background) for the selected tile filter.
- .mm-csv-drop (was unstyled): dashed-border dropzone, centered
icon + title + sub text, primary "Choose CSV file" button. New
.dragging state when a file is dragged over.
v9 BN changes vs v8 BM:
- .mm-drawer-footer renamed .mm-drawer-actionbar (no longer
sticky — now an inline section between Workflow and Notes).
Lighter visual treatment: no border-top, modest top/bottom
padding, transparent background. Hint + buttons still flex-
between.
- Notes list switched from flex-column to block layout. The
flex chain in BM was preventing notes from filling width
reliably; block + margin-top between siblings is rock-solid
and visually identical.
v8 BM changes vs v7 BL:
- Drawer width: 540 → 680px so most Schwab Record values fit on
one line. max-width: 96vw still protects narrow screens.
- .mm-hold-until-row defaults to display:none and is revealed by
the .visible class (was always visible — same CSS/markup mismatch
pattern as the BL bulk-bar bug). New label/input/help styling
matches the rest of the workflow controls.
- New .mm-drawer-footer (sticky footer at drawer bottom). Holds
Cancel + Save Changes plus a dirty-state hint. Lives outside the
scrollable .mm-drawer-body so the controls stay anchored.
- .mm-btn-secondary added for the new "Add Note" button (lower-
weight than primary, distinct from ghost). Disabled state when
the textarea is empty.
- .mm-note width: 100% + box-sizing: border-box to defensively
guarantee the history thread spans the same width as the
Add-note box above it.
- Client cell truncation: max-width: 0 + overflow: hidden +
ellipsis on .mm-client-line / .mm-client-sub. Lets the column
actually shrink to the 80px JS floor (was held wide by
white-space:nowrap on long client/account text).
v7 hotfix vs v6 (same batch BL, same session):
- Card chrome: .mm-card flex layout so .card wrapper provides border,
radius, shadow (matches Tasks). Was rendering borderless.
- Scroll regions: stats / filters / controls / commit-bar are
fixed-height; .mm-table-wrap takes remaining space and scrolls
internally. Whole card-body falls back to scrolling on narrow
viewports.
- Sticky table headers (.mm-table thead th sticky top:0).
- Min column width floor 80px asserted in CSS for any pre-existing
persisted widths from before BL v2.
- Removed BK v5's max-height: 520px / 380px caps — flex layout
handles height now.
v6 BL additions (see below): 4-col record grid, note popover,
dirty save button, column picker styles.
- .mm-record-grid is now 4-column (110px 1fr 110px 1fr) so two
label/value pairs sit side-by-side. 2-column fallback under 600px.
- .mm-record-grid .val.spans-row helper for long values that should
span both pairs.
- Tightened drawer typography: label .lbl 12px/500, value .val 13px/600.
- .mm-note-pop body-anchored hover popover for last-note column.
Has .mm-note-pop-head / -body / -meta / -author / -action / -when
/ -text sub-elements.
- #mmDrawerSaveBtn.dirty visual indicator (gold ring + corner dot)
when changes are pending.
- .mm-col-picker-wrap / .mm-col-picker-btn / .mm-col-picker-pop /
.mm-col-picker-row column selector dropdown styling.
- .mm-table th[data-col-hidden] / td[data-col-hidden] hide rule.
BK v5 additions:
- Ledger pane gets max-height + scroll (was unconstrained — pushed
page off-screen with many rows). Sticky header keeps column
labels visible during scroll.
- Client/Account column left-aligned. Was inheriting
`text-align: right` from `.mm-table td:nth-child(3)` rule in
styles--components.css — a stale leftover from an earlier table
layout. Fixed with !important override scoped to .mm-table.
v4 hotfix vs v3 (same batch BK, same session):
- Review-pane table now has a max-height + vertical scroll. v3 only
handled horizontal overflow, so longer CSVs would push the commit
bar off-screen. Scoped to `.mm-import-pane .mm-table-wrap` so the
ledger table layout is unaffected.
BK additions vs BJ v2:
- .mm-stat-num.unmatched (gold/amber) for the new 5th stats slot
- .mm-enrich-loading + .mm-enrich-spinner — between-CSV-and-table state
- .mm-addepar-fail banner — Addepar fetch failure state w/ Retry
- .mm-addepar-status bar — last-synced timestamp + Refresh button
- .mm-row-multimatch — same gold tint as unmatched, distinct copy
- .mm-inline-hh-picker — typeahead in the review pane on unmatched rows
- .mm-review-summary tweaked to fit 5 stats without overflow
BJ additions vs BH v1:
- Sortable header indicator (.mm-sort-ind) — caret turns navy + bold when active
- Resize handle on resizable headers (.mm-th-resize-handle) — invisible 6px hit zone on right edge
- Hold-until row visual treatment carry-over from BH (already present)
- Hold-pill expired state (.mm-status-hold.expired turns red) — Day 0+ visual flag
- Last-note preview cell tweaks (author bold, single-line truncation)
Card-specific styles for the Move Money card. Builds on the variables
already defined in styles--base.css (--navy, --blue, --gold, --gold-light,
--text-dark/-mid/-light, --alert-red, --green, --border, --shadow).
Adds a small set of card-scoped vars (status colors, deeper navy, the
tinted backgrounds, drawer shadow) at :root so the drawer + confirm
modal — which live as body-level siblings outside the card — can still
pick them up.
All styles use the .mm- prefix and target the live card markup; nothing
here leaks beyond the Move Money card, drawer, or admin Data Purge
section.
───────────────────────────────────────────────────────────── */
/* ─── Card-scoped variable set ─────────────────────────────── */
:root {
--mm-navy-deep: #00091f;
--mm-navy-soft: #1a3a8f;
--mm-gold-hover: #b8821e;
--mm-bg-tinted: #eef1f6;
--mm-border-strong:#c8d0dc;
--mm-status-new: #3185fc;
--mm-status-progress:#d4a854;
--mm-status-action: #d9534f;
--mm-status-hold: #6c757d;
--mm-status-complete:#2ea05c;
--mm-shadow-drawer: -8px 0 32px rgba(20, 30, 60, 0.18);
}
/* ─── Card chrome ──────────────────────────────────────────── */
.mm-ledger-pane.hidden { display: none; }
.mm-import-pane { display: none; }
.mm-import-pane.active { display: block; }
/* View toggle (Active / All / Closed) */
.mm-view-toggle { display: inline-flex; background: var(--mm-bg-tinted); border-radius: 6px; padding: 2px;
margin-right: 8px; }
.mm-view-toggle button { background: transparent; border: none; padding: 5px 12px; font-size: 12px; font-weight: 600;
color: var(--text-mid); cursor: pointer; border-radius: 4px; }
.mm-view-toggle button.active { background: var(--navy); color: #fff; box-shadow: none; }
/* Header utility buttons */
.mm-util-btn { background: #fff; border: 1px solid var(--mm-border-strong); color: var(--navy);
width: 32px; height: 30px; border-radius: 6px; cursor: pointer; display: inline-flex;
align-items: center; justify-content: center; }
.mm-util-btn:hover { border-color: var(--navy); }
.mm-util-btn svg { width: 14px; height: 14px; }
.mm-import-btn { background: var(--gold); color: #fff; border: 1px solid var(--mm-gold-hover);
padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; }
.mm-import-btn:hover { background: var(--mm-gold-hover); }
/* ─── Stats row ─────────────────────────────────────────────── */
.mm-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.mm-stat-card { background: var(--mm-bg-tinted); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.mm-stat-card-label { font-size: 10px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.6px; margin-bottom: 6px; }
.mm-stat-card-value { font-size: 22px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums;
line-height: 1.1; }
.mm-stat-card-value.inflow { color: var(--mm-status-complete); }
.mm-stat-card-value.outflow { color: var(--mm-status-action); }
.mm-stat-card-value.net-positive { color: var(--mm-status-complete); }
.mm-stat-card-value.net-negative { color: var(--mm-status-action); }
.mm-stat-card-caption { font-size: 11px; color: var(--text-mid); margin-top: 4px; }
.mm-stat-card-caption.inflow { color: var(--mm-status-complete); }
.mm-stat-card-caption.outflow { color: var(--mm-status-action); }
/* ─── Filter pills (status) ─────────────────────────────────── */
.mm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mm-pill { background: #fff; border: 1px solid var(--mm-border-strong); color: var(--text-dark); padding: 5px 11px;
border-radius: 14px; font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex;
align-items: center; gap: 6px; }
.mm-pill:hover { border-color: var(--mm-navy-soft); }
.mm-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.mm-pill-count { background: rgba(0,0,0,0.06); padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.mm-pill.active .mm-pill-count { background: rgba(255,255,255,0.18); }
.mm-pill.hidden { display: none; }
/* ─── Search + filter dropdowns ─────────────────────────────── */
.mm-controls-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.mm-search { position: relative; flex: 1; min-width: 220px; }
.mm-search input { width: 100%; padding: 7px 32px 7px 32px; border: 1px solid var(--mm-border-strong);
border-radius: 6px; font-size: 13px; background: #fff; }
.mm-search-icon { position: absolute; left: 10px; top: 8px; color: var(--text-light); width: 14px; height: 14px; }
/* GQ-fix: clear (✕) button — appears when the search has text. */
.mm-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
border: 0; background: var(--mm-bg-tinted, #eef1f6); color: var(--text-mid, #52586a); border-radius: 50%;
font-size: 11px; line-height: 1; cursor: pointer; padding: 0; display: none; align-items: center; justify-content: center; }
.mm-search-clear.show { display: inline-flex; }
.mm-search-clear:hover { background: var(--mm-border-strong, #c8d0dc); color: var(--text-dark, #1a1a2e); }
/* ─── Ledger table ──────────────────────────────────────────── */
.mm-table-wrap { overflow-x: auto; overflow-y: visible; border: 1px solid var(--border); border-radius: 8px; }
.mm-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 1300px; }
.mm-table thead th { background: #f7f9fc; color: var(--navy); font-weight: 600; font-size: 11px;
letter-spacing: 0.5px; text-transform: uppercase; text-align: left; padding: 9px 12px;
border-bottom: 1px solid var(--border); position: relative; cursor: col-resize; user-select: none; white-space: nowrap; }
.mm-table thead th .mm-sort { color: var(--text-light); margin-left: 4px; font-size: 10px; }
.mm-table thead th .mm-grip { color: var(--text-light); margin-right: 4px; cursor: grab; }
.mm-table tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s; }
.mm-table tbody tr:hover { background: #fafbfd; }
.mm-table tbody tr.mm-selected { background: rgba(49,133,252,0.07); }
.mm-table tbody tr.mm-selected:hover { background: rgba(49,133,252,0.12); }
.mm-table td { padding: 10px 12px; vertical-align: middle; white-space: nowrap; }
.mm-checkbox { width: 14px; height: 14px; cursor: pointer; }
/* Direction icon (in / out) */
.mm-dir-cell { width: 36px; padding-left: 14px !important; padding-right: 0 !important; }
.mm-dir-icon { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; font-size: 12px; font-weight: 700; }
.mm-dir-icon.in { background: rgba(46,160,92,0.14); color: var(--mm-status-complete); }
.mm-dir-icon.out { background: rgba(217,83,79,0.12); color: var(--mm-status-action); }
/* Two-line client cell.
BM: max-width: 0 + overflow: hidden + ellipsis on the inner lines so
this column actually honors the JS resize floor (80 px). The default
.mm-table td white-space:nowrap was holding the column wide because
long client/account text couldn't wrap or truncate. */
.mm-table td[data-col="client"] { max-width: 0; overflow: hidden; }
.mm-client-line { font-weight: 700; color: var(--text-dark); font-size: 13px; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-client-sub { color: var(--text-mid); font-size: 12px; margin-top: 2px; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-client-line.mm-unmatched { color: var(--text-mid); font-style: italic; font-weight: 500; }
.mm-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.mm-amount.dir-out { color: var(--mm-status-action); }
.mm-amount.dir-in { color: var(--mm-status-complete); }
/* RM column — plain bold name (CC-fix1, Session 76).
Mirrors .owner-name styling so the column reads consistently with
the Owner column instead of using a tinted pill. */
.mm-rm-name {
font-size: 13px;
color: #1a1a2e;
font-weight: 600;
white-space: nowrap;
}
/* Action / status pills */
.mm-status { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.3px; }
.mm-status-new { background: rgba(49,133,252,0.12); color: var(--mm-status-new); }
.mm-status-progress { background: rgba(212,168,84,0.16); color: #8a5e0a; }
.mm-status-action { background: rgba(217,83,79,0.12); color: var(--mm-status-action); }
.mm-status-hold { background: rgba(108,117,125,0.14); color: var(--mm-status-hold); }
.mm-status-complete { background: rgba(46,160,92,0.12); color: var(--mm-status-complete); }
.mm-action { font-size: 12px; color: var(--text-dark); }
/* "Whose court" role chip */
.mm-court { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px;
font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
.mm-court.advisor { background: rgba(49,133,252,0.12); color: var(--blue); }
.mm-court.trader { background: rgba(212,168,84,0.16); color: #8a5e0a; }
.mm-court::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mm-court.advisor::before { background: var(--blue); }
.mm-court.trader::before { background: var(--gold); }
.mm-court-empty { color: var(--text-light); font-size: 16px; }
/* Notes cell + hover popover */
.mm-notes-cell { position: relative; max-width: 220px; }
.mm-notes-preview { font-size: 12px; color: var(--text-dark); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; display: block; max-width: 200px; cursor: help; }
.mm-notes-preview.empty { color: var(--text-light); font-style: italic; }
/* CC-fix2: author prefix renders as normal text — same weight and color as
the rest of the table. Was bold + navy which read like an inline link. */
.mm-notes-preview .mm-notes-author { font-weight: normal; color: inherit; }
.mm-notes-popover { position: absolute; right: 0; top: calc(100% + 6px); width: 360px; max-width: 360px;
background: #fff; border: 1px solid var(--mm-border-strong); border-radius: 8px;
box-shadow: 0 6px 18px rgba(20,30,60,0.16); padding: 10px 12px 12px; z-index: 80;
opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.14s, transform 0.14s;
white-space: normal; }
.mm-notes-cell:hover .mm-notes-popover { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mm-popover-head { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.5px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.mm-popover-note { padding: 6px 0; }
.mm-popover-note + .mm-popover-note { border-top: 1px solid var(--border); }
.mm-popover-note-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.mm-popover-author { font-size: 12px; font-weight: 600; color: var(--navy); }
.mm-popover-meta { font-size: 11px; color: var(--text-mid); margin-left: auto; }
.mm-popover-status { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
background: rgba(0,36,127,0.06); color: var(--mm-navy-deep); padding: 1px 5px; border-radius: 3px; }
.mm-popover-body { font-size: 12px; color: var(--text-dark); line-height: 1.4; }
.mm-popover-body.empty { color: var(--text-light); font-style: italic; }
/* ─── Bulk action bar (injected dynamically when ≥1 row selected) ─── */
.mm-bulk-bar { display: none; align-items: center; gap: 12px; padding: 9px 14px;
background: linear-gradient(180deg, var(--navy) 0%, var(--mm-navy-deep) 100%); color: #fff;
border-radius: 8px; font-size: 13px; }
.mm-bulk-bar.visible { display: flex; margin-bottom: 10px; }
.mm-bulk-count { font-weight: 700; }
.mm-bulk-count strong { color: var(--gold-light); }
.mm-bulk-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.2); }
.mm-bulk-btn { background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); color: #fff;
padding: 6px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; }
.mm-bulk-btn-wrap { position: relative; display: inline-flex; align-items: center; }
.mm-bulk-btn:hover { background: rgba(255,255,255,0.18); }
.mm-bulk-btn svg { width: 12px; height: 12px; }
.mm-bulk-btn.warn:hover { background: rgba(217,83,79,0.55); border-color: rgba(217,83,79,0.7); }
.mm-bulk-clear { margin-left: auto; background: transparent; border: none; color: rgba(255,255,255,0.7);
font-size: 12px; cursor: pointer; padding: 6px 8px; }
.mm-bulk-clear:hover { color: #fff; }
/* Bulk popovers (Set Action, Add Note) — siblings of the button inside .mm-bulk-btn-wrap,
never nested inside per Concentus's mockup-locked DOM contract. */
.mm-bulk-pop { position: absolute; top: calc(100% + 6px); left: 0; background: #fff;
border: 1px solid var(--mm-border-strong); border-radius: 8px; box-shadow: 0 6px 18px rgba(20,30,60,0.18);
padding: 10px; z-index: 60; min-width: 240px; display: none; color: var(--text-dark); text-align: left; }
.mm-bulk-pop.open { display: block; }
.mm-bulk-pop-title { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 6px; }
.mm-bulk-pop ul { list-style: none; margin: 0; padding: 0; }
.mm-bulk-pop li { padding: 6px 8px; font-size: 13px; color: var(--text-dark); cursor: pointer; border-radius: 4px;
font-weight: 500; }
.mm-bulk-pop li:hover { background: var(--mm-bg-tinted); color: var(--navy); }
.mm-bulk-pop textarea { width: 280px; min-height: 64px; padding: 6px 8px; font-size: 13px; font-family: inherit;
border: 1px solid var(--mm-border-strong); border-radius: 5px; resize: vertical; outline: none; box-sizing: border-box; }
.mm-bulk-pop textarea:focus { border-color: var(--navy); }
.mm-bulk-pop-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.mm-bulk-pop-btn-primary { background: var(--navy); color: #fff; border: 1px solid var(--navy); padding: 5px 12px;
border-radius: 4px; font-weight: 600; font-size: 12px; cursor: pointer; }
.mm-bulk-pop-btn-ghost { background: #fff; color: var(--text-mid); border: 1px solid var(--mm-border-strong);
padding: 5px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; }
/* ─── Drawer (body-anchored) ───────────────────────────────── */
.mm-drawer-overlay { position: fixed; inset: 0; background: rgba(15, 22, 45, 0.45); opacity: 0; pointer-events: none;
transition: opacity 0.18s; z-index: 90; }
.mm-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.mm-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 680px; max-width: 96vw; background: #fff;
box-shadow: var(--mm-shadow-drawer); transform: translateX(100%); transition: transform 0.22s ease-out;
z-index: 100; display: flex; flex-direction: column; }
.mm-drawer.open { transform: translateX(0); }
.mm-drawer-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); display: flex;
justify-content: space-between; align-items: flex-start; gap: 12px; }
.mm-drawer-title-block { flex: 1; min-width: 0; }
.mm-drawer-eyebrow { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.6px; margin-bottom: 4px; }
.mm-drawer-title { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
/* v20: title is now an anchor wrapping the household name + arrow.
Inherits color/size from .mm-drawer-title; underline appears on
hover so the name reads as a link without being noisy at rest. */
.mm-drawer-title-link {
color: inherit; text-decoration: none;
display: inline-flex; align-items: center; gap: 5px;
border-bottom: 1px dotted transparent;
}
.mm-drawer-title-link:hover { border-bottom-color: var(--navy); }
.mm-drawer-title-link svg { color: var(--blue); opacity: 0.85; }
.mm-drawer-title-link:not([href]),
.mm-drawer-title-link[href=""],
.mm-drawer-title-link[href="#"] { pointer-events: none; border-bottom: none; }
.mm-drawer-sub { font-size: 12px; color: var(--text-mid); }
.mm-drawer-close { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--mm-border-strong);
background: #fff; cursor: pointer; color: var(--text-mid);
display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; }
.mm-drawer-close:hover { color: var(--navy); border-color: var(--navy); }
.mm-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 13px; }
.mm-drawer-section { margin-bottom: 18px; }
.mm-drawer-section-title { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.6px; margin-bottom: 8px; }
/* BL: 4-column grid (label | value | label | value) so two pairs sit
side-by-side per row. Falls back to 2-column on narrow drawers.
.val.spans-row spans both pairs for long values (e.g. final odd row,
or rolled-up account names). */
.mm-record-grid {
display: grid;
grid-template-columns: 110px 1fr 110px 1fr;
row-gap: 7px;
column-gap: 14px;
font-size: 13px;
align-items: baseline;
}
@media (max-width: 600px) {
.mm-record-grid { grid-template-columns: 110px 1fr; }
}
.mm-record-grid .lbl { color: var(--text-mid); font-size: 12px; font-weight: 500; }
.mm-record-grid .val { color: var(--text-dark); font-weight: 600; font-size: 13px; }
.mm-record-grid .val.mono { font-family: 'SF Mono', Monaco, Menlo, monospace; font-size: 12px; font-weight: 500; }
.mm-record-grid .val a.sf-link { color: var(--blue); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.mm-record-grid .val a.sf-link:hover { text-decoration: underline; }
.mm-record-grid .val a.sf-link svg { width: 11px; height: 11px; opacity: 0.7; }
.mm-record-grid .val.spans-row { grid-column: 2 / -1; }
/* Derived chip row — Status / Current Owner / New Owner */
.mm-derived-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.mm-derived { background: var(--mm-bg-tinted); border: 1px solid var(--border); border-radius: 6px;
padding: 8px 10px; }
.mm-derived-label { font-size: 10px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.4px; margin-bottom: 4px; }
.mm-derived-value { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.mm-derived-value .mm-court { padding: 2px 8px; }
.mm-derived.changed { background: rgba(212,168,84,0.10); border-color: var(--gold-light); }
.mm-derived.changed .mm-derived-label { color: var(--mm-gold-hover); }
.mm-derived.changed::after { content: 'will change on save'; font-size: 9px; font-weight: 600; color: var(--mm-gold-hover);
text-transform: uppercase; letter-spacing: 0.4px; display: block; margin-top: 4px; }
.mm-control-block label { display: block; font-size: 11px; font-weight: 600; color: var(--text-mid);
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.mm-select { width: 100%; padding: 7px 10px; border: 1px solid var(--mm-border-strong); border-radius: 6px;
background: #fff; font-size: 13px; color: var(--text-dark); }
.mm-select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(26,42,94,0.12); }
/* Notes thread.
BN: switched from flex-column to block layout. The flex chain was
keeping notes from filling drawer width reliably; block + margin
between siblings is identical visually and rock-solid.
BR: width: 100% made authoritative — was being defeated by the orphan
.mm-note { max-width: 140px } rule in styles--components.css (since
removed). max-width: none belt-and-suspenders. */
.mm-notes-list { display: block; }
.mm-note { background: var(--mm-bg-tinted); border-radius: 8px; padding: 10px 12px;
display: block; width: 100%; max-width: none; box-sizing: border-box;
font-size: 13px; color: var(--text-dark); font-style: normal; }
.mm-note + .mm-note { margin-top: 10px; }
.mm-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.mm-note-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
flex-shrink: 0; }
.mm-note-author { font-size: 12px; font-weight: 600; color: var(--navy); }
.mm-note-meta { font-size: 11px; color: var(--text-mid); margin-left: auto; }
.mm-note-status-change { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
background: rgba(0,36,127,0.06); color: var(--mm-navy-deep); padding: 1px 6px; border-radius: 4px; }
.mm-note-body { font-size: 13px; color: var(--text-dark); white-space: pre-wrap; }
.mm-note-body.empty { color: var(--text-light); font-style: italic; }
/* BR: system-event note (currently only "Imported from Schwab" at
commit time). Gold left accent stripe + gold avatar with download
icon. Renders with no chip and no body row — header line is the
whole entry. */
.mm-note.mm-note-system { border-left: 3px solid var(--gold); padding-left: 9px; }
.mm-note.mm-note-system .mm-note-head { margin-bottom: 0; }
.mm-note-avatar.mm-note-avatar-sys { background: var(--gold); }
.mm-note-avatar.mm-note-avatar-sys svg { width: 13px; height: 13px; }
.mm-note-add { background: #fff; border: 1px solid var(--mm-border-strong); border-radius: 8px; padding: 10px;
margin-bottom: 14px; }
.mm-note-add textarea { width: 100%; border: none; resize: vertical; min-height: 60px; font-family: inherit;
font-size: 13px; outline: none; }
.mm-note-add-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.mm-btn-primary { background: var(--navy); color: #fff; border: 1px solid var(--navy); padding: 6px 14px;
border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; }
.mm-btn-primary:hover { background: var(--mm-navy-deep); }
.mm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.mm-btn-ghost { background: #fff; color: var(--text-mid); border: 1px solid var(--mm-border-strong); padding: 6px 12px;
border-radius: 6px; font-size: 12px; cursor: pointer; }
/* ──────────────────────────────────────────────────────────────
BM additions — drawer footer, hold-until, add-note button, etc.
────────────────────────────────────────────────────────────── */
/* BM: secondary button (used for "Add Note" — distinct from primary
Save Changes and ghost Cancel). Navy outline, navy text. */
.mm-btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--navy);
padding: 6px 14px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer;
transition: background 0.12s, color 0.12s; }
.mm-btn-secondary:hover:not(:disabled) { background: var(--navy); color: #fff; }
.mm-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }
/* BM/BN: ensure history thread rows span the full width of .mm-drawer-body
(BN switched .mm-notes-list to block layout — these are now belt-and-
suspenders). */
.mm-notes-list { width: 100%; }
.mm-note-add { box-sizing: border-box; }
/* BM: Hold-until row visibility + styling. Was unstyled (always visible
regardless of action). Now defaults to display:none and is revealed
by .visible. Label/input/help match the rest of the workflow controls. */
.mm-hold-until-row { display: none; margin: 10px 0 14px; padding: 10px 12px;
background: var(--mm-bg-tinted); border-radius: 6px; border: 1px solid var(--border); }
.mm-hold-until-row.visible { display: block; }
.mm-hold-until-row label { display: block; font-size: 11px; font-weight: 600; color: var(--text-mid);
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.mm-hold-until-input { padding: 6px 10px; border: 1px solid var(--mm-border-strong); border-radius: 6px;
background: #fff; font-size: 13px; color: var(--text-dark); font-family: inherit; }
.mm-hold-until-input:focus { outline: none; border-color: var(--navy);
box-shadow: 0 0 0 2px rgba(26,42,94,0.12); }
.mm-hold-until-help { margin-top: 6px; font-size: 11px; color: var(--text-mid); line-height: 1.4; }
/* BN: inline action bar — between Workflow and Notes sections (was a
sticky footer at drawer bottom in BM). Lighter visual treatment: no
border-top, transparent background, modest padding.
BV (2026-05-13): justify-content flex-end → space-between. The
Cancel/Close ghost button sits on the left; the Save + Save & close
pair sits on the right (.mm-drawer-footer-actions). */
.mm-drawer-actionbar { padding: 4px 18px 14px; display: flex; justify-content: space-between;
align-items: center; gap: 12px; }
/* BR: .mm-drawer-footer-hint rules removed. Save button gold-highlight
is the sole dirty indicator. Element no longer exists in markup. */
.mm-drawer-footer-actions { display: flex; gap: 8px; }
/* ──────────────────────────────────────────────────────────────
BO additions — sub-toolbar (Path 1), help icon + popover, kebab
menu, clickable review tiles, CSV drop zone styling.
────────────────────────────────────────────────────────────── */
/* Sub-toolbar — sits directly below the (now-trimmed) card header
and holds view toggle + util buttons + kebab. Light tint to
visually demote it vs. the body. */
.mm-sub-toolbar { display: flex; align-items: center; justify-content: space-between;
gap: 10px; padding: 8px 16px; background: var(--mm-bg-tinted);
border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mm-sub-toolbar-left { display: flex; align-items: center; gap: 10px; }
.mm-sub-toolbar-right { display: flex; align-items: center; gap: 8px; }
/* Util buttons in the sub-toolbar get a white background so they read
as distinct from the tinted strip behind them. */
.mm-sub-toolbar .mm-util-btn,
.mm-sub-toolbar .mm-col-picker-btn { background: #fff; }
.mm-sub-toolbar .mm-view-toggle { background: #fff;
border: 1px solid var(--border); }
/* Help icon — `?` chip next to title. BP: matches the canonical
Tasks .tasks-help-icon pattern (tinted navy background). */
.mm-help-icon { display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; margin-left: 4px; padding: 0;
border-radius: 50%;
background: rgba(0, 36, 127, 0.08);
color: var(--navy);
font-size: 10.5px; font-weight: 700; font-family: inherit;
border: 1px solid rgba(0, 36, 127, 0.18);
cursor: help; line-height: 1; vertical-align: middle; flex-shrink: 0;
transition: background 0.12s, border-color 0.12s; }
.mm-help-icon:hover { background: rgba(0, 36, 127, 0.16);
border-color: rgba(0, 36, 127, 0.32); }
/* Body-anchored help popover. Hover-to-open with stay-open-on-hover.
BP: restyled to match the canonical Tasks pattern (dark navy on
light text). Was lifted from Important Dates (white-on-navy) in BO.
BV (2026-05-13): expanded to 9 sections — added max-height +
overflow-y:auto so a tall popover scrolls within the viewport
instead of clipping. overflow-x stays hidden to preserve the
rounded-corner clip on the title bar. */
.mm-helptip { position: fixed; z-index: 1000; width: 320px;
max-width: calc(100vw - 24px);
max-height: calc(100vh - 40px);
background: #1a2244; color: #f0f2f7;
border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,0.22);
font-size: 11.5px; line-height: 1.55;
padding: 0; overflow-x: hidden; overflow-y: auto;
opacity: 0; pointer-events: none; transform: translateY(-4px);
transition: opacity 0.15s, transform 0.15s; text-align: left; }
.mm-helptip.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mm-helptip-title { background: rgba(255, 255, 255, 0.05);
padding: 10px 14px; font-size: 12.5px; font-weight: 600; color: #fff;
text-transform: none; letter-spacing: 0; margin: 0; }
.mm-helptip-body { padding: 12px 14px; font-size: 11.5px;
color: #f0f2f7; line-height: 1.55; }
.mm-helptip-section { margin-bottom: 11px; padding: 0; border-bottom: 0; }
.mm-helptip-section:last-of-type { margin-bottom: 11px; }
.mm-helptip-h { font-size: 9.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.55); margin-bottom: 4px; }
.mm-helptip-body p { margin: 0 0 5px; font-size: 11.5px; line-height: 1.5; }
.mm-helptip-body p:last-child { margin-bottom: 0; }
.mm-helptip-body strong { color: #fff; font-weight: 600; }
.mm-helptip-body em { color: #ffd47a; font-style: normal; font-weight: 500; }
.mm-helptip-video { display: flex; align-items: center; gap: 8px;
margin: 8px 14px 14px; padding: 8px 10px;
background: rgba(72, 124, 255, 0.10);
border: 1px solid rgba(72, 124, 255, 0.22);
border-radius: 6px;
color: #c0d0fa; text-decoration: none;
font-size: 11.5px; font-weight: 500;
transition: background 0.15s, color 0.15s; }
.mm-helptip-video:hover { background: rgba(72, 124, 255, 0.18); color: #d0deff; }
.mm-helptip-video span { flex: 1; }
.mm-helptip-video-arrow { opacity: 0.6; flex-shrink: 0; }
/* Kebab menu — ⋮ button + dropdown. Holds Import CSV today;
future home for any new card-level actions. */
.mm-kebab-wrap { position: relative; display: inline-block; }
.mm-kebab-menu { position: absolute; top: calc(100% + 6px); right: 0;
min-width: 200px; background: #fff;
border: 1px solid var(--mm-border-strong); border-radius: 6px;
box-shadow: 0 8px 20px rgba(0,0,0,0.10);
padding: 4px 0; z-index: 50;
opacity: 0; pointer-events: none; transform: translateY(-4px);
transition: opacity 0.12s, transform 0.12s; }
.mm-kebab-menu.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mm-kebab-item { width: 100%; display: flex; align-items: center; gap: 10px;
padding: 8px 14px; background: transparent; border: 0;
font-size: 12px; font-weight: 600; color: var(--text-dark);
cursor: pointer; text-align: left; font-family: inherit; }
.mm-kebab-item:hover { background: var(--mm-bg-tinted); }
.mm-kebab-item svg { color: var(--gold); flex-shrink: 0; }
/* Review tiles — converted from to , now clickable
filters. Single-select; "CSV rows" tile == clear. */
.mm-review-summary > .mm-stat { border: 1px solid var(--border);
background: #fff; padding: 10px 14px; border-radius: 6px;
cursor: pointer; text-align: center; font-family: inherit;
transition: border-color 0.12s, background 0.12s, transform 0.06s;
min-width: 120px; }
.mm-review-summary > .mm-stat:hover {
border-color: var(--mm-border-strong); background: var(--mm-bg-tinted); }
.mm-review-summary > .mm-stat:active { transform: translateY(1px); }
.mm-review-summary > .mm-stat.active {
border-color: var(--gold); background: rgba(196, 156, 66, 0.08);
box-shadow: 0 0 0 1px var(--gold) inset; }
/* CSV drop zone — was unstyled prose flow (.mm-csv-drop had zero
rules in earlier batches). Now a dashed-border dropzone with
centered icon/title/sub/button stack, plus drag-over highlight. */
.mm-csv-drop { display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 8px; padding: 32px 24px;
border: 2px dashed var(--mm-border-strong); border-radius: 10px;
background: var(--mm-bg-tinted); text-align: center;
transition: border-color 0.15s, background 0.15s; cursor: pointer; }
.mm-csv-drop:hover { border-color: var(--navy); background: #f0f4fb; }
.mm-csv-drop.dragging { border-color: var(--gold); background: rgba(196, 156, 66, 0.08); }
.mm-csv-drop-icon { font-size: 32px; line-height: 1; color: var(--text-mid);
display: inline-flex; width: 52px; height: 52px; border-radius: 50%;
background: #fff; border: 1px solid var(--border);
align-items: center; justify-content: center; }
.mm-csv-drop-title { font-size: 14px; font-weight: 700; color: var(--navy);
margin-top: 4px; }
.mm-csv-drop-sub { font-size: 11px; color: var(--text-mid);
line-height: 1.5; max-width: 480px; }
.mm-csv-drop .mm-import-btn { margin-top: 8px; }
/* Admin-only delete row at bottom of drawer */
.mm-drawer-admin-row { padding: 12px 18px; border-top: 1px solid var(--border); background: #fafbfd;
display: flex; align-items: center; gap: 10px; }
.mm-drawer-admin-row.hidden { display: none; }
.mm-drawer-admin-label { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.5px; margin-right: auto; }
.mm-btn-danger { background: #fff; color: var(--mm-status-action); border: 1px solid var(--mm-status-action);
padding: 6px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.mm-btn-danger:hover { background: var(--mm-status-action); color: #fff; }
/* BW (2026-05-14): Archive to SF button. Lives in .mm-drawer-admin-row
alongside Delete row. Navy outline (primary tone) — Archive is a
constructive admin action vs Delete's destructive one. Disabled
state uses lower-contrast text + dashed border to read as inert.
.archived-ok modifier (set by renderArchiveButtonState when row is
already archived) flips to a green checkmark style. */
.mm-btn-archive { background: #fff; color: var(--navy); border: 1px solid var(--navy);
padding: 6px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer;
transition: background 0.12s, color 0.12s; }
.mm-btn-archive:hover:not(:disabled) { background: var(--navy); color: #fff; }
.mm-btn-archive:disabled { cursor: not-allowed; color: var(--text-mid); border-color: var(--mm-border-strong);
background: #fff; opacity: 0.7; }
.mm-btn-archive.archived-ok { color: #2f7a3e; border-color: #c8e6c9; background: #f1faf2; }
.mm-btn-archive.archived-ok:disabled { opacity: 1; }
/* ─── HH picker (unmatched-row mapping) ─────────────────────── */
.mm-unmatched-msg { background: rgba(212,168,84,0.10); border-left: 3px solid var(--gold); padding: 10px 12px;
border-radius: 4px; font-size: 12px; color: #6b4f15; margin-bottom: 12px; }
.mm-unmatched-msg strong { color: var(--mm-gold-hover); }
.mm-hh-picker-wrap { position: relative; }
.mm-hh-picker-label { font-size: 11px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 6px; }
.mm-hh-picker-input { width: 100%; padding: 8px 32px 8px 12px; border: 1px solid var(--mm-border-strong);
border-radius: 6px; font-size: 13px; background: #fff; outline: none; }
.mm-hh-picker-input:focus { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(26,42,94,0.12); }
.mm-hh-picker-icon { position: absolute; right: 10px; top: 32px; color: var(--text-light);
pointer-events: none; width: 14px; height: 14px; }
.mm-hh-picker-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
border: 1px solid var(--mm-border-strong); border-radius: 6px; box-shadow: 0 6px 16px rgba(20,30,60,0.14);
z-index: 50; max-height: 280px; overflow-y: auto; display: none; }
.mm-hh-picker-results.open { display: block; }
.mm-hh-result { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
border-bottom: 1px solid var(--border); font-size: 13px; }
.mm-hh-result:last-child { border-bottom: none; }
.mm-hh-result:hover { background: var(--mm-bg-tinted); }
.mm-hh-result-chip { width: 18px; height: 18px; border-radius: 4px; background: var(--blue); color: #fff;
display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.mm-hh-result-name { color: var(--text-dark); font-weight: 500; }
.mm-hh-result-meta { color: var(--text-mid); font-size: 11px; margin-left: auto; }
.mm-hh-loading, .mm-hh-empty { padding: 8px 10px; font-size: 12px; color: var(--text-mid); font-style: italic; }
.mm-hh-picker-help { font-size: 11px; color: var(--text-mid); margin-top: 6px; }
/* HH pick preview (after pick, before Save) */
.mm-hh-preview { background: rgba(46,160,92,0.08); border: 1px solid rgba(46,160,92,0.25); border-radius: 6px;
padding: 12px 14px; margin-top: 10px; display: none; }
.mm-hh-preview.visible { display: block; }
.mm-hh-preview-label { font-size: 10px; font-weight: 700; color: var(--mm-status-complete); text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 6px; }
.mm-hh-preview-grid { display: grid; grid-template-columns: 110px 1fr; row-gap: 6px; column-gap: 12px;
font-size: 13px; margin-bottom: 12px; }
.mm-hh-preview-grid .lbl { color: var(--text-mid); font-size: 12px; }
.mm-hh-preview-grid .val { color: var(--text-dark); font-weight: 500; }
.mm-hh-preview-foot { display: flex; gap: 8px; justify-content: flex-end; }
/* "Re-map household" link shown above the field grid when a row is already mapped */
.mm-remap-link { background: none; border: none; color: var(--blue); font-size: 11px; font-weight: 600;
cursor: pointer; padding: 0; text-decoration: none; margin-left: auto; }
.mm-remap-link:hover { text-decoration: underline; }
/* ─── Confirm modal (delete / purge actions) ───────────────── */
.mm-confirm-overlay { position: fixed; inset: 0; background: rgba(15,22,45,0.55); opacity: 0; pointer-events: none;
transition: opacity 0.16s; z-index: 200; display: flex; align-items: center; justify-content: center; }
.mm-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.mm-confirm-dialog { background: #fff; border-radius: 10px; box-shadow: 0 12px 40px rgba(20,30,60,0.28);
width: 420px; max-width: 92vw; padding: 20px 22px; transform: translateY(8px); transition: transform 0.18s; }
.mm-confirm-overlay.open .mm-confirm-dialog { transform: translateY(0); }
.mm-confirm-title { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.mm-confirm-body { font-size: 13px; color: var(--text-dark); line-height: 1.5; margin-bottom: 16px; }
.mm-confirm-body strong { color: var(--mm-status-action); }
.mm-confirm-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* ─── Empty state ──────────────────────────────────────────── */
.mm-empty-state { padding: 40px 20px; text-align: center; color: var(--text-mid); font-size: 13px; }
.mm-empty-state-title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.mm-loading-state { padding: 40px 20px; text-align: center; color: var(--text-mid); font-size: 13px;
font-style: italic; }
/* ─── Import pane ──────────────────────────────────────────── */
.mm-back-link { background: none; border: none; color: var(--blue); font-size: 13px; font-weight: 600;
cursor: pointer; padding: 0; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 4px; }
.mm-back-link:hover { text-decoration: underline; }
.mm-steps { display: flex; align-items: center; margin-bottom: 22px; gap: 0; }
.mm-step { display: flex; align-items: center; gap: 10px; flex: 1; }
.mm-step-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--mm-bg-tinted);
color: var(--text-mid); display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px; border: 2px solid transparent; flex-shrink: 0; }
.mm-step.done .mm-step-circle { background: var(--mm-status-complete); color: #fff; }
.mm-step.active .mm-step-circle { background: #fff; color: var(--navy); border-color: var(--navy); }
.mm-step-label { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.mm-step.active .mm-step-label,
.mm-step.done .mm-step-label { color: var(--navy); }
.mm-step-line { flex: 1; height: 2px; background: var(--mm-border-strong); margin: 0 12px; }
.mm-step.done + .mm-step-line { background: var(--mm-status-complete); }
.mm-review-summary { display: flex; gap: 18px; margin-bottom: 12px; padding: 12px 14px; background: #fff;
border: 1px solid var(--border); border-radius: 8px; }
.mm-stat { font-size: 12px; }
.mm-stat-num { font-size: 20px; font-weight: 700; color: var(--navy); }
.mm-stat-num.dup { color: var(--mm-status-action); }
.mm-stat-num.new { color: var(--mm-status-complete); }
.mm-stat-lbl { color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; font-size: 10px; }
.mm-review-controls { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.mm-review-controls select, .mm-review-controls input {
padding: 6px 10px; border: 1px solid var(--mm-border-strong); border-radius: 6px; font-size: 12px; background: #fff;
}
.mm-skip-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-mid);
cursor: pointer; }
.mm-skip-toggle input { margin: 0; }
.mm-row-skip td { opacity: 0.45; text-decoration: line-through; }
.mm-row-dup td { background: rgba(217,83,79,0.06); }
.mm-dup-badge { background: rgba(217,83,79,0.14); color: var(--mm-status-action); padding: 1px 6px;
border-radius: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
/* ── FF: Schwab "Set-Up" authorization rows (import preview) ───────────────
Setup rows are auto-excluded — they also carry .mm-row-skip (dim +
strikethrough). The faint gray tint here distinguishes them from a
plain user-excluded row so an admin scanning the Excluded tile can
tell at a glance which exclusions are Schwab Set-Up records. */
.mm-row-setup td { background: rgba(120,128,140,0.07); }
.mm-setup-badge {
background: rgba(120,128,140,0.16);
color: #5b6470;
padding: 1px 6px; border-radius: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px;
}
.mm-commit-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
background: var(--navy); color: #fff; border-radius: 8px; margin-top: 14px; }
.mm-commit-summary { font-size: 13px; }
.mm-commit-summary strong { color: var(--gold-light); font-weight: 700; }
.mm-commit-btn { background: var(--gold); color: #fff; border: 1px solid var(--mm-gold-hover); padding: 9px 22px;
border-radius: 6px; font-weight: 700; font-size: 13px; cursor: pointer; }
.mm-commit-btn:hover { background: var(--mm-gold-hover); }
.mm-commit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* ─── Admin Data Purge section (admin.html) ────────────────── */
.admin-purge-section { margin-top: 18px; }
.admin-purge-card { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px;
margin-bottom: 10px; }
.admin-purge-card-title { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.admin-purge-card-desc { font-size: 12px; color: var(--text-mid); margin-bottom: 10px; }
.admin-purge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-purge-row label { font-size: 12px; color: var(--text-dark); display: inline-flex; align-items: center; gap: 6px; }
.admin-purge-num { width: 64px; padding: 5px 8px; border: 1px solid var(--mm-border-strong); border-radius: 4px;
font-size: 13px; text-align: center; }
.admin-purge-btn { background: var(--navy); color: #fff; border: 1px solid var(--navy); padding: 6px 14px;
border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; }
.admin-purge-btn:hover { background: var(--mm-navy-deep); }
.admin-purge-btn.danger { background: var(--mm-status-action); border-color: var(--mm-status-action); }
.admin-purge-btn.danger:hover { background: #b8413d; }
.admin-purge-saved { font-size: 11px; color: var(--text-mid); }
.admin-purge-saved strong { color: var(--text-dark); }
/* ─── Admin User Edit drawer toggles (Coverage/Firm-wide pill, Y/N, role pill) ── */
.admin-toggle-pill { display: inline-flex; background: var(--mm-bg-tinted); border-radius: 6px; padding: 2px; }
.admin-toggle-pill button { background: transparent; border: none; padding: 5px 11px; font-size: 12px; font-weight: 600;
color: var(--text-mid); cursor: pointer; border-radius: 4px; min-width: 56px; }
.admin-toggle-pill button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 1.5px rgba(0,0,0,0.08); }
.admin-toggle-yn { display: inline-flex; background: var(--mm-bg-tinted); border-radius: 6px; padding: 2px; }
.admin-toggle-yn button { background: transparent; border: none; padding: 5px 14px; font-size: 12px; font-weight: 600;
color: var(--text-mid); cursor: pointer; border-radius: 4px; }
.admin-toggle-yn button.active.yes { background: var(--mm-status-complete); color: #fff; }
.admin-toggle-yn button.active.no { background: #fff; color: var(--text-dark); box-shadow: 0 1px 1.5px rgba(0,0,0,0.08); }
/* ════════════════════════════════════════════════════════════════════════
BJ additions — sortable + resizable headers, expired Hold pill, last-note
════════════════════════════════════════════════════════════════════════ */
/* Sortable header — clickable, shows pointer, has a caret indicator */
.mm-table thead th.mm-th-sortable { cursor: pointer; user-select: none; }
.mm-table thead th.mm-th-sortable:hover { background: #f0f3f8; }
.mm-table thead th.mm-th-static { cursor: default; }
.mm-sort-ind {
display: inline-block; margin-left: 4px; font-size: 10px;
color: var(--mm-text-faint, var(--text-light, #9aa3b2));
vertical-align: middle; min-width: 8px;
}
.mm-sort-ind.active { color: var(--navy); font-weight: 700; }
.mm-sort-ind.asc::before { content: '\25B2'; } /* ▲ */
.mm-sort-ind.desc::before { content: '\25BC'; } /* ▼ */
.mm-sort-ind.active:not(.asc):not(.desc)::before { content: '\25BC'; }
/* Resize handle — invisible hit zone on the right edge of the header.
Cursor changes to col-resize. Width 6px is enough to grab without
accidentally being hit on every column hover. */
.mm-table thead th.mm-th-resizable { position: relative; }
.mm-table thead th .mm-th-resize-handle {
position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
cursor: col-resize; user-select: none; z-index: 5;
}
.mm-table thead th .mm-th-resize-handle:hover { background: rgba(26,42,94,0.18); }
.mm-table thead th .mm-th-resize-handle.dragging { background: rgba(26,42,94,0.32); }
/* While dragging, kill text selection on the whole table */
.mm-table.is-resizing { user-select: none; }
.mm-table.is-resizing thead th { cursor: col-resize !important; }
/* Hold pill expired state — Day 0+ visual flag (still status=Hold,
just past hold_until). The auto-flip job runs HOLD_GRACE_DAYS later
to turn it back to Action Required. */
.mm-status-hold.expired {
background: rgba(217,83,79,0.14);
color: var(--mm-status-action, var(--alert-red, #b34040));
/* Tiny red dot before the text to make this obvious without a tooltip */
}
.mm-status-hold.expired::before {
content: '';
display: inline-block; width: 5px; height: 5px; border-radius: 50%;
background: currentColor; margin-right: 5px; vertical-align: middle;
}
/* Last-note preview cell — author inline + body inline, single line + ellipsis.
CC-fix2: author no longer bolded or navy — reads as normal table text. */
.mm-notes-preview { display: inline-block; max-width: 100%; }
.mm-notes-preview .mm-notes-author { font-weight: normal; color: inherit; margin-right: 4px; }
/* ─── BK additions: Addepar enrichment states + inline HH picker ─────────── */
/* 5th stats slot color — gold/amber to distinguish from green/red/blue */
.mm-stat-num.unmatched { color: #b87a1a; }
.mm-stat-num.blocked { color: #6b3fa0; } /* BP: purple for blocked tile */
/* Tighten review-summary gap so 5 stats fit without overflow on narrow cards */
.mm-review-summary { gap: 14px; flex-wrap: wrap; }
/* Step circles — neutral when neither active nor done (so the 2-step flow
reads "you start at 1, you progress to 2"). The card script toggles
.active and .done. */
.mm-step:not(.active):not(.done) .mm-step-circle {
background: var(--mm-bg-tinted);
color: var(--text-mid);
border: 2px solid var(--mm-border-strong);
}
/* ── Enriching from Addepar (in-flight after CSV parse) ──────────────────── */
.mm-enrich-loading {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px; margin-bottom: 14px;
background: #f7f9fc; border: 1px solid var(--border); border-radius: 8px;
}
.mm-enrich-spinner {
width: 22px; height: 22px; flex: 0 0 22px;
border: 2.5px solid var(--mm-border-strong);
border-top-color: var(--navy);
border-radius: 50%;
animation: mmSpin 0.85s linear infinite;
}
@keyframes mmSpin { to { transform: rotate(360deg); } }
.mm-enrich-loading-text { line-height: 1.35; }
.mm-enrich-loading-title { font-size: 13px; font-weight: 700; color: var(--navy); }
.mm-enrich-loading-sub { font-size: 12px; color: var(--text-mid); margin-top: 2px; }
/* ── Addepar fetch failed (commit blocked) ──────────────────────────────── */
.mm-addepar-fail {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; margin-bottom: 14px;
background: rgba(217,83,79,0.06);
border: 1px solid rgba(217,83,79,0.35);
border-radius: 8px;
}
.mm-addepar-fail-icon {
width: 26px; height: 26px; flex: 0 0 26px;
border-radius: 50%;
background: var(--mm-status-action); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 700;
}
.mm-addepar-fail-body { flex: 1; line-height: 1.35; }
.mm-addepar-fail-title { font-size: 13px; font-weight: 700; color: var(--mm-status-action); }
.mm-addepar-fail-sub { font-size: 12px; color: var(--text-mid); margin-top: 2px; }
.mm-addepar-retry-btn {
background: var(--navy); color: #fff;
border: 1px solid var(--mm-navy-deep);
padding: 7px 16px; font-size: 12px; font-weight: 700;
border-radius: 6px; cursor: pointer;
white-space: nowrap;
transition: background 0.12s;
}
.mm-addepar-retry-btn:hover { background: var(--mm-navy-deep); }
.mm-addepar-retry-btn:disabled { opacity: 0.6; cursor: progress; }
/* ── Addepar last-synced + Refresh (success state) ──────────────────────── */
.mm-addepar-status {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; margin-bottom: 10px;
background: #f7f9fc; border: 1px solid var(--border); border-radius: 6px;
font-size: 12px;
}
.mm-addepar-status-text { display: inline-flex; align-items: center; gap: 8px; color: var(--text-mid); }
.mm-addepar-status-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--mm-status-complete);
display: inline-block;
}
.mm-addepar-status-text #mmAddeparSyncedAt { color: var(--navy); font-weight: 600; }
.mm-addepar-status-meta { color: var(--text-light); margin-left: 4px; }
.mm-addepar-refresh-btn {
display: inline-flex; align-items: center; gap: 5px;
background: #fff; color: var(--navy);
border: 1px solid var(--mm-border-strong);
padding: 5px 11px; font-size: 11px; font-weight: 600;
border-radius: 5px; cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.mm-addepar-refresh-btn:hover { background: var(--mm-bg-tinted); border-color: var(--navy); }
.mm-addepar-refresh-btn:disabled { opacity: 0.55; cursor: progress; }
.mm-addepar-refresh-btn svg { flex: 0 0 13px; }
.mm-addepar-refresh-btn.refreshing svg { animation: mmSpin 0.85s linear infinite; }
/* ── Multi-match row (Addepar returned ≥2 entries for one sub-account) ──── */
.mm-table tbody tr.mm-row-multimatch {
background: rgba(212,168,84,0.06);
}
.mm-table tbody tr.mm-row-multimatch:hover {
background: rgba(212,168,84,0.12);
}
.mm-multimatch-badge {
background: rgba(212,168,84,0.18);
color: #8a5e0a;
padding: 1px 6px; border-radius: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px;
margin-left: 6px;
}
/* ── Unmatched row (no Addepar match) — same gold tint as multi-match ──── */
.mm-table tbody tr.mm-row-unmatched {
background: rgba(212,168,84,0.06);
}
.mm-table tbody tr.mm-row-unmatched:hover {
background: rgba(212,168,84,0.12);
}
/* ── Inline HH picker on unmatched rows in the REVIEW pane ─────────────── */
/* Reuses the drawer's HH-picker dropdown styling (mm-hh-result, etc.) so
results render identically. The trigger lives inside the Client cell;
when toggled, an absolutely-positioned dropdown unfolds beneath it. */
.mm-inline-hh-trigger {
display: inline-flex; align-items: center; gap: 5px;
background: #fff;
border: 1px solid var(--mm-border-strong);
color: var(--navy);
padding: 3px 9px;
font-size: 11px; font-weight: 600;
border-radius: 4px; cursor: pointer;
margin-top: 3px;
transition: background 0.12s, border-color 0.12s;
}
.mm-inline-hh-trigger:hover { background: var(--mm-bg-tinted); border-color: var(--navy); }
.mm-inline-hh-trigger.active { background: var(--mm-bg-tinted); border-color: var(--navy); }
.mm-inline-hh-trigger svg { width: 11px; height: 11px; flex: 0 0 11px; }
/* The picker itself — body-anchored at runtime so it escapes the table's
overflow:auto. Mirrors the drawer picker's visual; unique class to avoid
colliding with the drawer instance. */
.mm-inline-hh-picker {
position: fixed; z-index: 60;
width: 320px;
background: #fff;
border: 1px solid var(--mm-border-strong);
border-radius: 6px;
box-shadow: 0 6px 18px rgba(20,30,60,0.16);
display: none;
overflow: hidden;
}
.mm-inline-hh-picker.open { display: block; }
.mm-inline-hh-picker-input {
width: 100%;
padding: 9px 12px;
border: none;
border-bottom: 1px solid var(--border);
font-size: 13px;
outline: none;
}
.mm-inline-hh-picker-input:focus { background: #fafbfd; }
.mm-inline-hh-picker-results {
max-height: 260px;
overflow-y: auto;
}
.mm-inline-hh-picker-results .mm-hh-result {
padding: 8px 12px;
cursor: pointer;
display: flex; align-items: center; gap: 8px;
border-bottom: 1px solid var(--border);
font-size: 13px;
}
.mm-inline-hh-picker-results .mm-hh-result:hover { background: var(--mm-bg-tinted); }
.mm-inline-hh-picker-results .mm-hh-result:last-child { border-bottom: none; }
.mm-inline-hh-picker-results .mm-hh-result-chip {
background: var(--navy); color: #fff;
padding: 1px 6px; border-radius: 3px;
font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
}
.mm-inline-hh-picker-results .mm-hh-result-name { flex: 1; color: var(--text-dark); font-weight: 600; }
.mm-inline-hh-picker-results .mm-hh-result-meta { color: var(--text-mid); font-size: 11px; }
.mm-inline-hh-picker-results .mm-hh-loading,
.mm-inline-hh-picker-results .mm-hh-empty {
padding: 14px; color: var(--text-mid); font-size: 12px; font-style: italic; text-align: center;
}
/* ─── BK v4 hotfix additions ──────────────────────────────────────────────
Review-pane scroll: cap the table wrapper height and switch to
overflow:auto for both axes. Same constraint added below for the
ledger pane, which previously could push the page off-screen. */
.mm-import-pane .mm-table-wrap {
max-height: 380px;
overflow: auto; /* both axes — wide table needs horizontal too */
}
.mm-import-pane .mm-table thead th {
position: sticky; top: 0; z-index: 2;
/* lift over scrolled rows */
}
/* Ledger-pane scroll — applied at the card-body level since the wrap
has overflow-x already. Sticky header keeps the column labels visible
while scrolling. */
.mm-ledger-pane .mm-table-wrap {
max-height: 520px;
overflow: auto;
}
.mm-ledger-pane .mm-table thead th {
position: sticky; top: 0; z-index: 2;
background: #f5f7fb; /* opaque so scrolled rows don't bleed through */
}
/* Item 6: cancel the inherited .mm-table td:nth-child(3) right-align
from styles--components.css. Client/Account column should be left-aligned.
Same for the corresponding header cell. The inherited rule was a stale
leftover from an earlier table layout. */
.mm-table th:nth-child(3),
.mm-table td:nth-child(3) {
text-align: left !important;
}
/* ─── BL additions: note hover popover, dirty save button, column selector ── */
/* Last-note hover popover (replaces native title= tooltip) */
.mm-note-pop {
position: fixed;
z-index: 70;
width: 360px;
background: #fff;
border: 1px solid var(--mm-border-strong);
border-radius: 8px;
box-shadow: 0 10px 28px rgba(20,30,60,0.14);
display: none;
overflow: hidden;
font-size: 12px;
pointer-events: none; /* hover-only; never grabs focus */
}
.mm-note-pop.open { display: block; }
.mm-note-pop-head {
background: #f5f7fb;
padding: 8px 12px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-mid);
border-bottom: 1px solid var(--border);
}
.mm-note-pop-body { padding: 10px 12px 12px; }
.mm-note-pop-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.mm-note-pop-author {
font-weight: 700;
color: var(--text-dark);
font-size: 12px;
}
.mm-note-pop-action {
background: var(--navy);
color: #fff;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 7px;
border-radius: 3px;
}
.mm-note-pop-when {
margin-left: auto;
color: var(--text-light);
font-size: 11px;
}
.mm-note-pop-text {
color: var(--text-dark);
line-height: 1.4;
font-size: 12px;
}
/* Dirty Save button — visual cue that changes are pending.
BV (2026-05-13): three-button actionbar — the gold dirty-ring now
lives on the PRIMARY "Save & close" button (#mmDrawerSaveCloseBtn)
only. Marking both Save buttons created a dual-highlight that made
it unclear which was the main action. The secondary "Save" button
stays plain. .mm-drawer-save kept for the paired-drawer save button. */
.mm-drawer-save.dirty,
#mmDrawerSaveCloseBtn.dirty {
box-shadow: 0 0 0 2px #d4a854;
position: relative;
}
.mm-drawer-save.dirty::after,
#mmDrawerSaveCloseBtn.dirty::after {
content: '';
position: absolute;
top: -3px; right: -3px;
width: 8px; height: 8px;
background: #d4a854;
border-radius: 50%;
border: 2px solid #fff;
}
/* Column selector dropdown */
.mm-col-picker-wrap { position: relative; display: inline-block; }
.mm-col-picker-btn {
background: #fff;
border: 1px solid var(--mm-border-strong);
color: var(--navy);
width: 32px; height: 32px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.12s, border-color 0.12s;
margin-left: 6px;
}
.mm-col-picker-btn:hover,
.mm-col-picker-btn.active { background: var(--mm-bg-tinted); border-color: var(--navy); }
.mm-col-picker-btn svg { width: 15px; height: 15px; }
.mm-col-picker-pop {
position: absolute;
top: 38px; right: 0;
width: 200px;
background: #fff;
border: 1px solid var(--mm-border-strong);
border-radius: 8px;
box-shadow: 0 8px 22px rgba(20,30,60,0.14);
display: none;
z-index: 50;
overflow: hidden;
}
.mm-col-picker-pop.open { display: block; }
.mm-col-picker-pop-head {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-mid);
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: #f5f7fb;
}
.mm-col-picker-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid var(--border);
}
.mm-col-picker-row:last-child { border-bottom: none; }
.mm-col-picker-row:hover { background: var(--mm-bg-tinted); }
.mm-col-picker-row input[type="checkbox"] { margin: 0; }
.mm-col-picker-row label {
flex: 1;
cursor: pointer;
color: var(--text-dark);
user-select: none;
}
/* Column hide rules — set per-column visibility via .mm-table data-col */
.mm-table th[data-col-hidden],
.mm-table td[data-col-hidden] {
display: none;
}
/* ─── BL v2 additions: card chrome scroll region + min column width ──────── */
/* Move Money card now wraps in .card to inherit chrome (border, radius, shadow)
matching Tasks / Important Dates. Was missing — rendered borderless. */
.mm-card { display: flex; flex-direction: column; min-height: 0; height: 100%; }
/* Each pane (.mm-ledger-pane, .mm-import-pane) is a flex column inside .card.
The .card-header is fixed at top; .card-body grows to fill, with internal
scroll regions where needed. */
.mm-card .mm-ledger-pane,
.mm-card .mm-import-pane { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mm-card .mm-import-pane:not(.active) { display: none; }
.mm-card .mm-ledger-pane.hidden { display: none; }
/* card-body becomes the scrollable region (whole-card scroll fallback for
narrow viewports). On wider viewports, the table-wrap inside it scrolls
independently while stats + filters stay pinned via flex layout. */
.mm-card .mm-ledger-pane > .card-body,
.mm-card .mm-import-pane > .card-body {
flex: 1;
min-height: 0;
overflow: auto; /* fallback for narrow cards — whole body scrolls */
display: flex;
flex-direction: column;
}
/* Stats / filters / controls / commit-bar stay fixed-height; table-wrap
takes the remaining space. */
.mm-card .card-body > .mm-stats-row,
.mm-card .card-body > .mm-filters,
.mm-card .card-body > .mm-controls-row,
.mm-card .card-body > .mm-bulk-bar,
.mm-card .card-body > .mm-commit-bar,
.mm-card .card-body > .mm-stepper,
.mm-card .card-body > .mm-csv-drop,
.mm-card .card-body > .mm-enrich-loading,
.mm-card .card-body > .mm-addepar-fail,
.mm-card .card-body > .mm-addepar-status,
.mm-card .card-body > .mm-review-summary { flex: 0 0 auto; }
.mm-card .card-body > .mm-table-wrap {
flex: 1 1 auto;
min-height: 120px; /* keep at least a few rows visible */
max-height: none; /* override BK v5's 520/380 caps — flex handles it */
overflow: auto; /* both axes — wide tables get horizontal scroll */
}
/* Sticky header still works inside the flex'd table-wrap */
.mm-card .mm-table thead th {
position: sticky; top: 0; z-index: 2;
background: #f5f7fb; /* opaque so scrolled rows don't bleed through */
}
/* Column resize floor — was 60 (allowed shrink-past-text). 80 holds any
single-word header at 13px. JS uses Math.max(80, ...) on drag; CSS asserts
the floor for any pre-existing persisted widths from before BL v2. */
.mm-table th[data-col] { min-width: 80px; }
.mm-table th.mm-th-static,
.mm-table th.mm-dir-cell { min-width: 0; } /* checkbox + direction */
/* ═══════════════════════════════════════════════════════════════════════
BS — Drawer redesign + ledger picker/export (Session 64, 2026-05-12)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Drawer head actions (Re-map + close) ────────────────────────────── */
.mm-drawer-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mm-drawer-head-actions .mm-remap-link {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px; border: 1px solid var(--mm-border-strong); border-radius: 6px;
background: #fff; color: var(--text-mid); font-size: 11px; font-weight: 600;
cursor: pointer; line-height: 1; text-decoration: none;
}
.mm-drawer-head-actions .mm-remap-link svg { width: 11px; height: 11px; opacity: 0.85; }
.mm-drawer-head-actions .mm-remap-link:hover { color: var(--navy); border-color: var(--navy); text-decoration: none; }
/* ─── Drawer 2-column layout ──────────────────────────────────────────── */
.mm-drawer-2col {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 600px) {
.mm-drawer-2col { grid-template-columns: 1fr; }
}
.mm-drawer-left,
.mm-drawer-right { min-width: 0; }
/* Section title used inside the left/right columns */
.mm-drawer-left .mm-drawer-section-title,
.mm-drawer-right .mm-drawer-section-title { margin-bottom: 8px; }
/* Left-side transaction facts: 70px key column, label + value rows */
.mm-facts-grid {
display: grid;
grid-template-columns: 70px 1fr;
row-gap: 7px;
column-gap: 10px;
font-size: 13px;
align-items: baseline;
}
.mm-facts-grid .lbl { color: var(--text-mid); font-size: 12px; font-weight: 500; }
.mm-facts-grid .val { color: var(--text-dark); font-weight: 600; font-size: 13px; word-break: break-word; }
/* ─── Leg block (From / To) ─────────────────────────────────────────────
v20: shifted from 3px-left-stripe accent on a white card to a full
tinted fill + colored full border per tone. The CWA-side leg pops
visually; the external counterparty stays neutral. */
.mm-leg-block {
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 10px;
}
.mm-leg-block:last-child { margin-bottom: 0; }
/* Tone variants — full colored fill + matching border */
.mm-leg-block[data-leg-tone="outgoing"] {
background: rgba(217,83,79,0.07);
border-color: rgba(217,83,79,0.40);
}
.mm-leg-block[data-leg-tone="incoming"] {
background: rgba(46,160,92,0.07);
border-color: rgba(46,160,92,0.40);
}
.mm-leg-block[data-leg-tone="external"] {
background: #fff;
border-color: var(--border);
}
.mm-leg-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.mm-leg-title {
font-size: 11px; font-weight: 700; color: var(--text-mid);
text-transform: uppercase; letter-spacing: 0.6px;
}
/* Pill — solid colored bg + white text on toned legs; neutral on external */
.mm-leg-pill {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 10px;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
background: rgba(0,0,0,0.06); color: var(--text-mid);
}
.mm-leg-block[data-leg-tone="outgoing"] .mm-leg-pill {
background: var(--mm-status-action); color: #fff;
}
.mm-leg-block[data-leg-tone="incoming"] .mm-leg-pill {
background: var(--mm-status-complete); color: #fff;
}
.mm-leg-block[data-leg-tone="external"] .mm-leg-pill {
background: rgba(120,128,140,0.14); color: #5a6270;
}
/* CWA-side grid inside leg block — 100px key col */
.mm-leg-grid {
display: grid;
grid-template-columns: 100px 1fr;
row-gap: 6px;
column-gap: 10px;
font-size: 13px;
align-items: baseline;
}
.mm-leg-grid .lbl { color: var(--text-mid); font-size: 12px; font-weight: 500; }
.mm-leg-grid .val { color: var(--text-dark); font-weight: 600; font-size: 13px; word-break: break-word; }
/* SF link inside a leg block — navy text + dotted underline on hover, with arrow icon */
.mm-leg-sf-link {
color: var(--navy); text-decoration: none; font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
border-bottom: 1px dotted transparent;
}
.mm-leg-sf-link:hover { border-bottom-color: var(--navy); }
.mm-leg-sf-link svg { width: 11px; height: 11px; opacity: 0.7; }
/* ── FF: SF Task link in the drawer Transaction facts grid ──────────────── */
.mm-drawer-sf-task-link {
color: var(--blue, #3185fc);
text-decoration: none;
font-weight: 600;
border-bottom: 1px dotted transparent;
}
.mm-drawer-sf-task-link:hover { border-bottom-color: var(--blue, #3185fc); }
/* Cross-HH variant: the OTHER household's link — dotted blue, no arrow */
.mm-leg-hh-other {
color: var(--blue); text-decoration: none; font-weight: 600;
border-bottom: 1px dotted var(--blue);
}
.mm-leg-hh-other:hover { color: var(--navy); border-bottom-color: var(--navy); }
/* Unmatched-state inline label inside a leg row (Household = "Not in Addepar") */
.mm-leg-hh-unmapped {
color: var(--text-mid); font-style: italic; font-weight: 500;
}
/* Em-dash placeholder used alongside the "+ Map household" affordance */
.mm-leg-hh-dash { color: var(--text-mid); margin-right: 6px; }
/* Pair-detect-fail: "+ Map household" button (link-styled affordance) */
.mm-leg-map-link {
background: none; border: none; color: var(--blue);
font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
text-decoration: none;
}
.mm-leg-map-link:hover { text-decoration: underline; }
/* External counterparty: single-line custodian text (no grid) */
.mm-leg-ext-line {
font-size: 13px; font-weight: 600; color: var(--text-dark);
padding: 4px 0 2px;
}
/* Italic muted "n/a" cells (pair-detect-fail variant + future pre-BT cells) */
.mm-leg-na { color: var(--text-mid); font-style: italic; font-weight: 500; }
/* Gold note stripe under cross-HH grid */
.mm-leg-note-gold {
margin-top: 8px;
padding: 6px 9px;
border-left: 2px solid var(--gold);
background: rgba(219,149,35,0.08);
font-size: 11px;
color: var(--text-mid);
line-height: 1.4;
}
/* ─── Unmatched-state block (replaces 2-col grid when CWA-side unmatched) */
.mm-drawer-unmatched-block { margin-bottom: 18px; }
/* ─── Workflow section title row with adjacent leg label ──────────────── */
.mm-drawer-section-titlerow {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 10px;
}
.mm-drawer-section-titlerow .mm-drawer-section-title { margin-bottom: 0; }
.mm-workflow-leg-label {
display: inline-flex; align-items: center; gap: 8px;
}
.mm-workflow-leg-text {
font-size: 11px; font-weight: 600; color: var(--text-mid);
text-transform: uppercase; letter-spacing: 0.4px;
}
/* The workflow-section pill inherits parent leg-tone via data-leg-tone
set on the label wrapper at runtime. */
.mm-workflow-leg-label[data-leg-tone="outgoing"] .mm-leg-pill {
background: rgba(217,83,79,0.12); color: var(--mm-status-action);
}
.mm-workflow-leg-label[data-leg-tone="incoming"] .mm-leg-pill {
background: rgba(46,160,92,0.14); color: var(--mm-status-complete);
}
/* ─── Ledger: optional columns ───────────────────────────────────────── */
/* BU-fix2 (2026-05-13): dropped the gold tint that BS introduced —
per user request, optional columns should look the same as all
other columns. Replaced with the resize-floor fix below: white-
space: nowrap was preventing the column from shrinking below the
natural width of the header label. max-width: 0 + overflow: hidden
+ text-overflow: ellipsis lets the column shrink to the 80px JS
floor and truncate with "..." when needed. */
.mm-table th[data-col="counterparty"],
.mm-table th[data-col="account_num"],
.mm-table th[data-col="counterparty_acct"],
.mm-table td[data-col="counterparty"],
.mm-table td[data-col="account_num"],
.mm-table td[data-col="counterparty_acct"] {
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
}
.mm-table td[data-col="counterparty"].mm-col-na,
.mm-table td[data-col="counterparty_acct"].mm-col-na {
font-style: italic; color: var(--text-mid); font-weight: 500;
}
/* ─── Pair glyph: body-anchored hover popover ───────────────────────── */
/* BV (2026-05-13): the nested .mm-pair-tip-card (position:absolute
inside the Client cell) was clipped by the cell's overflow:hidden,
so only the cursor changed on hover with no visible content. Now a
body-level #mmPairTip element (mirrors #mmNotePop) positioned via
getBoundingClientRect — escapes the cell clip entirely. Cursor is
`pointer` (was `help`, which the browser rendered as a "?"). */
.mm-pair-glyph {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px;
color: var(--gold);
margin-left: 4px;
vertical-align: middle;
cursor: pointer;
}
.mm-pair-glyph svg { width: 12px; height: 12px; }
.mm-pair-tip {
position: fixed; z-index: 1000;
width: 280px; max-width: calc(100vw - 16px);
background: #fff;
border: 1px solid var(--mm-border-strong);
border-radius: 8px;
box-shadow: 0 6px 18px rgba(20,30,60,0.16);
padding: 10px 12px;
text-align: left;
opacity: 0; pointer-events: none; transform: translateY(-4px);
transition: opacity 0.12s, transform 0.12s;
}
.mm-pair-tip.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mm-pair-tip-head {
font-size: 11px; font-weight: 700; color: var(--navy);
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 4px;
}
.mm-pair-tip-body {
font-size: 12px; color: var(--text-dark);
line-height: 1.45; font-weight: 400;
}
/* ─── Column picker: gold "New" badge ─────────────────────────────────── */
.mm-col-picker-row { display: flex; align-items: center; gap: 8px; }
.mm-col-new-badge {
display: inline-flex; align-items: center;
padding: 1px 6px; border-radius: 3px;
background: var(--gold); color: #fff;
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
margin-left: auto;
}
/* ─── Kebab menu items: keep Import + Export visually equivalent ──────── */
.mm-kebab-menu .mm-kebab-item { line-height: 1.25; }
/* ═══════════════════════════════════════════════════════════════════════
BT-2 — Paired drawer UI (Session 66, 2026-05-12)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Eyebrow row: text + ⇄ Paired badge side-by-side ─────────────────── */
.mm-drawer-eyebrow-row {
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
}
.mm-paired-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 999px;
background: rgba(219,149,35,0.10);
border: 1px solid rgba(219,149,35,0.35);
color: var(--gold);
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
line-height: 1.25;
cursor: help;
}
.mm-paired-tag svg { width: 11px; height: 11px; }
/* ─── Notes thread: leg-tag pills ─────────────────────────────────────── */
.mm-note-leg-tag {
display: inline-flex; align-items: center;
padding: 1px 6px; border-radius: 999px;
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
line-height: 1.4;
margin-left: 6px;
}
.mm-note-leg-tag.out {
background: rgba(217,83,79,0.12); color: var(--mm-status-action);
}
.mm-note-leg-tag.in {
background: rgba(46,160,92,0.14); color: var(--mm-status-complete);
}
/* ─── Drawer paired-mode helpers ──────────────────────────────────────── */
/* When the drawer is in paired mode, the single-leg workflow's
leg-label in the section header is suppressed in favor of the
paired controls. */
.mm-drawer.is-paired .mm-workflow-leg-label {
display: none;
}
/* ───────────────────────────────────────────────────────────────────────
BU (2026-05-13): paired-workflow classes RESTORED.
Used by renderPairedWorkflow() / renderLegActionBlock() /
renderMergedActionBlock() in js--card-move-money.js when the open
row is part of a pair (originator + synthetic incoming).
─────────────────────────────────────────────────────────────────── */
/* ─── Apply-to-both checkbox row ────────────────────────────────────── */
.mm-apply-both-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--bg-faint);
border: 1px solid var(--border-soft);
border-radius: 8px;
margin-bottom: 10px;
}
.mm-apply-both-row input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--gold);
margin: 0;
cursor: pointer;
}
.mm-apply-both-row label {
font-size: 12.5px; font-weight: 600;
color: var(--text-dark);
cursor: pointer;
margin: 0;
}
.mm-apply-both-row .mm-apply-both-hint {
margin-left: auto;
font-size: 11px;
color: var(--text-mid);
font-style: italic;
}
/* ─── Per-leg action card (apply-to-both OFF) ───────────────────────── */
/* Two cards rendered side by side or stacked, one per leg.
Left border color encodes leg direction:
outgoing → red (matches mm-status-action)
incoming → green (matches mm-status-complete)
*/
.mm-leg-action-row {
border: 1px solid var(--border-soft);
border-left: 3px solid var(--border-soft);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--bg-card);
}
.mm-leg-action-row.leg-outgoing { border-left-color: var(--mm-status-action); }
.mm-leg-action-row.leg-incoming { border-left-color: var(--mm-status-complete); }
.mm-leg-action-row-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-mid);
margin-bottom: 6px;
}
.mm-leg-action-row.leg-outgoing .mm-leg-action-row-label { color: var(--mm-status-action); }
.mm-leg-action-row.leg-incoming .mm-leg-action-row-label { color: var(--mm-status-complete); }
/* ─── Merged action card (apply-to-both ON) ─────────────────────────── */
/* One card spanning both legs. Same chrome as the leg cards but with
a gold left-stripe to signal "shared". */
.mm-merged-action-row {
border: 1px solid var(--border-soft);
border-left: 3px solid var(--gold);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 8px;
background: var(--bg-card);
}
.mm-merged-action-row-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--gold);
margin-bottom: 6px;
}
/* "Current state by leg" sub-row inside the merged card — shows
each leg's existing action so the user can see what they're
transitioning FROM. */
.mm-merged-current-row {
display: flex; gap: 16px;
font-size: 11px; color: var(--text-mid);
margin: 6px 0 4px;
padding: 6px 8px;
background: var(--bg-faint);
border-radius: 6px;
}
.mm-merged-current-row .mm-merged-current-cell {
display: flex; gap: 4px;
align-items: baseline;
}
.mm-merged-current-row .mm-merged-current-cell strong {
font-weight: 700; color: var(--text-dark);
}
/* ─── Mixed state (apply-to-both ON, legs have different actions) ─── */
/* Shows an italic "— Mixed —" placeholder in the picker + derived
chips. Nothing commits until user picks a real action. */
.mm-select.mixed {
font-style: italic;
color: var(--text-mid);
}
.mm-mixed-text {
font-style: italic;
color: var(--text-mid);
font-size: 12px;
}
.mm-derived.mixed {
opacity: 0.6;
}
.mm-derived.mixed .mm-derived-chip,
.mm-derived.mixed .mm-derived-value {
font-style: italic;
color: var(--text-mid);
}
/* ═══════════════════════════════════════════════════════════════════════
BU-fix2 — Paired drawer UX + column reorder (Session 67, 2026-05-13)
═══════════════════════════════════════════════════════════════════════ */
/* ─── Paired body left-rail ─────────────────────────────────────────── */
/* Visual hierarchy: per-leg blocks (or the merged block) read as
children of the apply-to-both checkbox row. */
.mm-paired-body {
margin-left: 20px;
padding: 12px 0 0 14px;
border-left: 2px solid var(--border);
}
/* ─── Hold-until row (paired) ───────────────────────────────────────── */
/* Used inside per-leg .mm-leg-action-row blocks AND inside the merged
.mm-merged-action-row block when the chosen action is Hold. */
.mm-paired-hold-row {
display: flex; flex-direction: column; gap: 4px;
margin: 8px 0 4px;
padding: 8px 10px;
background: var(--bg-faint);
border: 1px solid var(--border-soft);
border-radius: 6px;
}
.mm-paired-hold-row label {
font-size: 10px; font-weight: 700; color: var(--text-mid);
text-transform: uppercase; letter-spacing: 0.4px;
}
.mm-paired-hold-row input[type="date"] {
width: 160px; padding: 5px 8px; border: 1px solid var(--mm-border-strong);
border-radius: 6px; font-size: 13px; color: var(--text-dark);
font-family: inherit;
}
.mm-paired-hold-row .mm-paired-hold-help {
font-size: 10px; color: var(--text-mid);
}
/* ─── Per-leg block tweaks (BU restored, BU-fix2 polished) ─────────── */
/* BU's renderLegActionBlock used .mm-derived-chip wrappers that didn't
exist in CSS, causing the Owner field to render blank. v21 JS uses
the canonical .mm-derived / .mm-derived-label / .mm-derived-value
pattern (matching the single-leg drawer's #mmDrawerDerivedRow). The
rules below are already in place from v15 (lines 484-493); only
adding the action-card chrome here. */
/* ─── Merged sub-band (apply-to-both ON: per-leg resolved display) ── */
.mm-merged-leg-band {
margin-top: 10px;
padding: 10px 12px;
background: var(--bg-faint);
border: 1px solid var(--border-soft);
border-radius: 6px;
border-left: 3px solid var(--border);
}
.mm-merged-leg-band.leg-out { border-left-color: var(--mm-status-action); }
.mm-merged-leg-band.leg-in { border-left-color: var(--mm-status-complete); }
.mm-merged-leg-band-label {
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.4px;
margin-bottom: 8px;
}
.mm-merged-leg-band.leg-out .mm-merged-leg-band-label { color: var(--mm-status-action); }
.mm-merged-leg-band.leg-in .mm-merged-leg-band-label { color: var(--mm-status-complete); }
.mm-merged-leg-band-action {
font-size: 12px; color: var(--text-dark);
margin-bottom: 8px; padding: 6px 10px;
background: #fff; border: 1px solid var(--border-soft);
border-radius: 6px;
}
.mm-merged-leg-band-action strong { font-weight: 700; }
/* ─── Column reorder: drag handle + visual feedback ─────────────────── */
.mm-table thead th.mm-th-reorderable {
/* The TH itself is draggable via HTML5 DnD. Resize handle (right
edge) stops propagation so resizing still works. */
cursor: grab;
}
.mm-table thead th.mm-th-reorderable:active { cursor: grabbing; }
.mm-table thead th.mm-th-dragging {
opacity: 0.45;
}
.mm-table thead th.mm-th-drop-target-left { box-shadow: inset 3px 0 0 var(--navy); }
.mm-table thead th.mm-th-drop-target-right { box-shadow: inset -3px 0 0 var(--navy); }
/* ─── Hold countdown badge + dark hover tooltip ─────────────────────── */
/* The Hold status pill gets an inline suffix badge with days remaining
plus a dark popover on hover showing the full tooltip text. */
.mm-hold-pill { cursor: help; position: relative; }
.mm-hold-badge {
font-size: 9px; font-weight: 700;
padding: 1px 5px; border-radius: 6px; margin-left: 2px;
background: rgba(255,255,255,0.55);
text-transform: none; letter-spacing: 0.2px;
}
.mm-hold-badge.warn { background: rgba(232,168,56,0.22); color: #8a5e0a; }
.mm-hold-badge.danger { background: rgba(217,83,79,0.18); color: var(--alert-red); }
.mm-hold-pill[data-hold-tip]::after {
content: attr(data-hold-tip);
position: absolute; left: 50%; top: calc(100% + 6px);
transform: translateX(-50%);
background: #1f2937; color: #fff;
padding: 6px 10px; border-radius: 6px;
font-size: 11px; font-weight: 500;
text-transform: none; letter-spacing: 0;
white-space: nowrap; opacity: 0; pointer-events: none;
transition: opacity 0.15s; z-index: 50;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mm-hold-pill[data-hold-tip]:hover::after { opacity: 1; }
/* BV (2026-05-13): the BU-fix2 nested .mm-pair-tip-card rules were
removed here. The pair-glyph tooltip is now body-anchored — see
.mm-pair-tip / .mm-pair-tip-head / .mm-pair-tip-body up in the
"Pair glyph: body-anchored hover popover" section above. The old
`.mm-pair-glyph { cursor: help; position: relative; }` override
(which double-declared the glyph and re-introduced the help cursor)
is gone — the canonical .mm-pair-glyph rule above sets cursor:pointer. */
/* ═══════════════════════════════════════════════════════════════════════
BY (Session 73) — autorefresh badge, External flows chip, kebab "New"
pill, Notifications modal, paired-row tint.
═══════════════════════════════════════════════════════════════════════ */
/* ── Last-refreshed badge (left of refresh button) ──────────────────── */
.mm-refresh-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
border-radius: 999px;
background: rgba(0, 36, 127, 0.04);
border: 1px solid rgba(0, 36, 127, 0.10);
font-family: 'Noto Sans', sans-serif;
font-size: 10.5px;
font-weight: 500;
color: #6b7280;
letter-spacing: 0.01em;
white-space: nowrap;
user-select: none;
margin-right: 6px;
}
.mm-refresh-badge.paused {
color: #9ca3af;
background: rgba(156, 163, 175, 0.06);
border-color: rgba(156, 163, 175, 0.18);
}
.mm-refresh-badge.failed {
color: #b45309;
background: rgba(219, 149, 35, 0.10);
border-color: rgba(219, 149, 35, 0.32);
}
.mm-refresh-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981; /* emerald green */
flex-shrink: 0;
animation: mm-refresh-pulse 2.4s ease-in-out infinite;
}
.mm-refresh-badge.paused .mm-refresh-dot {
background: #d1d5db;
animation: none;
}
.mm-refresh-badge.failed .mm-refresh-dot {
background: #db9523;
animation: none;
}
@keyframes mm-refresh-pulse {
0%, 100% { opacity: 0.55; transform: scale(0.92); }
50% { opacity: 1; transform: scale(1.08); }
}
/* ── Filters spacer (pushes External flows chip to the right end) ───── */
.mm-filters-spacer {
flex: 1 1 auto;
min-width: 0;
}
/* ── External flows chip (toggle) ───────────────────────────────────── */
.mm-extflows-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 11px 4px 9px;
border: 1px solid #dde3f0;
background: #fff;
color: #4a4a6a;
border-radius: 999px;
font-family: 'Noto Sans', sans-serif;
font-size: 11.5px;
font-weight: 500;
cursor: pointer;
transition: background 0.14s, border-color 0.14s, color 0.14s;
white-space: nowrap;
user-select: none;
}
.mm-extflows-chip:hover {
background: #f3f5fa;
border-color: #c8d2e5;
}
.mm-extflows-chip[aria-pressed="true"] {
background: rgba(0, 36, 127, 0.08);
border-color: #00247f;
color: #00247f;
font-weight: 600;
}
.mm-extflows-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #c0c8d8;
flex-shrink: 0;
}
.mm-extflows-chip[aria-pressed="true"] .mm-extflows-dot {
background: #db9523;
}
/* ── Kebab "New" pill ───────────────────────────────────────────────── */
.mm-kebab-new-pill {
display: inline-block;
margin-left: auto;
padding: 1px 7px;
background: #db9523;
color: #fff;
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
}
/* ── Notifications modal (kebab → Notifications) ────────────────────── */
.mm-notif-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(2px);
z-index: 1090;
}
.mm-notif-overlay.open { display: block; }
.mm-notif-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
max-width: 95vw;
max-height: 88vh;
overflow-y: auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
z-index: 1091;
font-family: 'Noto Sans', sans-serif;
}
.mm-notif-modal.open { display: block; }
.mm-notif-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 18px 22px 12px;
border-bottom: 1px solid rgba(0, 36, 127, 0.08);
gap: 12px;
}
.mm-notif-title-block { min-width: 0; }
.mm-notif-title {
font-family: 'Noto Serif', Georgia, serif;
font-size: 17px;
font-weight: 700;
color: #00247f;
letter-spacing: -0.005em;
}
.mm-notif-sub {
margin-top: 4px;
font-size: 12.5px;
color: #6b7280;
line-height: 1.45;
}
.mm-notif-close {
background: transparent;
border: 0;
font-size: 18px;
line-height: 1;
color: #6b7280;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
transition: background 0.14s, color 0.14s;
}
.mm-notif-close:hover { background: rgba(0, 36, 127, 0.06); color: #00247f; }
.mm-notif-body { padding: 6px 22px 20px; }
.mm-notif-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 14px 0;
border-bottom: 1px solid #f1f3f7;
}
.mm-notif-row:last-of-type { border-bottom: 0; }
.mm-notif-row-text { flex: 1 1 auto; min-width: 0; }
.mm-notif-row-title {
font-size: 13.5px;
font-weight: 600;
color: #1a1a2e;
line-height: 1.3;
}
.mm-notif-row-sub {
margin-top: 3px;
font-size: 11.5px;
color: #6b7280;
line-height: 1.45;
}
.mm-notif-row.disabled { opacity: 0.55; pointer-events: none; }
.mm-notif-foot-note {
margin-top: 10px;
font-size: 11px;
color: #9ca3af;
font-style: italic;
letter-spacing: 0.01em;
}
/* Toggle switch (used inside .mm-notif-row) */
.mm-switch {
position: relative;
display: inline-block;
width: 38px;
height: 22px;
flex-shrink: 0;
}
.mm-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.mm-switch-slider {
position: absolute;
cursor: pointer;
inset: 0;
background: #d1d5db;
border-radius: 22px;
transition: background 0.18s;
}
.mm-switch-slider::before {
content: "";
position: absolute;
height: 16px;
width: 16px;
left: 3px;
top: 3px;
background: #fff;
border-radius: 50%;
transition: transform 0.18s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.mm-switch input:checked + .mm-switch-slider {
background: #00247f;
}
.mm-switch input:checked + .mm-switch-slider::before {
transform: translateX(16px);
}
.mm-switch input:focus-visible + .mm-switch-slider {
outline: 2px solid #db9523;
outline-offset: 2px;
}
/* ─────────────────────────────────────────────────────────────
CC (2026-05-19) — Owner column + Reassign drawer affordance
───────────────────────────────────────────────────────────── */
/* Two-line Owner cell. Lives inside . */
.owner-cell {
display: flex;
flex-direction: column;
gap: 1px;
line-height: 1.25;
min-width: 0;
}
.owner-role {
font-size: 11.5px;
color: #6b7280;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.owner-name-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
}
.owner-name {
font-size: 13px;
color: #1a1a2e;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.owner-name.unassigned {
color: #9ca3af;
font-style: italic;
font-weight: 500;
}
/* Owner badges — sit inline beside the name. Suppressed in the
common case (advisor's assigned trader, no override). */
.owner-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
vertical-align: middle;
white-space: nowrap;
cursor: help;
}
.owner-badge.override {
background: rgba(0, 36, 127, 0.10);
color: #00247f;
border: 1px solid rgba(0, 36, 127, 0.20);
}
/* .owner-badge.firm-default removed in CC-fix1 (Session 76). */
/* The drawer's Current Owner chip uses the same .owner-cell shell;
inside the drawer it lives in a .mm-derived-value container, so
we tighten spacing slightly to match the chip aesthetic. */
.mm-derived-value > .owner-cell {
align-items: flex-start;
}
/* ── Drawer Reassign affordance ────────────────────────────── */
.mm-reassign-wrap {
margin-top: 6px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
position: relative;
}
.mm-reassign-btn {
background: transparent;
border: 1px dashed #c3cad6;
color: #00247f;
font-size: 11.5px;
font-weight: 600;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
letter-spacing: 0.01em;
transition: background 0.15s, border-color 0.15s;
}
.mm-reassign-btn:hover {
background: rgba(0, 36, 127, 0.06);
border-color: #00247f;
border-style: solid;
}
.mm-reassign-btn:focus-visible {
outline: 2px solid #db9523;
outline-offset: 2px;
}
.mm-reassign-btn[aria-expanded="true"] {
background: #00247f;
color: #fff;
border-color: #00247f;
border-style: solid;
}
.mm-reassign-list {
background: #fff;
border: 1px solid #d6dbe4;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
padding: 4px;
min-width: 220px;
max-width: 320px;
max-height: 240px;
overflow-y: auto;
}
.mm-reassign-item {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: 0;
padding: 7px 10px;
border-radius: 4px;
font-size: 12.5px;
color: #1a1a2e;
cursor: pointer;
line-height: 1.4;
}
.mm-reassign-item:hover {
background: rgba(0, 36, 127, 0.07);
}
.mm-reassign-item:focus-visible {
outline: 2px solid #db9523;
outline-offset: -2px;
}
.mm-reassign-item-current {
background: rgba(0, 36, 127, 0.05);
font-weight: 600;
cursor: default;
}
.mm-reassign-item-current:hover {
background: rgba(0, 36, 127, 0.05);
}
.mm-reassign-item-clear {
color: #b91c1c;
border-bottom: 1px solid #f3f4f6;
margin-bottom: 2px;
padding-bottom: 7px;
font-weight: 500;
}
.mm-reassign-item-clear:hover {
background: rgba(185, 28, 28, 0.06);
}
.mm-reassign-tag {
font-size: 10.5px;
color: #6b7280;
font-style: italic;
font-weight: 500;
margin-left: 4px;
}
.mm-reassign-tag-current {
color: #00247f;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 9.5px;
}
.mm-reassign-empty {
padding: 10px 12px;
font-size: 12px;
color: #6b7280;
font-style: italic;
text-align: center;
}
/* ═══════════════════════════════════════════════════════════════════════
GY (2026-06-24) — Reassign RM (advisor of record), single + bulk
═══════════════════════════════════════════════════════════════════════ */
/* Drawer header "Reassign RM" button — reuses .mm-remap-link sizing (it
carries the .mm-remap-link class); the wrap anchors the dropdown. */
.mm-rm-btn-wrap { position: relative; display: inline-flex; align-items: center; }
.mm-drawer-head-actions .mm-rm-btn[aria-expanded="true"] {
background: var(--navy); color: #fff; border-color: var(--navy);
}
.mm-drawer-head-actions .mm-rm-btn[aria-expanded="true"] svg { opacity: 1; }
/* Header dropdown — absolutely positioned under the button (the trader
.mm-reassign-list flows inline; this variant floats). */
.mm-rm-list.mm-reassign-list {
position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 60;
min-width: 250px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.mm-rm-list .mm-rm-list-title {
font-size: 10.5px; font-weight: 700; color: #6b7280; text-transform: uppercase;
letter-spacing: 0.04em; padding: 4px 6px 6px;
}
.mm-rm-list .search,
.mm-rm-list-search {
width: calc(100% - 8px); margin: 2px 4px 6px; padding: 6px 8px; font-size: 12.5px;
border: 1px solid var(--mm-border-strong); border-radius: 5px; font-family: inherit;
}
/* Bulk "Set RM" — gold accent so it reads apart from the workflow buttons. */
.mm-bulk-btn.rm { background: var(--gold); border-color: var(--gold); color: #2a2204; }
.mm-bulk-btn.rm:hover { background: #d3ac52; border-color: #d3ac52; }
.mm-bulk-btn.rm svg { opacity: 0.9; }
/* Bulk Set-RM popover search + states */
.mm-bulk-pop-search {
width: 100%; padding: 6px 8px; font-size: 13px; font-family: inherit;
border: 1px solid var(--mm-border-strong); border-radius: 5px; margin-bottom: 6px;
}
.mm-bulk-pop-search:focus { border-color: var(--navy); outline: none; }
#mmBulkRmList { max-height: 240px; overflow-y: auto; }
.mm-bulk-pop-empty { padding: 8px; font-size: 12.5px; color: #6b7280; font-style: italic; list-style: none; }
/* GY-2: editable RM cell in the import-review table */
.mm-rm-cell { white-space: nowrap; }
.mm-rm-edit-trigger {
display: inline-flex; align-items: center; gap: 5px; max-width: 200px;
border: 1px dashed var(--mm-border-strong); background: transparent; border-radius: 5px;
padding: 3px 8px; font: inherit; font-size: 12.5px; color: var(--text-dark); cursor: pointer;
}
.mm-rm-edit-trigger:hover { border-color: var(--navy); background: rgba(0, 36, 127, 0.05); }
.mm-rm-edit-trigger.active { border-color: var(--navy); border-style: solid; }
.mm-rm-edit-trigger.edited { border-style: solid; border-color: var(--gold); background: var(--gold-bg, #fff8ec); font-weight: 600; }
.mm-rm-edit-trigger.unresolved { color: #b45309; font-style: italic; border-color: #e6c07a; }
.mm-rm-pencil { width: 11px; height: 11px; opacity: 0.5; flex: none; }
.mm-rm-edit-trigger.edited .mm-rm-pencil { display: none; }
.mm-rm-revert { border: none; background: none; color: #b91c1c; cursor: pointer; font-size: 14px;
line-height: 1; padding: 0 2px 0 6px; }
.mm-rm-revert:hover { color: #7f1010; }
/* Body-portaled advisor picker (fixed — positioned from getBoundingClientRect) */
.mm-rm-pop {
position: fixed; z-index: 1000; min-width: 250px; max-width: 300px;
background: #fff; border: 1px solid #d6dbe4; border-radius: 7px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 5px; display: none;
}
.mm-rm-pop.open { display: block; }
.mm-rm-pop-title { font-size: 10px; font-weight: 700; color: var(--text-mid); text-transform: uppercase;
letter-spacing: 0.04em; padding: 4px 7px 6px; }
.mm-rm-pop-search { width: calc(100% - 8px); margin: 0 4px 6px; padding: 6px 8px; font: inherit;
font-size: 12.5px; border: 1px solid var(--mm-border-strong); border-radius: 5px; }
.mm-rm-pop-search:focus { border-color: var(--navy); outline: none; }
.mm-rm-pop-revert { display: block; width: 100%; text-align: left; background: none; border: none;
border-bottom: 1px solid #f1f3f8; margin-bottom: 3px; padding: 7px 9px; font: inherit; font-size: 12.5px;
color: #b91c1c; cursor: pointer; border-radius: 5px; font-weight: 500; }
.mm-rm-pop-revert:hover { background: rgba(185, 28, 28, 0.06); }
.mm-rm-pop-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.mm-rm-pop-list li { padding: 7px 9px; font-size: 12.5px; border-radius: 5px; cursor: pointer; }
.mm-rm-pop-list li:hover { background: rgba(0, 36, 127, 0.07); color: var(--navy); }
.mm-rm-pop-list li.current { background: rgba(0, 36, 127, 0.05); font-weight: 600; }
.mm-rm-pop-empty { padding: 8px; font-size: 12.5px; color: #6b7280; font-style: italic; cursor: default; }
.mm-rm-pop-empty:hover { background: none; color: #6b7280; }
/* ═══════════════════════════════════════════════════════════════════════
GG (2026-05-22) — Session 84, Move Money QA
═══════════════════════════════════════════════════════════════════════ */
/* ── ITEM 1: To-side destination HH picker ─────────────────────────────
The pair-fail To block's "+ Map household" button opens a full-width
picker that sits below the drawer's 2-col grid (the From side stays
valid, so this can't replace the grid like #mmDrawerUnmatchedView).
Search/preview internals reuse the existing .mm-hh-picker-* /
.mm-hh-preview-* / .mm-btn-* rules. */
/* Disabled state for the "+ Map household" button while the picker
is open (set via the button's `disabled` property in JS). */
.mm-leg-map-link:disabled {
color: var(--text-light);
cursor: default;
text-decoration: none;
}
.mm-to-map-view {
margin: 16px 0 4px;
border: 1px solid var(--gold);
border-radius: 8px;
}
.mm-to-map-head {
background: rgba(219, 149, 35, 0.09);
padding: 11px 14px;
border-bottom: 1px solid rgba(219, 149, 35, 0.30);
/* GG-fix1 (2026-05-22): corners rounded directly on the header instead
of via `overflow: hidden` on .mm-to-map-view. The picker results
dropdown (.mm-hh-picker-results) is position:absolute and opens
downward from an input low in the block, so an overflow-clipped
parent hid the results entirely. */
border-radius: 7px 7px 0 0;
}
.mm-to-map-head h4 {
margin: 0;
font-family: 'Noto Serif', Georgia, serif;
font-size: 13.5px;
font-weight: 700;
color: var(--mm-gold-hover);
}
.mm-to-map-head p {
margin: 3px 0 0;
font-size: 11.5px;
color: var(--text-mid);
line-height: 1.45;
}
.mm-to-map-body { padding: 14px; }
/* ── ITEM 2a: import-pane header control wrapper ───────────────────────
Renamed from .card-controls (cards--move-money.html v26). The old name
was a descendant .card-controls inside the single .card element, which
tripped injectControls()'s `card.querySelector('.card-controls')` guard
in js--app.js and skipped maximize/collapse injection for the whole
Move Money card. Holds the import-mode Cancel (X) button. */
.mm-import-head-ctrl {
display: flex;
align-items: center;
margin-left: auto;
flex-shrink: 0;
}
/* ── ITEM 2b: collapse behaviour for the two-pane Move Money card ──────
The Move Money card wraps two panes (.mm-ledger-pane, .mm-import-pane)
inside one .card, so the card's visible header is nested one level
down — it is NOT a direct child of .card. The generic collapse rule
`.card.card-collapsed > *:not(.card-header)` therefore hides the
header along with everything else. These rules re-show the ledger
pane (which carries the header) and hide only its body + the whole
import pane, so a collapsed Move Money card shows just its header.
This sheet loads after styles--components.css, so equal-specificity
!important rules win on source order. */
.mm-card.card-collapsed > .mm-ledger-pane { display: block !important; }
.mm-card.card-collapsed > .mm-import-pane { display: none !important; }
.mm-card.card-collapsed .mm-ledger-pane > .card-body { display: none !important; }
/* ═══════════════════════════════════════════════════════════════════════
GG-fix1 preflight (2026-05-22) — import review destination mapping
═══════════════════════════════════════════════════════════════════════ */
/* Destination sub-line under an internal-transfer row in the review table.
Sits below .mm-client-sub; shows the destination account and whether it
resolved in Addepar / was hand-mapped / still needs mapping. */
.mm-dest-line {
font-size: 11.5px;
color: var(--text-mid);
margin-top: 3px;
line-height: 1.35;
}
.mm-dest-acct {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--text-dark);
}
.mm-dest-flag { color: #8a5e0a; font-weight: 600; } /* not in Addepar */
.mm-dest-ok { color: #2f7a3e; font-weight: 600; } /* resolved / mapped */
/* "Map destination" button — a modifier of the existing inline HH trigger.
Small top gap so it clears the destination line above it. */
.mm-inline-hh-trigger.mm-dest-trigger { margin-top: 4px; }
/* Re-verify button in the import commit bar. The bar is navy, so this is a
ghost button (white outline) sitting left of the gold Commit button. */
.mm-reverify-btn {
margin-left: auto;
margin-right: 8px;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.55);
padding: 9px 18px;
border-radius: 6px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
.mm-reverify-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.mm-reverify-btn:disabled { opacity: 0.7; cursor: default; }
/* Commit-summary state colors (the summary text sits on the navy bar). */
.mm-commit-summary-stale strong { color: var(--gold-light); }
.mm-commit-summary-stale { color: #ffe9c2; }
.mm-commit-summary-warn { color: #ffe9c2; }
.mm-commit-summary-ok { color: #c7f0d4; }
/* ═══════════════════════════════════════════════════════════════════════════
GQ (2026-06-11): Move Money source rework — three-section ledger,
Transaction Status pills, Unknown placeholder, bidirectional setup icon,
import notification-bypass checkbox.
═══════════════════════════════════════════════════════════════════════════ */
/* Section header rows in #mmTbody. Low-contrast tinted band with navy text
(Paul's mockup-v8 feedback: tighten + reduce contrast). Read-only sections
(Upcoming / Setups) use a paler band + muted text. */
.mm-section-head td {
background: #eef2f8;
color: #00247f;
padding: 5px 14px;
border-top: 1px solid #e2e6ee;
border-bottom: 1px solid #c8d0dc;
}
.mm-section-head.info td { background: #f5f7fb; color: #52586a; }
/* GQ-fix: the section header td spans the full (wide, horizontally-scrolling)
ledger, so a right-aligned filter ends up off-screen. Pin the label + filter
to the LEFT and make them sticky so they stay visible at any scroll position. */
.mm-sec-row { display: flex; align-items: center; gap: 16px; position: sticky; left: 0; width: max-content; max-width: 100%; }
.mm-sec-left {
cursor: pointer; display: inline-flex; align-items: center;
font-weight: 700; font-size: 11.5px; letter-spacing: 0.2px; user-select: none;
}
.mm-sec-chev { display: inline-block; transition: transform 0.15s; margin-right: 7px; font-size: 11px; }
.mm-section-head.collapsed .mm-sec-chev { transform: rotate(-90deg); }
.mm-sec-count {
background: rgba(0, 36, 127, 0.10); color: #00247f;
border-radius: 10px; padding: 1px 8px; font-size: 10.5px; margin-left: 8px;
}
.mm-section-head.info .mm-sec-count { background: rgba(0, 0, 0, 0.06); color: #52586a; }
.mm-sec-tag {
background: rgba(0, 0, 0, 0.05); color: #6b7280;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
padding: 2px 7px; border-radius: 4px; margin-left: 10px;
}
.mm-sec-filter { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 11px; color: #6b7280; }
.mm-sec-select {
font-family: inherit; font-size: 11px; border: 1px solid #c8d0dc;
background: #fff; color: #1a1a2e; border-radius: 5px; padding: 3px 6px; cursor: pointer;
}
.mm-sec-empty td {
background: #fbfcfe; color: #6b7280; font-size: 12.5px; font-style: italic; padding: 10px 14px;
}
/* Transaction Status (custodian) pills — distinct from the workflow Review
Status pills (.mm-status-*). */
.mm-ts {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px;
border: 1px solid transparent; white-space: nowrap;
}
.mm-ts-active { background: rgba(49, 133, 252, 0.10); color: #1e5fc0; border-color: rgba(49, 133, 252, 0.28); }
.mm-ts-complete { background: rgba(46, 160, 92, 0.10); color: #1d7a45; border-color: rgba(46, 160, 92, 0.28); }
.mm-ts-failed { background: rgba(217, 83, 79, 0.12); color: #b23b37; border-color: rgba(217, 83, 79, 0.35); }
.mm-ts-unresolved { background: rgba(138, 92, 217, 0.12); color: #6b3fb5; border-color: rgba(138, 92, 217, 0.35); }
.mm-ts-inactive { background: #f0f1f4; color: #6c757d; border-color: #d8dce4; }
/* Unknown placeholder for unmatched (no Addepar/SF) rows — signals it needs
mapping. The whole row stays clickable (drawer carries the HH picker). */
.mm-client-line.mm-unknown { font-style: italic; color: #6b7280; font-weight: 600; }
/* Bidirectional setup direction glyph (⇄). */
.mm-dir-icon.both { background: #eef1f6; color: #00247f; }
/* Import commit-bar notification-bypass checkbox (sits on the navy bar). */
.mm-suppress-email {
display: inline-flex; align-items: center; gap: 7px;
color: #e7ecfb; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-right: 8px;
}
.mm-suppress-email input { width: 15px; height: 15px; accent-color: var(--gold, #db9523); cursor: pointer; }
/* Import commit-bar "Preview email" button (ghost, on the navy bar). */
.mm-preview-email-btn {
margin-right: 8px; background: transparent; color: #fff;
border: 1px solid rgba(255, 255, 255, 0.55); padding: 9px 16px; border-radius: 6px;
font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.mm-preview-email-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
/* Notification email preview modal (body-anchored, isolated iframe). */
.mm-emailprev-overlay { position: fixed; inset: 0; background: rgba(0, 9, 31, 0.55); z-index: 9998; display: none; }
.mm-emailprev-overlay.open { display: block; }
.mm-emailprev-modal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 720px; max-width: calc(100vw - 32px); height: 80vh; max-height: 860px;
background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 20, 80, 0.35);
z-index: 9999; display: none; flex-direction: column; overflow: hidden;
}
.mm-emailprev-modal.open { display: flex; }
.mm-emailprev-head {
display: flex; align-items: center; gap: 12px; padding: 12px 16px;
border-bottom: 1px solid var(--border, #e2e6ee); background: #fbfcfe;
}
.mm-emailprev-title { font-family: 'Noto Serif', serif; font-weight: 700; color: var(--navy, #00247f); font-size: 15px; }
.mm-emailprev-recip { margin-left: auto; font-size: 12px; color: var(--text-mid, #52586a); display: inline-flex; align-items: center; gap: 6px; }
.mm-emailprev-recip select { font-family: inherit; font-size: 12.5px; border: 1px solid var(--border-strong, #c8d0dc); border-radius: 6px; padding: 5px 8px; max-width: 260px; }
.mm-emailprev-close { width: 30px; height: 30px; border: 0; background: var(--bg-tinted, #eef1f6); color: var(--navy, #00247f); border-radius: 6px; font-size: 15px; cursor: pointer; line-height: 1; }
.mm-emailprev-status { padding: 6px 16px; font-size: 11.5px; color: var(--text-muted, #6b7280); border-bottom: 1px solid var(--border, #e2e6ee); background: #fff; }
.mm-emailprev-body { flex: 1; overflow: auto; background: #eef1f6; }
.mm-emailprev-body iframe { width: 100%; height: 100%; border: 0; background: #eef1f6; }
/* MM (2026-06-17): Full | Supplemental preview toggle (in the preview head) */
.mm-mode-seg { display: inline-flex; border: 1px solid var(--border-strong, #c8d0dc); border-radius: 7px; overflow: hidden; }
.mm-mode-seg button { border: 0; background: #fff; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-mid, #52586a); cursor: pointer; }
.mm-mode-seg button.on { background: var(--navy, #00247f); color: #fff; }
/* MM (2026-06-17): commit-time email prompt */
.mm-commit-overlay { position: fixed; inset: 0; background: rgba(0, 9, 31, 0.55); z-index: 9998; display: none; }
.mm-commit-overlay.open { display: block; }
.mm-commit-modal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 540px; max-width: calc(100vw - 32px); background: #fff; border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 20, 80, 0.35); z-index: 9999; display: none; flex-direction: column; overflow: hidden;
}
.mm-commit-modal.open { display: flex; }
.mm-commit-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; }
.mm-commit-title { font-family: 'Noto Serif', serif; font-weight: 700; color: var(--navy, #00247f); font-size: 16px; }
.mm-commit-head .mm-emailprev-close { margin-left: auto; }
.mm-commit-sub { padding: 0 18px 12px; font-size: 12.5px; color: var(--text-mid, #52586a); }
.mm-commit-choices { padding: 0 18px; }
.mm-commit-choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border, #e2e6ee);
border-radius: 11px; padding: 11px 13px; margin-bottom: 9px; cursor: pointer; }
.mm-commit-choice:hover { background: #f7f9fd; }
.mm-commit-choice.on { border-color: var(--mm-status-new, #3185fc); box-shadow: inset 0 0 0 1px var(--mm-status-new, #3185fc); }
.mm-commit-choice input { margin-top: 3px; }
.mm-commit-choice b { color: var(--navy, #00247f); font-size: 13.5px; }
.mm-commit-cd { display: block; font-size: 12px; color: var(--text-mid, #52586a); margin-top: 3px; }
.mm-cpill { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: 1px 7px; margin-left: 6px; }
.mm-cpill.full { background: #eaf2ff; color: #2061c4; }
.mm-cpill.supp { background: #fdf3e0; color: #9a6a12; }
.mm-cpill.none { background: #f1f4fa; color: #6b7280; }
.mm-commit-foot { padding: 12px 18px 16px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.mm-btn-ghost { background: #fff; border: 1px solid var(--border-strong, #c8d0dc); color: var(--navy, #00247f); border-radius: 9px; padding: 9px 15px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mm-btn-ghost:hover { background: #f3f6fc; }
.mm-commit-go { background: var(--navy, #00247f); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.mm-commit-go:hover { background: var(--mm-navy-deep, #00091f); }