/* Rizelex CRM — UI (brand: cream / deep forest / saffron) */

:root {
	--cream: #FAF5EC; --paper: #FFFFFF; --ink: #132420; --ink-2: #3D514B; --ink-3: #6B7C76;
	--forest: #0E1F1A; --forest-2: #17342B;
	--saffron: #E8862E; --saffron-2: #F4A94F; --coral: #E85D3D;
	--green: #1DAB55; --red: #D64545; --blue: #3B7DD8;
	--line: rgba(19,36,32,.12); --radius: 14px;
	--shadow: 0 1px 2px rgba(19,36,32,.04), 0 10px 24px -16px rgba(19,36,32,.20);
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 15px; color: var(--ink); background: var(--cream); }
h1, h2 { letter-spacing: -.01em; }
a { color: inherit; }
.muted { color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
code { background: rgba(232,134,46,.12); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

/* ---------- Auth ---------- */
.auth-body { min-height: 100vh; display: grid; place-items: center; background:
	radial-gradient(700px 400px at 85% -10%, rgba(232,134,46,.15), transparent 60%), var(--cream); }
.auth-card { width: min(420px, 92%); background: var(--paper); border: 1px solid var(--line);
	border-radius: 22px; padding: 36px; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; margin-bottom: 22px; }
.auth-brand em, .side-brand em { font-style: normal; color: var(--saffron); }
.auth-card h1 { font-family: var(--display); font-weight: 600; font-size: 26px; margin-bottom: 8px; }
.auth-card form { margin-top: 18px; display: grid; gap: 14px; }
.alert { background: rgba(214,69,69,.1); border: 1px solid rgba(214,69,69,.35); color: #A22; padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-top: 12px; }

.brand-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
	background: linear-gradient(135deg, var(--saffron), var(--coral)); color: #fff; font-family: var(--display); font-weight: 700; font-size: 18px; }

/* ---------- Forms ---------- */
label { display: grid; gap: 6px; font-weight: 500; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
input, select, textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(232,134,46,.4); border-color: var(--saffron); }
label.check { display: flex; align-items: center; gap: 9px; font-weight: 600; }
label.check input { width: auto; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: inherit; font-weight: 600;
	padding: 10px 18px; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--saffron), var(--coral)); color: #fff; box-shadow: 0 6px 14px -8px rgba(232,93,61,.45); }
.btn-ghost { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.sidenav { background: linear-gradient(170deg, var(--forest), var(--forest-2)); color: rgba(255,253,249,.85);
	padding: 22px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.side-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: #fff; padding: 4px 10px 20px; }
.sidenav nav { display: grid; gap: 4px; }
.sidenav nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px;
	text-decoration: none; font-weight: 500; font-size: 14px; color: rgba(255,253,249,.72); }
.sidenav nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidenav nav a.active { background: rgba(232,134,46,.18); color: var(--saffron-2); }
/* v1.24.0: Tier 0 waiting-reply badge, sidebar Conversations link — see api.php crm_api_version() */
.nav-badge { margin-left: auto; background: var(--saffron); color: var(--forest); font-size: 11px;
    font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; }
/* v1.11.0: Workflows' sub-nav (Manage Templates / Manage Demo Slots) — indented, smaller, no icon. */
.sidenav nav a.nav-sub { padding: 7px 12px 7px 34px; font-size: 12.5px; font-weight: 600; margin-top: -2px; }
.sidenav nav a.nav-sub.active { background: rgba(232,134,46,.12); }
html.sidenav-collapsed .nav-sub { display: none; }
.side-foot { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid rgba(255,255,255,.1); }
.side-user { font-weight: 800; font-size: 13.5px; color: #fff; }
.side-logout { font-size: 12.5px; color: rgba(255,253,249,.6); text-decoration: none; }
.side-logout:hover { color: #fff; }

/* v1.31.1: "Switch to live data" — only rendered while demo_present() is true (see view_page());
   one-way, so no separate "on/off" visual state to design for beyond mid-flip (is-busy). */
.side-demo-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.side-demo-switch-label { font-size: 11.5px; font-weight: 600; color: rgba(255,253,249,.55); }
.side-switch { position: relative; flex: none; width: 34px; height: 19px; padding: 0; border-radius: 999px;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); cursor: pointer;
	transition: background .15s ease, border-color .15s ease; }
.side-switch:hover { border-color: rgba(255,255,255,.4); }
.side-switch-knob { position: absolute; top: 1px; left: 1px; width: 15px; height: 15px; border-radius: 50%;
	background: #fff; transition: transform .15s ease; }
.side-switch[aria-checked="true"] { background: var(--saffron); border-color: var(--saffron); }
.side-switch[aria-checked="true"] .side-switch-knob { transform: translateX(15px); }
.side-switch.is-busy { opacity: .55; pointer-events: none; }
html.sidenav-collapsed .side-demo-switch-label { display: none; }
html.sidenav-collapsed .side-demo-switch { justify-content: center; }

/* Collapse toggle — icons-only vs. icons+labels (v1.4.1 follow-up). Class lives on <html> (set by an inline
   script in <head>, before the sidebar paints) rather than on .sidenav, so there's no flash of the
   expanded sidebar on load while crm.js is still booting. */
.side-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 14px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
	color: rgba(255,253,249,.72); font: inherit; font-weight: 700; font-size: 12.5px; padding: 8px 12px; cursor: pointer; }
.side-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.side-toggle-ic { font-size: 15px; line-height: 1; transition: transform .2s; }
html.sidenav-collapsed .side-toggle-ic { transform: rotate(180deg); }
html.sidenav-collapsed .side-toggle { justify-content: center; }
html.sidenav-collapsed .side-toggle-label { display: none; }

html.sidenav-collapsed .shell { grid-template-columns: 72px 1fr; }
html.sidenav-collapsed .sidenav { padding: 22px 10px; }
html.sidenav-collapsed .side-brand { justify-content: center; }
html.sidenav-collapsed .side-brand-text { display: none; }
html.sidenav-collapsed .sidenav nav a { justify-content: center; padding: 11px; }
html.sidenav-collapsed .sidenav nav a .nav-label { display: none; }
html.sidenav-collapsed .side-foot { display: none; }

.ic { width: 18px; height: 18px; flex: none; background: currentColor; }
.ic-dashboard { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v10H3zM13 3h8v6h-8zM13 11h8v10h-8zM3 15h8v6H3z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v10H3zM13 3h8v6h-8zM13 11h8v10h-8zM3 15h8v6H3z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-leads { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-9 2-9 6v2h18v-2c0-4-5-6-9-6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-9 2-9 6v2h18v-2c0-4-5-6-9-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-funnel { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 4h18l-7 8v6l-4 2v-8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-conversations { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* v1.31.0: Funnel "Contacted" node — a phone glyph reads more clearly than the chat-bubble icon
   at the funnel's small badge size (the bubble's tail/rounded-corner detail was disappearing). */
.ic-phone { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1.1.5 1.1 1.1V20.5c0 .6-.5 1.1-1.1 1.1C10.4 21.6 2.4 13.6 2.4 3.7c0-.6.5-1.1 1.1-1.1H7.5c.6 0 1.1.5 1.1 1.1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.3 1.2.4 2.5.6 3.8.6.6 0 1.1.5 1.1 1.1V20.5c0 .6-.5 1.1-1.1 1.1C10.4 21.6 2.4 13.6 2.4 3.7c0-.6.5-1.1 1.1-1.1H7.5c.6 0 1.1.5 1.1 1.1 0 1.3.2 2.6.6 3.8.1.4 0 .8-.3 1.1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-import { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3v10l4-4 1.5 1.5L12 16 6.5 10.5 8 9l4 4zM4 19h16v2H4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3v10l4-4 1.5 1.5L12 16 6.5 10.5 8 9l4 4zM4 19h16v2H4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-settings { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm9 4a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4 1a7 7 0 0 0-2-1.2L16 3H8l-.4 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.5 2 1.5A7 7 0 0 0 3 12a7 7 0 0 0 .1 1.2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 2 1.2L8 21h8l.4-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.5-2-1.5A7 7 0 0 0 21 12z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 8a4 4 0 1 0 4 4 4 4 0 0 0-4-4zm9 4a7 7 0 0 0-.1-1.2l2-1.5-2-3.5-2.4 1a7 7 0 0 0-2-1.2L16 3H8l-.4 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.5 2 1.5A7 7 0 0 0 3 12a7 7 0 0 0 .1 1.2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 2 1.2L8 21h8l.4-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.5-2-1.5A7 7 0 0 0 21 12z'/%3E%3C/svg%3E") center/contain no-repeat; }

.content { padding: 26px 30px 60px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.topbar h1 { font-family: var(--display); font-weight: 600; font-size: 28px; }

/* ---------- Panels & grids ---------- */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 22px; min-width: 0; }
.panel h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--ink-2); }
/* v1.14.2: collapsible "Workflow editor" details panel — defaults closed so the visual canvas gets
   the room; see wfDetailsCollapsed(). */
.wf-details-head { display: flex; align-items: center; justify-content: space-between; }
.wf-details-panel:has(.wf-details-body[hidden]) .wf-details-head { margin-bottom: 0; }
.wf-details-panel:has(.wf-details-body[hidden]) h2 { margin-bottom: 0; }
.wf-details-body { margin-top: 14px; }
.wf-details-body > label:first-child { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-2 .panel { margin-bottom: 0; }
section.grid-2 { margin-bottom: 22px; }
.chart-wrap { position: relative; height: 260px; }

/* ---------- KPI cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 18px; box-shadow: var(--shadow); }
.kpi .k-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.kpi .k-value { font-family: var(--display); font-weight: 600; font-size: 28px; margin-top: 4px; }
.kpi .k-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kpi .k-pct { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.kpi .up { color: var(--green); font-weight: 800; }
.kpi .down { color: var(--red); font-weight: 800; }
/* v1.7.20: KPI cards that link somewhere (Leads/Funnel) or open a modal (WhatsApp sent) — the <a>
   or <button> still renders exactly like a plain .kpi card, just with a hover lift + pointer to
   signal it's clickable. button.kpi resets the handful of UA button defaults that would otherwise
   fight the shared .kpi look (browsers don't reliably default a <button>'s cursor to pointer). */
a.kpi.kpi-link, button.kpi.kpi-link { text-decoration: none; color: inherit; display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.kpi-link:hover { box-shadow: 0 10px 24px -10px rgba(20,40,34,.28); transform: translateY(-2px); }
.kpi-link:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover { background: rgba(232,134,46,.04); cursor: pointer; }
.table .num { text-align: right; }
.t-name { font-weight: 600; }
.t-sub { font-size: 12px; color: var(--ink-3); }
.mini-table { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.mini-table td, .mini-table th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.mini-table th { font-size: 11px; text-transform: uppercase; color: var(--ink-3); }
.mini-table .num { text-align: right; }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(232,134,46,.12); color: #A85717; white-space: nowrap; }
.chip.c-instagram { background: rgba(214,69,143,.12); color: #B3327A; }
.chip.c-facebook { background: rgba(59,125,216,.12); color: #2E62AC; }
.chip.c-google { background: rgba(232,134,46,.12); color: #A85717; }
.chip.c-whatsapp { background: rgba(29,171,85,.12); color: #157A3F; }
.chip.c-website { background: rgba(19,36,32,.08); color: var(--ink-2); }
.chip.c-referral { background: rgba(140,90,220,.12); color: #6A3FB8; }

.stage-select { padding: 5px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; width: auto; }
.stage-new { background: rgba(59,125,216,.1); }
.stage-contacted { background: rgba(232,134,46,.1); }
.stage-demo_booked { background: rgba(244,169,79,.18); }
.stage-demo_attended { background: rgba(29,171,85,.12); }
.stage-enrolled { background: rgba(29,171,85,.22); }
.stage-lost { background: rgba(214,69,69,.1); }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filters input, .filters select { width: auto; }
.filters #f-q, .filters #fn-q { flex: 1; min-width: 200px; }
.filters .search-wrap { flex: 1; min-width: 200px; position: relative; display: flex; }
.search-wrap input { width: 100%; padding-right: 34px; }
.search-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: none; border: 0; background: none; cursor: pointer; font-size: 13px; line-height: 1; padding: 6px 8px; color: var(--ink-3); border-radius: 8px; }
.search-clear.show { display: block; }
.search-clear:hover { color: var(--ink); background: rgba(19,36,32,.06); }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 16px; align-items: center; font-size: 13.5px; color: var(--ink-3); }

/* Bulk selection action bar — shared by Leads table + Funnel board (v1.4.1) */
.bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(232,134,46,.08);
	border: 1px solid rgba(232,134,46,.3); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.bulk-bar[hidden] { display: none; }
.bulk-bar strong, .bulk-bar span.bulk-count { font-weight: 800; color: var(--ink-2); }
.bulk-bar select { width: auto; }
.check-col { width: 34px; text-align: center; }
.chip-sm { padding: 2px 7px; font-size: 10px; }

/* ---------- Kanban ---------- */
.board-hint { margin-bottom: 14px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(216px, 1fr); gap: 14px; align-items: start; overflow-x: auto; }
.col { background: rgba(19,36,32,.04); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 220px; }
.col.drag-over { outline: 2px dashed var(--saffron); outline-offset: -4px; background: rgba(232,134,46,.06); }
/* v1.7.20: one-time pulse for the Dashboard's "Demo & beyond" -> Funnel deep link (?hl=demo),
   applied by initFunnel() to the demo_booked/demo_attended/enrolled columns. Plays twice then
   settles back to the normal .col look — see initFunnel() for why this never repeats. */
@keyframes col-hl-pulse { 0%, 100% { outline-color: transparent; background: transparent; } 50% { outline-color: var(--saffron); background: rgba(232,134,46,.08); } }
.col.col-hl { outline: 2px solid transparent; outline-offset: -4px; animation: col-hl-pulse 1.4s ease-in-out 2; }
.col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); padding: 6px 8px 10px; display: flex; justify-content: space-between; gap: 8px; }
.col h3 span { white-space: nowrap; }
.card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 2px 8px -4px rgba(19,36,32,.2); }
.card[draggable="true"]:active { cursor: grabbing; }
.card .c-name { font-weight: 800; font-size: 13.5px; padding-right: 22px; overflow-wrap: anywhere; }
/* Meta rows wrap instead of overflowing the card once a channel chip + date don't both fit on one
   line (this got noticeably tighter once the board can hold more than the original 6 columns). */
.card .c-meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; }
.card .c-meta span { min-width: 0; }
.card.dragging { opacity: .4; }
.card.selected { border-color: var(--saffron); background: rgba(232,134,46,.08); box-shadow: 0 0 0 2px rgba(232,134,46,.35); }

/* Select checkbox: hidden until hover, stays visible once the card is actually selected so the
   selection doesn't become invisible the moment the mouse moves away. */
.card-chk-wrap { position: absolute; top: 8px; right: 8px; opacity: 0; cursor: pointer; line-height: 0; transition: opacity .12s; }
.card:hover .card-chk-wrap, .card.selected .card-chk-wrap { opacity: 1; }
.card-chk-wrap input { width: auto; margin: 0; cursor: pointer; }

/* ---------- Modal / drawer ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(14,31,26,.5); z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal { background: var(--cream); border-radius: 20px; width: min(860px, 100%); max-height: 92vh; overflow: auto; padding: 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.modal h2 { font-family: var(--display); font-weight: 600; font-size: 22px; margin-bottom: 16px; }
.modal .form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
.modal .form-grid .span-3 { grid-column: 1 / -1; }
.modal-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Lead modal header + stat strip (v1.25.0, Phase 1 of the lead-modal redesign) ----------
   Scoped to .modal-lead so no other modal (Add workflow, Bulk edit, etc.) is affected. Sits inside
   the same .modal padding as before — a wrapper-div restructure wasn't needed for this phase. */
.modal-lead { width: min(940px, 100%); }
.lm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.lm-id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.lm-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--saffron), var(--coral)); color: #fff; font-family: var(--display); font-weight: 700; font-size: 17px; }
.lm-id h2 { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; margin-bottom: 0; }
.lm-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); font-weight: 700; flex-wrap: wrap; }
.lm-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.lm-dot-green { background: var(--green); box-shadow: 0 0 0 3px rgba(29,171,85,.15); }
.lm-dot-red { background: var(--red); box-shadow: 0 0 0 3px rgba(214,69,69,.15); }
.lm-dot-saffron { background: var(--saffron); box-shadow: 0 0 0 3px rgba(232,134,46,.15); }
.lm-meta-row .sep { color: var(--line); }
.lm-badge { background: rgba(59,125,216,.1); color: var(--blue); font-weight: 800; padding: 1px 8px; border-radius: 999px; font-size: 11px; }
.lm-alert { color: var(--coral); font-weight: 800; }
.lm-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.lm-actions .btn-wa { background: rgba(29,171,85,.1); color: var(--green); }
.lm-actions .btn-icon { background: #fff; border: 1px solid var(--line); color: var(--ink-2); width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 11px; }
.lm-actions .btn-icon:hover { background: var(--cream); }
.lm-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.lm-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.lm-stat .s-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.lm-stat .s-value { font-size: 13.5px; font-weight: 700; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-stat.s-warn { border-color: rgba(232,134,46,.35); background: rgba(232,134,46,.06); }
.lm-stat.s-warn .s-value { color: var(--coral); }
.lm-stat.s-muted .s-value { color: var(--ink-3); font-weight: 700; }
.lm-stat select.s-value-select { font: inherit; font-weight: 800; font-size: 13px; width: 100%; border: 0; background: transparent; padding: 0; margin-top: 3px; color: var(--ink); }
.lm-stat select.s-value-select:focus { outline: none; }
@media (max-width: 700px) { .lm-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Lead modal tabs (v1.26.0, Phase 2) ----------
   Sits between the form grid and the sections that used to just stack (Tags, WhatsApp,
   Journey, Meta). Every panel's inner markup is untouched from before this phase — only the
   wrapping .lm-tab-panel/[hidden] toggling is new, so none of the existing timeline/tag/capi
   wiring in crm.js needed to change. */
.lm-tabs { display: flex; gap: 4px; margin: 4px 0 0; border-bottom: 1px solid var(--line); }
.lm-tab { border: 0; background: none; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-3);
	padding: 11px 4px; margin-right: 22px; cursor: pointer; position: relative; }
.lm-tab:hover { color: var(--ink-2); }
.lm-tab.active { color: var(--ink); }
.lm-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--saffron); border-radius: 2px 2px 0 0; }
.lm-tab-panels { padding-top: 6px; }

/* ---------- Lead modal two-column layout + sidebar (v1.27.0, Phase 3) ----------
   .lm-main holds the form + tabs (unchanged from Phase 2); .lm-side is new — Next Action /
   Last WhatsApp Message / Quick Actions / Lead Details cards. Only Lead Details and the WA
   preview reuse data already on `lead`; the WA preview additionally needs the one new
   `last_wa_message` field crm_api_leads_get() now returns (see api.php). */
.modal-lead { width: min(1040px, 100%); }
.lm-layout { display: grid; grid-template-columns: 1fr 296px; gap: 20px; align-items: start; }
.lm-main .form-grid { grid-template-columns: 1fr 1fr; }
.lm-side { display: grid; gap: 14px; }
.lm-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.side-h { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.next-action p { font-size: 13.5px; font-weight: 700; line-height: 1.45; margin: 0 0 12px; }
.na-due-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.na-due { font-size: 11.5px; color: var(--ink-3); font-weight: 800; }
.na-due-warn { color: var(--coral); }
.na-btn { border: 1px solid var(--line); background: var(--cream); font: inherit; font-weight: 600; font-size: 11.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.na-btn:hover { background: var(--paper); }
.wa-preview { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; background: var(--cream); border-radius: 10px; padding: 9px 11px; margin-bottom: 10px; }
.wa-preview .wa-time { color: var(--ink-3); font-size: 11px; font-weight: 700; display: block; margin-bottom: 4px; }
.side-link { display: block; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 8px; text-decoration: none; }
.side-link:hover { background: var(--cream); }
.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qa-btn { border: 1px solid var(--line); background: var(--paper); font: inherit; font-weight: 600; font-size: 11.5px; padding: 10px 6px; border-radius: 11px; cursor: pointer; text-align: center; text-decoration: none; color: var(--ink); display: block; }
.qa-btn:hover { background: var(--cream); }
.ld-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(19,36,32,.06); }
.ld-row:last-child { border-bottom: 0; }
.ld-label { color: var(--ink-3); font-weight: 700; font-size: 11px; width: 60px; flex: none; text-transform: uppercase; letter-spacing: .04em; }
.ld-value { font-weight: 700; overflow-wrap: anywhere; }
.ld-value.muted { color: var(--ink-3); font-weight: 600; }
@media (max-width: 860px) { .lm-layout { grid-template-columns: 1fr; } .lm-main .form-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- Journey tab workflow-timeline stepper (v1.28.0, Phase 4) ---------- */
.wf-run-block { margin-bottom: 18px; }
.wf-run-block:last-child { margin-bottom: 0; }
.wf-run-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.wf-run-head .btn { margin-left: auto; }
.wf-steps { display: flex; align-items: flex-start; }
.wf-step { flex: 1; text-align: center; position: relative; }
.wf-step .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--saffron); margin: 0 auto 8px; position: relative; z-index: 2; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--saffron); }
.wf-step.pending .dot { background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.wf-step.current .dot { background: var(--paper); box-shadow: 0 0 0 2px var(--saffron); }
.wf-step .line { position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--saffron); z-index: 1; }
.wf-step.pending .line { background: var(--line); }
.wf-step:first-child .line { display: none; }
.wf-step .st-date { font-size: 10.5px; color: var(--ink-3); font-weight: 700; }
.wf-step .st-label { font-size: 11.5px; font-weight: 800; margin-top: 1px; }
.wf-step.pending .st-label, .wf-step.pending .st-date { color: var(--ink-3); }
textarea.notes-area { line-height: 1.6; min-height: 112px; resize: vertical; }
.timeline { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.timeline h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 10px;
	display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Connected vertical timeline: a single line (.tl-list::before) runs behind all entries so it stays
   unbroken regardless of how tall any one entry is (e.g. a wrapped multi-line note); each .tl-item
   gets its own dot, vertically centered on its own row so it lines up even when rows vary in height. */
.tl-list { position: relative; }
.tl-list::before { content: ''; position: absolute; left: 6.5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-item { position: relative; display: flex; gap: 10px; padding: 8px 0 8px 22px; font-size: 13.5px; }
.tl-item::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
	width: 8px; height: 8px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 3px var(--paper); z-index: 1; }
.tl-item .tl-time { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
/* v1.7.14: WhatsApp messages interleaved into the Activity timeline (off by default, see the
   "Include WhatsApp messages" checkbox in leadForm()/wireLeadTimeline() in crm.js) get a green dot
   instead of the default saffron one, so they're visually distinguishable at a glance from the
   CRM's own logged events (notes, stage changes, Meta sync) even though they share the same list. */
.tl-item-wa::before { background: var(--green); }
.tl-wa-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
	text-transform: none; letter-spacing: normal; color: var(--ink-3); cursor: pointer; }
.tl-wa-toggle input { margin: 0; cursor: pointer; }
#followups .tl-item, #recent .tl-item { align-items: center; }
.tl-item .tl-open { margin-left: auto; flex-shrink: 0; padding: 3px 10px; font-size: 12px; }
.tl-note-row { display: flex; gap: 8px; margin-top: 10px; }
.capi-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }

/* Lead tags (v1.7.11) — free-text chips on the Leads table and the lead modal. */
.tag-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
	font-size: 11.5px; font-weight: 700; background: rgba(19,36,32,.08); color: var(--ink-2); }
.tag-chip .tag-x { cursor: pointer; opacity: .55; font-weight: 900; }
.tag-chip .tag-x:hover { opacity: 1; color: #A22; }
.tag-add-row { display: flex; gap: 8px; margin-top: 8px; }
.tag-add-row input { flex: 1; }

/* WhatsApp Conversation — a freeform reply box, only enabled inside the 24-hour window.
   Originally a lead-modal panel (v1.7.11); moved out to its own top-level page (v1.7.12), whose
   two-pane inbox layout is styled below. These message/compose classes are shared by that page. */
.wa-msg { max-width: 78%; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; word-break: break-word; }
.wa-msg.in { align-self: flex-start; background: var(--paper); border: 1px solid var(--line); }
.wa-msg.out { align-self: flex-end; background: rgba(232,134,46,.15); }
.wa-msg .wa-msg-time { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.wa-msg.out.wa-msg-error { background: rgba(214,69,69,.12); }
.wa-msg-error-detail { margin-top: 4px; font-size: 11.5px; color: #a52626; line-height: 1.35; }
/* v1.8.0 Phase 1: automation-state banner at the top of a conversation thread. Colour-coded by
   severity — amber for "a human has it", grey for stopped, red for do-not-contact. */
.wa-convo-automation { border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; line-height: 1.45; }
.wa-convo-automation.is-paused  { background: rgba(232,134,46,.12); border: 1px solid rgba(232,134,46,.45); }
.wa-convo-automation.is-stopped { background: rgba(19,36,32,.06);   border: 1px solid var(--line); }
.wa-convo-automation.is-dnc     { background: rgba(214,69,69,.10);  border: 1px solid rgba(214,69,69,.4); }
.wa-convo-window { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.wa-convo-compose { display: flex; gap: 8px; align-items: flex-end; }
.wa-convo-compose textarea { flex: 1; resize: vertical; min-height: 44px; }
/* v1.7.13: "send a template" panel — shown as the primary action when a lead has no conversation
   yet or their 24-hour window has closed (a freeform box genuinely cannot reach them, by Meta's own
   rule), and tucked behind a <details> toggle as a secondary option when freeform is available. */
.wa-convo-tpl-toggle { margin-top: 10px; font-size: 12.5px; }
.wa-convo-tpl-toggle summary { cursor: pointer; color: var(--ink-2); }
.wa-convo-tplsend { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.wa-convo-tplsend select { min-width: 260px; }
.wa-convo-tplsend-start { padding-top: 4px; }

/* v1.21.0 — Conversations template picker + live preview, side by side. The controls keep their
   original stacked layout inside the left column, so nothing about the picker itself changed; the
   preview simply occupies a second column beside it. Collapses to one column on narrow screens so
   the preview sits under the controls rather than squeezing them. */
.cv-tpl-grid { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.cv-tpl-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 0 1 auto; min-width: 0; }
#cv-tpl-preview-col { flex: 1 1 280px; min-width: 0; }
.cv-tpl-preview { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; }
.cv-tpl-preview h4 { font-size: 12px; font-weight: 700; color: var(--forest-2); margin: 0 0 6px; }
.cv-tpl-preview .flow-detail-msg { text-align: left; }
.cv-tpl-preview-empty { border-style: dashed; background: transparent; }
@media (max-width: 780px) { .cv-tpl-grid { flex-direction: column; } #cv-tpl-preview-col { width: 100%; flex-basis: auto; } }

/* v1.18.0 — canned-response "/" autocomplete dropdown, anchored under the compose textarea. */
.cv-canned-dropdown { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 4px; z-index: 20;
	background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
	max-height: 220px; overflow-y: auto; }
.cv-canned-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 12px;
	border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; font: inherit; color: inherit; }
.cv-canned-item:last-child { border-bottom: 0; }
.cv-canned-item:hover { background: rgba(19,36,32,.05); }
.cv-canned-item span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-canned-item.cv-canned-manage { color: var(--saffron); font-weight: 700; text-align: center; }
.cv-canned-empty { padding: 10px 12px; }

/* v1.18.0 — media (image/video/document/audio) bubbles inside a WhatsApp thread. */
.wa-msg-media img, .wa-msg-media video { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; margin-bottom: 4px; }
.wa-msg-media audio { display: block; margin-bottom: 4px; }
.wa-msg-media a.wa-media-doc { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.wa-convo-media { margin-top: 8px; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.wa-convo-media select, .wa-convo-media input[type=text] { min-width: 160px; }
.wa-convo-media input[name=media_url] { flex: 1; min-width: 220px; }
.wa-msg-media-caption { font-size: 13px; opacity: .85; margin-bottom: 4px; }

/* Conversations page (v1.7.12; filters + start-conversation added v1.7.13) — two-pane inbox: a
   filter bar + scrollable list of EVERY lead on the left (not just ones with existing WhatsApp
   history), the selected lead's thread + reply controls on the right. Collapses to a single column
   (list only, thread hidden until a conversation is picked) below the same breakpoint the Funnel
   board already uses. */
.convo-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.convo-list { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.convo-list-items { max-height: 70vh; overflow-y: auto; }
.convo-list-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line);
	background: none; cursor: pointer; font: inherit; color: inherit; }
.convo-list-item:hover { background: rgba(19,36,32,.04); }
.convo-list-item.active { background: rgba(232,134,46,.10); }
.convo-list-item .cv-name-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.convo-list-item .cv-name { font-weight: 800; font-size: 13.5px; }
.convo-list-item .cv-time { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.convo-list-item .cv-meta-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.convo-list-item .cv-stage-label { font-size: 11px; color: var(--ink-3); }
.convo-list-item .cv-snippet { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-list-item .cv-snippet .cv-out-prefix { color: var(--ink-3); }
.convo-list-item .cv-empty-snippet { color: var(--ink-3); font-style: italic; }
/* v1.24.0: waiting-for-a-reply highlight — last logged message on this thread is inbound */
.convo-list-item.convo-waiting { background: rgba(232,134,46,.06); border-left: 3px solid var(--saffron); padding-left: 11px; }
.convo-list-item.convo-waiting.active { background: rgba(232,134,46,.14); }
.cv-waiting-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--saffron); margin-right: 6px; vertical-align: middle; }
.convo-thread-pane { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-height: 400px; }
.convo-thread-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.convo-thread-head h3 { margin: 0; font-size: 15px; }
.convo-thread-body { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
	padding: 10px; background: rgba(19,36,32,.03); border-radius: 10px; margin-bottom: 10px; }
@media (max-width: 860px) {
	.convo-layout { grid-template-columns: 1fr; }
	.convo-list-items { max-height: 40vh; }
}
.capi-ok { background: rgba(29,171,85,.15); color: #157A3F; }
.capi-error { background: rgba(214,69,69,.15); color: #A22; }

/* ---------- Misc ---------- */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--ink); color: #fff;
	padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; transition: transform .3s; z-index: 99; }
#toast.show { transform: translateX(-50%) translateY(0); }
.snippet pre { background: var(--forest); color: #CFE8D8; font-size: 12px; padding: 14px; border-radius: 12px; overflow-x: auto; margin-top: 10px; line-height: 1.5; }
.snippet summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--saffron); }
.result-box { margin-top: 12px; font-size: 13px; background: rgba(19,36,32,.05); border-radius: 10px; padding: 12px; word-break: break-all; }
.empty { color: var(--ink-3); font-size: 13.5px; padding: 14px 4px; }

/* ===== Dashboard widget grid (v1.7) ===== */
.dash-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.dash-controls input[type=date] { width: auto; }
.dash-spacer { flex: 1; }
.range-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.range-chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 500; font-family: var(--font); color: var(--ink-2); }
.range-chip:hover { border-color: var(--saffron); color: var(--ink); }
.range-chip.active { background: var(--forest); color: #fff; border-color: var(--forest); }

/* v1.11.0: Settings page tabs — replaces one long ~13-section scroll. */
.settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.settings-tab-btn { padding: 8px 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 13px; font-weight: 500; font-family: var(--font); color: var(--ink-2); }
.settings-tab-btn:hover { color: var(--ink); background: rgba(19,36,32,.05); }
.settings-tab-btn.active { background: var(--forest); color: #fff; }
.settings-tab-panel[hidden] { display: none; }
#dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.dash-box { margin-bottom: 0; }
.dash-box.full { grid-column: 1 / -1; }
.dash-box.box-hidden { display: none; }
.box-head { display: flex; align-items: center; gap: 8px; }
.box-head h2 { margin-bottom: 14px; }
.drag-handle { cursor: grab; color: var(--ink-3); user-select: none; font-size: 15px; padding: 0 4px 12px 0; }
.drag-handle:active { cursor: grabbing; }
.drag-handle:hover { color: var(--ink); }
.dash-box.dragging-box { opacity: .45; }
.dash-box.drag-over { outline: 2px dashed var(--saffron); outline-offset: 3px; }
/* v1.7.20: Customize moved from a popover that opened at the top of the page (pushing the whole
   grid down) to a right-hand slide-in panel — direct request: "The customization list should be in
   a right sidebar like pannel instead of at the top." position:fixed so it overlays the page rather
   than taking up grid flow (open or closed), sliding in via transform so `.open` can be animated —
   unlike the old `hidden`-attribute toggle, which can't transition. */
.dash-customize-backdrop { position: fixed; inset: 0; background: rgba(14,31,26,.4); z-index: 59; }
.dash-customize {
	position: fixed; top: 0; right: 0; height: 100vh; width: min(360px, 92vw); z-index: 60;
	background: var(--paper); border-left: 1px solid var(--line); box-shadow: -14px 0 32px -16px rgba(19,36,32,.35);
	padding: 20px; overflow-y: auto; transform: translateX(100%); transition: transform .22s ease;
}
.dash-customize.open { transform: translateX(0); }
.dash-customize .dc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.dash-customize .dc-head h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0; }
.dash-customize .cust-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.dash-customize label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.dash-customize .cust-foot { margin-top: 16px; display: flex; gap: 8px; }
.dash-customize .cust-foot .btn { flex: 1; }

/* ===== v1.31.0: Dashboard presentation pass — flattened Performance, premium Action Center,
   professional icon-funnel with connectors, operational tables (replacing dot-timeline lists),
   compact Activity, one coherent Channels+Campaigns+Lost-reasons analytics zone, tighter vertical
   rhythm throughout. Scoped to #dash-grid/#dash-grid-3/.action-center/#kpis (Dashboard-only ids/
   classes) so WA Analytics and Growth Analytics — which reuse .dash-box/.panel/.kpis/.mini-table —
   are untouched. ===== */

/* -- Tighter vertical rhythm: smaller row gaps + box padding than the rest of the app, and a
   shorter Lead-trend chart (Dashboard-scoped — WA/Growth Analytics keep the taller .chart-wrap). -- */
#dash-grid { gap: 14px; }
#dash-grid > .dash-box, #dash-grid-3 .dash-box { padding: 16px 18px; }
#dash-grid .box-head, #dash-grid-3 .box-head { margin-bottom: 8px; }
#dash-grid .box-head h2, #dash-grid-3 .box-head h2 { margin-bottom: 0; font-size: 14px; }
#dash-grid .chart-wrap { height: 200px; }
.box-head { position: relative; }
.box-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
	padding: 0 5px; border-radius: 999px; background: rgba(232,134,46,.14); color: #A85717;
	font-size: 10.5px; font-weight: 700; }
.box-count:empty { display: none; }
.box-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--saffron); text-decoration: none; }
.box-link:hover { text-decoration: underline; }

.dash-section-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-3); margin: 2px 0 8px; }

/* -- Action Center: matched to the approved reference — one coherent saffron icon tint across all 4
   tiles (not a different colour per category), sentence-case label above a bare number with an inline
   unit word, tighter tile height. -- */
.action-center { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ac-tile { display: flex; align-items: center; gap: 12px; background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 12px 16px; text-decoration: none;
	color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ac-tile:hover { transform: translateY(-2px); border-color: rgba(232,134,46,.4);
	box-shadow: 0 6px 14px -6px rgba(19,36,32,.14), 0 18px 30px -20px rgba(19,36,32,.32); }
.ac-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
	background: rgba(232,134,46,.12); color: var(--saffron); }
.ac-ic::before { content: ''; width: 18px; height: 18px; background: currentColor; display: block; }
.ac-ic-reply::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H9l-5 4v-4H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ac-ic-followup::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.2 14.2L11 13V7h2v5l4.2 2.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.2 14.2L11 13V7h2v5l4.2 2.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ac-ic-demo::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ac-ic-cold::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cg%3E%3Crect x='11' y='1' width='2' height='22' rx='1'/%3E%3Crect x='11' y='1' width='2' height='22' rx='1' transform='rotate(60 12 12)'/%3E%3Crect x='11' y='1' width='2' height='22' rx='1' transform='rotate(120 12 12)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cg%3E%3Crect x='11' y='1' width='2' height='22' rx='1'/%3E%3Crect x='11' y='1' width='2' height='22' rx='1' transform='rotate(60 12 12)'/%3E%3Crect x='11' y='1' width='2' height='22' rx='1' transform='rotate(120 12 12)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; }
.ac-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ac-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ac-row { display: flex; align-items: baseline; gap: 5px; }
.ac-value { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.1; }
.ac-unit { font-size: 12px; color: var(--ink-3); }
.ac-chev { color: var(--ink-3); font-size: 20px; flex: none; transition: transform .15s ease, color .15s ease; }
.ac-tile:hover .ac-chev { transform: translateX(2px); color: var(--saffron); }

/* -- Performance: matched to the approved reference — the primary 5 metrics each sit in their own
   thin-bordered, shadow-less cell (border only, no elevation, so it reads as "one lightweight row"
   rather than the app's usual heavier .panel card), separated by a small gap instead of touching
   dividers; the secondary 2 metrics (Show rate / WhatsApp sent) stay flat/divided since the reference
   treats them as plain text, not boxed. Overrides the shared .kpis grid (also used by WA Analytics)
   for this one box only; #kpis display:block hands layout fully to the two rows below. -- */
#kpis { display: block; }
.perf-flat { display: flex; align-items: stretch; gap: 22px; }
.perf-primary { display: flex; flex: 1 1 auto; min-width: 0; gap: 10px; }
.perf-secondary { display: flex; flex: none; }
.perf-cell { flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.perf-cell-boxed { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s ease; }
a.perf-cell-boxed:hover, button.perf-cell-boxed:hover { border-color: rgba(232,134,46,.45); }
.perf-secondary .perf-cell { padding: 0 20px; border-left: 1px solid var(--line); }
.perf-secondary .perf-cell:first-child { padding-left: 0; border-left: 0; }
a.perf-cell, button.perf-cell { cursor: pointer; transition: opacity .15s ease; }
a.perf-cell:hover .perf-value, button.perf-cell:hover .perf-value { color: var(--saffron); }
button.perf-cell { display: block; width: 100%; background: none; font: inherit; text-align: left; border-width: 0; }
.perf-secondary button.perf-cell { border-width: 0 0 0 1px; border-style: solid; border-color: var(--line); }
.perf-secondary button.perf-cell:first-child { border-left-width: 0; }
button.perf-cell-boxed { border-width: 1px; border-style: solid; border-color: var(--line); }
.perf-value { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.01em; }
.perf-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 4px; }
.perf-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; min-height: 15px; }
.perf-sub .up { color: var(--green); font-weight: 700; }
.perf-sub .down { color: var(--red); font-weight: 700; }
.perf-divider { width: 1px; align-self: stretch; background: var(--line); }
@media (max-width: 1100px) { .perf-flat { flex-wrap: wrap; gap: 16px 0; } .perf-divider { display: none; } .perf-primary, .perf-secondary { flex-wrap: wrap; row-gap: 10px; flex: 1 1 100%; } .perf-primary { gap: 10px; } .perf-cell { flex: 1 1 30%; min-width: 130px; } }
@media (max-width: 760px) { .perf-cell { flex: 1 1 46%; } }

/* -- Icon-funnel: matched to the approved reference — a bare single-tone icon (no circle badge) sits
   above a sentence-case label above the bold count; stages are joined by a plain arrow glyph with the
   drop-off % underneath it, not a rail+pill. Last node (Enrolled) gets the gold trophy accent colour. -- */
.funnel-h { display: flex; align-items: flex-start; gap: 0; margin-top: 6px; }
.fn-node { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; }
.fn-node .ic { width: 22px; height: 22px; color: var(--saffron); }
.fn-node-final .ic { color: #C9962E; }
.fn-count { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; margin-top: 1px; }
.fn-label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.fn-arrow { flex: .7; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; padding-top: 25px; gap: 4px; }
.fn-arrow-glyph { color: var(--ink-3); font-size: 15px; line-height: 1; }
.fn-arrow-pct { font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.funnel-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); text-align: center; }
.funnel-foot strong { color: var(--saffron); font-weight: 700; font-size: 14px; }
@media (max-width: 1100px) { .funnel-h { flex-wrap: wrap; row-gap: 16px; } .fn-node { flex: 1 1 30%; } .fn-arrow { flex: 1 1 10%; padding-top: 0; height: 46px; justify-content: center; } }

/* -- Per-stage colour pills (reuses the existing .stage-{key} background rules from the Leads
   table's <select> — just adds pill shape + matching text colour for a badge context). -- */
.stage-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.stage-pill.stage-new { color: #2E62AC; }
.stage-pill.stage-contacted, .stage-pill.stage-demo_booked { color: #A85717; }
.stage-pill.stage-demo_attended, .stage-pill.stage-enrolled { color: #157A3F; }
.stage-pill.stage-lost { color: #A22; }

/* -- Operational tables: Follow-ups due / Going cold / Needs your reply / Demo Center / Activity —
   replace the dot-timeline .tl-item rows with real column structure + row hierarchy. -- */
.op-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.op-table th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	color: var(--ink-3); padding: 0 10px 6px 0; border-bottom: 1px solid var(--line); }
.op-table th.num, .op-table td.num { text-align: right; }
.op-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid rgba(19,36,32,.06); vertical-align: middle; }
.op-table tr:last-child td { border-bottom: 0; }
.op-table tbody tr:hover td { background: rgba(232,134,46,.04); }
.op-name { font-weight: 600; color: var(--ink); line-height: 1.35; }
td.op-name { font-weight: 600; color: var(--ink); }
.op-meta { color: var(--ink-3); font-size: 12px; }
div.op-meta { margin-top: 1px; }
.op-action { text-align: right; white-space: nowrap; }
.op-table-wrap { max-height: 290px; overflow-y: auto; }

/* -- Demo Center mini-stats -- */
.dc-stats { display: flex; gap: 26px; margin-bottom: 14px; }
.dc-stat-value { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; }
.dc-stat-label { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.dc-type-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.dc-type-upcoming { background: rgba(59,125,216,.1); color: #2E62AC; }
.dc-type-outcome { background: rgba(232,134,46,.12); color: #A85717; }

/* -- Channels bar-list -- */
.ch-bars { display: flex; flex-direction: column; gap: 10px; }
.ch-bar-row { display: grid; grid-template-columns: 84px 1fr 30px; align-items: center; gap: 10px; font-size: 12.5px; }
.ch-bar-name { color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-bar-track { height: 7px; border-radius: 999px; background: rgba(19,36,32,.07); overflow: hidden; }
.ch-bar-fill { height: 100%; border-radius: 999px; background: var(--saffron); }
.ch-bar-count { text-align: right; font-weight: 600; color: var(--ink); font-size: 12.5px; }

/* -- Activity: compact underline tabs (not pill buttons — a lighter-weight control that matches
   this box's lower importance/space budget) + dense operational-table rows, capped height. -- */
.af-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: -4px 0 4px; }
.af-tab-btn { padding: 5px 1px 9px; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
	font-size: 12.5px; font-weight: 600; font-family: var(--font); color: var(--ink-3); margin-bottom: -1px; }
.af-tab-btn:hover { color: var(--ink); }
.af-tab-btn.active { color: var(--forest); border-bottom-color: var(--saffron); }
.af-panel[hidden] { display: none; }
.af-panel .op-table td { padding: 8px 10px 8px 0; }
.af-panel .op-table-wrap { max-height: 258px; }

/* -- Channels + Campaigns + Lost reasons: one coherent analytics zone. The approved reference treats
   this as 3 lightweight cards of identical style/height/padding sitting in a tight row (not merged
   into one shared border) — coherence comes from consistent chrome + alignment, not a shared outline.
   Each stays its own .dash-box (drag/hide still targets it individually); just tightens the gap and
   removes the shadow so the trio reads as one calm row rather than three heavy unrelated panels. -- */
#dash-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: stretch; margin-top: 14px; }
#dash-grid-3 .dash-box { margin-bottom: 0; box-shadow: none; }
@media (max-width: 1100px) { #dash-grid-3 { grid-template-columns: 1fr; } }

.mini-table .num { text-align: right; }
.status-chip { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.status-chip.st-completed, .status-chip.st-sent, .status-chip.st-delivered, .status-chip.st-read, .status-chip.st-booked, .status-chip.st-attended, .status-chip.st-confirmed { background: rgba(29,171,85,.12); color: var(--green); }
.status-chip.st-running, .status-chip.st-waiting, .status-chip.st-simulated, .status-chip.st-queued, .status-chip.st-held, .status-chip.st-reschedule_requested { background: rgba(232,134,46,.14); color: var(--saffron); }
.status-chip.st-failed, .status-chip.st-error, .status-chip.st-no_show { background: rgba(214,69,69,.12); color: var(--red); }
.status-chip.st-stopped, .status-chip.st-skipped, .status-chip.st-cancelled { background: rgba(19,36,32,.08); color: var(--ink-3); }
/* v1.9.0 Phase 3: Demo Slots — 'open' has no equivalent among the workflow-runs states above
   (waiting/running/completed/stopped/error), so it gets its own color rather than borrowing one
   that would misleadingly imply "in progress" for a slot nobody has tapped yet. */
.status-chip.st-open { background: rgba(59,125,216,.12); color: var(--blue); }
/* v1.7.21: run-status count row on the new "View" (Workflow runs) page — reuses .status-chip's
   existing st-* color classes (running/waiting/completed/stopped/error already all defined above),
   this just lays a few of them out in a wrapping row with a bit of breathing room. */
.wfr-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.wfr-counts .status-chip { font-size: 12px; padding: 4px 10px; }

/* ---------- v1.1: demo banner, follow-ups, dropzone, icons ---------- */
.demo-note { background: rgba(232,134,46,.1); border: 1px solid rgba(232,134,46,.35); color: #7A4310;
	padding: 12px 16px; border-radius: 12px; font-size: 13.5px; margin-bottom: 18px; }
.alert-ok { background: rgba(29,171,85,.1); border-color: rgba(29,171,85,.35); color: #157A3F; }

.fu-groups .panel { margin-bottom: 18px; }
.fu-overdue h2 { color: var(--red); }
.fu-today h2 { color: var(--saffron); }
.fu-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--line); flex-wrap: wrap; }
.fu-main { flex: 1; min-width: 200px; display: grid; gap: 2px; }
.fu-date { font-weight: 800; font-size: 13px; color: var(--ink-2); }
.fu-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fu-actions .fu-newdate { width: 140px; padding: 6px 8px; font-size: 12.5px; }

.dropzone { display: grid; place-items: center; gap: 4px; text-align: center; padding: 34px 20px; cursor: pointer;
	border: 2px dashed rgba(232,134,46,.45); border-radius: 14px; background: rgba(232,134,46,.05);
	font-weight: 400; transition: background .2s, border-color .2s; }
.dropzone:hover, .dropzone.drag { background: rgba(232,134,46,.12); border-color: var(--saffron); }
.dropzone .dz-icon { font-size: 26px; color: var(--saffron); }

.ic-followups { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.2 14.2L11 13V7h2v5l4.2 2.5z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm4.2 14.2L11 13V7h2v5l4.2 2.5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-workflows { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* v1.7.6: Bulk Follow-up nav icon — a simple send/paper-plane glyph. */
.ic-wa-broadcast { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E") center/contain no-repeat; }
.ic-calendar { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm14 8H3v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* v1.30.0: Dashboard icon-funnel node icons — "Demo Attended" (check-circle) and "Enrolled" (trophy). */
.ic-check-circle { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1.4 14.6-4.2-4.2 1.4-1.4 2.8 2.8 6.6-6.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm-1.4 14.6-4.2-4.2 1.4-1.4 2.8 2.8 6.6-6.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* v1.31.0: swapped the earlier trophy glyph (its handles/cup separated into illegible slivers at
   this badge's small mask size) for a plain 5-point star — simpler silhouette, reads cleanly small,
   still clearly reads as "achievement" for the Enrolled funnel stage. */
.ic-trophy { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.27l-6.18 3.25L7 13.65l-5-4.87 6.91-1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1.5l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.27l-6.18 3.25L7 13.65l-5-4.87 6.91-1z'/%3E%3C/svg%3E") center/contain no-repeat; }

#channels-list .mini-table input.ch-label { padding: 6px 8px; font-size: 13px; }
#channels-list td { vertical-align: middle; }
#stages-list .mini-table input.st-label { padding: 6px 8px; font-size: 13px; }
#stages-list td { vertical-align: middle; }

/* ---------- v1.3: WhatsApp workflow automation ---------- */

/* Status / meta pills — same .chip shell as channel chips, new colour modifiers only. */
.chip.status-draft, .chip.meta-draft   { background: rgba(19,36,32,.08); color: var(--ink-2); }
.chip.status-active, .chip.meta-approved { background: rgba(29,171,85,.15); color: #157A3F; }
.chip.status-paused  { background: rgba(232,134,46,.15); color: #A85717; }
.chip.meta-pending   { background: rgba(59,125,216,.12); color: #2E62AC; }
.chip.meta-rejected  { background: rgba(214,69,69,.12); color: #A22; }
/* v1.7.6: Bulk Follow-up broadcast status chips */
.chip.status-queued    { background: rgba(19,36,32,.08); color: var(--ink-2); }
.chip.status-sending   { background: rgba(59,125,216,.12); color: #2E62AC; }
.chip.status-completed { background: rgba(29,171,85,.15); color: #157A3F; }
.chip.status-canceled  { background: rgba(214,69,69,.12); color: #A22; }
.status-select { padding: 5px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; width: auto; border: 1px solid var(--line); }

/* Simulation banner — test-run tool. Blue so it reads distinctly from the orange demo-note and red alert. */
.sim-banner { background: rgba(59,125,216,.1); border: 1px solid rgba(59,125,216,.35); color: #2E62AC;
	padding: 10px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* Step-list builder */
.step-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.step-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 14px; }
.step-card-head { display: flex; align-items: center; gap: 10px; }
.step-order { display: flex; flex-direction: column; gap: 2px; }
.step-order button { background: none; border: 1px solid var(--line); border-radius: 6px; width: 22px; height: 20px; line-height: 1; cursor: pointer; color: var(--ink-2); font-size: 11px; }
.step-order button:disabled { opacity: .3; cursor: default; }
.step-badge { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.step-badge.type-condition { background: rgba(59,125,216,.12); color: #2E62AC; }
.step-badge.type-wait      { background: rgba(244,169,79,.25); color: #A85717; }
.step-badge.type-action    { background: rgba(29,171,85,.15); color: #157A3F; }
.step-badge.type-branch    { background: rgba(232,93,61,.15); color: #B23F26; }
.step-summary { flex: 1; font-weight: 700; font-size: 13.5px; min-width: 0; }
.step-actions { display: flex; gap: 6px; }
.step-config-form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.step-config-form .span-2 { grid-column: 1 / -1; }
.step-config-form label { margin-bottom: 0; }
.add-step-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty-steps { color: var(--ink-3); font-size: 13.5px; padding: 16px 4px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }

/* Flow preview (read-only) */
.flow-preview { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; }
.flow-box { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--ink-3); border-radius: 12px;
	padding: 10px 14px; width: min(340px, 100%); box-shadow: 0 2px 8px -4px rgba(19,36,32,.15); }
.flow-box .flow-type { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.flow-box .flow-title { font-size: 13.5px; font-weight: 700; margin-top: 2px; color: var(--ink); }
.flow-trigger { background: var(--forest-2); border-color: var(--forest-2); }
.flow-trigger .flow-type, .flow-trigger .flow-title { color: #fff; }
.flow-trigger .flow-type { color: rgba(255,255,255,.65); }
.flow-condition { border-left-color: var(--blue); }
.flow-wait      { border-left-color: var(--saffron-2); }
.flow-action    { border-left-color: var(--green); }
.flow-branch    { border-left-color: var(--coral); }
.flow-arrow { color: var(--ink-3); font-size: 18px; line-height: 1.4; }
.flow-branches { display: flex; gap: 16px; width: 100%; max-width: 620px; margin-top: 2px; align-items: flex-start; }
.flow-branch-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.flow-branch-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 2px 10px; border-radius: 999px; }
.flow-branch-label.yes { background: rgba(29,171,85,.15); color: #157A3F; }
.flow-branch-label.no  { background: rgba(214,69,69,.12); color: #A22; }
.flow-branch-label.case { background: rgba(59,130,246,.14); color: #1D4ED8; }
.flow-branch-col .flow-box { width: 100%; }
/* v1.7.5: N-way exact-match branch — same column look, wraps to more than 2 across. */
.flow-branches-n { flex-wrap: wrap; max-width: 100%; justify-content: center; }
.flow-branches-n .flow-branch-col { flex: 0 1 220px; }
.flow-end { color: var(--ink-3); font-size: 12.5px; font-style: italic; padding: 6px 0; }
.flow-leftover { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); width: 100%; }
.flow-leftover-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-bottom: 8px; text-align: center; }
.flow-box.flow-unwired { border-style: dashed; opacity: .8; }

/* ================= Visual workflow canvas (v1.7.16) =================
   AiSensy-style node canvas on the workflow-edit page — same steps/pointers as the list editor,
   different view. Node type accent colors deliberately reuse the flow-preview palette above. */
.wf-view-toggle { display: flex; gap: 6px; margin: 0 0 14px; }
.wf-view-toggle .wf-view-btn.active { background: var(--forest-2); color: #fff; border-color: var(--forest-2); }
.wfc-panel-wrap { padding: 14px; }
.wfc-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wfc-toolbar-spacer { flex: 1; }
.wfc-zoom-label { font-size: 12px; color: var(--ink-3); min-width: 42px; text-align: center; }
/* v1.14.0: canvas-local Save feedback — lives inside #wfc-root so it's visible in fullscreen too, see wfcFlashSaveStatus(). */
.wfc-save-status { font-size: 12px; min-width: 0; }
.wfc-save-status.is-ok { color: var(--green); }
.wfc-save-status.is-error { color: var(--red); max-width: 320px; }
.wfc-hint { font-size: 12px; margin: 8px 0 10px; }
.wfc-body { display: flex; gap: 12px; align-items: stretch; }
.wfc-viewport { flex: 1; position: relative; overflow: hidden; height: 560px; border: 1px solid var(--line);
	border-radius: 12px; cursor: grab; background: var(--paper);
	background-image: radial-gradient(rgba(19,36,32,.13) 1px, transparent 1px); background-size: 22px 22px; }
.wfc-viewport:active { cursor: grabbing; }
.wfc-stage { position: absolute; top: 0; left: 0; width: 4000px; height: 3000px; transform-origin: 0 0; }
/* v1.14.2: edges now paint ABOVE node cards (z-index), not behind them. Direct feedback off a
   screenshot: a long connection crossing a wide, manually-rearranged canvas would visually vanish
   the moment its path passed under an unrelated opaque node card (DOM order previously put every
   .wfc-node, appended after this <svg>, on top by default) — a line that's supposed to make two
   steps look connected instead looked broken/hidden right where it mattered. The bezier endpoints
   already land exactly on each node's border (see wfcDrawEdges()), so nothing about the connection
   geometry changed — only which layer paints on top of the other. */
.wfc-edges { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2; }
.wfc-edge { pointer-events: auto; cursor: pointer; }
.wfc-edge-hit { fill: none; stroke: transparent; stroke-width: 14; }
/* IMPORTANT: line color rules must set stroke ONLY. An earlier combined rule also set fill on the
   line path, which out-specified the fill:none below and filled the bezier's inner area with solid
   color — rendering every connection as a fat leaf-shaped swoosh instead of a thin curve. */
.wfc-edge-line { fill: none !important; stroke-width: 2; }
.wfc-edge-next .wfc-edge-line { stroke: var(--ink-3); }
.wfc-edge-yes .wfc-edge-line { stroke: var(--green); }
.wfc-edge-no .wfc-edge-line { stroke: var(--red); }
.wfc-edge-trigger .wfc-edge-line { stroke: var(--forest-2); }
.wfc-arrowhead-next { fill: var(--ink-3); stroke: none; }
.wfc-arrowhead-yes { fill: var(--green); stroke: none; }
.wfc-arrowhead-no { fill: var(--red); stroke: none; }
.wfc-arrowhead-trigger { fill: var(--forest-2); stroke: none; }
.wfc-edge:hover .wfc-edge-line { stroke-width: 3.5; }
.wfc-edge-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
	fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
/* v1.14.3: drag-to-bend handle at each edge's midpoint. Faint until hovered so it doesn't clutter a
   canvas full of straight, never-bent connections — but pointer-events stay on (no cursor:grab-only
   fade) so it's discoverable by just mousing along a line. */
.wfc-edge-handle { fill: var(--paper); stroke: var(--ink-3); stroke-width: 1.5; cursor: grab; opacity: .55; }
.wfc-edge:hover .wfc-edge-handle, .wfc-edge-handle:hover { opacity: 1; }
.wfc-edge-handle:hover { fill: var(--saffron); stroke: var(--saffron); r: 6; }
.wfc-edge-handle:active { cursor: grabbing; }
.wfc-temp-line { fill: none; stroke: var(--saffron); stroke-width: 2; stroke-dasharray: 6 5; }
.wfc-node { position: absolute; z-index: 1; width: 220px; background: #fff; border: 1px solid var(--line);
	border-left: 4px solid var(--ink-3); border-radius: 12px; padding: 9px 12px 7px;
	box-shadow: 0 2px 10px -4px rgba(19,36,32,.2); cursor: pointer; user-select: none; }
.wfc-node:hover { box-shadow: 0 4px 16px -4px rgba(19,36,32,.3); }
.wfc-node.selected { outline: 2px solid var(--saffron); outline-offset: 1px; }
.wfc-node.type-condition { border-left-color: var(--blue); }
.wfc-node.type-wait      { border-left-color: var(--saffron-2); }
.wfc-node.type-action    { border-left-color: var(--green); }
.wfc-node.type-branch    { border-left-color: var(--coral); }
.wfc-node-trigger { background: var(--forest-2); border-color: var(--forest-2); cursor: default; }
.wfc-node-trigger .wfc-node-type { color: rgba(255,255,255,.65); }
.wfc-node-trigger .wfc-node-title { color: #fff; }
.wfc-node-type { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wfc-node-title { font-size: 12.5px; font-weight: 700; margin-top: 2px; color: var(--ink); line-height: 1.35; word-wrap: break-word; }
.wfc-node-del { position: absolute; top: 4px; right: 6px; border: none; background: none; color: var(--ink-3);
	font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.wfc-node-del:hover { color: var(--red); background: rgba(214,69,69,.1); }
.wfc-ports { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--line); }
.wfc-port { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); cursor: crosshair; max-width: 96px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wfc-port:hover { color: var(--saffron); }
.wfc-port-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
	background: #fff; border: 2px solid var(--ink-3); }
.wfc-port:hover .wfc-port-dot { border-color: var(--saffron); background: rgba(232,134,46,.2); }
.wfc-config { width: 0; overflow: hidden; transition: width .15s ease; }
.wfc-config.open { width: 340px; overflow-y: auto; max-height: 560px; border: 1px solid var(--line);
	border-radius: 12px; padding: 12px; background: #fff; }
.wfc-config .step-config-form { border-top: none; padding-top: 0; margin-top: 10px; grid-template-columns: 1fr; }
.wfc-config .step-config-form .span-2 { grid-column: auto; }
.wfc-config-head { display: flex; justify-content: space-between; align-items: center; }
/* v1.7.18: "Preview message" toggle on canvas Send nodes — same .flow-detail component as the
   list editor's Flow preview, just sized for a 220px node. cursor:auto restores text selection.
   v1.7.43: the 140px max-height + overflow-y:auto that used to be here is GONE. It put a tiny
   scrollbar inside an already-small node, so reading a full template meant scrolling a box a few
   lines tall — the message is the single most important thing on a Send node, and it was the
   hardest thing to read. Nodes now grow to fit their message; the canvas already pans/zooms and
   re-routes edges on toggle (wfcDrawEdges), so a taller node is handled correctly. */
.wfc-node-detail { margin-top: 6px; padding-top: 6px; cursor: auto; }
.wfc-node-detail summary { cursor: pointer; }
.wfc-node-detail .flow-detail-msg { font-size: 11.5px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .wfc-body { flex-direction: column; } .wfc-config.open { width: 100%; max-height: none; } }
/* v1.7.19: in-canvas confirmation overlay — replaces native confirm() on the canvas, which
   disturbs fullscreen. Lives INSIDE #wfc-root (the fullscreen element — nothing outside its
   subtree renders while fullscreen), hence #wfc-root needing position:relative. */
#wfc-root { position: relative; }
.wfc-confirm-back { position: absolute; inset: 0; z-index: 60; background: rgba(19,36,32,.35);
	display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.wfc-confirm { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
	max-width: 380px; margin: 0 16px; box-shadow: 0 12px 40px -8px rgba(19,36,32,.35); }
.wfc-confirm-msg { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.wfc-confirm-btns { justify-content: flex-end; }

/* Fullscreen mode (⛶ toolbar button): #wfc-root itself goes fullscreen so the toolbar, canvas,
   and config panel all come along; the viewport stretches to fill the screen. */
#wfc-root:fullscreen { background: var(--paper); padding: 16px; overflow: auto; }
#wfc-root:fullscreen .wfc-viewport { height: calc(100vh - 118px); }
#wfc-root:fullscreen .wfc-config.open { max-height: calc(100vh - 118px); }

/* v1.16.0: read-only per-lead "Workflow journey" overlay (assets/crm.js wjRender()) — reuses
   .wfc-node/.wfc-edge/.wfc-viewport/.wfc-stage/.wfc-toolbar as-is for the same visual language as
   the editable canvas above, with its own modifier classes below for the taken-path / node-state
   styling the editable canvas never needed (it has no concept of "this one lead's actual path"). */
.wj-back { z-index: 55; } /* stacks above the lead modal's own .modal-back (z-index 50) */
.wj-modal { width: min(1100px, 96vw); }
.wj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wj-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.wj-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.wj-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.wj-swatch { display: inline-block; width: 22px; height: 3px; border-radius: 2px; }
.wj-swatch-taken { background: var(--forest-2); }
.wj-swatch-untaken { background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 8px); opacity: .55; }
.wj-swatch-pending { background: var(--line); }
#wj-root { position: relative; }
#wj-root:fullscreen { background: var(--paper); padding: 16px; overflow: auto; }
#wj-root:fullscreen .wfc-viewport { height: calc(100vh - 118px); }

.wj-node { transition: opacity .15s ease; }
.wj-node.wj-state-pending { opacity: .35; filter: grayscale(.5); cursor: default; }
.wj-node.wj-state-done { opacity: 1; cursor: default; }
.wj-node.wj-state-current { opacity: 1; cursor: default; outline: 2px solid var(--saffron); outline-offset: 2px;
	animation: wj-pulse 1.8s ease-in-out infinite; }
@keyframes wj-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,134,46,.45); } 50% { box-shadow: 0 0 0 7px rgba(232,134,46,0); } }
.wj-mark { position: absolute; top: -9px; left: -9px; font-size: 10.5px; font-weight: 800; color: #fff;
	border-radius: 999px; padding: 2px 7px; box-shadow: 0 2px 6px rgba(0,0,0,.2); white-space: nowrap; }
.wj-check { background: var(--green); }
.wj-pin { background: var(--saffron); }
.wj-badge { margin-top: 6px; display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
	letter-spacing: .04em; color: var(--forest-2); background: rgba(19,88,66,.1); border-radius: 999px; padding: 2px 8px; }

/* Taken vs. untaken edges — same colored/labeled bezier as the editable canvas (.wfc-edge-next/
   -yes/-no/-trigger keep their meaning), just weighted differently: solid+bold where this run
   actually went, faint+dashed everywhere else the graph could have gone but didn't. */
.wfc-edge.wj-edge-untaken .wfc-edge-line { opacity: .32; stroke-dasharray: 5 5; }
.wfc-edge.wj-edge-untaken .wfc-edge-label { opacity: .4; }
.wfc-edge.wj-edge-taken .wfc-edge-line { stroke-width: 3.5; }
.wfc-edge.wj-edge-taken .wfc-edge-label { font-weight: 900; }

/* Flow preview — "Preview message" toggle (v1.7.4) */
.flow-detail { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; width: 100%; }
.flow-detail summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--forest-2); list-style: none; }
.flow-detail summary::-webkit-details-marker { display: none; }
.flow-detail summary::before { content: "▸ "; }
.flow-detail[open] summary::before { content: "▾ "; }
.flow-detail-body { margin-top: 6px; }
.flow-detail-msg { background: rgba(19,36,32,.05); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap; text-align: left; }
.flow-detail-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.flow-detail-buttons .chip { font-size: 11.5px; background: rgba(19,36,32,.06); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.flow-var-filled { background: rgba(29,171,85,.15); color: #157A3F; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.flow-var-empty { background: rgba(214,69,69,.12); color: #A22; border-radius: 4px; padding: 0 3px; font-weight: 600; cursor: help; }
/* v1.7.22: Bulk Follow-up's "Message template" preview — reuses .flow-detail-msg/.flow-var-* as-is,
   this just adds a small heading + top margin so it doesn't sit flush under the dropdown. */
.wb-tpl-preview h4 { font-size: 12px; font-weight: 700; color: var(--forest-2); }

/* Test-run trace */
.trace-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.trace-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; background: #fff; }
.trace-row .trace-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trace-row .trace-body { margin-top: 6px; background: rgba(19,36,32,.05); border-radius: 8px; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; }
.trace-row .trace-note { margin-top: 4px; color: var(--ink-3); font-size: 12.5px; }
.trace-row.trace-warning { border-color: rgba(214,69,69,.4); background: rgba(214,69,69,.05); }
.trace-end { text-align: center; font-weight: 800; font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* Templates */
.var-count { font-size: 12px; color: var(--ink-3); margin-top: -6px; }

.wa-lead-picker { display: flex; gap: 8px; margin-bottom: 10px; }
.wa-lead-results { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-height: 180px; overflow-y: auto; }
.wa-lead-result { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.wa-lead-result:hover { background: rgba(232,134,46,.06); }
.wa-lead-result.selected { border-color: var(--saffron); background: rgba(232,134,46,.08); }
.tr-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tr-tabs button.active { background: var(--forest-2); color: #fff; border-color: var(--forest-2); }

/* ---------- v1.4: Calendar (booked demos) ---------- */
.cal-toolbar { justify-content: space-between; }
.cal-nav { display: flex; gap: 6px; }
.cal-label { font-family: var(--display); font-weight: 600; font-size: 18px; }
.cal-view-toggle { display: flex; gap: 2px; background: rgba(19,36,32,.06); border-radius: 999px; padding: 3px; }
.cal-view-btn { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 800; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; color: var(--ink-2); }
.cal-view-btn.active { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(19,36,32,.25); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
.cal-grid.cal-day { grid-template-columns: 1fr; max-width: 460px; }
.cal-weekday-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); text-align: center; padding-bottom: 2px; }
.cal-cell { background: rgba(19,36,32,.03); border: 1px solid var(--line); border-radius: 12px; padding: 8px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
.cal-cell.cal-today { border-color: var(--saffron); background: rgba(232,134,46,.06); }
.cal-cell.cal-outside { opacity: .4; }
.cal-day-num { font-weight: 800; font-size: 12.5px; color: var(--ink-2); }
.cal-cell.cal-today .cal-day-num { color: var(--saffron); }
.cal-entry { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--saffron); border-radius: 8px; padding: 4px 8px; font-size: 12px; cursor: pointer; }
.cal-entry:hover { background: rgba(232,134,46,.06); }
.cal-entry .cal-entry-time { font-weight: 800; color: var(--ink-2); margin-right: 4px; }
.cal-entry.stage-enrolled, .cal-entry.stage-demo_attended { border-left-color: var(--green); }
.cal-entry.stage-lost { border-left-color: var(--ink-3); opacity: .7; }
/* v1.11.0: published demo slots (Phase 3) shown on the Calendar grid alongside real bookings —
   dashed border keeps them visually distinct from a stage-colored solid-border demo entry at a
   glance; blue = open/self-bookable, saffron = a lead is mid-booking (held). */
.cal-entry.cal-slot-entry { background: rgba(59,125,216,.05); border-style: dashed; border-left-style: solid; border-left-color: var(--blue); }
.cal-entry.cal-slot-entry:hover { background: rgba(59,125,216,.1); }
.cal-entry.cal-slot-entry.st-held { background: rgba(232,134,46,.06); border-left-color: var(--saffron); }
.cal-more { font-size: 11.5px; color: var(--ink-3); font-weight: 700; padding: 2px 4px; cursor: pointer; }
.cal-day-list { display: flex; flex-direction: column; gap: 8px; }
.cal-day-list .cal-entry { padding: 10px 12px; font-size: 13.5px; }
.cal-empty-day { color: var(--ink-3); font-size: 13px; padding: 30px 10px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; grid-column: 1 / -1; }

/* v1.4.1: week view time grid — hourly gridlines + entries positioned by actual time, not a stacked list */
.cal-grid.cal-week-wrap { display: block; }
.cal-week-head, .cal-week-body { display: grid; grid-template-columns: 52px repeat(7, 1fr); }
.cal-week-head { border-bottom: 1px solid var(--line); }
.cal-week-daycol-head { text-align: center; padding: 4px 4px 8px; }
.cal-week-dow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.cal-week-daynum { font-family: var(--display); font-weight: 600; font-size: 18px; margin-top: 2px; }
.cal-week-daycol-head.cal-today .cal-week-daynum { color: var(--saffron); }
.cal-week-body { position: relative; max-height: 620px; overflow-y: auto; border: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.cal-week-hours { position: relative; border-right: 1px solid var(--line); }
.cal-hour-label { position: absolute; right: 8px; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
/* 48px must match HOUR_H in renderWeekTimeGrid() — purely cosmetic gridlines, entry math is independent */
.cal-week-col { position: relative; border-right: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 48px); }
.cal-week-col:last-child { border-right: none; }
.cal-week-col.cal-today { background-color: rgba(232,134,46,.045); }
.cal-now-line { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--coral); z-index: 2; pointer-events: none; }
.cal-now-line::before { content: ''; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.cal-entry.cal-time-entry { position: absolute; padding: 2px 6px; font-size: 11px; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(19,36,32,.12); z-index: 1; }
.cal-entry.cal-time-entry:hover { z-index: 3; }
.cal-entry.cal-time-entry .cal-entry-time { margin-right: 3px; }

/* Lead modal — active WhatsApp automation notice + per-lead stop control */
.wa-run-box { background: rgba(59,125,216,.08); border: 1px solid rgba(59,125,216,.3); border-radius: 12px; padding: 10px 14px; margin-top: 14px; font-size: 13px; }
.wa-run-box .wa-run-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.kpis { grid-template-columns: repeat(2, 1fr); }
	#dash-grid { grid-template-columns: 1fr; }
	.action-center { grid-template-columns: repeat(2, 1fr); }
	.grid-2 { grid-template-columns: 1fr; }
	.board { grid-auto-columns: 230px; }
}
@media (max-width: 760px) {
	.shell { grid-template-columns: 1fr; }
	.sidenav { position: static; height: auto; flex-direction: row; align-items: center; gap: 6px; padding: 10px; overflow-x: auto; }
	.side-brand { padding: 0 8px 0 4px; }
	.sidenav nav { display: flex; }
	.sidenav nav a { padding: 8px 10px; white-space: nowrap; }
	.sidenav nav a .ic { display: none; }
	.side-foot { display: none; }
	.content { padding: 18px 14px 50px; }
	.kpis { grid-template-columns: repeat(2, 1fr); }
	.action-center { grid-template-columns: 1fr; }
	.modal .form-grid { grid-template-columns: 1fr; }
	.cal-grid { grid-template-columns: 1fr; }
	.cal-weekday-head { display: none; }
	.cal-grid.cal-week-wrap { overflow-x: auto; }
	.cal-week { display: block; min-width: 640px; }
}

/* ---- v1.20.0 Phase 2: Growth Analytics ---- */
.ic-growth-analytics { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 17h4v4H3zM10 10h4v11h-4zM17 3h4v18h-4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 17h4v4H3zM10 10h4v11h-4zM17 3h4v18h-4z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* Compact "how trustworthy is this" indicator — the full per-milestone census lives in its title
   tooltip rather than on the page, so the numbers stay the story and the caveats stay one hover away. */
.ga-cov { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 11.5px; font-weight: 700; color: var(--ink-3); cursor: help; white-space: nowrap; }
.ga-cov.warn { border-color: var(--saffron); color: var(--ink-2); }
.ga-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.ga-up { color: var(--green); font-weight: 800; }
.ga-down { color: var(--red); font-weight: 800; }

/* ---- v1.20.6: Growth Analytics visual redesign ----
 * Everything below is scoped under .ga-* so it only ever touches this one page — nothing here
 * changes the shared .kpi/.panel/.mini-table look every other page still relies on. Same brand
 * tokens throughout (cream/forest/saffron, Fraunces for big numbers, Manrope for labels), just given
 * more editorial weight: a section eyebrow + accent-colored KPI cards, a real funnel silhouette with
 * connector chips instead of plain bars, a bottleneck rendered as a callout instead of a sentence,
 * a proportional speed chart instead of a bare number table, comparison metrics as delta cards
 * instead of table rows, and campaign/channel tables with an inline lead-volume bar so the biggest
 * rows are visible at a glance instead of requiring a scan down the numbers. */

.ga-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.ga-eyebrow { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--saffron); margin-bottom: 3px; }
.ga-section-head h2 { margin-bottom: 0; }
.ga-section-sub { font-size: 12.5px; color: var(--ink-3); }

/* KPI row — accent-topped cards with a serif headline number, a small step up from the plain
   dashboard .kpi (which several other pages share and shouldn't inherit this page's styling). */
.ga-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.ga-kpi { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 18px 18px 16px; box-shadow: var(--shadow); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.ga-kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(19,36,32,.32); }
.ga-kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--ink-3); }
.ga-kpi[data-accent="forest"]::before { background: linear-gradient(90deg, var(--forest), var(--forest-2)); }
.ga-kpi[data-accent="saffron"]::before { background: linear-gradient(90deg, var(--saffron), var(--saffron-2)); }
.ga-kpi[data-accent="blue"]::before { background: var(--blue); }
.ga-kpi[data-accent="green"]::before { background: var(--green); }
.ga-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.ga-kpi-value { font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.05; margin-top: 7px; color: var(--ink); }
.ga-kpi-sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* Funnel — a true narrowing silhouette: each stage's bar is centered and scaled to the cohort, with
   a small connector between stages showing the step-over-step conversion instead of a same-width
   progress-bar list that reads more like a form than a funnel. */
.ga-funnel-pro { display: flex; flex-direction: column; }
.ga-fstep { padding: 3px 0; }
.ga-fstep-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 10px; }
.ga-fstep-name { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.ga-fstep-n { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--ink); white-space: nowrap; }
.ga-fstep-track { height: 15px; border-radius: 999px; background: rgba(19,36,32,.055); overflow: hidden; }
.ga-fstep-fill { height: 100%; width: var(--pct, 0%); border-radius: 999px; background: var(--ink-3); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.ga-fstep[data-accent="neutral"] .ga-fstep-fill { background: linear-gradient(90deg, var(--ink-3), var(--ink-2)); }
.ga-fstep[data-accent="saffron"] .ga-fstep-fill { background: linear-gradient(90deg, var(--saffron), var(--saffron-2)); }
.ga-fstep[data-accent="blue"] .ga-fstep-fill { background: linear-gradient(90deg, var(--blue), #5B96E0); }
.ga-fstep[data-accent="green"] .ga-fstep-fill { background: linear-gradient(90deg, #17b55e, var(--green)); }
.ga-fstep[data-accent="forest"] .ga-fstep-fill { background: linear-gradient(90deg, var(--forest-2), var(--forest)); }
.ga-fdrop { display: flex; align-items: center; gap: 7px; padding: 7px 0 7px 4px; }
.ga-fdrop-line { flex: 0 0 auto; width: 1px; height: 18px; background: var(--line); margin-left: 8px; }
.ga-fdrop-pct { font-size: 11.5px; font-weight: 800; color: var(--ink-3); background: rgba(19,36,32,.05); border-radius: 999px; padding: 3px 10px; }

/* Bottleneck — a callout, not a sentence buried in a panel. */
.ga-callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px;
	background: rgba(232,134,46,.09); border: 1px solid rgba(232,134,46,.28); }
.ga-callout.ga-callout-muted { background: rgba(19,36,32,.045); border-color: var(--line); }
.ga-callout-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
	background: rgba(232,134,46,.18); color: var(--saffron); font-size: 15px; font-weight: 800; }
.ga-callout-muted .ga-callout-icon { background: rgba(19,36,32,.08); color: var(--ink-3); }
.ga-callout-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ga-callout-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

/* Speed (median time-between-steps) — proportional bars instead of a bare number column, so the
   slow transitions are visible at a glance without reading every row. */
.ga-speed-list { display: flex; flex-direction: column; gap: 3px; }
.ga-speed-row { display: grid; grid-template-columns: 168px 1fr 74px 46px; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ga-speed-row:last-child { border-bottom: 0; }
.ga-speed-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ga-speed-track { height: 9px; border-radius: 999px; background: rgba(19,36,32,.05); overflow: hidden; }
.ga-speed-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--saffron-2), var(--saffron)); }
.ga-speed-val { text-align: right; font-weight: 800; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ga-speed-n { text-align: right; font-size: 11.5px; color: var(--ink-3); }

/* Comparison vs. previous period — one small stat card per metric instead of a table row, with the
   delta as the headline (that's the actual question this section answers). */
.ga-comparison-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ga-stat { background: rgba(19,36,32,.03); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.ga-stat-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); text-transform: uppercase; }
.ga-stat-now { font-family: var(--display); font-weight: 600; font-size: 22px; margin-top: 5px; color: var(--ink); }
.ga-stat-delta { font-size: 12px; font-weight: 800; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.ga-stat-delta.up { color: var(--green); }
.ga-stat-delta.down { color: var(--red); }
.ga-stat-delta.flat, .ga-stat-delta.na { color: var(--ink-3); }
.ga-stat-delta .ga-stat-prev { font-weight: 500; color: var(--ink-3); }

/* Campaign / channel breakdown — wrapped in a card shell with a sticky-styled header, zebra rows,
   and an inline volume bar behind the Leads figure so the biggest rows read visually, not just
   numerically. Close rate gets a small tri-tone chip (same semantics as .status-chip elsewhere). */
.ga-table-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ga-table-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ga-table-card th { background: rgba(19,36,32,.035); text-align: left; padding: 10px 12px; font-size: 10.5px;
	font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.ga-table-card th.num, .ga-table-card td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ga-table-card td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ga-table-card tbody tr:last-child td { border-bottom: 0; }
.ga-table-card tbody tr:hover { background: rgba(19,36,32,.03); }
.ga-leads-cell { position: relative; }
.ga-leads-bar { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 6px; background: rgba(232,134,46,.14); z-index: 0; }
.ga-leads-cell span { position: relative; z-index: 1; font-weight: 700; }
.ga-close-chip { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ga-close-chip.hi { background: rgba(29,171,85,.14); color: var(--green); }
.ga-close-chip.mid { background: rgba(232,134,46,.14); color: var(--saffron); }
.ga-close-chip.lo { background: rgba(19,36,32,.07); color: var(--ink-3); }

@media (max-width: 1100px) {
	.ga-kpis { grid-template-columns: repeat(2, 1fr); }
	.ga-speed-row { grid-template-columns: 130px 1fr 64px 40px; gap: 8px; }
}
@media (max-width: 760px) {
	.ga-kpis { grid-template-columns: repeat(2, 1fr); }
	.ga-speed-row { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 4px; }
	.ga-speed-n { display: none; }
}