/* ══════════════════════════════════════════════════════════════
   crm.css — the rebuilt CRM (2026-10-02), on the Freshsales layout
   John showed: white cards on a pale grey page, blue links, a navy
   primary button, chevron status bars, a slide-over record page.
   Works in both themes: the light theme is the Freshsales look, the
   dark theme is the same layout in the app's own dark colours.
   ══════════════════════════════════════════════════════════════ */

.cx {
  --cx-page: var(--bg); --cx-card: var(--panel); --cx-card2: var(--panel-2); --cx-line: var(--line);
  --cx-ink: var(--ink); --cx-ink2: var(--ink-2); --cx-faint: var(--ink-3);
  --cx-blue: #6fa3f5; --cx-blue-bg: rgba(74,144,217,.16); --cx-navy: var(--accent); --cx-navy-ink: #fff;
  --cx-chip: rgba(255,255,255,.07); --cx-amber: #e0a43c; --cx-red: #e06a68; --cx-green: #4cbf75;
  --cx-note: rgba(224,164,60,.12); --cx-stale: rgba(224,106,104,.10); --cx-shadow: 0 10px 40px rgba(0,0,0,.45);
  color: var(--cx-ink);
}
html[data-theme="light"] .cx {
  --cx-page: #ebeff3; --cx-card: #ffffff; --cx-card2: #f5f7f9; --cx-line: #dfe5eb;
  --cx-ink: #12344d; --cx-ink2: #475867; --cx-faint: #92a2b1;
  --cx-blue: #2c5cc5; --cx-blue-bg: #e5f2fd; --cx-navy: #12344d; --cx-navy-ink: #fff;
  --cx-chip: #ebeff3; --cx-amber: #e5a00d; --cx-red: #d72d30; --cx-green: #00a886;
  --cx-note: #fef5e0; --cx-stale: #ffecf0; --cx-shadow: 0 10px 40px rgba(18,52,77,.22);
}

.cx .cxi { flex: none; vertical-align: -3px; }
.cx .dim { color: var(--cx-faint); }
.cx .mono { font-family: var(--mono); font-size: 12px; }
.cx-grow { flex: 1 1 auto; }

/* ── page frame ─────────────────────────────────────────────── */
.cx-page { margin: -4px -6px 0; }
.cx-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cx-top h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.cx-views { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--cx-line); }
.cx-vtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cx-vtab { background: none; border: 0; border-radius: 8px 8px 0 0; padding: 10px 14px; color: var(--cx-ink2);
  font-weight: 500; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cx-vtab:hover { color: var(--cx-ink); }
.cx-vtab.on { background: var(--cx-card); color: var(--cx-ink); font-weight: 600; box-shadow: 0 -1px 0 var(--cx-line) inset; border: 1px solid var(--cx-line); border-bottom-color: var(--cx-card); margin-bottom: -1px; }
.cx-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 19px; padding: 0 7px;
  border-radius: 10px; background: #5c7ea0; color: #fff; font-size: 11.5px; font-weight: 600; }
.cx-badge.money { background: var(--cx-blue); }
.cx-vright { display: flex; gap: 8px; align-items: center; padding-bottom: 8px; flex-wrap: wrap; }

.cx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--cx-line); background: var(--cx-card); color: var(--cx-ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.cx-btn:hover { border-color: var(--cx-faint); }
.cx-btn:disabled, .cx-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.cx-btn.primary { background: var(--cx-navy); border-color: var(--cx-navy); color: var(--cx-navy-ink); }
.cx-btn.primary:hover { filter: brightness(1.1); }
.cx-btn.ghost { background: none; border-color: transparent; box-shadow: none; font-weight: 500; }
.cx-btn.ghost:hover { background: var(--cx-card2); }
.cx-btn.ghost.on { background: var(--cx-blue-bg); color: var(--cx-blue); }
.cx-btn.static { cursor: default; border: 1px solid var(--cx-line); background: var(--cx-card); font-weight: 500; }
.cx-btn.sm { padding: 4px 9px; font-size: 12px; }
.cx-btn.danger { color: var(--cx-red); }
.cx-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px;
  background: none; border: 0; color: var(--cx-ink2); cursor: pointer; flex: none; }
.cx-ib:hover { background: var(--cx-card2); color: var(--cx-ink); }
.cx-ib:disabled { opacity: .35; cursor: default; }
.cx-linkbtn { background: none; border: 0; padding: 4px 0; color: var(--cx-blue); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.cx-link { color: var(--cx-blue); text-decoration: none; cursor: pointer; }
.cx-link:hover { text-decoration: underline; }
.cx-linkish { color: var(--cx-blue); font-size: 13px; display: inline-flex; gap: 5px; align-items: center; }
.cx-chip { display: inline-block; padding: 2px 7px; border-radius: 4px; background: var(--cx-chip); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cx-chip.mini { font-size: 10.5px; padding: 1px 6px; color: var(--cx-ink2); }
.cx-owner { display: inline-flex; gap: 5px; align-items: center; padding: 2px 7px; border-radius: 4px; background: var(--cx-chip); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.cx-faint { color: var(--cx-faint); cursor: pointer; }
.cx-cta { color: var(--cx-faint); font-size: 13px; }
.cx-over { color: var(--cx-red); font-weight: 600; }
.cx-note { background: var(--cx-note); border: 1px solid var(--cx-line); border-radius: 8px; padding: 9px 12px; font-size: 13px; margin: 10px 0; }

.cx-tools { display: flex; align-items: center; gap: 10px; padding: 10px 0; flex-wrap: wrap; }
.cx-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cx-line); background: var(--cx-card);
  border-radius: 6px; padding: 0 9px; color: var(--cx-faint); margin-left: auto; }
.cx-search input { border: 0 !important; background: none !important; padding: 7px 0 !important; width: 200px; outline: none; color: var(--cx-ink); box-shadow: none !important; }
.cx-search.wide { margin-left: 0; flex: 0 1 460px; } .cx-search.wide input { width: 100%; }
.cx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-blue); display: inline-block; margin-right: -2px; }
.cx-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cx-ink2); }
.cx-inline select { width: auto; padding: 5px 8px; font-size: 13px; font-weight: 600; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 6px; color: var(--cx-ink); }
.cx-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; background: var(--cx-card); border: 1px solid var(--cx-line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.cx-filters .cx-fld { margin: 0; }
.cx-filters select, .cx-filters input { width: auto; min-width: 130px; padding: 5px 8px; font-size: 13px; }

/* ── the table ──────────────────────────────────────────────── */
.cx-tablebox { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px 8px 0 0; overflow: auto;
  max-height: calc(100vh - 250px); min-height: 220px; }
.cx-tablebox.busy { opacity: .6; }
.cx-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13.5px; }
.cx-table th { position: sticky; top: 0; z-index: 2; background: var(--cx-card); border-bottom: 1px solid var(--cx-line);
  border-right: 1px solid var(--cx-line); text-align: left; padding: 0; font-weight: 500; font-size: 12.5px; color: var(--cx-ink); white-space: nowrap; }
