/* 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); }
/* v1.31.3: whenever sample leads currently exist (view_page() sets this from demo_present() —
   see app/views.php), tint the whole app a distinct warm peach so it's always visually obvious
   you're looking at sample data, without needing a text banner or a "(sample)" name suffix on
   every lead (both removed — see assets/crm.js's demoBanner() and bootstrap.php's seed_demo_leads()). */
body.sample-mode { background: #faf0ec; }
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; }
/* v1.35.3: a tap on an interactive List/Button row — most often a demo-slot pick, see
   waMsgBodyHtml() in crm.js — reads as a distinct confirmation chip rather than raw bracketed
   log text ("[List] Fri, 25 Sep — 6:30 AM IST"), which looked like debug output in the thread. */
.wa-msg-pick { font-weight: 600; color: var(--green); }
.wa-msg-offer { font-weight: 600; color: var(--blue); }
.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); }
/* v1.37.0: LMS batch classes (read-only mirror) — teal, solid, distinct from demos (stage colours) and open slots (blue, dashed) */
.cal-entry.cal-batch-entry { background: rgba(26,140,126,.08); border-left-color: #1a8c7e; }
.cal-entry.cal-batch-entry:hover { background: rgba(26,140,126,.15); }
.cal-entry.cal-batch-entry.cal-clash { border-color: var(--saffron); 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; }
}

/* Manual Multi-Lead Calling V2 — Smart Queue / Selected Leads (Leads + Funnel) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 140px;
	background: #fff; border: 1px solid rgba(19,36,32,.12); border-radius: 10px;
	box-shadow: 0 8px 24px rgba(19,36,32,.14); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.dropdown-menu[hidden] { display: none; }
.dropdown-item { display: block; width: 100%; text-align: left; background: none; border: none;
	padding: 8px 10px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.dropdown-item:hover { background: rgba(232,134,46,.10); color: var(--ink); }

.voice-ai-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; background: rgba(19,36,32,.08); color: var(--ink-2); }
.voice-ai-chip.vac-queued { background: rgba(59,125,216,.14); color: #2E62AC; }
.voice-ai-chip.vac-callback_due { background: rgba(232,134,46,.14); color: #A85717; }
.voice-ai-chip.vac-last_outcome { background: rgba(140,90,220,.12); color: #6A3FB8; }
.voice-ai-chip.vac-never { background: rgba(19,36,32,.06); color: var(--ink-3, #7A8B85); }

/* Voice AI lead-modal timeline (Feature 1/2) — attempt/connection facts vs. the stage-engine
   decision are visually separated so the two are never read as the same claim. */
.tl-voice-call { border-bottom: 1px solid rgba(19,36,32,.06); padding: 8px 0; }
.tl-voice-decision { margin-top: 4px; font-size: 12px; }
.tl-voice-decision .status-chip { margin-right: 6px; }

#f-voice-ai, #fn-voice-ai { max-width: 190px; }

