/* EVO TrustGuard — page-outreach.css * * Owned by: outreach.html (admin-only Outreach machine dashboard, M8.1) * Category: admin shell page (PERMANENTLY DARK — data-theme="dark" is * pinned statically on ; no light variant, no toggle) * Cascade: tokens → base → utilities → components → portal-chrome → * shared → shared-themes → page-admin (admin shell layer) → page * Edit policy: rules unique to this page only. The shared admin-shell chrome * (.ash-*) lives in /css/page-admin.css — see /css/AGENTS.md * "Admin dark-glass shell". * * Design language: the Sean-approved dark-glass mockup, implemented from the * 3G.1 Glass tokens (--tier1-bg / --tier2-* / --tier3-* / --glass-* / * --hairline / --edge-highlight) + the platform status hues. Status-pill * palette per the M8.1 spec: scraped grey / enriched blue / verified green / * drafted+approved amber family / dead-letter red-tinted / replied red * (the graduation stage). */ /* Page-scoped hue aliases (rule-2 sanctioned page custom properties — the --sp-* precedent in page-sales-pipeline.css). Alpha washes are literal rgba() of the token hues, same pattern as the C103 status washes. */ :root { --om-amber-wash: rgba(245, 158, 11, 0.14); --om-purple-wash: rgba(139, 92, 246, 0.14); } /* ── Page header + M8.2 action placeholders ── */ .om-header { display: flex; align-items: flex-end; gap: var(--space-3-5); flex-wrap: wrap; margin-bottom: var(--space-5); } .om-header-titles { min-width: 200px; } .om-title { font-family: 'DM Serif Display', serif; font-size: var(--text-3xl); color: var(--text); margin: 0; font-weight: var(--weight-regular); } .om-sub { color: var(--text-muted); font-size: var(--text-md); margin: var(--space-1) 0 0; } .om-actions { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ── Not-provisioned empty state (production before the M7 cutover) ── */ .om-unprovisioned { min-height: 50vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); padding: var(--space-6); } .om-unprovisioned h2 { font-family: 'DM Serif Display', serif; font-size: var(--text-xl); color: var(--text); margin: 0; font-weight: var(--weight-regular); } .om-unprovisioned p { color: var(--text-muted); font-size: var(--text-base); margin: 0; } /* [hidden] must beat the explicit display:flex above (the .ash-top[hidden] footgun) — without this the banner renders alongside the live surfaces. Pre-existing M8.1 miss, boy-scout-fixed in M8.2a. */ .om-unprovisioned[hidden] { display: none; } /* ── Funnel strip — Tier-1 raised tiles; clicking applies the status filter ── */ .om-funnel { display: grid; grid-template-columns: repeat(7, 1fr) 14px repeat(2, 1fr); gap: var(--space-2-5); margin-bottom: var(--space-5); } .om-stage { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--text); background: var(--tier1-bg); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-3-5) var(--space-3-5) var(--space-3); cursor: pointer; min-height: 44px; transition: border-color 0.15s ease, transform 0.18s var(--ease-spring); } .om-stage:active { transform: scale(var(--press-scale)); } @media (hover: hover) { .om-stage:hover { border-color: var(--border-strong); } } .om-stage.is-active { border-color: var(--red); } .om-stage-n { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; } .om-stage-l { font-size: var(--text-sm); color: var(--text-muted); } .om-stage-arr { position: absolute; right: -10px; top: 50%; transform: translateY(-50%); color: var(--text-disabled); font-size: var(--text-xs); z-index: 2; pointer-events: none; } /* Replied — the graduation stage, accented red. */ .om-stage-hot { border-color: rgba(229, 52, 46, 0.45); background: linear-gradient(180deg, var(--red-wash), transparent 70%), var(--glass-surface); } /* Dead letter + suppressed — parked, dashed. */ .om-stage-park { border-style: dashed; } .om-funnel-gap { pointer-events: none; } /* ── Tabs ── */ .om-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; } .om-tabs::-webkit-scrollbar { display: none; } .om-tab { font: inherit; font-size: var(--text-md); color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-2-5) var(--space-3-5); min-height: 44px; cursor: pointer; white-space: nowrap; } .om-tab:hover:not(:disabled) { color: var(--text); } .om-tab.on { color: var(--text); border-bottom-color: var(--red); font-weight: var(--weight-medium); } .om-tab.is-disabled { opacity: 0.45; cursor: not-allowed; } .om-tab-b { background: var(--surface-elevated); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 1px var(--space-2); font-size: var(--text-xs); margin-left: var(--space-1-5); font-variant-numeric: tabular-nums; } /* ── Dead letters — grouped count header by reason (clickable filters) ── */ .om-deadgroups { display: flex; gap: var(--space-1-5); flex-wrap: wrap; margin-bottom: var(--space-3); } .om-deadgroup { font: inherit; font-size: var(--text-sm); color: var(--text-muted); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-1-5) var(--space-3); min-height: 44px; cursor: pointer; } .om-deadgroup:hover { color: var(--text); border-color: var(--border-strong); } .om-deadgroup.on { color: var(--danger); border-color: rgba(229, 52, 46, 0.4); background: var(--red-wash); } /* ── Glass table panel ── */ .om-glass { background: var(--tier3-tint); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-edge); border-radius: var(--radius-2xl); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight); overflow: hidden; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .om-glass { background: var(--tier3-tint-opaque); } } /* Filter row — chips + company search. */ .om-filterrow { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); } .om-chips { display: flex; gap: var(--space-1-5); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } .om-chips[hidden] { display: none; } .om-chip { font: inherit; font-size: var(--text-sm); color: var(--text-muted); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-1-5) var(--space-3); min-height: 44px; cursor: pointer; white-space: nowrap; } .om-chip:hover { color: var(--text); border-color: var(--border-strong); } .om-chip.on { color: var(--text); background: var(--surface-elevated); border-color: var(--border-strong); } .om-search { margin-left: auto; flex: 0 1 260px; min-width: 160px; font: inherit; font-size: var(--text-md); color: var(--text); background: var(--tier2-bg); border: 1px solid var(--hairline); box-shadow: var(--tier2-inset); border-radius: var(--radius-md); min-height: 44px; padding: 0 var(--space-3); } .om-search::placeholder { color: var(--text-disabled); } .om-search:focus { outline: none; border-color: var(--red); } .om-search[hidden] { display: none; } /* Table. */ .om-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .om-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); min-width: 760px; } .om-table th { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-disabled); text-align: left; font-weight: var(--weight-medium); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); white-space: nowrap; } .om-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); vertical-align: middle; color: var(--text); } .om-table tbody tr:last-child td { border-bottom: none; } .om-row { cursor: pointer; } .om-row:hover td { background: rgba(255, 255, 255, 0.025); } .om-co { font-weight: var(--weight-medium); } .om-muted { color: var(--text-muted); font-size: var(--text-sm); } .om-ico { color: var(--text-disabled); letter-spacing: 2px; white-space: nowrap; } /* Absent methods dim via opacity too — the 🌐 glyph is a color emoji that ignores CSS color (M8.2a: keeps present=lit / absent=dimmed honest). */ .om-ico span:not(.y) { opacity: 0.3; } .om-ico .y { color: var(--text); } .om-sig { color: var(--amber); font-size: var(--text-sm); } .om-sig .om-muted { color: var(--text-disabled); } /* Status pills — 6px rounded-rect (platform convention; status indicator, not a button). Dead-letter rows render the reason as the pill label. */ .om-pill { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; padding: 3px var(--space-2-5); border-radius: 6px; border: 1px solid; white-space: nowrap; } .om-pill.p-grey { color: var(--status-inactive); border-color: rgba(163, 163, 163, 0.4); background: var(--status-inactive-wash); } .om-pill.p-blue { color: var(--status-pending); border-color: rgba(96, 165, 250, 0.4); background: var(--status-pending-wash); } .om-pill.p-green { color: var(--status-active); border-color: rgba(34, 197, 94, 0.4); background: var(--status-active-wash); } .om-pill.p-amber { color: var(--amber); border-color: rgba(245, 158, 11, 0.4); background: var(--om-amber-wash); } .om-pill.p-purple { color: var(--purple); border-color: rgba(139, 92, 246, 0.4); background: var(--om-purple-wash); } .om-pill.p-red, .om-pill.p-dead { color: var(--danger); border-color: rgba(229, 52, 46, 0.4); background: var(--red-wash); } /* Empty + footer. */ .om-empty { padding: var(--space-10) var(--space-4); text-align: center; color: var(--text-muted); } .om-foot { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); color: var(--text-disabled); font-size: var(--text-sm); } .om-foot-pager { margin-left: auto; display: flex; gap: var(--space-2); } .om-pager-btn { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } /* ── Lead detail drawer (Tier-3 glass; full-screen on mobile) ── */ .om-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 200; } .om-scrim.is-open { opacity: 1; pointer-events: auto; } .om-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--tier3-tint); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-left: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--edge-highlight); z-index: 210; transform: translateX(100%); transition: transform 0.28s ease; overflow-y: auto; overscroll-behavior: contain; } .om-drawer.is-open { transform: translateX(0); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .om-drawer { background: var(--tier3-tint-opaque); } } .om-d-head { position: sticky; top: 0; display: flex; align-items: flex-start; gap: var(--space-3); background: var(--tier3-tint-opaque); border-bottom: 1px solid var(--glass-edge); padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-4); z-index: 2; } .om-d-co { font-size: var(--text-xl); font-weight: 700; line-height: 1.2; color: var(--text); word-break: break-word; } .om-d-sub { color: var(--text-muted); font-size: var(--text-md); margin-top: var(--space-0-5); } .om-d-pill { margin-left: auto; flex: none; align-self: center; } .om-d-x { flex: none; background: none; border: none; color: var(--text-muted); font-size: var(--text-2xl); cursor: pointer; line-height: 1; min-width: 44px; min-height: 44px; } .om-d-x:hover { color: var(--text); } .om-d-body { padding: var(--space-4-5) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom)); } .om-sect { margin-bottom: var(--space-5-5); } .om-sect h4 { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin: 0 0 var(--space-2-5); } .om-info { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; } .om-ir { display: flex; padding: var(--space-2-5) var(--space-3-5); border-bottom: 1px solid var(--hairline); font-size: var(--text-base); gap: var(--space-3); } .om-ir:last-child { border-bottom: none; } .om-ir-k { color: var(--text-muted); width: 96px; flex: none; font-size: var(--text-md); } .om-ir-v { color: var(--text); word-break: break-word; min-width: 0; } .om-ir-v a { color: var(--status-pending); text-decoration: none; } .om-ir-v a:hover { text-decoration: underline; } /* Dead-letter callout. */ .om-deadbox { border: 1px solid rgba(229, 52, 46, 0.4); background: var(--red-wash); border-radius: var(--radius-md); padding: var(--space-3-5); margin-bottom: var(--space-4-5); } .om-deadbox-lab { font-size: var(--text-xs); color: var(--danger); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-1-5); } .om-deadbox-reason { font-size: var(--text-lg); color: var(--text); text-transform: capitalize; } .om-deadbox-note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-2); } /* Signals — one card per entry. */ .om-signal-card { margin-bottom: var(--space-2-5); } .om-signal-type { font-size: var(--text-xs); color: var(--amber); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: var(--space-1-5); } .om-drawer-none { color: var(--text-muted); font-size: var(--text-md); } /* Draft (drafted+ rows). */ .om-draft-subj { font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--space-2); } .om-draft-body { background: var(--tier2-bg); border: 1px solid var(--hairline); box-shadow: var(--tier2-inset); border-radius: var(--radius-md); padding: var(--space-3); color: var(--text); font-size: var(--text-md); white-space: pre-wrap; word-break: break-word; } /* Raw verification_result — collapsed monospace block. */ .om-verif summary { cursor: pointer; color: var(--text-muted); font-size: var(--text-md); font-family: ui-monospace, 'SF Mono', Menlo, monospace; } .om-verif summary:hover { color: var(--text); } .om-verif pre { margin: var(--space-2) 0 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--text-sm); background: var(--tier2-bg); border: 1px solid var(--hairline); box-shadow: var(--tier2-inset); border-radius: var(--radius-md); padding: var(--space-3); color: var(--text); overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* ════════════════════════════════════════════════════════════════════════ M8.2a — the outreach → sales-pipeline bridge: bulk-select checkboxes + selection bar, license-age chips, call-list preset accent, "In pipeline" linkage chips. Same dark-glass token palette as the M8.1 rules above. ════════════════════════════════════════════════════════════════════════ */ /* Selection column — narrow, click-isolated (row clicks open the drawer; .om-selcol clicks never do). */ .om-table th.om-selcol, .om-table td.om-selcol { width: 36px; padding-right: var(--space-1); } .om-cb { width: 18px; height: 18px; accent-color: var(--red); cursor: pointer; } .om-cb:disabled { opacity: 0.3; cursor: not-allowed; } /* Selection bar — appears between the tabs and the glass table while ≥1 row is checked. Tier-1 raised strip, red-accent edge (an armed bulk action). */ .om-selbar { display: flex; align-items: center; gap: var(--space-3); background: var(--tier1-bg); border: 1px solid rgba(229, 52, 46, 0.4); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: var(--space-2-5) var(--space-4); margin-bottom: var(--space-3); } .om-selbar[hidden] { display: none; } .om-selbar-count { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text); margin-right: auto; font-variant-numeric: tabular-nums; } /* "In pipeline" linkage chip — rows + drawer for promoted leads. Deep-links to the Sales Pipeline. */ .om-inpipe { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; color: var(--status-active); border: 1px solid rgba(34, 197, 94, 0.4); background: var(--status-active-wash); border-radius: 6px; padding: 3px var(--space-2); text-decoration: none; white-space: nowrap; } .om-inpipe:hover { border-color: var(--status-active); } /* Drawer bridge-action row (Add to Sales Pipeline / In pipeline →). */ .om-d-pipe { margin-bottom: var(--space-4-5); } .om-d-pipe .om-inpipe { font-size: var(--text-md); padding: var(--space-2) var(--space-3); } /* License-age chips — subtle color steps, youngest = green (the "start right" segment) aging through blue/grey; not buttons, 6px rounded-rect like the status pills. */ .om-age { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.03em; border: 1px solid; border-radius: 6px; padding: 1px var(--space-1-5); margin-left: var(--space-1-5); white-space: nowrap; vertical-align: 1px; } .om-age.a-b0_6 { color: var(--status-active); border-color: rgba(34, 197, 94, 0.4); background: var(--status-active-wash); } .om-age.a-b6_24 { color: var(--status-pending); border-color: rgba(96, 165, 250, 0.4); background: var(--status-pending-wash); } .om-age.a-b24_60 { color: var(--text-muted); border-color: rgba(163, 163, 163, 0.35); background: var(--status-inactive-wash); } .om-age.a-b60p { color: var(--text-disabled); border-color: rgba(163, 163, 163, 0.25); background: transparent; } /* Call-list preset chip — red-accent variant of .om-chip so the preset reads as a mode, not another stage filter. */ .om-chip-preset { font-weight: var(--weight-semibold); } .om-chip-preset.on { color: var(--ash-red-lit, var(--danger)); border-color: rgba(229, 52, 46, 0.45); background: var(--red-wash); } /* ── Responsive (admin shell is desktop-first; must not break at 375px) ── */ @media (max-width: 899px) { .om-funnel { grid-template-columns: repeat(3, 1fr); } .om-funnel-gap, .om-stage-arr { display: none; } .om-actions { margin-left: 0; } } @media (max-width: 560px) { .om-funnel { grid-template-columns: repeat(2, 1fr); } .om-search { flex: 1 1 100%; margin-left: 0; } .om-drawer { width: 100%; border-left: none; } .om-selbar { flex-wrap: wrap; } .om-selbar-count { flex: 1 1 100%; margin-right: 0; } }