.cx-th { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: none; border: 0;
  padding: 10px 12px; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.cx-th:disabled { cursor: default; } .cx-th .cxi { color: var(--cx-ink2); }
.cx-table td { border-bottom: 1px solid var(--cx-line); border-right: 1px solid var(--cx-line); padding: 0 12px; height: 40px;
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; background: var(--cx-card); }
.cx-table tbody tr:hover td { background: var(--cx-card2); }
.cx-table tr.sel td { background: var(--cx-blue-bg); }
.cx-sticky { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--cx-line); }
.cx-table th.cx-sticky { z-index: 3; }
.cx-namecol { min-width: 330px; max-width: 380px; }
.cx-th:first-child { padding-left: 4px; }
th.cx-namecol { display: table-cell; }
th.cx-namecol > input { margin: 0 6px 0 10px; vertical-align: middle; }
th.cx-namecol .cx-th { display: inline-flex; width: calc(100% - 40px); }
.cx-namecell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-namecell input { margin: 0 2px 0 0; }
.cx-nm { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.cx-rowmenu { margin-left: auto; }
.cx-addcol { width: 44px; }
.cx-editable { cursor: pointer; position: relative; }
.cx-editable .cx-pen { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--cx-card);
  border: 1px solid var(--cx-line); border-radius: 5px; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--cx-ink2); cursor: pointer; }
td.cx-editable:hover .cx-pen { display: inline-flex; }
td.cx-editable:hover .cx-cta { color: var(--cx-blue); }
.cx-editing .cx-in, b .cx-in { width: 100%; min-width: 120px; padding: 4px 6px; font-size: 13px; border: 1px solid var(--cx-blue); border-radius: 5px; background: var(--cx-card); color: var(--cx-ink); }
.cx-add { background: none; border: 0; color: var(--cx-faint); font-size: 13px; cursor: pointer; padding: 0; }
.cx-add:hover { color: var(--cx-blue); }
.cx-next { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--cx-ink); }
.cx-next .t { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.cx-next .w { color: var(--cx-faint); font-size: 12px; }
.cx-next.over { color: var(--cx-red); } .cx-next.over .w { color: var(--cx-red); }
.cx-scorecell { font-weight: 600; }
.cx-stack { display: inline-flex; align-items: center; }
.cx-stack > * { margin-left: -6px; cursor: pointer; } .cx-stack > *:first-child { margin-left: 0; }
.cx-stack .cx-av { box-shadow: 0 0 0 2px var(--cx-card); }
.cx-table.plain { width: 100%; }
.cx-table.plain th { position: static; background: var(--cx-card2); padding: 9px 12px; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; font-weight: 700; border-right: 0; }
.cx-table.plain td { border-right: 0; }
.cx-table td.trunc { max-width: 180px; }
.cx-table td.nowrap { white-space: nowrap; }
.cx-scrollx { overflow-x: auto; }

.cx-pager { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--cx-card); border: 1px solid var(--cx-line);
  border-top: 0; border-radius: 0 0 8px 8px; font-size: 13px; flex-wrap: wrap; }
.cx-pages { display: inline-flex; align-items: center; gap: 4px; border-left: 1px solid var(--cx-line); padding-left: 14px; flex-wrap: wrap; }
.cx-pg { min-width: 26px; height: 26px; border-radius: 5px; border: 0; background: none; color: var(--cx-ink); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.cx-pg:hover { background: var(--cx-card2); }
.cx-pg.on { background: var(--cx-blue); color: #fff; font-weight: 600; }
.cx-pg:disabled { opacity: .35; cursor: default; }
.cx-pg.dots { cursor: default; color: var(--cx-faint); }
.cx-pager select { width: auto; margin-left: auto; padding: 4px 8px; font-size: 12.5px; }

.cx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  padding: 44px 20px; color: var(--cx-ink2); font-size: 13.5px; }
.cx-empty b { color: var(--cx-ink); font-size: 14.5px; }
.cx-bigicon { width: 74px; height: 74px; border-radius: 22px; background: var(--cx-card2); display: inline-flex; align-items: center; justify-content: center; color: var(--cx-faint); margin-bottom: 6px; }

/* ── avatars ────────────────────────────────────────────────── */
.cx-av { --s: 32px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--s) * .42); font-weight: 500; position: relative; user-select: none; }
.cx-av.av0 { background: #fde1e1; color: #e2767c; } .cx-av.av1 { background: #dfeefe; color: #4f8fe0; }
.cx-av.av2 { background: #d8f5ea; color: #38b48b; } .cx-av.av3 { background: #fdf3c9; color: #c9a227; }
.cx-av.av4 { background: #efe3fb; color: #a06cd5; } .cx-av.av5 { background: #d3f3f6; color: #2fa7b6; }
.cx-av.av6 { background: #fbe0ef; color: #d46ba4; } .cx-av.av7 { background: #e5e5fb; color: #7a7ad8; }
.cx-av.more { background: var(--cx-blue-bg); color: var(--cx-blue); font-size: 11px; font-weight: 600; }
.cx-av.big { font-size: 22px; }
.cx-score { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--cx-navy); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; box-shadow: 0 0 0 2px var(--cx-card); }

/* ── status pills ───────────────────────────────────────────── */
.cx-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 2px 8px; border-radius: 10px;
  background: var(--cx-blue-bg); color: var(--cx-blue); }
.cx-status[data-step="0"] { background: var(--cx-chip); color: var(--cx-ink2); }
.cx-status[data-step="5"] { background: rgba(0,168,134,.14); color: var(--cx-green); }
.cx-status.bad { background: rgba(215,45,48,.1); color: var(--cx-red); }
.cx-dstage { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--cx-blue-bg); color: var(--cx-blue); }
.cx-dstage.s-won { background: rgba(0,168,134,.14); color: var(--cx-green); }
.cx-dstage.s-lost { background: rgba(215,45,48,.1); color: var(--cx-red); }

/* ── menus and modals ───────────────────────────────────────── */
.cx-menu { position: fixed; z-index: 400; min-width: 190px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 5px; display: flex; flex-direction: column; }
.cx-menu button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 5px; color: var(--ink); cursor: pointer; font-size: 13px; }
.cx-menu button:hover { background: var(--panel-2); }
.cx-menu button.danger { color: var(--crit); }
.cx-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.cx-modal-wrap { position: fixed; inset: 0; z-index: 350; background: rgba(10,16,24,.5); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; overflow: auto; }
.cx-modal { width: min(520px, 100%); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.cx-modal.wide { width: min(720px, 100%); }
.cx-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.cx-modal-head .cx-ib { color: var(--ink-2); }
.cx-modal-body { padding: 16px 18px; }
.cx-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.cx-modal .cx-btn { background: var(--panel); border-color: var(--line); color: var(--ink); }
.cx-modal .cx-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cx-fld { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); flex: 1 1 0; min-width: 0; }
.cx-fld > span { font-weight: 500; }
.cx-fld input, .cx-fld select, .cx-fld textarea { width: 100%; font-size: 13.5px; }
.cx-row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.cx-row2 > * { flex: 1 1 200px; }
.cx-pick { position: relative; }
.cx-pick-menu { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 3px); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-height: 240px; overflow: auto; }
.cx-pick-menu button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: none; border: 0; padding: 7px 10px; text-align: left; color: var(--ink); cursor: pointer; }
.cx-pick-menu button:hover { background: var(--panel-2); }
.cx-pick-menu button span { font-size: 11.5px; color: var(--ink-3); }
.cx-colpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: 13px; }
.cx-colpick label { display: flex; gap: 7px; align-items: center; }