.sob-review-list { max-height: 320px; overflow-y: auto; border: 1px solid rgba(19,36,32,.10); border-radius: 10px; margin-top: 10px; }
.sob-review-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(19,36,32,.06); font-size: 13px; }
.sob-review-row:last-child { border-bottom: none; }
.sob-review-row.skip { opacity: .75; }
.sob-review-row .sob-name { font-weight: 700; }
.sob-review-row .sob-reason { color: var(--ink-2); font-size: 12px; }
.sob-review-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.sob-review-badge.ok { background: rgba(29,171,85,.14); color: #157A3F; }
.sob-review-badge.no { background: rgba(214,69,69,.12); color: #B3322E; }
.sob-review-badge.warn { background: rgba(232,134,46,.16); color: #8a4b00; }
.sob-force-btn { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(232,134,46,.4); background: #fff; color: #8a4b00; cursor: pointer; margin-left: 8px; white-space: nowrap; }
.sob-force-btn:hover { background: rgba(232,134,46,.12); }
.sob-force-btn.active { background: #8a4b00; color: #fff; border-color: #8a4b00; }
.sob-warning-box { background: rgba(232,134,46,.08); border: 1px solid rgba(232,134,46,.2); border-radius: 10px; padding: 10px 12px; margin-top: 10px; font-size: 13px; }

/* ---------- "Needs Attention" (V1 Phase 1) ---------- */
.nav-badge-attention { background: var(--coral); color: #fff; }
.att-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 13px; }
.att-summary-total { font-weight: 800; font-size: 15px; color: var(--forest); }
.att-summary-part { color: var(--ink-2); font-weight: 600; }
.att-level-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.att-level-chip.att-level-urgent, .att-summary-part.att-level-urgent { color: #B3322E; }
.att-level-chip.att-level-action, .att-summary-part.att-level-action { color: #A85717; }
.att-level-chip.att-level-review, .att-summary-part.att-level-review { color: #2E62AC; }
.att-level-chip.att-level-urgent { background: rgba(214,69,69,.12); }
.att-level-chip.att-level-action { background: rgba(232,134,46,.14); }
.att-level-chip.att-level-review { background: rgba(59,125,216,.12); }
.lm-attention-banner { display: flex; flex-direction: column; gap: 6px; margin: 10px 24px 0; background: rgba(214,69,69,.05); border: 1px solid rgba(214,69,69,.18); border-radius: 10px; padding: 8px 12px; }
.lm-attention-heading { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #B3322E; text-transform: uppercase; }
.lm-attention-item { display: flex; flex-direction: column; gap: 4px; font-size: 13px; padding: 4px 0; border-top: 1px solid rgba(214,69,69,.12); }
.lm-attention-item:first-of-type { border-top: none; }
.lm-attention-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lm-attention-emoji { font-size: 13px; line-height: 1; }
.lm-attention-title { font-weight: 700; }
.lm-attention-summary { color: var(--ink-2); }
.lm-attention-actions { margin-left: 22px; }

/* ==========================================================================
   Lead Workspace drawer (v1.35.0) — replaces the centered lead modal.
   Right-side, large, non-blocking: the page behind stays visible and usable.
   Width is ONE token (--lw-width) so it can be tuned without touching layout.
   ========================================================================== */
:root { --lw-width: clamp(860px, 62vw, 1280px); --lw-accent-soft: rgba(232,134,46,.08); }
.lead-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--lw-width); max-width: 100vw; z-index: 45;
	background: #FBF8F3; border-left: 1px solid var(--line); box-shadow: -24px 0 48px -28px rgba(14,31,26,.35), -1px 0 0 rgba(19,36,32,.04);
	transform: translateX(104%); transition: transform .2s cubic-bezier(.2,.7,.2,1); outline: none; display: flex; }
.lead-drawer.open { transform: translateX(0); }
.lead-drawer.closing { transform: translateX(104%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lead-drawer { transition: none; } }
.lw-inner { display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; }
.lw-ico { flex: none; vertical-align: -3px; }

/* Header (sticky by construction: it sits outside the scroll area) */
.lw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 18px 24px 14px; background: #FBF8F3; border-bottom: 1px solid rgba(19,36,32,.06); }
.lw-head .lm-avatar { width: 56px; height: 56px; font-size: 19px; background: linear-gradient(135deg, var(--saffron), var(--coral)); color: #fff; }
.lw-head .lm-id { gap: 16px; }
.lw-id-text { min-width: 0; }
.lw-head h2 { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-head .lm-meta-row { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 3px; }
.lw-meta-link { color: var(--blue); font-weight: 600; }
.lw-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.lw-head .lm-actions { gap: 8px; }
.lw-head .btn { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.lw-btn-wa { background: #fff; color: var(--green); border: 1px solid rgba(29,171,85,.45); }
.lw-btn-wa:hover { background: rgba(29,171,85,.06); }
.lw-btn-demo { border-radius: 10px; }
.lw-head .btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 10px; }
.lw-head .btn-icon:hover { background: var(--cream); transform: none; }
.lw-head .btn-icon .lw-ico { width: 18px; height: 18px; }
.lw-more { position: relative; }
.lw-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: 0 18px 40px -18px rgba(14,31,26,.35); padding: 6px; z-index: 5; display: grid; }
.lw-menu[hidden] { display: none; }
.lw-menu [role="menuitem"] { display: flex; align-items: center; gap: 9px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink);
	padding: 9px 10px; border-radius: 8px; text-align: left; cursor: pointer; text-decoration: none; }
.lw-menu [role="menuitem"]:hover, .lw-menu [role="menuitem"]:focus-visible { background: var(--cream); outline: none; }
.lw-menu .lw-danger { color: var(--red); }
.lw-menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }

/* Scroll area: summary strip + tabs + panels. Header and footer never scroll away. */
.lw-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 24px 24px; }
.lw-stats { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.lw-stat { display: flex; gap: 8px; align-items: flex-start; padding: 12px 12px 11px; border-radius: 12px; }
.lw-stat-ic { color: var(--saffron); margin-top: 1px; }
.lw-stat-ic .lw-ico { width: 18px; height: 18px; }
.lw-stat[data-stat="source"] .lw-stat-ic { color: var(--blue); }
.lw-stat[data-stat="last"] .lw-stat-ic { color: var(--green); }
.lw-stat[data-stat="stage"] .lw-stat-ic { color: var(--blue); }
.lw-stat-body { min-width: 0; flex: 1; }
.lw-stat .s-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.lw-stat .s-value { font-size: 13px; font-weight: 600; white-space: normal; overflow: visible; line-height: 1.35; overflow-wrap: anywhere; }
.lw-stat select.s-value-select { font-weight: 600; font-size: 13px; white-space: normal; cursor: pointer; padding-right: 4px; }
.lw-s-link { display: inline-block; margin-top: 6px; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--blue); cursor: pointer; }
.lw-s-link:hover { text-decoration: underline; }
.lw-stat.lw-emph { border-color: rgba(232,134,46,.55); box-shadow: 0 0 0 3px rgba(232,134,46,.10); }

.lead-drawer .lm-attention-banner { margin: 10px 0 0; }

/* Tabs — sticky at the top of the scroll area */
.lw-tabs { position: sticky; top: -14px; z-index: 3; background: #FBF8F3; margin: 6px -24px 16px; padding: 4px 24px 0; gap: 2px; }
.lw-tabs .lm-tab { padding: 12px 14px; margin-right: 0; font-size: 13.5px; }
.lw-tabs .lm-tab:focus-visible { outline: 2px solid rgba(232,134,46,.5); outline-offset: -2px; border-radius: 6px; }
.lead-drawer .lm-tab-panels { padding-top: 0; }

/* Overview: main (≈70%) + context column (≈30%) */
.lw-ov { display: grid; grid-template-columns: minmax(0, 7fr) minmax(290px, 3fr); gap: 16px; align-items: start; }
.lw-ov-main { display: grid; gap: 14px; min-width: 0; }
.lw-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.lw-ov-main .lw-card { margin-bottom: 0; }
.lw-card-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; margin: 0 0 14px; color: var(--ink); }
.lw-card-h .lw-ico { color: var(--saffron); width: 18px; height: 18px; }
.lw-h-wa .lw-ico { color: var(--green); }
.lw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lw-card-head .lw-card-h { margin: 0; }
.lw-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.lw-form .form-grid .span-3 { grid-column: 1 / -1; }
.lw-form label { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 12px; }
.lw-form input, .lw-form select, .lw-form textarea { padding: 9px 12px; border-radius: 9px; font-size: 14px; }
.lw-req { color: var(--coral); }
.lw-input-wrap { position: relative; display: block; }
.lw-input-wrap input { padding-right: 38px; }
.lw-in-ic { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--green); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; }
.lw-in-ic:hover { background: rgba(29,171,85,.08); }
.lw-in-ic .lw-ico { width: 18px; height: 18px; }
/* Lost reason: present but quiet for active leads; emphasised once Stage = Lost (or a reason exists). */
.lw-lost:not(.lw-lost-active) { color: var(--ink-3); }
.lw-lost:not(.lw-lost-active) input { background: #FAFAF8; border-style: dashed; }
.lw-lost.lw-lost-active input { border-color: rgba(214,69,69,.45); background: rgba(214,69,69,.03); }
.lw-lost.lw-lost-active { color: var(--red); }
.lw-notes-top { display: flex; align-items: center; justify-content: space-between; }
.lw-notes-expand { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 2px; border-radius: 6px; display: grid; place-items: center; }
.lw-notes-expand:hover { color: var(--ink); background: var(--cream); }
.lw-form textarea.notes-area { min-height: 130px; resize: vertical; line-height: 1.55; }
.lw-form textarea.notes-area.lw-expanded { min-height: 360px; }
.lw-tags { margin-top: 2px; }
.lw-lbl { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.lw-tags-box { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 6px 8px; background: #fff; }
.lw-tags-box #lead-tags .tag-chips { margin: 0; }
.lw-tags-box #lead-tags .muted { margin: 0 !important; font-size: 13px; }
.lw-tags-box .tag-chip { background: #F1EEE8; border-radius: 6px; padding: 3px 8px; font-size: 12.5px; }
.lw-tags-box .tag-add-row { flex: 1; min-width: 180px; display: flex; gap: 6px; margin: 0; }
.lw-tags-box .tag-add-row input { border: 0; padding: 5px 4px; font-size: 13px; }
.lw-tags-box .tag-add-row input:focus { outline: none; }

.lw-demo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lw-wf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.lw-wf-left { display: flex; gap: 12px; align-items: flex-start; }
.lw-wf-ic { color: var(--saffron); margin-top: 2px; }
.lw-wf-ic .lw-ico { width: 22px; height: 22px; }
.lw-wf-h { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.lw-wf-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.lw-wf-more { margin-top: 2px; font-size: 12px; }
.lw-wf-btn { margin-top: 10px; }
.lw-wf-right .wf-steps { margin-top: 4px; }

/* Context column cards (existing .lm-side markup, restyled) */
.lw-ov-side .lm-side { gap: 14px; }
.lw-ov-side .lm-card { border-radius: 14px; padding: 16px; }
.lw-ov-side .side-h { display: flex; align-items: center; gap: 9px; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.lw-ov-side .side-h .lw-ico { width: 18px; height: 18px; color: var(--saffron); }
.lw-ov-side .lw-h-wa .lw-ico { color: var(--green); }
.lw-ov-side .lw-h-pin .lw-ico { color: var(--red); }
.lw-ov-side .next-action { background: rgba(232,134,46,.06); border-color: rgba(232,134,46,.35); }
.lw-ov-side .next-action .side-h .lw-ico { color: var(--coral); }
.lw-ov-side .next-action p { font-size: 14px; font-weight: 400; color: var(--ink-2); margin: 0 0 8px; }
.lw-na-ok { margin: 0 !important; }
.lw-ov-side .side-link { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; font-size: 13.5px; }
.lw-ov-side .qa-btn { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; font-size: 12.5px; padding: 10px 6px; white-space: nowrap; }
.lw-ov-side .qa-btn .lw-ico { color: var(--blue); }
.lw-ov-side .qa-wa .lw-ico { color: var(--green); }
.lw-ov-side .qa-capi .lw-ico { color: var(--coral); }
.lw-ov-side .qa-btn:disabled { opacity: .55; cursor: progress; }
.lw-ov-side .ld-row { align-items: center; padding: 7px 0; font-size: 13.5px; }
.lw-ov-side .ld-label { display: flex; align-items: center; gap: 9px; width: 108px; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.lw-ov-side .ld-label .lw-ico { color: var(--ink-3); }
.lw-ov-side .ld-value { font-weight: 500; }
.lw-kv .ld-row { align-items: baseline; }
.lw-kv .ld-label { width: 150px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }
.lw-kv .ld-value { font-weight: 500; font-size: 13px; }

/* Conversation (read-only thread) */
.lw-thread-window { margin-bottom: 8px; }
.lw-thread { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; background: var(--cream); border-radius: 12px; padding: 14px; }
.lw-foot-note { margin-top: 8px; font-size: 12px; }

/* Journey milestones */
.lw-journey { list-style: none; margin: 0; padding: 0; position: relative; }
.lw-j-item { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.lw-j-item::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: rgba(19,36,32,.08); }
.lw-j-item:last-child::before { display: none; }
.lw-j-dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--saffron); flex: none; margin-top: 3px; }
.lw-j-body { min-width: 0; }
.lw-j-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lw-j-time { font-size: 12px; color: var(--ink-3); }
.lw-j-text { font-size: 13.5px; margin-top: 3px; color: var(--ink); }

/* Activity type chips + filters */
.lw-type-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px;
	background: rgba(19,36,32,.06); color: var(--ink-2); margin-right: 4px; vertical-align: 1px; }
.lw-type-chip.t-stage { background: rgba(59,125,216,.1); color: var(--blue); }
.lw-type-chip.t-automation { background: rgba(232,134,46,.12); color: #B8661D; }
.lw-type-chip.t-followup, .lw-type-chip.t-demo { background: rgba(29,171,85,.1); color: #17803F; }
.lw-type-chip.t-voice_stage_decision, .lw-type-chip.t-call { background: rgba(124,77,255,.1); color: #6A3FD6; }
.lw-type-chip.t-attention { background: rgba(214,69,69,.1); color: var(--red); }
.lw-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.lw-filter { border: 1px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.lw-filter span { color: var(--ink-3); margin-left: 2px; }
.lw-filter.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.lw-filter.active span { color: rgba(255,255,255,.7); }

/* Footer (sticky by construction) */
.lw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: #fff; border-top: 1px solid var(--line); }
.lw-foot .btn { border-radius: 10px; padding: 10px 20px; }
.lw-btn-delete { background: #fff; color: var(--red); border: 1px solid rgba(214,69,69,.35); }
.lw-btn-delete:hover { background: rgba(214,69,69,.05); }
.lw-foot-right { align-items: center; }
.lw-foot .unsaved { color: var(--saffron); font-weight: 600; font-size: 13.5px; margin-right: 8px; }
.lw-foot .btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }

/* Unsaved-changes confirmation (inside the drawer) */
.lw-confirm-back { position: absolute; inset: 0; background: rgba(14,31,26,.28); display: grid; place-items: center; z-index: 10; padding: 20px; }
.lw-confirm { background: #fff; border-radius: 16px; padding: 22px; width: min(400px, 100%); box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.lw-confirm h3 { font-size: 17px; margin-bottom: 6px; }
.lw-confirm .btn-row { justify-content: flex-end; margin-top: 16px; }

/* Loading shell */
.lead-drawer.lw-loading .lw-scroll { opacity: .55; }
.lw-skel { background: #EFE9E0 !important; }
.lw-skel-block { height: 78px; border-radius: 12px; background: #F1ECE4; margin-bottom: 14px; }
.lw-skel-block.tall { height: 420px; }

/* Responsive: widen as space shrinks; full screen on small devices. */
@media (max-width: 1440px) { :root { --lw-width: clamp(860px, 66vw, 1280px); } }
@media (max-width: 1180px) {
	:root { --lw-width: min(100vw, calc(100vw - 180px)); }
	.lw-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
	.lw-ov { grid-template-columns: 1fr; }
	.lw-wf { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	:root { --lw-width: 100vw; }
	.lead-drawer { border-left: 0; }
	body.lw-open { overflow: hidden; }
	.lw-head { padding: 14px 16px 12px; flex-wrap: wrap; }
	.lw-head .lm-avatar { width: 44px; height: 44px; font-size: 16px; }
	.lw-head .lm-actions { width: 100%; }
	.lw-head .lm-actions .lw-btn-wa, .lw-head .lm-actions .lw-btn-demo { flex: 1; justify-content: center; }
	.lw-scroll { padding: 12px 16px 20px; }
	.lw-tabs { margin: 6px -16px 14px; padding: 4px 16px 0; overflow-x: auto; flex-wrap: nowrap; }
	.lw-tabs .lm-tab { white-space: nowrap; }
	.lw-stats { grid-template-columns: 1fr 1fr; }
	.lw-form .form-grid { grid-template-columns: 1fr; }
	.lw-foot { padding: 10px 16px; flex-wrap: wrap; }
	.lw-foot .unsaved { width: 100%; text-align: right; margin: 0; }
}

.lw-form label { display: flex; flex-direction: column; gap: 6px; }
.lw-l { display: block; }
.lw-ov-side .ld-value { min-width: 0; }
/* Funnel + drawer on wide screens: instead of covering the board, the page makes room for the
   workspace (CRM ≈ left 35–40%, workspace ≈ right 60–65%) and the columns go compact, so the
   selected card and its neighbours stay in view. Other pages keep the overlay behaviour. */
@media (min-width: 1400px) {
	body.lw-open .content[data-page="funnel"] { margin-right: var(--lw-width); transition: margin-right .2s cubic-bezier(.2,.7,.2,1); }
	body.lw-open .content[data-page="funnel"] .board { grid-auto-columns: minmax(150px, 1fr); gap: 10px; }
	body.lw-open .content[data-page="funnel"] .card { padding: 9px 10px; font-size: 13px; }
}
.lead-drawer .timeline > h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lead-drawer .tl-wa-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-2); cursor: pointer; }
.lead-drawer .tl-wa-toggle input { width: auto; margin: 0; }
@media (max-width: 760px) {
	.lw-foot { flex-wrap: nowrap; }
	.lw-foot .lw-del-t { display: none; }
	.lw-foot .lw-btn-delete { padding: 10px 12px; }
	.lw-foot-right { margin-left: auto; flex-wrap: nowrap; }
	.lw-foot { position: relative; }
	.lw-foot .unsaved { position: absolute; right: 16px; top: -24px; width: auto; background: #FBF8F3; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
	.lw-head .lm-actions .btn { white-space: nowrap; font-size: 13px; padding: 9px 12px; }
}

.lw-dt-pair { display: flex; gap: 8px; }
.lw-dt-pair input { flex: 1; min-width: 0; }

/* ═══ v1.36.0 — Conversations workspace redesign (presentation only) ═══
   Everything below is scoped to #convo-root (or to the Conversations page's own #content) so no
   other page — including the Lead Workspace drawer's read-only Conversation tab, which shares the
   .wa-msg bubble markup — changes. Layout: inbox | thread | lead-context sidebar, sized to the
   viewport so the thread scrolls inside itself and the composer stays anchored at the bottom. */
#content[data-page="conversations"] { padding: 20px 22px 18px; }
#content[data-page="conversations"] .topbar { margin-bottom: 0; }
#content[data-page="conversations"] .topbar h1 { font-size: 27px; }
#convo-root { --cv-h: calc(100vh - 176px); }
#convo-root .cv-page-sub { color: var(--ink-3); font-size: 13.5px; margin: 2px 0 14px; }
#convo-root .lw-ico { width: 16px; height: 16px; }

/* Filter toolbar */
#convo-root .cv-filters { gap: 10px; margin-bottom: 14px; flex-wrap: nowrap; }
#convo-root .cv-filters input, #convo-root .cv-filters select { padding: 9px 12px; font-size: 13.5px; border-radius: 10px; background-color: #fff; }
#convo-root .cv-filters .search-wrap { flex: 1 1 320px; min-width: 180px; }
#convo-root .cv-filters .search-wrap input { padding-left: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7C76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px 50%; }
#convo-root .cv-filters select { flex: 0 1 170px; min-width: 120px; }
.cv-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line); background: #fff; border-radius: 10px; cursor: pointer; color: var(--ink-2); font: inherit; font-size: 18px; line-height: 1; }
.cv-icon-btn:hover { border-color: rgba(232,134,46,.55); color: var(--ink); }

/* Three-column workspace */
#convo-root .convo-layout { display: grid; grid-template-columns: minmax(280px, 318px) minmax(0, 1fr) 272px; gap: 14px; align-items: stretch; height: var(--cv-h); min-height: 520px; position: relative; }
#convo-root .convo-layout:not(.has-thread) { grid-template-columns: minmax(280px, 318px) minmax(0, 1fr); }
#convo-root .convo-list, #convo-root .convo-thread-pane, #convo-root .cv-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(19,36,32,.03); }
#convo-root .convo-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* Inbox tabs */
.cv-tabs { display: flex; gap: 16px; padding: 0 14px; border-bottom: 1px solid var(--line); flex: none; }
.cv-tab { position: relative; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 13px 0 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cv-tab.active { color: var(--ink); }
.cv-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--saffron); }
.cv-tab-count { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(19,36,32,.07); color: var(--ink-2); }
.cv-tab-count.is-hot { background: rgba(232,134,46,.16); color: #A85717; }
#convo-root .convo-list-items { max-height: none; flex: 1; overflow-y: auto; min-height: 0; }
#convo-root .cv-list-empty { padding: 18px 16px; }

/* Inbox rows */
#convo-root .convo-list-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px 12px 13px; border-bottom: 1px solid rgba(19,36,32,.07); border-left: 3px solid transparent; }
#convo-root .convo-list-item:hover { background: rgba(19,36,32,.03); }
#convo-root .convo-list-item.convo-waiting { background: none; border-left-color: transparent; padding-left: 13px; }
#convo-root .convo-list-item.active, #convo-root .convo-list-item.convo-waiting.active { background: rgba(232,134,46,.08); border-left-color: var(--saffron); }
#convo-root .cv-item-main { flex: 1; min-width: 0; display: block; }
#convo-root .convo-list-item .cv-name-row, #convo-root .convo-list-item .cv-meta-row, #convo-root .convo-list-item .cv-snippet-row { display: flex; }
#convo-root .convo-list-item .cv-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#convo-root .convo-list-item.convo-waiting .cv-name, #convo-root .convo-list-item.active .cv-name { font-weight: 800; }
#convo-root .convo-list-item .cv-meta-row { margin-top: 4px; gap: 6px; flex-wrap: wrap; }
#convo-root .convo-list-item .chip { font-size: 11px; padding: 2px 8px; font-weight: 700; }
#convo-root .convo-list-item .cv-stage-label { font-size: 11px; font-weight: 600; color: var(--ink-3); background: rgba(19,36,32,.06); padding: 2px 8px; border-radius: 999px; }
#convo-root .convo-list-item .cv-snippet-row { align-items: center; gap: 8px; margin-top: 5px; }
#convo-root .convo-list-item .cv-snippet { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; color: var(--ink-3); }
#convo-root .convo-list-item.convo-waiting .cv-snippet { color: var(--ink); font-weight: 500; }
#convo-root .cv-waiting-dot { width: 9px; height: 9px; margin: 0; flex: none; box-shadow: 0 0 0 3px rgba(232,134,46,.18); }
#convo-root .cv-undeliv { color: #B7791F; font-size: 12px; }

/* Avatars */
.cv-avatar { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: .02em; background: #EEF1EF; color: var(--ink-2); }
.cv-avatar.c-facebook { background: rgba(59,125,216,.12); color: #2E62AC; }
.cv-avatar.c-instagram { background: rgba(214,69,143,.12); color: #B3327A; }
.cv-avatar.c-whatsapp { background: rgba(29,171,85,.13); color: #157A3F; }
.cv-avatar.c-google { background: rgba(232,134,46,.14); color: #A85717; }
.cv-avatar.c-referral { background: rgba(140,90,220,.12); color: #6A3FB8; }
.cv-avatar-lg { width: 44px; height: 44px; font-size: 15px; }
.cv-avatar-wa { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }

/* Thread pane */
#convo-root .convo-thread-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0; overflow: hidden; }
#convo-root .convo-thread-head { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); flex: none; }
#convo-root .cv-back .lw-ico { transform: rotate(180deg); }
#convo-root .cv-back { width: 34px; height: 34px; }
#convo-root .cv-head-main { flex: 1; min-width: 0; }
#convo-root .convo-thread-head h3 { font-size: 16.5px; font-weight: 700; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-head-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cv-head-chips .chip { font-size: 11px; padding: 2px 8px; font-weight: 700; }
.cv-stage-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(232,134,46,.14); color: #A85717; }
.cv-open-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(29,171,85,.12); color: #157A3F; }
.cv-head-actions { display: flex; gap: 8px; flex: none; }
.cv-head-actions .btn { border-radius: 10px; padding: 7px 12px; }
.cv-side-toggle { display: none !important; }

.cv-meta-strip { display: flex; gap: 8px 28px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); flex: none; }
.cv-meta-item { display: flex; align-items: center; gap: 9px; color: var(--ink-3); }
.cv-meta-item > span { display: grid; line-height: 1.25; }
.cv-meta-item small { font-size: 11px; color: var(--ink-3); }
.cv-meta-item b { font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* Automation banner */
#convo-root .wa-convo-automation { margin: 12px 16px 0; padding: 11px 14px; border-radius: 10px; flex: none; font-size: 12.5px; }
#convo-root .wa-convo-automation.is-paused { background: #FFF6EC; border: 1px solid rgba(232,134,46,.38); }
.cv-auto-head { display: flex; gap: 10px; align-items: flex-start; }
.cv-auto-ico { flex: none; font-size: 12px; line-height: 20px; color: var(--saffron); font-weight: 800; letter-spacing: -2px; }
.is-stopped .cv-auto-ico { color: var(--ink-3); letter-spacing: 0; }
.is-dnc .cv-auto-ico { color: var(--red); letter-spacing: 0; font-size: 15px; }
.cv-auto-title { display: block; font-size: 13px; font-weight: 700; color: #B25A12; }
.is-stopped .cv-auto-title { color: var(--ink); }
.is-dnc .cv-auto-title { color: #A22; }
.cv-auto-sub { display: block; color: var(--ink-2); margin-top: 2px; }
.cv-auto-actions { margin-top: 10px; gap: 8px; }
.cv-auto-actions .btn { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; }
.cv-auto-actions .btn-primary { box-shadow: none; }

/* Reply-window row */
#convo-root .cv-window-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 16px 0; font-size: 12px; color: var(--ink-3); flex: none; }
#convo-root .wa-convo-window { margin-left: 16px; margin-right: 16px; }
.cv-window-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.cv-window-pill.is-open { background: rgba(29,171,85,.12); color: #157A3F; }
.cv-window-pill.is-closed { background: rgba(214,69,69,.10); color: #A22; }
.cv-window-pill.is-none { background: rgba(19,36,32,.07); color: var(--ink-2); }

/* Messages */
#convo-root .convo-thread-body { flex: 1 1 auto; min-height: 160px; max-height: none; margin: 10px 0 0; padding: 12px 16px 14px; border-radius: 0; background: none; gap: 8px; border-top: 1px solid rgba(19,36,32,.05); }
#convo-root .wa-msg { max-width: min(70%, 560px); padding: 9px 13px 7px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
#convo-root .wa-msg.in { background: #fff; border: 1px solid rgba(19,36,32,.13); border-bottom-left-radius: 4px; }
#convo-root .wa-msg.out { background: #FDEBDB; border: 1px solid rgba(232,134,46,.2); border-bottom-right-radius: 4px; }
#convo-root .wa-msg.out.wa-msg-error { background: rgba(214,69,69,.08); border-color: rgba(214,69,69,.3); }
#convo-root .wa-msg .wa-msg-time { font-size: 10.5px; margin-top: 4px; white-space: normal; }
#convo-root .wa-msg.out .wa-msg-time { text-align: right; }
.cv-day-sep { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; color: var(--ink-3); font-size: 11px; font-weight: 600; }
.cv-day-sep::before, .cv-day-sep::after { content: ''; flex: 1; height: 1px; background: rgba(19,36,32,.08); }
.cv-day-sep span { border: 1px solid var(--line); background: #FBF8F3; padding: 2px 10px; border-radius: 999px; }

/* Composer */
#convo-root #convo-compose-area { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--line); max-height: 48%; overflow-y: auto; }
#convo-root .cv-compose { display: block; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
#convo-root .cv-compose:focus-within { border-color: rgba(232,134,46,.6); box-shadow: 0 0 0 3px rgba(232,134,46,.12); }
#convo-root .cv-compose textarea { border: 0; outline: 0; resize: none; min-height: 46px; max-height: 160px; padding: 11px 13px 4px; font-size: 13.5px; background: transparent; box-shadow: none; }
#convo-root .cv-compose textarea:focus { outline: 0; }
.cv-compose-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 8px; flex-wrap: wrap; }
.cv-tool { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.cv-tool:hover, .cv-tool.on { border-color: rgba(232,134,46,.55); color: var(--ink); background: #FFF8F1; }
.cv-compose-spacer { flex: 1; }
#convo-root .cv-send { border-radius: 9px; padding: 8px 18px; font-size: 13.5px; }
#convo-root .cv-send .lw-ico { width: 15px; height: 15px; }
#convo-root .cv-panel { margin-top: 8px; }
#convo-root .cv-panel > summary { display: none; }
#convo-root .cv-panel[open] { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #FCFAF6; }
#convo-root .cv-panel .wa-convo-tplsend, #convo-root .cv-panel .wa-convo-media { margin-top: 0; }
#convo-root .cv-compose-closed { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #FCFAF6; }
#convo-root .cv-canned-dropdown { bottom: calc(100% + 4px); }

/* Empty state */
.cv-empty-state { margin: auto; text-align: center; max-width: 320px; padding: 40px 20px; color: var(--ink-3); }
.cv-empty-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(232,134,46,.1); color: var(--saffron); margin-bottom: 12px; }
.cv-empty-ico .lw-ico { width: 24px !important; height: 24px !important; }
.cv-empty-state h3 { font-size: 16px; color: var(--ink); margin: 0 0 6px; }
.cv-empty-state p { font-size: 13px; line-height: 1.5; margin: 0; }

/* Lead-context sidebar */
.cv-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.cv-side[hidden] { display: none; }
#convo-root .cv-card { padding: 13px 14px; flex: none; }
.cv-card-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.cv-card-h .cv-link { margin-left: auto; }
.cv-link { border: 0; background: none; color: var(--blue); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0; }
.cv-link:hover { text-decoration: underline; }
.cv-na-box { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.cv-na.warn .cv-na-box { border-color: rgba(232,134,46,.4); background: #FFFAF4; }
.cv-na-text { font-size: 13px; font-weight: 600; line-height: 1.4; margin: 0; }
.cv-na-text.cv-na-ok { font-weight: 500; color: var(--ink-2); }
.cv-na-due { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }
.cv-na-due.warn { color: #B25A12; font-weight: 600; }
.cv-na-cta { width: 100%; justify-content: center; margin-top: 10px; border-radius: 8px; padding: 8px 12px; box-shadow: none; }
.cv-dl { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 9px 10px; margin: 0; font-size: 12.5px; align-items: center; }
.cv-dl dt { color: var(--ink-3); }
.cv-dl dt.cv-dt-top { align-self: start; padding-top: 2px; }
.cv-dl dd { margin: 0; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.cv-dl dd.cv-tags-dd { display: block; white-space: normal; text-align: right; overflow: visible; }
.cv-wa-dot { color: var(--green); display: inline-flex; }
.cv-stage-select { width: auto; max-width: 100%; padding: 4px 8px; font-size: 12.5px; border-radius: 8px; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cv-tags .tag-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: #F1EEE8; }
.cv-no-tags { font-size: 12px; }
.cv-tag-add { display: flex; gap: 5px; margin-top: 6px; }
.cv-tag-add input { padding: 5px 8px; font-size: 12px; border-radius: 8px; }
.cv-tag-add .cv-icon-btn { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.cv-qa { display: grid; gap: 2px; }
.cv-qa button { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); padding: 7px 6px; border-radius: 8px; cursor: pointer; text-align: left; }
.cv-qa button:hover { background: rgba(19,36,32,.05); color: var(--ink); }
.cv-qa button.cv-qa-danger:hover { color: #A22; background: rgba(214,69,69,.07); }
.cv-tz-note { font-size: 11.5px; color: var(--ink-3); background: rgba(19,36,32,.04); border-radius: 8px; padding: 7px 10px; margin: 0; flex: none; }

/* Responsive — primary target is 1366–1920 desktop. */
@media (max-width: 1500px) {
	#convo-root .convo-layout { grid-template-columns: minmax(260px, 292px) minmax(0, 1fr) 258px; }
	#convo-root .convo-layout:not(.has-thread) { grid-template-columns: minmax(260px, 292px) minmax(0, 1fr); }
	#convo-root .cv-filters select { flex-basis: 150px; }
}
/* Below ~1320px the sidebar becomes a slide-over panel, toggled by "Lead info" in the thread
   header, so the chat never gets squeezed. */
@media (max-width: 1320px) {
	#convo-root .convo-layout, #convo-root .convo-layout:not(.has-thread) { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); }
	.cv-side-toggle { display: inline-flex !important; }
	#convo-root .cv-side { position: absolute; top: 0; right: 0; bottom: 0; width: 290px; z-index: 30; padding: 12px; background: #FBF8F3; border: 1px solid var(--line); border-radius: 12px; box-shadow: -12px 0 28px -18px rgba(19,36,32,.35); display: none; }
	#convo-root .convo-layout.side-open .cv-side:not([hidden]) { display: flex; }
	#convo-root .convo-layout.side-open .cv-side-toggle { background: #FFF8F1; border-color: rgba(232,134,46,.55); }
	#convo-root .cv-filters { flex-wrap: wrap; }
}
@media (max-width: 1100px) {
	#convo-root .cv-meta-strip { gap: 6px 18px; }
	#convo-root .cv-head-actions .btn { padding: 6px 9px; font-size: 12px; }
}
/* Narrow screens: keep the pre-v1.36 single-column behaviour (list, then thread under it). */
@media (max-width: 860px) {
	#content[data-page="conversations"] { padding: 18px 14px 40px; }
	#convo-root { --cv-h: auto; }
	#convo-root .convo-layout, #convo-root .convo-layout:not(.has-thread) { grid-template-columns: 1fr; height: auto; min-height: 0; }
	#convo-root .convo-list-items { max-height: 40vh; }
	#convo-root .convo-thread-pane { min-height: 70vh; max-height: 90vh; }
	#convo-root .cv-side { position: static; width: auto; box-shadow: none; }
	#convo-root .cv-meta-strip { display: none; }
	#convo-root .cv-head-actions .cv-side-toggle { display: inline-flex !important; }
}
/* Short laptop screens (e.g. 1366×768): tighten the fixed chrome so the thread keeps its height. */
@media (max-height: 820px) and (min-width: 861px) {
	#convo-root { --cv-h: calc(100vh - 150px); }
	#convo-root .cv-page-sub { display: none; }
	#content[data-page="conversations"] .topbar { margin-bottom: 10px; }
	#content[data-page="conversations"] .topbar h1 { font-size: 23px; }
	#convo-root .convo-thread-head { padding: 9px 14px; }
	#convo-root .cv-meta-strip { padding: 7px 14px; }
	#convo-root .wa-convo-automation { margin-top: 8px; padding: 8px 12px; }
	#convo-root .cv-auto-actions { margin-top: 7px; gap: 6px; }
	#convo-root .cv-auto-actions .btn { padding: 4px 10px; font-size: 12px; }
	#convo-root .cv-window-row { margin-top: 6px; }
	#convo-root #convo-compose-area { padding: 8px 12px 10px; }
	#convo-root .cv-compose textarea { min-height: 38px; }
}
@media (max-width: 1500px) {
	.cv-compose-bar { flex-wrap: nowrap; gap: 5px; }
	.cv-tool { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
	#convo-root .cv-send { padding: 7px 14px; white-space: nowrap; }
}
@media (max-width: 1180px) { .cv-tool span { display: none; } }

/* ═══ v1.36.1 — Demo Slots workspace (presentation only) ═══
   Scoped to #slots-root so no other page changes. Same tokens as the v1.36.0 Conversations
   workspace: white 12px cards, light borders, orange for primary/selected, blue OPEN, green BOOKED. */
#content[data-page="demo-slots"] .topbar { margin-bottom: 2px; }
#slots-root { display: grid; gap: 14px; }
#slots-root .ds-head { display: flex; align-items: flex-start; gap: 16px; }
#slots-root .ds-sub { flex: 1; margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; max-width: 900px; }
#slots-root .ds-back { flex: none; margin-left: auto; border-radius: 10px; padding: 8px 14px; font-size: 13px; }
#slots-root .ds-card, #slots-root .ds-stat { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(19,36,32,.03); }
#slots-root .ds-card { padding: 16px 18px; min-width: 0; }
#slots-root .ds-spacer { flex: 1; }

/* Summary cards */
#slots-root .ds-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#slots-root .ds-stat { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0; }
#slots-root .ds-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
#slots-root .ds-ico-blue { background: rgba(59,125,216,.10); color: var(--blue); }
#slots-root .ds-ico-green { background: rgba(29,171,85,.10); color: var(--green); }
#slots-root .ds-ico-orange { background: rgba(232,134,46,.12); color: var(--saffron); }
#slots-root .ds-ico-purple { background: rgba(140,90,220,.10); color: #6A3FB8; }
#slots-root .ds-stat-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
#slots-root .ds-stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 2px 0 1px; }
#slots-root .ds-stat-sub { font-size: 11.5px; color: var(--ink-3); }

/* Publish card */
#slots-root .ds-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
#slots-root .ds-card-title { flex: 1; min-width: 0; }
#slots-root .ds-card-title h3 { margin: 0; font-size: 15.5px; font-weight: 700; }
#slots-root .ds-card-title p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); }
#slots-root .ds-tz { font-size: 12px; color: var(--ink-3); white-space: nowrap; padding-top: 3px; }
#slots-root .ds-row-labels, #slots-root .slot-add-row { display: grid; grid-template-columns: minmax(150px, 220px) minmax(120px, 170px) 34px minmax(0, 1fr); gap: 10px; align-items: center; }
#slots-root .ds-row-labels { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
#slots-root .slot-add-row { margin-bottom: 8px; }
#slots-root .slot-add-row input[type=date], #slots-root .slot-add-row input[type=time] { padding: 8px 10px; font-size: 13.5px; border-radius: 9px; }
#slots-root .slot-add-row.is-partial input { border-color: rgba(232,134,46,.6); }
#slots-root .slot-add-remove { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 9px; font-size: 16px; }
#slots-root .slot-add-hint { font-size: 12px; color: var(--ink-3); min-width: 0; }
#slots-root .slot-add-hint.ok { color: var(--ink-2); }
#slots-root .slot-add-hint.warn { color: #B25A12; }
#slots-root .slot-add-hint.info { color: var(--blue); }
#slots-root .ds-publish-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
#slots-root .ds-publish-actions .btn-ghost { border-radius: 9px; }
#slots-root #btn-slots-publish { border-radius: 9px; padding: 9px 20px; font-size: 13.5px; box-shadow: none; }
#slots-root #btn-slots-publish[disabled] { opacity: .6; cursor: default; }
#slots-root .ds-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #FCFAF6; }
#slots-root .ds-quick-label { font-size: 12.5px; font-weight: 700; margin-right: 4px; }
#slots-root .ds-chip { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
#slots-root .ds-chip:hover { border-color: rgba(232,134,46,.55); color: var(--ink); background: #FFF8F1; }
#slots-root .ds-quick-note { flex: 1 1 280px; font-size: 12px; color: var(--ink-3); text-align: right; }

/* Slot list */
#slots-root .ds-list { padding-top: 4px; }
#slots-root .ds-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 0 -18px; padding: 0 18px; overflow-x: auto; }
#slots-root .ds-tab { position: relative; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-3); padding: 12px 0 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
#slots-root .ds-tab.active { color: var(--saffron); }
#slots-root .ds-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--saffron); }
#slots-root .ds-tab-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(19,36,32,.07); color: var(--ink-2); }
#slots-root .ds-tab.active .ds-tab-n { background: rgba(232,134,46,.14); color: #A85717; }
#slots-root .ds-toolbar { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; flex-wrap: wrap; }
#slots-root .ds-search { flex: 0 1 340px; min-width: 200px; }
#slots-root .ds-search input { padding: 8px 12px 8px 34px; font-size: 13px; border-radius: 9px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B7C76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px 50%; }
#slots-root #ds-sort { width: auto; padding: 8px 10px; font-size: 13px; border-radius: 9px; }
#slots-root .ds-refresh { border-radius: 9px; padding: 7px 12px; }
#slots-root .table { font-size: 13px; }
#slots-root .table th { padding: 10px 12px; }
#slots-root .table td { padding: 9px 12px; }
#slots-root .table tbody tr:hover { background: rgba(232,134,46,.035); cursor: default; }
#slots-root .ds-row.is-past td { color: var(--ink-3); }
#slots-root .ds-row.is-past .ds-when-ico { opacity: .55; }
#slots-root .ds-when { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
#slots-root .ds-when-ico { display: inline-flex; color: var(--ink-3); }
#slots-root .ds-when-ico svg { width: 16px; height: 16px; }
#slots-root .ds-day { font-weight: 600; min-width: 92px; }
#slots-root .ds-dot { color: var(--ink-3); }
#slots-root .status-chip { font-size: 10.5px; padding: 2px 8px; border-radius: 6px; }
#slots-root .status-chip.st-past, #slots-root .status-chip.st-qa { background: rgba(19,36,32,.06); color: var(--ink-3); }
#slots-root .ds-note { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
#slots-root .ds-note.ok { color: var(--green); font-weight: 600; }
#slots-root .ds-note.warn { color: #B25A12; }
#slots-root .ds-th-actions { width: 1%; }
#slots-root .ds-actions { text-align: right; white-space: nowrap; }
#slots-root .ds-actions .btn { border-radius: 8px; padding: 5px 11px; margin-left: 6px; }
#slots-root .ds-actions .ds-del { color: #B42F2F; border-color: rgba(214,69,69,.35); }
#slots-root .ds-actions .ds-del:hover { background: rgba(214,69,69,.06); }
#slots-root .ds-locked { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--ink-3); }

#slots-root .ds-tip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; background: #FBF7F0; }

@media (max-width: 1400px) {
	#slots-root .ds-quick-note { text-align: left; }
}
@media (max-width: 1100px) {
	#slots-root .ds-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#slots-root .ds-tz { display: none; }
}
@media (max-width: 760px) {
	#slots-root .ds-head { flex-direction: column; }
	#slots-root .ds-row-labels { display: none; }
	#slots-root .slot-add-row { grid-template-columns: 1fr 1fr 34px; }
	#slots-root .slot-add-hint { grid-column: 1 / -1; }
	#slots-root .ds-stats { grid-template-columns: 1fr; }
}
@media (max-height: 820px) and (min-width: 761px) {
	#slots-root { gap: 10px; }
	#slots-root .ds-stat { padding: 10px 14px; }
	#slots-root .ds-ico { width: 38px; height: 38px; }
	#slots-root .ds-stat-value { font-size: 21px; }
	#slots-root .ds-card { padding: 12px 16px; }
	#slots-root .ds-card-head { margin-bottom: 8px; }
	#slots-root .ds-quick { margin-top: 10px; padding: 7px 10px; }
}
#slots-root .ds-th-info { font-weight: 400; opacity: .7; cursor: help; }
#slots-root .ds-note[title] { cursor: help; }
#slots-root .ds-footnote { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); }

/* ═══ v1.36.2 — Growth Analytics workspace (presentation only) ═══
   Scoped to #ga-root (plus the page's own #content) so no other page changes. Same tokens as the
   v1.36.0 Conversations / v1.36.1 Demo Slots workspaces: white 12px cards, light borders, orange
   for primary/selected, blue informational, green positive, purple only for Voice AI. */
#content[data-page="growth-analytics"] .topbar { margin-bottom: 0; }
#ga-root { display: grid; gap: 14px; }
#ga-root .ga2-head { display: flex; align-items: center; gap: 16px; margin-top: -2px; }
#ga-root .ga2-sub { flex: 1; margin: 0; color: var(--ink-3); font-size: 13.5px; }
#ga-root .ga2-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(19,36,32,.03); padding: 16px 18px; min-width: 0; }
#ga-root .ga2-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#ga-root .ga2-card-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: 0; }
#ga-root .ga2-card-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
#ga-root .ga2-tip { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 12px; color: var(--ink-3); cursor: help; }
#ga-root .ga2-tip:hover, #ga-root .ga2-tip:focus { color: var(--ink); outline: none; background: rgba(19,36,32,.06); }
#ga-root .ga2-note { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); margin: 10px 0 0; }
#ga-root .ga2-empty { margin: 6px 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; color: var(--ink-3); background: #FCFAF6; }
#ga-root .ga2-empty-inline { margin-top: 10px; padding: 9px 12px; }
#ga-root .ga2-spacer { flex: 1; }

/* Data coverage button + panel */
#ga-root .ga2-cov-wrap { position: relative; flex: none; }
#ga-root .ga2-cov-btn { margin: 0; padding: 7px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: #fff; border: 1px solid var(--line); cursor: pointer; font-family: inherit; }
#ga-root .ga2-cov-btn:hover { border-color: rgba(232,134,46,.55); color: var(--ink); }
#ga-root .ga2-cov-btn.warn { border-color: var(--saffron); color: #A85717; }
#ga-root .ga2-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: min(560px, 90vw); max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(19,36,32,.35); padding: 16px 18px; }
#ga-root .ga2-pop h3 { margin: 0 0 2px; font-size: 15px; }
#ga-root .ga2-pop h4 { margin: 14px 0 6px; font-size: 13px; }
#ga-root .ga2-pop-lead { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-3); }
#ga-root .ga2-cov-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
#ga-root .ga2-cov-table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--line); font-weight: 600; }
#ga-root .ga2-cov-table td { padding: 6px; border-bottom: 1px solid rgba(19,36,32,.06); }
#ga-root .ga2-cov-table .num { text-align: right; font-variant-numeric: tabular-nums; }
#ga-root .ga2-pop-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
#ga-root .ga2-pop-list li { margin-bottom: 4px; }

/* Filters */
#ga-root .ga2-filters { padding: 14px 16px; display: grid; gap: 10px; }
#ga-root .ga2-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#ga-root .ga2-chips { margin: 0; }
#ga-root .ga2-dates { display: inline-flex; align-items: center; gap: 8px; }
#ga-root .ga2-dates input { width: auto; padding: 7px 10px; font-size: 13px; border-radius: 9px; }
#ga-root .ga2-arrow { color: var(--ink-3); }
#ga-root #ga-channel { width: 220px; padding: 7px 10px; font-size: 13px; border-radius: 9px; }
#ga-root #ga-campaign { width: 260px; padding: 7px 10px; font-size: 13px; border-radius: 9px; }
#ga-root .ga2-reset { border-radius: 9px; }
#ga-root .ga2-cohort { margin: 0; font-size: 12px; color: var(--ink-3); }
#ga-root #ga-period-note { color: var(--ink-2); font-weight: 600; }

/* KPI cards */
#ga-root .ga2-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
#ga-root .ga2-kpi { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 12px; border-radius: 12px; box-shadow: 0 1px 2px rgba(19,36,32,.03); transform: none; }
#ga-root .ga2-kpi:hover { transform: none; box-shadow: 0 1px 2px rgba(19,36,32,.03); }
#ga-root .ga2-kpi::before { display: none; }
#ga-root .ga2-kpi-ico { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
#ga-root .ga2-tone-blue { background: rgba(59,125,216,.10); color: var(--blue); }
#ga-root .ga2-tone-orange { background: rgba(232,134,46,.12); color: var(--saffron); }
#ga-root .ga2-tone-green { background: rgba(29,171,85,.10); color: var(--green); }
#ga-root .ga2-tone-neutral { background: rgba(19,36,32,.07); color: var(--ink-2); }
#ga-root .ga2-kpi-body { min-width: 0; }
#ga-root .ga2-kpi .ga-kpi-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
#ga-root .ga2-kpi .ga-kpi-value { font-size: 26px; font-weight: 700; margin-top: 3px; }
#ga-root .ga2-kpi .ga-kpi-sub { font-size: 12px; margin-top: 2px; }
#ga-root .ga2-kpi-delta { margin-top: 8px; font-size: 11.5px; font-weight: 700; }
#ga-root .ga2-kpi-delta span { font-weight: 500; color: var(--ink-3); }
#ga-root .ga2-kpi-delta.up { color: var(--green); }
#ga-root .ga2-kpi-delta.down { color: var(--red); }
#ga-root .ga2-kpi-delta.flat { color: var(--ink-2); font-weight: 500; }
#ga-root .ga2-kpi-delta.na { color: var(--ink-3); font-weight: 500; }

/* Grids */
#ga-root .ga2-grid { display: grid; gap: 14px; align-items: start; }
#ga-root .ga2-grid-main { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

#ga-root .ga2-grid-speed { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
#ga-root .ga2-grid > .ga2-card, #ga-root .ga2-stack > .ga2-card:last-child { height: 100%; }
#ga-root .ga2-grid-main > .ga2-stack { height: 100%; grid-template-rows: auto 1fr; }
#ga-root .ga2-stack { display: grid; gap: 14px; }

/* Funnel */
#ga-root .ga2-funnel { display: grid; gap: 11px; }
#ga-root .ga2-f-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 5px; }
#ga-root .ga2-f-name { font-size: 13px; font-weight: 600; color: var(--ink-2); }
#ga-root .ga2-f-n { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
#ga-root .ga2-f-bar { display: grid; grid-template-columns: minmax(0, 1fr) 118px; align-items: center; gap: 12px; }
#ga-root .ga2-f-track { height: 10px; border-radius: 999px; background: rgba(19,36,32,.06); overflow: hidden; }
#ga-root .ga2-f-fill { height: 100%; border-radius: 999px; background: #4E5F59; }
#ga-root .ga2-fstep[data-accent="saffron"] .ga2-f-fill { background: var(--saffron); }
#ga-root .ga2-fstep[data-accent="blue"] .ga2-f-fill { background: var(--blue); }
#ga-root .ga2-fstep[data-accent="forest"] .ga2-f-fill { background: var(--forest); }
#ga-root .ga2-f-rate { font-size: 11.5px; color: var(--ink-3); text-align: right; white-space: nowrap; }

/* Comparison */
#ga-root .ga2-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); margin: 6px 0 10px; }
#ga-root .ga2-lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
#ga-root .ga2-lg:first-child { margin-left: 0; }
#ga-root .ga2-lg.now, #ga-root .ga2-cmp-fill.now { background: var(--saffron); }
#ga-root .ga2-lg.prev, #ga-root .ga2-cmp-fill.prev { background: #F6C9A0; }
#ga-root .ga2-cmp { display: grid; gap: 9px; }
#ga-root .ga2-cmp-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 86px; align-items: center; gap: 12px; }
#ga-root .ga2-cmp-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
#ga-root .ga2-cmp-bars { display: grid; gap: 3px; }
#ga-root .ga2-cmp-line { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 8px; }
#ga-root .ga2-cmp-track { height: 8px; border-radius: 999px; background: rgba(19,36,32,.05); overflow: hidden; }
#ga-root .ga2-cmp-fill { display: block; height: 100%; border-radius: 999px; }
#ga-root .ga2-cmp-val { font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#ga-root .ga2-cmp-val.prev { font-weight: 500; color: var(--ink-3); }
#ga-root .ga2-cmp-delta { margin: 0; justify-content: flex-end; font-size: 12px; }

/* Bottleneck */
#ga-root .ga2-callout { margin-top: 8px; border-radius: 12px; }

/* Voice AI */
#ga-root .ga2-va-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(140,90,220,.10); color: #6A3FB8; }
#ga-root .ga2-va-ico-sm { background: rgba(59,125,216,.10); color: var(--blue); font-size: 16px; }
#ga-root .ga2-va-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
#ga-root .ga2-va-metric { padding: 12px 14px; border-right: 1px solid var(--line); min-width: 0; }
#ga-root .ga2-va-metric:last-child { border-right: 0; }
#ga-root .ga2-va-value { font-size: 22px; font-weight: 700; line-height: 1.1; }
#ga-root .ga2-va-label { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
#ga-root .ga2-va-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
#ga-root .ga2-va-follow { margin-top: 12px; }

/* Label/value rows (outcomes, automation, follow-through) */
#ga-root .ga2-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; color: var(--ink-2); border-bottom: 1px solid rgba(19,36,32,.06); }
#ga-root .ga2-row:last-of-type { border-bottom: 0; }
#ga-root .ga2-row > span:last-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
#ga-root .ga2-row-group { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 2px; }
#ga-root .ga2-row-sub { padding-left: 14px; }

/* Speed */
#ga-root .ga2-speed .ga-speed-row { grid-template-columns: 190px minmax(0, 1fr) 70px 64px; padding: 6px 0; border-bottom-color: rgba(19,36,32,.06); }
#ga-root .ga2-speed .ga-speed-label { font-weight: 500; font-size: 12.5px; }
#ga-root .ga2-speed .ga-speed-track { height: 7px; }

/* Tables */
#ga-root .ga2-table { box-shadow: none; border-radius: 10px; margin-top: 8px; }
#ga-root .ga2-table table { font-size: 13px; }
#ga-root .ga2-table th { position: sticky; top: 0; z-index: 1; background: #F8F6F1; }

@media (max-width: 1500px) {
	#ga-root .ga2-kpi { padding: 12px; gap: 10px; }
	#ga-root .ga2-kpi-ico { width: 34px; height: 34px; }
	#ga-root .ga2-kpi .ga-kpi-value { font-size: 23px; }

	#ga-root .ga2-f-bar { grid-template-columns: minmax(0, 1fr) 108px; }
}
@media (max-width: 1400px) {
	#ga-root .ga2-cmp-row { grid-template-columns: 112px minmax(0, 1fr) 72px; gap: 8px; }
	#ga-root .ga2-speed .ga-speed-row { grid-template-columns: 170px minmax(0, 1fr) 64px 58px; }
	#ga-root .ga2-va-metric { padding: 10px 12px; }
}
@media (max-width: 1200px) {
	#ga-root .ga2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ga-root .ga2-grid-main, #ga-root .ga2-grid-speed { grid-template-columns: minmax(0, 1fr); }
	#ga-root .ga2-va-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#ga-root .ga2-va-metric { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
	#ga-root .ga2-head { flex-direction: column; align-items: flex-start; }
	#ga-root .ga2-pop { left: 0; right: auto; }
	#ga-root .ga2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ga-root .ga2-va-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#ga-root #ga-channel, #ga-root #ga-campaign { width: 100%; }
	#ga-root .ga2-speed .ga-speed-row { grid-template-columns: 1fr; }
}

/* ═══ v1.36.5 — Follow-ups workspace (presentation only) ═══
   Scoped to #fu-root (plus the page's own #content). Same tokens as the v1.36.0–v1.36.2
   workspaces: white 12px cards, light borders, orange primary; red = overdue, blue = upcoming. */
#content[data-page="followups"] .topbar { margin-bottom: 0; }
#fu-root { display: grid; gap: 14px; }
#fu-root .fu2-head { display: flex; align-items: center; gap: 16px; }
#fu-root .fu2-sub { flex: 1; margin: 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; max-width: 820px; }
#fu-root .fu2-search { flex: 0 1 320px; min-width: 220px; margin-left: auto; }
#fu-root .fu2-search input { padding: 9px 12px 9px 36px; font-size: 13.5px; border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7C76' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%; }
#fu-root .fu2-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(19,36,32,.03); min-width: 0; }
#fu-root .fu2-spacer { flex: 1; }

/* Summary cards */
#fu-root .fu2-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#fu-root .fu2-kpi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
#fu-root .fu2-kpi-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
#fu-root .fu2-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
#fu-root .fu2-kpi-value { font-size: 26px; font-weight: 700; line-height: 1.15; }
#fu-root .fu2-kpi-sub { font-size: 12px; color: var(--ink-3); }
#fu-root .fu2-tone-red .fu2-kpi-ico { background: rgba(214,69,69,.10); color: var(--red); }
#fu-root .fu2-tone-red { background: linear-gradient(0deg, rgba(214,69,69,.035), rgba(214,69,69,.035)), var(--paper); }
#fu-root .fu2-tone-orange .fu2-kpi-ico { background: rgba(232,134,46,.12); color: var(--saffron); }
#fu-root .fu2-tone-blue .fu2-kpi-ico { background: rgba(59,125,216,.10); color: var(--blue); }
#fu-root .fu2-tone-purple .fu2-kpi-ico { background: rgba(140,90,220,.10); color: #6A3FB8; }

/* Toolbar: tabs + filters */
#fu-root .fu2-toolbar { display: flex; align-items: center; gap: 10px; padding: 0 14px; flex-wrap: wrap; }
#fu-root .fu2-tabs { display: flex; gap: 20px; overflow-x: auto; }
#fu-root .fu2-tab { position: relative; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 14px 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
#fu-root .fu2-tab.active { color: var(--ink); }
#fu-root .fu2-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--saffron); }
#fu-root .fu2-tab-n { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(19,36,32,.07); color: var(--ink-2); }
#fu-root .fu2-tab-overdue .fu2-tab-n { background: rgba(214,69,69,.10); color: #B42F2F; }
#fu-root .fu2-tab-today .fu2-tab-n { background: rgba(232,134,46,.14); color: #A85717; }
#fu-root .fu2-tab-upcoming .fu2-tab-n { background: rgba(59,125,216,.10); color: #2E62AC; }
#fu-root .fu2-toolbar select { width: auto; min-width: 150px; padding: 7px 10px; font-size: 13px; border-radius: 9px; margin: 8px 0; }
#fu-root .fu2-clear { border-radius: 9px; }
#fu-root .fu2-clear[hidden] { display: none; }

/* Sections */
#fu-root .fu2-groups .panel { margin: 0; }
#fu-root .fu2-groups { display: grid; gap: 14px; }
#fu-root .fu2-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#fu-root .fu2-section { padding: 14px 16px 10px; }
#fu-root .fu2-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#fu-root .fu2-sec-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
#fu-root .fu2-sec-head h2 { margin: 0; font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
#fu-root .fu2-sec-head p { margin: 1px 0 0; font-size: 12.5px; color: var(--ink-3); }
#fu-root .fu2-count { font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
#fu-root .fu2-overdue { border-color: rgba(214,69,69,.28); background: linear-gradient(180deg, rgba(214,69,69,.035), rgba(255,255,255,0) 90px), var(--paper); }
#fu-root .fu2-overdue .fu2-sec-ico { background: rgba(214,69,69,.10); color: var(--red); }
#fu-root .fu2-overdue h2 { color: #B42F2F; }
#fu-root .fu2-overdue .fu2-count { background: rgba(214,69,69,.10); color: #B42F2F; }
#fu-root .fu2-today .fu2-sec-ico { background: rgba(232,134,46,.12); color: var(--saffron); }
#fu-root .fu2-today h2 { color: #B25A12; }
#fu-root .fu2-today .fu2-count { background: rgba(232,134,46,.14); color: #A85717; }
#fu-root .fu2-upcoming .fu2-sec-ico { background: rgba(59,125,216,.10); color: var(--blue); }
#fu-root .fu2-upcoming h2 { color: #2E62AC; }
#fu-root .fu2-upcoming .fu2-count { background: rgba(59,125,216,.10); color: #2E62AC; }

/* Rows */
#fu-root .fu2-thead, #fu-root .fu2-row { display: grid; grid-template-columns: minmax(190px, 1.3fr) minmax(200px, 1.4fr) 130px 130px 212px; gap: 14px; align-items: center; }
#fu-root .fu2-thead { padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
#fu-root .fu2-th-act { text-align: right; }
#fu-root .fu2-row { padding: 9px 4px; border-bottom: 1px solid rgba(19,36,32,.06); flex-wrap: nowrap; }
#fu-root .fu2-row:last-of-type { border-bottom: 0; }
#fu-root .fu2-row:hover { background: rgba(232,134,46,.03); }
#fu-root .fu2-lead { display: flex; align-items: center; gap: 10px; min-width: 0; }
#fu-root .fu2-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #EEF1EF; color: var(--ink-2); }
#fu-root .fu2-avatar.c-facebook { background: rgba(59,125,216,.12); color: #2E62AC; }
#fu-root .fu2-avatar.c-instagram { background: rgba(214,69,143,.12); color: #B3327A; }
#fu-root .fu2-avatar.c-whatsapp { background: rgba(29,171,85,.13); color: #157A3F; }
#fu-root .fu2-avatar.c-google { background: rgba(232,134,46,.14); color: #A85717; }
#fu-root .fu2-lead-txt { min-width: 0; }
#fu-root .fu2-name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fu-root .fu2-contact { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fu-root .fu2-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
#fu-root .fu2-tags .chip { font-size: 11px; padding: 2px 8px; font-weight: 700; }
#fu-root .fu2-stage { background: rgba(232,134,46,.10); color: #A85717; }
#fu-root .fu2-voice { background: rgba(140,90,220,.10); color: #6A3FB8; }
#fu-root .fu2-reason { flex-basis: 100%; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fu-root .fu2-when-main { font-size: 13px; font-weight: 600; }
#fu-root .fu2-when-sub { font-size: 11.5px; color: var(--ink-3); }
#fu-root .fu2-rel { font-size: 12.5px; font-weight: 700; }
#fu-root .fu2-rel.over { color: var(--red); }
#fu-root .fu2-rel.today { color: #B25A12; }
#fu-root .fu2-rel.up { color: #2E62AC; font-weight: 600; }
#fu-root .fu2-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: nowrap; }
#fu-root .fu2-iconbtn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink-2); cursor: pointer; font: inherit; padding: 0; margin: 0; text-decoration: none; }
#fu-root .fu2-iconbtn:hover { border-color: rgba(232,134,46,.55); color: var(--ink); }
#fu-root .fu2-wa { color: #157A3F; }
#fu-root .fu2-resched input.fu-newdate { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; cursor: pointer; }
#fu-root .fu2-done { border-radius: 8px; padding: 6px 12px; font-size: 12.5px; box-shadow: none; gap: 5px; }
#fu-root .fu2-more { display: flex; justify-content: center; padding: 10px 0 4px; }
#fu-root .fu2-viewall { border-radius: 9px; }
#fu-root .fu2-empty { margin: 4px 0 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; color: var(--ink-3); background: #FCFAF6; }

@media (min-width: 1700px) {
	#fu-root .fu2-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	#fu-root .fu2-split .fu2-thead, #fu-root .fu2-split .fu2-row { grid-template-columns: minmax(150px, 1.2fr) minmax(130px, 1fr) 96px 104px 196px; gap: 10px; }
	#fu-root .fu2-split .fu2-done { padding: 6px 9px; }
}
@media (max-width: 1400px) {
	#fu-root .fu2-thead, #fu-root .fu2-row { grid-template-columns: minmax(170px, 1.2fr) minmax(160px, 1.3fr) 112px 118px 206px; gap: 10px; }
	#fu-root .fu2-kpi-value { font-size: 23px; }
	#fu-root .fu2-kpi-ico { width: 40px; height: 40px; }
}
@media (max-width: 1150px) {
	#fu-root .fu2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#fu-root .fu2-head { flex-direction: column; align-items: stretch; }
	#fu-root .fu2-search { flex-basis: auto; }
	#fu-root .fu2-thead { display: none; }
	#fu-root .fu2-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
	#fu-root .fu2-tags, #fu-root .fu2-when, #fu-root .fu2-relcol { grid-column: 1 / -1; }
	#fu-root .fu2-when, #fu-root .fu2-relcol { display: inline-block; }
	#fu-root .fu2-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
	#fu-root .fu2-kpis { grid-template-columns: minmax(0, 1fr); }
	#fu-root .fu2-toolbar select { flex: 1 1 140px; }
}

/* ================= v1.36.7 — Settings redesign (scoped to #st-root + the sidebar Settings group) ================= */
.sidenav .nav-sub-settings { position: relative; margin: 2px 0 6px 22px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.14); }
.sidenav .nav-sub-settings a.nav-sub { padding: 6px 10px 6px 18px; position: relative; margin-top: 1px; }
.sidenav .nav-sub-settings a.nav-sub::before { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: currentColor; opacity: .55; }
.sidenav .nav-sub-settings a.nav-sub.active::before { background: var(--saffron); opacity: 1; box-shadow: 0 0 0 3px rgba(232,134,46,.18); }
html.sidenav-collapsed .nav-sub-settings { display: none; }

#st-root { --st-gap: 18px; }
#st-root .st2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: -6px 0 16px; flex-wrap: wrap; }
#st-root .st2-sub { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
#st-root .st2-version { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink-2); }
#st-root .st2-version strong { display: block; color: var(--ink); font-size: 14px; }
#st-root .st2-version span { font-size: 12px; color: var(--ink-3); }

/* top section navigation */
#st-root .st2-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 6px; margin-bottom: var(--st-gap); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(19,36,32,.03); }
#st-root .st2-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 10px; text-align: left; color: var(--ink); border: 0; }
#st-root .st2-tab .st2-i { flex: none; color: var(--ink-2); }
#st-root .st2-tab span { display: grid; min-width: 0; }
#st-root .st2-tab b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-root .st2-tab small { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#st-root .st2-tab:hover { background: rgba(19,36,32,.05); }
#st-root .st2-tab.active { background: var(--forest); color: #fff; }
#st-root .st2-tab.active .st2-i, #st-root .st2-tab.active small { color: rgba(255,255,255,.75); }
#st-root .st2-tab:focus-visible { outline: 2px solid rgba(232,134,46,.6); outline-offset: 1px; }

/* hero */
#st-root .st2-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(250px, 34%); gap: 22px; align-items: center; padding: 22px 24px; margin-bottom: var(--st-gap); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
#st-root .st2-hero-ico { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; }
#st-root .st2-hero h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
#st-root .st2-hero-lead { font-size: 15px; color: var(--ink-2); margin-bottom: 6px; }
#st-root .st2-hero-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
#st-root .st2-hero-facts { list-style: none; display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; }
#st-root .st2-hero-facts li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
#st-root .st2-fact-ic { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
#st-root .st2-tone-saffron .st2-hero-ico { background: rgba(232,134,46,.12); color: #C9651A; }
#st-root .st2-tone-saffron .st2-hero-facts { background: rgba(232,134,46,.08); }
#st-root .st2-tone-saffron .st2-fact-ic { background: var(--saffron); }
#st-root .st2-tone-green .st2-hero-ico { background: rgba(29,171,85,.12); color: #15803D; }
#st-root .st2-tone-green .st2-hero-facts { background: rgba(29,171,85,.07); }
#st-root .st2-tone-green .st2-fact-ic { background: var(--green); }
#st-root .st2-tone-blue .st2-hero-ico { background: rgba(59,125,216,.12); color: #2B63B5; }
#st-root .st2-tone-blue .st2-hero-facts { background: rgba(59,125,216,.07); }
#st-root .st2-tone-blue .st2-fact-ic { background: var(--blue); }
#st-root .st2-tone-ink .st2-hero-ico { background: rgba(19,36,32,.07); color: var(--forest-2); }
#st-root .st2-tone-ink .st2-hero-facts { background: rgba(29,171,85,.07); }
#st-root .st2-tone-ink .st2-fact-ic { background: var(--green); }

/* cards & grids */
#st-root .st2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-gap); margin-bottom: var(--st-gap); align-items: start; }
#st-root .st2-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#st-root .st2-grid-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
#st-root .st2-stack { display: grid; gap: var(--st-gap); min-width: 0; }
#st-root .st2-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(19,36,32,.03); margin: 0 0 var(--st-gap); min-width: 0; }
#st-root .st2-grid > .st2-card, #st-root .st2-stack > .st2-card { margin-bottom: 0; }
#st-root .st2-card-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
#st-root .st2-card-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(19,36,32,.05); color: var(--forest-2); }
#st-root .st2-card-t { min-width: 0; flex: 1; }
#st-root .st2-card-t h2 { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
#st-root .st2-card-t p { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
#st-root .st2-card-r { flex: none; margin-left: auto; display: flex; align-items: center; gap: 8px; }
#st-root .st2-card-f { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
#st-root .st2-card .btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#st-root .st2-card .btn .st2-i, #st-root .btn .st2-i { flex: none; }
#st-root .st2-sub-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #FCFBF8; min-width: 0; }
#st-root .st2-sub-card h3, #st-root .st2-h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
#st-root .st2-mt { margin-top: 14px; }
#st-root .st2-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
#st-root .st2-note { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 8px; }
#st-root .st2-note > .st2-i { display: inline-block; vertical-align: -2px; margin-right: 4px; }
#st-root .st2-card-f .st2-note { margin-top: 0; flex: 1 1 220px; }
#st-root .st2-card > p.muted, #st-root .st2-sub-card > p.muted, #st-root .st2-adv-body > p.muted, #st-root .st2-adv-body > div > p.muted { margin-bottom: 12px; }
#st-root .st2-status-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 8px; }
#st-root .st2-field-status { margin: -6px 0 12px; }
#st-root .st2-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -4px 0 4px; }
#st-root .st2-inline .st2-field-status { margin: 0; }
#st-root .st2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
#st-root .st2-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#st-root .st2-select-sm { width: auto; padding: 6px 10px; font-size: 13px; }
#st-root .result-box { word-break: break-word; }

/* status pills — text always present */
#st-root .st2-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
#st-root .st2-pill-ok { background: rgba(29,171,85,.1); color: #137A3C; border-color: rgba(29,171,85,.25); }
#st-root .st2-pill-warn { background: rgba(232,134,46,.12); color: #A2560F; border-color: rgba(232,134,46,.3); }
#st-root .st2-pill-off { background: rgba(19,36,32,.05); color: var(--ink-2); border-color: var(--line); }
#st-root .st2-pill-info { background: rgba(59,125,216,.09); color: #2B63B5; border-color: rgba(59,125,216,.22); }
#st-root .st2-pill-live { background: rgba(214,69,69,.1); color: #A22; border-color: rgba(214,69,69,.3); }

/* overview tiles */
#st-root .st2-overview .st2-card-h { margin-bottom: 12px; }
#st-root .st2-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
#st-root .st2-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#st-root .st2-tile { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; background: #FCFBF8; }
#st-root .st2-tile > div { display: grid; gap: 5px; min-width: 0; justify-items: start; }
#st-root .st2-tile b { font-size: 13px; }
#st-root .st2-tile small { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; overflow-wrap: anywhere; }
#st-root .st2-tile-num { font-size: 20px; font-weight: 700; line-height: 1.1; }
#st-root .st2-tile-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; }
#st-root .st2-c-blue { background: rgba(59,125,216,.1); color: #2B63B5; }
#st-root .st2-c-green { background: rgba(29,171,85,.1); color: #15803D; }
#st-root .st2-c-ink { background: rgba(19,36,32,.06); color: var(--forest-2); }
#st-root .st2-c-amber { background: rgba(232,134,46,.12); color: #C9651A; }

/* progressive disclosure */
#st-root details.st2-adv { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: #FCFBF8; }
#st-root details.st2-adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); border-radius: 12px; }
#st-root details.st2-adv > summary::-webkit-details-marker, #st-root details.st2-adv-card > summary::-webkit-details-marker { display: none; }
#st-root details.st2-adv > summary::after, #st-root details.st2-adv-card > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; flex: none; }
#st-root details[open].st2-adv > summary::after, #st-root details[open].st2-adv-card > summary::after { transform: rotate(-135deg); }
#st-root details.st2-adv > summary .muted { font-weight: 400; font-size: 12.5px; }
#st-root details.st2-adv > summary:focus-visible, #st-root details.st2-adv-card > summary:focus-visible { outline: 2px solid rgba(232,134,46,.6); }
#st-root .st2-adv-body { padding: 4px 14px 14px; }
#st-root details.st2-adv-card { padding: 0; }
#st-root details.st2-adv-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 22px; }
#st-root details.st2-adv-card > summary > .st2-i { flex: none; color: var(--forest-2); }
#st-root details.st2-adv-card > summary span { display: grid; gap: 2px; }
#st-root details.st2-adv-card > summary b { font-size: 15.5px; }
#st-root details.st2-adv-card > summary small { font-size: 13px; color: var(--ink-3); }
#st-root details.st2-adv-card > .st2-adv-body { padding: 4px 22px 20px; margin: 0; }
#st-root details.snippet pre { margin: 0 14px 14px; white-space: pre-wrap; word-break: break-all; font-size: 12px; background: rgba(19,36,32,.05); border-radius: 10px; padding: 12px; }

/* callouts, danger zone, secrets */
#st-root .st2-callout { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; margin: 10px 0 12px; }
#st-root .st2-callout > .st2-i { flex: none; margin-top: 1px; }
#st-root .st2-callout-info { background: rgba(59,125,216,.07); border: 1px solid rgba(59,125,216,.2); color: #24466F; }
#st-root .st2-callout-info > .st2-i { color: var(--blue); }
#st-root .st2-callout-warn { background: rgba(232,134,46,.08); border: 1px solid rgba(232,134,46,.3); color: #7A4210; }
#st-root .st2-callout-warn > .st2-i { color: #C9651A; }
#st-root .st2-btn-warn { border-color: rgba(232,134,46,.45); color: #A2560F; }
#st-root .st2-btn-warn:hover { background: rgba(232,134,46,.08); }
#st-root .st2-copy-field { display: flex; gap: 6px; align-items: stretch; min-width: 0; }
#st-root .st2-copy-field input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
#st-root .st2-copy-field .btn { flex: none; }
#st-root .st2-mask { -webkit-text-security: disc; text-security: disc; }
#st-root textarea.st2-mask, #st-root textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
#st-root .st2-linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--blue); cursor: pointer; text-decoration: underline; }
#st-root .st2-toggle-row { align-items: flex-start; font-weight: 600; }
#st-root .st2-toggle-row input { width: auto; margin-top: 3px; }
#st-root .st2-toggle-row span { display: grid; gap: 2px; color: var(--ink); }
#st-root .st2-toggle-row small { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }

/* WhatsApp */
#st-root .st2-mode-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; margin-bottom: var(--st-gap); font-size: 14px; }
#st-root .st2-mode-banner.is-sim { background: rgba(59,125,216,.07); border: 1px solid rgba(59,125,216,.25); color: #24466F; }
#st-root .st2-mode-banner.is-live { background: rgba(214,69,69,.07); border: 1px solid rgba(214,69,69,.35); color: #8A1F1F; }
#st-root .st2-mode-banner > .st2-i { flex: none; }
#st-root .st2-action-list { display: grid; gap: 8px; }
#st-root .st2-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; }
#st-root .st2-action > div { display: grid; gap: 2px; min-width: 0; }
#st-root .st2-action b { font-size: 13.5px; }
#st-root .st2-action small { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
#st-root .st2-action .btn { flex: none; }
#st-root .st2-action-warn { border-color: rgba(232,134,46,.35); background: rgba(232,134,46,.04); }

/* Demo reminders */
#st-root .st2-rem-list { display: grid; gap: 10px; margin-bottom: 8px; }
#st-root .st2-rem-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
#st-root .st2-rem-when { display: grid; gap: 2px; grid-row: span 2; }
#st-root .st2-rem-when b { font-size: 14px; }
#st-root .st2-rem-when small { font-size: 12.5px; color: var(--ink-3); }
#st-root .st2-rem-sel { margin: 0; font-size: 12px; }
#st-root .st2-rem-state { min-height: 22px; }
#st-root .st2-preview { display: grid; gap: 14px; padding: 16px; border-radius: 12px; background: #EFE9DF; }
#st-root .st2-bubble { background: #DCF7C5; border-radius: 12px 12px 12px 4px; padding: 11px 14px; font-size: 14px; line-height: 1.5; color: #1D2B26; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.06); max-width: 92%; }
#st-root .st2-bubble.is-empty { background: #fff; color: var(--ink-3); font-style: italic; }

/* Notifications */
#st-root .st2-pref-list { display: grid; gap: 8px; margin: 4px 0 8px; }
#st-root .st2-pref { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; margin: 0; font-weight: 600; }
#st-root .st2-pref input { width: auto; }
#st-root .st2-pref > span:not(.st2-pill) { display: grid; gap: 2px; color: var(--ink); }
#st-root .st2-pref small { font-weight: 400; font-size: 12.5px; color: var(--ink-3); }
#st-root .st2-steps { padding-left: 20px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* General */
#st-root .st2-version-box { background: #FCFBF8; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
#st-root .st2-version-num { font-size: 30px; font-weight: 700; line-height: 1.1; margin-bottom: 8px; }
#st-root .st2-card-tips { background: #FFF9F0; border-color: rgba(232,134,46,.25); }
#st-root .st2-card-tips .st2-card-ic { background: rgba(232,134,46,.14); color: #C9651A; }
#st-root .st2-tips { list-style: none; display: grid; gap: 10px; counter-reset: tip; }
#st-root .st2-tips li { counter-increment: tip; position: relative; padding-left: 30px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
#st-root .st2-tips li::before { content: counter(tip); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--saffron); color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
#st-root .st2-tips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
#st-root .st2-table-wrap { overflow-x: auto; margin-top: 8px; }
#st-root .st2-table-wrap .mini-table { width: 100%; }
#st-root .st2-table-wrap .mini-table input:not([type="checkbox"]) { min-width: 160px; max-width: 360px; }
#st-root .st2-table-wrap .mini-table td:first-child { display: flex; align-items: center; gap: 8px; }
#st-root .st2-table-wrap .mini-table td:first-child .chip { flex: none; }
#st-root .st2-add-row { margin-top: 12px; }
#st-root .st2-add-row input { flex: 1; min-width: 180px; max-width: 320px; }

/* Import / Export */
#st-root .st2-dropzone { border: 2px dashed rgba(59,125,216,.35); background: rgba(59,125,216,.03); border-radius: 12px; padding: 26px 16px; }
#st-root .st2-dropzone .dz-icon { color: var(--blue); }

/* responsive */
@media (max-width: 1500px) {
	#st-root .st2-tiles:not(.st2-tiles-4) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#st-root .st2-tab small { display: none; }
	#st-root .st2-tab { padding: 10px 8px; gap: 7px; justify-content: center; }
	#st-root .st2-tab .st2-i { width: 18px; height: 18px; }
	#st-root .st2-tab b { font-size: 13px; }
}
@media (max-width: 1400px) and (min-width: 1301px) {
	#st-root .st2-tab .st2-i { display: none; }
}
@media (max-width: 1300px) {
	#st-root .st2-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#st-root .st2-tab small { display: block; }
	#st-root .st2-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#st-root .st2-hero { grid-template-columns: auto minmax(0, 1fr); }
	#st-root .st2-hero-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#st-root .st2-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
	#st-root .st2-grid, #st-root .st2-grid-wide { grid-template-columns: minmax(0, 1fr); }
	#st-root .st2-tiles:not(.st2-tiles-4) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	#st-root .st2-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#st-root .st2-grid-3, #st-root .st2-tips-2, #st-root .st2-form-grid, #st-root .st2-form-grid-3, #st-root .st2-tiles, #st-root .st2-tiles-4 { grid-template-columns: minmax(0, 1fr); }
	#st-root .st2-hero { grid-template-columns: minmax(0, 1fr); }
	#st-root .st2-hero-ico { display: none; }
	#st-root .st2-hero-facts { grid-template-columns: minmax(0, 1fr); }
	#st-root .st2-rem-row { grid-template-columns: minmax(0, 1fr); }
	#st-root .st2-pref { grid-template-columns: auto minmax(0, 1fr); }
	#st-root .st2-pref .st2-pill { grid-column: 2; justify-self: start; }
	#st-root .st2-card-h { flex-wrap: wrap; }
}

/* v1.36.8 — mark-read icon (list row + thread header) and workflow name in the automation banner */
#convo-root .cv-snippet-row { align-items: center; }
#convo-root .cv-mark-read { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-left: 6px; border-radius: 50%; color: var(--muted, #6b7280); border: 1px solid transparent; cursor: pointer; }
#convo-root .cv-mark-read:hover, #convo-root .cv-mark-read:focus-visible { color: #1f7a45; background: rgba(31,122,69,.1); border-color: rgba(31,122,69,.3); outline: none; }
#convo-root .cv-read-btn { display: inline-flex; align-items: center; gap: 6px; }
#convo-root .cv-read-btn.is-unread { color: #1f7a45; border-color: rgba(31,122,69,.35); }
#convo-root .cv-auto-wf { font-weight: 800; }

/* v1.36.9 — editable activity notes + draggable stage order */
.tl-edit { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 0 4px; border-radius: 6px; font-size: 13px; opacity: .55; }
.tl-item:hover .tl-edit, .tl-edit:focus-visible { opacity: 1; color: var(--ink); }
.tl-edit-box { display: block; margin-top: 4px; }
.tl-edit-ta { width: 100%; min-height: 70px; resize: vertical; line-height: 1.5; }
.tl-edit-btns { display: block; margin-top: 6px; }
.st-drag-cell { white-space: nowrap; width: 1%; }
.st-handle { cursor: grab; color: var(--ink-3); padding: 0 6px; letter-spacing: -2px; user-select: none; }
.st-mv { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 10px; padding: 2px 3px; }
.st-mv:hover { color: var(--ink); }
tr.st-dragging { opacity: .45; background: rgba(232,134,46,.08); }

/* v1.36.10 — the note text/editor takes the whole remaining row width (was shrink-wrapped to ~1 word) */
.tl-item .tl-body { flex: 1 1 auto; min-width: 0; }
.tl-item .tl-edit-box { display: block; width: 100%; }
.tl-item .tl-edit-ta { display: block; width: 100%; box-sizing: border-box; min-height: 120px; font: inherit; }