.cfcrm{margin:-18px -22px -30px;min-height:calc(100vh - 64px);background:#f4f6f9;color:#172033}
.cfcrm *{box-sizing:border-box}.cfcrm-head{position:sticky;top:0;z-index:12;background:#fff;border-bottom:1px solid #e6e9ef;padding:18px 24px 0}
.cfcrm-title{display:flex;align-items:center;justify-content:space-between;gap:14px}.cfcrm-title h1{font:800 23px/1.1 inherit;margin:0}.cfcrm-title p{margin:5px 0 0;color:#6b7280;font-size:12px}
.cfcrm-actions{display:flex;gap:8px;flex-wrap:wrap}.cfcrm button,.cfcrm select,.cfcrm input{font:inherit}.cfcrm-btn{border:1px solid #dce1e8;background:#fff;border-radius:10px;padding:9px 12px;font-weight:750;color:#263244;cursor:pointer}.cfcrm-btn.primary{background:#e8622a;border-color:#e8622a;color:#fff}.cfcrm-btn:disabled{opacity:.5}
.cfcrm-nav{display:flex;gap:5px;overflow:auto;margin-top:16px}.cfcrm-nav button{white-space:nowrap;border:0;border-bottom:3px solid transparent;background:none;padding:11px 12px;font-weight:750;color:#697386;cursor:pointer}.cfcrm-nav button.on{color:#e8622a;border-color:#e8622a}
.cfcrm-body{padding:20px 24px 36px}.cfcrm-filter{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.cfcrm-filter input,.cfcrm-filter select{border:1px solid #dce1e8;background:#fff;border-radius:10px;padding:9px 11px;min-width:150px}.cfcrm-filter input{min-width:260px;flex:1}
.cfcrm-kpis{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:12px;margin-bottom:16px}.cfcrm-card{background:#fff;border:1px solid #e6e9ef;border-radius:14px;box-shadow:0 8px 24px rgba(17,24,39,.05)}.cfcrm-kpi{padding:15px}.cfcrm-kpi span{display:block;font-size:10px;font-weight:800;color:#7b8494;letter-spacing:.06em}.cfcrm-kpi b{font-size:24px;display:block;margin:7px 0 3px}.cfcrm-kpi small{color:#6b7280}.cfcrm-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:16px}.cfcrm-panel{padding:16px}.cfcrm-panel h3{margin:0 0 4px;font-size:14px}.cfcrm-panel>p{margin:0 0 14px;color:#737d8d;font-size:11px}
.cfcrm-tablewrap{overflow:auto}.cfcrm-table{border-collapse:collapse;width:100%;font-size:12px}.cfcrm-table th{text-align:left;padding:10px;border-bottom:1px solid #e4e8ee;color:#737d8d;font-size:10px;text-transform:uppercase;white-space:nowrap}.cfcrm-table td{padding:11px 10px;border-bottom:1px solid #eef1f4;vertical-align:middle}.cfcrm-table tr:hover td{background:#fffaf7}.cfcrm-name{font-weight:800}.cfcrm-muted{font-size:10px;color:#788292;margin-top:3px}.cfcrm-pill{display:inline-flex;border-radius:999px;background:#f0f2f5;color:#556070;padding:5px 8px;font-size:10px;font-weight:800;white-space:nowrap}.cfcrm-pill.hot,.cfcrm-pill.critical{background:#fdecec;color:#c62828}.cfcrm-pill.warm,.cfcrm-pill.low,.cfcrm-pill.due{background:#fff4df;color:#bd6700}.cfcrm-pill.healthy,.cfcrm-pill.on-call{background:#e8f7ee;color:#148044}.cfcrm-pill.ringing{background:#eaf3ff;color:#2467c8}.cfcrm-pill.wrap-up{background:#f1eaff;color:#7046bd}
.cfcrm-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:12px;
  overflow-x:auto;overflow-y:visible;align-items:start;padding-bottom:10px;scroll-snap-type:x proximity}
.cfcrm-board>.cfcrm-col{scroll-snap-align:start}.cfcrm-col{background:#eef1f5;border-radius:14px;padding:10px;min-height:180px}.cfcrm-colhead{display:flex;justify-content:space-between;padding:5px 4px 10px;font-weight:800}.cfcrm-lead{background:#fff;border:1px solid #e3e7ed;border-radius:12px;padding:12px;margin-bottom:8px;cursor:pointer}.cfcrm-lead:hover{border-color:#e8622a;box-shadow:0 6px 18px rgba(232,98,42,.1)}.cfcrm-leadtop{display:flex;justify-content:space-between;gap:8px}.cfcrm-lead p{font-size:10px;color:#727d8c;margin:5px 0}.cfcrm-leadactions{display:flex;justify-content:space-between;align-items:center;margin-top:9px}.cfcrm-alert{padding:12px;border-left:4px solid #e8622a;background:#fff8f2;border-radius:8px;margin-bottom:8px}.cfcrm-empty{text-align:center;padding:45px;color:#778191}
.cfcrm-desk{display:grid;grid-template-columns:minmax(0,2fr) 320px;gap:16px}.cfcrm-focus{padding:22px;background:linear-gradient(135deg,#fff 30%,#fff3ec);border:1px solid #f1cdbd;border-radius:16px}.cfcrm-focus h2{margin:7px 0}.cfcrm-row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #edf0f3}.cfcrm-danger{background:#fff0f0!important}.cfcrm-warning{background:#fff9e8!important}
.cfcrm-assignbar{position:sticky;top:112px;z-index:9;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:14px;border:1px solid #fed7aa;border-radius:13px;background:#fff7ed;box-shadow:0 9px 24px rgba(154,52,18,.09)}.cfcrm-assignbar>div{min-width:150px;margin-right:auto}.cfcrm-assignbar b{display:block}.cfcrm-assignbar small{display:block;color:#9a5b38;margin-top:2px}.cfcrm-assignbar select{min-width:210px;border:1px solid #e7c3ad;border-radius:9px;background:#fff;padding:9px 11px}.cfcrm-note{margin-bottom:14px;padding:11px 13px;border:1px solid #dbeafe;border-radius:11px;background:#eff6ff;color:#36577d;font-size:12px}.cfcrm-sectionhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.cfcrm-sectionhead p{margin:4px 0 0;color:#737d8d;font-size:11px}.cfcrm-sectionhead>b{padding:6px 9px;border-radius:99px;background:#f1f5f9;color:#475569;white-space:nowrap}.cfcrm-leadmanage th:first-child,.cfcrm-leadmanage td:first-child{width:38px;text-align:center}.cfcrm-leadmanage input[type=checkbox]{width:17px;height:17px;accent-color:#e8622a;cursor:pointer}.cfcrm-notcalled td{background:#fffbeb}.cfcrm-notcalled:hover td{background:#fff7d6!important}.cfcrm-pill.not-called{background:#fff4df;color:#a85a00}.cfcrm-pill.attempted{background:#eef2ff;color:#4f46a5}.cfcrm-pill.connected{background:#e8f7ee;color:#148044}
.cfcrm-livealloc{padding:15px;margin-bottom:14px}.cfcrm-livehead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.cfcrm-livehead h3{margin:0;font-size:14px}.cfcrm-livehead p{margin:4px 0 0;color:#737d8d;font-size:11px}.cfcrm-livegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.cfcrm-liveperson{padding:11px 12px;border:1px solid #e7eaf0;border-radius:11px;background:#fbfcfe}.cfcrm-liveperson-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.cfcrm-livefacts{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px;color:#6b7280;font-size:10px}.cfcrm-livefacts span+span{padding-left:9px;border-left:1px solid #dfe3e8}.cfcrm-pill.available{background:#e8f7ee;color:#148044}.cfcrm-pill.offline{background:#eef1f5;color:#667085}
.cfcrm-lowlead{padding:13px 14px;margin-bottom:14px;border:1px solid #fecaca;border-radius:14px;background:#fff7f7}.cfcrm-lowlead-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;color:#991b1b}.cfcrm-lowlead-title span{font-size:10px;font-weight:800;padding:5px 8px;border-radius:99px;background:#fee2e2}.cfcrm-lowlead>button{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:10px 11px;border:1px solid #f4d2d2;border-radius:10px;background:#fff;text-align:left;color:#253047;cursor:pointer}.cfcrm-lowlead>button+button{margin-top:7px}.cfcrm-lowlead>button:hover{border-color:#e8622a;box-shadow:0 5px 14px rgba(153,27,27,.08)}.cfcrm-lowlead small{display:block;margin-top:3px;color:#7c6670}.cfcrm-lowlead-numbers{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}.cfcrm-lowlead-numbers strong{font-size:18px;color:#b91c1c}.cfcrm-lowlead-numbers>span{font-size:10px;color:#7c6670}
@media(max-width:1000px){.cfcrm-kpis{grid-template-columns:repeat(2,1fr)}.cfcrm-grid,.cfcrm-desk{grid-template-columns:1fr}}
@media(max-width:900px){.cfcrm{margin-top:0}.cfcrm-head{position:static}}
@media(max-width:650px){.cfcrm{margin:0 -12px -12px}.cfcrm-head,.cfcrm-body{padding-left:12px;padding-right:12px}.cfcrm-title{align-items:flex-start}.cfcrm-actions{justify-content:flex-end}.cfcrm-kpis{grid-template-columns:1fr 1fr}.cfcrm-board{grid-auto-columns:minmax(228px,228px)}.cfcrm-filter input{min-width:100%}.cfcrm-table{min-width:680px}.cfcrm-assignbar{top:96px}.cfcrm-assignbar select,.cfcrm-assignbar .cfcrm-btn{width:100%}.cfcrm-sectionhead,.cfcrm-livehead{display:block}.cfcrm-sectionhead>b{display:inline-block;margin-top:8px}.cfcrm-livehead .cfcrm-btn{margin-top:9px;width:100%}.cfcrm-livegrid{grid-template-columns:1fr}.cfcrm-lowlead>button{align-items:flex-start;flex-direction:column}.cfcrm-lowlead-numbers{justify-content:flex-start;white-space:normal}}

/* ---------- Overview cards ----------
   Colours are the ones already in this app — the warm accent (#e8622a) and the soft amber
   used by the existing pills and alerts — rather than a new red/amber scale. A wall of
   bright red reads as an emergency; these read as "look here", which is what they mean. */
.cfcrm-ovgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(188px,1fr));
  gap:11px;
  margin-top:12px;
}
.cfcrm-ov{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 15px;text-align:left;cursor:pointer;
  background:#f0f4ec;
  border:1px solid #e7eaf0;
  border-left:3px solid #dfe4ec;
  border-radius:12px;font:inherit;color:#172033;
  transition:border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.cfcrm-ov:hover{ transform:translateY(-1px); border-color:#e8622a; box-shadow:0 6px 18px rgba(232,98,42,.12); }
.cfcrm-ov:focus-visible{ outline:2px solid #e8622a; outline-offset:2px; }
.cfcrm-ov-label{
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#7b8494;
}
.cfcrm-ov-value{ font-size:25px;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums;margin:5px 0 1px; }
.cfcrm-ov-note{ font-size:11px;color:#737d8d;line-height:1.35; }

/* Client cards sit above the metric cards and carry the app's warm tint, so the section
   reads as the primary thing on the page without shouting. */
.cfcrm-ovclient{ background:#f0f4ec; border-left-color:#e8622a; }
.cfcrm-ovclient .cfcrm-ov-label{ color:#8a5638; font-size:11px; }
.cfcrm-ovclient .cfcrm-ov-value{ color:#172033; }

/* Needs a look — the same warm pair the alerts already use. */
.cfcrm-ov-warn{ background:#fff8f2; border-left-color:#e8622a; }
.cfcrm-ov-warn .cfcrm-ov-value{ color:#a8481c; }
/* Needs a look sooner — the amber the pills already use for low/due. */
.cfcrm-ov-bad{ background:#fff4df; border-left-color:#bd6700; }
.cfcrm-ov-bad .cfcrm-ov-value{ color:#a35400; }

@media (prefers-reduced-motion:reduce){ .cfcrm-ov{transition:none} .cfcrm-ov:hover{transform:none} }

/* Destructive action. Distinct from the primary button so "Remove selected" can never be
   mistaken for "Assign selected" sitting next to it. */
.cfcrm-btn.danger{
  border-color:#dc2626;
  color:#b91c1c;
  background:#fff;
}
.cfcrm-btn.danger:hover:not(:disabled){ background:#fee2e2; }
.cfcrm-btn.danger:disabled{ border-color:var(--cfcrm-line,#dfe4ea); color:var(--cfcrm-muted,#94a3b8); }

/* ---------- Subpage navigation: vertical ----------
   Sixteen subpages never fitted across the top — the row scrolled sideways and half the
   pages were effectively hidden. A side rail shows every page at once, which is the whole
   point of having them, and reads as the section menu it actually is.
   Under 900px it returns to a scrolling row, because a rail would eat half a phone screen. */
.cfcrm-main{
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  align-items:start;
  min-height:calc(100vh - 150px);
  /* The rail needs to look full-height on every page, but the nav element itself must stay
     short so it can be sticky. Painting the column on the CONTAINER gives a rail that runs
     the whole page while the nav inside it still scrolls with you — stretching the nav
     instead would kill the sticky behaviour, and a short nav on a long page leaves a white
     block ending halfway down, which is what this looked like. */
  /* The rail is tinted a shade deeper than the content area so it reads as a sidebar rather
     than as blank page. The active item then goes WHITE against it, which is the opposite of
     the usual pattern and works better here: the selected page lifts out of the rail instead
     of sinking into it. */
  background:linear-gradient(90deg,#edf1f6 0 211px,#dde3ea 211px 212px,#f4f6f9 212px);
}
.cfcrm-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  overflow:visible;
  margin-top:0;
  padding:16px 10px 24px;
  background:transparent;
  border-right:0;
  position:sticky;
  top:96px;
  max-height:calc(100vh - 104px);
  overflow-y:auto;
}
.cfcrm-nav button{
  white-space:normal;
  text-align:left;
  border:0;
  border-bottom:0;
  border-left:3px solid transparent;
  border-radius:0 9px 9px 0;
  background:none;
  padding:9px 11px;
  font-weight:700;
  font-size:12.5px;
  line-height:1.3;
  color:#697386;
  cursor:pointer;
}
.cfcrm-nav button:hover{ background:#e3e9f1; color:#26313f; }
.cfcrm-nav button.on{
  color:#e8622a;
  border-left-color:#e8622a;
  border-bottom-color:transparent;
  background:#fff;
  box-shadow:0 1px 3px rgba(23,32,51,.06);
}
.cfcrm-nav button:focus-visible{ outline:2px solid #e8622a; outline-offset:-2px; }

@media(max-width:900px){
  .cfcrm-main{ grid-template-columns:1fr; background:none; min-height:0; }
  .cfcrm-nav{
    background:#edf1f6;
    flex-direction:row;
    gap:5px;
    overflow-x:auto;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid #e6e9ef;
    position:static;
    max-height:none;
  }
  .cfcrm-nav button{
    white-space:nowrap;
    border-left:0;
    border-bottom:3px solid transparent;
    border-radius:0;
    padding:10px 12px;
  }
  .cfcrm-nav button.on{ border-left-color:transparent; border-bottom-color:#e8622a; background:none; }
}

/* ---------- after-call disposition ----------
   Asked the moment a call ends, so the board keeps describing reality instead of leaving
   everyone in New. Deliberately a sheet rather than a toast: it needs an answer. */
.cfcrm-sheet-back{position:fixed;inset:0;z-index:9500;background:rgba(15,23,42,.45);
  display:flex;align-items:center;justify-content:center;padding:18px}
.cfcrm-sheet{background:#fff;border-radius:14px;padding:20px;max-width:560px;width:100%;
  max-height:88vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.cfcrm-sheet-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.cfcrm-sheet-head h3{margin:0;font-size:16px}
.cfcrm-sheet-head p{margin:4px 0 0;color:#737d8d;font-size:12px}
.cfcrm-disp{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.cfcrm-dispbtn{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  padding:10px 12px;border:1px solid #e0e5ec;border-left:3px solid #dfe4ec;border-radius:10px;
  background:#fbfcfe;font:inherit;color:#172033;cursor:pointer}
.cfcrm-dispbtn b{font-size:13px}
.cfcrm-dispbtn small{font-size:11px;color:#737d8d;line-height:1.3}
.cfcrm-dispbtn:hover{border-color:#e8622a}
.cfcrm-dispbtn.on{border-color:#e8622a;border-left-color:#e8622a;background:#fff5f0}
.cfcrm-showmore{display:block;width:100%;margin-top:6px;padding:9px;border:1px dashed #c9d2dc;
  border-radius:10px;background:#fff;color:#4a5666;font:inherit;font-weight:700;font-size:12px;cursor:pointer}
.cfcrm-showmore:hover{border-color:#e8622a;color:#e8622a}

/* Period buttons on the Sales Funnel dashboard. */
.cfcrm-rangebar{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cfcrm-rangebtn{padding:7px 12px;border:1px solid #dce1e8;border-radius:999px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:#4a5666;cursor:pointer}
.cfcrm-rangebtn:hover{border-color:#e8622a;color:#e8622a}
.cfcrm-rangebtn.on{background:#e8622a;border-color:#e8622a;color:#fff}


/* Call button — ClosureForce secondary (#627C4A), the olive already used across chat accents
   and unread badges. It was near-black, which read as a system control rather than the one
   action on the card, and gave the board no second brand colour at all. Orange stays the
   primary, so Call does not compete with Save/Import. */
.cfcrm-btn.call{
  background:#627C4A;
  border-color:#627C4A;
  color:#fff;
  font-weight:700;
}
.cfcrm-btn.call:hover:not(:disabled){ background:#4E6839; border-color:#4E6839; }
.cfcrm-btn.call:focus-visible{ outline:2px solid #4E6839; outline-offset:2px; }

/* ---------- dashboard card tones ----------
   One background for every card — the olive from the Calls card — so the row reads as a
   single object instead of a colour chart. Category is carried by the left rail alone, which
   is enough to group them without twelve competing tints. Only Closed and Lost keep a
   coloured figure, because those two are outcomes rather than counts. */
.cfcrm-ov.cfcrm-t-lead { border-left-color:#7ea6d4; }
.cfcrm-ov.cfcrm-t-call { border-left-color:#627c4a; }
.cfcrm-ov.cfcrm-t-stage{ border-left-color:#e8622a; }
.cfcrm-ov.cfcrm-t-won  { border-left-color:#1f8a52; }
.cfcrm-ov.cfcrm-t-won  .cfcrm-ov-value{ color:#166b40; }
.cfcrm-ov.cfcrm-t-lost { border-left-color:#c0504a; }
.cfcrm-ov.cfcrm-t-lost .cfcrm-ov-value{ color:#9b3b36; }
.cfcrm-ov.cfcrm-t-hot  { border-left-color:#d94f3d; }
.cfcrm-ov.cfcrm-t-warm { border-left-color:#dd8b2c; }
.cfcrm-ov.cfcrm-t-cold { border-left-color:#6b8bb5; }

/* "Needs you today" — the only rows on the dashboard that ask for an action. */
.cfcrm-alertrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  text-align:left;padding:12px 14px;margin-top:8px;border-radius:11px;border:1px solid;
  font:inherit;cursor:pointer}
.cfcrm-alertrow b{display:block;font-size:13.5px}
.cfcrm-alertrow span{font-size:18px;opacity:.55}
.cfcrm-alertrow.bad{background:#fdf0f0;border-color:#f0c4c1;color:#8d3a34}
.cfcrm-alertrow.bad:hover{border-color:#c0504a}
.cfcrm-alertrow.warn{background:#fff7ec;border-color:#f0d3a8;color:#8a5a1c}
.cfcrm-alertrow.warn:hover{border-color:#dd8b2c}

/* ---------- period panel ----------
   The same navy-with-orange-glow used by the My Day greeting and quote cards, so the top of
   the funnel reads as part of the same app rather than a separate white box. */
.cfcrm-panel.cfcrm-hero{
  background:radial-gradient(circle 147px at calc(100% - 128px) 32px,rgba(249,115,22,.35),transparent),
             linear-gradient(135deg,#23365c 0%,#16213c 60%,#0f1a30 100%);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.cfcrm-hero h3{color:#fff}
.cfcrm-hero p,.cfcrm-hero .cfcrm-muted{color:#b9c4d6}
.cfcrm-hero .cfcrm-rangebtn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#dbe3ef;
}
.cfcrm-hero .cfcrm-rangebtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
.cfcrm-hero .cfcrm-rangebtn.on{background:#e8622a;border-color:#e8622a;color:#fff}
.cfcrm-hero .cfcrm-input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}

/* ---------- two rows, always ----------
   Nineteen cards wrapped into three or four ragged rows depending on window width. Fixing the
   column count keeps it to two rows at any size; on a narrow screen the row scrolls sideways
   rather than reflowing, so the shape of the dashboard never changes under you. */
.cfcrm-ovgrid-2row{
  grid-template-columns:repeat(10,minmax(146px,1fr));
  grid-auto-rows:1fr;
}
.cfcrm-panel:has(.cfcrm-ovgrid-2row){overflow-x:auto}
@media(max-width:1500px){ .cfcrm-ovgrid-2row{grid-template-columns:repeat(10,minmax(140px,140px))} }

/* Step one of the disposition: two large targets, coloured for what they mean. */
.cfcrm-dispbtn.cfcrm-disp-yes{background:#eaf7ef;border-color:#79c79b;border-left-color:#1f8a52}
.cfcrm-dispbtn.cfcrm-disp-yes b{color:#166b40}
.cfcrm-dispbtn.cfcrm-disp-no{background:#eef1f8;border-color:#a9b6d4;border-left-color:#5566a8}
.cfcrm-dispbtn.cfcrm-disp-no b{color:#3d4a80}
.cfcrm-disp .cfcrm-dispbtn.cfcrm-disp-yes,
.cfcrm-disp .cfcrm-dispbtn.cfcrm-disp-no{padding:20px 16px;align-items:center;text-align:center}


/* ---------- pipeline column heads ----------
   Sticky so the stage name stays visible while a long column is scrolled, and the count sits
   with it — on a board you scroll sideways, a header that scrolls away leaves you guessing
   which column you are in. */
.cfcrm-col{display:flex;flex-direction:column;max-height:calc(100vh - 260px)}
.cfcrm-colhead{position:sticky;top:0;z-index:2;background:#eef1f5;border-radius:10px;
  margin:-2px -2px 6px;padding:8px 8px 10px;font-size:12.5px}
.cfcrm-colbody{overflow-y:auto;overflow-x:hidden;padding-right:2px}

/* Stage chips above the board — the quick filter, and a count you can read at a glance
   without the twelve-card dashboard. */
.cfcrm-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.cfcrm-chip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  border:1px solid #dce1e8;background:#fff;font:inherit;font-size:12.5px;font-weight:700;
  color:#4a5666;cursor:pointer}
.cfcrm-chip b{font-size:13px;color:#172033;font-variant-numeric:tabular-nums}
.cfcrm-chip:hover{border-color:#e8622a;color:#e8622a}
.cfcrm-chip.on{background:#e8622a;border-color:#e8622a;color:#fff}
.cfcrm-chip.on b{color:#fff}
.cfcrm-chip.warm{border-left:3px solid #dd8b2c}
.cfcrm-chip.cold{border-left:3px solid #6b8bb5}
.cfcrm-chip.hot{border-left:3px solid #d94f3d}

/* Lead history timeline — calls and notes in one column, recordings playable in place. */
.cfcrm-timeline{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.cfcrm-tl{display:grid;grid-template-columns:132px 1fr;gap:12px;padding:11px 0;
  border-bottom:1px solid #eef1f4}
.cfcrm-tl:last-child{border-bottom:0}
.cfcrm-tl-when{font-size:11.5px;color:#8a93a0;font-variant-numeric:tabular-nums}
.cfcrm-tl b{font-size:13px}
.cfcrm-tl-call{background:#fbfcfe;border-left:3px solid #627c4a;border-radius:0 8px 8px 0;
  padding-left:10px;margin-left:-2px}
.cfcrm-tl audio{height:34px}
@media(max-width:620px){ .cfcrm-tl{grid-template-columns:1fr;gap:3px} }

/* Sales Funnel runs full width — its pages are listed in the main sidebar now, so the second
   rail inside the page was costing ~210px on every screen for navigation already on offer. */
.cfcrm-main.cfcrm-main-full{grid-template-columns:minmax(0,1fr);background:none;min-height:0}

/* ---------- pipeline cards ----------
   Denser: company first because that is what a caller recognises, the person under it, then
   value, source, when it was last touched and what is owed next. Everything a decision to
   call needs, without opening the lead. */
.cfcrm-colhead-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800}
.cfcrm-colhead-v{margin-top:2px;font-size:11px;font-weight:700;color:#7b8494;font-variant-numeric:tabular-nums}
.cfcrm-leadwho{font-size:11.5px;color:#6b7280;margin-top:1px}
.cfcrm-leadval{margin-top:6px;font-size:13px}
.cfcrm-leadval b{font-variant-numeric:tabular-nums}
.cfcrm-leadmeta{font-size:10.5px;color:#7b8494;margin-top:3px}
.cfcrm-leadmeta.late{color:#b45309;font-weight:700}
.cfcrm-leaddue{margin-top:4px;font-size:11px;font-weight:800;color:#1f6349}
.cfcrm-leaddue.late{color:#b91c1c}
.cfcrm-lead-late{border-color:#f3b7b3;background:#fffaf9}
.cfcrm-lead-new{border-left:3px solid #7ea6d4}
.cfcrm-leadactions{gap:6px;justify-content:flex-end}

/* One-tap contact. Square targets so three fit a narrow card without wrapping. */
.cfcrm-icobtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:8px;border:1px solid #dce1e8;background:#fff;color:#4a5666;font-size:14px;
  line-height:1;cursor:pointer;text-decoration:none;flex:none}
.cfcrm-icobtn svg{display:block}
.cfcrm-icobtn:hover{border-color:#e8622a;color:#e8622a}
.cfcrm-icobtn.wa{color:#1f8a52;border-color:#bfe0cd}
.cfcrm-icobtn.wa:hover{background:#eaf7ef;border-color:#1f8a52}
.cfcrm-icobtn.mail{color:#3f5f88;border-color:#c6d4e6}
.cfcrm-icobtn.mail:hover{background:#eef3f8;border-color:#3f5f88}
.cfcrm-leadactions .cfcrm-btn.call{padding:6px 10px;font-size:12px}

/* Priority queue — the named work behind the "Needs you today" counts.
   Fixed height with its own scroll: the list grows with the desk, and the dashboard below it
   must not move down as it does. ~4 rows visible, the rest a short scroll away. */
.cfcrm-queue{display:flex;flex-direction:column;gap:6px;margin-top:10px;
  max-height:268px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.cfcrm-queue::-webkit-scrollbar{width:8px}
.cfcrm-queue::-webkit-scrollbar-thumb{background:#d5dbe3;border-radius:4px}
.cfcrm-queue::-webkit-scrollbar-track{background:transparent}
.cfcrm-qacts{display:flex;gap:6px;flex:none;align-items:center}
.cfcrm-qrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1px solid #e3e8ee;border-left:3px solid #dd8b2c;border-radius:10px;
  background:#fffdf8;cursor:pointer}
.cfcrm-qrow:hover{border-color:#e8622a}
.cfcrm-qrow.late{border-left-color:#c0504a;background:#fff6f5}
.cfcrm-qdue{font-size:11px;color:#8a5a1c;margin-top:2px}
.cfcrm-qdue.late{color:#b91c1c;font-weight:700}

/* funBoard emits several panels; the wrapper exists only so the search repaint can
   remove them as one node. display:contents keeps the layout identical. */
.cfcrm-boardwrap{display:contents}

/* ---------- pipeline board: fits the screen, one colour per stage ----------
   The board used to scroll sideways, so the later stages — the ones worth money — were the
   ones nobody saw. Every stage now shares the width instead. Colour runs cool at the top of
   the funnel to warm at the bottom, so the eye finds a stage by its tint before reading the
   label; tints are pale on purpose, the accent bar carries the signal. */
.cfcrm-board{grid-auto-flow:row;grid-template-columns:repeat(var(--cf-cols,9),minmax(0,1fr));
  grid-auto-columns:auto;gap:8px;overflow-x:visible;scroll-snap-type:none}

.cfcrm-col{--st:#64748b;--st-bg:#eef1f5;--st-hd:#e2e7ee;background:var(--st-bg);
  min-width:0;padding:8px}
.cfcrm-colhead{min-width:0}
.cfcrm-colhead{background:var(--st-hd);border-top:3px solid var(--st);
  border-radius:8px;padding:7px 8px 8px}
.cfcrm-colhead-t{font-size:11.5px;line-height:1.25;align-items:flex-start}
.cfcrm-colhead-t>span:first-child{min-width:0;overflow-wrap:anywhere}
.cfcrm-colhead-t>span:last-child{flex:none;padding:1px 7px;border-radius:99px;
  background:#fff;color:var(--st);font-size:11px}
.cfcrm-colhead-v{font-size:10.5px}

/* The .cfcrm-st-* rules are NOT written here. They are generated at runtime from STAGE_TONE
   in crm-ui.js, so the board, the chips, the funnel bars and the reports all read one palette.
   Adding a stage means adding one line there — do not re-add colours to this file, or the
   charts and the board will drift apart again. */

/* Nine columns means roughly 140px each, so the card has to give. The contact buttons wrap
   onto their own line rather than squeezing the Call target below a usable size. */
.cfcrm-lead{padding:10px}
.cfcrm-leadtop b{overflow-wrap:anywhere}
.cfcrm-leadactions{flex-wrap:wrap;margin-top:8px}
.cfcrm-leadactions .cfcrm-btn.call{flex:1 1 auto;min-width:58px;text-align:center}
.cfcrm-icobtn{width:28px;height:28px}

/* Narrow columns: the card gives up padding and the buttons shrink before anything clips.
   Measured, not guessed: this range runs from a 1280px screen (~99px a column) upwards. */
@media(max-width:1560px){
  .cfcrm-lead{padding:8px}
  .cfcrm-leadval{font-size:12px}
  .cfcrm-icobtn{width:26px;height:26px}
  .cfcrm-leadactions{gap:4px}
  .cfcrm-leadactions .cfcrm-btn.call{min-width:50px;padding:7px 8px;font-size:11.5px}
  .cfcrm-colhead-t{font-size:11px}
}

/* Below this a column is too narrow to read at all, so the board goes back to scrolling —
   a swipe beats nine unreadable slivers. */
@media(max-width:1250px){
  .cfcrm-board{grid-auto-flow:column;grid-template-columns:none;
    grid-auto-columns:minmax(228px,240px);overflow-x:auto;scroll-snap-type:x proximity}
}

/* A chip with nothing behind it is still worth showing — it answers the question — but it
   should not compete with the ones that have leads in them. */
.cfcrm-chip.zero{opacity:.5}
.cfcrm-chip.zero:hover{opacity:.8}

/* ---------- pills are labels, not columns ----------
   A pill inside a flex row inherits align-items:stretch, so on a card whose company name
   wraps to four lines the "cold" pill grew into a tall oval while the same pill next to a
   one-line name stayed small. Its size must come from its text and nothing else — it is a
   label, and a label that changes shape with its neighbour is not readable at a glance.
   flex:none stops it being squeezed narrow by a long name; height:fit-content stops it being
   stretched tall by one. */
.cfcrm-pill{flex:none;align-self:center;height:fit-content}
.cfcrm-leadtop{align-items:flex-start}
.cfcrm-leadtop .cfcrm-pill{align-self:flex-start}
.cfcrm-leadtop>b{min-width:0}

/* Stage chips wear the stage's own colour, so the chip above the board and the column below
   it read as the same thing. --st comes from the generated .cfcrm-st-* rule on the chip. */
.cfcrm-chip.stage{border-color:var(--st);color:var(--st)}
.cfcrm-chip.stage b{color:var(--st)}
.cfcrm-chip.stage:hover{background:var(--st-bg);border-color:var(--st);color:var(--st)}
.cfcrm-chip.stage.on{background:var(--st);border-color:var(--st);color:#fff}
.cfcrm-chip.stage.on b{color:#fff}

/* Equal columns. The 2fr/1fr split left every row looking accidental — a wide panel next to a
   narrow one, nothing lining up down the page. */
.cfcrm-grid-even{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The shape switch on a chart panel. Small and quiet: it is a preference, not a headline. */
.cfcrm-chartsw{display:flex;gap:2px;flex:none;padding:2px;border:1px solid #e3e8ee;
  border-radius:9px;background:#f7f9fb}
.cfcrm-chartbtn{border:0;background:none;border-radius:7px;padding:5px 9px;font:inherit;
  font-size:11px;font-weight:700;color:#6b7686;cursor:pointer;white-space:nowrap}
.cfcrm-chartbtn:hover{color:#e8622a}
.cfcrm-chartbtn.on{background:#fff;color:#16202b;box-shadow:0 1px 3px rgba(17,24,39,.13)}

/* Pie / donut: the figure, then a legend that carries the numbers and the percentages —
   a slice without its value is a decoration, not a chart. */
.cfcrm-pie{display:flex;flex-wrap:wrap;gap:18px;align-items:center;padding-top:4px}
.cfcrm-piefig{flex:none;line-height:0}
.cfcrm-legend{display:flex;flex-direction:column;gap:7px;min-width:170px;flex:1}
.cfcrm-legrow{display:flex;align-items:center;gap:8px;font-size:12px}
.cfcrm-swatch{width:11px;height:11px;border-radius:3px;flex:none}
.cfcrm-leglabel{flex:1;min-width:0;color:#4a5666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfcrm-legrow b{font-variant-numeric:tabular-nums}
.cfcrm-legpct{color:#8a94a3;font-size:11px;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}

/* In a half-width panel the title and the shape switch compete for one line and the heading
   collapses to one word per line. Let the switch drop below the title instead. */
.cfcrm-sectionhead{flex-wrap:wrap}
.cfcrm-sectionhead>div:first-child{min-width:min(100%,180px)}

/* ---------- dragging a card between stages ----------
   The grab cursor only appears for people who may actually move a lead; for everyone else the
   card stays a plain card rather than promising something the server will refuse. */
.cfcrm-lead[draggable="true"]{cursor:grab}
.cfcrm-lead[draggable="true"]:active{cursor:grabbing}
.cfcrm-lead.cfcrm-dragging{opacity:.4}
.cfcrm-col.cfcrm-dropok{outline:2px dashed var(--st);outline-offset:-2px}
.cfcrm-col.cfcrm-dropok .cfcrm-colhead{background:var(--st);color:#fff}
.cfcrm-col.cfcrm-dropok .cfcrm-colhead-v,
.cfcrm-col.cfcrm-dropok .cfcrm-colhead-t>span:last-child{color:#fff;background:transparent}

/* ---------- stats inside a sheet ----------
   Not the dashboard's KPI cards: those are page furniture, sized for a full screen. In a
   dialog the same four facts need to be readable at a glance without dominating the thing
   you actually opened — the history below them. */
.cfcrm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:8px;margin-bottom:14px}
.cfcrm-stat{position:relative;border:1px solid #e6e9ef;border-radius:11px;padding:10px 11px 10px 13px;
  background:#fbfcfd;overflow:hidden}
/* Four identical grey boxes make the eye read them as one block and stop. A colour each — and a
   number in that colour — turns them back into four separate facts you can pick out at a glance.
   The tint is the accent at 7%, so it colours without shouting over the number. */
.cfcrm-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sa,#94a3b8)}
.cfcrm-stat>span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  color:#7b8494;text-transform:uppercase}
.cfcrm-stat b{display:block;font-size:17px;margin:5px 0 2px;font-variant-numeric:tabular-nums;
  color:var(--sa,#172033)}
.cfcrm-stat small{display:block;color:#6b7280;font-size:10.5px;line-height:1.35}
.cfcrm-stat.s-calls{--sa:#2563eb;background:#f5f8ff;border-color:#dfe8fb}
.cfcrm-stat.s-talk{--sa:#0f766e;background:#f2fbfa;border-color:#d6efec}
.cfcrm-stat.s-rec{--sa:#7c3aed;background:#f8f5ff;border-color:#e6ddfb}
.cfcrm-stat.s-stage{--sa:#c2410c;background:#fff8f3;border-color:#f7e2d4}
/* The stage tile carries a coloured pill instead of a number, so its own text stays neutral. */
.cfcrm-stat.s-stage b{color:#172033}

/* The sheet header stays put while a long history scrolls under it — the lead's name and the
   Close button are the two things you should never have to scroll back up to find. */
.cfcrm-sheet-head{position:sticky;top:0;z-index:2;background:#fff;
  margin:-20px -20px 14px;padding:18px 20px 12px;border-bottom:1px solid #eef1f4}

/* A heading above each client's report block, so two reports on one page never blur together. */
.cfcrm-reporthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:22px 0 10px;padding-bottom:7px;border-bottom:2px solid #e8622a}
.cfcrm-reporthead:first-child{margin-top:0}
.cfcrm-reporthead h2{margin:0;font-size:16px}
.cfcrm-reporthead span{font-size:11px;color:#737d8d;white-space:nowrap}

/* The client switcher sits in the header line, beside the page title. */
.cfcrm-actions select.cfcrm-input{padding:8px 11px;border-radius:10px;font-weight:700}

/* Validation messages in sheets. A class rather than an inline colour, so the rule survives
   JavaScript touching element.style — which rewrites the whole attribute. */
.cfcrm-err{margin-top:8px;font-size:12px;font-weight:700;color:#b91c1c}

/* Back bar above a drill-down page. The way out sits where the eye starts, not at the bottom. */
.cfcrm-backbar{margin-bottom:14px}
.cfcrm-backbar .cfcrm-btn{font-weight:700}

/* ---------- paging ----------
   Sits under a long table and says two things: where you are in the list, and how to reach the
   rest of it. Both matter — a table that just stops at row 25 reads as "that is all there is". */
.cfcrm-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:11px 2px 2px;margin-top:8px;border-top:1px solid #eef1f6}
.cfcrm-pageinfo{font-size:12px;color:#6b7684}
/* rows-per-page, styled as a sibling of the page buttons so the footer reads as one row */
.cfcrm-pagesize{margin-right:auto;font:inherit;font-size:12px;color:#445061;border:1px solid #d9e0e8;background:#fff;border-radius:8px;padding:5px 8px;cursor:pointer}
.cfcrm-pagesize:hover{border-color:#e8622a;color:#e8622a}
.cfcrm-pagesize:focus{outline:2px solid #e8622a33;outline-offset:1px}
.cfcrm-pagenav{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cfcrm-pagebtn{min-width:32px;padding:6px 10px;border:1px solid #d9e0e8;background:#fff;
  border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;color:#354354;cursor:pointer}
.cfcrm-pagebtn:hover:not([disabled]){border-color:#e8622a;color:#e8622a}
.cfcrm-pagebtn.on{background:#e8622a;border-color:#e8622a;color:#fff}
.cfcrm-pagebtn[disabled]{opacity:.42;cursor:default}
.cfcrm-pagegap{padding:0 2px;color:#9aa4b1;font-size:12.5px}

/* ---------- the meeting sheet ----------
   The old one was four stacked fields with no grouping, and the time came from the browser's
   own clock control — 24-hour on some machines, 12-hour on others, for a floor that reads
   times in 12-hour. These give one clock to everybody and separate "when" from "who". */
.cfcrm-fgroup{margin:16px 0 2px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#8a93a0}
.cfcrm-fgroup:first-child{margin-top:2px}
.cfcrm-flabel{font-size:12px;font-weight:700;margin-bottom:4px}
.cfcrm-timepick{display:flex;align-items:center;gap:5px}
.cfcrm-timepick select{flex:1 1 0;min-width:0;text-align:center}
.cfcrm-timepick select:last-child{flex:0 0 74px}
.cfcrm-timesep{font-weight:800;color:#8a93a0}
/* The time in words, under the pickers: "16:30" is a value, "Wed 9 Sep 2026, 4:30 PM" is the
   thing you can check against what you just told the customer. */
.cfcrm-when{margin-top:8px;padding:8px 11px;border-radius:9px;background:#fff4ec;
  border:1px solid #f6ddcb;color:#9a3d10;font-size:12.5px;font-weight:700}
.cfcrm-guests{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px}
.cfcrm-guest{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  border:1px solid #d9e0e8;background:#fff;font-size:12.5px;cursor:pointer}
.cfcrm-guest input{width:14px;height:14px;accent-color:#e8622a;margin:0}
.cfcrm-guest.on{background:#fdf1ea;border-color:#f0c6ac;cursor:default}
.cfcrm-guest button{border:0;background:none;cursor:pointer;color:#94a3b8;font-size:12px;padding:0}
.cfcrm-guest button:hover{color:#b02218}
.cfcrm-check{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:13px}

/* Meetings already in the diary, listed on the lead. */
.cfcrm-mtrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid #eef1f6}
.cfcrm-mtrow.past{opacity:.55}
.cfcrm-mtwhen{font-weight:800;font-size:13px;color:#172033}
.cfcrm-mtacts{display:flex;gap:6px;flex:none;flex-wrap:wrap}
.cfcrm-join{text-decoration:none;display:inline-flex;align-items:center}
/* A meeting inside the next quarter of an hour is the one thing on the card worth reaching for. */
.cfcrm-join.now{animation:cfJoinPulse 1.6s ease-in-out infinite}
@keyframes cfJoinPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,98,42,.45)}50%{box-shadow:0 0 0 7px rgba(232,98,42,0)}}
@media (prefers-reduced-motion:reduce){ .cfcrm-join.now{animation:none} }

/* ---------- the sending identity ----------
   Two addresses exist and they are not interchangeable: the ClosureForce one signs you in, the
   client one is what a prospect sees. Anywhere mail is about to leave, the funnel says which. */
.cfcrm-fromline{display:flex;gap:7px;align-items:flex-start;padding:9px 11px;border-radius:9px;
  background:#f3f7fb;border:1px solid #dfe8f1;font-size:12.5px;color:#41556b;margin-bottom:4px}
.cfcrm-idrow{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:11px;
  background:#fff8f3;border:1px solid #f2ddcc}
.cfcrm-idrow.ok{background:#f2fbf5;border-color:#cfe9d8}
.cfcrm-iddot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:#e8622a}
.cfcrm-idrow.ok .cfcrm-iddot{background:#15803d}
.cfcrm-setup{margin-top:12px;border-top:1px solid #eef1f6;padding-top:10px}
.cfcrm-setup>summary{cursor:pointer;font-weight:700;font-size:13px;color:#354354}
.cfcrm-setup>summary:hover{color:#e8622a}

/* ---------- My Meetings: the four questions you open this page to answer ----------
   What is on today, what is on tomorrow, what is coming this week, and how long have I got. */
.cfcrm-meetkpi{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.cfcrm-statbtn{font:inherit;text-align:left;cursor:pointer;width:100%}
.cfcrm-statbtn:hover{border-color:var(--sa,#94a3b8)}
.cfcrm-statbtn.on{box-shadow:0 0 0 2px var(--sa,#94a3b8) inset}
.cfcrm-stat.s-stage.s-live{--sa:#15803d;background:#f2fbf5;border-color:#cfe9d8}
.cfcrm-stat.s-stage.s-live b{color:#15803d}
/* The very next meeting gets its own strip: when one is minutes away it is the only thing on
   the page worth clicking, and it should not have to be found among the others. */
.cfcrm-nextmeet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;
  padding:12px 14px;border-radius:12px;background:#fff;border:1px solid #e6e9ef}
.cfcrm-nextmeet.urgent{border-color:#e8622a;background:#fff6f0}
.cfcrm-mtin{margin-left:8px;font-weight:700;font-size:11.5px;color:#8a93a0}

/* ---------- whose funnel is this ----------
   Someone working two accounts had nothing on these pages saying which one they were in beyond
   a selector in the corner — and sending a Bizzfly brochure from the Sky9India mailbox is a
   mistake you only make once, loudly. The client's name sits above the page title. */
.cfcrm-clienthead{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.cfcrm-clientname{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#e8622a;margin-bottom:3px}
.cfcrm-clienthead h3{margin:0;font-size:21px;line-height:1.2}
.cfcrm-clienthead p{margin:3px 0 0;font-size:13px;color:#6b7684}
.cfcrm-clienthint{font-size:11.5px;color:#8a93a0;padding-bottom:3px}
/* Sent / failed on the mail log. */
.cfcrm-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800}
.cfcrm-pill.ok{background:#eaf7ee;color:#15803d}
.cfcrm-pill.bad{background:#fdeaea;color:#b91c1c}

/* ---------- the dialler ----------
   The strip that runs back-to-back calling, and the clock that counts a pause. It states which
   of three modes it is in before it offers any button, because "is it dialling or not?" is the
   question somebody has mid-shift with a customer on the line. */
.cfcrm-dialbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 15px;border-radius:13px;margin-bottom:14px;
  background:#fff;border:1px solid #e6e9ef}
.cfcrm-dialbar.on{border-color:#cfe9d8;background:#f4fbf6}
.cfcrm-dialbar.paused{border-color:#f0c6ac;background:#fff6f0}
.cfcrm-dialstate{font-weight:800;font-size:14px;color:#172033}
.cfcrm-dialbar.on .cfcrm-dialstate{color:#15803d}
.cfcrm-dialbar.paused .cfcrm-dialstate{color:#c2410c}
.cfcrm-dialright{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
.cfcrm-dialclock{display:block;font-size:19px;font-variant-numeric:tabular-nums;color:#172033}
.cfcrm-dialbar.paused .cfcrm-dialclock{color:#c2410c}
/* The countdown between one call and the next — big, because it is a number you are deciding
   against, and there are three seconds to decide in. */
.cfcrm-countdown{font-size:54px;font-weight:800;line-height:1.1;color:#e8622a;
  font-variant-numeric:tabular-nums;margin:2px 0 4px}
@media (max-width:700px){
  .cfcrm-dialbar{align-items:flex-start}
  .cfcrm-dialright{width:100%;justify-content:space-between}
}
.cfcrm-dialpick{display:flex;align-items:center;gap:7px;margin-top:9px;flex-wrap:wrap;font-size:12px}
.cfcrm-dialstage{min-width:210px;padding:6px 9px;font-size:12.5px}

/* ---------- recording transport ----------
   The browser's own audio player wants ~300px and collapses to an unusable stub in a table
   column. This is the same three controls at a size that fits a row. */
.cfcrm-rec{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cfcrm-recbtn{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid #d9e0e8;
  background:#fff;cursor:pointer;font-size:11px;line-height:1;color:#354354;
  display:inline-grid;place-items:center;padding:0}
.cfcrm-recbtn:hover:not([disabled]){border-color:#e8622a;color:#e8622a}
.cfcrm-recbtn.play{background:#e8622a;border-color:#e8622a;color:#fff}
.cfcrm-recbtn[disabled]{opacity:.4;cursor:default}
.cfcrm-rectime{flex:none;font-size:11.5px;color:#6b7684;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfcrm-recbar{flex:1 1 70px;min-width:54px;max-width:150px;height:4px;accent-color:#e8622a;cursor:pointer}

/* Stage breakdown for the Overview's date window — the answer to "and what happened to them". */
.cfcrm-ovstages{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.cfcrm-ovstage{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;
  font-weight:800;background:#f0f3f7;color:#475569}

/* skeleton loader (21 Sep 2026) */
.cfcrm-skel{padding:6px 2px}.cfcrm-skel-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}
.cfcrm-skel-kpi,.cfcrm-skel-line{background:linear-gradient(90deg,#eef1f5 25%,#f7f8fa 50%,#eef1f5 75%);background-size:200% 100%;animation:cfcrmShimmer 1.2s linear infinite;border-radius:12px}
.cfcrm-skel-kpi{height:74px}.cfcrm-skel-line{height:52px;margin:8px 0}.cfcrm-skel-note{font-size:12px;color:#6b7280;margin:0 0 8px}
@keyframes cfcrmShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:700px){.cfcrm-skel-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* pipeline as stage lists (21 Sep 2026) */
.cfcrm-stage{margin-top:12px}.cfcrm-stagehead{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 8px}
.cfcrm-stagelist{display:flex;flex-direction:column;gap:8px}
.cfcrm-leadrow{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #e6e9f0;border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.cfcrm-leadrow:hover{border-color:#c9d2df;box-shadow:0 6px 18px -14px rgba(18,28,44,.35)}
.cfcrm-leadrow.cfcrm-lead-late{border-left:4px solid #dc2626}.cfcrm-leadrow.cfcrm-lead-new{border-left:4px solid #2563eb}
.cfcrm-leadrow-main{flex:1;min-width:0}.cfcrm-leadrow-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.cfcrm-leadrow-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.cfcrm-leadrow .cfcrm-leadval{margin-left:auto;font-weight:700}
.cfcrm-leadrow-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#5b6577;margin-top:4px}.cfcrm-leadrow-meta .late{color:#dc2626;font-weight:700}
.cfcrm-leadrow .cfcrm-leadactions{display:flex;gap:6px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){.cfcrm-leadrow{flex-direction:column;align-items:stretch}.cfcrm-leadrow .cfcrm-leadactions{justify-content:flex-start}}

/* tables as stacked cards on phones (21 Sep 2026): calls, the call queue, the pool */
@media(max-width:700px){
  .cfcrm-table.cfcrm-stack thead{display:none}.cfcrm-table.cfcrm-stack,.cfcrm-table.cfcrm-stack tbody{display:block;width:100%;min-width:0}
  .cfcrm-table.cfcrm-stack tr{display:block;background:#fff;border:1px solid #e6e9f0;border-radius:12px;padding:8px 12px;margin:0 0 8px}
  .cfcrm-table.cfcrm-stack td{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border:0;align-items:center;flex-wrap:wrap;min-width:0}
  .cfcrm-table.cfcrm-stack td::before{content:attr(data-l);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;flex:none}
  .cfcrm-table.cfcrm-stack td[data-l="Recording"]{flex-direction:column;align-items:stretch}
  .cfcrm-table.cfcrm-stack td>*{min-width:0;max-width:100%}
}
/* "Include shared pool" tick: a plain label, not a stretched search box */.cfcrm-filter label.cfcrm-scope{font-size:13px;color:#4b5563;margin:0}.cfcrm-filter label.cfcrm-scope input[type=checkbox]{flex:none;min-width:0;width:16px;height:16px;padding:0;margin:0;accent-color:#FA510F}
/* ---------- pipeline board, restored (22 Sep 2026) ----------
   Columns are readable (272px+) and the board scrolls sideways when they do not all fit;
   an empty stage folds to a 44px bar with its name on its side, so the stages with work in
   them get the width. Column widths come from the inline grid-template-columns crm-ui.js sets. */
.cfcrm-board.cfcrm-kanban{display:grid;grid-auto-flow:column;grid-template-columns:none;gap:12px;
  overflow-x:auto;overflow-y:visible;align-items:start;padding:2px 2px 14px;scroll-snap-type:x proximity;
  scrollbar-width:thin}
.cfcrm-kanban .cfcrm-col{display:flex;flex-direction:column;max-height:calc(100vh - 250px);min-height:220px;
  padding:8px;border-radius:14px;background:var(--st-bg);border:1px solid rgba(0,0,0,.04);scroll-snap-align:start}
.cfcrm-kanban .cfcrm-colhead{position:sticky;top:0;z-index:1;background:var(--st-hd);border-top:3px solid var(--st);
  border-radius:10px;padding:9px 10px;margin-bottom:8px;display:block}
.cfcrm-kanban .cfcrm-colhead-t{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:800;color:#172033}
.cfcrm-kanban .cfcrm-colhead-t>span:last-child{flex:none;padding:2px 9px;border-radius:99px;background:#fff;color:var(--st);font-size:12px}
.cfcrm-kanban .cfcrm-colhead-v{margin-top:3px;font-size:11px;font-weight:700;color:var(--st);font-variant-numeric:tabular-nums}
.cfcrm-kanban .cfcrm-colbody{overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin}
.cfcrm-kanban .cfcrm-lead{background:#fff;border:1px solid #e3e7ed;border-radius:12px;padding:12px;margin-bottom:8px;cursor:grab;
  box-shadow:0 1px 2px rgba(16,24,36,.04);transition:box-shadow .15s,border-color .15s}
.cfcrm-kanban .cfcrm-lead:hover{border-color:#cbd3de;box-shadow:0 4px 14px -6px rgba(16,24,36,.25)}
.cfcrm-kanban .cfcrm-lead[draggable="false"]{cursor:pointer}
.cfcrm-kanban .cfcrm-leadtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;font-size:14px}
.cfcrm-kanban .cfcrm-leadtop>b{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.cfcrm-kanban .cfcrm-leadwho{font-size:12px;color:#4b5563;margin-top:3px}
.cfcrm-kanban .cfcrm-leadmeta{font-size:11.5px;color:#7b8494;margin-top:3px}
.cfcrm-kanban .cfcrm-leadmeta.late{color:#b04a45;font-weight:700}
.cfcrm-kanban .cfcrm-leadval{margin:6px 0 0;font-size:13px;margin-left:0}
.cfcrm-kanban .cfcrm-leaddue{margin-top:5px;font-size:11.5px;font-weight:800;color:#1f6349}
.cfcrm-kanban .cfcrm-leaddue.late{color:#b04a45}
.cfcrm-kanban .cfcrm-lead-late{border-left:4px solid #dc2626;background:#fffaf9}
.cfcrm-kanban .cfcrm-lead-new{border-left:4px solid #2563eb}
.cfcrm-kanban .cfcrm-leadactions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;margin-top:10px}
.cfcrm-kanban .cfcrm-showmore{width:100%;margin-top:2px}
/* folded empty stage */
.cfcrm-kanban .cfcrm-col-empty{padding:0;min-height:220px;justify-content:flex-start;align-items:center;background:var(--st-bg);border:1px dashed rgba(0,0,0,.12)}
.cfcrm-kanban .cfcrm-colfold{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;gap:8px;padding:12px 0;
  font-size:12px;font-weight:800;color:var(--st);white-space:nowrap}
.cfcrm-kanban .cfcrm-colfold b{font-size:11px;padding:6px 2px;border-radius:99px;background:#fff;color:var(--st)}
.cfcrm-kanban .cfcrm-col.cfcrm-dropok{outline:2px dashed var(--st);outline-offset:-2px;background:var(--st-hd)}
.cfcrm-kanban .cfcrm-col.cfcrm-dropok .cfcrm-colhead{background:var(--st);color:#fff}
.cfcrm-kanban .cfcrm-col.cfcrm-dropok .cfcrm-colhead-t{color:#fff}
.cfcrm-kanban .cfcrm-col.cfcrm-dropok .cfcrm-colhead-v{color:#fff}
.cfcrm-dragging{opacity:.4}
/* phones: one column per screen, swipe between stages */
@media(max-width:650px){
  .cfcrm-board.cfcrm-kanban{grid-template-columns:none !important;grid-auto-columns:84vw;scroll-snap-type:x mandatory;gap:10px}
  .cfcrm-kanban .cfcrm-col{max-height:none}
  .cfcrm-kanban .cfcrm-col-empty{width:auto;min-height:0}
  .cfcrm-kanban .cfcrm-colfold{writing-mode:horizontal-tb;transform:none;padding:12px}
}
/* pipeline chips carry their stage / heat colour as a filled tint, not just an outline */
.cfcrm-chip.stage{background:var(--st-hd);border-color:transparent;color:var(--st)}
.cfcrm-chip.stage b{background:#fff;color:var(--st);padding:1px 7px;border-radius:99px;font-size:12px}
.cfcrm-chip.stage:hover{background:var(--st);border-color:var(--st);color:#fff}
.cfcrm-chip.stage:hover b{color:var(--st)}
.cfcrm-chip.stage.on{background:var(--st);border-color:var(--st);color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--st)}
.cfcrm-chip.stage.on b{background:#fff;color:var(--st)}
.cfcrm-chip.hot{background:#fbe9e6;border-color:transparent;border-left:3px solid #d94f3d;color:#a33a2b}
.cfcrm-chip.warm{background:#fcf0df;border-color:transparent;border-left:3px solid #dd8b2c;color:#9a5a12}
.cfcrm-chip.cold{background:#e9eff8;border-color:transparent;border-left:3px solid #6b8bb5;color:#3f5a85}
.cfcrm-chip.hot b,.cfcrm-chip.warm b,.cfcrm-chip.cold b{background:#fff;padding:1px 7px;border-radius:99px;font-size:12px;color:inherit}
.cfcrm-chip.hot.on{background:#d94f3d;color:#fff}.cfcrm-chip.warm.on{background:#dd8b2c;color:#fff}.cfcrm-chip.cold.on{background:#6b8bb5;color:#fff}
.cfcrm-chip.hot.on b{color:#d94f3d}.cfcrm-chip.warm.on b{color:#dd8b2c}.cfcrm-chip.cold.on b{color:#6b8bb5}
.cfcrm-chip.zero{opacity:.55}
/* tighter board: less air between columns (gap + column padding) */
.cfcrm-board.cfcrm-kanban{gap:6px;padding:2px 0 12px}
.cfcrm-kanban .cfcrm-col{padding:6px}
.cfcrm-kanban .cfcrm-colhead{margin-bottom:6px}
.cfcrm-kanban .cfcrm-lead{margin-bottom:6px}
/* board columns in one neutral colour (the chips above keep their stage colours) */
.cfcrm-kanban .cfcrm-col{background:#eef1f5;border-color:rgba(0,0,0,.04)}
.cfcrm-kanban .cfcrm-colhead{background:#e3e8ef;border-top:3px solid #101824}
.cfcrm-kanban .cfcrm-colhead-t{color:#101824}
.cfcrm-kanban .cfcrm-colhead-t>span:last-child{color:#101824}
.cfcrm-kanban .cfcrm-colhead-v{color:#5b6472}
.cfcrm-kanban .cfcrm-col-empty{background:#eef1f5}
.cfcrm-kanban .cfcrm-colfold,.cfcrm-kanban .cfcrm-colfold b{color:#5b6472}
.cfcrm-kanban .cfcrm-col.cfcrm-dropok{outline-color:#FA510F;background:#fff3ec}
.cfcrm-kanban .cfcrm-col.cfcrm-dropok .cfcrm-colhead{background:#FA510F}
/* column head: one solid light colour, no dark bar */
.cfcrm-kanban .cfcrm-colhead{background:#d6dfea;border-top:0;border-radius:10px}
.cfcrm-kanban .cfcrm-col{background:#eef2f7;border:0}
.cfcrm-kanban .cfcrm-col-empty{background:#eef2f7;border:1px dashed #c9d3e0}
/* the pipeline strip wears the sidebar's navy so the coloured chips sit on it like the nav */
.cfcrm-pipehead{background:linear-gradient(180deg,#182334 0%,#0E1726 100%);border-color:#0E1726;color:#fff}
.cfcrm-pipehead h3{color:#fff}
.cfcrm-pipehead .cfcrm-sectionhead p{color:#b9c4d6}
.cfcrm-pipehead .cfcrm-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.cfcrm-pipehead .cfcrm-chips{margin-bottom:0}
/* pipeline strip: light brand tint, and every chip the same light orange (solid orange when selected) */
.cfcrm-pipehead{background:#fff4ee;border-color:#ffd9c4;color:#172033}
.cfcrm-pipehead h3{color:#172033}
.cfcrm-pipehead .cfcrm-sectionhead p{color:#7b8494}
.cfcrm-pipehead .cfcrm-btn{background:#fff;border-color:#ffb894;color:#c2410c}
.cfcrm-pipehead .cfcrm-chip,.cfcrm-pipehead .cfcrm-chip.stage,.cfcrm-pipehead .cfcrm-chip.hot,.cfcrm-pipehead .cfcrm-chip.warm,.cfcrm-pipehead .cfcrm-chip.cold{
  background:#ffe4d5;border:1px solid #ffd0b5;border-left-width:1px;color:#b3400e}
.cfcrm-pipehead .cfcrm-chip b{background:#fff;color:#b3400e;padding:1px 7px;border-radius:99px;font-size:12px}
.cfcrm-pipehead .cfcrm-chip:hover{background:#ffd0b5;border-color:#ffb894;color:#9a3410}
.cfcrm-pipehead .cfcrm-chip:hover b{color:#9a3410}
.cfcrm-pipehead .cfcrm-chip.on,.cfcrm-pipehead .cfcrm-chip.stage.on,.cfcrm-pipehead .cfcrm-chip.hot.on,.cfcrm-pipehead .cfcrm-chip.warm.on,.cfcrm-pipehead .cfcrm-chip.cold.on{
  background:#FA510F;border-color:#FA510F;color:#fff;box-shadow:none}
.cfcrm-pipehead .cfcrm-chip.on b{background:#fff;color:#FA510F}
.cfcrm-pipehead .cfcrm-chip.zero{opacity:.6}
/* pipeline strip: the sidebar's flat navy; chips stay light orange on it */
.cfcrm-pipehead{background:#1b2637;border-color:#1b2637;color:#fff}
.cfcrm-pipehead h3{color:#fff}
.cfcrm-pipehead .cfcrm-sectionhead p{color:#b9c4d6}
.cfcrm-pipehead .cfcrm-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
/* one step lighter than the sidebar top (#182334) — the tone of its sub-menu buttons */
.cfcrm-pipehead{background:#243047;border-color:#243047}
/* Pipeline strip = the dashboard's "My numbers" band (same navy + orange glow); chips styled
   like its period pills: translucent on navy, solid orange when selected */
.cfcrm-panel.cfcrm-hero.cfcrm-pipehead{
  background:radial-gradient(circle 147px at calc(100% - 128px) 32px,rgba(249,115,22,.35),transparent),
             linear-gradient(135deg,#23365c 0%,#16213c 60%,#0f1a30 100%);
  border:1px solid rgba(255,255,255,.08);color:#fff}
.cfcrm-pipehead .cfcrm-chip,.cfcrm-pipehead .cfcrm-chip.stage,.cfcrm-pipehead .cfcrm-chip.hot,.cfcrm-pipehead .cfcrm-chip.warm,.cfcrm-pipehead .cfcrm-chip.cold{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#dbe3ef;border-radius:999px}
.cfcrm-pipehead .cfcrm-chip b{background:rgba(255,255,255,.14);color:#fff;padding:1px 8px;border-radius:99px;font-size:12px}
.cfcrm-pipehead .cfcrm-chip:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
.cfcrm-pipehead .cfcrm-chip:hover b{color:#fff}
.cfcrm-pipehead .cfcrm-chip.on,.cfcrm-pipehead .cfcrm-chip.stage.on,.cfcrm-pipehead .cfcrm-chip.hot.on,.cfcrm-pipehead .cfcrm-chip.warm.on,.cfcrm-pipehead .cfcrm-chip.cold.on{
  background:#e8622a;border-color:#e8622a;color:#fff;box-shadow:none}
.cfcrm-pipehead .cfcrm-chip.on b{background:rgba(255,255,255,.22);color:#fff}
.cfcrm-pipehead .cfcrm-chip.zero{opacity:.55}
.cfcrm-pipehead .cfcrm-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#dbe3ef}
/* Call Queue KPI cards and the back-to-back bar wear the At-a-glance card look (olive + rail) */
.cfcrm-kpi{background:#f0f4ec;border:1px solid #e7eaf0;border-left:3px solid #dfe4ec;border-radius:12px}
.cfcrm-kpi.cfcrm-t-lead{border-left-color:#7ea6d4}
.cfcrm-kpi.cfcrm-t-call{border-left-color:#627c4a}
.cfcrm-kpi.cfcrm-t-stage{border-left-color:#e8622a}
.cfcrm-kpi.cfcrm-t-lost{border-left-color:#c0504a}
.cfcrm-kpi span{color:#8a5638;font-size:11px}
.cfcrm-dialbar{background:#f0f4ec;border:1px solid #e7eaf0;border-left:3px solid #627c4a}
.cfcrm-dialbar.on{background:#f4fbf6;border-left-color:#15803d}
.cfcrm-dialbar.paused{background:#fff6f0;border-left-color:#e8622a}
/* Calls table: proper reading size — 12px thin text was hard to scan on a 1080p screen */
.cfcrm-calls{font-size:14px;min-width:0;table-layout:auto}
.cfcrm-calls th{font-size:11px;font-weight:800;letter-spacing:.06em;color:#5b6472;padding:12px 12px}
.cfcrm-calls td{padding:13px 12px;font-size:14px;color:#172033}
.cfcrm-calls td[data-l="When"]{white-space:nowrap;color:#4b5563;font-variant-numeric:tabular-nums}
.cfcrm-calls td[data-l="Lead"] a{font-weight:700;font-size:14.5px;color:#c2410c;text-decoration:none}
.cfcrm-calls td[data-l="Lead"] a:hover{text-decoration:underline}
.cfcrm-calls td[data-l="Outcome"] .cfcrm-pill{font-size:12px;padding:4px 10px}
.cfcrm-calls td[data-l="Talk time"]{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cfcrm-calls td[data-l="Recording"] .cfcrm-muted{font-size:12.5px}
.cfcrm-calls tr:nth-child(even) td{background:#fafbfc}
.cfcrm-calls tr:hover td{background:#fff6f0}
/* back-to-back bar = the "My numbers" navy band */
.cfcrm-dialbar,.cfcrm-dialbar.on,.cfcrm-dialbar.paused{
  background:radial-gradient(circle 147px at calc(100% - 128px) 32px,rgba(249,115,22,.35),transparent),
             linear-gradient(135deg,#23365c 0%,#16213c 60%,#0f1a30 100%);
  border:1px solid rgba(255,255,255,.08);color:#fff}
.cfcrm-dialbar .cfcrm-dialstate,.cfcrm-dialbar.on .cfcrm-dialstate{color:#fff}
.cfcrm-dialbar.paused .cfcrm-dialstate{color:#ffb894}
.cfcrm-dialbar .cfcrm-muted,.cfcrm-dialbar small,.cfcrm-dialbar .cfcrm-dialpick{color:#b9c4d6}
.cfcrm-dialbar .cfcrm-dialclock{color:#fff}
.cfcrm-dialbar.paused .cfcrm-dialclock{color:#ffb894}
.cfcrm-dialbar .cfcrm-input,.cfcrm-dialbar select{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.cfcrm-dialbar select option{color:#172033}
.cfcrm-dialbar .cfcrm-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#dbe3ef}
.cfcrm-dialbar .cfcrm-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff}
.cfcrm-dialbar .cfcrm-btn.primary{background:#e8622a;border-color:#e8622a;color:#fff}
/* table header rows wear the navy band too (Calls, Call queue, Shared pool, …) */
.cfcrm-table thead th{background:linear-gradient(135deg,#23365c 0%,#16213c 60%,#0f1a30 100%);color:#dbe3ef;
  border-bottom:0;font-weight:800;letter-spacing:.06em;font-size:11px;padding:12px 12px}
.cfcrm-table thead th:first-child{border-radius:10px 0 0 10px}
.cfcrm-table thead th:last-child{border-radius:0 10px 10px 0}
.cfcrm-table.cfcrm-stack thead{display:table-header-group}
@media(max-width:700px){.cfcrm-table.cfcrm-stack thead{display:none}}
.cfcrm-table thead th{background:#16213c}   /* flat: a gradient restarts in every cell and shows seams */
/* section headings (My callbacks, Call queue, Calls, Meetings) wear the navy band */
.cfcrm-navhead,.cfcrm-clienthead{
  background:radial-gradient(circle 147px at calc(100% - 128px) 32px,rgba(249,115,22,.35),transparent),
             linear-gradient(135deg,#23365c 0%,#16213c 60%,#0f1a30 100%);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px 16px;color:#fff}
.cfcrm-navhead{margin:-4px -4px 12px}
.cfcrm-navhead h3,.cfcrm-clienthead h3{color:#fff;margin:0}
.cfcrm-navhead p,.cfcrm-clienthead p{color:#b9c4d6;margin:3px 0 0}
.cfcrm-clienthead .cfcrm-clientname{color:#ffb894}
.cfcrm-clienthint{color:#b9c4d6}
/* CRM page header stays plain (navy band is My Day's only) */
.cfcrm-head h1,.cfcrm-title h1{font-size:22px}
.cfcrm-head h1,.cfcrm-title h1{font-size:22px!important;font-weight:800!important;letter-spacing:-.02em;line-height:1.2;margin:0}
.cfcrm-title p{font-size:13px!important}

/* ============================================================================
   PIPELINE BOARD — keep every stage an equal, readable column (Rushi, 24 Sep 2026).
   When one stage held all the leads (e.g. a fresh 973-lead import all in "New"),
   the board gave that column the whole width — cards rendered ~1000px wide — and
   folded the empty stages to 44px bars. This restores a normal kanban: equal
   columns that fill the board and scroll sideways when they don't fit. CSS ONLY —
   drag-to-move and click-to-open are untouched; the phone swipe view is preserved.
   Scoped to .cfcrm-kanban (the Sales Funnel board); the admin Lead Management
   board uses .cfcrm-board without .cfcrm-kanban, so it is not affected.
   ============================================================================ */
@media(min-width:651px){
  .cfcrm-board.cfcrm-kanban{grid-template-columns:none!important;grid-auto-flow:column!important;
    grid-auto-columns:minmax(210px,1fr)!important}
}
/* empty stages: normal-width columns with a horizontal label instead of a folded 44px bar */
.cfcrm-kanban .cfcrm-col-empty{padding:8px!important;align-items:stretch!important;justify-content:flex-start!important}
.cfcrm-kanban .cfcrm-colfold{writing-mode:horizontal-tb!important;transform:none!important;flex-direction:row!important;
  justify-content:space-between!important;align-items:center!important;gap:8px!important;padding:9px 10px!important;width:100%!important}
.cfcrm-kanban .cfcrm-colfold b{padding:2px 9px!important}

/* ============================================================================
   SALES FUNNEL DASHBOARD — design-system pass (Rushi, 24 Sep 2026). CSS-only.
   Gradient title, orange-gradient primary button, brand-orange period pills, and
   UNIFORM "At a glance" cards: colour outlines removed, one background, one value
   colour/size/font. The navy "My numbers" hero stays. No JS logic touched.
   ============================================================================ */
.cfcrm-title h1{background:linear-gradient(92deg,#FF8A50,#FA510F 55%,#E8622A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.cfcrm-btn.primary{background:linear-gradient(135deg,#F0733B,#FA510F);border-color:transparent;color:#fff;
  box-shadow:0 8px 18px -8px rgba(250,81,15,.55)}
.cfcrm-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#FA510F,#E8622A);border-color:transparent}
.cfcrm-rangebtn.on,.cfcrm-hero .cfcrm-rangebtn.on{background:#FA510F;border-color:#FA510F;color:#fff}
/* uniform At-a-glance cards — no colour outline, same bg / value colour / size / font */
.cfcrm-ov{background:#f7f9fb!important;border-left-width:1px!important;border-left-color:#e7eaf0!important}
.cfcrm-ov:hover{border-color:#FA510F!important;box-shadow:0 10px 24px -10px rgba(250,81,15,.28)!important}
.cfcrm-ov .cfcrm-ov-value{color:#172033!important}

/* ============================================================================
   PIPELINE FILTER CHIPS — fix (Rushi, 24 Sep 2026). CSS-only.
   1) Active chip uses brand #FA510F, not the old rust #e8622a, so New/Warm/etc.
      all highlight in the same brand orange.
   2) A 0-count temperature chip (Hot/Cold with 0 leads) can no longer be clicked
      ON — clicking one filtered the board to an empty temperature, which is what
      left "Cold" a stuck filter showing an empty board. If a 0-count chip is
      already on, it stays clickable so you can turn it back off.
   ============================================================================ */
.cfcrm-pipehead .cfcrm-chip.on,
.cfcrm-pipehead .cfcrm-chip.stage.on,
.cfcrm-pipehead .cfcrm-chip.hot.on,
.cfcrm-pipehead .cfcrm-chip.warm.on,
.cfcrm-pipehead .cfcrm-chip.cold.on{background:#FA510F;border-color:#FA510F;color:#fff}
.cfcrm-pipehead .cfcrm-chip.zero:not(.on){opacity:.4;pointer-events:none}

/* ===== Sales reporting: All Call Logs, Recordings, Meeting Schedule =====
   Built on the workspace's own tokens — same orange, same card, same table —
   so these pages read as part of the app rather than a bolted-on section. */
.cfcrm-link{color:#c2410c;font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
.cfcrm-link:hover{border-bottom-color:#c2410c}
.cfcrm-dir{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;text-transform:uppercase}
.cfcrm-dir.out{background:#eef2f7;color:#475569}
.cfcrm-dir.in{background:#e0f2fe;color:#0369a1}
/* meeting status — "awaiting an outcome" is amber on purpose: it is not a result,
   it is a meeting whose result nobody has recorded yet */
.cfcrm-mstat{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;
  background:#eef2f7;color:#475569;white-space:nowrap}
.cfcrm-mstat.ok{background:#e7f6ec;color:#15803d}
.cfcrm-mstat.bad{background:#fdeaea;color:#b91c1c}
.cfcrm-mstat.warn{background:#fdf1e1;color:#b45309}
.cfcrm-mstat.muted{background:#f1f5f9;color:#94a3b8}
.cfcrm-seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.cfcrm-seg button{font:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:10px;
  border:1.5px solid #e2e8f0;background:#fff;color:#334155;cursor:pointer}
.cfcrm-seg button:hover{border-color:#f0b48a}
.cfcrm-seg button.on{border-color:#e8622a;background:#fff3ec;color:#c2410c}
.cfcrm-lbl{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  color:#64748b;margin:12px 0 5px}
.cfcrm-kpi.good .v{color:#15803d}
.cfcrm-kpi.bad .v{color:#b91c1c}
.cfcrm-kpi.warn .v{color:#b45309}
.cfcrm-btn.sm{font-size:11.5px;padding:4px 10px}

/* Sales Report: side-by-side charts, drill-down bands, metric definitions */
.cfcrm-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-bottom:14px}
.cfcrm-band{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;
  background:#fff;border:1.5px solid #e8edf3;border-radius:11px;padding:9px 13px;margin-bottom:7px;cursor:pointer}
.cfcrm-band:hover{border-color:#f0b48a}
.cfcrm-band.on{border-color:#e8622a;background:#fff8f4}
.cfcrm-band .nm{flex:0 0 190px;font-weight:700;font-size:13px;color:#1f2937}
.cfcrm-band .ct{font-weight:800;font-variant-numeric:tabular-nums;min-width:46px}
.cfcrm-band .tr{flex:1;height:7px;background:#eef2f7;border-radius:999px;overflow:hidden}
.cfcrm-band .tr i{display:block;height:100%;background:#94a3b8;border-radius:999px}
.cfcrm-band.ok .tr i{background:#16a34a}
.cfcrm-band.bad .tr i{background:#dc2626}
.cfcrm-band.warn .tr i{background:#d97706}
.cfcrm-band .pc{min-width:42px;text-align:right;font-size:12px;color:#64748b;font-variant-numeric:tabular-nums}
@media(max-width:640px){.cfcrm-band .nm{flex:0 0 120px}.cfcrm-band .tr{display:none}}
.cfcrm-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:9px}
.cfcrm-defs>div{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid #f1f5f9}
.cfcrm-defs b{font-size:12.5px;color:#1f2937}
.cfcrm-defs span{font-size:12px;color:#64748b;line-height:1.45}

/* The "At a glance" cards are buttons now — clicking one opens the records behind it.
   The open card stays marked so it is obvious which list is on screen. */
.cfcrm-ov{cursor:pointer;text-align:left;font:inherit}
.cfcrm-ov.on{border-color:#FA510F;box-shadow:0 10px 24px -10px rgba(250,81,15,.35)}

/* Ranked bars on Leader Dashboard and Project wise. The right-hand note carries a share or a
   count like "514 of 1007", which needs more room than the Lead overview's bare percentage. */
.cfcrm-band.srbar .nm{flex:0 0 200px}
.cfcrm-band.srbar .ct{min-width:62px}
.cfcrm-band.srbar .pc{min-width:84px;white-space:nowrap}
@media(max-width:640px){.cfcrm-band.srbar .nm{flex:0 0 130px}}

/* All Call Logs: the date chips and the two dropdowns share ONE line, wrapping only when
   the window is too narrow to hold them (Rushi, 26 Sep 2026). */
.cfcrm-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0 14px}
.cfcrm-toolbar .cfcrm-rangebar{margin-top:0}
.cfcrm-toolbar .cfcrm-filter{margin-bottom:0}
/* Inside that one-line toolbar the chips are a touch tighter, so the whole row still fits
   on a 1200px laptop instead of breaking onto a second line. */
.cfcrm-toolbar .cfcrm-rangebtn{padding:6px 11px;font-size:12.5px}
.cfcrm-toolbar .cfcrm-filter select{max-width:190px}
.cfcrm-toolbar .cfcrm-rangebar{gap:5px}

/* One line, always. The chips plus both pickers need more width than a 1100px window gives,
   so instead of wrapping onto a second row the toolbar stays on one line and scrolls if it
   has to (Rushi, 26 Sep 2026: "make everyone and all project in one line"). The selects are
   capped and ellipsised — a project name can be sixty characters long. */
.cfcrm-toolbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px}
.cfcrm-toolbar .cfcrm-rangebar{flex-wrap:nowrap;flex:0 0 auto}
.cfcrm-toolbar>div:not(.cfcrm-rangebar){flex:0 0 auto}
.cfcrm-toolbar select{max-width:168px;text-overflow:ellipsis}
.cfcrm-toolbar .cfcrm-rangebtn{padding:6px 10px;font-size:12px;white-space:nowrap}

/* Name search under the "Also invite" box on the demo sheet. Typing one letter lists matching
   staff; clicking one adds them (Rushi, 5 Oct 2026). */
.cfcrm-sugs{display:flex;flex-direction:column;gap:2px;margin:4px 0 0;border:1px solid #E3E8F0;border-radius:10px;overflow:hidden;background:#fff;max-height:220px;overflow-y:auto}
.cfcrm-sug{display:flex;flex-direction:column;gap:1px;align-items:flex-start;width:100%;text-align:left;font:inherit;background:#fff;border:0;border-bottom:1px solid #F1F5F9;padding:8px 11px;cursor:pointer}
.cfcrm-sug:last-child{border-bottom:0}
.cfcrm-sug:hover,.cfcrm-sug:focus-visible{background:#FFF7F3}
.cfcrm-sug b{font-size:13px;color:#101824}
.cfcrm-sug span{font-size:11.5px;color:#64748B}
/* The call-outcome sheet refuses a click outside it — the outcome would be lost and the call
   silently counted as Connected. A short nudge says "still here, answer me" without the
   violence of a shake. Respects reduced-motion. (5 Oct 2026) */
@keyframes cfcrmNudge{0%{transform:scale(1)}30%{transform:scale(1.025)}60%{transform:scale(.995)}100%{transform:scale(1)}}
.cfcrm-sheet.cfcrm-nudge{animation:cfcrmNudge .28s ease-out;box-shadow:0 0 0 3px rgba(250,81,15,.35),0 18px 48px rgba(16,24,36,.22)}
@media (prefers-reduced-motion:reduce){.cfcrm-sheet.cfcrm-nudge{animation:none}}
/* The demo-outcome chase bar. Deliberately loud: it is asking somebody to do a job they have
   not been doing, and a quiet notice is how 54 demos went unanswered. (6 Oct 2026) */
.cfcrm-chasebar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin:0 0 14px;padding:12px 14px;border-radius:12px;border:1px solid #FBD9C7;
  background:linear-gradient(90deg,#FFF4EE,#FFFBF8)}
.cfcrm-chasebar b{display:block;font-size:14px;color:#101824}
.cfcrm-chasebar span{display:block;font-size:12px;color:#64748B;margin-top:2px}
.cfcrm-chasebar .cfcrm-btn{width:auto;white-space:nowrap}
/* Per-column Excel export on the pipeline board. Quiet until hovered — it sits on a column
   header that already carries the stage name and count, and must not compete with them. */
.cfcrm-colx{margin-left:auto;border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;
  padding:2px 5px;border-radius:6px;color:#64748B;opacity:.55;transition:opacity .15s,background .15s}
.cfcrm-colx:hover,.cfcrm-colx:focus-visible{opacity:1;background:rgba(250,81,15,.12);color:#FA510F}
.cfcrm-colx:disabled{opacity:.4;cursor:default}
/* Pipeline boards in the HR-recruiting layout (13 Oct 2026): equal cards in a grid, actions at the bottom */
.cfcrm-cardgrid{align-items:stretch}
.cfcrm-cardgrid .cfcrm-lead{margin-bottom:0;height:100%;display:flex;flex-direction:column;box-sizing:border-box;min-width:0}
.cfcrm-cardgrid .cfcrm-leadtop b{font-size:14px;line-height:1.3;overflow-wrap:anywhere;min-width:0}
.cfcrm-cardgrid .cfcrm-leadwho{font-size:12.5px;overflow-wrap:anywhere}
.cfcrm-cardgrid .cfcrm-leadmeta{font-size:11.5px;overflow-wrap:anywhere}
.cfcrm-cardgrid .cfcrm-leadactions{margin-top:auto;padding-top:10px;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.cfcrm-handed{margin-top:7px;font-size:11.5px;font-weight:700;color:#6d28d9;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;padding:4px 8px;line-height:1.35}
.cfcrm-lead.cfcrm-ro{background:#fcfbff;cursor:pointer}
.cfcrm-pipehead .cfcrm-sectionhead{flex-wrap:wrap;gap:10px}
/* board left column: stages + follow-ups (13 Oct 2026) */
.cfcrm-leftcol{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:12px;align-self:start}
.cfcrm-leftcol .ats-rail{position:static;max-height:none}
.cfcrm-fupanel{background:#f6f8fb;border:1px solid #e3e7ed;border-radius:14px;padding:8px;max-height:calc(100vh - 360px);overflow:auto}
.cfcrm-fuhead{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 8px}
.cfcrm-fuhead b{font-size:13px;color:#0f172a}
.cfcrm-fuhead span{background:#fff;border:1px solid #e3e7ed;border-radius:99px;padding:0 8px;font-size:11px;color:#64748b}
.cfcrm-fugroup{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#64748b;padding:8px 6px 4px}
.cfcrm-fugroup.late{color:#dc2626}.cfcrm-fugroup.today{color:#d97706}
.cfcrm-furow{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:9px;background:#fff;border:1px solid #edf0f4;margin-bottom:5px;cursor:pointer}
.cfcrm-furow:hover{border-color:#e8622a}
.cfcrm-furow b{display:block;font-size:12.5px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcrm-furow span{display:block;font-size:11px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcrm-furow .cfcrm-btn.sm{padding:4px 9px;flex:none}
.cfcrm-demoline{margin-top:6px;font-size:12px;font-weight:700;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:4px 8px}
.cfcrm-heatbtn{background:none;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:2px;font:inherit;color:#64748b}
.cfcrm-heatmenu{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
@media(max-width:900px){ .cfcrm-leftcol{position:static} .cfcrm-fupanel{max-height:none} }

/* ---------- sheets, redesigned (13 Oct 2026) ----------
   Sheets open on <body>, outside the funnel page, so their fields never got the page's input
   styles and showed as raw browser boxes. Every sheet's fields are styled here; sheets built by
   funSheet (.cfx) also get the house frame — gradient title, chips, cards, sticky footer. */
.cfcrm-sheet{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#111827}
.cfcrm-sheet .cfcrm-input,.cfcrm-sheet input[type=text],.cfcrm-sheet input[type=email],.cfcrm-sheet input[type=date],
.cfcrm-sheet input[type=datetime-local],.cfcrm-sheet input[type=number],.cfcrm-sheet input[type=tel],.cfcrm-sheet select,.cfcrm-sheet textarea{
  box-sizing:border-box;width:100%;min-height:42px;padding:9px 12px;border:1px solid #E5E7EB;border-radius:10px;
  background:#F9FAFB;font:inherit;font-size:14px;color:#111827;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.cfcrm-sheet textarea{min-height:84px;line-height:1.45;resize:vertical}
.cfcrm-sheet select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background:#F9FAFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center}
.cfcrm-sheet .cfcrm-input:hover,.cfcrm-sheet select:hover,.cfcrm-sheet textarea:hover{border-color:#D1D5DB}
.cfcrm-sheet .cfcrm-input:focus,.cfcrm-sheet select:focus,.cfcrm-sheet textarea:focus,.cfcrm-sheet input:focus{
  border-color:#FA510F;background:#fff;box-shadow:0 0 0 3px rgba(250,81,15,.14)}
.cfcrm-sheet .cfcrm-input::placeholder,.cfcrm-sheet textarea::placeholder{color:#9CA3AF}
.cfcrm-sheet .cfcrm-btn{border-radius:10px;min-height:40px;padding:9px 16px;font-weight:700;font-size:13.5px}
.cfcrm-sheet .cfcrm-btn.primary{background:linear-gradient(135deg,#F0733B,#FA510F);border-color:#FA510F;
  box-shadow:0 6px 16px -6px rgba(250,81,15,.55)}
.cfcrm-sheet .cfcrm-btn.primary:hover:not(:disabled){filter:brightness(1.05)}

/* the frame */
.cfcrm-sheet.cfx{max-width:560px;padding:0;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(16,24,36,.45)}
.cfcrm-sheet.cfx .cfcrm-sheet-head{position:static;margin:0;padding:20px 22px 14px;border-bottom:1px solid #F1F5F9;align-items:center}
.cfx-title{border-left:4px solid #FA510F;padding-left:12px;min-width:0}
.cfx-title h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.01em}
.cfx-hl{background:linear-gradient(92deg,#ff8a50,#FA510F 55%,#101824);-webkit-background-clip:text;background-clip:text;color:transparent}
.cfx-sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cfx-sub span{font-size:11.5px;font-weight:700;color:#64748B;background:#F1F5F9;border-radius:999px;padding:3px 9px}
.cfx-sub span.on{color:#9A3412;background:#FFF7ED}
.cfx-x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid #E5E7EB;background:#fff;color:#64748B;
  font-size:14px;cursor:pointer;display:grid;place-items:center}
.cfx-x:hover{color:#FA510F;border-color:#FA510F}
.cfx-body{padding:16px 22px 18px;overflow:auto;flex:1 1 auto;background:#fff}
.cfx-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:12px 22px;
  border-top:1px solid #F1F5F9;background:#FCFCFD}
.cfx-foot .cfcrm-err{margin:0 auto 0 0;flex:1 1 200px}

/* Book demo: three cards */
.cfx-meeting{background:#F8FAFC}
.cfx-card{background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:14px 16px 16px;margin-top:12px}
.cfx-card:first-child{margin-top:0}
.cfx-cardhead{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.cfx-cardhead b{display:block;font-size:14px;font-weight:800}
.cfx-cardhead small{display:block;font-size:11.5px;color:#94A3B8;margin-top:1px}
.cfx-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:0 0 auto}
.cfx-field{display:block;margin-top:12px}
.cfx-field .cfcrm-flabel{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#64748B;margin-bottom:6px}
.cfx-help{font-size:11.5px;color:#94A3B8;margin-top:5px}
.cfx-grid2{display:grid;grid-template-columns:1fr 1.25fr;gap:12px}
.cfx-meeting .cfcrm-timepick{gap:6px}
.cfx-meeting .cfcrm-timepick select{padding-left:10px;padding-right:24px;background-position:right 8px center}
.cfx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cfx-chip{border:1px solid #E5E7EB;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;
  font-weight:700;color:#334155;cursor:pointer}
.cfx-chip:hover{border-color:#FA510F;color:#FA510F}
.cfx-chip.on{background:linear-gradient(135deg,#F0733B,#FA510F);border-color:#FA510F;color:#fff}
.cfx-meeting .cfcrm-when{margin-top:12px;border-radius:12px;padding:10px 13px;font-size:13.5px;display:flex;align-items:center;gap:8px}
.cfx-meeting .cfcrm-when:before{content:"🗓";font-size:15px}
.cfx-meeting .cfcrm-guests{margin:0 0 8px}
/* options as rows with a switch on the right */
.cfx-toggle{display:flex !important;align-items:center;justify-content:space-between;gap:12px;margin-top:10px !important;
  padding:11px 13px;border:1px solid #F1F5F9;border-radius:12px;background:#F8FAFC;cursor:pointer;font-size:13.5px}
.cfx-toggle b{display:block;font-weight:700;font-size:13.5px;color:#111827}
.cfx-toggle small{display:block;font-size:11.5px;color:#94A3B8;margin-top:1px}
.cfx-switch{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:40px !important;height:23px !important;margin:0;
  border-radius:999px;background:#CBD5E1;position:relative;cursor:pointer;transition:background .15s}
.cfx-switch:before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.cfx-switch:checked{background:#FA510F}
.cfx-switch:checked:before{transform:translateX(17px)}
.cfx-switch:disabled{opacity:.5;cursor:not-allowed}
.cfx-switch:focus-visible{box-shadow:0 0 0 3px rgba(250,81,15,.25)}
.cfx-note{font-size:11.5px !important;color:#64748B !important;margin:6px 2px 0 !important;line-height:1.45}
.cfx-note.warn{color:#92400E !important;background:#FFFBEB;border:1px solid #FDE68A;border-radius:10px;padding:8px 11px;margin:8px 0 0 !important}

@media (max-width:600px){
  .cfcrm-sheet-back:has(.cfx){align-items:flex-end;padding:0}
  .cfcrm-sheet.cfx{max-width:none;border-radius:20px 20px 0 0;max-height:94vh}
  .cfx-body{padding:14px 14px 16px}
  .cfcrm-sheet.cfx .cfcrm-sheet-head{padding:16px 14px 12px}
  .cfx-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .cfx-foot .cfcrm-btn{flex:1 1 0}
  .cfx-foot .cfcrm-err{flex-basis:100%}
  .cfx-grid2{grid-template-columns:1fr}
  .cfx-card{padding:12px 13px 14px}
}
@media (prefers-color-scheme:dark){ .cfcrm-sheet{color-scheme:light} }
/* the pie + legend wrap on a phone instead of pushing the page 40px wider (13 Oct 2026) */
@media (max-width:600px){
  .cfcrm-pie{flex-wrap:wrap;justify-content:center}
  .cfcrm-piefig{max-width:100%}
  .cfcrm-piefig svg{max-width:100%;height:auto}
}
/* date / time chips scroll sideways on a phone rather than stacking into three rows */
@media (max-width:600px){
  .cfx-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-2px;padding:0 2px 2px}
  .cfx-chips::-webkit-scrollbar{display:none}
  .cfx-chip{flex:0 0 auto}
}

/* ---------- date + time picker that saves as you pick (index.html cfDtEnhance, 13 Oct 2026) ---------- */
.cfdt-native{display:none !important}
.cfdt{display:block;min-width:0;max-width:100%}
.cfdt-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cfdt .cfdt-date{flex:1 1 140px;min-width:128px;width:auto !important;margin:0 !important}
.cfdt-time{display:flex;align-items:center;gap:4px;flex:1 1 180px;min-width:0}
.cfdt .cfdt-sel{flex:1 1 0;min-width:54px;width:auto !important;margin:0 !important;text-align:center}
.cfdt-sep{font-weight:800;color:#94A3B8}
.cfdt-clear{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid #E5E7EB;background:#fff;color:#94A3B8;
  font-size:12px;cursor:pointer;display:grid;place-items:center;padding:0}
.cfdt-clear:hover{color:#B91C1C;border-color:#FCA5A5}
/* The day/time chips used to be a sideways scroller. Inside a grid or flex parent a scrolling
   child still reports its full width (min-width defaults to auto), so it pushed the New Task
   drawer wider than the screen and the WHOLE PANEL scrolled left-right (Rushi, 16 Oct 2026).
   They wrap onto a second line instead, and can never widen their parent. */
.cfdt-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;padding-bottom:2px;min-width:0;max-width:100%}
.cfdt-chips::-webkit-scrollbar{display:none}
.cfdt-gap{flex:0 0 6px}
.cfdt-chip{flex:0 0 auto;border:1px solid #E5E7EB;background:#fff;border-radius:999px;padding:4px 10px;font:inherit;
  font-size:12px;font-weight:700;color:#334155;cursor:pointer;white-space:nowrap}
.cfdt-chip:hover{border-color:#FA510F;color:#FA510F}
.cfdt-chip.on{background:linear-gradient(135deg,#F0733B,#FA510F);border-color:#FA510F;color:#fff}
.cfdt-echo{margin-top:6px;font-size:12px;font-weight:700;color:#15803D}
.cfdt-echo.empty{color:#94A3B8;font-weight:600}

/* ---------- Lead Management → Pipeline board (13 Oct 2026) ----------
   The "every stage shares the width" rule gave 11 stages ~120px each, and names broke one letter
   per line. Readable 260px columns now, the board scrolls sideways, each column scrolls on its own,
   and the card stacks name / project / owner / actions instead of squeezing them into one row. */
.cfcrm-board.cfcrm-mgrboard{grid-auto-flow:column !important;grid-template-columns:none !important;
  grid-auto-columns:minmax(250px,270px) !important;gap:12px;overflow-x:auto !important;align-items:start;
  padding:2px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
.cfcrm-mgrboard .cfcrm-col{display:flex;flex-direction:column;max-height:calc(100vh - 250px);min-height:200px;
  padding:8px;border-radius:14px;scroll-snap-align:start}
.cfcrm-mgrboard .cfcrm-colhead{position:sticky;top:0;z-index:1;padding:9px 11px;border-radius:10px;margin-bottom:8px}
.cfcrm-mgrboard .cfcrm-colhead-t{font-size:13px;font-weight:800;align-items:center;gap:8px}
.cfcrm-mgrboard .cfcrm-colhead-t>span:first-child{overflow-wrap:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcrm-mgrboard .cfcrm-colhead-t>span:last-child{font-size:12px;padding:2px 9px}
.cfcrm-mgrboard .cfcrm-colbody{overflow-y:auto;overflow-x:hidden;padding-right:2px;scrollbar-width:thin}
.cfcrm-mgrboard .cfcrm-lead{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:12px !important;margin-bottom:8px;cursor:grab}
.cfcrm-mgrboard .cfcrm-lead:hover{border-color:#CBD5E1;box-shadow:0 4px 14px -6px rgba(16,24,36,.25)}
.cfcrm-mgrboard .cfcrm-leadtop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cfcrm-mgrboard .cfcrm-leadtop b{font-size:14px;line-height:1.3;min-width:0;overflow-wrap:break-word;word-break:normal}
.cfcrm-mgrboard .cfcrm-leadtop .cfcrm-pill{flex:none}
.cfcrm-mgrboard .cfcrm-lead>p{margin:4px 0 0;font-size:12px;color:#64748B;line-height:1.35;overflow-wrap:break-word}
.cfcrm-mgrboard .cfcrm-leadactions{display:flex !important;flex-wrap:nowrap !important;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.cfcrm-mgrboard .cfcrm-leadactions>.cfcrm-muted{flex:1 1 auto;min-width:0;margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcrm-mgrboard .cfcrm-leadactions>div{flex:none}
.cfcrm-mgrboard .cfcrm-leadactions .cfcrm-btn.call{min-width:0;padding:7px 12px;font-size:12.5px;white-space:nowrap}
.cfcrm-mgrboard .cfcrm-icobtn{width:30px;height:30px}

/* ---------- pipeline header controls (13 Oct 2026) ----------
   Period as pills + a From → To range; the closer picker and settings button wear the dark
   header instead of white browser boxes. */
.cfph-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.cfcrm-pipehead .cfph-range{margin-top:12px;flex-wrap:wrap}
.cfph-select{appearance:none;-webkit-appearance:none;height:38px;min-width:170px;max-width:240px;padding:0 34px 0 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.22);font:inherit;font-size:13.5px;font-weight:700;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center}
.cfph-select:hover{background-color:rgba(255,255,255,.14)}
.cfph-select:focus{outline:none;box-shadow:0 0 0 3px rgba(250,81,15,.35);border-color:#FA510F}
.cfph-select option{color:#111827;background:#fff}
.cfph-btn{height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.cfph-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.cfph-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;color:#cbd5e1;font-size:12.5px;font-weight:700}
.cfph-date{height:36px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);
  color:#fff;font:inherit;font-size:13.5px;color-scheme:dark}
.cfph-date:focus{outline:none;border-color:#FA510F;box-shadow:0 0 0 3px rgba(250,81,15,.3)}
.cfph-clear{height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#cbd5e1;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.cfph-clear:hover{color:#fff;border-color:#FA510F}
.cfph-note{margin-top:8px;font-size:11.5px;color:#94a3b8}
@media (max-width:700px){ .cfph-tools{justify-content:flex-start;margin-top:10px} .cfph-select{min-width:0;flex:1 1 160px} }
.cfcrm-pipehead .cfcrm-chips{margin-top:12px}
@media (max-width:700px){
  .cfcrm-pipehead .cfph-range{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .cfcrm-pipehead .cfph-range::-webkit-scrollbar{display:none}
  .cfcrm-pipehead .cfph-range .cfcrm-rangebtn{flex:0 0 auto}
}

/* ---------- pipeline cards = HR → Recruiting cards (Rushi, 14 Oct 2026) ----------
   Same type sizes, avatar, pills, dashed footer and small labelled buttons as .ats-card2;
   the Call button is a light green instead of the dark one. */
.cfcrm-ucard{background:#fff !important;border:1px solid #e5e9f2 !important;border-radius:12px !important;padding:10px 11px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;font-size:12px;display:flex;flex-direction:column}
.cfcrm-ucard:hover{box-shadow:0 8px 20px -10px rgba(16,24,40,.22) !important;border-color:#d5dbe8 !important}
.cfcrm-ucard.cfcrm-lead-late{border-color:#fecaca !important;background:#fffafa !important}
.cfuc-top{display:flex;gap:9px;align-items:flex-start}
.cfuc-av{flex:none;width:34px;height:34px;border-radius:50%;background:#FA510F1f;color:#E8622A;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;letter-spacing:.02em}
.cfuc-id{flex:1;min-width:0}
.cfuc-name{font-weight:800;font-size:13.5px;color:#0f172a;line-height:1.25;overflow-wrap:break-word}
.cfuc-sub{font-size:11.5px;color:#64748b;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfcrm-ucard .cfcrm-heatbtn{flex:none;margin-left:auto}
.cfcrm-ucard .cfcrm-heatbtn .cfcrm-pill,.cfcrm-ucard .cfuc-top>.cfcrm-pill{font-size:10px;padding:2px 8px}
.cfuc-meta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:7px}
.cfuc-pill{display:inline-flex;align-items:center;gap:3px;background:#f1f5f9;color:#475569;font-size:10px;font-weight:700;
  border-radius:99px;padding:2px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfuc-pill.val{background:#ecfdf5;color:#047857}
.cfuc-pill.demo{background:#e0f2fe;color:#0369a1}
.cfuc-pill.due{background:#fff7ed;color:#c2410c}
.cfuc-pill.late{background:#fee2e2;color:#b91c1c}
.cfuc-next{margin-top:6px;font-size:11px;color:#475569}
.cfcrm-ucard .cfcrm-handed{margin-top:6px;font-size:11px}
.cfuc-foot{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed #eef1f7;font-size:11px;color:#64748b}
.cfuc-foot .who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfuc-foot .late{color:#b91c1c;font-weight:700}
.cfcrm-ucard .cfuc-acts{display:flex !important;gap:5px !important;flex-wrap:wrap !important;align-items:center;margin-top:8px !important;justify-content:flex-start !important}
.cfcrm-ucard .cfuc-acts>span{display:contents}
.cfuc-btn,.cfcrm-ucard .cfuc-acts .cfcrm-icobtn{height:auto !important;width:auto !important;min-width:0;display:inline-flex;align-items:center;gap:4px;
  padding:4px 8px !important;font:inherit;font-size:11px !important;font-weight:600;color:#334155;background:#fff;border:1px solid #e2e8f0 !important;
  border-radius:8px !important;cursor:pointer;text-decoration:none;line-height:1.3}
.cfuc-btn:hover,.cfcrm-ucard .cfuc-acts .cfcrm-icobtn:hover{border-color:#cbd5e1 !important;background:#f8fafc}
.cfcrm-ucard .cfuc-acts .cfcrm-icobtn svg{width:13px;height:13px}
.cfcrm-ucard .cfuc-acts .cfcrm-icobtn.wa{color:#128C7E}
.cfcrm-ucard .cfuc-acts .cfcrm-icobtn.wa::after{content:"WhatsApp"}
.cfcrm-ucard .cfuc-acts .cfcrm-icobtn.mail::after{content:"Email"}
/* the light green call */
.cfcrm-ucard .cfuc-acts .cfcrm-btn.call{background:#e8f5e9 !important;border:1px solid #bfe3c4 !important;color:#2e7d32 !important;
  padding:4px 10px !important;font-size:11px !important;font-weight:700;border-radius:8px !important;min-width:0 !important;box-shadow:none !important;line-height:1.3}
.cfcrm-ucard .cfuc-acts .cfcrm-btn.call:hover{background:#dcefdd !important;border-color:#9fd3a6 !important}
.cfcrm-ucard .cfuc-acts .cfcrm-join{padding:4px 10px !important;font-size:11px !important;border-radius:8px !important}
.cfcrm-ucard .cfuc-acts>*,.cfcrm-ucard .cfuc-acts>span>*{align-self:center}
.cfcrm-ucard .cfuc-acts .cfuc-btn,.cfcrm-ucard .cfuc-acts .cfcrm-icobtn,.cfcrm-ucard .cfuc-acts .cfcrm-btn.call,.cfcrm-ucard .cfuc-acts .cfcrm-join{
  min-height:30px !important;height:30px !important;box-sizing:border-box;align-items:center;display:inline-flex !important}
/* uniform cards (Rushi, 14 Oct 2026): long client names stop at one line with "…" (full name on
   hover), every row of the card is one line, and the buttons sit at the bottom of every card. */
.cfcrm-ucard .cfuc-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.cfcrm-ucard .cfuc-meta{flex-wrap:nowrap;overflow:hidden}
.cfcrm-ucard .cfuc-pill{flex:0 1 auto;min-width:0}
.cfcrm-ucard .cfuc-next,.cfcrm-ucard .cfcrm-handed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfcrm-ucard .cfuc-foot>span:last-child{flex:none;white-space:nowrap}
.cfcrm-cardgrid{align-items:stretch !important}
.cfcrm-cardgrid>.cfcrm-ucard{height:100%;min-height:208px;box-sizing:border-box}
.cfcrm-ucard .cfuc-acts{margin-top:auto !important;padding-top:8px}
.cfcrm-ucard .cfuc-sub{display:flex;align-items:baseline;gap:4px;white-space:nowrap;overflow:hidden}
.cfuc-who{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cfuc-dot{flex:none}
.cfuc-ph{flex:none;font-variant-numeric:tabular-nums}
.cfuc-av{font-size:11.5px !important;letter-spacing:0 !important}
/* search inside the pipeline header (14 Oct 2026) */
.cfph-search{height:38px;width:280px;max-width:100%;padding:0 14px 0 36px;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  color:#fff;font:inherit;font-size:13.5px;
  background:rgba(255,255,255,.08) 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='%23cbd5e1' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center}
.cfph-search::placeholder{color:#94a3b8}
.cfph-search:focus{outline:none;border-color:#FA510F;box-shadow:0 0 0 3px rgba(250,81,15,.3);background-color:rgba(255,255,255,.12)}
.cfph-search::-webkit-search-cancel-button{filter:invert(1)}
.cfph-check{display:inline-flex;align-items:center;gap:6px;color:#cbd5e1;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.cfph-check input{accent-color:#FA510F;width:15px;height:15px}
@media (max-width:700px){ .cfph-search{width:100%;flex:1 1 100%} }
.cfph-search:focus-visible{outline:none !important}
/* the callback / overdue line — never truncated (14 Oct 2026) */
.cfuc-due{margin-top:6px;font-size:11.5px;font-weight:700;line-height:1.35;border-radius:8px;padding:3px 8px;white-space:normal}
.cfuc-due.due{background:#fff7ed;color:#c2410c}
.cfuc-due.late{background:#fee2e2;color:#b91c1c}
.cfuc-due.none{visibility:hidden}
.cfcrm-cardgrid>.cfcrm-ucard{min-height:232px}
/* Call queue header: search on the right */
.cfcrm-clienthead>.cfph-search{margin-left:auto;align-self:center}
.cfcrm-clienthead>.cfph-tools{align-self:center}
/* Email on a lead with no address yet — offered, but visibly "add one" (14 Oct 2026) */
.cfcrm-icobtn.mail.noaddr{color:#94a3b8 !important;border-style:dashed !important}
.cfcrm-ucard .cfuc-acts .cfcrm-icobtn.mail.noaddr::after{content:"+ Email"}
.cfcrm-ucard .cfuc-acts .cfuc-btn.ico{width:30px !important;padding:0 !important;justify-content:center;font-size:14px !important}
/* a lead WITH an email reads differently at a glance: blue "✓ Email" vs grey dashed "+ Email" (14 Oct 2026) */
.cfcrm-icobtn.mail.hasaddr{background:#eff6ff !important;border:1px solid #bfdbfe !important;color:#1d4ed8 !important}
.cfcrm-icobtn.mail.hasaddr:hover{background:#dbeafe !important;border-color:#93c5fd !important}
.cfcrm-ucard .cfuc-acts .cfcrm-icobtn.mail.hasaddr::after{content:"✓ Email";font-weight:700}

/* post-call update clock (21 Oct 2026) — counts down the 90 s allowed; turns red and asks why past it */
.cfcrm-wrapclock{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;background:#eef6ee;color:#2f6b3a}
.cfcrm-wrapclock.warn{background:#fff3e0;color:#a35a00}
.cfcrm-wrapclock.over{background:#fdeaea;color:#b3261e}
.cfcrm-wrapwhy{margin-top:12px;padding:12px;border:1px solid #f0c9c6;border-radius:12px;background:#fff8f7}
.cfcrm-wrapwhy-t{font-size:13px;font-weight:600;color:#b3261e;margin-bottom:8px}
.cfcrm-dispbtn.on{border-color:#e8622a;background:#fff3ec}

/* Closed — Won: amount and proof (22 Oct 2026) */
.cfuc-pill.won-ok{background:#e8f5ea;color:#2f6b3a;border:0;font-weight:700;cursor:pointer}
.cfuc-pill.won-pend{background:#fff3e0;color:#a35a00;border:0;font-weight:700;cursor:pointer}
.cfuc-pill.won-miss{background:#fdeaea;color:#b3261e;border:0;font-weight:700;cursor:pointer}
.cfcrm-wonproof{margin-top:8px;padding:10px 12px;border:1px solid #e6e9ef;border-radius:10px;background:#f8f9fb;font-size:13px}
.cfcrm-wonproof a{color:#b4461a;font-weight:600}