/* ── the record slide-over ──────────────────────────────────── */
.cx-dr-wrap { position: fixed; inset: 0; z-index: 300; background: rgba(10,16,24,.45); display: flex; justify-content: flex-end; }
.cx-dr { width: min(1340px, calc(100% - 300px)); min-width: min(100%, 760px); height: 100%; background: var(--cx-page); display: flex; flex-direction: column;
  box-shadow: var(--cx-shadow); animation: cxIn .18s ease-out; }
.cx-dr-wrap.full .cx-dr { width: 100%; }
@keyframes cxIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.cx-dr-x { position: absolute; top: 0; right: min(1340px, calc(100% - 300px)); width: 38px; height: 34px; border: 0; background: var(--cx-navy); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0 0 0 6px; }
.cx-dr-wrap.full .cx-dr-x { display: none; }
.cx-dr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 20px 8px; background: var(--cx-card); }
.cx-dr-id { display: flex; gap: 16px; align-items: center; min-width: 0; }
.cx-dr-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-dr-name h2 { margin: 0; font-size: 18px; font-weight: 600; }
.cx-dr-sub { color: var(--cx-ink2); font-size: 13px; margin-top: 4px; }
.cx-soc { width: 17px; height: 17px; border-radius: 50%; background: var(--cx-chip); color: var(--cx-faint); display: inline-flex; align-items: center; justify-content: center; }
.cx-soc.on { background: var(--cx-blue); color: #fff; }
.cx-dr-nav { display: flex; gap: 8px; align-items: center; flex: none; }
.cx-seg { display: inline-flex; border: 1px solid var(--cx-line); border-radius: 6px; overflow: hidden; background: var(--cx-card2); }
.cx-seg .cx-ib { border-radius: 0; } .cx-seg .cx-ib + .cx-ib { border-left: 1px solid var(--cx-line); }
.cx-dr-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 20px 14px; background: var(--cx-card); border-bottom: 1px solid var(--cx-line); }
.cx-split { display: inline-flex; } .cx-split .cx-btn:first-child { border-radius: 6px 0 0 6px; }
.cx-split .cx-btn:last-child { border-radius: 0 6px 6px 0; border-left: 0; padding: 7px 8px; }
.cx-dr-body { flex: 1; display: flex; min-height: 0; position: relative; }
.cx-rail { width: 58px; flex: none; background: var(--cx-card2); border-right: 1px solid var(--cx-line); padding: 12px 8px; display: flex; flex-direction: column; gap: 4px;
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; overflow: hidden; transition: width .15s ease, box-shadow .15s ease; }
.cx-rail:hover { width: 280px; box-shadow: 8px 0 24px rgba(0,0,0,.12); }
.cx-rail button { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 11px; border: 0; background: none; border-radius: 6px; color: var(--cx-ink2); cursor: pointer; white-space: nowrap; font-size: 13.5px; position: relative; }
.cx-rail button span { opacity: 0; transition: opacity .1s; }
.cx-rail:hover button span { opacity: 1; }
.cx-rail button:hover { background: var(--cx-card); color: var(--cx-ink); }
.cx-rail button.on { background: var(--cx-card); color: var(--cx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.cx-rail button.on::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--cx-blue); }
.cx-rail button:nth-child(8) .cxi { color: var(--cx-blue); }
.cx-dr-main { flex: 1; overflow: auto; margin-left: 58px; padding: 12px 16px 30px; }
.cx-pane { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 10px; min-height: calc(100% - 4px); }
.cx-pane-h { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--cx-line); gap: 10px; flex-wrap: wrap; }
.cx-pane-h h3 { margin: 0; font-size: 17px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--cx-ink); }
.cx h1, .cx h2, .cx h3 { text-transform: none; letter-spacing: normal; }

