/* Vested CRM workspace — Phase 2a (read-only lead viewer) Brand + layout lifted verbatim from docs/lead_page_unified_v4.html (the design contract). Strict palette: teal / navy / mid-grey / warm-grey, white surfaces. */ /* SCOPED (2026-10-17, CRM_IN_PLATFORM_SCOPE.md step 2): every rule sits under :where(.crm-app), so the CRM can load into the Platform page without restyling it. .crm-app is the CRM's container in the Platform (#page-crm's .crm-hosted) and its pop-up layer (.crm-layer on body). :where() adds NO specificity, so each rule weighs exactly what it did unscoped. test/crmCssScope.test.js fails on an unscoped selector. The palette was hard-coded on :root. It now reads the Platform's brand variables, so a white-labelled firm keeps its colours when hosted; the fallbacks are the old values (the Platform's --brand-accent and --brand-ink for Vested are these same two colours). The standalone shell's rules (its page grid, sidebar, wordmark, hamburger and drawer) went with crm/index.html in step 6 (2026-10-18): the Platform draws all of that now. */ .crm-app { --teal:var(--brand-accent, #008D95); --teal-dark:#006970; --navy:var(--brand-ink, #0B2339); --navy-soft:#16314a; --mid-grey:#848484; --warm-grey:#BFBAB0; --text-primary:var(--brand-ink, #0B2339); --text-secondary:#56636E; --text-tertiary:#848484; --border:#E4E5E3; --border-strong:#CFD0CC; --bg-page:#F4F5F5; --bg-card:#FFFFFF; --neutral-fill:#F1F2F2; } :where(.crm-app, .crm-app *) { box-sizing:border-box; margin:0; padding:0; } :where(.crm-app) { font-family:'DM Sans',-apple-system,sans-serif; background:var(--bg-page); color:var(--text-primary); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } :where(.crm-app) h1,:where(.crm-app) h2,:where(.crm-app) h3 { font-family:'DM Serif Display',Georgia,serif; font-weight:500; color:var(--navy); } /* Phone: the CRM's content beside the Platform's fixed hamburger. */ @media (max-width:768px) { :where(.crm-app) .main { padding-left:1rem; padding-right:1rem; } :where(.crm-app) .breadcrumb { padding-left:52px; } } /* Review & Send overlay (crmMarketingReview). Leaves the Platform's menu column visible: it is z-index 1000, so a full-width overlay under it lost its left edge. --ws-nav-w is its width (workspaceNav.css). Mobile: the sidebar is an off-canvas drawer, so go full width. */ :where(.crm-app) #__mkt-review { position:fixed; top:0; right:0; bottom:0; left:var(--ws-nav-w, 236px); z-index:950; overflow-y:auto; background:var(--bg-page); } @media (max-width:768px) { :where(.crm-app) #__mkt-review { left:0; } } /* MAIN */ :where(.crm-app) .crm-col { display:flex; flex-direction:column; min-width:0; } :where(.crm-app) .main-wrap { display:flex; flex-direction:column; min-width:0; } /* (The top bar and quick search moved to static/shared/quickSearch.css on 2026-10-18: one Platform-wide bar.) */ :where(.crm-app) .main { padding:1.25rem 1.75rem 3rem; max-width:1360px; width:100%; } :where(.crm-app) .breadcrumb { margin-bottom:1.1rem; font-size:13px; } :where(.crm-app) .breadcrumb a { color:var(--text-secondary); text-decoration:none; display:inline-flex; align-items:center; gap:6px; } :where(.crm-app) .breadcrumb a:hover { color:var(--teal); } :where(.crm-app) .card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.1rem 1.3rem; margin-bottom:12px; } :where(.crm-app) .card-head { display:flex; justify-content:space-between; align-items:center; } :where(.crm-app) .card-head.with-margin { margin-bottom:14px; } :where(.crm-app) .section-label { font-size:11px; font-weight:700; letter-spacing:1.3px; color:var(--text-tertiary); } :where(.crm-app) .collapse-btn { background:none; border:none; color:var(--text-tertiary); cursor:pointer; padding:4px; display:inline-flex; } :where(.crm-app) .collapse-btn:hover { color:var(--navy); } :where(.crm-app) .collapse-btn i { font-size:18px; transition:transform .15s; } :where(.crm-app) .collapsed .collapse-btn i { transform:rotate(180deg); } :where(.crm-app) .collapsed .card-body { display:none; } :where(.crm-app) .collapsed.card { padding-bottom:1.1rem; } :where(.crm-app) .collapsed .card-head.with-margin { margin-bottom:0; } /* HEADER */ :where(.crm-app) .header-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; } :where(.crm-app) .lead-name { font-family:'DM Serif Display',serif; font-size:27px; font-weight:500; color:var(--navy); line-height:1.15; margin-bottom:9px; display:inline-flex; align-items:center; gap:10px; } :where(.crm-app) .lead-meta { font-size:13px; color:var(--text-secondary); display:flex; gap:16px; align-items:center; flex-wrap:wrap; } :where(.crm-app) .lead-meta .meta-item { display:inline-flex; align-items:center; gap:6px; } :where(.crm-app) .lead-meta .meta-item i.lead { color:var(--mid-grey); font-size:15px; } :where(.crm-app) .lead-meta a { color:var(--teal); text-decoration:none; border-bottom:1px dashed rgba(0,141,149,.4); } :where(.crm-app) .id-pill { font-family:'DM Sans',monospace; background:var(--neutral-fill); color:var(--text-secondary); padding:3px 9px; border-radius:6px; font-size:12px; font-weight:600; } :where(.crm-app) .tier-badge { background:var(--navy); color:#fff; font-size:12px; padding:5px 12px; border-radius:14px; font-weight:600; } /* HEAT */ :where(.crm-app) .heat-block { min-width:260px; text-align:right; } :where(.crm-app) .heat-score-row { display:flex; align-items:baseline; justify-content:flex-end; gap:8px; margin-bottom:5px; } :where(.crm-app) .heat-score { font-family:'DM Serif Display',serif; font-size:32px; font-weight:600; color:var(--text-tertiary); line-height:1; } :where(.crm-app) .heat-score-max { font-size:14px; color:var(--text-tertiary); } :where(.crm-app) .heat-band { font-size:12px; font-weight:700; color:var(--text-tertiary); letter-spacing:.5px; text-transform:uppercase; } :where(.crm-app) .heat-track-wrap { position:relative; height:12px; margin-top:8px; border-radius:6px; overflow:hidden; } :where(.crm-app) .heat-track-gradient { position:absolute; inset:0; background:linear-gradient(to right, #BFBAB0 0%, #BFBAB0 18%, #848484 35%, #4FA8A1 60%, #1F9CA1 78%, #008D95 100%); } :where(.crm-app) .heat-track-mask { position:absolute; top:0; bottom:0; right:0; left:0; background:var(--neutral-fill); } :where(.crm-app) .heat-sub { font-size:11.5px; color:var(--text-tertiary); margin-top:6px; line-height:1.4; } :where(.crm-app) .heat-block.live .heat-score, :where(.crm-app) .heat-block.live .heat-band { color:var(--teal-dark); } /* LOG A CALL — logCallCard (lead page) */ :where(.crm-app) .log-call-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; } :where(.crm-app) .log-call-chip { background:#fff; border:1px solid var(--border-strong); border-radius:16px; padding:5px 12px; font:inherit; font-size:12.5px; font-weight:600; color:var(--navy); cursor:pointer; } :where(.crm-app) .log-call-chip:hover { background:var(--neutral-fill); } :where(.crm-app) .log-call-chip.on { background:var(--teal); border-color:var(--teal); color:#fff; } :where(.crm-app) .log-call-note { width:100%; box-sizing:border-box; padding:8px; border:1px solid var(--border-strong); border-radius:6px; font:inherit; font-size:13px; color:var(--navy); resize:vertical; } :where(.crm-app) .log-call-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; } :where(.crm-app) .log-call-hint { font-size:11.5px; color:var(--text-tertiary); } :where(.crm-app) .log-call-foot .crm-convert-btn:disabled { opacity:.5; cursor:default; } /* WHAT'S DRIVING HEAT — heatCard / crmHeatDriversHtml */ :where(.crm-app) .heat-driver { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--neutral-fill); } :where(.crm-app) .hd-icon { width:28px; height:28px; border-radius:7px; background:var(--neutral-fill); color:var(--teal); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; } :where(.crm-app) .hd-main { flex:1; min-width:0; } :where(.crm-app) .hd-title { font-size:12.5px; color:var(--navy); font-weight:600; } :where(.crm-app) .hd-sub { font-size:11.5px; color:var(--text-secondary); } :where(.crm-app) .hd-val { font-size:12.5px; font-weight:700; color:var(--teal-dark); white-space:nowrap; } :where(.crm-app) .hd-val.zero { color:var(--text-tertiary); font-weight:600; } :where(.crm-app) .hd-val.neg { color:var(--text-secondary); } :where(.crm-app) .heat-note { font-size:11.5px; color:var(--text-tertiary); margin-top:10px; line-height:1.5; } /* JOURNEY — live timeline (crmLoadJourney → GET /api/crm/persons/:id/journey). Visual spec: docs/lead_page_journey_mockup.html. */ :where(.crm-app) .journey-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; } :where(.crm-app) .journey-btn { background:#fff; border:1px solid var(--border-strong); border-radius:7px; padding:5px 11px; font-family:inherit; font-size:12px; font-weight:600; color:var(--navy); cursor:pointer; display:inline-flex; align-items:center; gap:5px; } :where(.crm-app) .journey-btn:hover { background:var(--neutral-fill); } :where(.crm-app) .journey-btn i { font-size:14px; } :where(.crm-app) .timeline { display:flex; gap:0; align-items:stretch; } :where(.crm-app) .phase { flex:1; position:relative; padding:0 4px; } :where(.crm-app) .phase-top { text-align:center; margin-bottom:10px; min-height:34px; } :where(.crm-app) .phase-name { display:block; font-size:13px; font-weight:700; color:var(--navy); } :where(.crm-app) .phase-dur { display:block; font-size:11px; color:var(--text-tertiary); margin-top:1px; } :where(.crm-app) .phase.future .phase-name { color:var(--warm-grey); } :where(.crm-app) .phase.current .phase-name { color:var(--teal-dark); } :where(.crm-app) .phase.current .phase-dur { color:var(--teal-dark); font-weight:600; } :where(.crm-app) .phase.frozen .phase-name, :where(.crm-app) .phase.frozen .phase-dur { color:var(--text-secondary); } :where(.crm-app) .phase-track { position:relative; height:8px; background:var(--border); } :where(.crm-app) .phase:first-child .phase-track { border-radius:4px 0 0 4px; } :where(.crm-app) .phase:last-child .phase-track { border-radius:0 4px 4px 0; } :where(.crm-app) .track-fill { position:absolute; top:0; left:0; height:100%; background:var(--teal); } :where(.crm-app) .phase:first-child .track-fill { border-radius:4px 0 0 4px; } :where(.crm-app) .phase.frozen .track-fill { background:var(--warm-grey); } :where(.crm-app) .phase-divider { position:absolute; top:-3px; right:0; width:2px; height:14px; background:#fff; z-index:2; } :where(.crm-app) .mile { position:absolute; top:50%; transform:translate(-50%,-50%); z-index:3; } :where(.crm-app) .mile .dot { display:block; width:11px; height:11px; border-radius:50%; background:var(--teal); border:2px solid #fff; box-sizing:border-box; } :where(.crm-app) .mile.milestone .dot { background:var(--navy); } :where(.crm-app) .mile.minor .dot { width:7px; height:7px; border-width:1px; background:var(--warm-grey); } :where(.crm-app) .mile.off .dot { background:#fff; border-color:var(--navy); } :where(.crm-app) .here-pin { position:absolute; top:50%; transform:translate(-50%,-50%); z-index:4; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--teal); box-shadow:0 0 0 3px rgba(0,141,149,.15); box-sizing:border-box; } :where(.crm-app) .here-pin.frozen { border-color:var(--warm-grey); box-shadow:0 0 0 3px rgba(191,186,176,.25); } :where(.crm-app) .phase-miles { margin-top:12px; min-height:30px; text-align:center; } :where(.crm-app) .mile-label { display:block; font-size:10.5px; color:var(--text-secondary); line-height:1.25; } :where(.crm-app) .density-hint { display:inline-block; font-size:10.5px; color:var(--text-tertiary); background:var(--neutral-fill); padding:1px 7px; border-radius:8px; line-height:1.4; } :where(.crm-app) .journey-hint-below { display:table; margin:4px auto 0; } :where(.crm-app) .here-label { display:block; font-size:11px; font-weight:700; color:var(--teal-dark); } :where(.crm-app) .here-label.frozen { color:var(--text-secondary); } :where(.crm-app) .journey-legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-tertiary); } :where(.crm-app) .journey-legend > span { display:inline-flex; align-items:center; gap:6px; } :where(.crm-app) .journey-legend .journey-legend-note { margin-left:auto; } :where(.crm-app) .ld { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; box-sizing:border-box; background:var(--teal); } :where(.crm-app) .ld.milestone { background:var(--navy); } :where(.crm-app) .ld.engagement { background:var(--teal); } :where(.crm-app) .ld.minor { background:var(--warm-grey); } :where(.crm-app) .ld.off { background:#fff; border:2px solid var(--navy); } :where(.crm-app) .journey-note { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--text-tertiary); display:flex; align-items:center; gap:6px; } :where(.crm-app) .journey-history { margin-top:12px; padding-top:6px; border-top:1px solid var(--border); max-height:320px; overflow-y:auto; } :where(.crm-app) .journey-history-row { display:flex; align-items:flex-start; gap:10px; padding:6px 0; border-bottom:1px solid var(--neutral-fill); font-size:12.5px; } :where(.crm-app) .journey-history-row .ld { width:9px; height:9px; margin-top:5px; } :where(.crm-app) .journey-history-when { color:var(--text-tertiary); font-size:11.5px; min-width:84px; flex-shrink:0; } :where(.crm-app) .journey-history-label { color:var(--navy); flex:1; } :where(.crm-app) .journey-history-phase { color:var(--text-tertiary); font-size:11px; flex-shrink:0; } /* WORKSPACE */ :where(.crm-app) .workspace { display:grid; grid-template-columns:280px 1fr; gap:14px; align-items:start; } :where(.crm-app) .rail .card { padding:.85rem 1rem; } :where(.crm-app) .rail .card-head .section-label { font-size:10.5px; } :where(.crm-app) .rail .card-head { padding:2px 0; } :where(.crm-app) .rail .card-body { margin-top:12px; } :where(.crm-app) .main-col { min-width:0; } /* TOGGLES (non-interactive in 2a) */ :where(.crm-app) .toggle-list { display:flex; flex-direction:column; } :where(.crm-app) .toggle-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--neutral-fill); gap:8px; } :where(.crm-app) .toggle-row:last-child { border-bottom:none; } :where(.crm-app) .toggle-label { font-size:12.5px; color:var(--navy); } :where(.crm-app) .toggle-sub { font-size:11px; color:var(--text-tertiary); margin-top:1px; } :where(.crm-app) .toggle { width:34px; height:19px; background:var(--border-strong); border-radius:10px; position:relative; flex-shrink:0; cursor:pointer; transition:background .15s, box-shadow .15s, opacity .15s; } :where(.crm-app) .toggle.readonly { cursor:default; opacity:.85; } :where(.crm-app) .toggle:not(.readonly):hover { box-shadow:0 0 0 3px rgba(0,141,149,.12); } :where(.crm-app) .toggle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,141,149,.35); } :where(.crm-app) .toggle.saving { opacity:.5; pointer-events:none; } :where(.crm-app) .toggle::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:left .15s; } :where(.crm-app) .toggle.on { background:var(--teal); } :where(.crm-app) .toggle.on::after { left:17px; } /* Phase 2b — inline error tooltip + row error highlight */ :where(.crm-app) .toggle-row { position:relative; } :where(.crm-app) .toggle-row.error .toggle { box-shadow:0 0 0 2px rgba(217,79,79,.45); } :where(.crm-app) .crm-error-tip { position:absolute; right:0; top:-4px; transform:translateY(-100%); background:#d94f4f; color:#fff; font-size:11px; font-weight:600; padding:4px 9px; border-radius:5px; box-shadow:0 2px 6px rgba(217,79,79,.3); pointer-events:none; white-space:nowrap; z-index:50; } :where(.crm-app) .crm-error-tip::after { content:''; position:absolute; right:8px; bottom:-4px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #d94f4f; } /* Phase 2b — inline editable text fields (header name/email/phone + Current broker) */ :where(.crm-app) .crm-editable { display:inline-flex; align-items:center; gap:4px; position:relative; } :where(.crm-app) .crm-editable .crm-edit-display { display:inline-flex; align-items:center; gap:0; } :where(.crm-app) .crm-editable.editing .crm-pencil { display:none; } :where(.crm-app) .crm-pencil { background:none; border:0; cursor:pointer; color:var(--teal); padding:2px 4px; opacity:0; transition:opacity .15s, color .12s; line-height:1; } :where(.crm-app) .crm-pencil i { font-size:13px; vertical-align:middle; } :where(.crm-app) .crm-editable:hover .crm-pencil { opacity:1; } :where(.crm-app) .crm-pencil:hover { color:var(--teal-dark); } :where(.crm-app) .crm-pencil:focus-visible { opacity:1; outline:none; box-shadow:0 0 0 2px rgba(0,141,149,.35); border-radius:4px; } :where(.crm-app) .crm-empty-hint { color:var(--text-tertiary); font-weight:400; font-style:italic; } :where(.crm-app) .crm-inline-input { border:1.5px solid var(--teal); border-radius:5px; padding:2px 7px; font:inherit; color:var(--navy); background:#fff; min-width:140px; max-width:100%; } :where(.crm-app) .crm-inline-input:focus { outline:none; box-shadow:0 0 0 3px rgba(0,141,149,.18); } :where(.crm-app) .crm-inline-input.saving { opacity:.6; pointer-events:none; } /* lead-name editable adopts the lead-name typography */ :where(.crm-app) .lead-name.crm-editable .crm-inline-input { font-family:'DM Serif Display',serif; font-size:27px; font-weight:500; min-width:200px; } /* ── Portal-owned name (PERSON_NAME_EDIT_SCOPE.md) ────────────────────────── The header name is now two fields (first + last), or one for a company. The pencil here is PERSISTENT, not hover-only: the pre-existing name editor was hover-only and went unnoticed for long enough that nobody knew the name could be edited at all. Everything else keeps the hover-reveal. */ :where(.crm-app) .pn-row { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; } :where(.crm-app) .pn-row .crm-editable .crm-inline-input { font-family:'DM Serif Display',serif; font-size:27px; font-weight:500; min-width:150px; } :where(.crm-app) .pn-row .crm-pencil { opacity:.45; } :where(.crm-app) .pn-row .crm-editable:hover .crm-pencil, :where(.crm-app) .pn-row .crm-editable:focus-within .crm-pencil { opacity:1; } :where(.crm-app) .pn-note { display:flex; align-items:center; gap:8px; margin-top:3px; font-size:11.5px; color:var(--text-tertiary); } :where(.crm-app) .pn-note i { font-size:13px; vertical-align:-2px; } :where(.crm-app) .pn-chip { display:inline-block; padding:1px 7px; border-radius:9px; background:var(--teal); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } :where(.crm-app) .pn-link { background:none; border:0; padding:0; font:inherit; font-size:11.5px; color:var(--teal); cursor:pointer; text-decoration:underline; text-underline-offset:2px; } :where(.crm-app) .pn-link:hover { color:var(--teal-dark); } :where(.crm-app) .pn-link:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,141,149,.35); border-radius:3px; } /* The company suggestion is advisory — the regex is a heuristic and a person can legitimately be named "Trust". Amber, never red, and never auto-applied. */ :where(.crm-app) .pn-suggest { color:#B45309; font-weight:600; } :where(.crm-app) .pn-suggest:hover { color:#92400e; } /* Structure workspace: same controls at the node's smaller scale. */ :where(.crm-app) .sw-pn .pn-link, :where(.crm-app) .sw-pn .pn-chip { font-size:10.5px; vertical-align:middle; } /* Phase 2b — removable tag pills (Interests + Needs help with) */ :where(.crm-app) .tag.removable { display:inline-flex; align-items:center; gap:3px; cursor:default; padding-right:5px; } :where(.crm-app) .tag-x { background:none; border:0; color:var(--text-tertiary); padding:0 2px; font-size:14px; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, color .12s; } :where(.crm-app) .tag.removable:hover .tag-x { opacity:1; } :where(.crm-app) .tag-x:hover { color:#d94f4f; } :where(.crm-app) .tag-x:focus-visible { opacity:1; outline:none; color:#d94f4f; } /* Phase 2b — "+ Add" pill button + dropdown */ :where(.crm-app) .crm-add-pill-btn { background:#fff; border:1px dashed var(--border-strong); color:var(--text-secondary); padding:2px 9px; border-radius:11px; font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; transition:color .12s, border-color .12s; } :where(.crm-app) .crm-add-pill-btn:hover { color:var(--teal); border-color:var(--teal); } :where(.crm-app) .crm-add-pill-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,141,149,.22); border-color:var(--teal); color:var(--teal); } :where(.crm-app) .crm-add-pill-dropdown { background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 6px 18px rgba(11,35,57,.08); padding:4px 0; z-index:500; min-width:180px; max-height:240px; overflow-y:auto; } :where(.crm-app) .crm-add-pill-option { padding:7px 14px; font-size:12.5px; color:var(--navy); cursor:pointer; } :where(.crm-app) .crm-add-pill-option:hover { background:var(--neutral-fill); color:var(--teal); } :where(.crm-app) .crm-add-pill-empty { padding:9px 14px; font-size:11.5px; color:var(--text-tertiary); font-style:italic; } /* Phase 2b prompt 4 — tier convert button (Fee & Plan card) */ :where(.crm-app) .crm-convert-btn { width:100%; padding:10px 16px; background:var(--teal); color:#fff; border:1px solid var(--teal); border-radius:8px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s; } :where(.crm-app) .crm-convert-btn:hover { background:var(--teal-dark); border-color:var(--teal-dark); } :where(.crm-app) .crm-convert-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,141,149,.35); } :where(.crm-app) .crm-convert-btn:disabled { opacity:.55; cursor:wait; } /* Phase 2c prompt 2 — Stop Selling: quieter secondary (outline/muted), same full-width shape */ :where(.crm-app) .crm-stopsell-btn { width:100%; padding:9px 16px; background:#fff; color:var(--text-secondary); border:1px solid var(--border-strong); border-radius:8px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s, color .12s; } :where(.crm-app) .crm-stopsell-btn:hover { background:var(--neutral-fill); border-color:var(--warm-grey); color:var(--navy); } :where(.crm-app) .crm-stopsell-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(132,132,132,.25); } :where(.crm-app) .crm-stopsell-btn:disabled { opacity:.55; cursor:wait; } /* Phase 2b prompt 4 — top-of-page toast (write-failure surface) */ :where(.crm-app) .crm-toast { position:fixed; top:18px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:10px 12px 10px 18px; border-radius:8px; box-shadow:0 8px 28px rgba(11,35,57,.28); font-size:13px; line-height:1.45; display:flex; align-items:center; gap:14px; z-index:2000; max-width:560px; } :where(.crm-app) .crm-toast-error { background:#d94f4f; } :where(.crm-app) .crm-toast-warning { background:#C76D2E; color:#fff; } :where(.crm-app) .crm-toast-success { background:#0B7A66; color:#fff; } :where(.crm-app) .crm-toast-msg { flex:1; min-width:0; } :where(.crm-app) .crm-toast-close { background:none; border:0; color:inherit; opacity:.75; cursor:pointer; font-size:18px; line-height:1; padding:2px 5px; } :where(.crm-app) .crm-toast-close:hover { opacity:1; } :where(.crm-app) .crm-toast-close:focus-visible { outline:none; opacity:1; box-shadow:0 0 0 2px rgba(255,255,255,.45); border-radius:4px; } /* Phase 2b prompt 4-unified — convert modal linked-client picker */ :where(.crm-app) .crm-modal-picker { margin:14px 0 4px; padding:12px 14px; background:var(--neutral-fill); border-radius:8px; } :where(.crm-app) .crm-modal-picker-prompt { font-size:12.5px; color:var(--text-secondary); line-height:1.5; margin-bottom:8px; } :where(.crm-app) .crm-modal-picker-select { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; font:inherit; font-size:13px; color:var(--navy); cursor:pointer; } :where(.crm-app) .crm-modal-picker-select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,141,149,.18); } /* Phase 2b — confirmation modal (Pitch Campaigns enrol) */ :where(.crm-app) .crm-modal-backdrop { position:fixed; inset:0; background:rgba(11,35,57,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; } :where(.crm-app) .crm-modal { background:var(--bg-card); border-radius:12px; padding:22px 24px 20px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.25); } :where(.crm-app) .crm-modal h3 { font-family:'DM Serif Display',Georgia,serif; font-size:18px; font-weight:500; color:var(--navy); margin-bottom:8px; } :where(.crm-app) .crm-modal p { font-size:13px; color:var(--text-secondary); line-height:1.55; margin-bottom:18px; } :where(.crm-app) .crm-modal-actions { display:flex; gap:8px; justify-content:flex-end; } :where(.crm-app) .crm-btn { padding:8px 16px; border-radius:7px; border:1px solid var(--border-strong); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:background .12s, border-color .12s; } :where(.crm-app) .crm-btn-secondary { background:#fff; color:var(--navy); } :where(.crm-app) .crm-btn-secondary:hover { background:var(--neutral-fill); } :where(.crm-app) .crm-btn-primary { background:var(--teal); color:#fff; border-color:var(--teal); } :where(.crm-app) .crm-btn-primary:hover { background:var(--teal-dark); border-color:var(--teal-dark); } :where(.crm-app) .crm-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(0,141,149,.35); } :where(.crm-app) .crm-btn:disabled { opacity:.45; cursor:not-allowed; } /* Archive to Vested Re-marketing: the one dialog every screen opens. Red says "you are giving this lead up"; the reason dropdown is required, so the confirm stays disabled until one is picked. */ :where(.crm-app) .crm-btn-danger { background:#C0392B; color:#fff; border-color:#C0392B; } :where(.crm-app) .crm-btn-danger:hover:not(:disabled) { background:#A93226; border-color:#A93226; } :where(.crm-app) .crm-hb-tag { font-size:10.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#C0392B; margin-bottom:6px; } :where(.crm-app) .crm-hb-list { margin:0 0 14px 18px; padding:0; font-size:13px; color:var(--text-secondary); line-height:1.6; } :where(.crm-app) .crm-hb-label { display:block; font-size:12px; font-weight:600; color:var(--navy); margin-bottom:6px; } :where(.crm-app) .crm-hb-select { width:100%; padding:8px 10px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; font:inherit; font-size:13px; color:var(--navy); cursor:pointer; } :where(.crm-app) .crm-hb-select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,141,149,.18); } :where(.crm-app) .crm-hb-alt { font-size:12px; color:var(--text-tertiary); border-top:1px solid var(--border); margin-top:14px; padding-top:10px; margin-bottom:14px; } :where(.crm-app) .crm-hb-err { display:none; color:#C0392B; font-size:12px; margin:-6px 0 12px; } /* The row / header trigger: quiet until hovered, so it never competes with the constructive actions beside it. */ :where(.crm-app) .crm-hb-btn { background:#fff; color:#A93226; border:1px solid #E6B8B2; border-radius:6px; padding:5px 10px; font:inherit; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap; } :where(.crm-app) .crm-hb-btn:hover { background:#FBEDEB; border-color:#C0392B; } :where(.crm-app) .crm-hb-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(192,57,43,.25); } /* Lead page header: Structure and Archive to Vested as ONE matched pair (2026-09-15). They used to be a full-width teal button over a small outlined one, which read as two unrelated controls. Same width, height and type; Structure stays primary. */ :where(.crm-app) .lead-head-actions { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; } :where(.crm-app) .lead-head-actions .crm-convert-btn, :where(.crm-app) .lead-head-actions .crm-hb-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 12px; font-size:12.5px; font-weight:600; border-radius:8px; line-height:1.3; } :where(.crm-app) .lead-head-actions .crm-hb-btn { background:#fff; color:var(--text-secondary); border:1px solid var(--border-strong); } :where(.crm-app) .lead-head-actions .crm-hb-btn:hover { background:#FBEDEB; color:#A93226; border-color:#E6B8B2; } :where(.crm-app) .lead-head-actions i { font-size:14px; } /* Lead card Advice Type: a plain portal-backed select, plus a note when the value shown still comes from Pipedrive. */ :where(.crm-app) .crm-field-select { width:100%; padding:7px 10px; border:1px solid var(--border-strong); border-radius:6px; background:#fff; font:inherit; font-size:13px; color:var(--navy); cursor:pointer; margin-top:3px; } :where(.crm-app) .crm-field-select:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,141,149,.18); } :where(.crm-app) .crm-field-select:disabled { opacity:.6; cursor:wait; } :where(.crm-app) .crm-field-note { font-size:11.5px; color:var(--text-tertiary); margin-top:5px; line-height:1.45; } :where(.crm-app) .crm-field-link { background:none; border:0; padding:0; font:inherit; font-size:11.5px; font-weight:600; color:var(--teal-dark); text-decoration:underline; cursor:pointer; } :where(.crm-app) .crm-field-link:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(0,141,149,.3); border-radius:2px; } /* Admin Re-marketing: reason counts + the pool table. */ :where(.crm-app) .rm-filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin-top:12px; } :where(.crm-app) .rm-filters label { display:flex; flex-direction:column; gap:4px; font-size:11px; letter-spacing:.4px; color:var(--text-tertiary); } :where(.crm-app) .rm-filters select, :where(.crm-app) .rm-filters input { padding:6px 8px; border:1px solid var(--border-strong); border-radius:6px; font:inherit; font-size:12.5px; color:var(--navy); background:#fff; } :where(.crm-app) .rm-reasons { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; margin-top:14px; font-size:13px; } :where(.crm-app) .rm-reasons .bar { position:relative; padding:4px 8px; border-radius:4px; overflow:hidden; color:var(--navy); } :where(.crm-app) .rm-reasons .bar i { position:absolute; inset:0 auto 0 0; background:rgba(0,141,149,.14); } :where(.crm-app) .rm-reasons .bar span { position:relative; } :where(.crm-app) .rm-reasons .bar.auto i { background:rgba(132,132,132,.16); } :where(.crm-app) .rm-reasons .n { font-variant-numeric:tabular-nums; font-weight:600; color:var(--navy); align-self:center; } :where(.crm-app) .rm-owned { display:inline-block; font-size:11px; font-weight:600; color:#8A5A00; background:#FBF4E3; border:1px solid #EBD9A8; border-radius:4px; padding:1px 6px; } /* New Client — "this might already exist" panel. Amber (a caution to read, not an error): the create is still available, we are just showing what already matches. */ :where(.crm-app) .nc-dup { margin-top:10px; padding:10px 11px; border:1px solid #EBD9A8; background:#FBF4E3; border-radius:8px; } :where(.crm-app) .nc-dup-h { font-size:12.5px; font-weight:800; color:#8A6D1F; margin-bottom:3px; } :where(.crm-app) .nc-dup-sub { font-size:11.5px; color:#6B5A2E; line-height:1.45; margin-bottom:8px; } :where(.crm-app) .nc-dup-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px; background:#fff; border:1px solid #EBD9A8; border-radius:7px; margin-bottom:6px; } :where(.crm-app) .nc-dup-nm { display:flex; flex-direction:column; gap:1px; min-width:0; font-size:12.5px; font-weight:700; color:var(--navy); } :where(.crm-app) .nc-dup-meta { font-size:10.5px; font-weight:600; color:var(--text-tertiary); } :where(.crm-app) .nc-dup-use { flex:0 0 auto; padding:5px 11px; border-radius:6px; border:1px solid var(--teal); background:var(--teal); color:#fff; font-family:inherit; font-size:11.5px; font-weight:700; cursor:pointer; text-decoration:none; white-space:nowrap; } :where(.crm-app) .nc-dup-use:hover { background:var(--teal-dark); border-color:var(--teal-dark); } :where(.crm-app) .nc-dup-anyway { margin-top:2px; padding:0; border:none; background:none; font-family:inherit; font-size:11.5px; font-weight:700; color:#8A6D1F; cursor:pointer; text-decoration:underline; } :where(.crm-app) .nc-dup-anyway:hover { color:#6B5A2E; } /* FIELD ROWS */ :where(.crm-app) .field-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--neutral-fill); gap:8px; } :where(.crm-app) .field-row:last-child { border-bottom:none; } :where(.crm-app) .field-row-label { font-size:10.5px; color:var(--text-tertiary); font-weight:700; letter-spacing:.5px; } :where(.crm-app) .field-value { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--navy); font-weight:600; margin-top:3px; } :where(.crm-app) .field-value.unset { color:var(--text-tertiary); font-weight:400; } :where(.crm-app) .status-row { display:flex; gap:6px; margin-top:3px; } :where(.crm-app) .status-pill { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:10px; border:1px solid var(--border-strong); color:var(--text-secondary); background:#fff; } :where(.crm-app) .status-pill.active.selected { background:var(--teal); color:#fff; border-color:var(--teal); } :where(.crm-app) .status-pill.dormant.selected { background:#F4E9CB; color:#7B5D00; border-color:#E5D5A1; } :where(.crm-app) .status-pill.archived.selected { background:var(--warm-grey); color:#fff; border-color:var(--warm-grey); } /* The status pill is a read-only label since 2026-09-14 (no clickable pills, no reveal). */ /* Phase 2b prompt 3 — inline reveal under the status pill row */ /* ABOUT */ :where(.crm-app) .tag-row { display:flex; gap:5px; flex-wrap:wrap; } :where(.crm-app) .tag { background:var(--neutral-fill); color:var(--navy); padding:3px 9px; border-radius:11px; font-size:11.5px; font-weight:600; } :where(.crm-app) .field-label { font-size:11px; color:var(--text-secondary); margin-bottom:5px; } :where(.crm-app) .field-block { margin-bottom:12px; } :where(.crm-app) .field-block:last-child { margin-bottom:0; } :where(.crm-app) .about-table { width:100%; font-size:12.5px; border-collapse:collapse; } :where(.crm-app) .about-table td { padding:4px 0; border-bottom:1px solid var(--neutral-fill); } :where(.crm-app) .about-table tr:last-child td { border-bottom:none; } :where(.crm-app) .about-table td:first-child { color:var(--text-secondary); } :where(.crm-app) .about-table td:last-child { text-align:right; font-weight:600; } /* PLACEHOLDER CARDS (main column, activated in 2c) */ :where(.crm-app) .grid-ck-heat { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; } :where(.crm-app) .placeholder { color:var(--text-tertiary); font-size:12.5px; text-align:center; padding:1.4rem 1rem; border:1px dashed var(--border-strong); border-radius:8px; margin-top:12px; } :where(.crm-app) .placeholder i { font-size:18px; display:block; margin-bottom:6px; color:var(--warm-grey); } /* MINI BUTTON (read-only display, no action wired in 2a) */ :where(.crm-app) .btn-mini { background:#fff; border:1px solid var(--border-strong); border-radius:6px; padding:5px 10px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--navy); display:inline-flex; align-items:center; gap:5px; } /* STATES */ :where(.crm-app) .state-wrap { display:flex; align-items:center; justify-content:center; min-height:60vh; padding:2rem; } :where(.crm-app) .state-box { text-align:center; max-width:420px; } :where(.crm-app) .state-box h2 { font-size:20px; margin-bottom:8px; } :where(.crm-app) .state-box p { color:var(--text-secondary); font-size:13.5px; margin-bottom:16px; } :where(.crm-app) .state-box .btn-primary { background:var(--teal); color:#fff; border:1px solid var(--teal); border-radius:8px; padding:9px 18px; font-family:inherit; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; display:inline-block; } :where(.crm-app) .state-box .btn-primary:hover { background:var(--teal-dark); } :where(.crm-app) .spinner { width:26px; height:26px; border:3px solid var(--border); border-top-color:var(--teal); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 14px; } @keyframes spin { to { transform:rotate(360deg); } } /* ══════════════════════════════════════════════════════════════════════════ CLIENT STRUCTURE WORKSPACE (full-screen person-first org chart) Route /crm/structure/:pipedriveId → renderStructureWorkspace() in crm.js. Person → Entities → Accounts as a top-down org chart. Namespaced .sw-*. ══════════════════════════════════════════════════════════════════════════ */ :where(.crm-app) .sw-wrap { padding:1.1rem 1.75rem 4rem; display:flex; flex-direction:column; min-height:100vh; } :where(.crm-app) .sw-top { display:flex; align-items:center; gap:14px; margin-bottom:6px; } :where(.crm-app) .sw-top .sw-title { font-family:'DM Serif Display',Georgia,serif; font-size:20px; color:var(--navy); } :where(.crm-app) .sw-top .sw-hint { font-size:12px; color:var(--text-tertiary); } :where(.crm-app) .sw-banner { display:flex; gap:10px; align-items:flex-start; margin:8px 0 2px; border-radius:10px; padding:11px 13px; font-size:12.5px; background:#fbf1de; border:1px solid #e6c98a; color:var(--navy); } :where(.crm-app) .sw-banner.bad { background:#fbe9e8; border-color:#f0b4b4; } :where(.crm-app) .sw-banner .bi { font-size:15px; line-height:1.1; } :where(.crm-app) .sw-scroll { overflow:auto; flex:1; padding:22px 8px 40px; } :where(.crm-app) .sw-chartwrap { display:flex; justify-content:center; min-width:min-content; } :where(.crm-app) .sw-subtree { display:flex; flex-direction:column; align-items:center; } :where(.crm-app) .sw-stem { width:2px; height:22px; background:var(--border-strong); } :where(.crm-app) .sw-kids { display:flex; justify-content:center; align-items:flex-start; } :where(.crm-app) .sw-kid { position:relative; padding-top:24px; display:flex; flex-direction:column; align-items:center; margin:0 5px; } :where(.crm-app) .sw-kid::after { content:""; position:absolute; top:0; left:0; right:0; border-top:2px solid var(--border-strong); } :where(.crm-app) .sw-kid:first-child::after { left:50%; } :where(.crm-app) .sw-kid:last-child::after { right:50%; } :where(.crm-app) .sw-kid:only-child::after { display:none; } :where(.crm-app) .sw-kid::before { content:""; position:absolute; top:0; left:calc(50% - 1px); width:2px; height:24px; background:var(--border-strong); } :where(.crm-app) .sw-node { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; box-shadow:0 1px 2px rgba(11,35,57,.06),0 3px 10px rgba(11,35,57,.05); transition:box-shadow .12s,border-color .12s; } :where(.crm-app) .sw-node:hover { box-shadow:0 8px 26px rgba(11,35,57,.12); } /* person node */ :where(.crm-app) .sw-person { width:300px; padding:14px 15px; border-top:3px solid var(--teal); } :where(.crm-app) .sw-person .sw-row1 { display:flex; gap:12px; align-items:center; } :where(.crm-app) .sw-av { width:46px; height:46px; border-radius:50%; background:var(--navy); color:#fff; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; } :where(.crm-app) .sw-av.stub { background:#c2453f; } :where(.crm-app) .sw-av.adv { background:var(--mid-grey); } :where(.crm-app) .sw-pn { font-family:'DM Serif Display',Georgia,serif; font-size:19px; font-weight:600; color:var(--navy); line-height:1.15; } :where(.crm-app) .sw-role { font-size:12px; color:var(--text-tertiary); margin-top:1px; } :where(.crm-app) .sw-ownerline { margin-top:11px; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px; align-items:center; } :where(.crm-app) .sw-owner-ok { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--navy); } :where(.crm-app) .sw-owner-ok .lk { color:#1a9e6b; font-weight:700; } /* Informational, NOT an error. It marks a missing Pipedrive link — nothing on this card is gated on that link, so it must not wear alarm colours. */ :where(.crm-app) .sw-owner-missing { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-secondary); background:var(--neutral-fill); border:1px solid var(--border); padding:4px 10px; border-radius:8px; font-weight:600; } :where(.crm-app) .sw-owner-missing .sw-owner-note { color:var(--text-tertiary); font-weight:500; } :where(.crm-app) .sw-pgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin-top:12px; } /* Contact fields take the whole card width — an email does not fit a half-cell, and its inline editor inherited that width and became unusable to type into. */ :where(.crm-app) .sw-pgrid .f.wide { grid-column:1 / -1; } :where(.crm-app) .sw-pgrid .f.wide .v { white-space:normal; word-break:break-word; } :where(.crm-app) .sw-pgrid .f { display:flex; flex-direction:column; gap:1px; min-width:0; } :where(.crm-app) .sw-pgrid .f .k { font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--text-tertiary); } :where(.crm-app) .sw-pgrid .f .v { color:var(--navy); font-weight:600; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } :where(.crm-app) .sw-pgrid .f .v a { color:var(--teal-dark); text-decoration:none; } :where(.crm-app) .sw-pgrid .f .v.muted { color:var(--text-tertiary); font-weight:500; font-style:italic; } /* entity node */ :where(.crm-app) .sw-entity { width:206px; overflow:hidden; } :where(.crm-app) .sw-entity .bar { height:5px; } :where(.crm-app) .sw-entity .in { padding:11px 13px 12px; } :where(.crm-app) .sw-entity .etop { display:flex; align-items:center; justify-content:space-between; gap:8px; } :where(.crm-app) .sw-lock { font-size:9px; color:var(--teal-dark); font-weight:700; } :where(.crm-app) .sw-ename { font-size:13.5px; font-weight:800; color:var(--navy); margin-top:8px; line-height:1.25; } :where(.crm-app) .sw-etrust { font-size:11px; color:var(--text-secondary); margin-top:2px; } :where(.crm-app) .sw-egrid { display:grid; grid-template-columns:auto 1fr; gap:5px 8px; margin-top:10px; font-size:11.5px; align-items:baseline; } :where(.crm-app) .sw-egrid .gk { color:var(--text-tertiary); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; } :where(.crm-app) .sw-egrid .gv { color:var(--navy); font-weight:600; } :where(.crm-app) .sw-egrid .gv.muted { color:var(--text-tertiary); font-weight:500; } /* account node */ /* Account chip: min-width + fit-content (was a hard 174px, which clipped the ACTIVE badge off the right edge once provider + a long account number filled the row). */ :where(.crm-app) .sw-acct { min-width:174px; width:max-content; max-width:230px; padding:9px 10px; } :where(.crm-app) .sw-acct .atop { display:flex; align-items:center; gap:7px; flex-wrap:nowrap; } :where(.crm-app) .sw-prov { font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 6px; border-radius:5px; background:var(--navy); color:#fff; } :where(.crm-app) .sw-anum { font-size:12.5px; font-weight:700; color:var(--navy); font-family:'DM Sans',monospace; white-space:nowrap; } :where(.crm-app) .sw-aval { margin-left:auto; font-size:12.5px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; } :where(.crm-app) .sw-aval.sup { color:var(--text-tertiary); font-weight:500; } :where(.crm-app) .sw-afeed { font-size:10.5px; color:var(--text-tertiary); margin-top:6px; } /* "not in total" — this account's holdings aren't summed into the portfolio value. */ :where(.crm-app) .sw-nosum { color:#b07d1a; font-weight:700; white-space:nowrap; cursor:help; } :where(.crm-app) .sw-empty { border:1.5px dashed var(--border-strong); border-radius:11px; padding:14px 18px; color:var(--text-tertiary); font-size:12.5px; text-align:center; max-width:360px; } /* Phase 3 — inline editing on nodes */ :where(.crm-app) .sw-ed { cursor:pointer; border-radius:5px; padding:0 3px; margin:0 -3px; border-bottom:1px dashed transparent; transition:background .1s; } :where(.crm-app) .sw-ed:hover { background:var(--neutral-fill); border-bottom-color:var(--border-strong); } :where(.crm-app) .sw-ed.empty { color:var(--text-tertiary); font-style:italic; } /* Inline editor: never inherit a tiny node font (the status badge is 8.5px, which made the status