:root {
/* Body background slightly cooler/darker so white cards lift visibly */
--bg: #eef0f3;
--surface: #ffffff;
--surface-2: #fafbfc;
--surface-3: #f1f3f5;
--surface-hover: #f7f8fa; /* subtle hover wash */
--border: #e2e5eb; /* a touch firmer */
--border-strong: #cdd2dc;
--text: #14181f;
--text-dim: #5b6573;
--text-faint: #99a1ad;
--accent: #e07a16;
--accent-strong: #b45309;
--accent-weak: #fdf1e0;
--accent-ring: rgba(224, 122, 22, 0.16);
--green: #067647;
--green-weak: #e8f7ef;
--red: #c0392b;
--red-weak: #fdeeec;
--blue: #2563c9;
--slate-weak: #eef1f5;
--slate-text: #515c6b;
/* Slightly stronger shadow defaults so the depth pass is felt without
every card needing to opt in explicitly. */
--shadow-xs: 0 1px 2px rgba(20, 24, 31, 0.05);
--shadow-sm: 0 2px 4px rgba(20, 24, 31, 0.06), 0 1px 2px rgba(20, 24, 31, 0.05);
--shadow: 0 4px 12px rgba(20, 24, 31, 0.07), 0 1px 3px rgba(20, 24, 31, 0.06);
--shadow-lg: 0 16px 40px rgba(20, 24, 31, 0.18);
--r-lg: 14px;
--r: 10px;
--r-sm: 8px;
--mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 13px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "cv05", "ss01";
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.hidden { display: none !important; }
::selection { background: var(--accent-ring); }
/* ---------- App shell + left nav rail ---------- */
.shell { flex: 1; display: flex; min-height: 0; }
.navrail {
width: 216px; flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 16px 12px;
}
.nav-brand {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 16px; letter-spacing: -0.3px;
padding: 6px 10px 18px;
}
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-spacer { flex: 1; }
.nav-item {
display: flex; align-items: center; gap: 11px;
width: 100%; text-align: left;
font-family: var(--sans); font-size: 13px; font-weight: 600;
color: var(--text-dim); background: transparent; border: none;
padding: 9px 11px; border-radius: var(--r-sm); cursor: pointer;
transition: background .12s, color .12s;
}
.nav-item .ic { width: 17px; height: 17px; color: var(--text-faint); }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--accent-weak); color: var(--accent-strong); }
.nav-item.active .ic { color: var(--accent-strong); }
.shell-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sections { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.section-title { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: var(--text); }
.overview-placeholder {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 8px; color: var(--text-faint);
}
.overview-placeholder .glyph { font-size: 40px; }
.overview-placeholder h2 { font-size: 18px; color: var(--text-dim); }
/* ---------- Overview / analytics ---------- */
.ov-wrap { flex: 1; overflow-y: auto; padding: 20px 24px 28px; }
.ov-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.ov-sub { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.ov-range { display: flex; gap: 2px; background: var(--surface-3); padding: 3px; border-radius: var(--r-sm); }
.ov-range button {
border: none; background: transparent; cursor: pointer; color: var(--text-dim);
font-family: var(--sans); font-size: 12px; font-weight: 600;
padding: 6px 12px; border-radius: 6px;
}
.ov-range button.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-xs); }
.ov-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1200px) { .ov-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .ov-cards { grid-template-columns: repeat(2, 1fr); } }
.ov-mcard {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-xs);
}
.ov-mcard .lab {
font-size: 11.5px; color: var(--text-dim); font-weight: 600;
text-transform: uppercase; letter-spacing: .4px;
}
.ov-mcard .val {
font-size: 26px; font-weight: 700; letter-spacing: -0.8px;
font-variant-numeric: tabular-nums; margin: 6px 0 4px;
}
.ov-mcard .delta { font-size: 11.5px; font-weight: 600; }
.ov-mcard .delta.up { color: var(--green); }
.ov-mcard .delta.down { color: var(--red); }
.ov-mcard .delta.flat { color: var(--text-faint); }
.ov-mcard .spark { margin-top: 10px; }
.ov-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.ov-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-xs);
}
.ov-card h3 {
font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700; margin-bottom: 16px;
}
.fnl-row { margin-bottom: 14px; }
.fnl-row:last-child { margin-bottom: 0; }
.fnl-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.fnl-top .fnl-label { color: var(--text); font-weight: 600; }
.fnl-top .fnl-val { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fnl-top .fnl-pct { color: var(--text-faint); font-size: 11px; margin-left: 8px; }
.fnl-bar { height: 9px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.fnl-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #f0941f); border-radius: 999px; }
.ov-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px; color: var(--text-dim); }
.ov-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.ov-legend .dot-scraped { background: var(--accent); }
.ov-legend .dot-emailed { background: #94a3b8; }
/* Today strip — always-visible "what's happened today" line above the cards */
.ov-today {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 14px;
box-shadow: var(--shadow-xs);
}
.ov-today-lab {
font-size: 11px; font-weight: 700; letter-spacing: .6px;
text-transform: uppercase; color: var(--text-faint);
}
.ov-today-stat {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12.5px; color: var(--text-dim); font-weight: 500;
}
.ov-today-stat b {
color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
}
.ov-today-stat i {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.ov-today-stat .dot-scraped { background: var(--accent); }
.ov-today-stat .dot-emailed { background: #94a3b8; }
/* Activity-chart hover crosshair + floating tooltip */
.trend-wrap { position: relative; }
.trend-wrap svg { display: block; width: 100%; }
.trend-tip {
position: absolute; top: 6px; display: none;
background: var(--text); color: #fff;
font-size: 11.5px; line-height: 1.4;
padding: 7px 10px; border-radius: var(--r-sm);
box-shadow: var(--shadow-lg); pointer-events: none;
min-width: 120px; z-index: 2;
}
.trend-tip .t-date {
font-size: 10.5px; color: rgba(255, 255, 255, 0.7);
font-variant-numeric: tabular-nums; margin-bottom: 4px;
}
.trend-tip .t-row {
display: flex; align-items: center; gap: 6px; font-weight: 600;
}
.trend-tip .t-row b {
margin-left: auto; font-variant-numeric: tabular-nums;
}
.trend-tip i {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
}
.trend-tip .dot-scraped { background: var(--accent); }
.trend-tip .dot-emailed { background: #94a3b8; }
/* "Leads by category" breakdown */
.ov-cats-card { margin-top: 14px; }
.ov-cats { display: flex; flex-direction: column; gap: 9px; }
.cat-row {
display: grid; grid-template-columns: 170px 1fr 50px;
gap: 12px; align-items: center; font-size: 12.5px;
}
.cat-name { color: var(--text); font-weight: 600; }
.cat-bar {
height: 8px; background: var(--surface-3); border-radius: 999px;
overflow: hidden;
}
.cat-fill {
height: 100%; border-radius: 999px;
background: linear-gradient(90deg, var(--accent), #f0941f);
}
.cat-val {
text-align: right; color: var(--text-dim); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.spark svg, #ov-trend svg { display: block; width: 100%; }
/* Icons (stroke style, inherit color) */
.ic {
width: 15px; height: 15px;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
flex-shrink: 0;
}
/* ---------- Top bar ---------- */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px; height: 58px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.logo {
font-weight: 700; font-size: 16px; letter-spacing: -0.3px;
color: var(--text); display: flex; align-items: center; gap: 10px;
}
.logo-mark {
width: 28px; height: 28px; border-radius: 8px;
background: linear-gradient(150deg, #f0941f, var(--accent) 55%, var(--accent-strong));
color: #fff; display: inline-flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800;
box-shadow: 0 2px 6px rgba(224, 122, 22, 0.35);
}
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-status {
display: flex; align-items: center; gap: 10px;
}
.topbar-sep {
width: 1px; height: 24px; background: var(--border);
display: inline-block;
}
.scrape-indicator {
font-size: 12px; font-weight: 600; color: var(--accent-strong);
background: var(--accent-weak); padding: 7px 13px; border-radius: 999px;
display: flex; align-items: center; gap: 8px;
}
.scrape-indicator::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
/* ---------- Buttons ---------- */
.btn {
font-family: var(--sans); font-size: 12.5px; font-weight: 600;
letter-spacing: -0.1px;
padding: 8px 14px; border-radius: var(--r-sm);
border: 1px solid var(--border-strong); background: var(--surface);
color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
transition: background .13s, border-color .13s, box-shadow .13s, transform .04s;
box-shadow: var(--shadow-xs);
}
.btn:hover { background: var(--surface-3); border-color: var(--text-faint); }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 14px; height: 14px; }
.btn-accent {
background: var(--accent); border-color: var(--accent); color: #fff;
box-shadow: 0 1px 2px rgba(224,122,22,.3);
}
.btn-accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-ghost { background: transparent; border-color: var(--border); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); }
.btn.sm { padding: 6px 11px; font-size: 11.5px; }
.btn.full { width: 100%; justify-content: center; margin-top: 6px; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-danger { background: var(--red-weak); border-color: #f0c8c3; color: var(--red); box-shadow: none; }
.btn-danger:hover { background: var(--red); border-color: var(--red); color: #fff; }
/* ---------- Metric strip ---------- */
.statsbar {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
padding: 18px 24px 4px; flex-shrink: 0;
}
.stat {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 16px 18px;
display: flex; align-items: center; gap: 14px;
box-shadow: var(--shadow-xs);
transition: box-shadow .15s, transform .15s, border-color .15s;
cursor: pointer;
text-align: left;
font-family: inherit;
width: 100%; /* reset button width */
}
.stat:hover {
box-shadow: var(--shadow); transform: translateY(-1px);
border-color: var(--border-strong);
}
.stat:active { transform: translateY(0); }
.stat:focus-visible {
outline: none;
box-shadow: var(--shadow-xs), 0 0 0 3px var(--accent-ring);
}
.stat-ic {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
background: var(--accent-weak); color: var(--accent-strong);
display: flex; align-items: center; justify-content: center;
}
.stat-ic svg {
width: 19px; height: 19px; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.stat > div { display: flex; flex-direction: column; gap: 1px; }
.stat-num {
font-size: 26px; font-weight: 800; color: var(--text);
letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label {
font-size: 11px; color: var(--text-dim); font-weight: 600;
letter-spacing: 0.2px; text-transform: uppercase;
}
/* ---------- Layout ---------- */
.layout { flex: 1; display: flex; min-height: 0; padding: 14px 24px 20px; gap: 16px; }
/* ---------- Sidebar ---------- */
.sidebar {
width: 250px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r);
padding: 18px; overflow-y: auto; flex-shrink: 0;
box-shadow: var(--shadow-xs);
}
.source-tabs {
display: flex; gap: 3px; margin-bottom: 22px;
background: var(--surface-3); padding: 3px; border-radius: var(--r-sm);
flex-wrap: wrap; /* let tabs spill onto a second row before they clip */
}
.source-tab {
flex: 1 1 auto;
min-width: 0; /* allow text-overflow to kick in instead of overflowing */
font-size: 11.5px; font-weight: 600; padding: 7px 8px;
border-radius: 6px; border: none; background: transparent;
color: var(--text-dim); cursor: pointer; transition: all .12s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.source-tab:hover { color: var(--text); }
.source-tab.active {
background: var(--surface); color: var(--text);
box-shadow: var(--shadow-xs);
}
.filter-group { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.filter-label {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--text-faint); font-weight: 700;
}
/* ---------- Global form controls (premium pass) ----------
Inputs/selects/textarea now share one style globally — no more scoping
to .sidebar / .modal. Selects strip their native chevron + draw a
custom SVG one. Number inputs strip the native spinner buttons.
Native checkboxes/radios get accent-color (modern browsers honour this)
so the orange brand colour matches everywhere.
------------------------------------------------------------ */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="url"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"],
select, textarea {
background: var(--surface);
border: 1px solid var(--border-strong);
color: var(--text);
padding: 8px 11px;
border-radius: var(--r-sm);
font-family: var(--sans);
font-size: 12.5px;
line-height: 1.4;
width: 100%;
transition: border-color .12s, box-shadow .12s, background .12s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
input:hover:not(:disabled), select:hover:not(:disabled),
textarea:hover:not(:disabled) {
border-color: var(--text-faint);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
input:disabled, select:disabled, textarea:disabled {
background: var(--surface-3); color: var(--text-faint); cursor: not-allowed;
}
/* Custom select chevron — embedded SVG so no extra HTTP request. */
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6573' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px;
padding-right: 30px;
cursor: pointer;
}
select:disabled { cursor: not-allowed; opacity: 0.6; }
/* Strip native number-input spinner buttons. They look budget on Chromium
and Firefox renders them inconsistently. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }
/* Date / time inputs — keep the native picker (best UX) but strip the
nasty Chrome calendar icon's hover background. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
cursor: pointer; opacity: 0.55; padding: 2px;
filter: hue-rotate(0deg); /* prevents Chrome's blue-tint on focus */
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
opacity: 0.85;
}
/* Custom checkboxes — fully styled, square with rounded corners, checks
via SVG mask so the tick honours `accent-color` even on older browsers. */
input[type="checkbox"], input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--border-strong);
background: var(--surface);
border-radius: 4px;
cursor: pointer;
position: relative;
flex-shrink: 0;
transition: border-color .12s, background .12s, box-shadow .12s;
padding: 0; /* override global input padding */
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover {
border-color: var(--accent);
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
background: var(--accent);
border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
background-size: 11px;
}
input[type="radio"]:checked::after {
content: ""; position: absolute; inset: 4px;
background: white; border-radius: 50%;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
box-shadow: 0 0 0 3px var(--accent-ring); outline: none;
}
/* Search inputs override the global padding so the clear button has room. */
input[type="search"] { padding-right: 32px; }
.checkbox-list { display: flex; flex-direction: column; gap: 9px; }
.checkbox-list label {
display: flex; align-items: center; gap: 10px;
font-size: 12.5px; color: var(--text); cursor: pointer;
}
/* ---------- Collapsible filter groups (premium pass v1) ----------
Each .fg-collapsible wraps its body in .fg-body and exposes a
clickable .fg-header. State is toggled by adding/removing
.collapsed on the group; persists per-group in localStorage.
.fg-dot lights up when the group has an active (non-default)
filter — visible only on the collapsed state.
------------------------------------------------------------------- */
.fg-collapsible { margin-bottom: 4px; } /* tighter — header has its own padding */
.fg-header {
display: flex; align-items: center; gap: 6px;
width: 100%;
background: none; border: none;
padding: 8px 0;
color: var(--text-dim);
cursor: pointer;
text-align: left;
font: inherit;
transition: color .12s;
}
.fg-header:hover { color: var(--text); }
.fg-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase;
flex: 1;
}
.fg-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent);
opacity: 0; /* hidden by default; visible when active+collapsed */
transition: opacity .15s;
flex-shrink: 0;
}
.fg-collapsible.collapsed.has-active .fg-dot { opacity: 1; }
.fg-chev {
color: var(--text-faint);
transition: transform .18s;
flex-shrink: 0;
}
.fg-collapsible.collapsed .fg-chev { transform: rotate(-90deg); }
.fg-body {
padding-bottom: 12px;
display: flex; flex-direction: column; gap: 6px;
}
.fg-collapsible.collapsed .fg-body { display: none; }
.fg-date-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
/* ---------- Main / table ---------- */
.main {
flex: 1; display: flex; flex-direction: column; min-width: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); box-shadow: var(--shadow-xs); overflow: hidden;
}
/* ---------- Views bar (pipeline / archives) ----------
The view-tabs list can grow long (Pipeline / Follow-ups due /
Needs attention / Snoozed / Not relevant / No email / Agencies /
All / ⚙) and was pushing the right-side view-mode toggle off
screen. Fix: views scroll horizontally (with its scrollbar
hidden), view-mode toggle stays pinned on the right with a
gap so they never touch.
---------------------------------------------------------- */
.views-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 18px 0; border-bottom: 1px solid var(--border);
flex-shrink: 0;
gap: 16px;
}
.view-tabs {
display: flex; gap: 2px;
flex: 1 1 auto;
min-width: 0; /* let it shrink instead of pushing siblings */
overflow-x: auto;
scrollbar-width: none; /* hide the scrollbar on Firefox */
}
.view-tabs::-webkit-scrollbar { display: none; } /* and on WebKit */
.view-tab {
border: none; background: transparent; cursor: pointer;
font-family: var(--sans); font-size: 13px; font-weight: 600;
color: var(--text-dim); padding: 9px 14px 12px;
border-bottom: 2px solid transparent; margin-bottom: -1px;
display: flex; align-items: center; gap: 7px; transition: color .12s;
flex-shrink: 0; /* tabs keep their natural width */
white-space: nowrap; /* prevent wrap-to-two-lines look */
}
.view-tab:hover { color: var(--text); }
.view-tab.active { color: var(--accent-strong); border-bottom-color: var(--accent); }
.vc {
font-size: 11px; font-weight: 600; color: var(--text-dim);
background: var(--surface-3); border-radius: 999px; padding: 1px 7px;
font-variant-numeric: tabular-nums;
}
.view-tab.active .vc { background: var(--accent-weak); color: var(--accent-strong); }
.board-toggle {
display: flex; gap: 2px; background: var(--surface-3); padding: 3px;
border-radius: var(--r-sm); flex-shrink: 0; /* never lose Companies button */
}
.board-toggle button {
border: none; background: transparent; cursor: pointer; color: var(--text-dim);
padding: 6px 12px; border-radius: 6px; display: flex; align-items: center;
gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600;
}
.board-toggle button .ic { width: 14px; height: 14px; }
.board-toggle button:hover { color: var(--text); }
.board-toggle button.active { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-xs); }
/* ---------- Kanban board ---------- */
.board-wrap { flex: 1; overflow-x: auto; overflow-y: hidden; padding: 16px; }
.board {
display: grid; grid-auto-columns: minmax(178px, 1fr); grid-auto-flow: column;
gap: 12px; height: 100%;
}
.kcol {
display: flex; flex-direction: column; min-height: 0;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r); overflow: hidden;
}
.kcol-head {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px; border-bottom: 1px solid var(--border);
font-size: 12px; font-weight: 700; color: var(--text);
letter-spacing: -0.1px; flex-shrink: 0;
}
.kcol-dot { width: 8px; height: 8px; border-radius: 50%; }
.kcol[data-stage="new"] .kcol-dot { background: var(--slate-text); }
.kcol[data-stage="contacted"] .kcol-dot { background: var(--accent); }
.kcol[data-stage="replied"] .kcol-dot { background: var(--green); }
.kcol[data-stage="interested"] .kcol-dot { background: #06b6d4; }
.kcol[data-stage="meeting_planned"] .kcol-dot { background: #3b82f6; }
.kcol[data-stage="meeting_held"] .kcol-dot { background: #2563eb; }
.kcol[data-stage="opportunity"] .kcol-dot { background: #0d9488; }
.kcol[data-stage="won"] .kcol-dot { background: #15803d; }
.kcol[data-stage="nurture"] .kcol-dot { background: #7c3aed; }
.kcol[data-stage="lost"] .kcol-dot { background: var(--text-faint); }
.kcol-count {
margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-dim);
background: var(--surface-3); border-radius: 999px; padding: 1px 8px;
font-variant-numeric: tabular-nums;
}
.kcol-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.kcol.drop-target { background: var(--accent-weak); }
.kcol.drop-target .kcol-body { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: var(--r); }
.kcard {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 12px 13px; cursor: pointer;
box-shadow: var(--shadow-xs); transition: box-shadow .12s, transform .04s;
}
.kcard { position: relative; }
.kcard:hover { box-shadow: var(--shadow); }
.kcard:active { cursor: grabbing; }
.kcard-mailbtn {
position: absolute; top: 8px; right: 8px; z-index: 2;
border: 1px solid var(--border); background: var(--surface);
border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1;
padding: 4px 6px; color: var(--text-dim); opacity: 0; transition: opacity .12s;
}
.kcard:hover .kcard-mailbtn { opacity: 1; }
.kcard-mailbtn:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-weak); }
.row-mailbtn {
border: none; background: transparent; cursor: pointer; padding: 0 6px 0 0;
font-size: 12px; line-height: 1; color: var(--text-faint); vertical-align: middle;
}
.row-mailbtn:hover { color: var(--accent-strong); }
.kcard.dragging { opacity: .4; }
.kcard.is-starred {
background: linear-gradient(to right, #fef3c7 0, var(--surface-2) 16px);
border-color: #fbbf24;
}
.kcard-star { color: #d97706; margin-right: 4px; font-size: 13px; vertical-align: -1px; }
.kcard-title {
font-size: 12.5px; font-weight: 600; color: var(--text);
letter-spacing: -0.1px; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.detail-actions #d-star-btn.is-on .btn-icon-i { color: #d97706; }
.detail-actions #d-star-btn.is-on .btn-icon-l { color: #d97706; }
.kcard-sub { font-size: 11.5px; color: var(--accent-strong); font-weight: 600; margin-top: 3px; }
.kcard-meta {
display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px;
font-size: 11px; color: var(--text-dim);
}
.kcard-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
font-size: 10.5px;
}
.kcard-mail { font-family: var(--mono); font-size: 10.5px; color: var(--accent-strong);
max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcard-mail.off { color: var(--text-faint); font-family: var(--sans); }
.kcard-date { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.kcard.due { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-weak); }
.kcard-channels {
display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap;
}
.kcard-ch {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11px; padding: 2px 7px; border-radius: 999px;
background: var(--surface-3); color: var(--text-dim);
}
.kcard-ch-call {
background: var(--accent-weak); color: var(--accent-strong);
font-weight: 600; text-transform: capitalize;
}
.kcard-flag {
display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 700;
color: var(--accent-strong); background: var(--accent-weak);
padding: 2px 7px; border-radius: 999px;
}
.kcol-empty { color: var(--text-faint); font-size: 12px; text-align: center; padding: 24px 10px; }
/* ---------- Companies view (leads grouped by company) ---------- */
.companies-wrap { flex: 1; overflow-y: auto; padding: 16px; }
.companies {
display: flex; flex-direction: column; gap: 8px;
max-width: 900px; margin: 0 auto;
}
.co-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); overflow: hidden;
}
.co-head {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; cursor: pointer;
}
.co-head:hover { background: var(--surface-2); }
.co-caret { color: var(--text-faint); font-size: 11px; width: 10px; }
.co-name {
font-weight: 700; font-size: 13px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 280px;
}
.co-count {
font-size: 11.5px; font-weight: 700; color: var(--accent-strong);
background: var(--accent-weak); padding: 2px 9px; border-radius: 999px;
white-space: nowrap;
}
.co-email { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
.co-chips {
display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto;
justify-content: flex-end;
}
.co-roles { border-top: 1px solid var(--border); }
.co-role {
display: flex; align-items: center; gap: 12px;
padding: 9px 14px 9px 36px; border-top: 1px solid var(--border);
cursor: pointer; font-size: 12.5px;
}
.co-role:first-child { border-top: none; }
.co-role:hover { background: var(--surface-2); }
.co-role-title {
flex: 1; color: var(--text); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.co-role-loc { color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }
.kcol-more { color: var(--text-dim); font-size: 11px; text-align: center; padding: 8px; }
.table-meta {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 18px; border-bottom: 1px solid var(--border);
font-size: 12.5px; color: var(--text-dim); flex-shrink: 0;
}
.meta-left { display: flex; align-items: center; gap: 10px; }
#result-count { font-weight: 600; color: var(--text); margin-right: 4px; }
.pager { display: flex; align-items: center; gap: 4px; }
.page-info {
font-size: 12px; color: var(--text-dim);
padding: 0 8px;
font-variant-numeric: tabular-nums;
}
.page-info b { color: var(--text); font-weight: 700; }
.pager-btn {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); cursor: pointer;
color: var(--text-dim);
transition: background .12s, color .12s, border-color .12s;
padding: 0;
}
.pager-btn svg { width: 14px; height: 14px; }
.pager-btn:hover:not(:disabled) {
background: var(--surface-3); color: var(--text);
border-color: var(--border-strong);
}
.pager-btn:disabled {
color: var(--text-faint); cursor: not-allowed; opacity: 0.5;
}
.table-wrap { flex: 1; overflow: auto; position: relative; }
.jobs-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.jobs-table thead th {
position: sticky; top: 0; z-index: 1; background: var(--surface-2);
text-align: left; padding: 10px 14px;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text-faint);
border-bottom: 1px solid var(--border);
cursor: pointer; white-space: nowrap; user-select: none;
transition: color .12s, background .12s;
}
.jobs-table thead th:hover { color: var(--text-dim); background: var(--surface-3); }
.jobs-table thead th.sorted { color: var(--accent-strong); }
.jobs-table thead th.sorted::after { content: " ↓"; font-size: 10px; }
.jobs-table thead th.sorted.asc::after { content: " ↑"; }
.jobs-table tbody td {
padding: 12px 14px; border-bottom: 1px solid var(--border);
font-size: 12.5px; white-space: nowrap; max-width: 260px;
overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.jobs-table tbody tr { cursor: pointer; transition: background .1s; }
.jobs-table tbody tr:last-child td { border-bottom: none; }
.jobs-table tbody tr:hover { background: var(--surface-2); }
.jobs-table tbody tr.selected,
.jobs-table tbody tr.row-checked { background: var(--accent-weak); }
.jobs-table tbody tr.row-checked td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.col-title { color: var(--text); font-weight: 600; max-width: 300px; letter-spacing: -0.1px; }
.col-email { color: var(--accent-strong); font-family: var(--mono); font-size: 11.5px; }
.col-dim { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.col-expired { color: var(--text-faint); text-decoration: line-through; }
/* Suppression list inside the Email-setup modal */
.supp-list { margin-top: 6px; }
.supp-head {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--text-faint); padding: 6px 0;
}
.supp-row {
display: grid; grid-template-columns: 1fr 160px 80px;
align-items: center; gap: 10px; padding: 7px 0;
border-top: 1px solid var(--border); font-size: 12.5px;
}
.supp-row:first-of-type { border-top: none; }
.supp-email { color: var(--text); font-family: var(--mono); font-size: 11.5px; }
.supp-meta { color: var(--text-faint); font-size: 11px; }
.supp-row button { padding: 4px 10px; font-size: 11px; }
.exp-tag {
display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .4px; text-decoration: none;
color: #b42318; background: #fde7e7; border-radius: 999px;
padding: 1px 7px; vertical-align: middle;
}
.col-select { width: 40px; text-align: center !important; cursor: default !important; }
.col-select input { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }
.jobs-table thead th[draggable="true"] { cursor: grab; }
.jobs-table thead th.drag-over { box-shadow: inset 2px 0 0 var(--accent); }
.jobs-table thead th.dragging { opacity: .4; }
.empty-state {
padding: 80px 40px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 8px;
color: var(--text-faint);
}
.empty-state .es-icon {
width: 60px; height: 60px; border-radius: 50%;
background: var(--surface-3); color: var(--text-faint);
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}
.empty-state .es-icon svg { width: 26px; height: 26px; }
.empty-state .es-title {
font-size: 16px; font-weight: 700; color: var(--text);
letter-spacing: -0.2px;
}
.empty-state .es-sub {
font-size: 13px; color: var(--text-dim); max-width: 360px; line-height: 1.5;
}
.empty-state .btn { margin-top: 12px; }
.empty-state svg, .empty-state .glyph { color: var(--text-faint); }
/* ---------- Badges ---------- */
.badge {
display: inline-block; font-size: 11px; font-weight: 600;
padding: 3px 10px; border-radius: 999px; white-space: nowrap;
letter-spacing: 0.1px; text-transform: capitalize;
}
.badge-new { background: var(--slate-weak); color: var(--slate-text); }
.badge-contacted { background: var(--accent-weak); color: var(--accent-strong); }
.badge-replied { background: var(--green-weak); color: var(--green); }
.badge-meeting { background: #e7eefb; color: #1d4ed8; }
.badge-won { background: #15803d; color: #fff; }
.badge-lost { background: var(--slate-weak); color: var(--text-faint); }
.badge-not-relevant { background: var(--slate-weak); color: var(--text-faint); }
.badge-no-email { background: var(--red-weak); color: var(--red); }
.badge-ag-yes { background: var(--accent-weak); color: var(--accent-strong); }
.badge-ag-no { background: var(--green-weak); color: var(--green); }
.badge-ag-unknown { background: var(--slate-weak); color: var(--text-faint); }
/* ---------- Detail panel ---------- */
.detail-overlay {
position: fixed; inset: 0; background: rgba(20, 24, 31, .42);
backdrop-filter: blur(2px); z-index: 40;
}
.detail-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: 500px; max-width: 92vw;
background: var(--surface); border-left: 1px solid var(--border); z-index: 50;
transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.detail-panel.open { transform: translateX(0); }
.detail-head {
display: flex; justify-content: space-between; align-items: flex-start;
padding: 24px; border-bottom: 1px solid var(--border); gap: 12px;
}
.detail-head h2 { font-size: 18px; line-height: 1.35; letter-spacing: -0.4px; }
.d-company { color: var(--accent-strong); font-weight: 600; font-size: 13px; margin-top: 5px; }
/* Compact quick-action icon row directly under the lead header — keeps
the most-used actions one click away without scrolling. Hover the icon
for the full label via the `title` attribute. */
.detail-actions {
display: flex; gap: 6px; padding: 10px 24px;
border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.detail-actions .btn-icon {
display: inline-flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px;
min-width: 58px; padding: 6px 8px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface);
color: var(--text); line-height: 1;
cursor: pointer; text-decoration: none;
transition: background 0.12s, border-color 0.12s;
}
.detail-actions .btn-icon-i { font-size: 15px; line-height: 1; }
.detail-actions .btn-icon-l {
font-size: 10.5px; color: var(--text-dim); line-height: 1;
font-weight: 500; letter-spacing: 0.1px;
}
.detail-actions .btn-icon:hover {
background: var(--surface-2); border-color: var(--accent);
}
.detail-actions .btn-icon:hover .btn-icon-l { color: var(--text); }
.detail-actions .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
/* "Active" state — the toggle is currently on (snoozed, skipped, flagged
as agency, replied). Tints the icon so the operator sees what's
already applied at a glance. */
.detail-actions .btn-icon.is-on {
background: var(--accent-soft); border-color: var(--accent);
color: var(--accent-strong);
}
.detail-actions .btn-icon.is-on .btn-icon-l { color: var(--accent-strong); }
.detail-body { padding: 18px; overflow-y: auto; }
/* Each block is now a card with a clear heading so the operator can
visually parse sections at a glance (HubSpot/Pipedrive-style). The
bigger title weight makes Status / Tasks / Deals / Log a call etc.
read as proper section headers instead of tiny faint captions. */
.detail-block {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px 18px 16px;
margin-bottom: 14px;
}
.detail-block h3 {
font-size: 14px; text-transform: none; letter-spacing: 0;
color: var(--text); font-weight: 700;
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* Action buttons next to the heading (+ Task, + Deal, ✉ Email, etc.)
stay visually secondary — small, ghost-style, no border. */
.detail-block h3 .btn.sm {
font-size: 11.5px; font-weight: 600; color: var(--accent-strong);
}
.detail-block h3 .hint { font-weight: 400; }
.detail-grid { display: grid; grid-template-columns: 118px 1fr; gap: 10px 14px; }
.detail-grid .k {
color: var(--text-faint); font-size: 10.5px; text-transform: uppercase;
letter-spacing: .4px; font-weight: 700;
}
.detail-grid .v { font-size: 12.5px; word-break: break-word; }
.detail-grid .v-edit {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
#d-email-input {
flex: 1; min-width: 180px; padding: 5px 9px;
font: inherit; font-size: 12px; font-family: var(--mono);
color: var(--accent-strong); background: var(--surface-2);
border: 1px solid var(--border); border-radius: 6px;
}
#d-email-input:hover { border-color: var(--text-faint); }
#d-email-input:focus {
outline: none; background: #fff; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
#d-email-state { font-size: 11px; }
/* Generic editable detail-panel rows — match the email-input look so the
whole grid reads consistently. */
.d-field-edit {
flex: 1; min-width: 180px; padding: 5px 9px; width: 100%;
font: inherit; font-size: 12.5px;
color: var(--text); background: var(--surface-2);
border: 1px solid var(--border); border-radius: 6px;
}
.d-field-edit:hover { border-color: var(--text-faint); }
.d-field-edit:focus {
outline: none; background: #fff; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.d-field-msg { font-size: 11px; display: inline-block; margin-left: 8px; }
.copy-btn {
margin-left: 6px; font-size: 10px; padding: 2px 7px;
background: var(--surface-3); border: 1px solid var(--border-strong);
color: var(--text-dim); border-radius: 5px; cursor: pointer;
}
.copy-btn:hover { color: var(--accent-strong); border-color: var(--accent); }
.status-select {
background: var(--surface); border: 1px solid var(--border-strong);
color: var(--text); padding: 9px 10px; border-radius: var(--r-sm);
font-size: 12.5px; width: 100%;
}
.status-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.notes-box {
width: 100%; background: var(--surface); border: 1px solid var(--border-strong);
color: var(--text); border-radius: var(--r-sm); padding: 10px 11px;
font-family: var(--sans); font-size: 12.5px; line-height: 1.55; resize: vertical;
}
.notes-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Attachments widget — used in both the lead detail panel and the deal
modal. Drop zone + file list. */
.attach-block { display: flex; flex-direction: column; gap: 10px; }
.attach-drop {
border: 1.5px dashed var(--border-strong);
border-radius: var(--r-sm);
padding: 14px 12px;
background: var(--surface);
text-align: center;
transition: border-color 0.12s, background 0.12s;
cursor: default;
}
.attach-drop.is-dragover {
border-color: var(--accent);
background: var(--accent-ring);
}
.attach-drop-text { display: block; font-size: 13px; color: var(--text); }
.attach-drop-text a {
color: var(--accent);
text-decoration: underline;
cursor: pointer;
}
.attach-drop-hint {
display: block; font-size: 11px; color: var(--text-faint, #94a3b8);
margin-top: 4px;
}
.attach-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 4px;
}
.attach-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
font-size: 12.5px;
}
.attach-name {
display: flex; align-items: center; gap: 8px;
min-width: 0; text-decoration: none; color: var(--text);
}
.attach-name:hover { color: var(--accent-strong, var(--accent)); }
.attach-icon { font-size: 16px; flex: 0 0 auto; }
.attach-name-text {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 500;
}
.attach-meta { font-size: 11px; color: var(--text-faint, #94a3b8); }
.attach-del {
background: none; border: none; cursor: pointer;
font-size: 16px; line-height: 1; color: var(--text-faint, #94a3b8);
padding: 0 6px;
}
.attach-del:hover { color: #dc2626; }
.attach-empty {
font-size: 12px; color: var(--text-faint, #94a3b8);
padding: 6px 2px; font-style: italic;
}
.attach-msg { margin: 0; font-size: 11px; }
/* Recruitment search typeahead — floating dropdown anchored under
each filter-bar search input. Same pattern across Candidates /
Employees / Calendar; mounted to so it isn't clipped by any
parent overflow. */
.recr-typeahead {
position: absolute;
z-index: 1000;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--r-sm);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
max-height: 320px;
overflow-y: auto;
padding: 4px 0;
}
.recr-typeahead-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 10px;
cursor: pointer;
border-bottom: 1px solid #f1f5f9;
}
.recr-typeahead-row:last-child { border-bottom: none; }
.recr-typeahead-row:hover,
.recr-typeahead-row.is-selected {
background: var(--surface-hover, #f8fafc);
}
.recr-typeahead-avatar { flex: 0 0 auto; }
.recr-typeahead-text { min-width: 0; flex: 1 1 auto; }
.recr-typeahead-name {
font-size: 13px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recr-typeahead-sub {
font-size: 11px; color: var(--text-faint, #64748b);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-top: 1px;
text-transform: capitalize;
}
.recr-typeahead-empty {
font-size: 12px; color: var(--text-faint, #94a3b8);
padding: 10px 12px; font-style: italic;
}
/* Partners section — subcontractor companies. Card grid + status
pills + role chips. Modal mirrors deal modal premium styling. */
.pt-wrap { display: flex; flex-direction: column; gap: 16px; }
.pt-intro {
margin: 0 0 8px;
padding: 12px 16px;
background: #f8fafc;
border-left: 3px solid var(--accent);
border-radius: var(--r-sm);
font-size: 13px; line-height: 1.5;
}
.pt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 14px;
}
.pt-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
display: flex; flex-direction: column; gap: 10px;
}
.pt-card:hover {
transform: translateY(-1px);
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(15,23,42,0.08);
}
.pt-card-head {
display: grid; grid-template-columns: 40px 1fr auto;
gap: 12px; align-items: center;
}
.pt-card-avatar {
width: 40px; height: 40px;
background: #f1f5f9;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.pt-card-title { min-width: 0; }
.pt-card-name {
font-size: 14.5px; font-weight: 700; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
letter-spacing: -0.1px;
}
.pt-card-contact {
font-size: 11.5px; color: var(--text-faint, #64748b);
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-no-contact { font-style: italic; }
.pt-card-roles {
display: flex; flex-wrap: wrap; gap: 4px;
}
.pt-role-chip {
font-size: 11px; font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
display: inline-flex; align-items: center; gap: 4px;
}
.pt-card-foot {
font-size: 12px; color: var(--text-faint, #64748b);
padding-top: 6px;
border-top: 1px dashed var(--border);
}
/* Status pills inside Partner cards reuse .emp-status base. */
.emp-status.pt-st-active { background-color: #d6f0e2; color: #0d6e3a; }
.emp-status.pt-st-onhold { background-color: #fef3c7; color: #92400e; }
.emp-status.pt-st-term { background-color: #f1f5f9; color: #64748b; }
/* Partner modal — role picker grid */
.pt-roles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 6px;
}
.pt-role-pick {
display: flex; align-items: center; gap: 6px;
padding: 6px 10px;
border: 1px solid var(--border);
border-radius: 8px;
cursor: pointer;
font-size: 12.5px; font-weight: 600;
user-select: none;
transition: background 0.12s, border-color 0.12s;
}
.pt-role-pick.is-on { border-color: transparent; }
.pt-role-pick input { display: none; }
/* Partner modal — contacts list */
.pt-contacts {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 10px;
}
.pt-contact-row {
display: grid; grid-template-columns: 1fr auto;
gap: 10px; align-items: center;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.pt-contact-text { min-width: 0; }
.pt-contact-name {
font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 6px;
}
.pt-primary-tag {
font-size: 10px; font-weight: 700;
background: #fef3c7; color: #92400e;
padding: 2px 6px; border-radius: 4px;
}
.pt-contact-sub {
font-size: 11px; color: var(--text-faint, #64748b);
margin-top: 1px;
}
.pt-contact-add {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr auto auto;
gap: 6px; align-items: center;
}
.pt-contact-add input {
padding: 6px 8px;
font-size: 12px;
border: 1px solid var(--border); border-radius: var(--r-sm);
}
.pt-primary-toggle {
font-size: 11px; display: flex; align-items: center; gap: 4px;
white-space: nowrap;
}
@media (max-width: 700px) {
.pt-contact-add { grid-template-columns: 1fr 1fr; }
.pt-roles-grid { grid-template-columns: 1fr 1fr; }
}
/* Partners — premium polish layer. The base layout reuses the
recruitment stat-strip + card patterns; this section adds:
- softer intro card with subtle gradient
- polished filter bar with shadow
- lifted empty state with icon
- card hover with translate + accent ring
- micro-fade animation on load */
#section-partners { animation: fadeUp .35s ease-out both; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
#section-partners .pt-intro {
background: linear-gradient(135deg, #fff7ed 0%, #fff 60%);
border: 1px solid #fed7aa;
border-left: 3px solid var(--accent);
border-radius: 12px;
padding: 14px 18px;
font-size: 13.5px;
line-height: 1.55;
margin: 0 0 18px;
box-shadow: 0 1px 3px rgba(146, 64, 14, 0.06);
color: #475569;
}
#section-partners .pt-intro strong {
color: #92400e;
font-weight: 700;
}
/* Header row — title sized stat strip + New partner button cleanly
aligned. Stat strip stays horizontal even when empty. */
#section-partners .deals-head {
display: flex;
align-items: stretch;
gap: 14px;
margin-bottom: 16px;
}
#section-partners .deals-stat-strip {
flex: 1 1 auto;
display: flex; flex-direction: row; flex-wrap: wrap;
gap: 12px;
}
#section-partners #partner-new-btn {
flex: 0 0 auto;
align-self: stretch;
padding: 0 22px;
font-weight: 700;
letter-spacing: -0.1px;
box-shadow: 0 4px 14px rgba(217, 119, 6, 0.22);
transition: transform .12s ease, box-shadow .12s ease;
}
#section-partners #partner-new-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(217, 119, 6, 0.28);
}
/* Stat tiles — accent strip per tile so the strip reads as a row of
meaningful chips, not generic boxes. */
#section-partners .t-stat[data-tile="total"]::before { background: #4f5b8f; }
#section-partners .t-stat[data-tile="active"]::before { background: #15803d; }
#section-partners .t-stat[data-tile="active-now"]::before { background: #f59e0b; }
#section-partners .t-stat[data-tile="roles"]::before { background: #0d9488; }
/* Filter bar — premium pill row with shadow. */
#section-partners #partners-filterbar {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
margin-bottom: 16px;
}
#section-partners #pt-search {
flex: 1 1 320px;
min-width: 200px;
width: auto !important;
padding: 8px 12px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 8px;
background: #f8fafc;
transition: background .12s, border-color .12s, box-shadow .12s;
}
#section-partners #pt-search:focus {
outline: none;
background: #fff;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
#section-partners #pt-status-filter {
padding: 8px 12px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: 8px;
background: #f8fafc;
cursor: pointer;
font-weight: 600;
color: var(--text);
}
#section-partners #pt-clear {
padding: 8px 14px;
font-size: 12.5px;
font-weight: 600;
background: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
color: var(--text-faint, #64748b);
transition: background .12s, color .12s;
}
#section-partners #pt-clear:hover {
background: #f1f5f9;
color: var(--text);
}
/* Card grid — slightly tighter min width for premium density */
#section-partners .pt-grid {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
#section-partners .pt-card {
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05),
0 1px 2px rgba(15, 23, 42, 0.03);
transition: transform .15s cubic-bezier(.4,.0,.2,1),
box-shadow .15s cubic-bezier(.4,.0,.2,1),
border-color .15s ease;
}
#section-partners .pt-card:hover {
transform: translateY(-2px);
border-color: var(--accent);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10),
0 4px 8px rgba(15, 23, 42, 0.04);
}
#section-partners .pt-card-avatar {
background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
border-radius: 12px;
font-size: 20px;
box-shadow: 0 2px 6px rgba(146, 64, 14, 0.10);
}
#section-partners .pt-card-name {
font-size: 15px;
letter-spacing: -0.2px;
}
/* Empty state — hero, centered, with icon */
#section-partners .empty-state {
background: #fff;
border: 1px dashed var(--border);
border-radius: 16px;
padding: 64px 24px;
text-align: center;
margin-top: 8px;
position: relative;
}
#section-partners .empty-state::before {
content: "🤝";
display: block;
font-size: 56px;
line-height: 1;
margin-bottom: 18px;
filter: grayscale(0.2);
}
#section-partners .empty-state .es-title {
font-size: 18px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.3px;
margin-bottom: 8px;
}
#section-partners .empty-state .es-sub {
font-size: 13.5px;
color: var(--text-faint, #64748b);
max-width: 360px;
margin: 0 auto;
line-height: 1.5;
}
#section-partners .empty-state .es-sub b {
color: var(--accent-strong, #d97706);
font-weight: 700;
}
/* Deal modal — Coverage panel. Shows demand vs filled with a progress
bar, then In-house / Partner / Gap rows with the actual filler
names as chips. */
.dc-block {
background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.dc-loading,
.dc-empty {
font-size: 12.5px; color: var(--text-faint, #64748b);
padding: 6px 0;
}
.dc-empty b { color: var(--text); }
.dc-head { margin-bottom: 14px; }
.dc-title {
font-size: 13px; color: var(--text);
margin-bottom: 6px;
}
.dc-title b {
font-size: 16px; font-weight: 800; color: var(--text);
letter-spacing: -0.2px;
}
.dc-bar {
height: 8px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.dc-bar-fill {
height: 100%;
background: linear-gradient(to right, #15803d 0%, #16a34a 100%);
transition: width .3s cubic-bezier(.4,.0,.2,1);
}
.dc-grid {
display: flex; flex-direction: column;
gap: 8px;
}
.dc-row {
display: grid;
grid-template-columns: 36px 80px 1fr;
align-items: center;
gap: 12px;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
}
.dc-row.dc-gap-full { border-color: #bbf7d0; background: #f0fdf4; }
.dc-row.dc-gap-open { border-color: #fed7aa; background: #fffbeb; }
.dc-row-n {
font-size: 22px; font-weight: 800;
letter-spacing: -0.5px;
text-align: center;
font-variant-numeric: tabular-nums;
color: var(--text);
}
.dc-row.dc-gap-open .dc-row-n { color: #92400e; }
.dc-row.dc-gap-full .dc-row-n { color: #15803d; }
.dc-row-lab {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px;
color: var(--text-faint, #64748b);
}
.dc-row-detail {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.dc-row-none {
font-size: 12px; color: var(--text-faint, #94a3b8); font-style: italic;
}
.dc-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
font-size: 11.5px; font-weight: 600;
border-radius: 999px;
letter-spacing: -0.05px;
}
.dc-chip-emp {
background: #dbeafe; color: #1e3a8a;
}
.dc-chip-partner {
background: #fef3c7; color: #92400e;
cursor: pointer;
border: 1.5px dashed #fdba74;
transition: background .12s, transform .12s;
}
.dc-chip-partner:hover {
background: #fed7aa;
transform: translateY(-1px);
}
.dc-chip-x {
margin-left: 2px;
font-weight: 700;
opacity: 0.55;
}
.dc-chip-partner:hover .dc-chip-x { opacity: 1; }
.dc-actions {
margin-top: 10px;
display: flex; justify-content: flex-end;
}
/* Calendar — Partner rows + partner-fill bars. Distinct visual so the
operator instantly reads "this slot is subcontracted, not internal." */
.rcal-row.is-partner-row {
background: linear-gradient(to right, #fffbeb 0%, transparent 220px);
}
.rcal-row.is-partner-row .rcal-row-l1 { letter-spacing: -0.1px; }
.rcal-row-avatar.is-partner {
width: 30px; height: 30px; border-radius: 50%;
background: #fef3c7;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex: 0 0 auto;
}
.rcal-bar.is-partner {
border: 1.5px dashed rgba(15, 23, 42, 0.45) !important;
box-shadow: 0 1px 3px rgba(146, 64, 14, 0.10);
}
.rcal-bar-handshake {
font-size: 13px;
flex: 0 0 auto;
filter: grayscale(0);
}
.rcal-bar-workers {
font-size: 10.5px;
font-weight: 800;
background: rgba(15, 23, 42, 0.18);
color: inherit;
padding: 1px 5px;
border-radius: 4px;
flex: 0 0 auto;
}
/* "Log a call" inline form */
.d-call {
display: grid; grid-template-columns: 1fr 1fr auto;
gap: 8px; align-items: center; margin-top: 6px;
}
.d-call input {
padding: 7px 10px; font: inherit; font-size: 12.5px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--surface-2);
}
.d-call input:focus {
outline: none; background: #fff; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.d-call button { padding: 7px 14px; font-size: 12.5px; }
@media (max-width: 540px) { .d-call { grid-template-columns: 1fr; } }
.activity { list-style: none; display: flex; flex-direction: column; gap: 0; }
.activity li {
position: relative; padding: 0 0 14px 20px; font-size: 12px; color: var(--text-dim);
}
.activity li::before {
content: ""; position: absolute; left: 3px; top: 4px;
width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.activity li::after {
content: ""; position: absolute; left: 6px; top: 12px; bottom: 0;
width: 1px; background: var(--border);
}
.activity li:last-child { padding-bottom: 0; }
.activity li:last-child::after { display: none; }
.activity .a-type { color: var(--text); font-weight: 600; }
.activity .a-time { color: var(--text-faint); font-size: 11px; }
.activity-empty { color: var(--text-faint); font-size: 12px; }
.d-text { font-size: 13.5px; line-height: 1.7; color: var(--text); }
.d-description {
font-family: var(--mono); font-size: 12px; line-height: 1.65;
color: var(--text-dim); white-space: pre-wrap; word-break: break-word;
max-height: 360px; overflow-y: auto; background: var(--surface-2);
border: 1px solid var(--border); padding: 14px; border-radius: var(--r-sm);
}
/* ---------- Modal ---------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(20, 24, 31, .48);
backdrop-filter: blur(3px);
display: flex; align-items: center; justify-content: center; z-index: 60;
}
.modal {
position: relative;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 28px; width: 370px;
box-shadow: var(--shadow-lg);
max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
}
.modal.modal-wide { width: 800px; max-width: 94vw; }
.modal.modal-narrow { width: 340px; padding: 22px 24px; }
.modal h2 { font-size: 18px; margin-bottom: 20px; letter-spacing: -0.4px; }
.modal h3.email-h {
font-size: 10.5px; color: var(--text-faint); margin-bottom: 14px;
text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.email-cols { display: flex; gap: 26px; }
.email-col { flex: 1; min-width: 0; }
.row2 { display: flex; gap: 11px; }
.row2 .filter-group { flex: 1; }
.modal textarea { resize: vertical; font-family: var(--mono); font-size: 12px; line-height: 1.55; }
.modal .filter-group { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.modal .filter-label {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700;
}
.chk {
display: flex; align-items: center; gap: 9px; font-size: 12.5px;
color: var(--text); margin: 8px 0; cursor: pointer;
}
.chk input { accent-color: var(--accent); width: 15px; height: 15px; }
.hint { font-size: 11.5px; color: var(--text-faint); line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal-msg { margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.mail-preview {
width: 100%; height: 360px; margin-top: 8px; background: #fff;
border: 1px solid var(--border); border-radius: var(--r-sm);
}
/* ---------- Direct email composer ---------- */
.cmp-lead { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.cmp-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.cmp-field textarea { font-family: var(--sans); font-size: 13px; }
.cmp-search-wrap { position: relative; }
.cmp-search-wrap.hidden { display: none; }
.cmp-results {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); box-shadow: var(--shadow-xs);
max-height: 320px; overflow-y: auto;
}
.cmp-results.hidden { display: none; }
.cmp-result {
display: flex; flex-direction: column; gap: 2px;
width: 100%; text-align: left; border: none; background: transparent;
border-bottom: 1px solid var(--border);
cursor: pointer; padding: 9px 12px; font: inherit;
}
.cmp-result:last-child { border-bottom: none; }
.cmp-result:hover { background: var(--surface-hover); }
.cmp-r-co { font-size: 13px; font-weight: 600; color: var(--text); }
.cmp-r-meta { font-size: 11.5px; color: var(--text-faint); }
.cmp-r-mail { font-size: 11.5px; color: var(--accent-strong); font-family: var(--mono); }
.cmp-r-mail.off { color: var(--text-faint); font-family: var(--sans); font-style: italic; }
.cmp-result-empty { padding: 9px 12px; font-size: 12px; color: var(--text-faint); }
.cmp-quick-head {
padding: 8px 12px 6px; font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint);
border-bottom: 1px solid var(--border);
}
.cmp-r-tag {
margin-left: 8px; font-size: 9.5px; font-weight: 700; vertical-align: middle;
text-transform: uppercase; letter-spacing: .3px;
color: #92400e; background: #fef3c7; border-radius: 4px; padding: 1px 5px;
}
.cmp-warn {
margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-sm);
font-size: 12.5px; line-height: 1.45;
color: #92400e; background: #fef3c7; border: 1px solid #fcd34d;
}
.cmp-warn.hidden { display: none; }
.kcard-ch-their { color: #4338ca; background: #e0e7ff; font-weight: 700; }
.kcard-ch-yours { color: #b91c1c; background: #fee2e2; font-weight: 700; }
.kcard-ch-mtg { color: #1e3a8a; background: #dbeafe; font-weight: 600; }
.kcard-ch-held { color: #14532d; background: #bbf7d0; font-weight: 600; }
.kcard-ch-offer { color: #5b21b6; background: #ede9fe; font-weight: 600; }
.kcard-ch-segment { color: #831843; background: #fce7f3; font-weight: 600; }
.d-state-pill { margin-top: 6px; }
.d-state-pill.hidden { display: none; }
#d-handled-btn.is-handled { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
/* ---------- Conversation thread (Gmail-style) ---------- */
.cv-thread { display: flex; flex-direction: column; gap: 8px; }
.cv-empty { color: var(--text-faint); font-size: 12.5px; padding: 10px 2px; }
.cv-msg {
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); overflow: hidden;
/* The parent .cv-thread is a flex column; without this the cards shrink
to fit when total content overflows the scrollable container,
squishing each card down to head-only height and clipping the body. */
flex-shrink: 0;
}
.cv-msg.cv-in { border-left: 3px solid var(--green); }
.cv-msg.cv-out { border-left: 3px solid var(--accent); }
.cv-head {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 9px 11px; background: transparent; border: none;
/* All cards stay open now — the head is a label, not an expand toggle. */
cursor: default;
text-align: left; font: inherit;
}
.cv-avatar {
flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff;
}
.cv-in .cv-avatar { background: var(--green); }
.cv-out .cv-avatar { background: var(--accent); }
.cv-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cv-who { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cv-tag {
margin-left: 7px; font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: .3px; color: var(--text-dim); background: var(--surface-3);
border-radius: 4px; padding: 1px 5px; vertical-align: middle;
}
.cv-snip {
font-size: 11.5px; color: var(--text-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cv-date { flex: 0 0 auto; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
/* Bodies always visible now — every card mounts expanded. */
.cv-body { display: block; border-top: 1px solid var(--border); padding: 10px 11px; }
/* "Jump to newest" pill: sticks to the top of the scrollable container
while the operator scrolls through older messages, then auto-hides
when they're already near the bottom (within 80px). */
.cv-jump-wrap {
position: sticky; top: 6px; z-index: 5;
display: flex; justify-content: center; pointer-events: none;
margin-bottom: 8px;
}
.cv-jump-wrap.hidden { display: none; }
.cv-jump {
pointer-events: auto;
background: var(--accent); color: white; border: none;
border-radius: 999px; padding: 6px 14px; font: inherit;
font-size: 12px; font-weight: 600; cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: background 0.12s, transform 0.06s;
}
.cv-jump:hover { background: var(--accent-strong); }
.cv-jump:active { transform: translateY(1px); }
.cv-frame {
width: 100%; height: 300px; border: none; background: #fff; border-radius: 4px;
}
.cv-text {
margin: 0; white-space: pre-wrap; word-break: break-word;
font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--text);
}
.cv-quote-btn {
margin-top: 8px; border: none; background: var(--surface-3); cursor: pointer;
font: inherit; font-size: 11px; color: var(--text-dim);
padding: 3px 9px; border-radius: 10px;
}
.cv-quote-btn:hover { color: var(--text); }
.cv-attach {
display: inline-block; max-width: 100%; font-size: 11px;
color: var(--text-dim); white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;
}
/* ---------- Reply attachments (Inbox + Composer) ---------- */
.reply-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.reply-attachments:not(:empty) { margin: 4px 0 6px; }
.attach-chip {
display: inline-flex; align-items: center; gap: 7px;
background: var(--surface-3); border: 1px solid var(--border);
border-radius: 14px; padding: 3px 4px 3px 10px; font-size: 12px;
color: var(--text);
}
.attach-chip .attach-name { font-weight: 600; }
.attach-chip .attach-size { color: var(--text-faint); font-size: 11px; }
.attach-x {
border: none; background: transparent; cursor: pointer;
color: var(--text-faint); font-size: 16px; line-height: 1;
width: 20px; height: 20px; border-radius: 50%; padding: 0;
}
.attach-x:hover { background: var(--surface); color: #b91c1c; }
.reply-attach-btn { cursor: pointer; }
.cmp-attach-bar { margin-bottom: 10px; }
/* ---------- Inbox (two-pane reply workspace) ---------- */
#section-inbox { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; }
.inbox { display: flex; flex: 1; min-height: 0; }
.inbox-list-col {
flex: 0 0 380px; width: 380px; border-right: 1px solid var(--border);
display: flex; flex-direction: column; min-height: 0; background: var(--surface);
}
.inbox-list-head {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
gap: 8px;
}
.inbox-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.inbox-tab {
border: none; background: transparent; cursor: pointer; font: inherit;
font-size: 12px; font-weight: 600; color: var(--text-dim);
padding: 5px 10px; border-radius: 6px;
}
.inbox-tab.active { background: var(--accent-weak); color: var(--accent-strong); }
.inbox-list { flex: 1; overflow-y: auto; min-height: 0; }
.inbox-item {
display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
border: none; border-bottom: 1px solid var(--border); background: transparent;
cursor: pointer; padding: 10px 13px; font: inherit;
}
.inbox-item:hover { background: var(--surface-hover); }
.inbox-item.active { background: var(--accent-weak); }
.inbox-item-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.inbox-item-who { font-size: 12.5px; font-weight: 600; color: var(--text); }
.inbox-item.needs .inbox-item-who::before {
content: "●"; color: var(--accent); font-size: 9px; margin-right: 6px; vertical-align: middle;
}
.inbox-item-when { font-size: 10.5px; color: var(--text-faint); white-space: nowrap; }
.inbox-item-co { font-size: 11.5px; color: var(--accent-strong); font-weight: 600; }
.inbox-item-snip {
font-size: 11.5px; color: var(--text-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.inbox-empty { color: var(--text-faint); font-size: 13px; padding: 28px 20px; text-align: center; }
.inbox-pane-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.inbox-pane-title { font-size: 16px; margin: 0; letter-spacing: -0.3px; }
.inbox-pane-sub { font-size: 12px; color: var(--text-dim); margin: 3px 0 0; }
/* The lead name + company line as one big clickable area → opens the
lead's detail panel. Subtle hover to signal it's interactive without
shouting. */
.inbox-pane-id-btn {
flex: 1; text-align: left; background: transparent; border: none;
padding: 2px 6px; margin: -2px -6px; border-radius: 6px;
cursor: pointer; font: inherit; color: inherit;
transition: background 0.12s;
}
.inbox-pane-id-btn:hover { background: var(--surface-2); }
.inbox-pane-id-btn:hover .inbox-pane-title { color: var(--accent-strong); }
.inbox-open-arrow { flex: 0 0 auto; align-self: center; }
.inbox-thread { flex: 1; overflow-y: auto; min-height: 0; padding: 16px 18px; }
.inbox-reply {
flex: 0 0 auto; border-top: 1px solid var(--border); padding: 12px 18px;
display: flex; flex-direction: column; gap: 8px; background: var(--surface-2);
}
.inbox-reply input, .inbox-reply textarea { width: 100%; }
.inbox-reply textarea { font-family: var(--sans); font-size: 13px; resize: vertical; }
.inbox-reply-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.inbox-reply-foot .hint { flex: 1; }
/* Inbox confirm-before-send overlay — iframe sits between the meta line
and the action row, so the operator sees exactly what the recipient
will see before hitting Confirm. */
.isc-preview {
width: 100%; height: 420px; border: 1px solid var(--border);
border-radius: 4px; background: #fff;
}
/* Kanban-card bulk-select checkbox — small square in the top-left
corner of each card. Operator ticks the cards they want included in
the daily action overview. .is-on / .is-checked tints the card so
the selection is visible at a glance. */
.kcard-check {
position: absolute; top: 6px; left: 6px;
width: 18px; height: 18px; display: inline-flex;
align-items: center; justify-content: center; cursor: pointer;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 4px; z-index: 2;
}
.kcard-check input { margin: 0; cursor: pointer; }
.kcard-check.is-on { background: var(--accent); border-color: var(--accent); }
.kcard-check.is-on input { accent-color: #fff; }
.kcard { position: relative; }
.kcard.is-checked { background: #fff7f0; border-color: var(--accent); }
/* Make room for the checkbox so the title doesn't bump under it. */
.kcard-title { padding-left: 22px; }
/* Per-column "Select all visible / Clear" toggle next to the count. */
.kcol-bulk-toggle {
margin-left: auto; font-size: 10.5px; padding: 2px 8px;
border-radius: 999px; background: var(--surface-3); color: var(--muted);
border: none; cursor: pointer; font-weight: 600;
}
.kcol-bulk-toggle:hover { background: var(--accent); color: #fff; }
.kcol-head { display: flex; align-items: center; gap: 8px; }
/* Floating bulk-overview bar — pinned to the bottom of the leads
section (works in BOTH kanban and datasheet). Slides in when ≥1
lead is selected. */
.leads-bulk-bar {
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 14px;
padding: 10px 18px; background: var(--text); color: #fff;
border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
z-index: 1500;
}
.leads-bulk-bar .lbb-count { font-size: 12.5px; font-weight: 500; }
.leads-bulk-bar .lbb-count b { font-weight: 700; }
.leads-bulk-bar .btn { font-weight: 600; }
.leads-bulk-bar .btn-ghost {
color: #fff; background: transparent;
border: 1px solid rgba(255,255,255,0.3);
}
.leads-bulk-bar .btn-ghost:hover { background: rgba(255,255,255,0.1); }
/* Recruitment / candidate modal — premium two-column layout designed
to read like a real candidate profile. Hero strip up top, photo +
contact card on the left, editable form on the right. */
.recr-modal { max-width: 1040px; }
/* HERO — name, role/email subline, stage pill + chips. */
.recr-hero {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; padding: 0 0 14px;
border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.recr-hero-main { min-width: 0; }
.recr-hero h2 {
font-size: 22px; font-weight: 700; color: var(--text);
margin: 0; letter-spacing: -0.3px;
}
.recr-hero-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.recr-hero-meta {
display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
flex-shrink: 0;
}
.recr-hero-stage {
display: inline-block; font-size: 12px; padding: 5px 12px;
border-radius: 999px; font-weight: 700; letter-spacing: 0.2px;
background: var(--surface-3); color: var(--muted);
}
.recr-hero-stage.st-new { background: #e5e9f5; color: #4f5b8f; }
.recr-hero-stage.st-screened { background: #fff3d6; color: #8a6b00; }
.recr-hero-stage.st-interviewed { background: #d2eaff; color: #1356a0; }
.recr-hero-stage.st-offer_sent { background: #ffe6d6; color: #a8531c; }
.recr-hero-stage.st-hired { background: #d6f0e2; color: #0d6e3a; }
.recr-hero-stage.st-not_qualified { background: #fbe1dc; color: #a8341c; }
.recr-hero-stage.st-rejected { background: #fbe1dc; color: #a8341c; }
.recr-hero-stage.st-withdrew { background: var(--surface-3); color: var(--muted); }
.recr-hero-chip {
font-size: 11px; padding: 4px 10px; border-radius: 999px;
background: var(--surface-3); color: var(--muted); font-weight: 600;
}
.recr-hero-chip.recr-hero-emp { background: #d6f0e2; color: #0d6e3a; }
/* LAYOUT — sidebar + main form. */
.recr-layout {
display: grid; grid-template-columns: 240px 1fr; gap: 22px;
align-items: start;
}
.recr-sidebar { display: flex; flex-direction: column; gap: 12px; }
/* Profile picture — square frame with subtle border + shadow. */
.recr-pic-wrap {
width: 100%; aspect-ratio: 1 / 1; border-radius: 12px;
background: var(--surface-2); overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.recr-pic-wrap.clickable { cursor: pointer; transition: transform 0.15s, border-color 0.15s, background 0.15s; }
.recr-pic-wrap.clickable:hover { transform: scale(1.02); }
.recr-pic-wrap img { width: 100%; height: 100%; object-fit: cover; }
.recr-pic-empty {
color: var(--text-faint); font-size: 13px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 16px;
width: 100%; height: 100%;
text-align: center;
}
.recr-pic-empty .recr-avatar-big {
width: 96px !important; height: 96px !important;
font-size: 32px !important;
}
.recr-pic-upload-cta {
display: flex; flex-direction: column; align-items: center;
gap: 4px; color: #475569;
padding: 12px 14px;
border: 1.5px dashed #cbd5e1;
border-radius: 10px;
background: rgba(255, 255, 255, 0.7);
transition: border-color 0.15s, background 0.15s, color 0.15s;
width: 100%; max-width: 240px;
}
.recr-pic-wrap.clickable:hover .recr-pic-upload-cta {
border-color: var(--accent-strong, #d97706);
background: #fff;
color: var(--accent-strong, #d97706);
}
.recr-pic-upload-icon { font-size: 22px; line-height: 1; }
.recr-pic-upload-lab {
font-size: 13px; font-weight: 600; letter-spacing: -0.1px;
}
.recr-pic-upload-sub {
font-size: 10.5px; color: #94a3b8; font-weight: 500;
}
.recr-pic-upload-cta-mute {
border-style: solid; border-color: #e5eaf1; cursor: default;
}
.recr-pic-wrap.clickable:hover .recr-pic-upload-cta-mute {
border-color: #e5eaf1; background: rgba(255, 255, 255, 0.7); color: #475569;
}
/* Contact info — icon-driven list with subtle hover. */
.recr-info {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; overflow: hidden;
}
.recr-info-head {
font-size: 10.5px; color: var(--text-faint); text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 700;
padding: 9px 12px 4px;
}
.recr-info-row {
display: flex; gap: 10px; align-items: center;
padding: 8px 12px; font-size: 12.5px; color: var(--text);
text-decoration: none;
border-top: 1px solid var(--border);
}
.recr-info-row:first-of-type { border-top: none; }
a.recr-info-row:hover { background: var(--surface-2); color: var(--accent-strong); }
.recr-info-ic {
width: 18px; flex-shrink: 0; text-align: center; font-size: 13px;
}
.recr-info-val { font-weight: 500; min-width: 0; word-break: break-word; }
/* File action buttons — proper button feel, not text links. */
.recr-files { display: flex; flex-direction: column; gap: 8px; }
.recr-file-btn {
display: flex; gap: 10px; align-items: center;
padding: 10px 14px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
text-decoration: none; transition: all 0.15s;
}
.recr-file-btn:hover {
background: var(--accent); border-color: var(--accent);
color: #fff;
}
.recr-file-btn:hover .recr-file-sub { color: rgba(255,255,255,0.7); }
.recr-file-ic { font-size: 18px; flex-shrink: 0; }
.recr-file-txt { display: flex; flex-direction: column; min-width: 0; }
.recr-file-txt b { font-size: 13px; font-weight: 700; color: var(--text); }
.recr-file-btn:hover .recr-file-txt b { color: #fff; }
.recr-file-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* Form sections — clear hierarchy via uppercase section headers. */
.recr-form { display: flex; flex-direction: column; gap: 4px; }
.recr-section-h {
font-size: 11px; font-weight: 800; color: var(--text-faint);
text-transform: uppercase; letter-spacing: 0.6px;
margin: 16px 0 6px;
padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.recr-section-h:first-child { margin-top: 0; }
/* Recruitment stat strip — override the Deals two-row column
layout (`.deals-stat-strip` defaults to flex-direction: column).
Recruitment only has one set of stats; they read as a horizontal
row of rounded square cards with stage-tinted accents. */
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip {
display: flex; flex-direction: row; flex-wrap: wrap;
gap: 10px; flex: 1 1 auto; align-items: stretch;
padding: 0; background: transparent; border: none;
}
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip .t-stat {
position: relative;
min-width: 120px; flex: 1 0 120px; max-width: 180px;
padding: 14px 16px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
display: flex; flex-direction: column; gap: 4px;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
overflow: hidden;
cursor: pointer;
}
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip .t-stat:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Drill-down popover — opens under a stat tile and lists the
candidates that match the bucket. Click a row to open the
candidate detail modal; Esc / outside-click closes. */
.stat-popover {
position: absolute;
width: 360px;
max-height: 60vh;
overflow-y: auto;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
z-index: 100;
padding: 10px 12px 12px;
}
.stat-popover-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 8px;
margin-bottom: 6px;
border-bottom: 1px solid #f1f5f9;
}
.stat-popover-head h3 {
margin: 0; font-size: 13px; font-weight: 700; color: var(--text);
letter-spacing: -0.1px;
}
.stat-popover-close {
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; padding: 0 4px;
color: var(--text-faint, #94a3b8);
}
.stat-popover-close:hover { color: var(--text); }
.stat-popover-list {
display: flex; flex-direction: column; gap: 2px;
}
.stat-popover-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px;
border-radius: 8px;
text-decoration: none;
color: var(--text);
}
.stat-popover-row:hover { background: #f8fafc; }
.stat-popover-row-text { min-width: 0; flex: 1 1 auto; }
.stat-popover-row-text b {
display: block; font-size: 13px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-popover-row-text span {
display: block; font-size: 11.5px; color: var(--text-faint, #64748b);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-top: 1px;
}
.stat-popover-empty {
font-size: 12px; color: var(--text-faint, #94a3b8);
padding: 14px 6px; text-align: center;
}
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip .t-stat::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 3px; background: var(--accent); opacity: 0.85;
}
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip .t-stat:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15,23,42,0.08);
border-color: var(--accent);
}
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip .t-stat-val {
font-size: 26px; font-weight: 700; line-height: 1.05;
letter-spacing: -0.6px; color: var(--text);
font-variant-numeric: tabular-nums;
}
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip .t-stat-lab {
font-size: 10.5px; font-weight: 700;
color: var(--text-faint); text-transform: uppercase;
letter-spacing: .6px; margin-top: 2px;
}
/* Stage-tinted top accent per stat card — palette mirrors the
kanban column colors so the eye carries meaning from stats →
columns. Targeted by `data-tile` so the colour stays stable
regardless of which mode (candidates vs employees) the tile is
rendered in. */
#section-recruitment .t-stat[data-tile="new"]::before { background: #4f5b8f; }
#section-recruitment .t-stat[data-tile="screened"]::before { background: #f59e0b; }
#section-recruitment .t-stat[data-tile="interviewed"]::before { background: #3b82f6; }
#section-recruitment .t-stat[data-tile="hired"]::before { background: #15803d; }
#section-recruitment .t-stat[data-tile="employees"]::before { background: #0d9488; }
#section-recruitment .t-stat[data-tile="available"]::before { background: #15803d; }
#section-recruitment .t-stat[data-tile="booked"]::before { background: #6366f1; }
#section-recruitment .t-stat[data-tile="working"]::before { background: #f59e0b; }
#section-recruitment .t-stat[data-tile="assigned"]::before { background: #f59e0b; }
/* Role tiles (Calendar mode): accent color is the role's `fg` from
ROLE_VISUALS, passed inline as `--tile-accent`. Grey fallback for
unknown/custom roles. */
#section-recruitment .t-stat[data-tile^="role-"]::before { background: var(--tile-accent, #94a3b8); }
#section-recruitment .deals-head { margin-bottom: 14px; align-items: flex-start; }
/* Compact, information-dense kanban cards. Smaller padding +
tighter typography fits ~30% more cards on screen before scroll,
without losing legibility of the candidate's name/role. */
#section-recruitment .deals-board {
grid-auto-columns: minmax(220px, 1fr);
gap: 8px;
}
#section-recruitment .dcard {
padding: 9px 11px;
border-radius: 9px;
border: 1px solid var(--border);
background: var(--surface);
transition: border-color .14s ease, box-shadow .14s ease, transform .08s ease;
cursor: pointer;
user-select: none;
touch-action: manipulation;
}
/* Belt-and-suspenders: make EVERY child of a recruitment card
"transparent" to pointer events, so the click can only ever land
on the card itself (which is what the delegation listens for).
Buttons or inputs inside a card would need to re-enable
pointer-events explicitly. */
#section-recruitment .recr-card * { pointer-events: none; }
#section-recruitment .dcard:hover {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(31, 41, 55, 0.08);
transform: translateY(-1px);
}
#section-recruitment .dcard:active { transform: translateY(0); }
#section-recruitment .recr-card .dcard-title {
font-size: 12.5px; font-weight: 600;
letter-spacing: -0.1px; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recr-card-id {
display: inline-block; margin-left: 6px;
font-size: 10px; font-weight: 600; color: #94a3b8;
letter-spacing: 0.2px;
}
/* Recruitment filter bar — premium-feel pill row. Sits between
deals-head + board/list. Subtle card background visually groups the
controls; inputs sit inline at a compact height, never go full-width
(overrides the global input/select width:100%). Wraps gracefully on
narrow viewports. */
.recr-filterbar {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0 0 14px;
padding: 6px;
align-items: center;
background: #f8fafc;
border: 1px solid #e5eaf1;
border-radius: 10px;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) inset;
}
.recr-filterbar .recr-f-input {
/* Hard override of the global input width:100% so the inputs sit
inline as compact pills. */
width: auto !important;
height: 30px; padding: 0 11px;
font-size: 12px; line-height: 30px;
font-family: var(--sans);
color: #0f172a;
border: 1px solid #dbe2ec;
border-radius: 7px;
background: #fff;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
transition: border-color .12s, box-shadow .12s;
}
.recr-filterbar .recr-f-input:hover { border-color: #cbd5e1; }
.recr-filterbar .recr-f-input:focus {
outline: none;
border-color: #94a3b8;
box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18);
}
.recr-filterbar input.recr-f-input::placeholder { color: #94a3b8; }
.recr-filterbar select.recr-f-input {
/* Pill-style select — re-add a subtle caret since appearance:none
strips the native one. */
padding-right: 26px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
cursor: pointer;
}
.recr-filterbar #recr-f-search { width: 220px; }
.recr-filterbar #recr-f-cert { width: 240px; }
.recr-filterbar #recr-f-eu { width: 130px; }
.recr-filterbar #recr-f-exp { width: 160px; }
.recr-filterbar #recr-f-clear,
.recr-filterbar #recr-ef-clear {
margin-left: auto; height: 30px;
font-size: 11.5px; padding: 0 12px;
color: #64748b; font-weight: 500;
border-radius: 7px;
}
.recr-filterbar #recr-f-clear:hover,
.recr-filterbar #recr-ef-clear:hover {
background: rgba(15, 23, 42, 0.04); color: #0f172a;
}
/* Employees-mode filter widths — staffing-focused, 5 controls fit
inline on a typical desktop. */
.recr-filterbar #recr-ef-search { width: 190px; }
.recr-filterbar #recr-ef-availability { width: 150px; }
/* Multi-select dropdown: trigger button + floating checkbox popover.
The trigger sits in the filter row like any other pill input; the
popover anchors to it. */
.recr-ms { position: relative; display: inline-block; }
.recr-ms-btn {
width: 170px;
display: inline-flex; align-items: center; justify-content: space-between;
gap: 8px; cursor: pointer; text-align: left;
}
.recr-ms[data-recr-ms="locations"] .recr-ms-btn { width: 200px; }
.recr-ms[data-recr-ms="roles"] .recr-ms-btn { width: 210px; }
.recr-ms[data-recr-ms="shifts"] .recr-ms-btn { width: 150px; }
.recr-ms[data-recr-ms="eus"] .recr-ms-btn { width: 140px; }
.recr-ms[data-recr-ms="exps"] .recr-ms-btn { width: 170px; }
.recr-ms[data-recr-ms="certs"] .recr-ms-btn { width: 200px; }
.recr-ms-btn .recr-ms-label {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recr-ms-btn.has-pick {
border-color: #94a3b8; background: #f1f5f9; color: #0f172a;
font-weight: 600;
}
.recr-ms-caret {
flex: 0 0 auto; font-size: 9px; color: #64748b;
}
.recr-ms-pop {
position: absolute; top: calc(100% + 6px); left: 0;
z-index: 50;
min-width: 240px; max-width: 320px;
max-height: 340px;
background: #fff;
border: 1px solid #dbe2ec;
border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
display: flex; flex-direction: column;
overflow: hidden;
}
.recr-ms-pop-head {
display: flex; align-items: center; gap: 6px;
padding: 8px 10px;
border-bottom: 1px solid #f1f5f9;
background: #fff;
position: sticky; top: 0; z-index: 2;
}
.recr-ms-pop-search {
flex: 1 1 auto; min-width: 0;
height: 28px; padding: 0 10px;
font-size: 12px;
border: 1px solid #dbe2ec; border-radius: 6px;
background: #fff;
width: auto !important;
}
.recr-ms-pop-search:focus {
outline: none; border-color: #94a3b8;
box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}
.recr-ms-pop-clear {
background: none; border: none; cursor: pointer;
font-size: 11px; color: #64748b; font-weight: 500;
padding: 4px 8px; border-radius: 4px;
flex: 0 0 auto;
}
.recr-ms-pop-clear:hover { background: #f1f5f9; color: #0f172a; }
.recr-ms-pop-list {
flex: 1 1 auto; overflow-y: auto;
padding: 4px 0;
}
.recr-ms-row {
display: flex; align-items: center; gap: 9px;
padding: 7px 12px;
cursor: pointer; font-size: 12.5px;
color: #0f172a;
}
.recr-ms-row:hover { background: #f8fafc; }
.recr-ms-row input[type=checkbox] {
width: 14px !important; height: 14px;
margin: 0; flex: 0 0 auto;
accent-color: var(--accent-strong, #d97706);
cursor: pointer;
}
.recr-ms-row-lab {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recr-ms-row-count {
flex: 0 0 auto; font-size: 11px; color: #94a3b8; font-weight: 500;
background: #f1f5f9; padding: 1px 7px; border-radius: 8px;
}
.recr-ms-empty {
padding: 14px; font-size: 12px; color: #94a3b8; text-align: center;
}
/* Custom combobox in the candidate modal (Role + Shifts). Input +
caret button + always-full popover. Replaces the datalist, which
filters options by typed text and hides everything that doesn't
match — useless when you want "show me every position you offer".
The popover sits absolutely positioned below the input. */
.recr-role-combo { position: relative; }
.recr-role-combo input {
width: 100%;
padding-right: 32px;
}
.recr-role-combo input[readonly] {
cursor: pointer;
background: var(--surface);
}
.recr-role-caret {
position: absolute; right: 4px; top: 50%;
transform: translateY(-50%);
width: 26px; height: 26px;
background: transparent; border: none;
color: #64748b; font-size: 11px;
cursor: pointer !important;
display: flex; align-items: center; justify-content: center;
border-radius: 4px;
}
.recr-role-caret:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }
.recr-role-pop {
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
z-index: 60;
max-height: 260px;
overflow-y: auto;
background: #fff;
border: 1px solid #dbe2ec;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
padding: 4px;
display: flex; flex-direction: column;
}
/* Role: single-pick rows (buttons) */
.recr-role-opt {
background: none; border: none; text-align: left;
padding: 8px 10px; font-size: 13px; color: #0f172a;
cursor: pointer; border-radius: 5px;
font-family: inherit;
}
.recr-role-opt:hover { background: #f1f5f9; }
.recr-role-opt.is-active {
background: var(--accent-tint, #fff7ed); color: var(--accent-strong, #d97706);
font-weight: 600;
}
/* Shifts: multi-pick rows (checkboxes) */
.recr-shifts-row {
display: flex; align-items: center; gap: 9px;
padding: 8px 10px; font-size: 13px; color: #0f172a;
cursor: pointer; border-radius: 5px;
}
.recr-shifts-row:hover { background: #f1f5f9; }
.recr-shifts-row input[type=checkbox] {
width: 14px !important; height: 14px;
margin: 0; flex: 0 0 auto;
accent-color: var(--accent-strong, #d97706);
cursor: pointer;
}
/* Recruitment Excel-style datasheet (List view). Sticky header,
click-to-sort columns, click-row to open modal. Mirrors the visual
density of the Leads datasheet without dragging in its full
reorder/bulk-select machinery. */
.recr-ds-wrap {
border: 1px solid var(--border, #e2e8f0);
border-radius: 8px;
background: #fff;
overflow: auto;
max-height: calc(100vh - 280px);
}
.recr-ds-table {
width: 100%; border-collapse: collapse;
font-size: 12.5px;
}
.recr-ds-table thead th {
position: sticky; top: 0; z-index: 1;
background: #f8fafc;
text-align: left; font-weight: 600;
color: #475569; font-size: 11.5px;
padding: 8px 10px; white-space: nowrap;
border-bottom: 1px solid var(--border, #e2e8f0);
cursor: pointer; user-select: none;
}
.recr-ds-table thead th:hover { background: #f1f5f9; color: #0f172a; }
.recr-ds-table thead th.active { color: #0f172a; }
.recr-ds-table tbody td {
padding: 8px 10px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
max-width: 240px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recr-ds-table tbody tr { cursor: pointer; }
.recr-ds-table tbody tr:hover { background: #f8fafc; }
.recr-ds-id { font-weight: 600; color: #94a3b8; font-size: 11.5px; }
.recr-ds-na { color: #cbd5e1; }
.recr-yn {
display: inline-block; padding: 2px 8px;
font-size: 11px; font-weight: 600;
border-radius: 10px;
background: #f1f5f9; color: #475569;
}
.recr-yn.recr-yn-yes { background: #d6f0e2; color: #0d6e3a; }
.recr-yn.recr-yn-no { background: #fde2e2; color: #b91c1c; }
/* Profile picture upload row in the candidate modal. */
.recr-upload-row {
display: flex; gap: 8px; align-items: center;
}
.recr-upload-row input[type="url"] { flex: 1 1 auto; min-width: 0; }
.recr-upload-row button { flex: 0 0 auto; white-space: nowrap; }
.recr-upload-hint {
margin: 4px 0 0; font-size: 11px; color: #94a3b8;
}
#section-recruitment .recr-card .dcard-sub {
font-size: 11px; color: var(--accent-strong);
font-weight: 600; margin-top: 1px; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Make the columns themselves feel less like grey boxes — soft
background, lighter borders, headers with a hairline gradient that
echoes the stage colour. */
.recr-kcol {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.recr-kcol .kcol-head {
padding: 9px 12px 8px;
background: linear-gradient(to bottom, var(--surface) 0%, var(--surface-2) 100%);
border-bottom: 1px solid var(--border);
position: relative;
font-size: 11.5px;
}
.recr-kcol .kcol-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: currentColor; opacity: 0.7;
}
.recr-kcol .kcol-dot { width: 9px; height: 9px; }
.recr-kcol .kcol-body { padding: 9px 8px; gap: 6px; }
.recr-kcol .kcol-count {
font-size: 11px; font-weight: 700;
background: var(--surface-3); color: var(--text-dim);
}
/* Per-stage colour for the recruitment columns. Drives both the dot
and the header underline accent (via `currentColor` on .kcol-head).*/
.recr-kcol[data-recr-stage="new"] { color: #4f5b8f; }
.recr-kcol[data-recr-stage="screened"] { color: #8a6b00; }
.recr-kcol[data-recr-stage="interviewed"] { color: #1356a0; }
.recr-kcol[data-recr-stage="offer_sent"] { color: #a8531c; }
.recr-kcol[data-recr-stage="hired"] { color: #0d6e3a; }
.recr-kcol[data-recr-stage="not_qualified"] { color: #a8341c; }
.recr-kcol[data-recr-stage="rejected"] { color: #a8341c; }
.recr-kcol[data-recr-stage="withdrew"] { color: #6b7280; }
.recr-kcol .kcol-head, .recr-kcol .kcol-head .kcol-count { color: var(--text); }
.recr-kcol[data-recr-stage="new"] .kcol-dot { background: #4f5b8f; }
.recr-kcol[data-recr-stage="screened"] .kcol-dot { background: #f59e0b; }
.recr-kcol[data-recr-stage="interviewed"] .kcol-dot { background: #3b82f6; }
.recr-kcol[data-recr-stage="offer_sent"] .kcol-dot { background: #ea7430; }
.recr-kcol[data-recr-stage="hired"] .kcol-dot { background: #15803d; }
.recr-kcol[data-recr-stage="not_qualified"] .kcol-dot { background: #dc2626; }
.recr-kcol[data-recr-stage="rejected"] .kcol-dot { background: #dc2626; }
.recr-kcol[data-recr-stage="withdrew"] .kcol-dot { background: #9ca3af; }
/* Card accents — a 3px stage-tinted left strip + a soft top edge so
the kanban reads as columns of distinct work, not a wall of grey. */
.recr-kcol[data-recr-stage="new"] .dcard { border-left: 3px solid #4f5b8f; }
.recr-kcol[data-recr-stage="screened"] .dcard { border-left: 3px solid #f59e0b; }
.recr-kcol[data-recr-stage="interviewed"] .dcard { border-left: 3px solid #3b82f6; }
.recr-kcol[data-recr-stage="offer_sent"] .dcard { border-left: 3px solid #ea7430; }
.recr-kcol[data-recr-stage="hired"] .dcard { border-left: 3px solid #15803d; }
.recr-kcol[data-recr-stage="not_qualified"] .dcard { border-left: 3px solid #dc2626; }
.recr-kcol[data-recr-stage="rejected"] .dcard { border-left: 3px solid #dc2626; }
.recr-kcol[data-recr-stage="withdrew"] .dcard { border-left: 3px solid #9ca3af; }
/* Compact card head — smaller avatar gap, single-row chips with
reduced padding so the card stays shallow. */
#section-recruitment .recr-card .recr-card-head { gap: 9px; align-items: center; }
#section-recruitment .recr-card .recr-card-headtxt { min-width: 0; }
#section-recruitment .recr-card .dcard-chips {
margin-top: 7px; gap: 3px;
display: flex; flex-wrap: wrap; align-items: center;
}
#section-recruitment .recr-card .dcard-ch {
font-size: 10px; padding: 1px 6px; line-height: 1.4;
border-radius: 6px;
}
/* Recruitment stat strip — already compact; soften with rounded
corners + a hairline gradient so it doesn't fight the kanban. */
#section-recruitment .deals-stat-strip,
#section-partners .deals-stat-strip {
border-radius: 10px;
background: linear-gradient(to right, var(--surface) 0%, var(--surface-2) 100%);
border: 1px solid var(--border);
padding: 4px 8px;
}
/* Empty-state in a recruitment column — friendlier copy treatment. */
.recr-kcol .kcol-empty {
font-size: 11.5px; color: var(--text-faint);
padding: 18px 10px; font-style: italic;
}
/* Drag target — a softer cyan-tinted wash instead of the default
accent-weak. Keeps the recruitment palette consistent. */
.recr-kcol.drop-target {
background: #eef6ff;
}
.recr-kcol.drop-target .kcol-body {
outline: 2px dashed #3b82f6; outline-offset: -8px; border-radius: 10px;
}
/* Candidates ⇄ Employees mode toggle. Sits at the top of the
recruitment section, above the stats strip. Larger, more
prominent than the view toggle since it switches the entire
working mode (pipeline vs roster). */
.recr-mode-toggle {
display: inline-flex; gap: 4px; padding: 4px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 999px; margin-bottom: 14px;
}
.recr-mode-toggle .tv-btn {
font-size: 12px; font-weight: 600; padding: 7px 16px;
border-radius: 999px; border: none; background: transparent;
color: var(--text-dim); cursor: pointer; transition: all .14s ease;
}
.recr-mode-toggle .tv-btn:hover { color: var(--text); }
.recr-mode-toggle .tv-btn.active {
background: var(--surface); color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Employees roster — a borderless table of hired candidates with
their current job assignment. Layout: who | contact | status |
assignment | actions. Rows clickable; head row carries the
column labels in muted caps. */
.recr-employees { padding: 4px 0; }
.emp-table {
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface); overflow: hidden;
}
.emp-row {
display: grid;
grid-template-columns: 2fr 1.4fr 110px 2fr auto;
gap: 14px; align-items: center;
padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.emp-row:last-child { border-bottom: none; }
.emp-row-head {
background: var(--surface-2); font-size: 10.5px;
font-weight: 700; color: var(--text-faint);
text-transform: uppercase; letter-spacing: .5px;
padding: 8px 16px;
}
.emp-row-head .emp-row-who,
.emp-row-head .emp-row-contact,
.emp-row-head .emp-row-status,
.emp-row-head .emp-row-assignment { padding: 0; }
.emp-row-who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.emp-row-name { min-width: 0; }
.emp-row-name-l1 {
font-size: 13.5px; font-weight: 600; color: var(--text);
letter-spacing: -0.1px;
}
.emp-row-name-l2 {
font-size: 11.5px; color: var(--accent-strong);
font-weight: 600; margin-top: 2px;
}
.emp-row-contact {
font-size: 12px; color: var(--text-dim);
word-break: break-word;
}
.emp-status {
font-size: 11px; font-weight: 700; padding: 4px 9px;
border-radius: 999px; display: inline-block;
letter-spacing: 0.2px;
}
.emp-free { background: #d6f0e2; color: #0d6e3a; }
.emp-busy { background: #fff3d6; color: #8a6b00; }
/* Inline editable availability — colored "pill-select" that mimics
the static pill so the row reads consistently whether the status
is read-only (assigned) or editable (unassigned). */
.emp-status-select {
width: auto !important;
appearance: none; -webkit-appearance: none; -moz-appearance: none;
border: none;
cursor: pointer;
padding: 4px 22px 4px 9px;
font-family: inherit;
background-repeat: no-repeat;
background-position: right 7px center;
background-image: url("data:image/svg+xml;utf8,");
transition: filter 0.12s;
}
.emp-status-select:hover { filter: brightness(0.96); }
.emp-status-select:focus { outline: 2px solid rgba(148, 163, 184, 0.45); outline-offset: 1px; }
.emp-status-available { background-color: #d6f0e2; color: #0d6e3a; }
.emp-status-occupied { background-color: #fff3d6; color: #8a6b00; }
/* Phase 6 roster statuses — derived from the assignments table. Colors
match the stat-strip tile accents so the eye carries meaning from
"5 Booked" tile → which rows are Booked. */
.emp-status-booked { background-color: #dbeafe; color: #1e3a8a; }
.emp-status-working { background-color: #fef3c7; color: #92400e; }
.emp-assign-link {
display: block; text-decoration: none; color: var(--text);
font-size: 12.5px; line-height: 1.35;
}
a.emp-assign-link:hover b { color: var(--accent-strong); }
.emp-assign-sub {
display: block; font-size: 11px; color: var(--text-dim);
margin-top: 2px;
}
.emp-assign-none {
color: var(--text-faint); font-style: italic;
}
.emp-row-actions {
display: flex; gap: 6px; justify-content: flex-end;
}
/* Lead-detail "Assigned employee" block — the currently-assigned
employee shown as a compact pick chip above the change dropdown. */
.d-assigned-pick {
display: flex; gap: 10px; align-items: center;
padding: 10px 12px; margin-bottom: 8px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: 8px;
}
.d-assigned-pick-txt { min-width: 0; }
.d-assigned-pick-name {
font-size: 13px; font-weight: 600; color: var(--text);
}
.d-assigned-pick-sub {
font-size: 11px; color: var(--text-dim); margin-top: 2px;
word-break: break-word;
}
.empty-state-sm {
padding: 10px; font-size: 11.5px; color: var(--text-faint);
font-style: italic; line-height: 1.5;
}
/* CSV export modal — field-picker checkbox grid + scope hint. */
.csvexp-section { margin: 8px 0 18px; }
.csvexp-h {
font-size: 10.5px; color: var(--text-faint);
text-transform: uppercase; letter-spacing: .6px;
margin: 0 0 10px; font-weight: 700;
}
.csvexp-actions { display: flex; gap: 6px; margin-bottom: 10px; }
.csvexp-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 14px;
max-height: 360px; overflow-y: auto;
padding: 10px 12px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface-2);
}
.csvexp-row {
display: flex; gap: 8px; align-items: center;
font-size: 12px; color: var(--text); cursor: pointer;
padding: 3px 0;
}
.csvexp-row input { cursor: pointer; }
#csvexport-scope-hint {
padding: 10px 12px; background: var(--surface-2);
border-radius: 8px; border: 1px solid var(--border);
margin-bottom: 14px;
}
/* Avatars — used both on kanban cards and in the modal. Profile
picture if present, else hashed initials in a coloured circle. */
.recr-avatar {
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; overflow: hidden; flex-shrink: 0;
font-weight: 700; color: #fff; font-size: 14px;
box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(0,0,0,0.12);
pointer-events: none;
}
.recr-avatar.recr-avatar-initials {
background: var(--accent);
}
.recr-avatar-big { font-size: 56px !important; }
img.recr-avatar { object-fit: cover; -webkit-user-drag: none; user-drag: none; }
/* Kanban card with avatar — same as .dcard but with a 2-row layout
on the head so the avatar sits next to the title/role. */
.recr-card-head { display: flex; gap: 10px; align-items: flex-start; }
.recr-card-headtxt { flex: 1; min-width: 0; }
.recr-card-headtxt .dcard-title { padding-left: 0; }
/* Profile picture lightbox — fullscreen overlay, click to dismiss. */
#recr-lightbox {
display: flex; align-items: center; justify-content: center;
cursor: zoom-out; background: rgba(0,0,0,0.85);
}
#recr-lightbox img {
max-width: 90vw; max-height: 90vh; border-radius: 8px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
/* Integrations panel (Email setup → Integrations). Each section is a
bordered block so it's clear where one integration ends and the next
begins; scales when we add LinkedIn / Indeed / etc. */
.integration-section {
border: 1px solid var(--border); border-radius: var(--r);
padding: 14px 18px; margin-bottom: 14px; background: var(--surface);
}
.integ-h {
font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--text);
}
.integ-url-row { display: flex; gap: 8px; align-items: center; }
.integ-url-row input {
flex: 1; font-family: var(--mono); font-size: 12px;
background: var(--surface-2);
}
/* Overview modal — iframe shows the same HTML that will be emailed. */
.ov-preview {
width: 100%; height: 380px; border: 1px solid var(--border);
border-radius: 6px; background: #fff;
}
.overview-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 8px; }
.nav-badge {
margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
}
.nav-badge.hidden { display: none; }
/* ---------- Inbox: tabs, search, chips, context strip, quick actions ---------- */
.inbox-tab { display: inline-flex; align-items: center; gap: 6px; }
.inbox-tab-c {
font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 5px;
border-radius: 8px; background: var(--surface-3); color: var(--text-dim);
display: inline-flex; align-items: center; justify-content: center;
}
.inbox-tab.active .inbox-tab-c { background: var(--accent); color: #fff; }
.inbox-search-wrap {
padding: 8px 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.inbox-search-wrap input { width: 100%; font-size: 12.5px; }
.inbox-item-unread .inbox-item-who { font-weight: 700; color: var(--text); }
.inbox-item-unread .inbox-item-snip { color: var(--text); }
.inbox-item-chips {
display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
}
.inbox-chip, .inbox-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 700; letter-spacing: .2px;
padding: 2px 7px; border-radius: 9px; line-height: 1.4;
}
.inbox-chip { background: var(--surface-3); color: var(--text-dim); }
/* AI-intent chip on inbox rows — only shown when the operator approved
a suggestion. Tinted accent to read as "AI did something useful here". */
.inbox-chip-ai { background: var(--accent-soft); color: var(--accent-strong);
font-weight: 600; }
/* ---------- AI reply-intent suggestion banner ---------- */
.intent-banner { margin: 0 0 14px; }
.intent-banner.is-hidden { display: none; }
.intent-suggest {
border: 1px solid var(--accent); border-radius: 10px;
background: var(--accent-soft); padding: 12px 14px;
display: flex; flex-direction: column; gap: 8px;
}
.intent-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.intent-sparkle { font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--accent-strong); }
.intent-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 999px;
background: white; color: var(--text); font-size: 12.5px; font-weight: 600;
border: 1px solid var(--border);
}
.intent-emoji { font-size: 14px; line-height: 1; }
.intent-summary { font-size: 13.5px; color: var(--text); font-style: italic;
line-height: 1.45; }
.intent-action { font-size: 12.5px; color: var(--text-dim); }
.intent-action b { color: var(--text); font-weight: 600; }
.intent-buttons { display: flex; gap: 8px; margin-top: 2px; }
.intent-buttons .btn { padding: 6px 14px; font-size: 13px; }
/* The post-decision row — banner morphs into this after Approve. */
.intent-decision {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 8px;
background: var(--surface-2); border: 1px solid var(--border);
font-size: 12.5px; color: var(--text-dim);
}
.intent-decision-text b { color: var(--text); }
.intent-decision.intent-approved { border-color: var(--accent); }
.inbox-chip-mc { font-family: var(--sans); }
.pill-your { background: #fee2e2; color: #b91c1c; } /* needs your action */
.pill-their { background: #e0e7ff; color: #4338ca; } /* awaiting them */
.pill-sent { background: #dcfce7; color: #15803d; } /* sent today, no reply yet */
/* Stage chips (match the lead's pipeline stage colour family loosely). */
.inbox-chip[class*="stage-new"] { background: #f1f5f9; color: #334155; }
.inbox-chip[class*="stage-contacted"] { background: #fef3c7; color: #92400e; }
.inbox-chip[class*="stage-replied"] { background: #d1fae5; color: #065f46; }
.inbox-chip[class*="stage-interested"] { background: #cffafe; color: #155e75; }
.inbox-chip[class*="stage-meeting_planned"] { background: #dbeafe; color: #1e3a8a; }
.inbox-chip[class*="stage-meeting_held"] { background: #dbeafe; color: #1e40af; }
.inbox-chip[class*="stage-opportunity"]{ background: #ccfbf1; color: #115e59; }
.inbox-chip[class*="stage-won"] { background: #bbf7d0; color: #14532d; }
.inbox-chip[class*="stage-nurture"] { background: #ede9fe; color: #5b21b6; }
.inbox-chip[class*="stage-lost"] { background: #e2e8f0; color: #475569; }
/* Right-pane: context strip + quick actions block above the thread */
.inbox-context {
padding: 10px 18px 12px; border-bottom: 1px solid var(--border);
display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto;
background: var(--surface-2);
}
.inbox-context-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.inbox-context-bits { color: var(--text-dim); }
.inbox-context-when { color: var(--text-faint); }
.inbox-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inbox-quick .btn.sm { font-size: 11.5px; padding: 4px 10px; }
#ip-handled-btn.is-on { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.inbox-stage-select {
font-size: 11.5px; padding: 4px 8px; border-radius: 6px;
border: 1px solid var(--border); background: var(--surface);
}
/* ---------- Overview: Active conversations widget ---------- */
.ov-active-card h3 { display: flex; align-items: center; justify-content: space-between; }
.ov-active { display: flex; flex-direction: column; gap: 6px; }
.ov-active-row {
display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 9px 11px; cursor: pointer; font: inherit;
}
.ov-active-row:hover { background: var(--accent-weak); border-color: var(--accent); }
.ov-active-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ov-active-co { font-size: 13px; font-weight: 600; color: var(--text); }
.ov-active-when { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.ov-active-snip {
font-size: 11.5px; color: var(--text-dim);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ov-active-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.cmp-current {
display: flex; flex-direction: column; gap: 2px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 9px 12px;
}
.cmp-current.hidden { display: none; }
.cmp-current.cmp-current-bad { border-color: var(--red, #dc2626); }
.cmp-cur-name { font-size: 13px; font-weight: 700; color: var(--text); }
.cmp-cur-mail { font-size: 12px; color: var(--accent-strong); font-family: var(--mono); }
.cmp-cur-role { font-size: 11.5px; color: var(--text-dim); }
.cmp-thread-box { margin-bottom: 14px; }
.cmp-thread-box.hidden { display: none; }
.cmp-thread-box > summary {
cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--text-dim);
list-style: none; user-select: none; margin-bottom: 8px;
}
.cmp-thread-box > summary::-webkit-details-marker { display: none; }
.cmp-thread-box > summary::before { content: "▸ "; }
.cmp-thread-box[open] > summary::before { content: "▾ "; }
.cmp-thread-box #cmp-thread { max-height: 300px; overflow-y: auto; }
.cmp-preview-box { margin-top: 12px; }
.cmp-preview-box > summary {
cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--text-dim);
list-style: none; user-select: none;
}
.cmp-preview-box > summary::-webkit-details-marker { display: none; }
.cmp-preview-box > summary::before { content: "▸ "; }
.cmp-preview-box[open] > summary::before { content: "▾ "; }
/* ---------- Email setup — tabbed, Gmail-style ---------- */
.e-tabs {
display: flex; gap: 2px; background: var(--surface-3);
padding: 3px; border-radius: var(--r-sm); margin-bottom: 18px;
}
.e-tab {
flex: 1; border: none; background: transparent; cursor: pointer;
font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim);
padding: 7px 10px; border-radius: 6px;
}
.e-tab:hover { color: var(--text); }
.e-tab.active {
background: var(--surface); color: var(--accent-strong);
box-shadow: var(--shadow-xs);
}
.e-panel { display: block; }
.e-panel.hidden { display: none; }
/* The "looks like an email" card */
.email-card {
border: 1px solid var(--border-strong); border-radius: var(--r-sm);
background: #fff; overflow: hidden; margin: 14px 0 10px;
box-shadow: var(--shadow-xs);
}
.email-card-head { padding: 4px 14px; min-width: 0; }
.ec-row {
display: flex; align-items: center; gap: 8px; min-width: 0;
border-bottom: 1px solid var(--border); padding: 7px 0;
}
.ec-row:last-child { border-bottom: none; }
.ec-lbl {
font-size: 11px; font-weight: 700; color: var(--text-faint);
width: 52px; flex-shrink: 0; text-transform: uppercase;
letter-spacing: .4px;
}
.ec-input {
border: none; background: transparent; font: inherit; font-size: 13px;
color: var(--text); padding: 3px 0; outline: none;
}
input.ec-from-name { width: 120px; min-width: 0; font-weight: 600; flex-shrink: 0; }
input.ec-from-addr { flex: 1; width: auto; min-width: 0; color: var(--text-dim); }
input.ec-subject { flex: 1; width: auto; min-width: 0; font-weight: 600; }
.ec-to { font-size: 12.5px; color: var(--text-faint); }
.email-card-body {
width: 100%; border: none; outline: none; resize: vertical;
padding: 14px; font-family: var(--mono); font-size: 12px;
line-height: 1.6; color: var(--text); box-sizing: border-box;
display: block;
}
.email-card-sigline {
padding: 8px 14px 12px; font-size: 11px; color: var(--text-faint);
font-style: italic; border-top: 1px dashed var(--border);
}
.e-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.e-chip {
border: 1px solid var(--border); background: var(--surface-2);
color: var(--accent-strong); font-family: var(--mono); font-size: 11px;
padding: 3px 9px; border-radius: 999px; cursor: pointer;
}
.e-chip:hover { border-color: var(--accent); background: var(--accent-weak); }
.e-options {
display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
margin-bottom: 8px;
}
.e-options .ec-tone { flex: 1; min-width: 220px; margin-bottom: 0; }
.e-collapse {
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 4px 14px; margin: 8px 0 4px;
}
.e-collapse > summary {
cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text);
padding: 8px 0; list-style: none;
}
.e-collapse > summary::before { content: "▸ "; color: var(--text-faint); }
.e-collapse[open] > summary::before { content: "▾ "; }
.e-send-row {
display: flex; align-items: center; gap: 10px;
margin-top: 14px; flex-wrap: wrap;
}
.e-send-row .ec-input {
flex: 1; min-width: 200px; border: 1px solid var(--border);
border-radius: 6px; padding: 8px 10px; background: var(--surface-2);
}
.e-send-row .ec-input:focus {
background: #fff; border-color: var(--accent);
}
/* ---------- Send-modal inline title editor ---------- */
.es-edit {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 10px 12px; margin: 6px 0 10px;
}
.es-edit-row { margin-bottom: 8px; }
.es-edit-input { display: flex; gap: 8px; align-items: center; }
.es-edit-input input { flex: 1; min-width: 0; }
/* ---------- Sequences: "when follow-ups fire" panel ---------- */
.seq-timing {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 12px 14px; margin: 12px 0 18px;
}
.seq-timing-head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 16px; margin-bottom: 10px; flex-wrap: wrap;
}
.seq-timing-title { font-weight: 600; font-size: 13px; }
.seq-timing-row {
display: flex; gap: 14px; align-items: end; flex-wrap: wrap;
}
.seq-timing-row .filter-group { margin: 0; }
.seq-timing-row input[type="time"] { width: 130px; }
#seq-fu-msg:not(:empty) { font-size: 12px; }
/* ---------- Task modal: linked-lead picker ---------- */
.task-lead-input { display: flex; gap: 8px; align-items: center; }
.task-lead-input input { flex: 1; min-width: 0; }
.task-lead-results {
margin-top: 6px; max-height: 220px; overflow-y: auto;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface);
}
.task-lead-result {
padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border);
display: flex; flex-direction: column; gap: 2px;
}
.task-lead-result:last-child { border-bottom: none; }
.task-lead-result:hover { background: var(--surface-hover); }
.task-lead-co { font-weight: 600; font-size: 13px; }
.task-lead-meta { font-size: 11.5px; color: var(--text-faint); }
.task-lead-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-faint); }
#task-lead-current:not(:empty) {
margin-top: 6px; padding: 6px 10px; font-size: 12.5px;
background: #fef3c7; color: #92400e; border-radius: var(--r-sm);
}
/* Clickable lead-open button — used in #task-lead-current and the
task modal's #task-modal-sub. Looks like an underlined link so it's
obvious you can click it. */
.task-lead-open {
background: none; border: none; padding: 0;
color: inherit; font: inherit; cursor: pointer;
text-decoration: underline; text-underline-offset: 2px;
}
.task-lead-open:hover { color: var(--accent-strong); }
.es-customize {
margin: 10px 0 0; padding: 10px 12px 12px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.es-customize > summary {
cursor: pointer; font-weight: 600; font-size: 12.5px;
color: var(--text); list-style: none;
display: flex; gap: 10px; align-items: center;
}
.es-customize > summary::-webkit-details-marker { display: none; }
.es-customize-label::before { content: "▸ "; color: var(--text-faint); }
.es-customize[open] > summary .es-customize-label::before { content: "▾ "; }
.es-customize-badge {
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: #fef3c7; color: #92400e; font-weight: 700;
}
.es-edit-actions {
display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.es-edit-actions .hint { margin: 0; }
.es-edit-row .filter-label { display: block; margin-bottom: 4px; }
#es-edit-msg:not(:empty) { margin-top: 4px; }
/* ---------- Send-modal stats + per-lead pager ---------- */
.es-stats {
display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 4px;
}
.es-chip {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; font-weight: 600; color: var(--text-dim);
background: var(--surface-3); border: 1px solid var(--border);
border-radius: 999px; padding: 4px 11px;
}
.es-chip b { font-size: 12px; font-variant-numeric: tabular-nums; }
.es-chip-total { color: var(--text); }
.es-chip-send {
color: var(--green); background: #e7f4ee; border-color: #bfe3d0;
}
.es-chip-warn {
color: var(--accent-strong); background: var(--accent-weak);
border-color: #f3d8b3;
}
.es-chip-mute { color: var(--text-faint); }
.es-pager {
display: flex; align-items: center; gap: 12px; margin-top: 14px;
}
.es-pager-mid {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
}
.es-pos {
font-size: 11.5px; font-weight: 700; color: var(--text-dim);
white-space: nowrap;
}
.es-disp {
font-size: 11.5px; font-weight: 600; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.es-disp-send { color: var(--green); }
.es-disp-skip { color: var(--text-faint); }
.btn-sm {
padding: 5px 12px; font-size: 14px; line-height: 1; font-weight: 700;
}
.btn-sm:disabled { opacity: .4; cursor: not-allowed; }
/* ---------- Automation tab ---------- */
.au-wrap {
flex: 1; overflow-y: auto; width: 100%; max-width: 1100px;
margin: 0 auto; padding: 18px 24px 48px;
}
.au-top {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 18px;
}
.au-state { display: flex; align-items: center; gap: 12px; min-width: 0; }
.au-pill {
font-size: 11.5px; font-weight: 700; padding: 5px 13px;
border-radius: 999px; letter-spacing: .2px;
}
.au-pill-off { color: var(--text-dim); background: var(--surface-3); }
.au-pill-on { color: var(--green); background: #e7f4ee; }
.au-pill-paused { color: var(--accent-strong); background: var(--accent-weak); }
.au-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
margin-bottom: 18px;
}
@media (max-width: 880px) { .au-grid { grid-template-columns: 1fr; } }
.au-card { display: flex; flex-direction: column; gap: 13px; }
.au-card-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 14px;
}
.au-card-head h3 {
font-size: 14px; font-weight: 700; color: var(--text);
text-transform: none; letter-spacing: -0.2px; margin: 0;
}
.au-desc {
font-size: 12px; color: var(--text-dim); margin: 3px 0 0; font-weight: 500;
}
.au-chip {
flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 4px 11px;
border-radius: 999px; letter-spacing: .2px; white-space: nowrap;
}
.au-chip-off { color: var(--text-dim); background: var(--surface-3); }
.au-chip-on { color: var(--green); background: #e7f4ee; }
.au-chip-run { color: var(--accent-strong); background: var(--accent-weak); }
.au-chip-done { color: var(--green); background: #e7f4ee; }
.au-chip-paused { color: var(--accent-strong); background: var(--accent-weak); }
.au-status { display: flex; flex-direction: column; gap: 8px; }
.au-status-line { display: flex; align-items: baseline; gap: 8px; }
.au-count {
font-size: 26px; font-weight: 800; color: var(--text);
font-variant-numeric: tabular-nums; line-height: 1;
}
.au-count-sm { font-size: 15px; }
.au-of { font-size: 12.5px; color: var(--text-dim); font-weight: 600; }
.au-bar {
height: 8px; background: var(--surface-3); border-radius: 999px;
overflow: hidden;
}
.au-bar-fill {
height: 100%; width: 0%; border-radius: 999px;
background: linear-gradient(90deg, var(--accent), #f0941f);
transition: width .4s ease;
}
.au-sep {
display: flex; align-items: center; gap: 10px; margin: 4px 0 2px;
font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
text-transform: uppercase; color: var(--text-faint);
}
.au-sep::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}
.au-actions {
display: flex; justify-content: flex-end; gap: 9px;
margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
}
.au-actions-top {
justify-content: flex-start; margin-top: 0;
padding-top: 0; border-top: none;
}
.au-fu-line {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
padding: 10px 0 2px;
}
.au-disclosure {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; width: 100%; text-align: left; cursor: pointer;
font: inherit; font-size: 12.5px; color: var(--text);
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 9px 12px;
}
.au-disclosure:hover { border-color: var(--text-faint); }
.au-disc-caret {
color: var(--text-faint); font-size: 11px; transition: transform .15s ease;
}
.au-disclosure[aria-expanded="true"] .au-disc-caret { transform: rotate(180deg); }
.au-collapsible { margin-top: 8px; }
.au-log-card h3 {
font-size: 11px; color: var(--text-faint); text-transform: uppercase;
letter-spacing: .6px; font-weight: 700; margin: 0 0 12px;
}
.au-log { display: flex; flex-direction: column; }
.au-log-row {
display: grid; grid-template-columns: 130px 80px 1fr; gap: 12px;
align-items: baseline; padding: 8px 0; font-size: 12px;
border-top: 1px solid var(--border);
}
.au-log-row:first-child { border-top: none; }
.au-log-when { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.au-log-eng {
color: var(--accent-strong); font-weight: 700; text-transform: capitalize;
}
.au-log-msg { color: var(--text-dim); }
.au-log-bad { color: #b42318; }
/* ---------- Sequences — top-down follow-up flow builder ---------- */
.seq-wrap { flex: 1; overflow-y: auto; padding: 20px 24px 48px; }
.seq-intro { max-width: 460px; margin: 0 auto 20px; text-align: center; }
.seq-flow {
display: flex; flex-direction: column; align-items: center; gap: 0;
}
.seq-card {
width: 100%; max-width: 460px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.seq-card-email1 { border-color: var(--accent); }
.seq-card-task { background: #f3f7fd; border-color: #bdd4f5; }
.seq-card-top { display: flex; align-items: center; gap: 9px; }
.seq-icon {
width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-weak); font-size: 13px;
}
.seq-card-task .seq-icon { background: #dde9fb; }
.seq-card-title {
font-size: 12.5px; font-weight: 700; color: var(--text); flex: 1;
letter-spacing: -0.1px;
}
.seq-card-top .btn-sm { padding: 3px 9px; font-size: 11px; }
.seq-card-sub {
font-size: 12px; color: var(--text-dim); margin-top: 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seq-card-stats {
display: flex; gap: 14px; margin-top: 8px;
font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}
.seq-waiting { color: var(--accent-strong); font-weight: 600; }
.seq-card-expand {
cursor: pointer; border-radius: 6px; padding: 5px 6px; margin: 4px -6px 0;
}
.seq-card-expand:hover { background: var(--surface-3); }
.seq-expand-caret {
color: var(--accent-strong); font-weight: 600; margin-left: auto;
}
.seq-leads-modal {
max-height: 52vh; overflow-y: auto; margin-top: 6px;
border: 1px solid var(--border); border-radius: var(--r-sm);
}
.seq-lead-row {
display: flex; align-items: center; gap: 12px; padding: 9px 12px;
border-bottom: 1px solid var(--border); font-size: 12.5px; cursor: pointer;
}
.seq-lead-row:hover { background: var(--surface-hover); }
.seq-lead-row:last-child { border-bottom: none; }
.seq-lead-row:hover .seq-lead-co { color: var(--accent-strong); }
.seq-lead-co {
font-weight: 600; color: var(--text); flex-shrink: 0; width: 170px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seq-lead-title {
flex: 1; color: var(--text-dim); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.seq-lead-mail {
font-family: var(--mono); font-size: 11px; color: var(--text-faint);
width: 160px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; flex-shrink: 0;
}
.seq-lead-due {
font-size: 11.5px; color: var(--text-dim); flex-shrink: 0;
min-width: 150px; white-space: nowrap;
}
.seq-lead-due-now { color: #b45309; font-weight: 600; }
.seq-lead-row .btn-sm { padding: 3px 10px; font-size: 11px; flex-shrink: 0; }
.ov-drill-row { cursor: pointer; }
.ov-drill-row:hover { background: var(--surface-hover, rgba(0,0,0,.03)); }
/* ---------- Tasks section ---------- */
/* The Tasks section is a flex child of body (which has overflow:hidden
to prevent double-scrollbar). Without an inner overflow-y:auto here,
anything past the viewport gets clipped — e.g. the last week of a
month calendar falls off the screen with no way to reach it. */
.tasks-wrap {
padding: 16px 22px;
flex: 1; min-height: 0; overflow-y: auto;
}
.tasks-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; margin-bottom: 14px; flex-wrap: wrap;
}
.tasks-stat-strip {
display: flex; gap: 10px; flex-wrap: wrap;
}
.t-stat {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 8px 14px; min-width: 90px;
}
.t-stat-val { font-size: 18px; font-weight: 700; color: var(--text); }
.t-stat-lab { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; }
.t-stat.t-stat-overdue .t-stat-val { color: #c84a1c; }
.tasks-head-actions { display: flex; gap: 10px; align-items: center; }
/* Deals section — mirrors the Tasks layout (stat strip, view toggle, kanban
+ list views) so the operator's mental model carries over. Card design is
tighter than lead kanban cards (deals don't need email/chip metadata). */
.deals-wrap {
padding: 16px 22px;
/* Fill the section height + scroll vertically when there are more
deals than fit on screen. Mirrors how `.ov-wrap` handles the
Overview section. Without this the kanban/list overflows the
section silently and there's no scrollbar to reach the bottom. */
flex: 1; overflow-y: auto;
}
.deals-head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.deals-stat-strip {
display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.deals-stats-row { display: flex; gap: 12px; flex-wrap: wrap; }
.deals-stage-row .t-stat { min-width: 110px; }
.deals-type-row { gap: 14px; }
/* Per-type analytics card. Subtle left-border tint matches the badge
colour so the operator can scan by colour. Each card is responsive
and wraps onto its own row on narrow widths. */
.deal-type-stat {
flex: 1; min-width: 220px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 12px 16px;
border-left: 4px solid var(--surface-3);
}
.deal-type-stat.dts-vikar { border-left-color: #1b6a3a; }
.deal-type-stat.dts-rekruttering { border-left-color: #4f5b8f; }
.deal-type-stat.dts-try_and_hire { border-left-color: #b08800; }
.dts-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 10px;
}
.dts-counts { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dts-count-won { color: #0d6e3a; font-weight: 600; }
.dts-count-lost { color: var(--text-faint); }
.dts-metrics { display: flex; gap: 18px; flex-wrap: wrap; }
.dts-metric { display: flex; flex-direction: column; gap: 2px; }
.dts-metric-lab {
font-size: 10.5px; color: var(--text-faint);
text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.dts-metric-val { font-size: 16px; font-weight: 700; color: var(--text); }
.deals-head-actions { display: flex; gap: 10px; align-items: center; }
.deals-view-toggle {
display: inline-flex; border: 1px solid var(--border);
border-radius: var(--r-sm); overflow: hidden;
}
.deals-board {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
gap: 10px; overflow-x: auto; padding-bottom: 8px;
}
.deals-board .kcol { min-height: 180px; }
.dcard {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px;
cursor: pointer;
}
.dcard:hover { border-color: var(--accent); }
.dcard.dragging { opacity: 0.5; }
.dcard-title { font-size: 13px; font-weight: 600; color: var(--text); }
.dcard-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dcard-chips {
display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
margin-top: 6px;
}
.dcard-ch {
font-size: 10.5px; padding: 2px 7px; border-radius: 999px;
background: var(--surface-3); color: var(--muted); font-weight: 500;
}
.dcard-ch-rate { background: #e6f0ff; color: #1a4daa; font-weight: 600; }
/* Deal stage pills — context badges used in the list view + lead-detail
Deals block. Color-coded per stage so the eye picks them out. */
.deal-stage-pill {
display: inline-block; font-size: 10.5px; padding: 3px 9px;
border-radius: 999px; font-weight: 600; letter-spacing: 0.3px;
background: var(--surface-3); color: var(--muted);
}
.deal-stage-pill.st-new { background: #eef2ff; color: #4338ca; }
.deal-stage-pill.st-tilbud_sendt { background: #e5e9f5; color: #4f5b8f; }
.deal-stage-pill.st-i_forhandling { background: #fff3d6; color: #8a6b00; }
.deal-stage-pill.st-aftale_indgaaet { background: #e0f2e6; color: #1b6a3a; }
.deal-stage-pill.st-aktiv { background: #d6f0e2; color: #0d6e3a; }
.deal-stage-pill.st-afsluttet { background: #d2eaff; color: #1356a0; }
.deal-stage-pill.st-mistet { background: #fbe1dc; color: #a8341c; }
.deals-list {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); overflow: hidden;
}
.deal-row {
display: grid; grid-template-columns: 140px auto 1fr 32px auto;
align-items: center; gap: 10px; padding: 11px 14px;
border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer;
}
/* Deal type badge — small chip distinguishing vikar vs rekruttering
vs try_and_hire. Color-coded so the operator can scan a kanban or
list and immediately see what kind of deal it is. */
.deal-type-badge {
display: inline-block; font-size: 10px; padding: 2px 8px;
border-radius: 4px; font-weight: 700; letter-spacing: 0.2px;
background: var(--surface-3); color: var(--muted);
white-space: nowrap;
}
.deal-type-badge.dt-vikar { background: #e0f2e6; color: #1b6a3a; }
.deal-type-badge.dt-rekruttering { background: #e5e9f5; color: #4f5b8f; }
.deal-type-badge.dt-try_and_hire { background: #fff3d6; color: #8a6b00; }
.deal-row:last-child { border-bottom: none; }
.deal-row:hover { background: var(--surface-2); }
.deal-row-title { font-weight: 600; color: var(--text); }
.deal-row-sub { font-size: 11.5px; color: var(--muted); }
.deal-row-actions { display: flex; gap: 6px; }
/* Deal modal — two-column grid for the form fields. Full-width rows for
Notes + Lost reason so they can breathe. */
.deal-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
}
.deal-grid .deal-grid-full { grid-column: 1 / -1; }
.deal-grid .deal-lead-pick { grid-column: 1 / -1; }
.tasks-view-toggle {
display: inline-flex; border: 1px solid var(--border);
border-radius: var(--r-sm); overflow: hidden;
}
.tv-btn {
background: var(--surface); color: var(--text-dim);
padding: 6px 14px; border: none; cursor: pointer; font-size: 12px;
border-right: 1px solid var(--border);
}
.tv-btn:last-child { border-right: none; }
.tv-btn.active { background: var(--accent); color: #fff; }
.tasks-layout {
display: grid; grid-template-columns: 220px 1fr; gap: 18px;
}
.tasks-side {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px; height: fit-content;
}
.tasks-main { min-width: 0; }
.tasks-list {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); overflow: hidden;
}
.task-row {
display: grid; grid-template-columns: 32px 100px 1fr 200px 32px 160px auto;
align-items: center; gap: 10px; padding: 11px 14px;
border-bottom: 1px solid var(--border); font-size: 13px;
}
/* Owner badge — small initial in a coloured circle. Sized to slot into
the new 32px column in .task-row + alongside the title in the lead
detail Tasks block. Unassigned variant uses a dashed neutral border. */
.task-owner-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--accent); color: #fff; font-size: 10.5px;
font-weight: 700; letter-spacing: 0.5px; cursor: default;
flex-shrink: 0;
}
.task-owner-badge.unassigned {
background: transparent; color: var(--muted);
border: 1.5px dashed var(--border); font-weight: 500;
}
/* All-row badge in the workload widget — visually distinct from user
initials so it reads as a "reset filter" affordance, not a person. */
.task-owner-badge.all {
background: var(--text-faint); color: #fff;
}
/* Team workload widget — one row per user + an (unassigned) row,
showing open + overdue counts. Active row (matching the current
Owner filter) gets an accent border. */
.tasks-workload {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 10px 14px; margin-bottom: 12px;
}
.tasks-workload:empty { display: none; }
.tw-head {
font-size: 11.5px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px;
}
.tw-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px;
}
.tw-row {
display: flex; align-items: center; gap: 9px;
padding: 6px 10px; border-radius: 6px; cursor: pointer;
background: transparent; border: 1.5px solid transparent;
font: inherit; color: inherit; text-align: left;
}
.tw-row:hover { background: var(--surface-2); }
.tw-row.is-active { border-color: var(--accent); background: var(--surface-2); }
.tw-name { flex: 1; font-size: 13px; font-weight: 600; }
.tw-counts { font-size: 11.5px; color: var(--muted); }
.tw-overdue { color: #dc2626; font-weight: 600; }
.task-row:last-child { border-bottom: none; }
.task-row.t-done { opacity: 0.55; }
.task-row.t-overdue { background: #fff5f0; }
.task-ic {
width: 28px; height: 28px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-3); font-size: 14px;
}
.task-type-pill {
display: inline-block; font-size: 10.5px; padding: 2px 8px;
border-radius: 999px; background: var(--surface-3);
color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px;
font-weight: 600;
}
.task-title { font-weight: 600; color: var(--text); }
.task-title-notes {
font-size: 11.5px; color: var(--text-faint); font-weight: 400; margin-top: 2px;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
overflow: hidden;
}
.task-lead {
font-size: 11.5px; color: var(--accent-strong); cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-lead:hover { text-decoration: underline; }
.task-due {
font-size: 11.5px; color: var(--text-dim); font-family: var(--mono);
}
.task-due.t-due-overdue { color: #c84a1c; font-weight: 600; }
.task-due.t-due-today { color: #d97706; font-weight: 600; }
.task-actions { display: flex; gap: 4px; }
.task-actions .btn-sm { padding: 3px 8px; font-size: 11px; }
.tasks-empty {
padding: 30px; text-align: center; color: var(--text-faint);
}
/* Calendar (week view) */
.tasks-cal {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 12px;
}
.tcal-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.tcal-nav { display: flex; gap: 6px; }
.tcal-nav button {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer;
color: var(--text-dim); font-size: 12px;
}
.tcal-nav button:hover { background: var(--surface-3); }
.tcal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.tcal-col {
background: var(--surface-2); border-radius: var(--r-sm);
padding: 8px; min-height: 200px;
}
.tcal-col-active { cursor: pointer; transition: background .12s; }
.tcal-col-active:hover { background: var(--surface-hover); }
.tcal-col-empty { color: var(--text-faint); font-size: 11px; }
.tcal-col-head {
font-size: 11px; color: var(--text-faint); font-weight: 600;
text-transform: uppercase; letter-spacing: .5px;
padding-bottom: 6px; margin-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.tcal-col.t-today { background: #fff8eb; border: 1px solid #f1d2a0; }
.tcal-col.t-today .tcal-col-head { color: #8c4a00; }
.tcal-item {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 6px 8px; margin-bottom: 6px;
cursor: pointer; font-size: 11.5px;
}
.tcal-item:hover { border-color: var(--accent); }
.tcal-item.t-overdue { border-left: 3px solid #c84a1c; }
.tcal-item.t-done { opacity: 0.5; text-decoration: line-through; }
.tcal-time { color: var(--text-faint); font-family: var(--mono); font-size: 10.5px; }
.tcal-itemtitle { font-weight: 600; color: var(--text); margin-top: 2px; }
/* Click-to-complete checkbox shown on every task chip in the calendar
views. Empty when open, ✓ when done. Hover ring highlights it as a
tappable target. Sized so it doesn't dominate the compact month-view
chip. */
.tcal-check {
display: inline-flex; align-items: center; justify-content: center;
width: 14px; height: 14px; padding: 0; flex-shrink: 0;
border: 1.5px solid var(--text-faint); border-radius: 3px;
background: var(--surface); color: var(--text-faint);
font-size: 11px; font-weight: 700; line-height: 1;
cursor: pointer; margin-right: 4px;
transition: border-color .1s, background .1s, color .1s;
}
.tcal-check:hover { border-color: var(--accent); background: var(--accent-weak); color: var(--accent-strong); }
.t-done .tcal-check, .tcal-check.is-done { border-color: #15803d; background: #15803d; color: white; }
.t-done .tcal-check:hover, .tcal-check.is-done:hover { border-color: #c84a1c; background: var(--surface); color: var(--text-faint); }
/* Week/Month toggle pill in the calendar header */
.tcal-rangetog {
display: inline-flex; border: 1px solid var(--border);
border-radius: var(--r-sm); overflow: hidden;
}
.tcal-rangetog button {
background: var(--surface); color: var(--text-dim);
padding: 4px 12px; border: none; cursor: pointer; font-size: 11.5px;
border-right: 1px solid var(--border);
}
.tcal-rangetog button:last-child { border-right: none; }
.tcal-rangetog button.active { background: var(--accent); color: #fff; }
.tcal-range-label { flex: 1; text-align: center; }
/* ---------- Day view (vertical hour grid) ---------- */
.tcal-day-wrap {
position: relative; overflow-y: auto;
max-height: 70vh; border: 1px solid var(--border);
border-radius: var(--r-sm); background: var(--surface);
}
.tcal-day-grid {
position: relative; padding-left: 60px;
/* height is set inline based on hour range × pxPerMin */
}
.tcal-day-hourline {
position: absolute; left: 0; right: 0; height: 1px;
border-top: 1px solid var(--border);
}
.tcal-day-hourline span {
position: absolute; left: 6px; top: -7px;
font-family: var(--mono); font-size: 11px; color: var(--text-faint);
background: var(--surface); padding: 0 4px;
}
.tcal-day-halfline {
position: absolute; left: 60px; right: 0; height: 1px;
border-top: 1px dashed var(--border-soft, #e5e7eb);
opacity: 0.5;
}
.tcal-day-now {
position: absolute; left: 60px; right: 0; height: 2px;
background: #ef4444; z-index: 3;
}
.tcal-day-now::before {
content: ""; position: absolute; left: -6px; top: -4px;
width: 10px; height: 10px; border-radius: 50%; background: #ef4444;
}
.tcal-day-block {
position: absolute; left: 70px; right: 10px;
min-height: 36px; padding: 6px 10px;
background: var(--accent-weak); border-left: 3px solid var(--accent);
border-radius: var(--r-sm); cursor: grab; user-select: none;
z-index: 2; box-shadow: 0 1px 2px rgba(0,0,0,.05);
transition: box-shadow .1s;
}
.tcal-day-block:hover { box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.tcal-day-block:active { cursor: grabbing; }
.tcal-day-block.t-done {
background: #f3f4f6; border-left-color: #9ca3af;
opacity: 0.6;
}
.tcal-day-block.t-overdue {
background: #fee2e2; border-left-color: #dc2626;
}
.tcal-day-block.out-early::before,
.tcal-day-block.out-late::before {
content: "↑ before 06:00"; position: absolute; right: 6px; top: 2px;
font-size: 10px; color: var(--text-faint);
}
.tcal-day-block.out-late::before { content: "↓ after 22:00"; }
.tcal-day-block-top {
display: flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600;
}
.tcal-day-block-tm {
font-family: var(--mono); font-size: 11px; color: var(--text-dim);
}
.tcal-day-block-title { flex: 1; }
.tcal-day-block-co {
display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px;
margin-left: 22px;
}
.tcal-day-block-standalone { font-style: italic; color: var(--text-faint); }
/* ---------- Drag-and-drop visual states ---------- */
.tcal-dragging { opacity: 0.4; }
.tcal-drop-hover {
outline: 2px dashed var(--accent);
outline-offset: -2px;
background: var(--accent-weak) !important;
}
/* ---------- Month grid (5–6 weeks × 7 cols) ---------- */
.tcal-mgrid {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px; background: var(--border); border: 1px solid var(--border);
border-radius: var(--r-sm); overflow: hidden;
}
.tcal-mdow {
background: var(--surface-2); padding: 6px 8px; font-size: 11px;
font-weight: 600; color: var(--text-faint); text-transform: uppercase;
letter-spacing: .5px; text-align: left;
}
.tcal-mcell {
background: var(--surface); padding: 6px 6px 4px;
min-height: 96px; max-height: 160px;
display: flex; flex-direction: column; gap: 3px;
overflow: hidden; position: relative;
}
.tcal-mcell-scroll {
flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
/* Thin scrollbar on browsers that support it so the bar doesn't visually
dominate tiny cells */
scrollbar-width: thin;
}
.tcal-mcell-scroll::-webkit-scrollbar { width: 5px; }
.tcal-mcell-scroll::-webkit-scrollbar-thumb {
background: var(--text-faint); border-radius: 3px; opacity: 0.4;
}
.tcal-mcell-active { cursor: pointer; }
.tcal-mcell-active:hover { background: var(--surface-hover); }
/* Inline time-picker that appears after a drop on a day cell so the
operator can adjust the time without opening the full edit modal. */
.tcal-time-pop {
position: fixed; z-index: 9999;
display: flex; align-items: center; gap: 6px;
padding: 8px 10px; background: var(--surface);
border: 1px solid var(--accent); border-radius: var(--r-sm);
box-shadow: 0 6px 24px rgba(0,0,0,.18);
font-size: 13px;
}
.tcal-time-pop-lab { color: var(--text-dim); font-size: 12px; }
.tcal-time-pop-inp {
width: 92px; padding: 4px 6px;
border: 1px solid var(--border); border-radius: var(--r-sm);
font-family: var(--mono); font-size: 13px;
}
.tcal-time-pop-ok {
padding: 4px 10px; background: var(--accent); color: #fff;
border: none; border-radius: var(--r-sm); cursor: pointer; font-weight: 600;
}
.tcal-time-pop-ok:hover { background: var(--accent-strong); }
.tcal-time-pop-cx {
padding: 2px 8px; background: none; border: none;
color: var(--text-faint); cursor: pointer; font-size: 16px; line-height: 1;
}
.tcal-time-pop-cx:hover { color: var(--text-dim); }
/* Day-tasks drill modal (Tasks calendar → click a day cell) */
.cal-day-body {
max-height: 60vh; overflow-y: auto; margin-top: 6px;
border: 1px solid var(--border); border-radius: var(--r-sm);
}
.cal-day-row {
display: grid;
grid-template-columns: 56px 110px 1fr 200px;
align-items: center; gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-size: 13px;
cursor: pointer;
transition: background-color .1s;
}
.cal-day-row:hover { background: var(--accent-weak); }
.cal-day-row:last-child { border-bottom: none; }
.cal-day-row-dim { opacity: 0.55; }
.cal-day-time {
font-family: var(--mono); font-size: 12px; color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.cal-day-type {
font-size: 11.5px; color: var(--text-dim);
background: var(--surface-3); padding: 2px 8px; border-radius: 999px;
display: inline-block; width: fit-content;
}
.cal-day-title-btn {
background: none; border: none; padding: 0; text-align: left;
font: inherit; font-size: 13px; font-weight: 600; color: var(--text);
cursor: pointer;
}
.cal-day-title-btn:hover { color: var(--accent-strong); }
.cal-day-status {
margin-left: 8px; font-size: 10.5px; font-weight: 600;
padding: 1px 7px; border-radius: 999px; vertical-align: middle;
}
.cal-day-done { background: var(--green-weak); color: var(--green); }
.cal-day-cancelled { background: var(--surface-3); color: var(--text-faint); }
.cal-day-lead {
background: none; border: none; padding: 0; text-align: left;
font: inherit; font-size: 12.5px; color: var(--accent-strong);
cursor: pointer; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
width: 100%;
}
.cal-day-lead:hover { text-decoration: underline; }
.cal-day-lead-empty {
font-size: 12px; color: var(--text-faint); font-style: italic;
}
.tcal-mcell.t-other-month { background: var(--surface-2); }
.tcal-mcell.t-other-month .tcal-mday { color: var(--text-faint); opacity: 0.5; }
.tcal-mcell.t-today { background: #fff8eb; }
.tcal-mcell.t-today .tcal-mday {
color: #8c4a00; font-weight: 700;
background: #d97706; color: #fff; border-radius: 50%;
width: 22px; height: 22px; display: inline-flex; align-items: center;
justify-content: center;
}
.tcal-mday {
font-size: 12px; color: var(--text-dim); font-weight: 600;
margin-bottom: 2px;
}
/* Compact chip used in month cells — two-line layout:
row 1: icon · time · title
row 2: company name (dimmed; "standalone" italic for no-lead tasks) */
.tcal-chip {
display: flex; flex-direction: column; gap: 1px;
background: var(--surface-3); border-radius: 3px;
padding: 3px 6px; font-size: 11px; cursor: pointer;
border-left: 2px solid var(--accent);
overflow: hidden;
}
.tcal-chip:hover { background: var(--surface-2); border-left-color: var(--accent-strong); }
.tcal-chip-top {
display: flex; align-items: center; gap: 5px;
white-space: nowrap; overflow: hidden;
}
.tcal-chip-ic { flex-shrink: 0; font-size: 10px; }
.tcal-chip-tm {
font-family: var(--mono); font-size: 10px; color: var(--text-faint);
flex-shrink: 0;
}
.tcal-chip-title {
flex: 1; overflow: hidden; text-overflow: ellipsis;
color: var(--text); font-weight: 600;
}
.tcal-chip-co {
font-size: 10.5px; color: var(--text-dim);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
padding-left: 17px; /* aligns under title (past icon + time) */
}
.tcal-chip-standalone {
color: var(--text-faint); font-style: italic;
}
.tcal-chip.t-overdue { border-left-color: #c84a1c; background: #fff0e9; }
.tcal-chip.t-done { opacity: 0.45; text-decoration: line-through; border-left-color: var(--text-faint); }
.tcal-more {
font-size: 10.5px; color: var(--accent-strong); cursor: pointer;
padding: 1px 4px; font-weight: 600;
}
.tcal-more:hover { text-decoration: underline; }
/* On narrow screens, let cells breathe vertically */
@media (max-width: 1000px) {
.tcal-mcell { min-height: 80px; }
.tcal-chip-title { max-width: 80px; }
}
/* Task create/edit modal */
.task-due-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.task-quick-due {
grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.task-quick-due button {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer;
color: var(--text-dim); font-size: 11.5px;
}
.task-quick-due button:hover { background: var(--surface-3); color: var(--text); }
/* Lead-detail task list */
.d-tasks { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.d-task-row {
display: flex; align-items: center; gap: 8px; padding: 7px 10px;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); font-size: 12px;
}
.d-task-row.t-done { opacity: 0.55; }
.d-task-row .task-ic { width: 22px; height: 22px; font-size: 12px; }
.d-task-row .d-task-title { flex: 1; font-weight: 600; }
.d-task-row .d-task-due { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.d-task-row .d-task-due.t-due-overdue { color: #c84a1c; font-weight: 600; }
.d-tasks-empty { color: var(--text-faint); font-size: 12px; padding: 6px 2px; }
/* ---------- Lead search (sidebar) ---------- */
.lead-search { position: relative; }
.lead-search input[type="search"] {
width: 100%; padding: 8px 32px 8px 12px;
border: 1px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); font-size: 12.5px; color: var(--text);
}
.lead-search input[type="search"]:focus {
outline: none; border-color: var(--accent);
}
.lead-search-clear {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
background: none; border: none; cursor: pointer;
color: var(--text-faint); font-size: 13px; padding: 2px 6px;
border-radius: 50%;
}
.lead-search-clear:hover { background: var(--surface-3); color: var(--text); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* ---------- Bulk actions toolbar ---------- */
.bulk-menu { position: relative; display: inline-block; }
.bulk-menu-pop {
position: absolute; top: 100%; left: 0; margin-top: 4px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
min-width: 160px; z-index: 50; padding: 4px;
}
.bulk-menu-pop button {
display: block; width: 100%; text-align: left; padding: 6px 10px;
background: none; border: none; cursor: pointer; font-size: 12.5px;
color: var(--text); border-radius: var(--r-sm);
}
.bulk-menu-pop button:hover { background: var(--surface-3); }
/* ---------- Activity timeline filter pills ---------- */
.d-act-pills { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.d-act-pill {
background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 3px 10px; cursor: pointer; font-size: 11px;
color: var(--text-dim);
}
.d-act-pill:hover { background: var(--surface-3); color: var(--text); }
.d-act-pill.active {
background: var(--accent); border-color: var(--accent); color: #fff;
}
.seq-gap {
display: flex; flex-direction: column; align-items: center;
width: 100%; max-width: 460px;
}
.seq-gap-line {
width: 2px; height: 14px;
background: linear-gradient(to bottom, var(--border-strong), var(--border));
}
/* Wait pill — single rounded capsule containing both inputs. Inputs are
inline, borderless, transparent background — they read as one composed
control, not two adjacent form fields. */
.seq-wait {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11.5px; font-weight: 600; color: var(--text-dim);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 999px;
padding: 5px 14px;
box-shadow: var(--shadow-xs);
white-space: nowrap;
}
.seq-wait::before {
content: "";
width: 4px; height: 4px; border-radius: 50%;
background: var(--accent);
margin-right: 6px;
flex-shrink: 0;
}
/* Higher specificity (input.seq-wait-input) so we beat the global
input[type="number"] base style. */
input.seq-wait-input {
width: 36px; padding: 1px 4px; font: inherit; font-size: 12px;
font-weight: 700; color: var(--text);
text-align: center;
background: transparent;
border: none;
border-radius: 4px;
-moz-appearance: textfield;
font-variant-numeric: tabular-nums;
height: auto;
line-height: 1.2;
}
input.seq-wait-input:hover { background: var(--surface-3); }
input.seq-wait-input:focus {
outline: none; background: var(--accent-weak);
box-shadow: none;
border: none;
}
.seq-wait-input::-webkit-outer-spin-button,
.seq-wait-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.seq-wait-pending {
margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border);
color: var(--text);
}
.seq-wait-pending b { color: var(--accent-strong); }
/* Step cards — left accent stripe + tighter visual hierarchy */
.seq-card { position: relative; overflow: hidden; }
.seq-card::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--border);
}
.seq-card-email1::before { background: var(--accent); }
.seq-card.seq-card-task::before { background: #4b7bd6; }
/* The other email-step cards get a slightly lighter accent strip */
.seq-card:not(.seq-card-email1):not(.seq-card-task)::before {
background: var(--accent-weak);
}
.seq-add {
margin-top: 4px; border-style: dashed;
}
.seq-foot { margin-top: 18px; text-align: center; }
/* ---------- AI key health pill ---------- */
.ai-wrap { position: relative; }
.ai-pill {
display: inline-flex; align-items: center; gap: 7px;
height: 32px; padding: 0 10px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface);
font-size: 11.5px; font-weight: 600; cursor: pointer;
color: var(--text-dim);
}
.ai-pill:hover { background: var(--surface-3); }
.ai-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-faint); flex-shrink: 0;
}
.ai-ok { color: #137a3a; border-color: #b7e0c4; background: #ecfaf0; }
.ai-ok .ai-dot { background: #2aa663; box-shadow: 0 0 0 3px rgba(42,166,99,.15); }
.ai-bad { color: #8c4a00; border-color: #f1d2a0; background: #fff5e6; }
.ai-bad .ai-dot { background: #d97a00; box-shadow: 0 0 0 3px rgba(217,122,0,.15); }
.ai-unknown { color: var(--text-faint); }
.ai-unknown .ai-dot { background: var(--text-faint); }
.ai-pop {
position: absolute; top: 40px; right: 0; width: 300px; z-index: 60;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); box-shadow: var(--shadow-lg);
padding: 12px 14px;
}
.ai-pop-head { margin-bottom: 6px; font-size: 12.5px; }
.ai-pop-detail, .ai-pop .hint { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.ai-pop-actions { display: flex; justify-content: flex-end; }
/* ---------- Notifications bell ---------- */
.bell-wrap { position: relative; }
.bell-btn {
position: relative; width: 36px; height: 36px; border-radius: var(--r-sm);
border: 1px solid var(--border); background: var(--surface);
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--text-dim);
}
.bell-btn:hover { background: var(--surface-3); color: var(--text); }
.bell-btn .ic { width: 17px; height: 17px; }
.bell-count {
position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
padding: 0 4px; border-radius: 999px; background: var(--accent);
color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
text-align: center; box-sizing: border-box;
}
.bell-panel {
position: absolute; top: 44px; right: 0; width: 320px; z-index: 60;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); box-shadow: var(--shadow-lg);
max-height: 420px; overflow-y: auto;
}
.bell-head {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .5px; color: var(--text-faint);
}
.bell-row {
padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.bell-row:last-child { border-bottom: none; }
.bell-row:hover { background: var(--surface-2); }
.bell-row.unread { background: var(--accent-weak); }
.bell-row.unread:hover { background: #fae8d0; }
.bell-row-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.bell-row-sub {
font-size: 11.5px; color: var(--text-dim); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bell-row-when {
font-size: 10.5px; color: var(--text-faint); margin-top: 3px;
font-variant-numeric: tabular-nums;
}
/* Sequences — add-step row + task-step editor options */
.seq-add-row { display: flex; gap: 8px; margin-top: 4px; }
.seq-add { border-style: dashed; font-size: 12px; }
.seq-task-opts {
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: 10px 14px; margin: 10px 0 4px; background: var(--surface-2);
}
/* ---------- Toast ---------- */
.toast {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
background: var(--text); color: #fff; padding: 11px 20px;
border-radius: 999px; font-size: 12.5px; font-weight: 500; z-index: 70;
box-shadow: var(--shadow-lg);
}
/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: #d3d8e0; border-radius: 7px; border: 3px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
/* ── Agencies (vikarbureau denylist) ──────────────────────────────────── */
/* Stage emails section — same shell layout as Agencies. The card pattern,
typography, and surface colors all match the rest of the app. */
.se-wrap {
flex: 1; overflow-y: auto; width: 100%; max-width: 760px;
margin: 0 auto; padding: 20px 24px 48px;
}
.se-intro { max-width: 640px; margin: 0 0 20px; line-height: 1.55; }
.se-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-xs);
margin-bottom: 18px;
}
.se-card h3 {
font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700; margin-bottom: 14px;
}
.se-queue { display: flex; flex-direction: column; gap: 10px; }
.se-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
background: var(--surface-2);
}
.se-row-label { flex: 1; font-weight: 600; font-size: 14px; }
.se-row-count { color: var(--text-faint); font-size: 13px; }
.se-row-pending { color: var(--accent-strong); font-weight: 600; }
.se-row-empty { color: var(--text-faint); font-style: italic; }
.se-row-actions { display: flex; gap: 6px; }
.se-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.se-tab {
padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
background: var(--surface); color: var(--text); font-size: 13px;
cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.se-tab:hover { background: var(--surface-2); }
.se-tab.active {
background: var(--accent-soft); border-color: var(--accent);
color: var(--accent-strong); font-weight: 600;
}
.se-tab .se-tab-dot {
display: inline-block; min-width: 18px; text-align: center;
margin-left: 6px; padding: 0 6px; border-radius: 999px;
background: var(--surface-2); font-size: 11px;
}
.se-tab.active .se-tab-dot { background: white; color: var(--accent-strong); }
.se-editor { display: flex; flex-direction: column; gap: 14px; }
.se-actions { display: flex; align-items: center; gap: 12px; }
/* Lost-segment editor — 12 collapsible sub-templates under the Lost tab */
.se-segments-list { display: flex; flex-direction: column; gap: 8px; }
.se-segment-card {
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface-2);
}
.se-segment-card summary {
list-style: none; cursor: pointer; padding: 12px 14px;
display: flex; align-items: center; gap: 12px; font-size: 14px;
}
.se-segment-card summary::-webkit-details-marker { display: none; }
.se-segment-card summary::before {
content: "▸"; color: var(--text-faint); transition: transform 0.12s;
margin-right: 4px;
}
.se-segment-card[open] summary::before { transform: rotate(90deg); }
.se-segment-name { flex: 1; font-weight: 600; }
.se-segment-on { color: #15803d; font-size: 12px; font-weight: 600; }
.se-segment-off { color: var(--text-faint); font-size: 12px; }
.se-segment-files {
margin-left: 8px; color: var(--accent-strong);
font-size: 12px; font-weight: 600;
}
.se-segment-editor {
padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px;
border-top: 1px solid var(--border); margin-top: 0;
}
.seg-attachments-block {
border-top: 1px dashed var(--border); padding-top: 12px;
}
.seg-att-list { margin: 4px 0 6px; }
.seg-att-empty { color: var(--text-faint); font-style: italic; }
.seg-att-files {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 4px;
}
.seg-att-files li {
display: flex; align-items: center; gap: 8px;
padding: 4px 8px; background: var(--surface);
border: 1px solid var(--border); border-radius: 6px;
font-size: 13px;
}
.seg-att-files li a {
color: var(--accent-strong); text-decoration: none; flex: 1;
}
.seg-att-files li a:hover { text-decoration: underline; }
.seg-att-rm {
border: none; background: transparent; color: var(--text-faint);
cursor: pointer; padding: 2px 6px; font-size: 14px; line-height: 1;
}
.seg-att-rm:hover { color: #b91c1c; }
.seg-att-actions {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.seg-att-upload-btn { cursor: pointer; }
/* Review & send modal — Lost-stage AI segment indicator + pop-up picker */
/* Small indicator bar shown AFTER the operator picks a segment. */
.es-segment-bar {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border: 1px solid var(--accent);
background: var(--accent-soft); border-radius: 8px;
margin: 10px 0; font-size: 13px;
}
.es-segment-icon { font-size: 14px; }
.es-segment-bar-label { color: var(--text-dim); }
.es-segment-bar-name { font-weight: 600; color: var(--accent-strong); }
.es-segment-bar-conf { font-size: 12px; color: var(--text-faint); }
#es-segment-bar-change { margin-left: auto; }
/* The pop-up picker — tinted layer inside the modal that covers the
editor area. Position: absolute so it overlays without displacing
the modal content. Click outside (on the dim background) to close. */
.es-segment-picker {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(20, 24, 31, .35);
backdrop-filter: blur(4px);
z-index: 10; border-radius: var(--r-lg);
padding: 24px;
}
.es-segment-picker-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: 22px;
width: 100%; max-width: 720px; max-height: 100%;
overflow-y: auto;
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; gap: 14px;
}
.es-segment-picker-head {
display: flex; align-items: center; gap: 8px;
}
.es-segment-picker-title {
flex: 1; display: flex; align-items: center; gap: 8px;
font-size: 15px; font-weight: 600;
}
.es-segment-picker-context {
display: flex; flex-direction: column; gap: 8px;
padding: 12px; background: var(--surface-2);
border-radius: 8px; font-size: 13px;
}
.es-segment-picker-ai {
display: flex; align-items: center; gap: 8px;
}
.es-segment-picker-ai b { color: var(--accent-strong); }
.es-segment-conf {
font-size: 12px; color: var(--text-faint); margin-left: 4px;
}
.es-segment-picker-msg blockquote {
margin: 0; padding: 8px 12px;
border-left: 3px solid var(--accent); background: var(--surface);
font-size: 13px; color: var(--text-dim);
white-space: pre-wrap; word-break: break-word;
border-radius: 0 4px 4px 0;
max-height: 140px; overflow-y: auto;
}
.es-segment-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 900px) {
.es-segment-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.es-segment-grid { grid-template-columns: repeat(2, 1fr); }
}
.es-seg-btn {
position: relative; cursor: pointer; padding: 10px 8px;
border: 1.5px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text);
font-size: 11.5px; font-weight: 500; text-align: center;
line-height: 1.3; min-height: 56px;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.1s, background 0.1s;
}
.es-seg-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.es-seg-btn.is-sel {
border-color: var(--accent); background: var(--accent-soft);
color: var(--accent-strong); font-weight: 600;
}
.es-seg-btn.is-ai {
box-shadow: 0 0 0 2px var(--accent) inset;
}
.es-seg-btn.is-ai.is-sel {
/* AI pick that's also currently selected — keep both visual signals */
box-shadow: 0 0 0 2px var(--accent) inset;
background: var(--accent-soft);
}
/* `.is-empty` (no template written for this segment yet) — subtle hint */
.es-seg-btn.is-empty {
opacity: 0.7;
}
.es-seg-btn.is-empty::after {
content: "(no template)"; position: absolute; bottom: 2px; right: 4px;
font-size: 9px; color: var(--text-faint);
}
.es-seg-ai {
position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: white;
font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
letter-spacing: 0.3px;
}
.es-seg-name { display: block; }
.es-seg-custom { border-style: dashed; }
.ag-wrap {
flex: 1; overflow-y: auto; width: 100%; max-width: 720px;
margin: 0 auto; padding: 20px 24px 48px;
}
.ag-intro { max-width: 620px; margin: 0 0 20px; line-height: 1.55; }
.ag-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-xs);
margin-bottom: 18px;
}
.ag-card h3 {
font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700; margin-bottom: 14px;
}
.ag-add { display: flex; gap: 10px; }
.ag-add input {
flex: 1; padding: 9px 12px; border: 1px solid var(--border);
border-radius: var(--r-sm); font: inherit; font-size: 13px;
background: var(--surface); color: var(--text);
}
.ag-add input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-weak);
}
#ag-add-state { margin-top: 9px; min-height: 16px; }
.ag-list { display: flex; flex-direction: column; }
.ag-list.ag-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.ag-list.ag-grid .ag-row {
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 12px 14px;
}
.ag-detected-meta {
display: flex; flex-direction: column; gap: 2px;
flex: 1; min-width: 0;
}
.ag-detected-tag {
font-size: 11px; color: var(--text-faint);
font-weight: 500;
}
.ag-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border);
}
.ag-row:last-child { border-bottom: none; }
.ag-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
/* Detail-panel agency toggle when the lead is currently flagged */
#d-agency-btn.is-agency { color: var(--accent-strong); }
/* ── Pre-send validation banner (send modal) ──────────────────────────── */
.es-validation {
margin: 8px 0 4px; padding: 10px 13px; border-radius: var(--r-sm);
font-size: 12.5px; line-height: 1.5; border: 1px solid;
}
.es-validation.hidden { display: none; }
.es-validation ul { margin: 5px 0 0; padding-left: 18px; }
.es-validation li { margin: 2px 0; }
.es-val-head { font-weight: 700; }
.es-val-block {
color: #8a1c1c; background: #fdecec; border-color: #f3c0c0;
}
.es-val-warn {
color: var(--accent-strong); background: var(--accent-weak);
border-color: #f3d8b3;
}
.es-validation li.es-val-warn { color: inherit; }
.es-validation li.es-val-block { color: inherit; }
/* ── Deliverability check (Email setup) ───────────────────────────────── */
.deliv-result { margin-top: 12px; }
.deliv-result.hidden { display: none; }
/* Backup list under the "Back up now" button — small monospaced rows
showing filename, size, and timestamp of the most recent snapshots. */
.backup-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.backup-list-empty { color: var(--text-faint); font-size: 12.5px; }
.backup-row {
display: flex; gap: 12px; align-items: center; padding: 8px 12px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface-2); font-size: 12.5px;
}
.backup-row-name { font-family: var(--mono, monospace); flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backup-row-meta { color: var(--text-dim); font-variant-numeric: tabular-nums;
flex: 0 0 auto; }
.deliv-verdict {
font-size: 12.5px; font-weight: 700; padding: 9px 12px;
border-radius: var(--r-sm); margin-bottom: 10px; border: 1px solid;
}
.deliv-box-pass .deliv-verdict {
color: var(--green); background: #e7f4ee; border-color: #bfe3d0;
}
.deliv-box-warn .deliv-verdict {
color: var(--accent-strong); background: var(--accent-weak);
border-color: #f3d8b3;
}
.deliv-box-fail .deliv-verdict {
color: #8a1c1c; background: #fdecec; border-color: #f3c0c0;
}
.deliv-row {
display: flex; gap: 10px; padding: 9px 2px;
border-bottom: 1px solid var(--border);
}
.deliv-row:last-child { border-bottom: none; }
.deliv-badge {
flex: none; width: 20px; height: 20px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800; color: #fff;
}
.deliv-pass .deliv-badge { background: var(--green); }
.deliv-warn .deliv-badge { background: var(--accent); }
.deliv-fail .deliv-badge { background: var(--red); }
.deliv-unknown .deliv-badge { background: var(--text-faint); }
.deliv-body { min-width: 0; }
.deliv-label { font-size: 12.5px; font-weight: 700; color: var(--text); }
.deliv-stat {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-faint); font-weight: 700; margin-left: 4px;
}
.deliv-detail { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.deliv-rec {
display: block; margin-top: 5px; font-size: 11px;
color: var(--text-dim); background: var(--surface-3);
border-radius: 5px; padding: 5px 7px; word-break: break-all;
}
/* ── Needs-attention view (pre-send validation blocks) ────────────────── */
.vc-alert-on {
background: #fdecec !important; color: #8a1c1c !important;
font-weight: 700;
}
.col-issue {
color: #8a1c1c; font-size: 12px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 240px;
}
.d-block {
margin-bottom: 14px; padding: 10px 13px; border-radius: var(--r-sm);
background: #fdecec; border: 1px solid #f3c0c0; color: #8a1c1c;
font-size: 12.5px; line-height: 1.5;
}
.d-block.hidden { display: none; }
.d-block-hint {
display: block; margin-top: 4px; font-weight: 400; color: #a85252;
}
/* ── Compose: editor + always-on live preview, side by side ───────────── */
.ec-split {
display: flex; gap: 18px; margin: 14px 0 10px; align-items: stretch;
}
.ec-edit, .ec-live {
flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.ec-edit .email-card { margin: 0 0 12px; }
.ec-live-head {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700; margin-bottom: 6px;
}
.ec-live #e-preview-meta { margin-bottom: 6px; min-height: 14px; }
.ec-live .mail-preview {
flex: 1; min-height: 320px; margin-top: 0;
}
.ec-live-note { margin-top: 8px; font-style: italic; }
@media (max-width: 720px) {
.ec-split { flex-direction: column; }
.ec-live .mail-preview { min-height: 300px; }
}
/* ── Compose: placeholder reference (token · meaning · live value) ────── */
.e-ph-ref { margin: 2px 0 16px; }
.e-ph-head {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700; margin-bottom: 8px;
}
.e-ph-grid {
display: grid; gap: 7px;
grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
}
.e-ph {
display: flex; flex-direction: column; gap: 2px; text-align: left;
border: 1px solid var(--border); background: var(--surface-2);
border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; font: inherit;
}
.e-ph:hover { border-color: var(--accent); background: var(--accent-weak); }
.e-ph-tok {
font-family: var(--mono); font-size: 11.5px; font-weight: 700;
color: var(--accent-strong);
}
.e-ph-desc { font-size: 11px; color: var(--text-dim); line-height: 1.45; }
.e-ph-val {
font-size: 11px; color: var(--text); margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.e-ph-val-empty { color: var(--text-faint); font-style: italic; }
/* ── Compose: per-industry Email-1 segment tabs ───────────────────────── */
.e-seg-tabs {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin: 12px 0 2px;
}
.e-seg {
border: 1px solid var(--border); background: var(--surface-2);
color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600;
padding: 5px 12px; border-radius: 999px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.e-seg:hover { color: var(--text); }
.e-seg.active {
background: var(--accent-weak); color: var(--accent-strong);
border-color: #f3d8b3;
}
.e-seg-x {
font-size: 14px; line-height: 1; color: var(--text-faint);
width: 16px; height: 16px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.e-seg-x:hover { background: rgba(0,0,0,.1); color: var(--red); }
.e-seg-add {
border: 1px dashed var(--border-strong); background: transparent;
color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 600;
padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
/* ── Detail panel: sent-email log ─────────────────────────────────────── */
.d-sent { display: flex; flex-direction: column; gap: 7px; }
.d-sent-item {
border: 1px solid var(--border); border-radius: var(--r-sm);
overflow: hidden;
}
.d-sent-head {
width: 100%; display: flex; justify-content: space-between;
align-items: center; gap: 10px; padding: 8px 11px;
background: var(--surface-2); border: none; cursor: pointer;
font: inherit; text-align: left;
}
.d-sent-head:hover { background: var(--surface-3); }
.d-sent-kind { font-size: 12.5px; font-weight: 600; color: var(--text); }
.d-sent-when { font-size: 11px; color: var(--text-faint); flex: none; }
.d-sent-body { padding: 10px 11px; border-top: 1px solid var(--border); }
.d-sent-body.hidden { display: none; }
.d-sent-row { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
.d-sent-row b { color: var(--text); font-weight: 600; }
.d-sent-text {
margin-top: 6px; font-family: var(--mono); font-size: 11.5px;
line-height: 1.55; color: var(--text); white-space: pre-wrap;
word-break: break-word; max-height: 320px; overflow-y: auto;
background: var(--surface-3); border-radius: 5px; padding: 9px;
}
.d-sent-frame {
width: 100%; height: 360px; margin-top: 6px;
border: 1px solid var(--border); border-radius: 5px;
background: #fff;
}
/* ── Automation: per-scraper tiles ────────────────────────────────────── */
.au-scraper-tiles { display: flex; gap: 12px; margin-bottom: 16px; }
.au-tile {
flex: 1; display: flex; flex-direction: column; gap: 6px;
align-items: flex-start; text-align: left; font: inherit; cursor: pointer;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.au-tile:hover { border-color: var(--accent); }
.au-tile.active {
border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-weak);
}
.au-tile-name { font-size: 14px; font-weight: 700; color: var(--text); }
.au-tile-stat { font-size: 11.5px; }
/* ── Automation: per-category keyword editor (Jobindex) ───────────────── */
.au-kw-list { display: flex; flex-direction: column; gap: 10px; }
.au-kw-row { display: flex; flex-direction: column; gap: 4px; }
.au-kw-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px;
}
.au-kw-cat { font-size: 12px; font-weight: 600; color: var(--text); }
.au-kw-reset {
border: none; background: none; cursor: pointer; font: inherit;
font-size: 11px; color: var(--accent-strong); text-decoration: underline;
padding: 0;
}
.au-kw-input {
width: 100%; padding: 7px 10px; border: 1px solid var(--border);
border-radius: var(--r-sm); font: inherit; font-size: 12px;
background: var(--surface); color: var(--text); box-sizing: border-box;
}
.au-kw-input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-weak);
}
/* ── Automation: Check supply pre-flight count ────────────────────────── */
.au-supply {
display: flex; align-items: center; gap: 12px; margin-top: 8px;
flex-wrap: wrap;
}
.au-count-result {
font-size: 12.5px; color: var(--text-dim); min-height: 16px;
}
.au-count-result b { color: var(--text); font-weight: 700; }
.au-count-fresh { color: var(--text); }
.au-count-error { color: var(--red); }
.au-count-link {
font-size: 11.5px; color: var(--accent-strong); text-decoration: underline;
margin-left: 6px;
}
.au-count-link:hover { color: var(--accent); }
/* ── Views bar: drag-reorder + show/hide popover ──────────────────────── */
.view-tab[draggable="true"] { cursor: grab; }
.view-tab[draggable="true"]:active { cursor: grabbing; }
.view-tab.dragging { opacity: 0.5; }
.view-tab.hidden { display: none; }
.view-tabs-menu-wrap { position: relative; display: inline-flex; }
.view-tabs-menu {
background: none; border: none; cursor: pointer; font: inherit;
font-size: 14px; color: var(--text-faint);
padding: 6px 10px; line-height: 1; border-radius: 6px;
}
.view-tabs-menu:hover { color: var(--accent-strong); background: var(--surface-2); }
.view-tabs-popover {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
padding: 8px; min-width: 220px;
}
.view-tabs-popover.hidden { display: none; }
.vmenu-head {
font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-faint); font-weight: 700; padding: 4px 6px 6px;
}
.vmenu-row {
display: flex; align-items: center; gap: 9px;
padding: 6px 8px; cursor: pointer;
font-size: 12.5px; color: var(--text); border-radius: 5px;
}
.vmenu-row:hover { background: var(--surface-2); }
.vmenu-row input { accent-color: var(--accent); width: 14px; height: 14px; }
.vmenu-hint {
font-size: 11px; color: var(--text-faint); font-style: italic;
padding: 8px 6px 2px; border-top: 1px solid var(--border); margin-top: 6px;
}
/* ── Sequences tab: status strip ──────────────────────────────────────── */
.seq-status {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 14px; padding: 11px 16px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-sm); box-shadow: var(--shadow-xs);
}
.seq-status-line {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.seq-status-text { font-size: 13px; color: var(--text); }
.seq-status-text b {
font-weight: 700; color: var(--accent-strong);
font-variant-numeric: tabular-nums;
}
.seq-status-pause {
font-size: 11.5px; color: var(--accent-strong);
}
.seq-status-pause.hidden { display: none; }
/* ── Sequences: pending-on-wait-pill + per-lead Run-now ───────────────── */
.seq-wait-pending {
cursor: pointer;
display: inline-flex; align-items: baseline; gap: 4px;
color: var(--accent-strong); font-weight: 600;
}
.seq-wait-pending:hover { text-decoration: underline; }
.seq-wait-pending b { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Clickable Overview tiles */
.ov-mcard-link { cursor: pointer; transition: border-color .12s, transform .12s; }
.ov-mcard-link:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* ─────────────────────────────────────────────────────────────────
Recruitment → Calendar (Gantt-style timeline). Sticky-header day
grid + employee rows + absolute-positioned bars. Premium palette
matching the rest of Recruitment.
───────────────────────────────────────────────────────────────── */
/* Filter bar specifically for the Calendar mode reuses .recr-filterbar
styling but lives in its own container so visibility can flip
independently from Candidates / Employees bars. */
.recr-cal-filterbar { /* inherits .recr-filterbar */ }
.recr-filterbar #recr-cf-search { width: 220px; }
/* Calendar card */
.recr-cal {
background: #fff;
border: 1px solid #e5eaf1;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.recr-cal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}
.recr-cal-nav {
display: flex; align-items: center; gap: 8px;
}
.recr-cal-navbtn, .recr-cal-todaybtn {
height: 30px;
padding: 0 10px;
border: 1px solid #dbe2ec;
border-radius: 7px;
background: #fff;
font-size: 12px; font-weight: 500;
color: #0f172a;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.recr-cal-navbtn:hover, .recr-cal-todaybtn:hover {
background: #f8fafc; border-color: #94a3b8;
}
.recr-cal-todaybtn { padding: 0 14px; font-weight: 600; }
.recr-cal-range {
margin-left: 8px;
font-size: 13px; font-weight: 600;
color: #0f172a; letter-spacing: -0.1px;
}
.recr-cal-actions {
display: flex; align-items: center; gap: 10px;
}
.recr-cal-zoom {
display: inline-flex; background: #f1f5f9;
border-radius: 8px; padding: 2px;
border: 1px solid #e5eaf1;
}
.recr-cal-zoom .tv-btn {
padding: 5px 11px; font-size: 11.5px; font-weight: 600;
background: transparent; color: #64748b;
border: none; cursor: pointer; border-radius: 6px;
transition: background 0.12s, color 0.12s;
}
.recr-cal-zoom .tv-btn:hover { color: #0f172a; }
.recr-cal-zoom .tv-btn.active {
background: #fff; color: #0f172a;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
/* Grid body. Fixed left column (employee strip) + scrollable right
(day columns). Uses CSS grid for the day axis. */
.recr-cal-grid {
overflow-x: auto;
background: #fff;
}
.rcal-head-row {
display: flex;
position: sticky; top: 0; z-index: 3;
background: #fff;
border-bottom: 1px solid #e5eaf1;
}
.rcal-head-spacer {
flex: 0 0 220px;
background: #fff;
border-right: 1px solid #f1f5f9;
}
.rcal-day-headers {
flex: 1 1 auto; min-width: 0;
display: grid;
}
.rcal-daycol {
text-align: center;
padding: 8px 4px;
font-size: 10.5px;
color: #64748b;
border-right: 1px solid #f1f5f9;
position: relative;
}
.rcal-daycol:last-child { border-right: none; }
.rcal-daycol.is-weekend { background: #fafbfc; }
.rcal-daycol.is-today {
background: #fef3c7;
color: #92400e;
}
.rcal-daycol.is-today .rcal-day-wd,
.rcal-daycol.is-today .rcal-day-date { color: #92400e; font-weight: 700; }
.rcal-day-wd {
font-size: 9.5px; font-weight: 600;
letter-spacing: 0.4px; text-transform: uppercase;
color: #94a3b8;
}
.rcal-day-date {
font-size: 12px; font-weight: 700;
color: #0f172a; margin-top: 2px;
letter-spacing: -0.1px;
}
/* Employee rows */
.rcal-rows {
position: relative;
}
.rcal-row {
display: flex;
border-bottom: 1px solid #f1f5f9;
min-height: 56px;
}
.rcal-row:hover { background: #fafbfc; }
.rcal-row-who {
flex: 0 0 220px;
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
border-right: 1px solid #f1f5f9;
background: #fff;
position: sticky; left: 0; z-index: 2;
}
.rcal-row-name { min-width: 0; }
.rcal-row-l1 {
font-size: 12.5px; font-weight: 600; color: #0f172a;
line-height: 1.2; letter-spacing: -0.1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcal-row-l2 {
font-size: 10.5px; color: var(--accent-strong, #d97706);
margin-top: 1px; line-height: 1.2;
font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcal-row-grid {
flex: 1 1 auto; min-width: 0;
position: relative;
display: grid;
/* grid-template-columns set inline so it agrees with day count */
}
.rcal-row .rcal-row-grid { grid-template-columns: var(--rcal-days, repeat(21, 1fr)); }
.rcal-cell {
border-right: 1px solid #f1f5f9;
cursor: pointer;
transition: background 0.1s;
}
.rcal-cell:last-child { border-right: none; }
.rcal-cell.is-weekend { background: #fafbfc; }
.rcal-cell.is-today { background: rgba(254, 243, 199, 0.35); }
.rcal-cell:hover { background: rgba(99, 102, 241, 0.08); }
/* Assignment bars — absolute, positioned by left% + width% */
.rcal-bar {
position: absolute;
top: 8px;
height: calc(100% - 16px);
border-radius: 6px;
padding: 0 8px;
display: flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 600;
line-height: 1;
cursor: pointer;
overflow: visible;
z-index: 1;
border: 1px solid rgba(15, 23, 42, 0.05);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: transform 0.1s, box-shadow 0.1s, filter 0.1s;
letter-spacing: -0.1px;
}
.rcal-bar:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
filter: brightness(1.02);
z-index: 4;
}
.rcal-bar-emoji {
font-size: 14px; flex: 0 0 auto;
filter: grayscale(0);
}
.rcal-bar-label {
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bars that extend off-screen get gradient fade indicators on the
clipped edge. */
.rcal-bar.is-cliplo {
border-top-left-radius: 0; border-bottom-left-radius: 0;
mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, #000 12px);
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, #000 12px);
}
.rcal-bar.is-cliphi {
border-top-right-radius: 0; border-bottom-right-radius: 0;
mask-image: linear-gradient(to left, rgba(0,0,0,0.5) 0%, #000 12px);
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.5) 0%, #000 12px);
}
.rcal-bar.is-cliplo.is-cliphi {
mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, #000 12px, #000 calc(100% - 12px), rgba(0,0,0,0.5) 100%);
-webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.5) 0%, #000 12px, #000 calc(100% - 12px), rgba(0,0,0,0.5) 100%);
}
.rcal-row-empty {
position: absolute;
left: 14px; top: 50%; transform: translateY(-50%);
font-size: 11px; color: #cbd5e1; font-style: italic;
pointer-events: none;
}
/* Today vertical accent line that crosses every row. */
.rcal-today-line {
position: absolute;
top: 0; bottom: 0;
width: 2px;
background: #f59e0b;
z-index: 5;
pointer-events: none;
box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}
.rcal-empty {
padding: 40px 24px; text-align: center;
color: #94a3b8; font-size: 13px;
}
/* Legend */
.recr-cal-legend {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 10px 16px;
border-top: 1px solid #f1f5f9;
background: #fafbfc;
}
.rcal-legend-pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: -0.1px;
}
/* Mode toggle: make the Calendar tab visually distinct */
.recr-mode-toggle .tv-btn[data-rmode="calendar"] {
font-weight: 600;
}
/* Assignment modal: lead picker styling */
.assign-job-results {
margin-top: 4px;
max-height: 220px;
overflow-y: auto;
background: #fff;
border: 1px solid #dbe2ec;
border-radius: 7px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
.assign-job-row {
padding: 8px 10px;
cursor: pointer;
border-bottom: 1px solid #f1f5f9;
font-size: 12.5px;
}
.assign-job-row:hover { background: #f1f5f9; }
.assign-job-row b { display: block; color: #0f172a; }
.assign-job-sub {
display: block; color: #64748b; font-size: 11px;
margin-top: 1px;
}
.assign-job-row-empty {
color: #94a3b8; font-style: italic; cursor: default;
}
.assign-job-row-empty:hover { background: #fff; }
.assign-job-pick {
margin-top: 6px;
padding: 8px 10px;
background: #f8fafc;
border: 1px solid #dbe2ec;
border-radius: 7px;
font-size: 12.5px;
}
/* Clickable employee row in the calendar */
.rcal-row-who { cursor: pointer; transition: background 0.12s; }
.rcal-row-who:hover { background: #f1f5f9; }
.rcal-row-who:hover .rcal-row-l1 { color: var(--accent-strong, #d97706); }
/* Assignment modal: deal-picker hint line */
.assign-deal-hint {
margin: 6px 0 0; font-size: 11px; color: #64748b;
line-height: 1.35;
}
/* Clickable employee row in the Employees roster */
.emp-row-who { cursor: pointer; transition: background 0.12s; padding: 4px 6px; border-radius: 6px; }
.emp-row-who:hover { background: #f1f5f9; }
.emp-row-who:hover .emp-row-name-l1 { color: var(--accent-strong, #d97706); }
/* ─────────────────────────────────────────────────────────────────
Assignment modal — premium styling. Wider than the default narrow,
clean header + body + footer hierarchy, sans-serif notes (override
the global .modal textarea mono), prominent save action.
───────────────────────────────────────────────────────────────── */
#assign-overlay .modal {
width: 460px;
padding: 0; /* head/body/foot bring their own padding */
border-radius: 14px;
border: 1px solid #e5eaf1;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18),
0 4px 12px rgba(15, 23, 42, 0.08);
overflow: hidden;
}
#assign-overlay .modal-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 18px 22px 14px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
}
#assign-overlay .modal-head h2 {
font-size: 16px; font-weight: 700;
letter-spacing: -0.3px; color: #0f172a;
margin: 0;
display: flex; align-items: center; gap: 8px;
}
#assign-overlay .modal-head h2::before {
content: "📅"; font-size: 16px;
}
#assign-overlay .modal-close {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
border-radius: 6px;
font-size: 18px; line-height: 1; color: #64748b;
transition: background 0.12s, color 0.12s;
}
#assign-overlay .modal-close:hover {
background: #f1f5f9; color: #0f172a;
}
#assign-overlay .modal-body {
padding: 18px 22px 8px;
display: flex; flex-direction: column; gap: 14px;
}
#assign-overlay .modal-body .filter-group { margin-bottom: 0; gap: 6px; }
#assign-overlay .modal-body .filter-label {
font-size: 10.5px;
text-transform: uppercase; letter-spacing: 0.6px;
color: #64748b; font-weight: 700;
}
#assign-overlay .modal-body input[type="text"],
#assign-overlay .modal-body input[type="date"],
#assign-overlay .modal-body input[type="search"],
#assign-overlay .modal-body select,
#assign-overlay .modal-body textarea {
height: 38px;
padding: 0 12px;
font-size: 13px;
border: 1px solid #dbe2ec;
border-radius: 8px;
background: #fff;
color: #0f172a;
font-family: var(--sans); /* OVERRIDE global mono on textarea */
transition: border-color 0.12s, box-shadow 0.12s;
}
#assign-overlay .modal-body textarea {
height: auto;
padding: 10px 12px;
line-height: 1.5;
resize: vertical;
min-height: 64px;
}
#assign-overlay .modal-body input:focus,
#assign-overlay .modal-body select:focus,
#assign-overlay .modal-body textarea:focus {
outline: none;
border-color: var(--accent-strong, #d97706);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
#assign-overlay .deal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#assign-overlay .modal-msg {
margin: 0;
font-size: 12px;
color: #b91c1c;
min-height: 16px;
}
/* Hint text under the deal picker — informational, not error */
#assign-overlay .assign-deal-hint {
margin: 4px 0 0;
font-size: 11px;
color: #64748b;
line-height: 1.45;
}
/* Footer with subtle separator */
#assign-overlay .modal-actions {
display: flex; align-items: center; justify-content: flex-end;
gap: 8px;
padding: 14px 22px;
margin: 0;
border-top: 1px solid #f1f5f9;
background: #fafbfc;
}
#assign-overlay .modal-actions .btn {
height: 36px;
padding: 0 16px;
font-size: 13px;
font-weight: 600;
border-radius: 8px;
}
#assign-overlay .modal-actions .btn-ghost {
background: transparent;
border: 1px solid transparent;
color: #64748b;
}
#assign-overlay .modal-actions .btn-ghost:hover {
background: #f1f5f9; color: #0f172a;
}
#assign-overlay .modal-actions .btn-accent {
background: var(--accent-strong, #d97706);
color: #fff;
border: 1px solid var(--accent-strong, #d97706);
box-shadow: 0 1px 2px rgba(217, 119, 6, 0.18);
}
#assign-overlay .modal-actions .btn-accent:hover {
background: #b45309; border-color: #b45309;
}
#assign-overlay #assign-cancel-row {
margin-right: auto;
color: #b91c1c;
border: 1px solid #fde2e2;
background: #fff;
}
#assign-overlay #assign-cancel-row:hover {
background: #fef2f2; border-color: #fca5a5;
}
/* ─────────────────────────────────────────────────────────────────
Calendar zoom dropdown + multi-granularity (day/week/month cells)
───────────────────────────────────────────────────────────────── */
.recr-cal-zoom-sel {
width: auto !important;
height: 30px;
padding: 0 30px 0 12px;
font-size: 12px; font-weight: 600;
color: #0f172a;
background: #fff;
border: 1px solid #dbe2ec;
border-radius: 7px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
transition: border-color 0.12s, box-shadow 0.12s;
}
.recr-cal-zoom-sel:hover { border-color: #94a3b8; }
.recr-cal-zoom-sel:focus {
outline: none; border-color: var(--accent-strong, #d97706);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
/* Headers at week / month granularity — different visual rhythm.
Day headers stay the existing two-line (wd + date) layout. */
.rcal-day-headers.is-week .rcal-daycol,
.rcal-day-headers.is-month .rcal-daycol {
padding: 10px 4px;
}
.rcal-day-headers.is-week .rcal-day-wd,
.rcal-day-headers.is-month .rcal-day-wd {
font-size: 11px; letter-spacing: 0.2px;
text-transform: none; color: #0f172a; font-weight: 700;
}
.rcal-day-headers.is-week .rcal-day-date,
.rcal-day-headers.is-month .rcal-day-date {
font-size: 10px; color: #64748b; font-weight: 500;
margin-top: 1px;
}
/* Month boundary indicator on week cells — subtle accent left border */
.rcal-daycol.is-monthstart { border-left: 1px solid #cbd5e1 !important; }
.rcal-cell.is-monthstart { border-left: 1px solid #e2e8f0; }
/* Tiny bars (long-zoom) hide the text label; emoji + tooltip remain. */
.rcal-bar.is-tiny { padding: 0 4px; }
.rcal-bar.is-tiny .rcal-bar-label { display: none; }
.rcal-bar.is-tiny .rcal-bar-emoji { font-size: 11px; margin: 0 auto; }
/* Today shading is more emphatic at week/month so it's still visible */
.rcal-day-headers.is-week .rcal-daycol.is-today,
.rcal-day-headers.is-month .rcal-daycol.is-today {
background: #fef3c7;
}
/* Start / end date pills — inline flex items sitting flush with the
bar's left and right interior edges. Always inside the bar, so they
can never be clipped by the bar's overflow, mask fade, or the row
boundary. Visible at week/month zoom (day zoom has the dates on the
X-axis already, suppressed below). */
.rcal-bar-date {
flex: 0 0 auto;
font-size: 10px;
font-weight: 700;
letter-spacing: -0.1px;
padding: 2px 6px;
border-radius: 4px;
background: rgba(15, 23, 42, 0.85);
color: #fff;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}
/* Push the end-date pill to the far right of the flex row */
.rcal-bar-date-end { margin-left: auto; }
/* Date pills always show, at every zoom level — start pill stays
inside the bar's left edge, end pill stays at the bar's right edge.
At long zooms where bars get tiny, the pills overflow the bar
(bar has overflow:visible) so they remain readable; z-index keeps
them above adjacent bars when they spill. */
.rcal-bar-date { z-index: 3; }
.rcal-row { min-height: 56px; }
#recr-cal-body[data-unit="day"] .rcal-row { min-height: 56px; }