/* overview */
.cx-ov { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.cx-ov-main { border-right: 1px solid var(--cx-line); min-width: 0; }
.cx-ov-side { padding: 18px; }
.cx-ov-sec { padding: 18px 20px; border-bottom: 1px solid var(--cx-line); }
.cx-ov-sec:last-child { border-bottom: 0; }
.cx-sticky-note { width: 100%; min-height: 72px; background: var(--cx-note) !important; border: 1px solid transparent !important; border-radius: 6px; padding: 10px 12px;
  font: 13.5px/1.5 var(--font); color: var(--cx-ink); resize: vertical; transition: min-height .15s; }
.cx-sticky-note.on { min-height: 130px; border-color: var(--cx-amber) !important; }
.cx-qn-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.cx-lastnote { margin-top: 14px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; border-left: 3px solid var(--cx-amber); padding-left: 10px; }
.cx-summary { margin: 18px 20px; border-radius: 10px; background: var(--cx-blue-bg); }
.cx-sum-head { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 17px 18px; color: var(--cx-ink); cursor: pointer; font-size: 15px; text-align: left; }
.cx-sum-head .cxi:first-child { color: var(--cx-blue); }
.cx-summary.open .cx-sum-head > .cxi:last-child { transform: rotate(180deg); }
.cx-sum-body { padding: 0 18px 16px; font-size: 13.5px; line-height: 1.6; }
.cx-sum-body p { margin: 0 0 10px; }
.cx-sum-next ul { margin: 4px 0 12px; padding-left: 18px; }
.cx-kvgrid, .cx-dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.cx-dgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cx-kv { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13.5px; }
.cx-kv > span { color: var(--cx-ink2); }
.cx-kv > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-height: 20px; }
.cx-kv > b.cx-editable:hover { background: var(--cx-card2); border-radius: 4px; outline: 4px solid var(--cx-card2); }
.cx-kv .cx-cta { font-weight: 600; }
.cx-linkbtn[data-showall] { margin-top: 16px; }
.cx-blocks { display: flex; flex-direction: column; gap: 16px; }
.cx-block { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; }
.cx-block > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.cx-block.wide > div { padding: 0; }
.cx-bi { width: 40px; min-height: 70px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cx-bi.green { background: rgba(0,168,134,.12); color: var(--cx-green); } .cx-bi.blue { background: var(--cx-blue-bg); color: var(--cx-blue); }
.cx-bi.purple { background: rgba(160,108,213,.14); color: #a06cd5; } .cx-bi.amber { background: var(--cx-note); color: var(--cx-amber); }
.cx-bline { font-size: 13px; }
.cx-bperson { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.cx-quote { white-space: pre-wrap; background: var(--cx-card2); border-radius: 6px; padding: 9px 11px; font-size: 13px; line-height: 1.55; max-height: 200px; overflow: auto; }
.cx-lifebar { padding: 18px 20px 4px; display: grid; grid-template-columns: 110px 1fr; gap: 10px 14px; align-items: center; }
.cx-lb-label { font-size: 12.5px; color: var(--cx-ink2); }
.cx-chev { display: flex; min-width: 0; }
.cx-chev button { flex: 1 1 0; min-width: 0; position: relative; height: 32px; border: 0; background: var(--cx-chip); color: var(--cx-ink2); font-size: 12.5px; font-weight: 600;
  cursor: pointer; padding: 0 8px 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); margin-right: -8px; }
.cx-chev button:first-child { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: 5px 0 0 5px; padding-left: 10px; }
.cx-chev button:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 5px 5px 0; margin-right: 0; }
.cx-chev button:hover:not(:disabled) { filter: brightness(.95); color: var(--cx-ink); }
.cx-chev button.past { background: rgba(0,168,134,.18); color: var(--cx-green); }
.cx-chev button.now { background: var(--cx-green); color: #fff; }
.cx-chev button.now.bad { background: var(--cx-red); }
.cx-chev button:disabled { cursor: default; }

/* details */
.cx-pills { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px 0; }
.cx-pills button { border: 1px solid var(--cx-line); background: var(--cx-card); color: var(--cx-ink); border-radius: 18px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
.cx-pills button.on { background: var(--cx-blue-bg); border-color: var(--cx-blue); color: var(--cx-blue); font-weight: 600; }
.cx-dtools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
.cx-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.cx-toggle input { display: none; }
.cx-toggle span { width: 32px; height: 18px; border-radius: 10px; background: var(--cx-line); position: relative; transition: background .15s; }
.cx-toggle span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cx-toggle input:checked + span { background: var(--cx-blue); }
.cx-toggle input:checked + span::after { transform: translateX(14px); }
.cx-dsec-h { background: var(--cx-card2); padding: 12px 20px; font-weight: 600; border-top: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); font-size: 14px; }
.cx-dsec .cx-dgrid { padding: 20px 20px 24px 110px; }

/* tabs, lists, activities */
.cx-tabs { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--cx-line); }
.cx-tabs button { background: none; border: 0; padding: 14px 0 12px; font-size: 13.5px; color: var(--cx-ink); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; }
.cx-tabs button.on { color: var(--cx-blue); border-bottom-color: var(--cx-blue); font-weight: 600; }
.cx-list { display: flex; flex-direction: column; }
.cx-li { display: grid; grid-template-columns: 40px minmax(180px, 330px) minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--cx-line); }
.cx-li.cx-mail { cursor: pointer; } .cx-li.cx-mail:hover { background: var(--cx-card2); }
.cx-li-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.cx-li-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cx-li-main .dim { font-size: 12px; }
.cx-li-text { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-li-text b { font-weight: 500; }
.cx-li.slim { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cx-line); font-size: 13px; align-items: center; flex-wrap: wrap; }
.cx-thread { padding: 6px 20px 16px 74px; background: var(--cx-card2); border-bottom: 1px solid var(--cx-line); }
.cx-msg { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; padding: 10px 13px; margin-top: 10px; font-size: 13px; }
.cx-msg.in { border-left: 3px solid var(--cx-blue); } .cx-msg.out { border-left: 3px solid var(--cx-green); }
.cx-msg-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cx-msg-subj { font-weight: 600; margin-bottom: 4px; }
.cx-msg-text { white-space: pre-wrap; line-height: 1.55; margin-top: 4px; }
.cx-replybox { margin-top: 12px; }
.cx-replybox textarea { width: 100%; font: 13.5px/1.5 var(--font); }
.cx-row-end { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.cx-row-center { display: flex; justify-content: center; padding: 14px; }
.cx-acts { padding: 6px 20px 20px; }
.cx-afilters { display: flex; gap: 10px; padding: 12px 0; flex-wrap: wrap; }
.cx-afilters select { width: auto; padding: 4px 8px; font-size: 13px; color: var(--cx-blue); font-weight: 600; border: 0; background: none; }
.cx-aday { font-weight: 600; font-size: 13px; margin: 18px 0 8px; color: var(--cx-ink); }
.cx-acard { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--cx-line); border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; background: var(--cx-card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cx-acard.done { opacity: .6; } .cx-acard.done .cx-atitle b { text-decoration: line-through; }
.cx-acard > input { margin-top: 3px; }
.cx-aic { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--cx-chip); color: var(--cx-ink2); }
.cx-aic.k-email { background: var(--cx-blue-bg); color: var(--cx-blue); } .cx-aic.k-note { background: var(--cx-note); color: var(--cx-amber); }
.cx-aic.k-meeting { background: rgba(160,108,213,.14); color: #a06cd5; } .cx-aic.k-deal { background: rgba(0,168,134,.12); color: var(--cx-green); }
.cx-aic.k-task { background: rgba(38,166,184,.13); color: #26a6b8; }
.cx-amain { flex: 1; min-width: 0; }
.cx-atitle { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.cx-atitle b { font-weight: 600; }
.cx-atitle .dim { font-size: 12px; }
.cx-abody { font-size: 13px; color: var(--cx-ink2); margin-top: 4px; white-space: pre-wrap; line-height: 1.5; max-height: 160px; overflow: hidden; }

/* ai + files */
.cx-ai { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cx-ai-card { background: var(--cx-blue-bg); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.6; }
.cx-ai-card p, .cx-ai-card ul { margin: 6px 0 0; } .cx-ai-card ul { padding-left: 18px; }
.cx-ai-h { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.cx-ai-h .cxi { color: var(--cx-blue); }
.cx-drop { margin: 30px auto; max-width: 560px; border: 2px dashed var(--cx-line); border-radius: 14px; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cx-drop.slim { margin: 18px 20px; padding: 20px; max-width: none; }
.cx-drop.over { border-color: var(--cx-blue); background: var(--cx-blue-bg); }
.cx-drop .cx-btn { margin-top: 6px; }
.cx-fileart { width: 92px; height: 92px; border-radius: 30px; background: var(--cx-card2); display: inline-flex; align-items: center; justify-content: center; color: var(--cx-faint); }

/* ── deals board ────────────────────────────────────────────── */
.cx-seg2 { display: inline-flex; border: 1px solid var(--cx-line); border-radius: 6px; overflow: hidden; background: var(--cx-card); }
.cx-seg2 button { border: 0; background: none; padding: 6px 11px; font-size: 13px; color: var(--cx-ink2); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.cx-seg2 button.on { background: var(--cx-blue-bg); color: var(--cx-blue); font-weight: 600; }
.cx-board { display: flex; gap: 0; overflow-x: auto; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; min-height: calc(100vh - 250px); }
.cx-col { flex: 0 0 310px; display: flex; flex-direction: column; border-right: 1px solid var(--cx-line); }
.cx-col:last-child { border-right: 0; }
.cx-col-h { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 12px 10px; border-bottom: 1px solid var(--cx-line); background: var(--cx-card); position: sticky; top: 0; }
.cx-colname { display: inline-flex; align-items: center; gap: 8px; background: var(--cx-blue-bg); color: var(--cx-ink); font-weight: 600; font-size: 15px; padding: 3px 10px; border-radius: 14px; }
.cx-colname .cx-badge { background: #5c7ea0; }
.cx-colname.s-won { background: rgba(0,168,134,.14); } .cx-colname.s-won .cx-badge { background: var(--cx-green); }
.cx-colname.s-lost { background: rgba(215,45,48,.1); } .cx-colname.s-lost .cx-badge { background: var(--cx-red); }
.cx-wv { font-size: 12.5px; margin-top: 7px; color: var(--cx-ink2); } .cx-wv b { color: var(--cx-ink); font-weight: 600; font-size: 12px; }
.cx-col-b { flex: 1; background: var(--cx-page); padding: 10px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.cx-col-b.over { background: var(--cx-blue-bg); }
.cx-dcard { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 6px; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.cx-dcard.stale { background: var(--cx-stale); border-color: rgba(215,45,48,.25); }
.cx-dcard.drag { opacity: .5; }
.cx-dname { color: var(--cx-red); font-weight: 500; font-size: 14px; cursor: pointer; text-decoration: none; line-height: 1.35; }
.cx-dcard:not(.stale) .cx-dname { color: var(--cx-blue); }
.cx-damt { display: flex; gap: 8px; align-items: center; font-size: 14.5px; }
.cx-damt b { font-weight: 600; }
.cx-dwho { font-size: 13.5px; }
.cx-dfoot { display: flex; align-items: center; gap: 4px; }
.cx-dnote { background: none; border: 0; color: var(--cx-ink2); font-size: 13px; display: inline-flex; gap: 5px; align-items: center; cursor: pointer; padding: 3px 0; }
.cx-warn { color: var(--cx-amber); display: inline-flex; }
.cx-addcard { border: 0; background: var(--cx-card2); border-radius: 6px; padding: 18px; color: var(--cx-ink); font-weight: 500; font-size: 14px; cursor: pointer; display: flex; gap: 6px; align-items: center; justify-content: center; }
.cx-addcard:hover { background: var(--cx-blue-bg); color: var(--cx-blue); }
html[data-theme="light"] .cx-col-b { background: #ebeff3; } html[data-theme="light"] .cx-addcard { background: #dfe5eb; }

/* ── conversations screen ───────────────────────────────────── */
.cx-convtop { background: var(--cx-card); border-bottom: 1px solid var(--cx-line); padding: 0 18px; border-radius: 8px 8px 0 0; border: 1px solid var(--cx-line); }
.cx-convtab { display: inline-flex; gap: 8px; align-items: center; padding: 16px 30px 14px 10px; color: var(--cx-blue); font-weight: 600; font-size: 15px; border-bottom: 2px solid var(--cx-blue); }
.cx-convwrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); background: var(--cx-card); border: 1px solid var(--cx-line); border-top: 0; border-radius: 0 0 8px 8px; min-height: calc(100vh - 170px); }
.cx-convnav { border-right: 1px solid var(--cx-line); background: var(--cx-card2); padding-bottom: 12px; }
.cx-acc-h { display: flex; gap: 8px; align-items: center; padding: 14px 16px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--cx-line); background: var(--cx-card); }
.cx-convnav button { display: flex; width: calc(100% - 20px); margin: 4px 10px; justify-content: space-between; align-items: center; background: none; border: 0; padding: 9px 12px; border-radius: 6px; text-align: left; font-size: 13.5px; color: var(--cx-ink); cursor: pointer; }
.cx-convnav button:hover { background: var(--cx-card); }
.cx-convnav button.on { background: var(--cx-blue-bg); font-weight: 600; }
.cx-convmain { min-width: 0; display: flex; flex-direction: column; }
.cx-convbar { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--cx-line); flex-wrap: wrap; }
.cx-convbar .cx-search { margin-left: 0; }
.cx-convlist { overflow: auto; }
.cx-convrow { display: grid; grid-template-columns: 20px 40px minmax(180px, 340px) minmax(0, 1fr) 32px; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--cx-line); cursor: pointer; }
.cx-convrow:hover { background: var(--cx-card2); }
.cx-cfrom { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; }
.cx-cfrom b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cfrom .dim { font-size: 12px; }
.cx-csubj { font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-csubj b { font-weight: 500; }
.cx-convthread { padding: 10px 20px 24px; overflow: auto; }

/* ── dashboards ─────────────────────────────────────────────── */
.cx-wgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 14px; }
.cx-wcard { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.cx-wcard.wide, .cx-kpis.wide { grid-column: 1 / -1; }
.cx-wcard-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; gap: 8px; }
.cx-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; position: relative; }
.cx-kpis > .cx-ib { position: absolute; top: 4px; right: 4px; }
.cx-kpi { padding: 14px 16px; border-right: 1px solid var(--cx-line); display: flex; flex-direction: column; gap: 3px; }
.cx-kpi:nth-child(6) { border-right: 0; }
.cx-kpi span { font-size: 12.5px; color: var(--cx-ink2); }
.cx-kpi b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.cx-kpi small { font-size: 11.5px; color: var(--cx-faint); }
.cx-chart { width: 100%; height: auto; display: block; }
.cx-chart .grid { stroke: var(--cx-line); stroke-width: 1; }
.cx-chart .ax { fill: var(--cx-faint); font-size: 11px; font-family: var(--font); }
.cx-chart .vl { fill: var(--cx-ink2); font-size: 10.5px; font-family: var(--font); font-weight: 600; }
.cx-hbars { display: flex; flex-direction: column; gap: 8px; }
.cx-hbar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: 12.5px; }
.cx-hbar .b { height: 14px; background: var(--cx-card2); border-radius: 3px; overflow: hidden; }
.cx-hbar .b i { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.cx-hbar .v { text-align: right; font-weight: 600; }

/* ── call funnel ── */
.cx-fun-days { width: auto; padding: 4px 8px; font-size: 12.5px; font-weight: 600; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 6px; color: var(--cx-ink); }
.cx-fun { display: flex; flex-direction: column; gap: 10px; }
.cx-fun-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 12px; align-items: center; font-size: 13px; }
.cx-fun-row .l { color: var(--cx-ink2); font-weight: 600; }
.cx-fun-row .b { height: 22px; background: var(--cx-card2); border-radius: 4px; overflow: hidden; }
.cx-fun-row .b i { display: block; height: 100%; border-radius: 4px; transition: width .3s; }
.cx-fun-row .v { display: flex; flex-direction: column; line-height: 1.2; }
.cx-fun-row .v b { font-size: 16px; }
.cx-fun-row .v small { font-size: 11.5px; color: var(--cx-faint); }
.cx-fun-who { margin-top: 16px; }
.cx-fun-foot { font-size: 11.5px; margin: 12px 0 0; }
@media (max-width: 700px) { .cx-fun-row { grid-template-columns: 96px minmax(0, 1fr) 92px; gap: 8px; } }
.cx-donut { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.cx-donut .dn { fill: var(--cx-ink); font-size: 19px; font-weight: 700; font-family: var(--font); }
.cx-donut .ax { fill: var(--cx-faint); font-size: 11px; font-family: var(--font); }
.cx-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.cx-legend.row { flex-direction: row; gap: 16px; margin-top: 6px; }
.cx-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.cx-legend b { margin-left: 4px; }

@media (max-width: 1100px) {
  .cx-ov { grid-template-columns: 1fr; } .cx-ov-main { border-right: 0; border-bottom: 1px solid var(--cx-line); }
  .cx-kvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx-kpi:nth-child(3) { border-right: 0; }
  .cx-dsec .cx-dgrid { padding-left: 20px; }
}
@media (max-width: 900px) {
  .cx-dr { width: 100%; min-width: 0; } .cx-dr-x { display: none; }
  .cx-wgrid { grid-template-columns: 1fr; }
  .cx-convwrap { grid-template-columns: 1fr; } .cx-convnav { border-right: 0; border-bottom: 1px solid var(--cx-line); }
  .cx-li, .cx-convrow { grid-template-columns: 40px minmax(0, 1fr) 32px; } .cx-li-text, .cx-csubj { grid-column: 2 / 3; }
  .cx-convrow > input { display: none; }
  .cx-lifebar { grid-template-columns: 1fr; }
  .cx-search { margin-left: 0; } .cx-search input { width: 140px; }
}
@media (max-width: 600px) {
  .cx-kvgrid { grid-template-columns: 1fr; }
  .cx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-dr-head { flex-direction: column; } .cx-namecol { min-width: 220px; }
  .cx-hbar { grid-template-columns: 80px minmax(0, 1fr) 70px; }
}

/* The CRM tables and the deal board use the full width, like the
   screens they copy; the rest of the app keeps its reading width. */
main:has(> #tab-crm:not([hidden])), main:has(> #tab-accounts:not([hidden])),
main:has(> #tab-crmdeals:not([hidden])), main:has(> #tab-crmconv:not([hidden])),
main:has(> #tab-crmdash:not([hidden])) { max-width: none; }

/* ── phone, texts and chat (crm-comms.js) ───────────────────── */
.cx-bubbles { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; max-height: 52vh; overflow-y: auto; background: var(--cx-card2); border-radius: 8px; margin: 12px 0; }
.cx-bubbles.cx-chatlog { margin: 10px 16px; }
.cx-bub { max-width: 72%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.cx-bub span { display: block; font-size: 11px; opacity: .7; margin-top: 4px; }
.cx-bub.in { align-self: flex-start; background: var(--cx-card); border: 1px solid var(--cx-line); border-bottom-left-radius: 4px; }
.cx-bub.out { align-self: flex-end; background: var(--cx-blue); color: #fff; border-bottom-right-radius: 4px; }
.cx-sys { align-self: center; font-size: 12px; color: var(--cx-faint); text-align: center; max-width: 80%; }
.cx-convthread .cx-replybox, .cx-convmain > .cx-replybox { padding: 0 16px 16px; }
.cx-convmain .cx-replybox { padding: 0 16px 16px; }
.cx-aic.k-call { background: rgba(0,168,134,.12); color: var(--cx-green); }
.cx-aic.k-call.miss { background: rgba(215,45,48,.1); color: var(--cx-red); }
.cx-aic.k-sms { background: rgba(124,92,255,.12); color: #7c5cff; }
.cx-audio { width: 100%; max-width: 360px; height: 32px; margin-top: 8px; }
.cx-unread { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cx-blue); }
.cx-convnav button .cx-badge { margin-left: auto; }
.cx-note.good { background: rgba(0,168,134,.1); }
.cx-note.warn { background: rgba(230,160,30,.14); border-color: rgba(230,160,30,.55); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cx-note.warn .cx-grow { flex: 1; }
.cx-settings { padding: 18px 20px; max-width: 760px; }
.cx-settings h3 { margin: 0 0 12px; font-size: 16px; text-transform: none; letter-spacing: 0; }
.cx-setrow { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--cx-line); font-size: 13.5px; }
.cx-setrow .dim { font-size: 12.5px; margin-top: 2px; }
.cx-setrow summary { cursor: pointer; }
.cx-setrow textarea { width: 100%; font: 13.5px/1.5 var(--font); }

/* ── power lists (crm-power.js) ─────────────────────────────── */
.cx-plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.cx-plcard { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cx-plcard-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.cx-plstats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--cx-card2); border-radius: 6px; }
.cx-plstats > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--cx-line); }
.cx-plstats > div:last-child { border-right: 0; }
.cx-plstats b { font-size: 20px; font-weight: 700; }
.cx-plstats span { font-size: 11.5px; color: var(--cx-faint); }
.cx-pldesc { font-size: 13px; line-height: 1.6; }
.cx-plact { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-plact .cx-ib { margin-left: auto; }
.cx-plfilter { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px 0; margin-bottom: 12px; }
.cx-plfilter select[data-seg] { width: auto; display: inline-block; padding: 3px 6px; font-size: 12.5px; }

/* ── enrich, states, icons (2026-10-06) ─────────────────────── */
.cx-steps { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; font-size: 13.5px; }
.cx-steps > div { padding: 7px 12px; border-radius: 6px; background: var(--cx-card2); color: var(--cx-faint); }
.cx-steps > div.past { color: var(--cx-green); background: rgba(0,168,134,.08); }
.cx-steps > div.past::before { content: '✓ '; }
.cx-steps > div.now { color: var(--cx-ink); background: var(--cx-blue-bg); font-weight: 600; }
.cx-states { position: relative; }
.cx-states > summary { list-style: none; cursor: pointer; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--panel); min-width: 130px; }
.cx-states > summary::-webkit-details-marker { display: none; }
.cx-states-pop { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 330px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 10px; }
.cx-states-q { display: flex; gap: 14px; margin-bottom: 6px; }
.cx-states-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px 6px; font-size: 12px; }
.cx-states-grid label { display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.cx-states-grid label.lic { font-weight: 700; color: var(--accent); }
.cx-chip.lic { background: var(--cx-blue-bg); color: var(--cx-blue); }
.cx-av .cx-logo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; padding: 12%; box-shadow: 0 0 0 1px var(--cx-line) inset; }
.cx-acctcell { display: inline-flex; align-items: center; gap: 7px; }

/* ══ 2026-10-07: pick-lists, the filter panel, views, tags, time
   zones, campaigns and the power dialer (crm-plus.js, crm-campaigns.js) ══ */

/* a popover that lives on <body>, so nothing can clip it */
.cx-pop { position: fixed; z-index: 450; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px;
  box-shadow: var(--cx-shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; max-height: min(460px, calc(100vh - 16px)); }
.cx-pop-h { font-weight: 700; font-size: 13px; }
.cx-pop-q, .cx-pop .cx-search { margin: 0; flex: none; }
.cx-pop-quick { display: flex; gap: 14px; flex-wrap: wrap; }
.cx-pop-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cx-pop-tabs button { border: 1px solid var(--cx-line); background: var(--cx-card); color: var(--cx-ink2); border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.cx-pop-tabs button.on { background: var(--cx-blue-bg); border-color: var(--cx-blue); color: var(--cx-blue); font-weight: 600; }
.cx-pop-list { overflow: auto; min-height: 40px; margin: 0 -4px; }
.cx-pop-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; width: 100%;
  background: none; border: 0; color: var(--cx-ink); text-align: left; }
.cx-pop-item:hover { background: var(--cx-card2); }
.cx-pop-item input { margin: 0; flex: none; }
.cx-pop-item .cx-pop-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-pop-item.lic .cx-pop-lbl { font-weight: 700; color: var(--cx-blue); }
.cx-pop-item.make { color: var(--cx-blue); font-weight: 600; }
.cx-pop-item.view { padding: 0 4px 0 0; }
.cx-pop-item.view > button:first-child { flex: 1; background: none; border: 0; color: var(--cx-ink); text-align: left; padding: 7px 8px; cursor: pointer; font-size: 13px; }
.cx-pop-item.view.on > button:first-child { font-weight: 700; color: var(--cx-blue); }
.cx-pop-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--cx-line); padding-top: 8px; font-size: 12px; }
.cx-ib.sm { width: 24px; height: 24px; }
.cx-pickbtn { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; padding: 4px 10px; border: 1px solid var(--cx-line);
  border-radius: 6px; background: var(--cx-card); color: var(--cx-ink); font-size: 13px; cursor: pointer; text-align: left; }
.cx-pickbtn.wide { width: 100%; }

/* the filter panel, docked right of the table as in Freshworks */
.cx-listbody { display: flex; gap: 12px; align-items: stretch; }
.cx-listmain { flex: 1 1 auto; min-width: 0; }
.cx-fpanel { flex: 0 0 320px; display: flex; flex-direction: column; background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px;
  max-height: calc(100vh - 210px); position: sticky; top: 0; }
.cx-fpanel-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--cx-line); }
.cx-fpanel-body { flex: 1 1 auto; overflow: auto; padding: 6px 12px; }
.cx-fpanel-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--cx-line); flex-wrap: wrap; }
.cx-frow { padding: 10px 0; border-bottom: 1px solid var(--cx-line); display: flex; flex-direction: column; gap: 6px; }
.cx-frow:last-child { border-bottom: 0; }
.cx-frow-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.cx-frow select, .cx-frow input:not([type=checkbox]) { width: 100%; padding: 6px 8px; font-size: 13px; }
.cx-fempty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--cx-faint); padding: 40px 10px; font-size: 13px; }
.cx-tzpick { display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 13px; }
.cx-tzpick label { display: flex; gap: 6px; align-items: center; }
.cx-row2.tight { gap: 6px; } .cx-row2.tight > * { flex: 1 1 120px; }
.cx-vtab.more { color: var(--cx-blue); font-weight: 600; }
@media (max-width: 900px) { .cx-listbody { flex-direction: column; } .cx-fpanel { flex-basis: auto; max-height: none; position: static; } }

