/* ============================================================
XSELLEREIGHT · Org Chart
Attio-inspired · light · airy · pill nav · refined sans
============================================================ */
:root {
/* Surfaces */
--bg: #f5f4f2;
--sidebar-bg: #f1f0ed;
--surface: #ffffff;
--surface-2: #f7f6f4;
--surface-3: #ecebe7;
/* Borders */
--border: #e7e5e0;
--border-strong: #d8d5cd;
--hairline: rgba(20,18,14,0.06);
/* Text */
--text: #14130f;
--text-soft: #3d3a34;
--text-muted: #807c73;
--text-faint: #b3afa5;
/* Accent */
--accent: #14130f;
--accent-blue: #2563eb;
--accent-blue-soft: #e0eaff;
/* Department palette - soft tinted backgrounds for avatars + dots */
--dept-executive: #e9d8ff; --dept-executive-fg: #5b2bb1;
--dept-operations: #ffe4cc; --dept-operations-fg: #8b4a14;
--dept-finance: #d3f2dd; --dept-finance-fg: #1a6b3c;
--dept-legal: #d8e3ff; --dept-legal-fg: #1f3da6;
--dept-creative: #ffd4e0; --dept-creative-fg: #a02050;
--dept-growth: #fde9b3; --dept-growth-fg: #82591a;
--dept-engineering: #cdebe9; --dept-engineering-fg: #0e5e57;
--ok: #15a06b;
--warn: #d99a3a;
--danger: #c92a2a;
/* Geometry */
--radius-xs: 6px;
--radius-sm: 8px;
--radius: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow-card: 0 0 0 1px rgba(20,18,14,0.04), 0 1px 2px rgba(20,18,14,0.04);
--shadow-active: 0 0 0 1px rgba(20,18,14,0.06), 0 1px 2px rgba(20,18,14,0.06);
--shadow-pop: 0 0 0 1px rgba(20,18,14,0.05), 0 12px 32px -10px rgba(20,18,14,0.16);
/* Type */
--font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Layout */
--sidebar-w: 244px;
--content-pad: 24px;
--connector: #d8d5cd;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.5;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
input { font: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
svg { width: 1em; height: 1em; display: block; flex-shrink: 0; }
/* ============================================================
APP SHELL
============================================================ */
.app {
display: grid;
grid-template-columns: var(--sidebar-w) 1fr;
min-height: 100vh;
background: var(--bg);
transition: grid-template-columns 180ms ease;
}
/* ============================================================
SIDEBAR
============================================================ */
.sidebar {
background: var(--sidebar-bg);
padding: 10px 8px;
display: flex;
flex-direction: column;
gap: 8px;
position: sticky;
top: 0;
height: 100vh;
overflow: hidden; /* the inner .nav scrolls; sidebar itself never shows a bar */
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-thumb { width: 0; height: 0; display: none; background: transparent; }
.workspace { display: flex; align-items: center; gap: 4px; padding: 4px; position: relative; }
.workspace-trigger {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px 6px 6px;
border-radius: var(--radius-sm);
flex: 1; min-width: 0;
transition: background 100ms ease;
}
.workspace-trigger:hover { background: var(--surface-3); }
.workspace-mark {
width: 22px; height: 22px;
border-radius: 6px;
background: var(--text); color: var(--bg);
display: grid; place-items: center;
font-size: 14px; flex-shrink: 0;
}
.workspace-name {
font-size: 13.5px; font-weight: 600; color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1; min-width: 0; text-align: left;
}
.workspace-chev { font-size: 14px; color: var(--text-muted); margin-left: auto; flex-shrink: 0; transition: transform 140ms ease; }
.workspace-trigger[aria-expanded="true"] .workspace-chev { transform: rotate(180deg); }
/* Full brand wordmark in the switcher (same lockup as the contracts) */
.workspace-logo { height: 18px; width: auto; max-width: 150px; display: block; flex-shrink: 0; }
/* Workspace switcher dropdown menu */
.workspace-menu {
position: absolute;
top: calc(100% + 4px);
left: 4px;
right: 4px;
z-index: 60;
padding: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-pop);
display: flex;
flex-direction: column;
gap: 1px;
}
.workspace-menu[hidden] { display: none; }
.workspace-menu-item {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 8px;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
width: 100%;
transition: background 100ms ease;
}
.workspace-menu-item:hover { background: var(--surface-2); }
.wm-mark {
width: 24px; height: 24px;
border-radius: 6px;
background: var(--text);
display: grid; place-items: center;
flex-shrink: 0;
}
.wm-mark img { width: 13px; height: 13px; display: block; }
.wm-mark-3d {
background: transparent;
border-radius: 0;
overflow: visible;
}
.wm-mark-3d img {
width: 24px;
height: 24px;
object-fit: contain;
filter: drop-shadow(0 1px 1px rgba(20,18,14,0.18));
}
.wm-mark-academy-3d img {
filter: drop-shadow(0 1px 1px rgba(111,73,13,0.2));
}
.wm-mark-academy { background: var(--dept-creative-fg); }
.wm-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wm-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-sub { font-size: 10.5px; color: var(--text-muted); }
.wm-check { width: 16px; height: 16px; color: var(--accent-blue); flex-shrink: 0; }
.workspace-menu-item:not(.is-current) .wm-check { display: none; }
.workspace-menu-sep { height: 1px; background: var(--border); margin: 5px 2px; }
.wm-action { gap: 10px; }
.wm-ico {
width: 24px; height: 24px;
display: grid; place-items: center;
color: var(--text-muted);
flex-shrink: 0;
}
.wm-ico svg { width: 16px; height: 16px; }
.wm-action .wm-name { font-weight: 500; color: var(--text-soft); }
.wm-action:hover .wm-name { color: var(--text); }
.wm-action:hover .wm-ico { color: var(--text); }
.icon-btn {
width: 28px; height: 28px;
border-radius: var(--radius-xs);
display: grid; place-items: center;
color: var(--text-muted);
transition: background 100ms ease, color 100ms ease;
flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn svg { font-size: 15px; }
.qa-row { display: flex; gap: 4px; padding: 0 4px 4px; }
.qa {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px;
border-radius: var(--radius-sm);
background: var(--surface-3);
color: var(--text-muted);
font-size: 12.5px; font-weight: 500;
flex: 1; min-width: 0;
transition: background 100ms ease, color 100ms ease;
}
.qa:hover { background: #e3e1da; color: var(--text-soft); }
.qa-icon { font-size: 13px; color: var(--text-soft); }
.qa > span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa kbd {
font-family: var(--font-mono);
font-size: 10.5px;
background: var(--surface);
padding: 1px 5px; border-radius: 4px;
color: var(--text-muted);
border: 1px solid var(--border); font-weight: 500;
}
.qa-narrow { flex: 0 0 auto; padding: 6px 8px; }
.qa-narrow svg { font-size: 13px; }
.qa-full { width: 100%; }
.qa-full > span { color: var(--text-muted); }
/* ---------- Global search palette (Cmd+K) ---------- */
.cmdk-overlay {
position: fixed; inset: 0;
background: rgba(20, 18, 14, 0.36);
z-index: 9000;
display: grid;
place-items: start center;
padding-top: 12vh;
animation: fadeIn 100ms ease;
}
.cmdk-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
width: min(640px, 92vw);
max-height: 70vh;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 24px 60px -12px rgba(15, 18, 32, 0.35);
display: flex; flex-direction: column;
overflow: hidden;
animation: cmdkPop 140ms ease;
}
@keyframes cmdkPop { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cmdk-input-row {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.cmdk-input-row svg { color: var(--text-muted); flex: 0 0 auto; }
.cmdk-input-row input {
border: 0; outline: 0; background: transparent;
flex: 1; font-size: 15px; color: var(--text);
font-family: var(--font-sans);
}
.cmdk-input-row input::placeholder { color: var(--text-faint); }
.cmdk-esc {
font-family: var(--font-mono);
font-size: 10.5px;
background: var(--surface-2);
padding: 2px 7px; border-radius: 4px;
color: var(--text-muted);
border: 1px solid var(--border);
}
.cmdk-results {
flex: 1;
overflow: auto;
padding: 6px 0;
}
.cmdk-group { padding: 4px 0 8px; }
.cmdk-group-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
padding: 8px 16px 4px;
}
.cmdk-item {
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
align-items: center;
width: 100%;
padding: 9px 16px;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: var(--text);
}
.cmdk-item:hover { background: var(--surface-2); }
.cmdk-item.is-active { background: var(--surface-2); }
.cmdk-item-icon {
width: 24px; height: 24px;
display: grid; place-items: center;
color: var(--text-muted);
}
.cmdk-item-text { display: flex; flex-direction: column; min-width: 0; }
.cmdk-item-title {
font-size: 13px; font-weight: 500; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-item-sub {
font-size: 11.5px; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.cmdk-empty {
padding: 28px 16px;
text-align: center;
color: var(--text-muted);
font-size: 13px;
}
.cmdk-foot {
display: flex; gap: 16px;
padding: 9px 14px;
border-top: 1px solid var(--border);
background: var(--surface-2);
font-size: 11px;
color: var(--text-muted);
}
.cmdk-foot kbd {
font-family: var(--font-mono);
font-size: 10px;
background: var(--surface);
padding: 1px 5px;
border-radius: 3px;
border: 1px solid var(--border);
margin-right: 3px;
}
/* ---------- Nav ---------- */
.nav {
display: flex; flex-direction: column; gap: 4px;
flex: 1; padding: 4px 0;
min-height: 0; /* let flex shrink so internal scroll is what actually scrolls */
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.nav::-webkit-scrollbar,
.nav::-webkit-scrollbar-track,
.nav::-webkit-scrollbar-thumb { width: 0; height: 0; display: none; background: transparent; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
display: flex; align-items: center; gap: 9px;
padding: 5px 8px; margin: 0 4px;
border-radius: var(--radius-sm);
color: var(--text-soft);
font-size: 13px; font-weight: 500;
letter-spacing: -0.005em;
position: relative;
transition: background 90ms ease, color 90ms ease;
}
.nav-item svg { font-size: 15px; color: var(--text-muted); transition: color 90ms ease; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item:hover svg { color: var(--text-soft); }
.nav-item.active {
background: var(--surface);
color: var(--text);
font-weight: 600;
box-shadow: var(--shadow-active);
}
.nav-item.active svg { color: var(--text); }
.nav-item > span:first-of-type:not(.nav-badge):not(.nav-meta) { flex: 1; min-width: 0; }
.nav-item.child { padding-left: 26px; }
.nav-badge {
font-size: 10.5px; font-weight: 600;
font-family: var(--font-mono);
background: var(--accent-blue-soft); color: var(--accent-blue);
padding: 1px 6px; border-radius: var(--radius-pill);
}
.nav-meta {
font-size: 11px; color: var(--text-faint);
font-weight: 400; font-family: var(--font-mono);
}
.nav-section {
display: flex; align-items: center; gap: 6px;
padding: 5px 8px; margin: 6px 4px 0;
font-size: 11.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-muted);
border-radius: var(--radius-xs);
text-align: left;
width: calc(100% - 8px);
transition: color 90ms ease, background 90ms ease;
}
.nav-section:hover { color: var(--text-soft); background: var(--surface-3); }
.nav-section .chev {
font-size: 11px; color: var(--text-faint);
transition: transform 150ms ease;
}
.nav-section.open .chev { transform: rotate(90deg); }
.nav-section .folder { font-size: 14px; color: var(--text-muted); }
.nav-section.sub {
text-transform: none;
font-size: 13px; font-weight: 500;
letter-spacing: -0.005em;
color: var(--text-soft);
padding: 5px 8px; margin: 0 4px;
border-radius: var(--radius-sm);
}
.nav-section.sub:hover { background: var(--surface-3); color: var(--text); }
.nav-children {
display: flex; flex-direction: column; gap: 1px;
overflow: hidden; max-height: 800px;
transition: max-height 220ms ease;
}
.nav-children.collapsed { max-height: 0; }
.nav-children.sub { padding-left: 16px; }
.nav-children.sub .nav-item.child { padding-left: 28px; }
.sidebar-bottom { padding: 6px 4px 2px; }
.user-card {
display: flex; align-items: center; gap: 9px;
padding: 6px 8px;
border-radius: var(--radius-sm);
width: 100%;
transition: background 100ms ease;
}
.user-card:hover { background: var(--surface-3); }
.user-avatar {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--dept-executive); color: var(--dept-executive-fg);
display: grid; place-items: center;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.02em; flex-shrink: 0;
}
.user-meta { flex: 1; min-width: 0; line-height: 1.2; text-align: left; }
.user-name {
font-size: 12.5px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.user-chev { font-size: 12px; color: var(--text-faint); }
@media (min-width: 861px) {
body.sidebar-collapsed .app {
grid-template-columns: 58px 1fr;
}
body.sidebar-collapsed .sidebar {
padding-inline: 6px;
align-items: stretch;
}
body.sidebar-collapsed .workspace {
justify-content: center;
padding-inline: 0;
}
body.sidebar-collapsed .workspace-trigger,
body.sidebar-collapsed .qa-row,
body.sidebar-collapsed .sidebar-bottom,
body.sidebar-collapsed .nav-section {
display: none;
}
body.sidebar-collapsed .nav {
align-items: center;
gap: 6px;
padding-top: 8px;
}
body.sidebar-collapsed .nav-group {
width: 100%;
gap: 3px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
body.sidebar-collapsed .nav-group:last-child {
border-bottom: 0;
padding-bottom: 0;
}
body.sidebar-collapsed .nav-children {
max-height: none;
overflow: visible;
}
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-item.child {
width: 36px;
height: 34px;
margin-inline: auto;
padding: 0;
justify-content: center;
gap: 0;
}
body.sidebar-collapsed .nav-item svg {
font-size: 16px;
}
body.sidebar-collapsed .nav-item > span,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .nav-meta {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
}
/* ============================================================
MAIN
============================================================ */
/* The frame around the main .surface card uses the sidebar's soft gray (not
white) so the white card reads as a clean panel floating on a matching
backdrop - gray on every side (sidebar on the left, this frame on the rest). */
.main { padding: 10px 10px 10px 0; min-width: 0; background: var(--sidebar-bg); }
.surface {
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
min-height: calc(100vh - 20px);
display: flex; flex-direction: column;
overflow: hidden;
}
/* ---------- Page header ---------- */
.page-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.page-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-icon {
width: 22px; height: 22px;
display: grid; place-items: center;
color: var(--text-muted);
font-size: 16px;
}
/* On Delivery the page title/sub/icon all give way to the filter chips. */
.view[data-view="pipeline-board"]:has(.pipeline-board-body.is-fixed-height) .page-icon {
display: none;
}
.page-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.page-header-right { display: flex; gap: 8px; align-items: center; position: relative; }
/* ---------- Offers & ICP tabs (compact, on the right of the header) ---------- */
/* Two short text tabs. The active tab is darker with a thin underline; no hover
treatment - the underline is the only selection cue. */
.oic-tabs {
display: flex;
align-items: center;
gap: 2px;
}
.oic-tab {
position: relative;
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px 9px;
border-radius: 8px;
color: var(--text-muted);
}
.oic-tab-name { font-size: 13px; font-weight: 600; line-height: 1; }
.oic-tab-count {
font-size: 10.5px;
font-weight: 700;
line-height: 1;
color: var(--text-faint);
font-variant-numeric: tabular-nums;
}
.oic-tab.is-active { color: var(--text); }
.oic-tab.is-active .oic-tab-count { color: var(--text-muted); }
.oic-tab.is-active::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--text);
}
.oic-tab:focus-visible {
outline: 2px solid var(--text);
outline-offset: 2px;
}
.page-header-divider {
flex-shrink: 0;
width: 1px;
height: 20px;
margin: 0 4px;
background: var(--border);
}
.offers-icp-pane[hidden] { display: none; }
.page-header-search { min-width: 280px; }
/* ---------- Help popover (anchored to ? button in page headers) ---------- */
.help-anchor[aria-expanded="true"] {
background: var(--surface-2);
color: var(--text);
}
.help-pop {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: min(380px, calc(100vw - 32px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(15, 18, 32, 0.14), 0 4px 12px rgba(15, 18, 32, 0.06);
z-index: 80;
overflow: hidden;
animation: helpPopIn 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.help-pop[hidden] { display: none; }
@keyframes helpPopIn {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.help-pop-arrow {
position: absolute;
top: -6px;
right: 18px;
width: 12px;
height: 12px;
background: var(--surface);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
transform: rotate(45deg);
}
.help-pop-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 14px 14px 10px 18px;
border-bottom: 1px solid var(--border);
position: relative;
z-index: 1;
background: var(--surface);
}
.help-pop-head h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.help-pop-close {
width: 28px;
height: 28px;
}
.help-pop-body {
padding: 14px 18px 18px;
max-height: calc(100vh - 180px);
overflow: auto;
font-size: 13px;
line-height: 1.55;
color: var(--text-soft);
}
.help-pop-body > p:first-child {
margin: 0 0 14px;
color: var(--text);
}
.help-pop-section {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--hairline, var(--border));
}
.help-pop-section:first-of-type {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.help-pop-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.help-pop-body ul {
margin: 0;
padding-left: 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.help-pop-body ul li { color: var(--text); }
.help-pop-body ul li strong { color: var(--text); font-weight: 600; }
.help-pop-body p { margin: 8px 0 0; }
.help-pop-note {
margin-top: 10px !important;
padding: 10px 12px;
background: var(--surface-2);
border-radius: 8px;
font-size: 12.5px;
color: var(--text-soft);
}
/* ---------- Filter bar ---------- */
.filterbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.deals-filter-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
padding: 5px 10px;
border-radius: var(--radius-pill);
color: var(--text-muted);
transition: background 100ms ease, color 100ms ease;
}
.chip:hover { background: var(--surface-2); color: var(--text-soft); }
.chip.active { background: var(--text); color: var(--surface); }
.chip.active .chip-count { color: rgba(255,255,255,0.55); }
.chip-count {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-faint);
font-weight: 500;
}
.chip .dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--text-faint);
}
.dot-executive { background: var(--dept-executive-fg); }
.dot-operations { background: var(--dept-operations-fg); }
.dot-finance { background: var(--dept-finance-fg); }
.dot-legal { background: var(--dept-legal-fg); }
.dot-creative { background: var(--dept-creative-fg); }
.dot-growth { background: var(--dept-growth-fg); }
.dot-engineering { background: var(--dept-engineering-fg); }
.dot-client { background: var(--ok); }
.dot-external { background: transparent; border: 1px dashed var(--text-muted); width: 7px; height: 7px; }
.chip-divider {
width: 1px;
height: 14px;
background: var(--border-strong);
margin: 0 4px;
align-self: center;
}
.filter-views { display: flex; gap: 2px; }
.view-btn {
width: 30px; height: 28px;
border-radius: var(--radius-xs);
display: grid; place-items: center;
color: var(--text-muted);
transition: background 100ms ease, color 100ms ease;
}
.view-btn:hover { background: var(--surface-2); color: var(--text-soft); }
.view-btn.active { background: var(--surface-3); color: var(--text); }
.view-btn svg { font-size: 14px; }
/* ============================================================
VIEW CONTAINER (swaps between Org Chart, Journey, etc.)
============================================================ */
.view {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
min-width: 0;
}
.view[hidden] { display: none; }
/* ============================================================
ORG CHART BODY
============================================================ */
.body.org-body {
flex: 1;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 0;
}
/* ---------- Org Chart: list view (mirrors the clean Tasks list) ---------- */
/* Groups reuse .tasks-group / .tasks-group-head / .tasks-list for an identical
look + collapse behavior; only the row internals are org-specific. */
#orgList { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.org-list { padding: 4px 0 48px; }
.org-list-row {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto auto;
align-items: center;
gap: 14px;
padding: 10px 22px;
min-height: 56px;
border-bottom: 1px solid var(--hairline);
cursor: pointer;
transition: background 80ms ease;
}
.org-list-row:last-child { border-bottom: 0; }
.org-list-row:hover { background: var(--surface-2); }
.org-list-row:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; border-radius: 8px; }
.org-list-avatar {
width: 34px; height: 34px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 12px; font-weight: 650; letter-spacing: 0.02em;
}
.org-list-main { min-width: 0; }
.org-list-name {
display: flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 550; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-list-role {
font-size: 11.5px; color: var(--text-muted); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-added-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-blue); flex: none; }
.org-list-access { justify-self: end; }
.org-access-pill {
font-size: 10.5px; font-weight: 500;
padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.org-access-pill.is-client { background: #e8f1fe; color: #2563c9; }
.org-access-pill.is-internal { background: var(--surface-3); color: var(--text-soft); }
.org-list-tools { justify-self: end; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 640px) {
.org-list-access { display: none; }
.org-list-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px; }
}
/* Inline checkbox row in the Add-person modal */
/* Client-facing checkbox row in the Add-person modal. Dedicated class (not based
on .send-field) so the later .send-field { flex-direction: column } can't flip it. */
.addperson-check {
display: flex; align-items: center; gap: 10px;
margin-top: 16px;
font-size: 12.5px; color: var(--text-soft);
cursor: pointer; user-select: none;
}
.addperson-check input {
width: 16px; height: 16px; flex: none;
accent-color: var(--accent-blue); cursor: pointer; margin: 0;
}
.org-chart {
position: relative;
overflow: hidden;
flex: 1 1 auto;
min-height: 0;
cursor: grab;
background:
radial-gradient(circle, rgba(20,18,14,0.05) 1px, transparent 1.2px) 0 0 / 22px 22px,
var(--surface);
user-select: none;
}
.org-chart.panning { cursor: grabbing; }
.chart-canvas {
position: absolute;
top: 0; left: 0;
transform-origin: 0 0;
padding: 36px 28px 48px;
will-change: transform;
min-width: 1240px;
}
/* ============================================================
ZOOM CONTROLS
============================================================ */
.zoom-controls {
position: absolute;
bottom: 16px;
right: 16px;
display: flex;
align-items: center;
gap: 2px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 4px;
box-shadow: 0 6px 16px -6px rgba(20,18,14,0.16), 0 0 0 1px rgba(20,18,14,0.02);
z-index: 4;
transition: right 240ms cubic-bezier(.2,.8,.2,1);
}
.body.org-body:has(.detail-rail:not([hidden])) .zoom-controls {
right: 376px;
}
.zoom-btn {
width: 28px; height: 28px;
border-radius: 50%;
display: grid; place-items: center;
color: var(--text-soft);
transition: background 100ms ease, color 100ms ease;
}
.zoom-btn:hover { background: var(--surface-2); color: var(--text); }
.zoom-btn:active { transform: scale(0.94); }
.zoom-level {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-soft);
padding: 0 8px;
min-width: 50px;
text-align: center;
height: 28px;
border-radius: var(--radius-pill);
display: grid; place-items: center;
letter-spacing: 0;
transition: background 100ms ease, color 100ms ease;
}
.zoom-level:hover { background: var(--surface-2); color: var(--text); }
.zoom-sep {
width: 1px; height: 16px;
background: var(--border);
margin: 0 4px;
}
.zoom-fit {
height: 28px;
padding: 0 10px 0 9px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
gap: 6px;
color: var(--text-soft);
font-size: 12px;
font-weight: 500;
transition: background 100ms ease, color 100ms ease;
}
.zoom-fit:hover { background: var(--surface-2); color: var(--text); }
.zoom-fit svg { color: var(--text-muted); }
.zoom-fit kbd {
font-family: var(--font-mono);
font-size: 9.5px;
background: var(--surface-2);
padding: 1px 5px;
border-radius: 3px;
color: var(--text-muted);
border: 1px solid var(--border);
font-weight: 500;
}
/* ============================================================
ORG CHART - TREE
============================================================ */
.org-tree {
display: flex;
flex-direction: column;
align-items: center;
min-width: fit-content;
margin: 0 auto;
}
/* ---- Root (President, with optional EA on the right) ---- */
.org-root {
position: relative;
padding-bottom: 24px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: 28px;
}
.org-root-main {
grid-column: 2;
position: relative;
}
/* Vertical trunk from the president down to the departments row */
.org-root-main::after {
content: "";
position: absolute;
left: 50%;
bottom: -24px;
transform: translateX(-50%);
width: 1px;
height: 24px;
background: var(--connector);
}
/* Executive assistant - small card to the right of the president */
.org-root-assistant {
grid-column: 3;
justify-self: start;
position: relative;
}
/* Short horizontal connector linking the EA back to the president */
.org-root-assistant::before {
content: "";
position: absolute;
top: 50%;
left: -28px;
width: 28px;
height: 1px;
background: var(--connector);
}
/* ---- Departments row ---- */
.org-depts {
display: grid;
grid-template-columns: repeat(5, minmax(210px, 1fr));
gap: 18px;
position: relative;
padding-top: 28px;
width: 100%;
max-width: 1200px;
}
/* Horizontal trunk that joins all dept columns */
.org-depts::before {
content: "";
position: absolute;
top: 0;
left: calc((100% / 5) / 2);
right: calc((100% / 5) / 2);
height: 1px;
background: var(--connector);
}
.org-dept {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
position: relative;
}
/* Vertical drop from trunk to dept lead */
.org-dept::before {
content: "";
position: absolute;
top: -28px;
left: 50%;
width: 1px;
height: 28px;
background: var(--connector);
}
/* Reports inside a dept */
.org-reports {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 6px;
padding-left: 14px;
position: relative;
}
/* Vertical guide line for reports */
.org-reports::before {
content: "";
position: absolute;
top: 0; bottom: 16px;
left: 4px;
width: 1px;
background: var(--connector);
border-radius: 1px;
}
/* Horizontal tick on each report */
.org-reports .org-card::before {
content: "";
position: absolute;
top: 50%;
left: -10px;
width: 10px;
height: 1px;
background: var(--connector);
}
/* ============================================================
ORG CARD
============================================================ */
.org-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
z-index: 1;
}
.org-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-card);
transform: translateY(-1px);
}
.org-card.selected {
border-color: var(--text);
box-shadow: 0 0 0 2px rgba(20,18,14,0.08);
}
/* President - dark */
.org-card.president {
background: var(--text);
color: var(--surface);
border-color: var(--text);
box-shadow: var(--shadow-pop);
min-width: 280px;
padding: 12px 14px;
}
.org-card.president .org-name { font-size: 14px; }
.org-card.president .org-role { color: rgba(255,255,255,0.6); }
.org-card.president .org-tag { background: rgba(255,255,255,0.15); color: var(--surface); }
.org-card.president .org-avatar { background: rgba(255,255,255,0.1); color: var(--surface); border: none; }
/* Lead card - slightly heavier */
.org-card.lead { padding: 11px 12px; }
.org-card.lead .org-name { font-weight: 700; }
/* Empty placeholder card - shown when a department has no lead yet */
.org-card-empty {
border: 1.5px dashed var(--border);
background: transparent;
box-shadow: none;
cursor: default;
}
.org-card-empty:hover { border-color: var(--text-soft); background: var(--surface-2); }
.org-card-empty .placeholder-text { color: var(--text-soft); font-weight: 500; }
.org-avatar.placeholder { background: transparent; color: var(--text-soft); border: 1.5px dashed var(--border); }
.org-avatar {
width: 30px; height: 30px;
border-radius: 8px;
display: grid; place-items: center;
font-size: 11px; font-weight: 700;
letter-spacing: 0.02em;
background: var(--surface-2);
color: var(--text-soft);
flex-shrink: 0;
}
/* Department-tinted avatars */
.org-avatar.executive { background: var(--dept-executive); color: var(--dept-executive-fg); }
.org-avatar.operations { background: var(--dept-operations); color: var(--dept-operations-fg); }
.org-avatar.finance { background: var(--dept-finance); color: var(--dept-finance-fg); }
.org-avatar.legal { background: var(--dept-legal); color: var(--dept-legal-fg); }
.org-avatar.creative { background: var(--dept-creative); color: var(--dept-creative-fg); }
.org-avatar.growth { background: var(--dept-growth); color: var(--dept-growth-fg); }
.org-avatar.engineering { background: var(--dept-engineering); color: var(--dept-engineering-fg); }
.org-info { flex: 1; min-width: 0; line-height: 1.25; }
.org-name {
font-size: 13px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-role {
font-size: 11.5px; color: var(--text-muted);
margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-tag {
font-size: 9.5px; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase;
background: var(--surface-2); color: var(--text-soft);
padding: 2px 6px;
border-radius: var(--radius-pill);
flex-shrink: 0;
}
/* External cards: subtle dashed border */
.org-card.external {
border-style: dashed;
border-color: var(--border-strong);
background: var(--surface);
}
.org-card.external:hover { border-color: var(--text-muted); }
.org-card.external.president { border-style: solid; }
/* Corner badges */
.org-badges {
position: absolute;
top: 6px;
right: 8px;
display: flex;
gap: 4px;
}
.badge-mini {
width: 16px; height: 16px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 9px;
flex-shrink: 0;
}
.badge-mini svg { width: 10px; height: 10px; }
.badge-mini.badge-client {
background: #d3f2dd;
color: #1a6b3c;
}
.badge-mini.badge-external {
background: var(--surface-2);
color: var(--text-muted);
border: 1px dashed var(--border-strong);
}
.org-card.president .badge-mini.badge-client {
background: rgba(255,255,255,0.18);
color: #c4f5d9;
}
/* Filter dim */
.org-card.dim { opacity: 0.28; }
.org-card.dim:hover { opacity: 0.6; }
/* ============================================================
DETAIL RAIL - overlay, not part of grid
============================================================ */
.detail-rail {
position: absolute;
top: 0; right: 0; bottom: 0;
width: 360px;
background: var(--sidebar-bg);
border-left: 1px solid var(--border);
box-shadow: -10px 0 30px -18px rgba(20,18,14,0.18);
display: flex;
flex-direction: column;
z-index: 5;
animation: slideInRight 240ms cubic-bezier(.2,.8,.2,1);
}
.detail-rail[hidden] { display: none; }
@keyframes slideInRight {
from { transform: translateX(24px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Head */
.detail-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding: 16px 16px 14px;
border-bottom: 1px solid var(--border);
}
.detail-avatar {
width: 44px; height: 44px;
border-radius: 10px;
background: var(--surface-2);
display: grid; place-items: center;
font-size: 14px; font-weight: 700;
letter-spacing: 0.02em;
}
.detail-head-text { min-width: 0; }
.detail-name {
font-size: 15px; font-weight: 700; color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-role {
font-size: 12px; color: var(--text-muted); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Tabs */
.detail-tabs {
display: flex;
gap: 0;
padding: 0 12px;
border-bottom: 1px solid var(--border);
}
.detail-tab {
padding: 10px 12px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
position: relative;
transition: color 100ms ease;
display: inline-flex;
align-items: center;
gap: 6px;
}
.detail-tab:hover { color: var(--text-soft); }
.detail-tab.active { color: var(--text); font-weight: 600; }
.detail-tab.active::after {
content: "";
position: absolute;
left: 8px; right: 8px; bottom: -1px;
height: 2px;
background: var(--text);
border-radius: 2px 2px 0 0;
}
.tab-count {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-faint);
font-weight: 500;
padding: 1px 5px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
}
.detail-tab.active .tab-count {
color: var(--text-soft);
}
/* Tab content */
.detail-content {
flex: 1;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.detail-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.detail-row .label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.detail-row .value {
font-size: 13px;
color: var(--text);
font-weight: 500;
}
.detail-row .value.mono { font-family: var(--font-mono); font-size: 12px; }
.detail-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: var(--radius-pill);
width: fit-content;
}
.detail-pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.detail-pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-pill.pill-internal { background: var(--surface-2); color: var(--text-soft); }
.detail-pill.pill-external {
background: var(--surface-2); color: var(--text-soft);
border: 1px dashed var(--border-strong); padding: 2px 8px;
}
.detail-pill.pill-client { background: #d3f2dd; color: #1a6b3c; }
.detail-pill.pill-internal-only { background: var(--surface-2); color: var(--text-muted); }
/* ============================================================
TOOLS LIST
============================================================ */
.tools-header {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 2px 2px;
}
.tools-count {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.tools-link {
font-size: 11.5px;
font-weight: 600;
color: var(--text-soft);
}
.tools-link:hover { color: var(--text); }
.tool-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: border-color 120ms ease, transform 120ms ease;
cursor: pointer;
}
.tool-item:hover {
border-color: var(--border-strong);
transform: translateY(-1px);
}
.tool-icon {
width: 30px; height: 30px;
border-radius: 7px;
display: grid; place-items: center;
font-size: 10px;
font-weight: 700;
color: white;
flex-shrink: 0;
letter-spacing: 0.02em;
}
.tool-info { flex: 1; min-width: 0; line-height: 1.25; }
.tool-name {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
display: flex;
align-items: center;
gap: 4px;
}
.tool-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0;
flex-shrink: 0;
}
.tool-status .pulse {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ok);
}
.tool-status.connected { color: var(--ok); }
.tool-status.pending { color: var(--warn); }
.tool-status.pending .pulse { background: var(--warn); }
.add-tool-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 12px;
background: transparent;
border: 1px dashed var(--border-strong);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 12.5px;
font-weight: 500;
margin-top: 4px;
transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.add-tool-btn:hover {
background: var(--surface-2);
color: var(--text);
border-color: var(--text-muted);
}
/* ============================================================
EMPTY STATE
============================================================ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 32px 16px;
gap: 8px;
color: var(--text-muted);
}
.empty-state-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--surface-2);
display: grid; place-items: center;
color: var(--text-faint);
font-size: 18px;
margin-bottom: 4px;
}
.empty-state-title { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.empty-state-desc { font-size: 11.5px; color: var(--text-muted); max-width: 220px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1280px) {
.org-depts {
grid-template-columns: repeat(3, minmax(210px, 1fr));
row-gap: 36px;
}
/* When wrapping, the trunk doesn't make sense - hide */
.org-depts::before { display: none; }
.org-dept::before { display: none; }
}
@media (max-width: 860px) {
.app { grid-template-columns: 1fr; }
.sidebar {
position: sticky; top: 0; z-index: 10;
height: auto;
flex-direction: row; align-items: center;
gap: 8px; padding: 8px 10px;
overflow-x: auto; overflow-y: hidden;
}
.workspace { flex: 0 0 auto; }
.qa-row { display: none; }
.nav { flex-direction: row; gap: 4px; padding: 0; flex: 1; overflow-x: auto; overflow-y: hidden; }
.nav-group { flex-direction: row; gap: 2px; }
.nav-section, .nav-children { display: none; }
.nav-item.child { display: none; }
.nav-item { padding: 6px 10px; white-space: nowrap; }
.nav-meta, .nav-badge { display: none; }
.sidebar-bottom { display: none; }
.main { padding: 8px; }
.surface { min-height: calc(100vh - 16px); }
.org-depts { grid-template-columns: 1fr; }
.detail-rail { width: 100%; }
}
/* External (client-facing) stage card - friendly paragraph, no step list */
.stage-blurb {
font-size: 14px;
line-height: 1.65;
color: var(--text-soft);
letter-spacing: -0.003em;
margin: 0;
}
.stage-card--external {
background: linear-gradient(180deg, var(--surface), var(--surface-2));
}
.stage-card--external .stage-duration-text {
color: var(--ok);
}
/* The blurb is the flexible region: it absorbs equal-height stretch and is the
only thing that scrolls if a card ever exceeds the available height. */
.stage-card--external .stage-blurb {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* ============================================================
CLIENT JOURNEY BODY
============================================================ */
.body.journey-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.body.journey-body[hidden] { display: none; }
.journey {
flex: 1;
min-height: 0; /* let it shrink inside the flex column so children are height-bounded */
/* Horizontal-only: the stage cards run left-to-right; never scroll the page up/down. */
overflow-x: auto;
overflow-y: hidden;
padding: 24px 32px;
background:
radial-gradient(circle, rgba(20,18,14,0.05) 1px, transparent 1.2px) 0 0 / 22px 22px,
var(--surface);
}
.stages {
display: flex;
gap: 0;
align-items: stretch;
min-width: fit-content;
}
/* External cards sit in one left-to-right row, capped to the viewport height so
the page itself never scrolls vertically. A card taller than the area scrolls
its own blurb (rare); normally everything fits with no scrollbar at all. */
.stages-external {
max-height: 100%;
}
.stage-arrow {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
color: var(--text-faint);
flex-shrink: 0;
}
.stage-arrow svg { width: 22px; height: 22px; }
/* ============================================================
STAGE CARD
============================================================ */
.stage-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 20px 18px;
width: 320px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: var(--shadow-card);
position: relative;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.stage-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-2, var(--shadow-pop));
transform: translateY(-1px);
}
/* Brief flash when deep-linked from the Pipeline > Delivery phase ring,
so the user's eye snaps to the right card after the scroll. */
@keyframes stageCardFlash {
0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.0), var(--shadow-card); }
35% { box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.35), var(--shadow-pop); }
100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.0), var(--shadow-card); }
}
.stage-card.is-flash {
animation: stageCardFlash 1.4s ease-out;
}
/* Launch stage - sales begin here, subtle green accent */
.stage-card[data-stage="launch"] {
border-color: rgba(21, 160, 107, 0.55);
box-shadow: 0 0 0 1px rgba(21, 160, 107, 0.18), var(--shadow-card);
}
.stage-card[data-stage="launch"]:hover {
border-color: var(--ok);
box-shadow: 0 0 0 1px rgba(21, 160, 107, 0.28), var(--shadow-pop);
}
.stage-header {
display: flex;
flex-direction: column;
gap: 6px;
}
.stage-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.stage-label .stage-num {
font-family: var(--font-mono);
background: var(--surface-2);
color: var(--text-soft);
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.02em;
}
.stage-name {
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.25;
}
.stage-duration-strip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
color: var(--text-muted);
margin-top: -4px;
}
.stage-duration-strip svg {
color: var(--text-faint);
flex-shrink: 0;
}
.stage-duration-text {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-soft);
letter-spacing: 0;
flex: 1;
}
.stage-parallel-tag {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 7px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-muted);
border: 1px solid var(--border);
}
.stage-owners {
display: flex;
align-items: center;
gap: 6px;
}
.owner-stack {
display: flex;
}
.owner-chip {
width: 24px; height: 24px;
border-radius: 7px;
display: grid; place-items: center;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.02em;
border: 2px solid var(--surface);
margin-left: -6px;
cursor: pointer;
transition: transform 100ms ease;
}
.owner-chip:first-child { margin-left: 0; }
.owner-chip:hover { transform: translateY(-2px); }
.owner-chip.executive { background: var(--dept-executive); color: var(--dept-executive-fg); }
.owner-chip.operations { background: var(--dept-operations); color: var(--dept-operations-fg); }
.owner-chip.finance { background: var(--dept-finance); color: var(--dept-finance-fg); }
.owner-chip.legal { background: var(--dept-legal); color: var(--dept-legal-fg); }
.owner-chip.creative { background: var(--dept-creative); color: var(--dept-creative-fg); }
.owner-chip.growth { background: var(--dept-growth); color: var(--dept-growth-fg); }
.owner-chip.engineering { background: var(--dept-engineering); color: var(--dept-engineering-fg); }
.owner-names {
font-size: 11.5px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* External (client-facing) view - role/department pills, no individual people */
.stage-roles {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.stage-role-pill {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 4px 10px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-soft);
white-space: nowrap;
}
.stage-role-pill.executive { background: var(--dept-executive); color: var(--dept-executive-fg); }
.stage-role-pill.operations { background: var(--dept-operations); color: var(--dept-operations-fg); }
.stage-role-pill.finance { background: var(--dept-finance); color: var(--dept-finance-fg); }
.stage-role-pill.legal { background: var(--dept-legal); color: var(--dept-legal-fg); }
.stage-role-pill.creative { background: var(--dept-creative); color: var(--dept-creative-fg); }
.stage-role-pill.growth { background: var(--dept-growth); color: var(--dept-growth-fg); }
.stage-role-pill.engineering { background: var(--dept-engineering); color: var(--dept-engineering-fg); }
.stage-steps {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--hairline);
}
.stage-step {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
color: var(--text-soft);
line-height: 1.5;
}
.stage-step .step-text {
padding-top: 2px;
}
/* Per-step owner avatars - replaces the old done-toggle circle */
.step-owners {
display: flex;
flex-shrink: 0;
padding-top: 1px;
}
.step-owner {
width: 22px; height: 22px;
border-radius: 7px;
display: grid; place-items: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
border: 2px solid var(--surface);
margin-left: -5px;
background: var(--surface-2);
color: var(--text-soft);
padding: 0;
cursor: pointer;
font-family: inherit;
transition: transform 100ms ease;
}
.step-owner:first-child { margin-left: 0; }
.step-owner:hover { transform: translateY(-1px); }
.step-owner.executive { background: var(--dept-executive); color: var(--dept-executive-fg); }
.step-owner.operations { background: var(--dept-operations); color: var(--dept-operations-fg); }
.step-owner.finance { background: var(--dept-finance); color: var(--dept-finance-fg); }
.step-owner.legal { background: var(--dept-legal); color: var(--dept-legal-fg); }
.step-owner.creative { background: var(--dept-creative); color: var(--dept-creative-fg); }
.step-owner.growth { background: var(--dept-growth); color: var(--dept-growth-fg); }
.step-owner.engineering { background: var(--dept-engineering); color: var(--dept-engineering-fg); }
.step-owner.external {
background: transparent;
color: var(--text-muted);
border: 1.5px dashed var(--border-strong);
cursor: default;
}
.step-owner.placeholder {
background: transparent;
border: 1.5px dashed var(--border);
cursor: default;
}
.journey-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
gap: 8px;
text-align: center;
color: var(--text-muted);
}
.journey-empty-title {
font-size: 14px;
font-weight: 600;
color: var(--text-soft);
}
.journey-empty-desc {
font-size: 12.5px;
color: var(--text-muted);
max-width: 280px;
}
/* ============================================================
TECH STACK VIEW
============================================================ */
.techstack-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding: 0; /* full-bleed canvas - meets the header's bottom line, no inner stripe */
width: 100%;
overflow: hidden;
}
.techstack {
position: relative;
flex: 1;
min-height: 0;
width: 100%;
overflow: hidden;
cursor: grab;
user-select: none;
background:
radial-gradient(circle, rgba(20,18,14,0.05) 1px, transparent 1.2px) 0 0 / 22px 22px,
var(--surface);
}
.techstack.panning { cursor: grabbing; }
.tech-section { display: flex; flex-direction: column; gap: 12px; }
.tech-section-head {
display: flex;
align-items: baseline;
gap: 10px;
}
.tech-section-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-soft);
margin: 0;
}
.tech-section-count {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
background: var(--surface-2);
padding: 1px 7px;
border-radius: 10px;
}
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.tech-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tech-card:hover {
border-color: var(--text-soft);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.tech-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.tech-mark {
width: 34px;
height: 34px;
border-radius: 9px;
display: grid;
place-items: center;
color: white;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.tech-name-block { flex: 1; min-width: 0; line-height: 1.25; }
.tech-name {
font-size: 13.5px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tech-tier {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 1px;
}
.tech-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-soft);
flex-shrink: 0;
}
.tech-status .pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.tech-status.status-active { color: #1a6b3c; background: rgba(26,107,60,0.10); }
.tech-status.status-evaluating { color: #8b4a14; background: rgba(139,74,20,0.10); }
.tech-status.status-pending { color: #82591a; background: rgba(130,89,26,0.10); }
.tech-purpose {
font-size: 12.5px;
line-height: 1.55;
color: var(--text-soft);
margin: 0;
}
/* Referral / affiliate chip on tech-card */
.tech-card-foot {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tech-referral {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
letter-spacing: 0.01em;
}
.tech-referral.has-code { background: rgba(26,107,60,0.10); color: #1a6b3c; }
.tech-referral.tbd { background: rgba(139,74,20,0.10); color: #8b4a14; }
.tech-referral.free { background: var(--surface-2); color: var(--text-muted); }
/* Replace the old .tech-referral chip with action buttons in the card foot. */
.tech-card-foot {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 2px;
}
.tech-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
padding: 6px 10px;
border-radius: 8px;
background: var(--surface-2);
color: var(--text-soft);
border: 1px solid transparent;
transition: background 110ms ease, color 110ms ease, border-color 110ms ease;
white-space: nowrap;
}
.tech-btn svg { color: currentColor; }
.tech-btn:hover { background: var(--surface-3); color: var(--text); }
/* Copy button states */
.copy-btn.has-affiliate {
background: rgba(26,107,60,0.10);
color: #1a6b3c;
}
.copy-btn.has-affiliate:hover { background: rgba(26,107,60,0.16); }
.copy-btn.needs-affiliate {
background: rgba(139,74,20,0.08);
color: #8b4a14;
border-color: rgba(139,74,20,0.18);
border-style: dashed;
}
.copy-btn.needs-affiliate:hover { background: rgba(139,74,20,0.14); }
.copy-btn.free-link { /* uses neutral .tech-btn defaults */ }
.copy-btn.flashed {
background: #1a6b3c !important;
color: #fff !important;
border-color: transparent !important;
}
.guide-btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
.guide-btn[disabled]:hover { background: var(--surface-2); color: var(--text-soft); }
/* Tech mark - favicon variant. The brand-colored letter mark stays underneath
as a fallback that shows automatically if the ![]()
fails to load (the img
is removed by its onerror handler, exposing the letter underneath). */
.tech-mark.with-icon {
position: relative;
background: #fff;
border: 1px solid var(--border);
color: var(--text-soft);
overflow: hidden;
}
.tech-mark-fallback {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
background: var(--mark-bg, var(--text-soft));
}
.tech-mark-img {
position: relative;
width: 22px;
height: 22px;
object-fit: contain;
display: block;
z-index: 1;
}
.tech-status.status-planned { color: #5b2bb1; background: rgba(91,43,177,0.10); }
/* ============================================================
HEADER LINK - used in Tech Stack page headers
============================================================ */
.header-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
background: var(--surface-2);
border-radius: 8px;
border: 1px solid var(--border);
transition: background 110ms ease, color 110ms ease, border-color 110ms ease;
white-space: nowrap;
}
.header-link:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-strong); }
.page-sub {
font-size: 12.5px;
color: var(--text-muted);
margin-left: 8px;
font-weight: 500;
}
/* ============================================================
ROADMAP (Gantt)
============================================================ */
.view[data-view="roadmap"] { position: relative; }
.body.roadmap-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0;
padding: var(--content-pad);
overflow: hidden;
min-height: 0;
}
.body.roadmap-body[hidden] { display: none; }
/* The #roadmap wrapper must itself be a height-bounded flex column, or the
.gantt card's flex:1 height never resolves (the wrapper is block/auto by
default). Horizontal-only scroll on a narrow panel; never vertical. */
.roadmap {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: auto;
overflow-y: hidden;
}
/* ============================================================
ROADMAP GANTT - refined-classic (synthesized redesign)
Same Gantt the user likes, every pixel re-cut. Light theme only.
Three stacked bands inside a height-driving card:
strip (duration chip + legend) -> axis -> rows (split equally).
Shared geometry tokens keep the ruler pixel-aligned to every bar.
============================================================ */
.gantt {
--label-w: 290px; /* width of the left phase-name column */
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
/* No inner card frame - the chart uses the full page real estate.
The outer .roadmap-body padding is the only gutter now. */
background: transparent;
overflow-x: auto;
overflow-y: hidden;
}
/* Plot: vertical month gridlines behind, one pill lane per phase on top. */
.gantt-plot {
position: relative;
flex: 1 1 auto;
min-height: 0;
min-width: 660px;
display: flex;
flex-direction: column;
}
.gantt-grid { position: absolute; top: 0; bottom: 0; left: var(--label-w); right: 0; z-index: 0; pointer-events: none; }
.gantt-grid .gantt-gridline {
position: absolute;
top: 0; bottom: 0;
width: 0;
border-left: 1px dashed var(--hairline);
}
.gantt-rows {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
/* One lane per phase - lanes split the height evenly, no vertical scroll. */
.gantt-row {
display: flex;
align-items: stretch;
flex: 1 1 0;
min-height: 42px;
}
/* Left column: phase name + duration (replaces the old beside-the-bar label). */
.gantt-row-label {
width: var(--label-w);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding-right: 16px;
min-width: 0;
}
.gantt-row-name {
flex: 1 1 auto;
min-width: 0;
font-size: 11.5px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--text);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
/* Timeline track: the date-positioned bar lives here (position context). */
.gantt-row-track {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
/* The positioned span: start -> worst-case end. */
.gantt-bar-wrap {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 34px;
min-width: 140px; /* always wide enough for duration + owner avatars inside */
cursor: pointer;
}
/* Pill = solid (expected duration) + hatched (buffer up to worst case). */
.gantt-bar {
display: flex;
width: 100%;
height: 100%;
border-radius: var(--radius-pill);
overflow: hidden;
box-shadow:
0 1px 2px rgba(20, 18, 14, 0.06),
inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
transition: transform 130ms ease, box-shadow 130ms ease;
}
.gantt-bar-wrap:hover .gantt-bar {
transform: translateY(-1px);
box-shadow:
0 8px 20px -8px rgba(20, 18, 14, 0.26),
inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
}
.gantt-bar-wrap:active .gantt-bar { transform: none; }
.gantt-bar-solid {
flex: 1 1 auto; /* fills the whole pill - the buffer tail is now solid */
display: flex;
align-items: center;
justify-content: flex-start; /* duration sits against the LEFT edge of the pillar */
gap: 8px;
padding: 0 11px;
min-width: 0;
background-color: var(--dept-operations);
color: var(--dept-operations-fg);
border-radius: var(--radius-pill);
}
.gantt-bar-dur {
flex-shrink: 0;
font-size: 11px;
font-weight: 500;
opacity: 0.82;
color: currentColor;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Per-department solid fills (critical-path phases). */
.gantt-bar-executive .gantt-bar-solid { background-color: var(--dept-executive); color: var(--dept-executive-fg); }
.gantt-bar-operations .gantt-bar-solid { background-color: var(--dept-operations); color: var(--dept-operations-fg); }
.gantt-bar-finance .gantt-bar-solid { background-color: var(--dept-finance); color: var(--dept-finance-fg); }
.gantt-bar-legal .gantt-bar-solid { background-color: var(--dept-legal); color: var(--dept-legal-fg); }
.gantt-bar-creative .gantt-bar-solid { background-color: var(--dept-creative); color: var(--dept-creative-fg); }
.gantt-bar-growth .gantt-bar-solid { background-color: var(--dept-growth); color: var(--dept-growth-fg); }
.gantt-bar-engineering .gantt-bar-solid { background-color: var(--dept-engineering); color: var(--dept-engineering-fg); }
/* Parallel (non-critical) phases: softer wash + dark text. */
.gantt-bar-wrap.is-parallel .gantt-bar-solid { color: var(--text); }
.is-parallel.gantt-bar-executive .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-executive) 38%, var(--surface)); }
.is-parallel.gantt-bar-operations .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-operations) 38%, var(--surface)); }
.is-parallel.gantt-bar-finance .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-finance) 38%, var(--surface)); }
.is-parallel.gantt-bar-legal .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-legal) 38%, var(--surface)); }
.is-parallel.gantt-bar-creative .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-creative) 38%, var(--surface)); }
.is-parallel.gantt-bar-growth .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-growth) 38%, var(--surface)); }
.is-parallel.gantt-bar-engineering .gantt-bar-solid { background-color: color-mix(in srgb, var(--dept-engineering) 38%, var(--surface)); }
/* Owner avatar stack at the right end of the wrap (sits over the buffer tail). */
.gantt-owners {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
z-index: 4;
}
.gantt-owner {
width: 23px;
height: 23px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.01em;
color: #fff;
background: var(--dept-operations);
border: 2px solid var(--surface);
margin-left: -7px;
box-shadow: 0 1px 2px rgba(20, 18, 14, 0.14);
}
.gantt-owner:first-child { margin-left: 0; }
.gantt-owner.executive { background: var(--dept-executive); color: var(--dept-executive-fg); }
.gantt-owner.operations { background: var(--dept-operations); color: var(--dept-operations-fg); }
.gantt-owner.finance { background: var(--dept-finance); color: var(--dept-finance-fg); }
.gantt-owner.legal { background: var(--dept-legal); color: var(--dept-legal-fg); }
.gantt-owner.creative { background: var(--dept-creative); color: var(--dept-creative-fg); }
.gantt-owner.growth { background: var(--dept-growth); color: var(--dept-growth-fg); }
.gantt-owner.engineering { background: var(--dept-engineering); color: var(--dept-engineering-fg); }
.gantt-owner-more { background: var(--surface-3); color: var(--text-soft); }
/* Month ruler along the bottom. */
.gantt-axis {
display: flex;
flex: 0 0 auto;
height: 15px;
margin-top: 9px;
min-width: 660px;
}
.gantt-axis-spacer {
width: var(--label-w);
flex-shrink: 0;
}
.gantt-axis-track {
position: relative;
flex: 1 1 auto;
min-width: 0;
}
.gantt-axis-tick {
position: absolute;
top: 0;
transform: translateX(1px);
font-size: 11px;
font-weight: 500;
color: var(--text-faint);
letter-spacing: -0.01em;
white-space: nowrap;
}
/* ============================================================
ROADMAP DRAWER - per-phase checklist side card
============================================================ */
.roadmap-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 18, 14, 0.18);
z-index: 99;
animation: fadeIn 180ms ease;
}
.roadmap-drawer-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.roadmap-drawer {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 420px;
max-width: 92vw;
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: -16px 0 40px -20px rgba(20,18,14,0.24);
display: flex;
flex-direction: column;
z-index: 100;
transform: translateX(16px);
opacity: 0;
transition: transform 220ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease;
}
/* Prevent the page beneath from scrolling while the roadmap drawer is open.
The drawer is position:fixed, so without this lock the user could still
scroll the page behind the drawer. */
body.is-roadmap-drawer-open { overflow: hidden; }
.roadmap-drawer.open {
transform: translateX(0);
opacity: 1;
}
.roadmap-drawer[hidden] { display: none; }
.roadmap-drawer-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: flex-start;
padding: 18px 18px 16px;
}
.roadmap-drawer-num {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 4px;
}
.roadmap-drawer-title {
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.3;
}
.roadmap-drawer-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 6px;
}
.roadmap-drawer-body {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.roadmap-drawer-list {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 0 18px;
padding: 4px 0;
overflow-y: auto;
overscroll-behavior: contain;
flex: 1;
}
.roadmap-drawer-list[hidden],
.roadmap-drawer-detail[hidden] { display: none; }
.roadmap-drawer-item { cursor: pointer; }
.roadmap-drawer-item-text-wrap {
display: contents;
}
.roadmap-drawer-detail {
margin: 0 18px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 12px 0 20px;
overflow-y: auto;
overscroll-behavior: contain;
flex: 1;
display: flex;
flex-direction: column;
}
.roadmap-detail-back {
appearance: none;
background: transparent;
border: 0;
padding: 4px 6px 4px 0;
margin-bottom: 10px;
align-self: flex-start;
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.roadmap-detail-back:hover { color: var(--text); }
.roadmap-detail-back svg { width: 14px; height: 14px; }
.roadmap-detail-head {
margin-bottom: 12px;
}
.roadmap-detail-kicker {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 4px;
}
.roadmap-detail-title {
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--text);
letter-spacing: -0.01em;
}
.roadmap-detail-head-owners {
display: flex;
margin-top: 8px;
}
.roadmap-detail-tabs {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 14px;
}
.roadmap-detail-tab {
appearance: none;
background: transparent;
border: 0;
padding: 8px 12px;
font: inherit;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 120ms ease, border-color 120ms ease;
}
.roadmap-detail-tab:hover { color: var(--text); }
.roadmap-detail-tab.is-active {
color: var(--text);
border-bottom-color: var(--text);
}
.roadmap-detail-panel {
font-size: 13px;
line-height: 1.6;
color: var(--text-soft);
}
.roadmap-detail-panel[hidden] { display: none; }
.roadmap-detail-panel p { margin: 0 0 10px; white-space: pre-wrap; }
.roadmap-detail-panel p:last-child { margin-bottom: 0; }
.roadmap-detail-section-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
margin: 14px 0 6px;
}
.roadmap-detail-section-label:first-child { margin-top: 0; }
.roadmap-detail-section-heading {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.005em;
margin: 18px 0 6px;
}
.roadmap-detail-section-heading:first-child { margin-top: 0; }
.roadmap-detail-section-heading + p { margin-top: 0; }
.roadmap-detail-breakdown {
margin: 0;
padding: 0 0 0 18px;
font-size: 12.5px;
line-height: 1.6;
color: var(--text-soft);
}
.roadmap-detail-breakdown li { margin: 4px 0; }
.roadmap-detail-empty {
font-size: 12.5px;
color: var(--text-faint);
font-style: italic;
padding: 18px 4px;
line-height: 1.55;
}
.roadmap-detail-meta-row {
display: flex;
gap: 14px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-bottom: 12px;
flex-wrap: wrap;
}
.roadmap-detail-meta-row span { display: inline-flex; gap: 4px; }
.roadmap-detail-meta-row b { color: var(--text); font-weight: 600; }
.roadmap-drawer-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: flex-start;
padding: 11px 4px;
cursor: pointer;
border: 0;
border-bottom: 1px solid var(--hairline);
background: transparent;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
transition: background 120ms ease;
}
.roadmap-drawer-item:hover .roadmap-drawer-textbody { color: var(--text); }
.roadmap-drawer-owners {
display: flex;
flex-shrink: 0;
margin-top: 1px;
}
.roadmap-drawer-owner {
width: 22px; height: 22px;
border-radius: 6px;
display: grid; place-items: center;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
border: 2px solid var(--surface);
margin-left: -5px;
background: var(--surface-2);
color: var(--text-soft);
}
.roadmap-drawer-owner:first-child { margin-left: 0; }
.roadmap-drawer-owner.executive { background: var(--dept-executive); color: var(--dept-executive-fg); }
.roadmap-drawer-owner.operations { background: var(--dept-operations); color: var(--dept-operations-fg); }
.roadmap-drawer-owner.finance { background: var(--dept-finance); color: var(--dept-finance-fg); }
.roadmap-drawer-owner.legal { background: var(--dept-legal); color: var(--dept-legal-fg); }
.roadmap-drawer-owner.creative { background: var(--dept-creative); color: var(--dept-creative-fg); }
.roadmap-drawer-owner.growth { background: var(--dept-growth); color: var(--dept-growth-fg); }
.roadmap-drawer-owner.engineering { background: var(--dept-engineering); color: var(--dept-engineering-fg); }
.roadmap-drawer-owner.external {
background: transparent;
color: var(--text-muted);
border: 1.5px dashed var(--border-strong);
}
.roadmap-drawer-item:last-child { border-bottom: 0; }
.roadmap-drawer-item:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.roadmap-drawer-check {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0; height: 0;
}
.roadmap-drawer-box {
width: 18px; height: 18px;
border-radius: 5px;
border: 1.5px solid var(--border);
background: var(--surface);
display: grid;
place-items: center;
flex-shrink: 0;
margin-top: 1px;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
color: transparent;
}
.roadmap-drawer-box svg {
width: 12px; height: 12px;
}
.roadmap-drawer-item.checked .roadmap-drawer-box {
background: var(--text);
border-color: var(--text);
color: var(--surface);
}
.roadmap-drawer-text {
font-size: 12.5px;
line-height: 1.5;
color: var(--text-soft);
transition: color 120ms ease;
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.roadmap-drawer-num {
flex: 0 0 auto;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--text-faint, #b3afa5);
font-variant-numeric: tabular-nums;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
min-width: 18px;
}
.roadmap-drawer-textbody { min-width: 0; }
.roadmap-drawer-item.checked .roadmap-drawer-text {
color: var(--text-faint);
text-decoration: line-through;
text-decoration-color: var(--text-faint);
}
.roadmap-drawer-item.checked .roadmap-drawer-num {
text-decoration: none;
opacity: 0.55;
}
/* ============================================================
STAGE ACTIONS PANEL - phase-drawer-style render for pipeline-stage rails
(e.g. the Sales stage rail). Mirrors the Roadmap phase drawer so the
"what happens in this stage" view feels consistent everywhere.
============================================================ */
.stage-actions-panel {
display: flex;
flex-direction: column;
gap: 0;
}
.stage-actions-eyebrow {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 6px;
}
.stage-actions-title {
margin: 0;
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.25;
}
.stage-actions-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
margin-top: 6px;
}
.stage-actions-divider {
height: 1px;
background: var(--border);
margin: 16px 0 0;
}
.stage-actions-list {
display: flex;
flex-direction: column;
}
.stage-action-item {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 4px;
border-bottom: 1px solid var(--hairline, var(--border));
}
.stage-action-item:last-child { border-bottom: 0; }
.stage-action-box {
width: 18px; height: 18px;
border-radius: 5px;
border: 1.5px dashed var(--border-strong, var(--text-faint));
background: transparent;
display: grid;
place-items: center;
color: transparent;
flex-shrink: 0;
}
.stage-action-box svg { width: 12px; height: 12px; }
.stage-action-text {
font-size: 13px;
font-weight: 600;
color: var(--text);
line-height: 1.35;
}
.stage-action-meta {
font-size: 11px;
color: var(--text-muted);
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.stage-actions-empty {
font-size: 12.5px;
color: var(--text-faint);
padding: 20px 0;
text-align: center;
font-style: italic;
}
/* ============================================================
DOCUMENTATION VIEW - single tree nav (Stages expand to reveal Phases) + page
============================================================ */
.view[data-view="docs"] {
flex: 1;
min-height: 0;
overflow: hidden;
}
.docs-layout {
flex: 1;
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
min-height: 0;
height: 100%;
background: var(--surface);
}
/* ---- Panes (Stages + Phases share the same look) ---- */
.docs-pane {
border-right: 1px solid var(--border);
background: var(--surface-2);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.docs-pane-stages { background: var(--sidebar-bg); }
.docs-pane-head {
padding: 22px 18px 14px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: inherit;
z-index: 1;
}
.docs-pane-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-faint);
margin-bottom: 4px;
}
.docs-pane-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.25;
}
.docs-pane-list {
padding: 8px 8px 24px;
display: flex;
flex-direction: column;
gap: 1px;
}
.docs-pane-group-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-faint);
padding: 14px 12px 6px;
}
.docs-pane-group-label:first-child { padding-top: 6px; }
.docs-pane-item {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
color: var(--text-soft);
transition: background 100ms ease, color 100ms ease;
}
.docs-pane-item:hover {
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text);
}
.docs-pane-item.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(20,18,14,0.04);
}
.docs-pane-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text-faint);
text-align: center;
}
.docs-pane-num-icon {
font-size: 14px;
font-weight: 400;
color: var(--text-faint);
}
.docs-pane-item.active .docs-pane-num {
color: var(--text);
}
.docs-pane-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.docs-pane-text-title {
font-size: 13px;
font-weight: 500;
line-height: 1.35;
word-break: break-word;
overflow-wrap: anywhere;
}
.docs-pane-item.active .docs-pane-text-title { font-weight: 600; }
.docs-pane-text-sub {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.35;
word-break: break-word;
overflow-wrap: anywhere;
}
.docs-pane-chev {
width: 14px;
height: 14px;
color: var(--text-faint);
flex-shrink: 0;
opacity: 0.7;
transition: opacity 120ms ease, transform 160ms ease;
}
.docs-pane-item:hover .docs-pane-chev { opacity: 1; }
.docs-pane-item.open .docs-pane-chev { transform: rotate(90deg); opacity: 1; }
.docs-pane-empty {
padding: 18px 14px;
font-size: 12.5px;
color: var(--text-faint);
font-style: italic;
text-align: center;
line-height: 1.5;
}
/* ---- Inline phases sublist (rendered under an open stage) ---- */
.docs-pane-sublist {
display: flex;
flex-direction: column;
gap: 1px;
padding: 2px 0 8px 16px;
margin-left: 22px;
border-left: 1px solid var(--border);
position: relative;
}
.docs-pane-subitem {
display: grid;
grid-template-columns: 32px 1fr;
align-items: baseline;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
color: var(--text-muted);
transition: background 100ms ease, color 100ms ease;
}
.docs-pane-subitem:hover {
background: color-mix(in srgb, var(--surface) 70%, transparent);
color: var(--text-soft);
}
.docs-pane-subitem.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(20,18,14,0.04);
font-weight: 600;
}
.docs-pane-subnum {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
color: var(--text-faint);
letter-spacing: 0.02em;
}
.docs-pane-subitem.active .docs-pane-subnum { color: var(--text); }
.docs-pane-subtitle {
font-size: 12.5px;
line-height: 1.4;
word-break: break-word;
overflow-wrap: anywhere;
}
.docs-pane-subempty {
padding: 10px 12px;
font-size: 11.5px;
color: var(--text-faint);
font-style: italic;
}
/* ---- Center: SOP page ---- */
.docs-main {
overflow-y: auto;
padding: 40px 56px 80px;
}
.docs-page-header {
max-width: 760px;
margin: 0 auto 28px;
border-bottom: 1px solid var(--border);
padding-bottom: 22px;
}
.docs-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-faint);
margin-bottom: 10px;
}
.docs-title {
font-size: 30px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
}
.docs-subtitle {
margin: 10px 0 0 0;
font-size: 14.5px;
line-height: 1.55;
color: var(--text-soft);
max-width: 640px;
}
.docs-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 18px;
}
.docs-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 6px;
font-size: 12.5px;
color: var(--text-muted);
border: 1px solid transparent;
transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.docs-action:hover {
background: var(--surface-2);
color: var(--text);
border-color: var(--border);
}
.docs-action svg { width: 14px; height: 14px; }
.docs-actions-sep {
width: 1px;
height: 16px;
background: var(--border);
}
/* ---- Body sections ---- */
.docs-body {
max-width: 760px;
margin: 0 auto;
}
.docs-section {
padding: 18px 0 28px;
border-bottom: 1px solid var(--hairline);
}
.docs-section:last-child { border-bottom: 0; }
.docs-section-heading {
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin: 0 0 12px;
scroll-margin-top: 24px;
display: flex;
align-items: center;
gap: 8px;
}
.docs-section-anchor {
color: var(--text-faint);
font-weight: 400;
opacity: 0;
transition: opacity 120ms ease, color 120ms ease;
font-size: 16px;
}
.docs-section-heading:hover .docs-section-anchor { opacity: 1; }
.docs-section-anchor:hover { color: var(--accent-blue); }
.docs-section-body {
font-size: 13.5px;
line-height: 1.65;
color: var(--text-soft);
}
.docs-section-body p { margin: 0 0 10px; }
.docs-section-body p:last-child { margin-bottom: 0; }
.docs-section-body ul, .docs-section-body ol {
margin: 4px 0 12px;
padding-left: 22px;
}
.docs-section-body li { margin: 4px 0; }
.docs-section-body strong { color: var(--text); font-weight: 600; }
.docs-stub {
color: var(--text-faint);
font-style: italic;
background: var(--surface-2);
padding: 12px 14px;
border-radius: 6px;
border: 1px dashed var(--border);
margin: 0 !important;
}
/* ---- Phases-in-this-stage grid (shown on stage intro pages) ---- */
.docs-phase-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin-top: 4px;
}
.docs-phase-card {
display: block;
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.docs-phase-card:hover {
border-color: var(--border-strong);
transform: translateY(-1px);
box-shadow: 0 4px 12px -4px rgba(20,18,14,0.1);
}
.docs-phase-card-num {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 6px;
}
.docs-phase-card-title {
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.docs-phase-card-sub {
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
}
/* ---- Empty state for the page area ---- */
.docs-main.docs-main-empty .docs-page-header { border-bottom: 0; }
.docs-main.docs-main-empty .docs-actions { display: none; }
.docs-main.docs-main-empty {
display: flex;
align-items: center;
justify-content: center;
}
.docs-main.docs-main-empty .docs-page-header {
text-align: center;
margin: 0;
max-width: 480px;
}
/* ---- Responsive ---- */
@media (max-width: 1000px) {
.docs-layout { grid-template-columns: 240px minmax(0, 1fr); }
.docs-main { padding: 32px 32px 64px; }
}
@media (max-width: 640px) {
.docs-layout { grid-template-columns: minmax(0, 1fr); }
.docs-pane-stages { display: none; }
}
/* ============================================================
CRM MODULE - Clients, Contracts, Templates
============================================================ */
/* ---- Status palette ---- */
:root {
--status-draft-bg: #ecebe7; --status-draft-fg: #56524a;
--status-sent-bg: #dde7ff; --status-sent-fg: #1f3da6;
--status-viewed-bg: #fce8c4; --status-viewed-fg: #82591a;
--status-signed-bg: #cdeedb; --status-signed-fg: #1a6b3c;
--status-completed-bg: #c4e9d3; --status-completed-fg: #0d5e35;
--status-voided-bg: #f4d4d4; --status-voided-fg: #99211e;
}
/* ---- Buttons (reusable) ---- */
.btn-primary, .btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
padding: 7px 12px;
border-radius: var(--radius-sm);
letter-spacing: -0.005em;
transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
white-space: nowrap;
}
.btn-primary {
background: var(--text);
color: var(--surface);
box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: #2a2620; }
.btn-primary:disabled {
background: var(--surface-3);
color: var(--text-faint);
cursor: not-allowed;
box-shadow: none;
}
.btn-primary svg { color: currentColor; }
.btn-ghost {
background: transparent;
color: var(--text-soft);
border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
/* Soft danger variant - signals destructive intent (Void, Delete) without screaming */
.btn-ghost.btn-danger-soft {
color: var(--danger);
border-color: #f1cccc;
}
.btn-ghost.btn-danger-soft:hover {
background: #fdecec;
color: var(--danger);
border-color: #e9b6b6;
}
/* ---- Page sub label ---- */
.page-header-left .page-sub {
font-size: 12px;
color: var(--text-muted);
padding-left: 8px;
margin-left: 6px;
border-left: 1px solid var(--border);
white-space: nowrap;
}
/* ---- CRM toolbar (lighter than filterbar) ---- */
.crm-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 18px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.crm-search {
position: relative;
display: inline-flex;
align-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 10px;
gap: 6px;
min-width: 260px;
transition: border-color 120ms ease, background 120ms ease;
}
.crm-search:focus-within {
background: var(--surface);
border-color: var(--text-muted);
}
.crm-search svg { color: var(--text-muted); }
.crm-search input {
border: none;
background: transparent;
outline: none;
flex: 1;
font-size: 12.5px;
color: var(--text);
min-width: 0;
}
.crm-search input::placeholder { color: var(--text-faint); }
.deal-date-filter {
position: relative;
flex: 0 0 auto;
}
.date-filter-btn {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 32px;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text-soft);
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.date-filter-btn:hover,
.date-filter-btn.active {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text);
}
.date-filter-btn svg { color: var(--text-muted); }
.date-filter-pop {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
box-shadow: var(--shadow-pop);
z-index: 50;
}
.date-filter-pop[hidden] { display: none; }
.date-filter-section {
padding: 10px 0;
border-bottom: 1px solid var(--hairline);
}
.date-filter-section:first-child { padding-top: 0; }
.date-filter-section:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.date-filter-title {
margin-bottom: 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-faint);
}
.date-preset-grid,
.date-year-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.date-preset,
.date-year-btn {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 5px 9px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface-2);
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.date-preset:hover,
.date-year-btn:hover {
background: var(--surface-3);
color: var(--text);
}
.date-preset.active,
.date-year-btn.active {
background: var(--text);
border-color: var(--text);
color: var(--surface);
}
.date-field-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.date-range-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.date-range-grid label {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.date-range-grid span {
font-size: 11px;
color: var(--text-muted);
font-weight: 600;
}
.date-filter-pop input[type="date"] {
width: 100%;
min-height: 32px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
padding: 5px 8px;
font: inherit;
font-size: 12.5px;
}
.date-filter-pop input[type="date"]:focus {
outline: none;
background: var(--surface);
border-color: var(--text-muted);
}
.date-filter-foot {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
}
.date-apply-btn,
.date-clear-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 12.5px;
font-weight: 600;
}
.date-apply-btn {
background: var(--text);
color: var(--surface);
}
.date-clear-btn {
color: var(--text-muted);
}
.date-clear-btn:hover { background: var(--surface-2); color: var(--text); }
@media (max-width: 960px) {
.view[data-view="deals"] .filterbar {
align-items: stretch;
flex-direction: column;
}
.deals-filter-actions {
width: 100%;
margin-left: 0;
}
.deals-filter-actions .crm-search {
flex: 1;
min-width: 180px;
}
}
@media (max-width: 560px) {
.deals-filter-actions {
align-items: stretch;
flex-direction: column;
}
.date-filter-btn,
.deals-filter-actions .crm-search {
width: 100%;
}
.date-filter-pop {
left: 0;
right: auto;
width: min(360px, calc(100vw - 36px));
}
}
.crm-meta-count {
font-size: 11.5px;
font-family: var(--font-mono);
color: var(--text-muted);
letter-spacing: 0.01em;
}
/* ---- CRM body ---- */
.body.crm-body {
flex: 1;
overflow: auto;
padding: 0;
min-height: 0;
background: var(--surface);
}
/* ---- CRM table ---- */
.crm-table {
display: flex;
flex-direction: column;
}
.crm-row {
display: grid;
align-items: center;
gap: 16px;
padding: 11px 20px;
border-bottom: 1px solid var(--hairline);
cursor: pointer;
transition: background 100ms ease;
min-height: 56px;
}
.crm-row:hover { background: var(--surface-2); }
.crm-row.is-header {
cursor: default;
background: var(--surface-2);
padding-top: 9px; padding-bottom: 9px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
min-height: 36px;
position: sticky;
top: 0;
z-index: 2;
}
.crm-row.is-header:hover { background: var(--surface-2); }
/* Clients table columns */
.clients-row {
grid-template-columns: minmax(220px, 1.5fr) minmax(240px, 1.6fr) minmax(160px, 1fr) minmax(120px, auto);
}
.clients-row .col-portal { display: flex; align-items: center; }
@media (max-width: 720px) {
.clients-row { grid-template-columns: minmax(160px, 1.5fr) minmax(200px, 1.6fr) auto; }
.clients-row .col-phone { display: none; }
}
/* Portal status pill - shared across clients table + client detail header */
.portal-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
font-family: var(--font-mono);
background: var(--surface-2);
color: var(--text-muted);
border: 1px solid var(--border);
line-height: 1.4;
}
.portal-pill[data-status="invited"] { background: #fff3da; color: #82591a; border-color: #f1d99c; }
.portal-pill[data-status="activated"] { background: #d3f2dd; color: #1a6b3c; border-color: #b4e4c5; }
.portal-pill[data-status="expired"] { background: #fde0e0; color: #9b2222; border-color: #f1bcbc; }
.portal-pill[data-status="not-invited"] { background: transparent; color: var(--text-faint); }
#clientDetailInvite { display: inline-flex; align-items: center; gap: 8px; }
#clientDetailInvite .portal-pill { font-size: 9.5px; padding: 2px 7px; }
/* Invite modal: recipient card + meta strip */
.invite-recipient {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
margin-bottom: 16px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.invite-recipient-avatar {
width: 40px; height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
flex-shrink: 0;
}
.invite-recipient-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invite-recipient-name { font-size: 14px; font-weight: 600; color: var(--text); }
.invite-recipient-email { font-size: 12px; color: var(--text-muted); }
.invite-meta {
margin-top: 12px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px dashed var(--border);
border-radius: var(--radius);
display: flex;
flex-direction: column;
gap: 6px;
}
.invite-meta-row {
display: flex;
justify-content: space-between;
font-size: 11.5px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.invite-meta-row span:last-child { color: var(--text); }
/* Invite email preview */
.invite-preview-banner {
padding: 10px 14px;
margin-bottom: 14px;
background: #d3f2dd;
color: #1a6b3c;
border: 1px solid #b4e4c5;
border-radius: var(--radius);
font-size: 13px;
}
.invite-preview-envelope {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
margin-bottom: 16px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 12px;
}
.invite-preview-envelope-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; color: var(--text-muted); }
.invite-preview-envelope-row span:last-child { color: var(--text); }
.invite-preview-preheader { font-style: italic; color: var(--text-soft) !important; }
.invite-preview-canvas {
padding: 28px 36px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
color: #1a1a1a;
font-size: 14px;
line-height: 1.6;
max-width: 620px;
margin: 0 auto;
}
.invite-preview-canvas p { margin: 0 0 14px; }
.invite-preview-canvas ul { margin: 0 0 16px; padding-left: 22px; }
.invite-preview-canvas li { margin-bottom: 4px; }
.invite-meta-table {
width: 100%;
border-collapse: collapse;
margin: 4px 0 18px;
font-size: 13.5px;
}
.invite-meta-table td {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.invite-meta-table td:first-child { color: #6b6b6b; width: 38%; }
.invite-meta-table td:last-child { color: #1a1a1a; font-weight: 500; }
.invite-cta {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 28px;
margin: 8px 0 22px;
background: #0a0a0a;
color: #fff;
border-radius: 8px;
text-align: center;
}
.invite-cta span { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.invite-cta small { font-size: 11px; opacity: 0.7; }
.invite-note {
margin: 16px 0;
padding: 12px 16px;
border-left: 3px solid #d4d4d4;
background: #fafafa;
font-style: italic;
color: #444;
}
.invite-signoff { margin-top: 24px !important; color: #1a1a1a; }
.invite-signoff strong { display: inline-block; margin-top: 4px; }
.invite-sig-role { color: #6b6b6b; font-size: 12.5px; }
/* Contracts table columns */
.contracts-row {
grid-template-columns: 120px minmax(220px, 2fr) minmax(160px, 1.2fr) 120px 120px;
}
@media (max-width: 980px) {
.contracts-row { grid-template-columns: 110px minmax(180px, 2fr) minmax(140px, 1.2fr) 120px; }
.contracts-row .col-sent { display: none; }
}
.col-primary {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.col-primary-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.col-primary-name {
font-size: 13px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-primary-sub {
font-size: 11.5px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.client-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--dept-legal);
color: var(--dept-legal-fg);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.col-soft {
font-size: 12.5px;
color: var(--text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-faint {
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.005em;
}
.col-count {
font-size: 12.5px;
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
.col-actions {
display: flex;
justify-content: flex-end;
gap: 2px;
}
/* ---- Status pills + dots ---- */
.status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 600;
padding: 3px 9px 3px 8px;
border-radius: var(--radius-pill);
letter-spacing: 0.01em;
white-space: nowrap;
}
.status-pill .status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); display: inline-block; }
.status-pill.s-draft { background: var(--status-draft-bg); color: var(--status-draft-fg); }
.status-pill.s-sent { background: var(--status-sent-bg); color: var(--status-sent-fg); }
.status-pill.s-viewed { background: var(--status-viewed-bg); color: var(--status-viewed-fg); }
.status-pill.s-signed { background: var(--status-signed-bg); color: var(--status-signed-fg); }
.status-pill.s-completed { background: var(--status-completed-bg); color: var(--status-completed-fg); }
.status-pill.s-voided { background: var(--status-voided-bg); color: var(--status-voided-fg); }
.status-dot.s-draft { background: var(--status-draft-fg); }
.status-dot.s-sent { background: var(--status-sent-fg); }
.status-dot.s-viewed { background: var(--status-viewed-fg); }
.status-dot.s-signed { background: var(--status-signed-fg); }
.status-dot.s-completed { background: var(--status-completed-fg); }
.status-dot.s-voided { background: var(--status-voided-fg); }
.status-pill.s-draft .status-dot { background: var(--status-draft-fg); }
.status-pill.s-sent .status-dot { background: var(--status-sent-fg); }
.status-pill.s-viewed .status-dot { background: var(--status-viewed-fg); }
.status-pill.s-signed .status-dot { background: var(--status-signed-fg); }
.status-pill.s-completed .status-dot { background: var(--status-completed-fg); }
.status-pill.s-voided .status-dot { background: var(--status-voided-fg); }
/* ---- Empty state ---- */
.crm-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
text-align: center;
gap: 8px;
min-height: 380px;
}
.crm-empty-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border);
display: grid;
place-items: center;
color: var(--text-muted);
font-size: 26px;
margin-bottom: 8px;
}
.crm-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.crm-empty-sub {
font-size: 12.5px;
color: var(--text-muted);
max-width: 340px;
margin-bottom: 16px;
}
/* ---- Template grid ---- */
.template-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
padding: 18px;
}
.template-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 14px 12px;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 130px;
}
.template-card:hover {
border-color: var(--border-strong);
box-shadow: var(--shadow-active);
}
.template-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.template-card-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.3;
}
.template-cat {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
padding: 2px 7px;
border-radius: var(--radius-xs);
background: var(--surface-2);
border: 1px solid var(--border);
white-space: nowrap;
}
.template-card-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.template-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--hairline);
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
}
.template-card-vars {
display: inline-flex;
align-items: center;
gap: 4px;
}
.template-card-vars svg { color: var(--text-faint); }
/* ============================================================
MODALS
============================================================ */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 18, 14, 0.36);
backdrop-filter: blur(2px);
z-index: 100;
animation: fadeIn 140ms ease;
}
.modal-backdrop[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal {
position: fixed;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: min(520px, calc(100vw - 32px));
max-height: calc(100vh - 48px);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-pop);
z-index: 101;
display: flex;
flex-direction: column;
overflow: hidden;
animation: popIn 160ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal[hidden] { display: none; }
.modal-wide { width: min(880px, calc(100vw - 32px)); }
/* Right-side drawer variant of the modal - slides in from the edge. */
@keyframes drawerIn {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
.modal-drawer {
top: 0;
right: 0;
left: auto;
bottom: 0;
width: min(420px, calc(100vw - 32px));
max-height: 100vh;
height: 100vh;
transform: none;
border-radius: 0;
box-shadow: -16px 0 40px -20px rgba(20,18,14,0.24);
animation: drawerIn 220ms cubic-bezier(.2,.8,.2,1);
}
.modal-drawer .modal-head { padding: 18px 20px 14px; }
.modal-drawer .modal-body { padding: 18px 20px; }
.modal-drawer .modal-foot { padding: 14px 20px; }
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 14px 20px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.modal-body {
flex: 1;
overflow: auto;
padding: 18px 20px;
min-height: 0;
}
.modal-body-split {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 0;
padding: 0;
}
.modal-body-split > .form-grid { padding: 18px 20px; overflow: auto; max-height: calc(100vh - 200px); }
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
background: var(--surface-2);
border-top: 1px solid var(--border);
}
/* ---- Form grid ---- */
.form-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.form-row { display: flex; flex-direction: column; gap: 14px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) {
.form-row-split { grid-template-columns: 1fr; }
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-label {
font-size: 11.5px;
font-weight: 600;
color: var(--text-soft);
letter-spacing: 0.005em;
display: flex;
align-items: center;
gap: 6px;
}
.form-optional {
font-weight: 500;
color: var(--text-muted);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.form-help {
display: block;
margin-top: 6px;
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.5;
}
.form-hint {
font-weight: 500;
color: var(--text-muted);
font-size: 11px;
}
.form-hint code, .modal code {
font-family: var(--font-mono);
font-size: 10.5px;
background: var(--surface-3);
border-radius: 4px;
padding: 1px 5px;
color: var(--text-soft);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
font-family: inherit;
font-size: 13px;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 10px;
outline: none;
transition: border-color 100ms ease, box-shadow 100ms ease;
width: 100%;
}
.form-field textarea {
resize: vertical;
min-height: 90px;
line-height: 1.55;
}
.form-field textarea#templateBody {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.6;
min-height: 280px;
}
.form-field select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23807c73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 36px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--text);
box-shadow: 0 0 0 3px rgba(20, 18, 14, 0.06);
}
/* ---- Template editor preview pane ---- */
.template-preview-pane {
background: var(--surface-2);
border-left: 1px solid var(--border);
padding: 18px;
overflow: auto;
max-height: calc(100vh - 200px);
}
.template-preview-label {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 8px;
}
.template-preview-vars {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.template-preview-vars .var-chip {
display: inline-flex;
align-items: center;
font-size: 11px;
font-family: var(--font-mono);
background: var(--surface);
border: 1px solid var(--border);
color: var(--text-soft);
padding: 3px 8px;
border-radius: var(--radius-xs);
}
.template-preview-empty {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.5;
}
.template-preview {
font-size: 11.5px;
line-height: 1.65;
color: var(--text-soft);
white-space: pre-wrap;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
max-height: 260px;
overflow: auto;
}
.template-preview .var-token {
background: var(--accent-blue-soft);
color: var(--accent-blue);
font-family: var(--font-mono);
font-size: 10.5px;
padding: 1px 6px;
border-radius: 4px;
}
@media (max-width: 800px) {
.modal-body-split { grid-template-columns: 1fr; }
.template-preview-pane { border-left: none; border-top: 1px solid var(--border); }
}
/* ---- Wizard ---- */
.wizard-steps {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: var(--text-muted);
flex: 1;
justify-content: center;
}
.wizard-step {
padding: 3px 9px;
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.005em;
}
.wizard-step.active {
background: var(--surface-3);
color: var(--text);
font-weight: 600;
}
.wizard-step.done {
color: var(--ok);
}
.wizard-pane[hidden] { display: none; }
.wizard-search {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 12px;
margin-bottom: 12px;
width: 100%;
}
.wizard-search svg { color: var(--text-muted); }
.wizard-search input {
border: none;
background: transparent;
outline: none;
flex: 1;
font-size: 13px;
}
.wizard-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 360px;
overflow: auto;
padding: 2px;
}
.wizard-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 100ms ease, background 100ms ease;
background: var(--surface);
}
.wizard-item:hover { background: var(--surface-2); }
.wizard-item.selected {
border-color: var(--text);
background: var(--surface);
box-shadow: 0 0 0 3px rgba(20, 18, 14, 0.05);
}
.wizard-item-main {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.wizard-item-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.wizard-item-sub {
font-size: 11.5px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wizard-empty {
padding: 40px 20px;
text-align: center;
font-size: 12px;
color: var(--text-muted);
}
/* Step-2 client mode tabs (Existing client / Add new client) */
.wizard-tabs {
display: flex;
gap: 4px;
padding: 3px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 14px;
width: fit-content;
}
.wizard-tab {
padding: 6px 14px;
font: inherit;
font-size: 12.5px;
font-weight: 500;
background: transparent;
border: none;
border-radius: 6px;
color: var(--text-soft);
cursor: pointer;
transition: background 100ms ease, color 100ms ease;
}
.wizard-tab:hover { color: var(--text); }
.wizard-tab.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 2px rgba(20,18,14,0.06);
}
.wizard-client-mode[hidden] { display: none; }
/* Inline "new client" form inside the wizard */
.wizard-new-client-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.wizard-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.wizard-form-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.wizard-form-field > span {
font-size: 11.5px;
font-weight: 600;
color: var(--text-soft);
letter-spacing: 0.01em;
}
.wizard-form-field em {
color: var(--danger);
font-style: normal;
margin-left: 2px;
}
.wizard-form-field input,
.wizard-form-field textarea {
width: 100%;
padding: 8px 11px;
border: 1px solid var(--border);
border-radius: 7px;
font: inherit;
font-size: 13px;
background: var(--surface);
color: var(--text);
resize: vertical;
transition: border-color 100ms ease, box-shadow 100ms ease;
}
.wizard-form-field input:focus,
.wizard-form-field textarea:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 3px var(--accent-blue-soft);
}
.wizard-form-hint {
font-size: 11.5px;
color: var(--text-muted);
padding: 6px 10px;
background: var(--accent-blue-soft);
border-left: 2px solid var(--accent-blue);
border-radius: 4px;
}
/* Tag inside the review block header (e.g. "New client - will be saved on send") */
.wizard-review-tag {
display: inline-block;
margin-left: 8px;
padding: 1px 7px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--accent-blue);
background: var(--accent-blue-soft);
border-radius: 4px;
}
@media (max-width: 540px) {
.wizard-form-row { grid-template-columns: 1fr; }
}
.wizard-review {
display: flex;
flex-direction: column;
gap: 16px;
}
.wizard-review-block {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.wizard-review-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.wizard-review-head .btn-ghost {
padding: 3px 8px;
font-size: 11px;
border-radius: var(--radius-xs);
}
.wizard-review-body {
padding: 12px 14px;
font-size: 12.5px;
line-height: 1.6;
color: var(--text-soft);
}
.wizard-review-body .review-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
}
.wizard-review-body .review-row-label { color: var(--text-muted); }
.wizard-review-preview {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.65;
background: var(--surface-2);
border-radius: var(--radius-sm);
padding: 12px;
white-space: pre-wrap;
max-height: 220px;
overflow: auto;
}
.wizard-review-preview .var-token {
background: var(--accent-blue-soft);
color: var(--accent-blue);
padding: 1px 5px;
border-radius: 4px;
}
/* ============================================================
CRM detail rail
============================================================ */
.crm-rail {
position: fixed;
top: 0; right: 0;
height: 100vh;
width: min(420px, 100vw);
background: var(--surface);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-pop);
z-index: 90;
display: flex;
flex-direction: column;
animation: slideIn 200ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.crm-rail[hidden] { display: none; }
@keyframes slideIn {
from { transform: translateX(20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.crm-rail-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px 14px 20px;
border-bottom: 1px solid var(--border);
}
.crm-rail-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
/* Inline chip row for the lead rail Overview (source + leadStage chips). */
.rail-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.rail-chip {
display: inline-flex;
align-items: center;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 3px 9px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-soft);
text-transform: capitalize;
}
.rail-chip.tone-amber { background: #fff5e0; color: #82591a; }
.rail-chip.tone-blue { background: var(--accent-blue-soft, #e7eefc); color: var(--accent-blue, #2e5bbc); }
.rail-chip.tone-green { background: #e2f5e7; color: #1a6b3c; }
.rail-chip.tone-violet { background: #ece7fc; color: #6a44d6; }
.rail-chip.tone-neutral { background: var(--surface-2); color: var(--text-soft); }
.rail-note-body {
font-size: 13px;
color: var(--text);
line-height: 1.5;
padding: 10px 12px;
background: var(--surface-2);
border-radius: 8px;
}
/* Rich title used by the generic-mode rail. Two stacked lines: a small
uppercase "Stage NN" eyebrow and the stage name beneath it. Sits inside
the rail header alongside the X close button. */
.crm-rail-title-rich {
display: flex;
flex-direction: column;
gap: 2px;
white-space: normal;
}
.crm-rail-title-badge {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
font-family: var(--font-mono);
}
.crm-rail-title-name {
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.15;
}
.crm-rail-body {
flex: 1;
overflow: auto;
padding: 0 20px 32px;
}
.crm-rail-head-actions {
display: flex;
align-items: center;
gap: 4px;
}
.rail-menu { position: relative; }
.rail-menu-pop {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 180px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 18, 32, 0.10);
padding: 6px;
z-index: 60;
display: flex;
flex-direction: column;
gap: 1px;
}
.rail-menu-pop[hidden] { display: none; }
.rail-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: transparent;
border: 0;
border-radius: 6px;
font: inherit;
font-size: 13px;
color: var(--text);
text-align: left;
cursor: pointer;
}
.rail-menu-item:hover { background: var(--surface-2); }
.rail-menu-item.is-danger { color: var(--err, #c0392b); }
.rail-menu-item.is-danger:hover { background: rgba(192, 57, 43, 0.06); }
.rail-menu-sep {
height: 1px;
background: var(--hairline, var(--border));
margin: 4px 2px;
}
.rail-section { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
/* ============================================================
RUNBOOK FLOW - polished trigger map
----------------------------------------------------------------
Vertical chain of parent action nodes (.rb-step-parent), each
with an optional child verification node (.rb-step-child) that
branches off to the right via an L-wire. The vertical connector
between rows + the horizontal wire to the child form the L
visually. Status indicator fills green when done, empty when
pending. Polished card-style nodes - rounded borders, subtle
shadow on hover, smooth state transitions.
============================================================ */
/* ============================================================
FLOW STAGE PICKER - the dropdown at the top of every Flow tab.
Lets the user move the active person to a different stage (or
switch the viewed stage in the generic rail). Sits above the
trigger header and the flow.
============================================================ */
/* Stage picker at the top of the Flow tab - compact, modern button-shaped
select pushed to the right edge of the rail. The select takes only its
natural width (sized to the longest stage label, "Contracting & Payment"),
so it doesn't stretch full-width across the rail. */
.flow-stage-picker {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
margin-bottom: 14px;
justify-content: flex-end;
}
.flow-stage-picker-eyebrow {
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
flex-shrink: 0;
/* Push the eyebrow to the left while the select sits at the right. */
margin-right: auto;
}
.flow-stage-picker-select {
/* Natural content width - browsers size native selects to the longest
option text by default when flex-grow/width:1 aren't set. */
flex: 0 0 auto;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 5px 26px 5px 10px;
font: inherit;
font-size: 11.5px;
font-weight: 600;
color: var(--text);
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: 7px;
cursor: pointer;
outline: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23807c73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 9px center;
transition: border-color 100ms ease, box-shadow 100ms ease, background-color 100ms ease;
}
.flow-stage-picker-select:hover {
border-color: var(--text-muted);
background-color: var(--surface-2);
}
.flow-stage-picker-select:focus {
border-color: var(--text);
box-shadow: 0 0 0 3px rgba(20, 18, 14, 0.06);
}
/* ============================================================
FLOW ITEMS - runbook flow list
----------------------------------------------------------------
Used in the side rail to render an action chain: trigger at the
top, parents stacked below, optional smaller children indented
right with an L-shaped wire. Continuous hairline runs through
the icon column. Done state fills the tile solid green.
============================================================ */
.flow-items {
position: relative;
display: flex;
flex-direction: column;
padding: 4px 0 2px;
}
/* Continuous vertical wire down the centre of the icon column. Anchored
tile-centre to tile-centre so it reads as one clean rail; each tile sits
on z-index:1 to mask the wire crossing behind it. */
.flow-items::before {
content: '';
position: absolute;
left: 15px; /* centre of 30px tile column */
top: 19px; /* centre of first tile */
bottom: 19px; /* centre of last tile */
border-left: 1px solid var(--border);
pointer-events: none;
}
.flow-item {
position: relative;
display: grid;
grid-template-columns: 30px 1fr;
gap: 12px;
padding: 5px 0;
align-items: start;
}
.flow-items > .flow-item:first-child { padding-top: 2px; }
.flow-items > .flow-item:last-child { padding-bottom: 2px; }
/* Circular click-target. Pending = white fill, green outline ring, faded
icon inside - reads as a clickable "mark done" button. Fired = solid
green fill with a crisp white icon. Same column position in both states
so the row doesn't shift when a step is toggled. */
.flow-item-icon {
position: relative;
z-index: 1;
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--surface);
color: rgba(22, 163, 74, 0.55);
border: 1.5px solid #16a34a;
padding: 0;
cursor: pointer;
font: inherit;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.flow-item-icon:hover {
color: #16a34a;
background: rgba(22, 163, 74, 0.06);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.10);
}
.flow-item-icon:focus-visible { outline: 2px solid var(--accent-blue, #3b6eff); outline-offset: 2px; }
.flow-item-icon svg { width: 14px; height: 14px; }
.flow-item.is-trigger .flow-item-title {
font-weight: 700;
}
/* Fired: solid green fill + white icon at full opacity. */
.flow-item-icon.is-fired {
background: #16a34a;
color: #fff;
border-color: #16a34a;
}
.flow-item-icon.is-fired:hover {
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.flow-item-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
/* Fixed right column reserves a consistent slot for the stamp so clicking a
row to toggle done state doesn't shift the title left/right. min-height
keeps the head's vertical size constant whether the 2-line stamp is
rendered or not - title stays centered against the icon in both states. */
.flow-item-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
min-width: 0;
min-height: 30px;
}
.flow-item-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.3;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flow-item-meta {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.3;
}
/* Chevron toggle at the far right of each flow item's head. Rotates when
the row is expanded. Quiet hover state - it's a secondary affordance. */
.flow-item-chevron {
width: 22px;
height: 22px;
display: grid;
place-items: center;
border: 0;
padding: 0;
background: transparent;
color: var(--text-muted);
cursor: pointer;
border-radius: 4px;
flex-shrink: 0;
transition: background 100ms ease, transform 200ms ease, color 100ms ease;
}
.flow-item-chevron:hover { background: var(--surface-2); color: var(--text); }
.flow-item.is-expanded .flow-item-chevron { transform: rotate(180deg); }
/* Detail chips revealed when a flow item is expanded. Small pill-style
capsules holding metadata (date, time, etc.) - sit below the title in a
wrappable row. */
.flow-item-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.flow-item-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 8px 4px 7px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.flow-item-chip svg { flex-shrink: 0; opacity: 0.85; }
.flow-item-chip-muted {
font-style: italic;
text-transform: none;
letter-spacing: 0;
color: var(--text-soft);
}
/* Single-line "Today · 7:43 PM" stamp on the right of each done step.
Sentence case + soft color reads more humane than the prior stacked
uppercase pair, and the row stays single-height whether stamped or not. */
.flow-item-stamp {
justify-self: end;
font-size: 11.5px;
font-weight: 500;
color: var(--text-soft);
font-variant-numeric: tabular-nums;
line-height: 1.3;
white-space: nowrap;
flex-shrink: 0;
}
/* Tiny "auto" / "manual" tag at the top right of each flow item. Tells the
user at a glance whether the system handles the step or someone needs to
do it. Lower visual weight than the title - this is a quiet meta label. */
.flow-item-mode {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--surface-2);
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
line-height: 1.4;
}
.flow-item-mode.is-manual {
color: #82591a;
background: #fff1d8;
}
/* Per-step time row: absolute stamp ("Friday 3:12 PM") on the left, relative
("2 hours ago") on the right. Modeled after the reference notification
cards Anna shared. Sits between the title row and the type-meta line. */
.flow-item-time {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 2px;
font-size: 11.5px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
.flow-item-when {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.flow-item-ago {
white-space: nowrap;
flex-shrink: 0;
}
/* Status pills - reuse the same colour palette as .rb-status for
consistency across all flow surfaces. */
.flow-item-status {
font-size: 10.5px;
font-weight: 600;
padding: 2px 9px;
border-radius: 6px;
letter-spacing: 0.01em;
white-space: nowrap;
flex-shrink: 0;
}
.flow-item-status-pending {
background: var(--surface-2);
color: var(--text-muted);
}
.flow-item-status-in-progress {
background: rgba(59, 110, 255, 0.12);
color: var(--accent-blue, #3b6eff);
}
.flow-item-status-completed {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.flow-item-status-auto {
background: rgba(59, 110, 255, 0.10);
color: var(--accent-blue, #3b6eff);
}
.flow-item-status-manual {
background: var(--surface-2);
color: var(--text-soft);
}
/* Nested sub-actions - clean indented list under the parent's body. One
continuous vertical accent bar runs down the left of the whole sub-item
group (not per row), matching the Ark UI accordion content pattern.
No icon, no L-wire - just an indented, clickable row. */
.flow-item-substeps {
margin-top: 10px;
display: flex;
flex-direction: column;
/* The accent bar lives on the container so it's one continuous line
regardless of how many children there are. Thin black hairline. */
border-left: 1px solid var(--text);
padding-left: 0;
}
.flow-item-substep {
/* Clickable row. Resets default button chrome so it reads as plain text
with an affordance on hover. Title + optional right-aligned stamp. */
appearance: none;
background: transparent;
border: 0;
padding: 6px 10px 6px 14px;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
cursor: pointer;
font: inherit;
color: var(--text);
border-radius: 0 6px 6px 0;
transition: background 140ms ease, color 140ms ease;
min-width: 0;
}
.flow-item-substep-stamp {
margin-left: auto;
flex-shrink: 0;
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
white-space: nowrap;
}
.flow-item-substep.is-done .flow-item-substep-stamp {
color: var(--text-faint);
}
.flow-item-substep + .flow-item-substep { margin-top: 1px; }
.flow-item-substep:hover {
background: color-mix(in srgb, var(--accent-blue, #3b6eff) 5%, transparent);
}
.flow-item-substep:focus-visible {
outline: 2px solid var(--accent-blue, #3b6eff);
outline-offset: -2px;
}
/* Done state for substeps. Replaces the old strikethrough treatment with
a tiny green outline ring + soft green wash on the row - reads as
"completed" without obscuring the title. The title color stays normal so
the row remains scannable; the stamp keeps its existing muted tone. */
.flow-item-substep.is-done {
background: rgba(22, 163, 74, 0.05);
box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.32);
border-radius: 6px;
}
.flow-item-substep.is-done .flow-item-substep-title {
color: var(--text);
text-decoration: none;
}
.flow-item-substep-title {
font-size: 13px;
font-weight: 500;
color: inherit;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.005em;
min-width: 0;
}
/* The flow itself: stacked items with even spacing. No outer card chrome -
the items breathe directly on the rail's background. */
.rb-flow {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px 0;
}
/* An item is the parent action row + any indented sub-actions. Use article
for semantics + an "is-{status}" class so done items can pick up the
strikethrough treatment from a single rule. */
.rb-item {
display: flex;
flex-direction: column;
gap: 0;
}
/* Parent row: small tick on the left, label in the middle, right-aligned
status pill. Grid columns: tick / label (flex) / status pill (auto). */
.rb-item-row {
display: grid;
grid-template-columns: 12px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 0;
background: transparent;
border: 0;
border-radius: 6px;
font: inherit;
color: var(--text);
text-align: left;
cursor: default;
width: 100%;
transition: background 120ms ease;
}
button.rb-item-row { cursor: pointer; }
button.rb-item-row:hover:not([disabled]) {
background: var(--surface-2);
}
button.rb-item-row[disabled] {
cursor: not-allowed;
}
/* Label: clean medium weight, truncates if too long. Done items get
strikethrough + muted color via the .is-done class on .rb-item. */
.rb-label {
font-size: 13px;
font-weight: 500;
color: var(--text);
letter-spacing: -0.005em;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rb-item.is-done > .rb-item-row .rb-label,
.rb-substep.is-done .rb-label {
color: var(--text-muted);
text-decoration: line-through;
}
/* Status pills on the right. Subtle tinted background + matching text
color for each state. Lowercase for the soft "in-progress" / "pending"
feel from the reference. */
.rb-status {
font-size: 10.5px;
font-weight: 600;
padding: 2px 9px;
border-radius: 6px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.rb-status-pending {
background: var(--surface-2);
color: var(--text-muted);
}
.rb-status-in-progress {
background: rgba(59, 110, 255, 0.12);
color: var(--accent-blue, #3b6eff);
}
.rb-status-completed {
background: rgba(22, 163, 74, 0.12);
color: #16a34a;
}
.rb-status-auto {
background: rgba(59, 110, 255, 0.10);
color: var(--accent-blue, #3b6eff);
}
.rb-status-manual {
background: var(--surface-2);
color: var(--text-soft);
}
/* PLANNED (un-wired) steps: same layout, just grayed + inert. Renders for the
lifecycle steps we haven't built yet so they read as a blueprint, never as
something live. Flip a step live by adding its id to WIRED_STEPS (app.js). */
.rb-item.is-planned {
opacity: 0.5;
filter: grayscale(1);
}
.rb-item.is-planned .rb-item-row {
cursor: default;
}
.rb-substep.is-planned {
opacity: 0.5;
filter: grayscale(1);
cursor: default;
}
.rb-status-planned {
background: var(--surface-2);
color: var(--text-faint, #a8a39a);
}
/* TICKS - small status dots on the left. 10px circles, one of three
states: pending (filled solid grey), in-progress (dashed blue outline),
done (filled green with checkmark). Pending is a solid fill - no
outline - so the row reads as "dot · title" cleanly inline. */
.rb-tick {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-grid;
place-items: center;
flex-shrink: 0;
background: transparent;
transition: background 160ms ease, border-color 160ms ease;
box-sizing: border-box;
}
.rb-tick-pending {
background: var(--border-strong, #c9c4b8);
border: 0;
}
.rb-tick-in-progress {
width: 12px;
height: 12px;
border: 1.4px dashed var(--accent-blue, #3b6eff);
background: transparent;
}
.rb-tick-done {
width: 12px;
height: 12px;
border: 1.4px solid #16a34a;
background: #16a34a;
color: #fff;
font-size: 8px;
font-weight: 800;
line-height: 1;
}
.rb-tick-done::after { content: '✓'; }
/* INDENTED SUB-ACTIONS - stack of rows under a parent, connected by a
thin vertical dashed line on the left. Each sub row has its own small
tick + label, no status pill. */
.rb-substeps {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding: 2px 0 6px 26px; /* 26px indent past the parent's tick */
margin-left: 0;
}
.rb-substeps::before {
content: '';
position: absolute;
left: 6px; /* aligns visually with parent tick center */
top: 2px;
bottom: 8px;
width: 0;
border-left: 1px dashed var(--border-strong, #c9c4b8);
opacity: 0.7;
}
.rb-substep {
display: grid;
grid-template-columns: 12px 1fr;
align-items: center;
gap: 10px;
padding: 5px 0;
background: transparent;
border: 0;
font: inherit;
color: var(--text);
text-align: left;
cursor: default;
width: 100%;
border-radius: 6px;
transition: background 120ms ease;
}
button.rb-substep { cursor: pointer; }
button.rb-substep:hover:not([disabled]) { background: var(--surface-2); }
button.rb-substep[disabled] { cursor: not-allowed; }
.rb-substep .rb-label {
font-size: 12.5px;
font-weight: 400;
color: var(--text-soft);
}
/* Disposition buttons (Sold / Not sold) sit below the flow. Keep their
existing styles - they live in .runbook-disposition. */
/* ============================================================
Legacy runbook list styles - retained below for any panels that
still reference .runbook-step / .runbook-steps directly.
============================================================ */
/* Runbook is now a chrome-free vertical list of action items. No outer card,
no title, no blurb. Each row is a thin-divider task line with a square
checkbox on the left, label in the middle, meta on the right. */
.runbook-section {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
gap: 0;
margin-bottom: 22px;
}
.runbook-blurb { display: none; }
.runbook-steps {
display: flex;
flex-direction: column;
border-top: 1px solid var(--hairline, rgba(0,0,0,0.06));
}
.runbook-step {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 14px;
padding: 12px 4px;
border: 0;
border-bottom: 1px solid var(--hairline, rgba(0,0,0,0.06));
border-radius: 0;
background: transparent;
text-align: left;
cursor: pointer;
font: inherit;
color: var(--text);
transition: background 80ms ease;
}
.runbook-step:hover { background: var(--surface-2); }
.runbook-step:last-child { border-bottom: 0; }
.runbook-step[disabled] { cursor: default; }
.runbook-step[disabled]:hover { background: transparent; }
.runbook-step-tick {
width: 20px;
height: 20px;
border: 1.6px solid var(--border-strong, var(--border));
border-radius: 5px;
display: grid;
place-items: center;
font-size: 0;
line-height: 1;
color: transparent;
background: transparent;
transition: background 100ms ease, border-color 100ms ease, color 100ms ease, font-size 100ms ease;
}
.runbook-step:hover .runbook-step-tick { border-color: var(--text-muted); }
.runbook-step.is-done .runbook-step-tick {
background: #1a6b3c;
border-color: #1a6b3c;
color: #fff;
font-size: 12px;
}
.runbook-step-label {
font-size: 13.5px;
font-weight: 500;
color: var(--text);
line-height: 1.4;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.runbook-step.is-done .runbook-step-label {
text-decoration: line-through;
text-decoration-color: var(--text-faint);
color: var(--text-muted);
}
.runbook-step-meta {
font-size: 11px;
color: var(--text-muted);
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Trigger header that sits above the action items inside the Actions tab.
Eyebrow label + dashed-circle dot + the event label that fires this list. */
.runbook-trigger {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 0 14px;
border-bottom: 1px solid var(--hairline);
margin-bottom: 10px;
}
.runbook-trigger-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-faint);
}
.runbook-trigger-row {
display: flex;
align-items: center;
gap: 9px;
}
.runbook-trigger-dot {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent-blue);
flex-shrink: 0;
}
.runbook-trigger-dot.is-fired {
width: 12px;
height: 12px;
border-radius: 50%;
background: #1a6b3c;
box-shadow: 0 0 0 3px rgba(26, 107, 60, 0.15);
}
.runbook-trigger-value {
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
text-transform: capitalize;
}
.runbook-trigger-time {
margin-left: auto;
font-size: 11px;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.runbook-flow-label {
display: flex;
align-items: baseline;
gap: 12px;
padding: 16px 0 12px;
}
.runbook-flow-label-title {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.runbook-flow-label-count {
margin-left: auto;
font-size: 11px;
font-weight: 500;
color: var(--text-soft);
font-variant-numeric: tabular-nums;
}
/* Lead-stage flow card. Wraps the flow-items list in a rounded, bordered
surface with hairline dividers between rows - inspired by the Ark UI
accordion treatment but with no expand/collapse affordance. Scoped via
.lead-stage-flow-card so other rails using .flow-items keep the bare
floating-rail look. */
.lead-stage-flow {
margin-bottom: 22px;
}
.lead-stage-flow-card {
border: 1px solid var(--border);
border-radius: 12px;
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
overflow: hidden;
}
.lead-stage-flow-card .flow-items {
padding: 0;
}
/* Card variant has hairline row dividers, so the continuous vertical rail
would be redundant - hide it. */
.lead-stage-flow-card .flow-items::before {
display: none;
}
.lead-stage-flow-card .flow-item {
padding: 14px 16px;
border-bottom: 1px solid var(--border);
transition: background 180ms ease;
}
.lead-stage-flow-card .flow-items > .flow-item:first-child {
padding-top: 14px;
}
.lead-stage-flow-card .flow-items > .flow-item:last-child {
padding-bottom: 14px;
border-bottom: 0;
}
.lead-stage-flow-card .flow-item:hover {
background: linear-gradient(90deg, rgba(22, 163, 74, 0.05), rgba(22, 163, 74, 0) 70%);
}
/* Generic (no-client) step rows - flat, non-interactive variant of the
action item used in the rail's "Actions" tab before a card is clicked. */
.runbook-step.is-generic { cursor: default; }
.runbook-step.is-generic:hover { background: transparent; }
.runbook-step.is-generic .runbook-step-tick { border-style: dashed; }
/* Generic empty state - prompts the user to click a card. Big centered icon
+ title + subtitle. */
.rail-generic-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 72px 24px 40px;
gap: 8px;
}
.rail-generic-empty-icon {
color: var(--text-faint);
margin-bottom: 4px;
}
.rail-generic-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.rail-generic-empty-sub {
font-size: 12.5px;
color: var(--text-soft);
line-height: 1.5;
max-width: 280px;
}
.runbook-disposition {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding-top: 8px;
border-top: 1px dashed var(--border);
margin-top: 4px;
}
.runbook-dispose {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 10px;
border-radius: 7px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.runbook-dispose-yes {
background: var(--accent-blue);
border-color: var(--accent-blue);
color: #fff;
}
.runbook-dispose-yes:hover { filter: brightness(0.95); }
.runbook-dispose-no:hover {
background: rgba(180, 40, 40, 0.06);
border-color: #b53737;
color: #b53737;
}
/* Pre-call questionnaire (lead-stage rail). Placeholder shape until the
real send/receive flow is wired. */
.questionnaire-section { gap: 10px; }
.questionnaire-section .rail-section-label {
display: flex;
align-items: center;
justify-content: space-between;
}
.rail-section-status {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
padding: 2px 8px;
background: var(--surface-2);
border-radius: 999px;
}
.rail-section-status.is-sent { color: var(--accent-blue); background: var(--accent-blue-soft); }
.rail-section-status.is-answered { color: #1a6b3c; background: rgba(26, 107, 60, 0.1); }
.questionnaire-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 8px;
}
.questionnaire-q {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12.5px;
color: var(--text);
line-height: 1.4;
}
.questionnaire-q-tick {
color: var(--text-muted);
font-size: 13px;
line-height: 1;
width: 14px;
flex-shrink: 0;
text-align: center;
}
/* Sticky disposition footer for lead-stage rail. Anchored at the bottom of
the scroll container with a top border so it visually peels off the panel. */
/* Stage sub-tabs inside the lead rail's Overview panel. Horizontal strip of
chip-style pills, one per pipeline stage. Scrolls horizontally on narrow
rails so all 6 stages remain reachable without truncating labels. */
.lead-stage-history { margin-top: 8px; }
.lead-stage-subtabs {
display: flex;
gap: 4px;
margin: 6px -4px 12px;
padding: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.lead-stage-subtabs::-webkit-scrollbar { display: none; }
.lead-stage-subtab {
flex-shrink: 0;
padding: 6px 11px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.lead-stage-subtab:hover {
color: var(--text-soft);
border-color: var(--border-strong);
}
.lead-stage-subtab.is-active {
background: var(--text);
color: var(--surface);
border-color: var(--text);
font-weight: 600;
}
/* Past stages - the person has already cleared these. A soft, modern green
wash inside the pill (same "completed" tokens as the receipt) says "done"
without shouting, and stays quieter than the current stage, which carries
the green ring. Scoped to :not(.is-active) so the black selected-tab fill
always wins when a done stage is the one being viewed (mirrors is-current).
Tab stays clickable for history review. */
.lead-stage-subtab.is-past:not(.is-active) {
color: var(--status-completed-fg, #0d5e35);
background: color-mix(in srgb, var(--status-completed-bg, #c4e9d3) 45%, var(--surface));
border-color: color-mix(in srgb, var(--status-completed-fg, #0d5e35) 18%, var(--border));
}
.lead-stage-subtab.is-past:not(.is-active):hover {
color: var(--status-completed-fg, #0d5e35);
background: color-mix(in srgb, var(--status-completed-bg, #c4e9d3) 65%, var(--surface));
border-color: color-mix(in srgb, var(--status-completed-fg, #0d5e35) 30%, var(--border));
}
/* Current stage - where the person actually sits today. Inset green ring
+ soft tint, persists regardless of which tab the user has clicked. The
bolder weight makes the live stage scannable from the strip. */
.lead-stage-subtab.is-current:not(.is-active) {
box-shadow: inset 0 0 0 1.5px #16a34a;
background: rgba(22, 163, 74, 0.05);
color: var(--text);
font-weight: 600;
}
.lead-stage-subtab.is-current:not(.is-active):hover {
background: rgba(22, 163, 74, 0.09);
}
/* When the selected tab also happens to be the current stage, lift the
ring outside the filled selection so the green "you are here" cue still
reads on top of the black fill. */
.lead-stage-subtab.is-active.is-current {
box-shadow: 0 0 0 1.5px #16a34a;
}
/* Nav-only tabs (Delivery, Ongoing Management): clicking these doesn't change
the Stage Status panel - it navigates away to that stage's pipeline view.
Visually we keep them in the strip for continuity but signal the difference
with a subtle outward arrow glyph and a lighter dashed border. */
.lead-stage-subtab.is-nav-only {
display: inline-flex;
align-items: center;
gap: 5px;
border-style: dashed;
color: var(--text-muted);
}
.lead-stage-subtab.is-nav-only:hover {
background: var(--surface-2);
color: var(--text);
border-style: solid;
}
.lead-stage-subtab-nav-arrow {
opacity: 0.65;
flex-shrink: 0;
}
.lead-stage-subtab.is-nav-only:hover .lead-stage-subtab-nav-arrow {
opacity: 1;
}
/* Locked / no-activity state for stages the lead hasn't reached yet. Sits
inside the .lead-stage-subtab-panel so the sub-tab strip stays visible. */
.lead-stage-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px 16px;
border: 1px dashed var(--border);
border-radius: 12px;
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
text-align: center;
}
.lead-stage-empty-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--surface-2);
color: var(--text-muted);
}
.lead-stage-empty-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-soft);
letter-spacing: -0.005em;
}
.lead-stage-empty-body {
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
max-width: 260px;
}
.lead-dispose-footer {
position: sticky;
bottom: 0;
z-index: 2;
display: flex;
gap: 8px;
padding: 12px 20px;
margin: 16px -20px 0;
/* Frosted glass instead of a solid bar: list rows scrolling underneath blur
out (still faintly visible, never readable) rather than showing through
sharp. The -webkit- prefix keeps Safari happy. */
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
border-top: 1px solid var(--border);
box-shadow: 0 -8px 18px -10px rgba(15, 18, 32, 0.14);
}
/* The scroll container (.crm-rail-body) has 32px of bottom padding, which makes
a `sticky; bottom:0` bar pin ~32px ABOVE the true bottom - leaving a strip
below the buttons where the next row bled through. This apron extends the same
frosted glass down across that strip so nothing readable peeks under the bar.
Buttons stay exactly where they are. */
.lead-dispose-footer::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 34px;
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(16px) saturate(180%);
backdrop-filter: blur(16px) saturate(180%);
}
.lead-dispose-footer .lead-dispose {
flex: 1 1 0;
}
.lead-dispose {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.lead-dispose:active { transform: translateY(1px); }
/* Primary (Sold): solid black, white text - matches the +New lead CTA. */
.lead-dispose-yes {
background: var(--text, #1a1a1a);
border-color: var(--text, #1a1a1a);
color: #fff;
flex-grow: 1.4; /* visually weight the positive action a hair larger */
}
.lead-dispose-yes:hover {
background: #000;
border-color: #000;
}
.lead-dispose-yes svg { stroke: #fff; }
/* Secondary (Not sold): ghost - subtle border, muted text, only hints
destructive on hover (light red border + text) so it never competes
visually with the primary CTA. */
.lead-dispose-no {
background: transparent;
border-color: var(--border, rgba(0,0,0,0.12));
color: var(--text-muted, #6b6b6b);
}
.lead-dispose-no:hover {
background: rgba(180, 40, 40, 0.04);
border-color: rgba(180, 40, 40, 0.45);
color: #b53737;
}
.lead-dispose-no svg { stroke: currentColor; opacity: 0.85; }
/* Auto-promote variant - the system handled (or is about to handle) the
promotion because the discovery call was booked by the bot. Blue tones
set it apart from the green manual-action variant; the bot glyph next to
the chevron makes the source of the action legible at a glance. */
.lead-dispose-auto {
background: var(--accent-blue-soft, #e0eaff);
border-color: rgba(37, 99, 235, 0.35);
color: var(--accent-blue, #2563eb);
}
.lead-dispose-auto:hover {
background: #d3deff;
border-color: var(--accent-blue, #2563eb);
}
.lead-dispose-bot {
opacity: 0.85;
flex-shrink: 0;
}
.lead-dispose-chevron {
flex-shrink: 0;
transition: transform 140ms ease;
}
.lead-dispose:hover .lead-dispose-chevron {
transform: translateX(2px);
}
.rail-section-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
}
.rail-kv {
display: grid;
grid-template-columns: 104px 1fr;
gap: 6px 12px;
font-size: 12.5px;
}
.rail-kv dt { color: var(--text-muted); }
.rail-kv dd { color: var(--text); margin: 0; word-break: break-word; }
.rail-kv dd a { color: var(--accent-blue); }
.rail-hero {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.rail-hero .client-avatar {
width: 44px; height: 44px;
font-size: 14px;
}
.rail-hero-text { display: flex; flex-direction: column; min-width: 0; }
.rail-hero-name { font-size: 15px; font-weight: 600; color: var(--text); }
.rail-hero-sub { font-size: 12px; color: var(--text-muted); }
.rail-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 20px;
}
.rail-actions .btn-primary {
flex: 1 1 100%;
justify-content: center;
}
.rail-actions .btn-ghost {
flex: 1 1 calc(50% - 3px);
min-width: 0;
justify-content: center;
font-size: 12px;
padding: 7px 10px;
white-space: nowrap;
}
/* Equal-width 3-button action row (Edit / New / Delete) inside the client rail */
.rail-actions-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin-bottom: 18px;
}
.rail-action {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.003em;
color: var(--text-soft);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 8px 10px;
min-height: 60px;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 100ms ease;
cursor: pointer;
text-align: center;
}
.rail-action:hover {
background: var(--surface-2);
border-color: var(--border-strong);
color: var(--text);
}
.rail-action svg { color: var(--text-muted); transition: color 120ms ease; }
.rail-action:hover svg { color: var(--text); }
.rail-action:active { transform: translateY(0.5px); }
.rail-action.rail-action-primary {
background: var(--text);
color: var(--surface);
border-color: var(--text);
}
.rail-action.rail-action-primary svg { color: var(--surface); }
.rail-action.rail-action-primary:hover {
background: #2a2620;
border-color: #2a2620;
color: var(--surface);
}
.rail-action.rail-action-primary:hover svg { color: var(--surface); }
.rail-action.rail-action-danger:hover {
background: var(--status-voided-bg);
border-color: var(--status-voided-bg);
color: var(--status-voided-fg);
}
.rail-action.rail-action-danger:hover svg { color: var(--status-voided-fg); }
/* Inline (single-row) variant - used in empty states */
.rail-action.rail-action-primary[style*="margin-top"] {
flex-direction: row;
min-height: 0;
padding: 7px 12px;
}
/* Tabs in the rail (reuse detail-tabs aesthetic with rail-friendly spacing) */
.rail-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin: 0 -20px 18px;
padding: 4px 16px 0;
position: sticky;
top: 0;
background: var(--surface);
z-index: 2;
}
.rail-tab {
padding: 10px 12px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
position: relative;
transition: color 100ms ease;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.rail-tab:hover { color: var(--text-soft); }
.rail-tab.active { color: var(--text); font-weight: 600; }
.rail-tab.active::after {
content: "";
position: absolute;
left: 8px; right: 8px; bottom: -1px;
height: 2px;
background: var(--text);
border-radius: 2px 2px 0 0;
}
.rail-tab .tab-count {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-faint);
font-weight: 500;
padding: 1px 5px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 4px;
}
.rail-tab.active .tab-count {
color: var(--text-soft);
background: var(--surface);
}
.rail-tab-panel { display: flex; flex-direction: column; }
/* At-a-glance progress inside Overview tab */
.rail-progress-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 4px;
}
.rail-progress-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
}
.rail-progress-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.rail-progress-head span {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.rail-progress-head strong {
font-size: 18px;
line-height: 1;
color: var(--text);
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
}
.rail-progress-track {
height: 7px;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill, 999px);
}
.rail-progress-track span {
display: block;
height: 100%;
min-width: 0;
background: linear-gradient(90deg, var(--accent-green, #5fb36a), var(--accent-blue, #4f8cff));
border-radius: inherit;
}
.rail-notes {
font-size: 12.5px;
color: var(--text-soft);
line-height: 1.6;
white-space: pre-wrap;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 10px 12px;
}
.rail-avatar-story,
.client-avatar-story-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-left: 3px solid var(--avatar-tone, var(--text-faint));
border-radius: var(--radius);
padding: 12px;
}
.client-avatar-story-card { background: var(--surface); }
.avatar-tone-amber { --avatar-tone: #D97706; }
.avatar-tone-teal { --avatar-tone: #0D9488; }
.avatar-tone-purple { --avatar-tone: #8B5CF6; }
.avatar-tone-blue { --avatar-tone: #1F6FEB; }
.avatar-tone-green { --avatar-tone: #16A34A; }
.avatar-tone-neutral { --avatar-tone: var(--text-faint); }
.avatar-story-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.avatar-story-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.avatar-story-type {
margin-top: 2px;
font-size: 14px;
font-weight: 700;
color: var(--text);
letter-spacing: 0;
}
.avatar-story-chip {
max-width: 46%;
padding: 4px 7px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 7px;
color: var(--text-muted);
font-size: 11px;
line-height: 1.35;
text-align: right;
}
.client-avatar-story-card .avatar-story-chip { background: var(--surface-2); }
.avatar-story-type-row {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.avatar-story-mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 28px;
height: 24px;
padding: 0 7px;
border-radius: 7px;
background: var(--avatar-tone, var(--text-faint));
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.02em;
}
.avatar-story-body {
color: var(--text-soft);
font-size: 12.5px;
line-height: 1.6;
white-space: pre-wrap;
}
.avatar-story-body.is-empty {
color: var(--text-faint);
font-style: italic;
}
.avatar-story-category {
margin-top: 3px;
color: var(--text-muted);
font-size: 11px;
}
.avatar-preset-picker {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.avatar-type-only .avatar-preset-picker {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.avatar-type-only {
display: flex;
flex-direction: column;
gap: 10px;
}
.avatar-preset-picker span {
color: var(--text-muted);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.avatar-preset-picker select {
appearance: none;
-webkit-appearance: none;
width: 100%;
min-height: 34px;
padding: 0 32px 0 10px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface) url("data:image/svg+xml;utf8,") right 10px center / 12px no-repeat;
color: var(--text);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.client-avatar-story-card .avatar-preset-picker select {
background-color: var(--surface-2);
}
.avatar-selected-brief {
position: relative;
padding: 12px 14px 12px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--surface);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.avatar-selected-head {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding-right: 130px;
}
.avatar-selected-mark {
flex-shrink: 0;
width: 25px;
height: 25px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--avatar-tone) 11%, var(--surface));
color: var(--avatar-tone);
font-size: 9.5px;
font-weight: 800;
line-height: 1;
border: 1px solid color-mix(in srgb, var(--avatar-tone) 24%, var(--border));
}
.avatar-selected-title {
color: var(--text);
font-size: 13.5px;
font-weight: 750;
line-height: 1.22;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.avatar-selected-brief p {
margin: 8px 0 0;
color: var(--text-soft);
font-size: 12px;
line-height: 1.45;
}
.avatar-selected-open {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
font: inherit;
font-size: 11px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
white-space: nowrap;
}
.avatar-selected-open:hover {
background: var(--surface-2);
color: var(--text);
border-color: color-mix(in srgb, var(--text) 25%, var(--border));
}
.avatar-selected-open svg {
flex-shrink: 0;
opacity: 0.85;
}
.avatar-selected-brief-modal {
margin: 0 0 2px;
background: var(--surface-2);
}
.rail-tab-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 16px;
text-align: center;
gap: 4px;
}
.rail-tab-empty-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
}
.rail-tab-empty-sub {
font-size: 12px;
color: var(--text-muted);
max-width: 280px;
line-height: 1.5;
}
.rail-list {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.contract-rail-list {
gap: 10px;
border: 0;
border-radius: 0;
overflow: visible;
}
.rail-contract-card {
background: var(--surface);
border-bottom: 1px solid var(--hairline);
}
.contract-rail-list .rail-contract-card {
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.rail-contract-card:last-child { border-bottom: none; }
.rail-contract-card .rail-list-item { border-bottom: none; }
.rail-contract-head {
align-items: flex-start;
}
.rail-list-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 12px;
border-bottom: 1px solid var(--hairline);
font-size: 12.5px;
cursor: pointer;
transition: background 100ms ease;
}
.rail-list-item:last-child { border-bottom: none; }
.rail-list-item:hover { background: var(--surface-2); }
.rail-list-item .rail-list-title { color: var(--text); font-weight: 500; }
.rail-list-item .rail-list-sub { color: var(--text-muted); font-size: 11.5px; }
.rail-empty {
padding: 20px 14px;
text-align: center;
font-size: 12px;
color: var(--text-muted);
background: var(--surface-2);
border-radius: var(--radius);
}
/* ---- Audit timeline ---- */
.timeline {
position: relative;
padding-left: 18px;
}
.timeline::before {
content: '';
position: absolute;
left: 5px;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--border);
}
.timeline-item {
position: relative;
padding: 4px 0 12px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -16px;
top: 8px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--text-muted);
}
.timeline-item.event-signed::before,
.timeline-item.event-countersigned::before,
.timeline-item.event-completed::before { border-color: var(--ok); }
.timeline-item.event-sent::before { border-color: var(--accent-blue); }
.timeline-item.event-viewed::before { border-color: var(--warn); }
.timeline-item.event-voided::before { border-color: var(--danger); }
.timeline-title {
font-size: 12.5px;
font-weight: 600;
color: var(--text);
}
.timeline-meta {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 1px;
}
/* Variable highlighter token (used in preview rendering) */
.var-token {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--accent-blue-soft);
color: var(--accent-blue);
padding: 1px 5px;
border-radius: 4px;
}
@media (max-width: 560px) {
.crm-search { min-width: 0; flex: 1; }
.crm-toolbar { gap: 8px; }
.crm-meta-count { display: none; }
.modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
.wizard-steps { display: none; }
}
/* ============================================================
CONTRACT ROW ACTIONS + AUDIT LOG + CONTRACT VIEW
============================================================ */
/* Override the row grid so the last column fits Log + View buttons */
.contracts-row {
grid-template-columns: 120px minmax(220px, 2fr) minmax(160px, 1.2fr) 120px 160px;
}
@media (max-width: 980px) {
.contracts-row { grid-template-columns: 110px minmax(180px, 2fr) minmax(140px, 1.2fr) 120px 160px; }
}
@media (max-width: 720px) {
.contracts-row { grid-template-columns: 100px minmax(150px, 2fr) 110px 140px; }
.contracts-row .col-client { display: none; }
}
.contracts-row .col-date {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.row-actions {
display: inline-flex;
align-items: center;
gap: 4px;
justify-content: flex-end;
}
.row-action-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: -0.003em;
color: var(--text-soft);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 9px 5px 8px;
transition: background 100ms ease, border-color 100ms ease, color 100ms ease, transform 100ms ease;
white-space: nowrap;
}
.row-action-btn:hover {
background: var(--text);
color: var(--surface);
border-color: var(--text);
}
.row-action-btn:hover svg { color: var(--surface); }
.row-action-btn svg { color: var(--text-muted); transition: color 100ms ease; }
.row-action-btn:active { transform: translateY(0.5px); }
/* Modal head with eyebrow + subtitle (richer than default modal-head) */
.modal-head-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.modal-eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.modal-subtitle {
font-size: 12px;
color: var(--text-muted);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.modal-head-actions {
display: flex;
align-items: center;
gap: 6px;
}
/* Audit log modal */
.audit-body {
padding: 0;
display: flex;
flex-direction: column;
}
.audit-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0;
border-bottom: 1px solid var(--border);
background: var(--surface-2);
}
.audit-summary-cell {
padding: 12px 16px;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.audit-summary-cell:last-child { border-right: none; }
.audit-summary-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.audit-summary-value {
font-size: 12.5px;
color: var(--text);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.audit-summary-value.is-mono {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.005em;
}
.audit-log {
padding: 4px 0;
overflow: auto;
max-height: 56vh;
}
.audit-entry {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 14px 20px;
border-bottom: 1px solid var(--hairline);
}
.audit-entry:last-child { border-bottom: none; }
.audit-icon {
width: 26px; height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 13px;
margin-top: 1px;
}
.audit-icon.event-created { background: var(--status-draft-bg); color: var(--status-draft-fg); border-color: transparent; }
.audit-icon.event-sent { background: var(--status-sent-bg); color: var(--status-sent-fg); border-color: transparent; }
.audit-icon.event-viewed { background: var(--status-viewed-bg); color: var(--status-viewed-fg); border-color: transparent; }
.audit-icon.event-signed,
.audit-icon.event-countersigned,
.audit-icon.event-completed { background: var(--status-completed-bg); color: var(--status-completed-fg); border-color: transparent; }
.audit-icon.event-voided { background: var(--status-voided-bg); color: var(--status-voided-fg); border-color: transparent; }
.audit-content {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.audit-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.audit-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.audit-time {
font-size: 11.5px;
color: var(--text-muted);
font-family: var(--font-mono);
white-space: nowrap;
flex-shrink: 0;
}
.audit-actor {
font-size: 12px;
color: var(--text-soft);
}
.audit-actor .actor-name { font-weight: 600; color: var(--text); }
.audit-actor .actor-email { color: var(--accent-blue); }
.audit-detail {
font-size: 12px;
color: var(--text-soft);
line-height: 1.55;
}
.audit-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 11.5px;
color: var(--text-muted);
padding-top: 4px;
border-top: 1px dashed var(--hairline);
margin-top: 2px;
}
.audit-meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.audit-meta-item .meta-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-faint);
}
.audit-meta-item .meta-value {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-soft);
letter-spacing: 0.005em;
}
.audit-meta-item .meta-value.is-long {
font-family: var(--font-sans);
max-width: 380px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audit-fingerprint {
flex: 1;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-faint);
letter-spacing: 0.02em;
align-self: center;
}
/* Contract view modal */
.contract-view-body {
padding: 0;
background: var(--surface-2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.contract-view-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 20px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
flex-shrink: 0;
}
.contract-view-meta-left {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--text-muted);
}
.contract-view-meta-left b { color: var(--text); font-weight: 600; }
.contract-view-pages {
flex: 1;
overflow: auto;
max-height: 60vh;
padding: 6px 0 24px;
}
.contract-view-doc {
background: var(--surface);
margin: 18px auto;
max-width: 720px;
width: calc(100% - 36px);
padding: 48px 56px;
border-radius: var(--radius);
box-shadow: 0 0 0 1px rgba(20,18,14,0.05), 0 8px 32px -12px rgba(20,18,14,0.18);
font-size: 13px;
line-height: 1.7;
color: var(--text);
white-space: pre-wrap;
font-family: var(--font-sans);
letter-spacing: -0.005em;
}
/* "Audit trail" page appended at the end of the contract preview - styled to
feel like a separate PDF page tucked behind the signed document. */
.contract-audit-page {
white-space: normal;
padding: 40px 48px 36px;
}
.audit-page-head {
border-bottom: 1px solid var(--hairline, var(--border));
padding-bottom: 14px;
margin-bottom: 18px;
}
.audit-page-eyebrow {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 600;
}
.audit-page-title {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin: 4px 0 4px;
letter-spacing: -0.01em;
}
.audit-page-sub {
font-size: 11.5px;
color: var(--text-muted);
}
.audit-page-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px 24px;
font-size: 12px;
margin: 0 0 22px;
}
.audit-page-meta > div { display: grid; grid-template-columns: 80px 1fr; gap: 8px; }
.audit-page-meta dt { color: var(--text-muted); font-size: 11px; padding-top: 1px; }
.audit-page-meta dd { color: var(--text); margin: 0; }
.audit-page-timeline {
display: flex;
flex-direction: column;
border-top: 1px solid var(--hairline, var(--border));
}
.audit-page-entry {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--hairline, var(--border));
}
.audit-page-entry-icon {
width: 24px; height: 24px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-2);
color: var(--text-muted);
}
.audit-page-entry-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
}
.audit-page-entry-event {
font-size: 12.5px; font-weight: 600; color: var(--text);
}
.audit-page-entry-time {
font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.audit-page-entry-actor {
font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}
.audit-page-entry-detail {
font-size: 11.5px; color: var(--text-soft); margin-top: 3px;
}
.audit-page-entry-meta {
display: flex; flex-wrap: wrap; gap: 12px;
font-size: 11px; color: var(--text-muted); margin-top: 5px;
}
.audit-page-entry-meta b { color: var(--text); font-weight: 500; }
.audit-page-foot {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--hairline, var(--border));
font-size: 11px;
color: var(--text-muted);
line-height: 1.6;
}
.is-mono { font-family: var(--font-mono); font-size: 0.92em; }
.contract-view-doc .var-token {
background: var(--accent-blue-soft);
color: var(--accent-blue);
font-family: var(--font-mono);
font-size: 0.92em;
padding: 1px 6px;
border-radius: 4px;
font-weight: 500;
}
@media (max-width: 560px) {
.contract-view-doc { padding: 28px 24px; margin: 12px auto; }
.audit-entry { padding: 12px 14px; }
.audit-meta-item .meta-value.is-long { max-width: 180px; }
}
/* ============================================================
COPY-TO-CLIPBOARD - inline field + button + toast
============================================================ */
.copy-field {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
max-width: 100%;
}
.copy-field-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.copy-field-empty { color: var(--text-faint); }
.copy-btn {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 4px;
color: var(--text-faint);
flex-shrink: 0;
opacity: 0;
transition: opacity 100ms ease, background 100ms ease, color 100ms ease;
}
.copy-btn svg { width: 11px; height: 11px; }
.copy-btn:hover { background: var(--surface-2); color: var(--text); }
.crm-row:hover .copy-btn,
.client-card-kv .copy-btn, /* always visible inside the detail card */
.rail-kv .copy-btn,
.contact-card:hover .copy-btn,
.copy-field:focus-within .copy-btn,
.copy-btn:focus { opacity: 1; }
/* Pipeline / Sales board cards are NOT hover-reveal rows - their phone + email
copy buttons must always be visible (user-flagged). */
.pw-board-card-contact .copy-btn { opacity: 1; }
/* Org-chart rail email row: copy button pinned far-right and always visible */
.detail-row .value.copy-field { width: 100%; }
.detail-row .copy-btn { opacity: 1; margin-left: auto; }
.copy-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
/* Skip the copy button entirely for empty / dash fields */
.copy-field-empty + .copy-btn,
.copy-field:has(.copy-field-empty) .copy-btn { display: none; }
.copy-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: var(--text);
color: var(--surface);
font-size: 12.5px;
font-weight: 500;
padding: 8px 14px;
border-radius: 999px;
box-shadow: 0 6px 24px -8px rgba(0,0,0,0.35);
pointer-events: none;
opacity: 0;
transition: opacity 160ms ease, transform 160ms ease;
z-index: 9999;
}
.copy-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ============================================================
CLIENT DETAIL PAGE
============================================================ */
.client-detail-header { gap: 10px; }
.back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 6px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
transition: background 100ms ease, color 100ms ease;
}
.back-btn:hover { background: var(--surface-2); color: var(--text); }
.page-header-divider {
width: 1px;
height: 18px;
background: var(--border);
margin: 0 4px;
}
.client-tabs {
display: flex;
gap: 4px;
padding: 0 18px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.client-tab {
position: relative;
padding: 12px 14px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 100ms ease;
background: transparent;
}
.client-tab:hover { color: var(--text-soft); }
.client-tab.active { color: var(--text); font-weight: 600; }
.client-tab.active::after {
content: "";
position: absolute;
left: 8px; right: 8px; bottom: -1px;
height: 2px;
background: var(--text);
border-radius: 2px 2px 0 0;
}
.client-tab .tab-count {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-faint);
background: var(--surface-2);
padding: 1px 6px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.client-tab.active .tab-count { color: var(--text-soft); background: var(--surface-3); }
.body.client-detail-body {
flex: 1;
min-height: 0;
padding: 24px;
overflow-y: auto;
background: var(--surface);
}
.client-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
max-width: 1100px;
}
.client-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-card);
}
.client-card-wide { grid-column: 1 / -1; }
.client-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.client-card-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.client-card-kv {
display: grid;
grid-template-columns: 100px 1fr;
row-gap: 9px;
column-gap: 12px;
margin: 0;
font-size: 13px;
}
.client-card-kv dt {
color: var(--text-muted);
font-weight: 500;
}
.client-card-kv dd {
color: var(--text);
margin: 0;
min-width: 0;
}
.client-card-faint { color: var(--text-muted) !important; font-family: var(--font-mono); font-size: 12px; }
.client-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.client-stat {
background: var(--surface-2);
border-radius: 8px;
padding: 10px 12px;
}
.client-stat-value {
font-size: 22px;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.client-stat-label {
font-size: 10.5px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 4px;
}
.overview-link { color: var(--accent-blue); }
.overview-link:hover { text-decoration: underline; }
.overview-meta { color: var(--text-muted); }
.overview-empty { color: var(--text-faint); font-style: italic; }
.client-notes-body, .client-notes-card {
font-size: 13px;
color: var(--text-soft);
line-height: 1.6;
white-space: pre-wrap;
}
.client-notes-card {
background: var(--surface-2);
padding: 16px 18px;
border-radius: 10px;
max-width: 720px;
}
/* ---- Contracts tab list ---- */
.client-contracts-list {
display: flex;
flex-direction: column;
gap: 14px;
max-width: 1100px;
}
.client-contract-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: border-color 100ms ease, background 100ms ease;
}
.client-contract-card:hover {
border-color: var(--border-strong);
}
.client-contract-row {
display: grid;
grid-template-columns: minmax(220px, 1.6fr) minmax(280px, 1.6fr) auto;
align-items: center;
gap: 18px;
padding: 14px 16px;
cursor: pointer;
}
.client-contract-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text);
}
.client-contract-package {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 4px;
}
.client-contract-dates {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
font-size: 11.5px;
}
.client-contract-dates > div {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.client-contract-status {
display: flex;
justify-content: flex-end;
}
.contract-view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 58px;
height: 30px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font-size: 12px;
font-weight: 650;
cursor: pointer;
transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}
.contract-view-btn:hover {
background: var(--text);
border-color: var(--text);
color: var(--surface);
}
.cc-date-label {
font-size: 9.5px;
font-weight: 600;
color: var(--text-faint);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.cc-date-value {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-soft);
}
.contract-mini-log {
margin: 0 16px 16px;
padding: 10px 12px 8px;
border: 1px solid var(--hairline);
border-radius: 10px;
background: var(--surface-2);
}
.rail-contract-card .contract-mini-log {
margin: 0 12px 12px;
background: var(--surface-2);
}
.contract-mini-log-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
color: var(--text-muted);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.contract-mini-log-head span:last-child {
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.contract-mini-log-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.contract-mini-log-entry {
display: grid;
grid-template-columns: 22px 1fr;
gap: 8px;
padding: 6px 0;
}
.contract-mini-log-dot {
width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: 50%;
margin-top: 1px;
}
.contract-mini-log-dot svg {
width: 10px;
height: 10px;
}
.contract-mini-log-body { min-width: 0; }
.contract-mini-log-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.contract-mini-log-line span {
color: var(--text);
font-size: 12px;
font-weight: 600;
}
.contract-mini-log-line time {
color: var(--text-muted);
font-size: 11px;
text-align: right;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
.contract-mini-log-meta,
.contract-mini-log-detail,
.contract-mini-log-empty {
color: var(--text-muted);
font-size: 11.5px;
line-height: 1.45;
}
.contract-mini-log-meta span { color: var(--accent-blue); }
.contract-mini-log-detail {
margin-top: 2px;
}
.contract-mini-log-empty {
padding: 6px 0 2px;
}
@media (max-width: 880px) {
.client-contract-row { grid-template-columns: 1fr; }
.client-contract-dates { grid-template-columns: repeat(3, 1fr); }
}
/* ---- Payments tab ---- */
.client-payments-summary {
display: flex;
align-items: baseline;
gap: 12px;
padding: 16px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 12px;
max-width: 640px;
}
.client-payments-summary-label {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.client-payments-summary-value {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.client-payments-list {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 1100px;
}
.client-payment-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
}
.client-payment-amount {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.client-payment-sub {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 3px;
}
.client-payment-date {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--text-muted);
}
/* ---- Generic empty state for a tab panel ---- */
.tab-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
gap: 8px;
color: var(--text-muted);
}
.tab-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.tab-empty-sub {
font-size: 13px;
color: var(--text-muted);
max-width: 420px;
line-height: 1.5;
}
.tab-empty-action, .tab-empty .btn-primary, .tab-empty .btn-ghost {
margin-top: 12px;
}
/* ============================================================
REPORTS PAGE
============================================================ */
.report-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
padding: 0 18px;
background: var(--surface);
}
.report-tab {
padding: 12px 14px;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
position: relative;
transition: color 100ms ease;
display: inline-flex;
align-items: center;
gap: 7px;
}
.report-tab:hover { color: var(--text-soft); }
.report-tab.active { color: var(--text); font-weight: 600; }
.report-tab.active svg { color: var(--text); }
.report-tab svg { color: var(--text-muted); transition: color 100ms ease; }
.report-tab.active::after {
content: "";
position: absolute;
left: 10px; right: 10px; bottom: -1px;
height: 2px;
background: var(--text);
border-radius: 2px 2px 0 0;
}
.body.report-body {
flex: 1;
overflow: auto;
padding: 20px 22px 40px;
display: flex;
flex-direction: column;
gap: 18px;
background: var(--bg);
}
/* KPI row */
.report-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 1100px) { .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .report-kpis { grid-template-columns: 1fr; } }
.report-kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 110px;
box-shadow: var(--shadow-card);
}
.report-kpi-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.report-kpi-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.report-kpi-icon {
width: 22px; height: 22px;
border-radius: var(--radius-xs);
background: var(--surface-2);
display: grid; place-items: center;
color: var(--text-muted);
}
.report-kpi-value {
font-size: 22px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.report-kpi-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding-top: 6px;
}
.report-trend {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11.5px;
font-weight: 600;
font-variant-numeric: tabular-nums;
padding: 2px 7px 2px 5px;
border-radius: var(--radius-pill);
letter-spacing: -0.003em;
}
.report-trend.up { color: var(--status-completed-fg); background: var(--status-completed-bg); }
.report-trend.down { color: var(--status-voided-fg); background: var(--status-voided-bg); }
.report-trend.flat { color: var(--text-muted); background: var(--surface-2); }
.report-trend svg { width: 10px; height: 10px; }
.report-spark {
height: 24px;
width: 80px;
display: block;
color: var(--text-muted);
}
.report-spark.up { color: var(--status-completed-fg); }
.report-spark.down { color: var(--status-voided-fg); }
/* Two-column main row (chart + side block) */
.report-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 12px;
}
@media (max-width: 900px) {
.report-grid { grid-template-columns: 1fr; }
}
.report-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px 16px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
gap: 12px;
}
.report-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.report-card-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.report-card-sub {
font-size: 11.5px;
color: var(--text-muted);
}
.report-card-actions {
display: inline-flex;
gap: 2px;
}
.report-card-pill {
font-size: 10.5px;
font-weight: 600;
color: var(--text-muted);
background: var(--surface-2);
border: 1px solid var(--border);
padding: 3px 8px;
border-radius: var(--radius-pill);
}
/* Line chart */
.report-chart {
position: relative;
width: 100%;
height: 200px;
}
.report-chart svg { display: block; width: 100%; height: 100%; }
.report-chart .grid-line { stroke: var(--hairline); stroke-width: 1; }
.report-chart .axis-label {
font-family: var(--font-mono);
font-size: 9.5px;
fill: var(--text-faint);
letter-spacing: 0.02em;
}
.report-chart .line-path {
fill: none;
stroke: var(--text);
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.report-chart .line-area {
fill: var(--text);
fill-opacity: 0.06;
}
.report-chart .data-dot {
fill: var(--surface);
stroke: var(--text);
stroke-width: 1.6;
}
/* Horizontal bar list */
.report-bars {
display: flex;
flex-direction: column;
gap: 9px;
}
.report-bar {
display: grid;
grid-template-columns: 140px 1fr 80px;
align-items: center;
gap: 10px;
}
.report-bar-label {
font-size: 12px;
color: var(--text-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.report-bar-track {
position: relative;
height: 8px;
background: var(--surface-2);
border-radius: var(--radius-pill);
overflow: hidden;
}
.report-bar-fill {
position: absolute;
inset: 0 auto 0 0;
background: var(--text);
border-radius: var(--radius-pill);
}
.report-bar-fill.c-blue { background: var(--accent-blue); }
.report-bar-fill.c-green { background: var(--status-completed-fg); }
.report-bar-fill.c-amber { background: var(--warn); }
.report-bar-fill.c-pink { background: var(--dept-creative-fg); }
.report-bar-fill.c-purple { background: var(--dept-executive-fg); }
.report-bar-value {
font-size: 11.5px;
font-family: var(--font-mono);
color: var(--text-soft);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Mini bar chart (vertical bars, per-day) */
.report-mini-bars {
display: flex;
align-items: flex-end;
gap: 4px;
height: 120px;
padding: 4px 0 18px;
position: relative;
}
.report-mini-bar {
flex: 1;
background: var(--text);
border-radius: 3px 3px 0 0;
min-height: 2px;
position: relative;
transition: opacity 100ms ease;
cursor: default;
}
.report-mini-bar.weekend { background: var(--surface-3); }
.report-mini-bar.today { background: var(--accent-blue); }
.report-mini-bar:hover { opacity: 0.85; }
.report-mini-bar::after {
content: attr(data-label);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
font-size: 9.5px;
color: var(--text-faint);
font-family: var(--font-mono);
}
/* Report table (compact rows) */
.report-table {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-card);
}
.report-row {
display: grid;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--hairline);
font-size: 12.5px;
color: var(--text-soft);
}
.report-row:last-child { border-bottom: none; }
.report-row.is-header {
background: var(--surface-2);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
padding-top: 9px; padding-bottom: 9px;
}
.report-row.is-header div { display: flex; align-items: center; gap: 4px; }
.row-marketing { grid-template-columns: minmax(150px, 2fr) 100px 100px 80px 80px; }
.row-income { grid-template-columns: minmax(160px, 2fr) minmax(120px, 1.4fr) 100px 110px; }
.row-tasks { grid-template-columns: minmax(120px, 1fr) 70px 70px 70px 60px; }
.row-website { grid-template-columns: minmax(180px, 2fr) 90px 100px 80px; }
@media (max-width: 720px) {
.row-marketing { grid-template-columns: minmax(140px, 2fr) 90px 80px; }
.row-marketing .col-clicks, .row-marketing .col-ctr { display: none; }
.row-income { grid-template-columns: minmax(140px, 2fr) 100px 90px; }
.row-income .col-method { display: none; }
.row-tasks { grid-template-columns: minmax(120px, 1fr) 70px 60px; }
.row-tasks .col-inprog, .row-tasks .col-pending { display: none; }
.row-website { grid-template-columns: minmax(140px, 2fr) 80px 70px; }
.row-website .col-avgtime { display: none; }
}
.report-row .col-name {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.report-row .col-name-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.report-row .col-name-primary {
font-weight: 600;
color: var(--text);
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.report-row .col-name-sub {
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.report-row .col-num {
text-align: right;
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
}
.report-row .col-num.is-soft { color: var(--text-muted); }
.report-row .col-amount {
text-align: right;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.team-avatar {
width: 26px; height: 26px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.team-avatar.a-1 { background: var(--dept-executive); color: var(--dept-executive-fg); }
.team-avatar.a-2 { background: var(--dept-operations); color: var(--dept-operations-fg); }
.team-avatar.a-3 { background: var(--dept-finance); color: var(--dept-finance-fg); }
.team-avatar.a-4 { background: var(--dept-legal); color: var(--dept-legal-fg); }
.team-avatar.a-5 { background: var(--dept-creative); color: var(--dept-creative-fg); }
.team-avatar.a-6 { background: var(--dept-growth); color: var(--dept-growth-fg); }
/* Channel dot */
.channel-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.channel-dot.c-blue { background: var(--accent-blue); }
.channel-dot.c-green { background: var(--status-completed-fg); }
.channel-dot.c-amber { background: var(--warn); }
.channel-dot.c-pink { background: var(--dept-creative-fg); }
.channel-dot.c-purple { background: var(--dept-executive-fg); }
/* ============================================================
Tasks view - minimal PM dashboard
============================================================ */
.tasks-toolbar {
display: flex;
gap: 12px;
align-items: center;
padding: 10px 20px;
border-bottom: 1px solid var(--hairline);
}
.tasks-toolbar .crm-search { flex: 0 0 280px; min-width: 200px; }
.tasks-filters {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.chip-select {
padding: 5px 24px 5px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
font-family: inherit;
font-size: 12px;
color: var(--text-soft);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23807c73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
}
.chip-select:hover { border-color: var(--border-strong); }
.chip-select:focus { outline: none; border-color: var(--text); }
/* Custom pill trigger that replaces native