/* tags */
.cx-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.cx-tag.t-blue { background: rgba(44,92,197,.14); color: #3d74d9; } .cx-tag.t-green { background: rgba(0,168,134,.15); color: #0f9a7c; }
.cx-tag.t-amber { background: rgba(229,160,13,.17); color: #b47c00; } .cx-tag.t-red { background: rgba(215,45,48,.13); color: #d23b3e; }
.cx-tag.t-purple { background: rgba(124,77,255,.14); color: #7a52e0; } .cx-tag.t-teal { background: rgba(0,150,170,.14); color: #078ba0; }
.cx-tag.t-pink { background: rgba(220,60,140,.13); color: #c93f86; } .cx-tag.t-gray { background: var(--cx-chip); color: var(--cx-ink2); }
/* The tag inks above are tuned for white cards; on the dark cards they
   sat too close to the background to read. Lighter inks in dark. */
html:not([data-theme="light"]) .cx-tag.t-blue { color: #8db4f5; } html:not([data-theme="light"]) .cx-tag.t-green { color: #4fd0ae; }
html:not([data-theme="light"]) .cx-tag.t-amber { color: #f0bd4f; } html:not([data-theme="light"]) .cx-tag.t-red { color: #f08a8c; }
html:not([data-theme="light"]) .cx-tag.t-purple { color: #b39af5; } html:not([data-theme="light"]) .cx-tag.t-teal { color: #4cc6d8; }
html:not([data-theme="light"]) .cx-tag.t-pink { color: #ef8fc0; }
.cx-tagcell { display: inline-flex; gap: 4px; flex-wrap: wrap; cursor: pointer; min-height: 20px; }
.cx-dr-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* time zone with the local time */
.cx-tz { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--cx-chip); font-size: 12px; white-space: nowrap; color: var(--cx-ink2); }
.cx-tz.open { background: rgba(0,168,134,.15); color: var(--cx-green); font-weight: 600; }

/* small tables and cards */
.cx-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.cx-mini th { text-align: left; font-weight: 600; color: var(--cx-ink2); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--cx-line); }
.cx-mini td { padding: 7px 8px; border-bottom: 1px solid var(--cx-line); vertical-align: middle; }
.cx-card { background: var(--cx-card); border: 1px solid var(--cx-line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.cx-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cx-card-h .cx-pills { padding: 0; }
.cx-results { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.cx-kv.wide { grid-column: 1 / -1; }
.cx-kv.wide > b { white-space: normal; }

/* campaigns */
.cx-camppick { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow: auto; margin-bottom: 10px; }
.cx-camppick-g { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.cx-camppick-g label { display: flex; gap: 8px; align-items: center; }
.cx-newcamp { border: 1px dashed var(--cx-line); border-radius: 8px; padding: 8px 12px; }
.cx-newcamp summary { cursor: pointer; color: var(--cx-blue); font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.cx-newcamp[open] summary { margin-bottom: 10px; }
.cx-cstat { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; background: var(--cx-chip); }
.cx-cstat.s-active { background: rgba(0,168,134,.15); color: var(--cx-green); }
.cx-cstat.s-paused { background: rgba(229,160,13,.17); color: var(--cx-amber); }
.cx-campgrid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.cx-page > .cx-kpis { margin-top: 10px; }
.cx-kpi.wide { grid-column: span 2; }
@media (max-width: 1000px) { .cx-campgrid { grid-template-columns: 1fr; } }

/* the power dialer */
.cx-dialpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.cx-dialcard { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; color: var(--cx-ink); font-size: 13px; }
.cx-dialcard:hover { border-color: var(--cx-blue); }
.cx-dialcard b { font-size: 15px; }
.cx-dial { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr); gap: 14px; margin-top: 10px; align-items: start; }
@media (max-width: 1200px) { .cx-dial { grid-template-columns: 1fr 1fr; } .cx-dial-hist { grid-column: 1 / -1; } }
@media (max-width: 760px) { .cx-dial { grid-template-columns: 1fr; } }
.cx-dial-name { margin: 0; font-size: 20px; }
.cx-dial-who .cx-kvgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.cx-dial-nums { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.cx-dial-num { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cx-line); border-radius: 8px; flex-wrap: wrap; font-size: 13.5px; }
.cx-dial-num b { font-size: 15px; margin-right: auto; }
.cx-dial-num > .dim { width: 80px; }
.cx-dial-num.bad b { text-decoration: line-through; color: var(--cx-faint); }
.cx-dial-call { display: flex; flex-direction: column; gap: 10px; }
.cx-dial-big { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--cx-green); color: #fff; font-size: 17px; font-weight: 700; }
.cx-dial-big:hover { filter: brightness(1.07); }
.cx-dial-big:disabled { background: var(--cx-faint); cursor: default; }
.cx-dial-state { font-size: 12.5px; }
.cx-dial-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cx-dial-outs .cx-btn { justify-content: center; }
.cx-dial-outs .cx-btn.picked { background: var(--cx-blue-bg); border-color: var(--cx-blue); color: var(--cx-blue); }
.cx-dial-outs .cx-btn.danger.picked { background: rgba(215,45,48,.12); border-color: var(--cx-red); color: var(--cx-red); }
.cx-dial-notes { width: 100%; resize: vertical; font-size: 14px; line-height: 1.45; background: var(--cx-note); border: 1px solid var(--cx-line); border-radius: 8px; padding: 10px; color: var(--cx-ink); }
.cx-dial-hist { max-height: calc(100vh - 180px); overflow: auto; }
.cx-dial-script { margin-top: 12px; border-top: 1px solid var(--cx-line); padding-top: 10px; font-size: 13px; }
.cx-dial-script summary { cursor: pointer; font-weight: 700; margin-bottom: 6px; }
.cx-dial-auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px;
  background: var(--cx-blue-bg); color: var(--cx-blue); font-size: 13px; }
.cx-selbar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; margin-bottom: 8px; border-radius: 8px;
  background: var(--cx-blue-bg); font-size: 13px; }
.cx-key { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-right: 6px; border-radius: 4px;
  background: var(--cx-chip); color: var(--cx-faint); font-size: 10.5px; font-weight: 700; }
/* CRM → Settings tables: full names readable, the wide table scrolls inside its card (client, 2026-10-16). */
.cx-set .cx-wcard { overflow-x: auto; }
.cx-set .cx-table td select { min-width: 160px; }

/* Dashboards → Calls: the "Everyone" line under the salesperson table. */
.cx-table tr.cx-total td { border-top: 2px solid var(--cx-line); }
.cx-dash .cx-vright select, .cx-dash .cx-vright input[type=date] { width: auto; min-width: 0; }

/* Power dialer: why this person is next (2026-10-20). */
.cx-dial-why { margin-top: 6px; font-size: 12.5px; color: var(--cx-ink2); display: flex; gap: 6px; align-items: center; }

/* Calls dashboard: today's leaderboard against daily goals (2026-10-20). */
.cx-leader td { vertical-align: middle; }
.cx-goal { min-width: 110px; }
.cx-goal-top { display: flex; gap: 4px; align-items: baseline; font-size: 13px; }
.cx-goal-bar { height: 6px; border-radius: 3px; background: var(--cx-line); overflow: hidden; margin-top: 4px; }
.cx-goal-bar i { display: block; height: 100%; border-radius: 3px; }

/* CRM → Audit log (2026-10-20). */
.cx-audit-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-audit-bar select, .cx-audit-bar input[type=date] { width: auto; min-width: 0; }
.cx-audit-bar .cx-search { min-width: 260px; }
.cx-audit-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.cx-audit-types .cx-chip { cursor: pointer; border: 1px solid var(--cx-line); background: transparent; }
.cx-audit-types .cx-chip.on { background: var(--cx-blue); color: #fff; border-color: var(--cx-blue); }
.cx-audit-types .cx-chip.on .dim { color: rgba(255,255,255,.8); }
.cx-audit td { vertical-align: top; }
.cx-audit td.nowrap { white-space: nowrap; }
.cx-audit-body { font-size: 12.5px; margin-top: 2px; max-width: 560px; }