/* selliora-search.css — top search bar: chips inside the box, the
   Filters · Group By · Favorites panel, and grouped rows in the leads table.
   Pairs with selliora-search.js (r124). */

/* ── the bar itself: chips + input in one bordered box ── */
.topbar .tb-search.sp-bar{border:1px solid var(--bd2);border-radius:6px;background:var(--s);min-height:40px;
  padding:3px 34px 3px 36px;display:flex;flex-wrap:wrap;align-items:center;gap:4px;box-sizing:border-box}
.topbar .tb-search.sp-bar:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-l)}
.topbar .tb-search.sp-bar input{flex:1 1 140px;min-width:120px;width:auto;height:32px;border:0!important;box-shadow:none!important;
  padding:0 6px!important;background:transparent!important;border-radius:0!important}
.topbar .tb-search.sp-bar input:focus{border:0;box-shadow:none}
[data-theme="dark"] .topbar .tb-search.sp-bar{background:var(--s2)}
.topbar .tb-search.sp-bar .tb-sico{top:50%;transform:translateY(-50%)}

.sp-facets{display:contents}
.sp-facet{display:inline-flex;align-items:center;gap:5px;max-width:420px;padding:0 4px 0 0;border-radius:5px;
  background:var(--pl,var(--s2));color:var(--t);font-size:12px;font-weight:500;line-height:1;height:28px;overflow:hidden}
.sp-facet-i{display:inline-grid;place-items:center;width:24px;height:28px;background:var(--acc);color:#fff;flex:none}
.sp-facet-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.sp-facet-x{cursor:pointer;color:var(--t3);font-size:15px;padding:0 4px;border-radius:4px;line-height:1}
.sp-facet-x:hover{color:var(--r);background:rgba(0,0,0,.06)}

.sp-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:5px;
  background:transparent;color:var(--t3);display:grid;place-items:center;cursor:pointer;font:inherit}
.sp-toggle:hover,.sp-toggle.on{background:var(--acc);color:#fff}
.sp-toggle .sp-chev{transition:transform .16s ease}
.sp-toggle.on .sp-chev{transform:rotate(180deg)}

/* ── the panel ── */
.sp-panel{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:1250;min-width:min(720px,calc(100vw - 32px));max-width:calc(100vw - 32px);
  background:var(--card,var(--s));border:1px solid var(--bd);border-radius:10px;box-shadow:0 14px 40px rgba(15,23,42,.16);
  padding:12px 4px;grid-template-columns:repeat(3,minmax(190px,1fr));gap:0}
.sp-panel.on{display:grid;animation:spIn .14s ease}
@keyframes spIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sp-col{padding:0 12px;border-right:1px solid var(--bd);min-width:0}
.sp-col:last-child{border-right:0}
.sp-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--t);padding:2px 8px 10px}
.sp-h svg{color:var(--acc)}
.sp-item{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:6px;font-size:13px;color:var(--t2);cursor:pointer;
  user-select:none;line-height:1.25}
.sp-item:hover{background:var(--s2);color:var(--t)}
.sp-item.on{color:var(--t);font-weight:600}
.sp-item.on .sp-tick{color:var(--acc)}
.sp-tick{display:inline-block;width:12px;flex:none;font-size:11px;font-weight:700;color:transparent}
.sp-sep{height:1px;background:var(--bd);margin:6px 8px}
.sp-sub .sp-chev{margin-left:auto;color:var(--t3);transition:transform .16s ease}
.sp-sub.open .sp-chev{transform:rotate(180deg)}
.sp-subs{padding:2px 0 4px 18px}
.sp-subs .sp-item{padding:6px 8px;font-size:12.5px}
.sp-select,.sp-input{width:100%;font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--bd2);border-radius:6px;background:var(--s);color:var(--t);box-sizing:border-box}
.sp-save{display:flex;gap:6px;align-items:center;padding-left:8px}
.sp-save .btn{flex:none}
.sp-fav .sp-fav-n{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-fav-star{color:var(--t3);font-size:13px;padding:0 3px;border-radius:4px}
.sp-fav-star.on,.sp-fav-star:hover{color:var(--acc)}
.sp-fav-x{color:var(--t3);font-size:15px;padding:0 4px;border-radius:4px}
.sp-fav-x:hover{color:var(--r)}
@media(max-width:820px){.sp-panel{grid-template-columns:1fr;min-width:0;width:calc(100vw - 32px)}.sp-col{border-right:0;border-bottom:1px solid var(--bd);padding-bottom:8px;margin-bottom:8px}.sp-col:last-child{border-bottom:0}}

/* ── grouped rows in the leads table ── */
#page-leads tr.sp-grp td{background:var(--s2);padding:8px 12px;border-bottom:1px solid var(--bd);cursor:pointer;font-size:13px}
#page-leads tr.sp-grp:hover td{background:var(--pl,var(--s2))}
#page-leads tr.sp-grp.open td{border-bottom-color:var(--bd2)}
.sp-grp-in{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--t)}
.sp-caret{display:inline-block;width:12px;color:var(--t3);font-size:12px}
.sp-grp-n{font-size:11px;font-weight:700;color:var(--t2);background:var(--s);border:1px solid var(--bd2);border-radius:10px;padding:0 7px;line-height:18px}

/* ── Leads: one control bar (r129) ──────────────────────────────────────
   Subtitle + chip bar + "Show N rows / Columns" were three stacked strips.
   They are one row now. #sv-leads-row (built in app.js) carries the card;
   the page-size bar inside it goes plain so it reads as a single control. */
#page-leads #sv-leads-row > #lead-pagesize{
  flex:0 0 auto; width:auto!important; margin:0!important; gap:10px;
}
#page-leads #sv-leads-row > #lead-pagesize > div{margin-bottom:0!important}
#page-leads #sv-leads-row > #lead-pagesize [data-colpick]{margin-left:0!important}
/* the sentence above the bar said what the sidebar already says */
#page-leads > .ps, #page-leads .pg-head > .ps{display:none}
/* opportunities view borrows this page and has its own bar */
#page-leads.lo-opps-active #sv-leads-row{display:none!important}
@media(max-width:760px){
  #page-leads #sv-leads-row > #lead-pagesize{width:100%!important}
}

/* ── "Show N rows" moved under the table (r130) ───────────────────────── */
#page-leads .lead-footbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:8px; font-size:12px; color:var(--t2);
}
#page-leads .lead-footbar > #lead-pager{flex:1 1 auto; min-width:0; margin:0}
#page-leads .lead-footbar > .lead-rowsize{
  flex:0 0 auto; margin:0!important; margin-left:auto!important;
}
/* the top bar keeps only Columns, so it should not reserve the sizer's gap */
#page-leads #sv-leads-row > #lead-pagesize:empty{display:none}
@media(max-width:760px){
  #page-leads .lead-footbar{gap:8px}
  #page-leads .lead-footbar > .lead-rowsize{margin-left:0!important}
}

/* ── Leads: one flat surface, no boxes (r131) ──────────────────────────
   The control bar and the table each sat in their own white, rounded,
   bordered card on a grey page - boxes inside a box. Now the leads page IS
   the surface: the cards lose their border and radius, and the page takes
   the same colour, so nothing is drawn around the content.

   The table keeps that surface colour rather than going transparent. Its
   header row and its frozen columns (checkbox, Name, Action) are sticky, and
   a sticky cell must stay opaque or the columns scrolling underneath show
   through it. */
#page-leads{background:var(--s)}
#page-leads #sv-leads-row{
  background:transparent!important; border:0!important; border-radius:0!important;
  box-shadow:none!important; padding-left:0!important; padding-right:0!important;
}
#page-leads #lead-table-wrap{
  background:var(--s)!important; border:0!important; border-radius:0!important; box-shadow:none!important;
}
#page-leads #lead-table-wrap thead th{background:var(--s)}
#page-leads .lead-footbar{padding-left:0; padding-right:0}
/* the line under the last row is what closes the list now that the box is gone */
#page-leads #lead-table-wrap tbody tr:last-child > td{border-bottom:1px solid var(--bd)!important}

/* ── Leads: 6px from the top bar, 6px at the bottom (r132) ─────────────
   The page kept ~22px of padding under the fixed top bar, plus the sticky
   header's own padding, so the controls sat well below the bar. Now the
   first row of controls is exactly 6px under it, and the surface ends 6px
   after the last line of content.

   The status bar at the foot of the window is fixed, so the room it needs
   moves from padding (inside the white surface) to margin (outside it): the
   surface still ends 6px after the content, and a long list can still scroll
   its last row clear of the status bar. */
#app #page-leads{
  padding-top:calc(var(--tbh, 60px) + 6px)!important;
  padding-bottom:6px!important;
}
#page-leads .pg-head{
  padding-top:0!important; margin-top:0!important; padding-bottom:0!important;
  background:var(--s)!important;
}
#page-leads #sv-leads-row{margin-top:0!important}
body.has-statusbar #page-leads{padding-bottom:6px!important; margin-bottom:34px}
body.has-banner #page-leads{padding-top:calc(var(--tbh, 60px) + 6px + 40px)!important}

/* ── Leads: toolbar icons drawn the same way (r136: r132 + these icons only) ────────────────────
   Refresh / filter / sort, the six view buttons and Columns share one look:
   34x32 (Columns 32 tall), 1px border, 8px corners, 6px apart. They carry
   no background of their own - they sit on whatever the page is. The active
   view is filled with the accent. */
#page-leads #sv-leads-row{gap:6px}
#page-leads #sv-leads-row .chipbar-right{gap:6px}
#page-leads #sv-leads-row #sv-leads-bar .cbtn-group{
  display:flex!important; gap:6px!important; border:0!important; border-radius:0!important;
  background:transparent!important; box-shadow:none!important; overflow:visible!important; padding:0!important;
}
#page-leads #sv-leads-row .chipbar-right > .cbtn,
#page-leads #sv-leads-row #sv-leads-bar .cbtn{
  width:34px!important; height:32px!important; min-width:34px!important; padding:0!important;
  display:inline-grid!important; place-items:center!important;
  border:1px solid var(--bd2)!important; border-radius:8px!important;
  background:transparent!important; color:var(--t2)!important; box-shadow:none!important; margin:0!important;
}
#page-leads #sv-leads-row #sv-leads-bar .cbtn + .cbtn{border-left:1px solid var(--bd2)!important}
#page-leads #sv-leads-row #sv-leads-bar .cbtn::before,
#page-leads #sv-leads-row #sv-leads-bar .cbtn::after{display:none!important}
#page-leads #sv-leads-row .chipbar-right > .cbtn:hover,
#page-leads #sv-leads-row #sv-leads-bar .cbtn:hover{border-color:var(--acc)!important; color:var(--acc)!important}
#page-leads #sv-leads-row .chipbar-right > .cbtn.on,
#page-leads #sv-leads-row #sv-leads-bar .cbtn.on{
  background:var(--acc)!important; border-color:var(--acc)!important; color:#fff!important;
}
#page-leads #sv-leads-row [data-colpick] .btn{
  height:32px!important; padding:0 12px!important; border-radius:8px!important;
  border:1px solid var(--bd2)!important; background:transparent!important; color:var(--t)!important;
  display:inline-flex!important; align-items:center!important; gap:6px!important; font-size:13px!important; line-height:1!important;
}
#page-leads #sv-leads-row [data-colpick] .btn:hover{border-color:var(--acc)!important; color:var(--acc)!important}
/* The page no longer stretches to the bottom of the window (that was r133):
   it ends 6px after the content, as set in r132. */

/* ── Leads: control bar on the page colour, table stays white (r138) ───
   The bar area now takes the page's grey (--bg, the colour around the white
   panel), and the white panel starts at the table. The sticky header spans
   exactly the page box - pulled out by the page's own 22px side padding and
   the 6px under the top bar, no more and no less - so its edges line up with
   the white panel below and nothing sticks out. It stays opaque because it
   is sticky and rows scroll under it. */
#page-leads .pg-head{
  background:var(--bg)!important;
  margin:-6px -22px 0 -22px!important;
  padding:6px 22px 10px 22px!important;
  box-shadow:none!important; border:0!important;
}
#page-leads .pg-head.stuck{box-shadow:0 6px 12px -10px rgba(15,23,42,.25)!important}
#page-leads .pg-head #sv-leads-row{margin-bottom:0!important}

/* ── Opportunities: view tabs show which one is active (r139) ──────────
   The active tab got its "on" class, but that only changed the background
   from #FFFFFF to #F8FAFC - invisible. It is filled with the accent now, and
   the tabs share the leads toolbar's look: 34x32, 1px border, 8px corners. */
#lo-opps-host button[data-view], #page-pipeline button[data-view]{
  width:34px!important; height:32px!important; min-width:34px!important; padding:0!important;
  display:inline-grid!important; place-items:center!important;
  border:1px solid var(--bd2)!important; border-radius:8px!important;
  background:transparent!important; color:var(--t2)!important; box-shadow:none!important;
}
#lo-opps-host button[data-view]:hover, #page-pipeline button[data-view]:hover{border-color:var(--acc)!important; color:var(--acc)!important}
#lo-opps-host button[data-view].on, #page-pipeline button[data-view].on{
  background:var(--acc)!important; border-color:var(--acc)!important; color:#fff!important;
}
/* the group those tabs sit in had its own box around them.
   (r141) Only the tab BAR (.sv-bar): r139 also matched [data-sv-key="pipeline"],
   which the Calendar / Pivot / Graph container carries too - it became an
   inline row and put the month controls beside the calendar instead of above. */
#lo-opps-host .sv-bar{
  display:inline-flex!important; gap:6px!important; border:0!important; background:transparent!important;
  box-shadow:none!important; padding:0!important;
}

/* ── Opportunities: the totals row (r139) — at the TOP since r158 ──
   It sits in its own <tbody id="pipe-ttop"> right under the headings.
   Two ids so the leads-page row-hover rules (#page-leads tbody tr:hover td,
   .tbl-wrap td[style*="sticky"] ...) never repaint it. The divider is an
   inset shadow, not a border: with border-collapse a border does not travel
   with a sticky cell. */
#pipe-table #pipe-ttop tr.pipe-total > td{
  background:var(--s2)!important; box-shadow:inset 0 -2px 0 var(--bd2); padding:10px 14px; font-size:12.5px; vertical-align:top;
}

/* ── Opportunities: headings + totals stay on screen while scrolling (r158) ──
   .tbl-wrap scrolls sideways (overflow-x:auto), which also makes it the box
   a sticky cell sticks to - and it never scrolled up/down (overflow-y:hidden),
   so the sticky headings never actually stuck. The list now scrolls inside
   its own box, capped to the screen height; the headings stick at the top and
   the totals row sticks right under them (--pipe-head-h is measured in
   renderPipeTotals). A thin vertical scrollbar shows so it is clear the list
   scrolls; the sideways one stays hidden as before. */
#pipe-table-view .tbl-wrap{
  overflow-y:auto; max-height:max(320px, calc(100vh - 230px)); scrollbar-width:auto;
}
#pipe-table-view .tbl-wrap::-webkit-scrollbar{display:block; width:8px; height:0}
#pipe-table-view .tbl-wrap::-webkit-scrollbar-thumb{background:var(--bd2); border-radius:4px}
#pipe-table-view .tbl-wrap::-webkit-scrollbar-track{background:transparent}
/* The header is its own layer, so no scrolled row (frozen columns included)
   ever paints over a heading; the totals layer sits just under it. */
#pipe-table > thead{position:sticky; top:0; z-index:20}
#pipe-table > #pipe-ttop{position:sticky; top:var(--pipe-head-h, 40px); z-index:15}

/* ── Users: Actions never cover "Hours today" (r140) ────────────────────
   A member row carries four buttons (Edit, Reset pwd, Deactivate, Delete) on
   one line, so the frozen Actions column grew to ~330px and sat on top of
   Hours today. The buttons now wrap onto two lines - all still visible,
   nothing moved into a menu - and the column stays narrow. */
#page-users #users-tbody td:last-child{white-space:normal!important; width:214px; max-width:214px}
#page-users #users-tbody td:last-child .btn{margin:2px 2px 2px 0}

/* ── Opportunities: no white strip under the view (r141) ────────────────
   The view sits on the page grey (its sticky header - KPI cards and filters -
   takes the grey from the leads header rule). The leads page itself is white,
   so its 6px bottom edge showed as a white line under the list. In this view
   the page takes the same grey. */
#page-leads.lo-opps-active{background:var(--bg)!important}

/* ── Leads: quick actions all the same size, same places (r143) ─────────
   Call · WhatsApp · Email · Follow-up · ⋯ - five 30x30 buttons in one row on
   every lead. The ⋯ button was shorter (built with small padding), and a lead
   without email or phone simply lost buttons, so rows had different widths.
   A missing channel is now drawn red and inactive, with the reason on hover. */
.lead-acts{display:inline-flex; align-items:center; gap:4px; flex-wrap:nowrap}
.lead-acts .licon{margin:0!important}
.lead-acts .am-trigger, .lcard-actions .licon{
  width:30px!important; height:30px!important; min-width:30px; padding:0!important;
  display:inline-grid!important; place-items:center; line-height:1!important; font-size:15px!important;
  border:1px solid var(--bd2)!important; background:var(--card,var(--s))!important; color:var(--t2)!important; border-radius:6px!important;
}
.lead-acts .am-trigger:hover{border-color:var(--acc)!important; color:var(--acc)!important}
.btn.licon.is-off, .btn.licon.is-off:hover{
  color:var(--r)!important; opacity:.45; cursor:not-allowed!important;
  border-color:color-mix(in srgb, var(--r) 35%, var(--bd2))!important; background:transparent!important;
}

/* ── Columns button in the Action header (r144) ─────────────────────────
   Leads and Opportunities: the button sits in the table's own header, next
   to "Action"; the toolbar no longer carries it. An open menu floats above
   the page (the header is inside a scrolling box that would cut it off). */
th.has-colpick{white-space:nowrap}
th .th-colpick{display:inline-block; margin-left:8px; vertical-align:middle}
/* r146: "Action" left, Columns at the right end, 8px from the cell edge */
th.has-colpick{padding-right:8px!important}
th .th-colpick-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
th .th-colpick-row .th-colpick{margin-left:0}
th .th-colpick .btn{
  height:26px!important; padding:0 9px!important; font-size:11.5px!important; font-weight:600!important;
  text-transform:none!important; letter-spacing:0!important; line-height:1!important;
  display:inline-flex!important; align-items:center; gap:5px;
  border:1px solid var(--bd2)!important; border-radius:6px!important; background:var(--s)!important; color:var(--t)!important;
}
th .th-colpick .btn:hover{border-color:var(--acc)!important; color:var(--acc)!important}
th .th-colpick .btn svg{width:13px; height:13px}
[id^="colmenu-"].cm-float{position:fixed!important; z-index:9990!important; overflow:auto; text-transform:none; letter-spacing:0; font-weight:400; text-align:left}
/* the toolbar holders are empty now */
#page-leads #sv-leads-row > #lead-pagesize:not(:has([data-colpick])){display:none!important}
#pipe-colpicker:not(:has(*)){display:none!important}

/* ── Dashboard: filter drawer from the right (r147) ───────────────────── */
#page-dashboard .ph.dash-titlebar{display:flex; align-items:center; gap:12px}
.dash-title-r{margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; line-height:1.3}
.dash-filter-sum{color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}
.dash-filter-btn{height:34px; display:inline-flex!important; align-items:center; gap:6px; font-size:13px!important; font-weight:600}
.dfd-back{position:fixed; inset:0; background:rgba(15,23,42,.28); opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:1290}
.dfd-back.on{opacity:1; pointer-events:auto}
.dfd{position:fixed; top:0; right:0; bottom:0; width:min(380px,100vw); z-index:1300; background:var(--s);
  border-left:1px solid var(--bd); box-shadow:-18px 0 40px rgba(15,23,42,.14);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1); visibility:hidden;
  display:flex; flex-direction:column; padding-top:env(safe-area-inset-top,0px)}
.dfd.on{transform:none; visibility:visible}
.dfd-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--bd)}
.dfd-head b{font-size:15px; color:var(--t)}
.dfd-x{border:0; background:transparent; font-size:22px; line-height:1; color:var(--t3); cursor:pointer; width:32px; height:32px; border-radius:6px}
.dfd-x:hover{background:var(--s2); color:var(--t)}
.dfd-body{flex:1; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; gap:20px}
.dfd-lab{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t3); margin-bottom:8px}
.dfd-chips{display:flex; flex-wrap:wrap; gap:8px}
.dfd .drange{display:grid!important; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px}
.dfd .drange input{width:100%; min-width:0}
.dfd .dfd-member #df_member_wrap{min-width:0!important; width:100%}
.dfd-foot{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--bd); display:flex}
.dfd-foot .btn{flex:1; height:38px; justify-content:center; font-size:13.5px}
@media (prefers-reduced-motion:reduce){.dfd,.dfd-back{transition:none}}
@media (max-width:760px){.dash-filter-sum{display:none}}

/* ── Dashboard: Revenue trend, flowing area chart (r148) ─────────────── */
.rev-flow{position:relative}
.rf-sum{display:flex; align-items:baseline; gap:8px; margin:-2px 0 6px}
.rf-sum b{font-size:18px; font-weight:700; color:var(--t)}
.rf-sum span{font-size:11.5px; color:var(--t3)}
.rf-wrap{position:relative}
.rf-wrap svg{display:block; overflow:visible; touch-action:pan-y}
.rf-grid{stroke:var(--bd); stroke-width:1}
.rf-ytick{font-size:10.5px; fill:var(--t3)}
.rf-xtick{font-size:10.5px; fill:var(--t3)}
.rf-xtick.rf-now{fill:var(--t); font-weight:700}
.rf-band{fill:var(--s2); opacity:.9}
.rf-bandlab{font-size:9.5px; fill:var(--t3); letter-spacing:.04em; text-transform:uppercase}
.rf-dot{stroke:var(--s); stroke-width:1.6}
.rf-guide{stroke:var(--t3); stroke-width:1; stroke-dasharray:3 3; opacity:0; transition:opacity .12s}
.rf-hot{fill:var(--s); stroke-width:2.6; opacity:0; transition:opacity .12s}
.rf-hit{cursor:crosshair}
.rf-tip{position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .12s, transform .08s ease-out;
  background:var(--s); border:1px solid var(--bd2); border-radius:10px; padding:9px 12px; min-width:150px;
  box-shadow:0 10px 28px rgba(15,23,42,.16); z-index:5}
.rf-m{font-size:11px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.05em}
.rf-v{font-size:17px; font-weight:700; color:var(--t); margin-top:2px}
.rf-n{font-size:12px; color:var(--t2)}
.rf-d{font-size:11.5px; font-weight:700; margin-top:4px}
.rf-d.up{color:var(--g)} .rf-d.down{color:var(--r)}
.rf-empty{font-size:12px; color:var(--t3); margin-top:6px}
@media (prefers-reduced-motion:reduce){.rf-line{transition:none!important; stroke-dasharray:none!important}}

/* ── Manage Opportunities: no KPI cards on top (r149) ─────────────────────
   Achieved / Open pipeline / Weighted forecast / Win rate are gone from the
   top of the view; the totals row under the table carries open and won. */
#lo-opps-host #pipe-forecast, #page-pipeline #pipe-forecast{display:none!important}

/* ── Narrow screens: the menu button and drawer sit above the top bar (r154) ──
   At 900px and below the sidebar is a slide-in drawer opened by the ☰ button.
   The top bar was raised to layer 1200 (for the search panel and menus), which
   put it OVER the ☰ button (320), the drawer (300) and its backdrop (290): a
   tap on ☰ landed on the top bar and the sidebar could never be opened on a
   phone, a tablet, or any browser window narrower than 900px. Order now:
   top bar 1200 < ☰ 1210 < search panel 1250 < backdrop 1270 < drawer 1280 <
   pop-up windows 1300. */
@media (max-width:900px){
  .sb-toggle{z-index:1210!important}
  .sb-backdrop.open{z-index:1270!important}
  .sbar.open{z-index:1280!important}
}

/* ── Lead profile › Opportunities: the tab's own Columns control (r158) ── */
.lpv-oppbar{display:flex; align-items:center; gap:10px; margin:0 0 8px}
.lpv-oppbar > span{font-size:12px; color:var(--t3)}
.lpv-oppbar > div{margin-left:auto}
.lpv-oppbar + .tbl-wrap{margin-top:0}

/* ── Lead profile: the header actions are actions, not states (r159) ─────
   Call used to be filled in the accent colour, which reads as "on". Every
   button in the row now looks the same at rest and lights up on hover and
   while pressed. Call keeps a phone-coloured icon so it is still easy to find. */
#page-profile [data-testid^="lead-action-"]:hover:not(:disabled){
  border-color:var(--acc)!important; color:var(--acc)!important; background:var(--s2)!important}
#page-profile [data-testid^="lead-action-"]:active:not(:disabled){
  background:color-mix(in srgb, var(--acc) 14%, var(--s))!important; border-color:var(--acc)!important}
#page-profile [data-testid^="lead-action-"]:focus-visible{outline:2px solid var(--acc); outline-offset:1px}
#page-profile .lpv-call svg{color:var(--g,#16A34A)}
#page-profile .lpv-call:hover svg{color:var(--acc)}

/* ── Opportunities board: drag feedback (r165) ───────────────────────────
   The column under the cursor lights up and the card being dragged fades,
   the same as the leads board. */
#pipe-kanban .kanban-col{transition:background .12s,outline-color .12s}
#pipe-kanban .kanban-col.kc-over{outline:2px dashed var(--acc,#EA6D1A);outline-offset:-2px;
  background:color-mix(in srgb,var(--acc,#EA6D1A) 8%,var(--s2,#F2F5F9))!important}
#pipe-kanban [draggable="true"].kc-dragging{opacity:.45;transform:rotate(1.5deg) scale(.99);box-shadow:0 10px 24px rgba(0,0,0,.18)}
@media (prefers-reduced-motion:reduce){#pipe-kanban [draggable="true"].kc-dragging{transform:none}}

/* ══ r175: Excel-style columns, stage progress, top-bar sub-nav ══════════ */

/* column header: label + filter ▾ + resize grip */
th[data-colkey]{position:relative;white-space:nowrap}
th[data-colkey] .th-lab{display:inline-block;vertical-align:middle;max-width:calc(100% - 26px);overflow:hidden;text-overflow:ellipsis}
.th-flt{border:0;background:transparent;color:var(--t3);font-size:11px;line-height:1;padding:2px 4px;margin-left:2px;border-radius:4px;cursor:pointer;vertical-align:middle}
.th-flt:hover{background:var(--s2);color:var(--t)}
.th-flt.on{color:var(--p);font-weight:700}
.th-grip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;user-select:none;z-index:2}
.th-grip::after{content:'';position:absolute;top:22%;bottom:22%;right:3px;width:1px;background:var(--bd2);opacity:0;transition:opacity .12s}
th[data-colkey]:hover .th-grip::after{opacity:1}
body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing *{cursor:col-resize!important}

/* the Excel AutoFilter popover */
.col-flt-menu{position:fixed;z-index:9700;width:260px;background:var(--s);border:1px solid var(--bd2);border-radius:12px;
  box-shadow:0 14px 40px rgba(15,23,42,.2),0 2px 6px rgba(15,23,42,.06);font-size:13px;overflow:hidden;animation:svMeasIn .12s ease-out}
.cfm-h{display:flex;flex-direction:column;gap:6px;padding:10px 12px 8px;border-bottom:1px solid var(--bd)}
.cfm-h span{font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--t3)}
.cfm-q{width:100%;padding:6px 9px;border:1px solid var(--bd2);border-radius:8px;font:inherit;font-size:12.5px;background:var(--s2)}
.cfm-all,.cfm-row{display:flex;align-items:center;gap:9px;padding:6px 12px;cursor:pointer}
.cfm-all{border-bottom:1px solid var(--bd);font-weight:600}
.cfm-row:hover{background:var(--s2)}
.cfm-list{max-height:240px;overflow:auto;padding:4px 0}
.cfm-v{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfm-n{font-size:11px;color:var(--t3)}
.col-flt-menu input[type=checkbox]{accent-color:var(--p);width:15px;height:15px;margin:0;flex:none}
.cfm-f{display:flex;justify-content:flex-end;gap:6px;padding:8px 10px;border-top:1px solid var(--bd);background:var(--s2)}

/* stage cell: colour + progress line */
.lstatus-bar{height:3px;border-radius:3px;background:var(--bd);margin-top:5px;width:110px;overflow:hidden}
.lstatus-bar i{display:block;height:100%;border-radius:3px;transition:width .25s ease}

/* top bar: sub-headings before the search, flexible search */
.topbar .tb-left{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0}
.tb-subnav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0;overflow:hidden}
.tb-sub-h{font-size:12px;font-weight:700;color:var(--t3);letter-spacing:.04em;text-transform:uppercase;margin:0 8px 0 2px;white-space:nowrap}
.tb-sub{border:0;background:transparent;color:var(--t2);font-size:13.5px;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;border-radius:9px 9px 0 0;transition:color .12s,background .12s}
.tb-sub:hover{background:var(--s2);color:var(--t)}
.tb-sub.on{color:var(--p);border-bottom-color:var(--p)}
.topbar .tb-search{flex:1 1 220px;min-width:180px;max-width:720px}
.tb-io svg{display:block}
@media(max-width:1100px){.tb-sub-h{display:none}.tb-sub{padding:8px 9px;font-size:13px}}
@media(max-width:900px){.tb-subnav{display:none!important}}

/* ══ r176: fixed Salesforce-style sidebar rail ═════════════════════════════ */
body.sb-fixed{--sbw:92px}
body.sb-fixed .sbar{width:92px!important;overflow:hidden;transition:none}
body.sb-fixed .sbar:hover{width:92px!important;box-shadow:none}
body.sb-fixed .topbar{left:92px!important}
body.sb-fixed .main,body.sb-fixed #app>.content,body.sb-fixed .page-wrap{margin-left:92px}
/* no sub-pages, no section labels in the rail */
body.sb-fixed .sbar .nsub,body.sb-fixed .sbar .nav-group-label,body.sb-fixed .sbar .sb-toggle{display:none!important}
/* icon above a short label, centred */
body.sb-fixed .sbar .ntab{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:10px 4px!important;min-height:64px;margin:2px 6px;border-radius:10px;width:auto!important}
body.sb-fixed .sbar .ntab svg{width:22px!important;height:22px!important;display:block}
body.sb-fixed .sbar .ntab .sv-txt{display:block!important;font-size:10.5px;line-height:1.15;text-align:center;white-space:normal;max-width:80px;opacity:1!important;font-weight:600}
body.sb-fixed .sbar .ntab .nchev,body.sb-fixed .sbar .ntab .ncaret,body.sb-fixed .sbar .ntab [data-chev]{display:none!important}
body.sb-fixed .sbar .ntab.active,body.sb-fixed .sbar .ntab.has-active{background:rgba(255,255,255,.14);color:#fff}
body.sb-fixed .sbar .ntab:hover{background:rgba(255,255,255,.08)}
/* brand block stays compact */
body.sb-fixed .sbar .sb-brand{justify-content:center;padding:10px 0}
body.sb-fixed .sbar .sb-brand span{display:none}

/* ══ r176: Download ▾ / Upload ▾ in the view bar ═══════════════════════════ */
.tb-io{position:relative;display:inline-block}
.tb-io .cbtn{display:inline-flex;align-items:center;justify-content:center}
.tb-io-caret{display:none}   /* r179: icon only */
.tb-io-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:1200;width:300px;background:var(--s);border:1px solid var(--bd2);border-radius:12px;
  box-shadow:0 14px 40px rgba(15,23,42,.2),0 2px 6px rgba(15,23,42,.06);padding:6px;text-align:left;animation:svMeasIn .12s ease-out}
.tb-io-menu[hidden]{display:none}
.tb-io-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);padding:8px 10px 6px}
.tb-io-it{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--t);font:inherit}
.tb-io-it:hover{background:var(--s2)}
.tb-io-it b{font-size:13px;font-weight:600}
.tb-io-it small{font-size:11.5px;color:var(--t3)}
/* r176: no ▾ chevron on rail headings (a heading just opens its first page);
   the heading's label is a plain span - give it the same stacked style */
body.sb-fixed .sbar .ntab .nchev{display:none!important}
body.sb-fixed .sbar .ntab.nparent > span:not(.ni):not(.nchev){display:block!important;font-size:10.5px;line-height:1.15;text-align:center;white-space:normal;max-width:80px;font-weight:600}
body.sb-fixed .sbar .ntab .ni svg{width:22px!important;height:22px!important}
/* r176: long rail labels wrap to two lines instead of clipping */
body.sb-fixed .sbar .ntab .sv-txt,body.sb-fixed .sbar .ntab.nparent > span:not(.ni):not(.nchev){max-width:84px;word-break:break-word;hyphens:auto;overflow-wrap:anywhere;font-size:10px}

/* ══ r177: top bar lays out around the sub-nav ═══════════════════════════
   The bar was a 3-column grid with a fixed 150px left cell, so the sub-nav
   (Manage Leads · Manage Opportunities · Tasks …) overflowed its cell and ran
   underneath the centred search box. It is a flex row now: the sub-nav takes
   the width it needs, the search box takes what is left (never less than
   220px), and with 5+ sub-pages the sub-nav scrolls sideways instead of
   covering anything. */
.topbar{display:flex!important;align-items:center;gap:14px;grid-template-columns:none!important}
.topbar .tb-left{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;overflow:hidden}
.tb-subnav{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
/* r181: scroll still works (wheel / trackpad / touch), the bar is just not
   drawn - a grey line under the tabs looked broken. */
.tb-subnav{scrollbar-width:none;-ms-overflow-style:none}
.tb-subnav::-webkit-scrollbar{display:none;width:0;height:0}
/* r178: the search box has ONE professional size and keeps it - it no longer
   shrinks because a section has five or six pages. The sub-nav is capped at
   four tabs (measured in JS) and scrolls for the rest. */
/* one fixed, professional width - it does not change with the window or with
   how many sub-pages a section has */
.topbar .tb-search{flex:0 0 480px;width:480px;max-width:none;min-width:0}
@media(max-width:1440px){.topbar .tb-search{flex-basis:420px;width:420px}}
@media(max-width:1280px){.topbar .tb-search{flex-basis:360px;width:360px}}
@media(max-width:1060px){.topbar .tb-search{flex:1 1 240px;width:auto}}
/* a soft fade on the right edge hints that more tabs are there */
.tb-subnav.has-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
.topbar .tb-right{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:6px}
/* the active sub-page is scrolled into view when the section changes */
.tb-sub{scroll-snap-align:start}

/* ══ r177: the search panel must never clip its own labels ═══════════════
   "Created this month", "Follow-up overdue" and the Year / Quarter / Month /
   Week / Day choices were cut off: the three columns were minmax(190px,1fr)
   with min-width:0, so long labels were squeezed. The columns are sized to
   their content now (with a sensible floor), and the panel scrolls if the
   window is genuinely too narrow. */
.sp-panel{grid-template-columns:repeat(3,minmax(210px,max-content))!important;
  width:max-content;max-width:calc(100vw - 32px)!important;overflow-x:auto;overflow-y:visible}
.sp-col{min-width:210px!important}
.sp-item{white-space:nowrap}
.sp-item>span:not(.sp-tick):not(.sp-chev){overflow:visible;text-overflow:clip}
.sp-subs{padding-left:16px}
.sp-subs .sp-item{white-space:nowrap;min-width:0}
@media(max-width:760px){.sp-panel{grid-template-columns:1fr!important}.sp-col{border-right:0;border-bottom:1px solid var(--bd);padding-bottom:6px;margin-bottom:6px}}

/* ══ r180: top bar — search box in the SAME place on every page ══════════
   The section heading is gone, and the left block has a fixed width, so the
   search box starts at the same x on Dashboard (no tabs), Leads (4 tabs) and
   Integrations — it no longer jumps from centre to right between pages. */
.tb-sub-h{display:none!important}
.topbar .tb-left{flex:0 0 var(--tb-left-w,430px);width:var(--tb-left-w,430px);min-width:0;overflow:hidden}
.tb-subnav{max-width:100%!important;width:100%}
@media(max-width:1440px){.topbar .tb-left{flex-basis:380px;width:380px}}
@media(max-width:1280px){.topbar .tb-left{flex-basis:320px;width:320px}}
@media(max-width:1060px){.topbar .tb-left{flex:0 1 auto;width:auto}}

/* ══ r180: sidebar rail — a clean, readable active state ═════════════════
   Dashboard showed a bright green bracket spilling outside the icon; Leads
   showed nothing. One rule now: a soft filled tile with an accent bar on the
   left, for both a plain page and a section parent. */
body.sb-fixed .sbar .ntab{position:relative;transition:background .14s ease,color .14s ease}
body.sb-fixed .sbar .ntab::before,body.sb-fixed .sbar .ntab::after{content:none!important}
body.sb-fixed .sbar .ntab.active,
body.sb-fixed .sbar .ntab.has-active{background:rgba(255,255,255,.12)!important;color:#fff!important;border-left:0!important}
body.sb-fixed .sbar .ntab.active .sv-txt,body.sb-fixed .sbar .ntab.has-active .sv-txt,
body.sb-fixed .sbar .ntab.active > span,body.sb-fixed .sbar .ntab.has-active > span{color:#fff!important}
body.sb-fixed .sbar .ntab.active svg,body.sb-fixed .sbar .ntab.has-active svg{color:var(--acc)!important}
/* the accent bar that marks the current section */
body.sb-fixed .sbar .ntab.active::before,
body.sb-fixed .sbar .ntab.has-active::before{content:''!important;position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--acc)}

/* ══ r180: the person block at the bottom of the rail ════════════════════
   Name, ADMIN badge, "My profile" and "Sign out" were overlapping in 92px.
   It is a tidy stack now: avatar, then the name on one line, then two small
   icon buttons (theme · sign out). */
body.sb-fixed .sbar .sb-user,body.sb-fixed .sbar .sb-foot{display:flex!important;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;border-top:1px solid var(--sbar-bd,rgba(255,255,255,.08))}
body.sb-fixed .sbar .sb-user .av,body.sb-fixed .sbar .sb-user .avatar{width:32px;height:32px;font-size:13px}
body.sb-fixed .sbar .sb-user .nm,body.sb-fixed .sbar .sb-user b{font-size:11px;font-weight:600;max-width:80px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
body.sb-fixed .sbar .sb-user .role,body.sb-fixed .sbar .sb-user .badge{font-size:9px;padding:1px 6px}
body.sb-fixed .sbar .sb-user a,body.sb-fixed .sbar .sb-user button{font-size:10.5px;padding:4px 6px;border-radius:7px;white-space:nowrap}
body.sb-fixed .sbar .sb-user .sb-acts{display:flex;gap:6px;justify-content:center}

/* ══ r180: Excel / Salesforce gridlines on the tables ════════════════════ */
/* r186: the leads table has no id of its own - it is the table inside
   #lead-table-wrap - which is why the gridlines missed it before. Both the
   leads and the opportunities tables now get the same Excel-style grid. */
#lead-table-wrap table td,#lead-table-wrap table th,
#pipe-table td,#pipe-table th,
#leads-table td,#leads-table th{border-right:1px solid var(--bd)!important}
#lead-table-wrap table td:last-child,#lead-table-wrap table th:last-child,
#pipe-table td:last-child,#pipe-table th:last-child,
#leads-table td:last-child,#leads-table th:last-child{border-right:0!important}
#lead-table-wrap table tbody td,#pipe-table tbody td,#leads-table tbody td{border-bottom:1px solid var(--bd)!important}
#lead-table-wrap table thead th,#pipe-table thead th,#leads-table thead th{border-bottom:2px solid var(--bd2)!important}
[data-theme="dark"] #leads-table td,[data-theme="dark"] #lead-table td,[data-theme="dark"] #pipe-table td,
[data-theme="dark"] #leads-table th,[data-theme="dark"] #lead-table th,[data-theme="dark"] #pipe-table th{border-color:rgba(255,255,255,.07)!important}
/* r180: the rail's person block — avatar, then the name, then two icon
   buttons (theme · sign out). The words "Sign out" only show when the
   sidebar is wide (drawer on phones), never in the 92px rail. */
body.sb-fixed .sbar .sb-foot{padding:10px 6px 12px}
body.sb-fixed .sbar .sb-user{flex-direction:column;align-items:center;gap:5px;min-width:0}
body.sb-fixed .sbar #nav-info{display:block!important;min-width:0;text-align:center}
body.sb-fixed .sbar #nav-name{font-size:11px;max-width:80px;margin:0 auto}
body.sb-fixed .sbar #nav-role{font-size:8.5px;padding:0 5px}
body.sb-fixed .sbar .sb-links{display:none}            /* "My profile" = tap the avatar */
body.sb-fixed .sbar .nav-av{width:34px;height:34px;font-size:14px;border-radius:50%}
body.sb-fixed .sbar .sb-acts{display:flex;gap:8px;justify-content:center;margin-top:8px}
body.sb-fixed .sbar .sb-acts .btn-logout{padding:6px!important;min-width:32px;height:32px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:8px;font-size:0!important}
body.sb-fixed .sbar .sb-signout-t{display:none}

/* r182: rail labels never push the tile wider than the rail — long words
   ("Dashboard", "Communication") were making the active tile overflow. */
body.sb-fixed .sbar .ntab{max-width:100%;overflow:hidden;box-sizing:border-box}
body.sb-fixed .sbar .ntab > span,body.sb-fixed .sbar .ntab .sv-txt{
  display:block;max-width:76px;font-size:10px;line-height:1.15;text-align:center;
  white-space:normal;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
body.sb-fixed .sbar .ntab > span.ni{max-width:none;width:auto}
body.sb-fixed .sbar .ntab .nchev,body.sb-fixed .sbar .ntab .nbadge{display:none!important}

/* ══ r183: WhatsApp chat list — inbox layout ═══════════════════════════════ */
.wa-chat-item{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--bd);background:var(--s);transition:background .12s;box-shadow:none!important}
.wa-chat-item:hover{background:var(--s2)}
.wa-chat-item.on{background:color-mix(in srgb,var(--acc) 8%,var(--s))}
.wa-chat-item.unread .wa-chat-name{font-weight:700}
.wa-chat-item.unread .wa-chat-preview{color:var(--t);font-weight:500}
.wa-av-wrap{position:relative;flex:none}
.wa-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;object-fit:cover;
  color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;overflow:hidden;background:#94a3b8}
.wa-live{position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;
  background:var(--g);border:2px solid var(--s);display:block}
.wa-chat-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wa-row1{display:flex;align-items:baseline;gap:6px}
.wa-chat-name{font-size:14px;font-weight:600;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-star-dot{color:var(--a);font-size:12px;line-height:1}
.wa-chat-time{margin-left:auto;flex:none;font-size:11.5px;color:var(--t3);white-space:nowrap}
.wa-row2{display:flex;align-items:center;gap:6px;min-width:0}
.wa-pv-ic{flex:none;width:14px;height:14px;color:var(--t3)}
.wa-pv-ic svg{width:14px;height:14px;display:block}
.wa-chat-preview{flex:1;min-width:0;font-size:12.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--g);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center}
.wa-row3{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.wa-tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:11px;white-space:nowrap;
  background:var(--s2);color:var(--t2);border:1px solid var(--bd)}
.wa-tag-need{background:var(--ab);color:var(--a);border-color:var(--abd)}
.wa-tag-exp{background:var(--rb);color:var(--r);border-color:var(--rbd)}
.wa-tag-nolead{background:transparent;color:var(--t3);border-style:dashed}


.wa-chat-time .wa-lock{width:11px;height:11px;display:inline-block;vertical-align:-1px;margin-right:3px;opacity:.65}

/* ══ r185: pivot drill-down + graph views ══════════════════════════════════ */
.pv-tog{width:17px;height:17px;flex:none;border:1px solid var(--bd2);border-radius:4px;background:var(--s);
  color:var(--t2);font-size:12px;line-height:1;cursor:pointer;margin-right:6px;display:inline-grid;place-items:center;padding:0}
.pv-tog:hover{border-color:var(--acc);color:var(--acc)}
.pv-tog-none{display:inline-block;width:17px;margin-right:6px;border:0;background:none}
.pv-add{width:18px;height:18px;margin-left:6px;border:1px dashed var(--bd2);border-radius:4px;background:transparent;
  color:var(--t3);font-size:12px;line-height:1;cursor:pointer;display:inline-grid;place-items:center;padding:0}
.pv-add:hover{border-color:var(--acc);color:var(--acc);border-style:solid}
.pv-axis{display:inline-flex;align-items:center;gap:5px}
.pv-lvl{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;background:var(--s2);border:1px solid var(--bd);
  border-radius:11px;padding:2px 4px 2px 9px;color:var(--t2)}
.pv-lvl button{border:0;background:none;color:var(--t3);cursor:pointer;font-size:13px;line-height:1;padding:0 3px}
.pv-lvl button:hover{color:var(--r)}
.sv-pivot .pv-rh{text-align:left;white-space:nowrap}
.sv-pivot tr.pv-d1 .pv-rh{color:var(--t2)}
.sv-pivot tr.pv-d2 .pv-rh,.sv-pivot tr.pv-d3 .pv-rh{color:var(--t3);font-size:12px}
.sv-pivot .pv-corner{text-align:left;white-space:nowrap}
.pv-fmenu{position:fixed;z-index:9700;min-width:210px;max-height:340px;overflow:auto;background:var(--s);
  border:1px solid var(--bd2);border-radius:12px;box-shadow:0 14px 40px rgba(15,23,42,.2);padding:6px}
.pv-fm-h{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:7px 10px 5px}
.pv-fm-it{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--t);font:inherit;font-size:13px;
  padding:8px 10px;border-radius:8px;cursor:pointer}
.pv-fm-it:hover{background:var(--s2)}
.pv-fm-it.used{color:var(--t3)}
.pv-fm-it i{font-size:10.5px;font-style:normal;color:var(--t3)}
/* graph */
.sv-gkinds{display:inline-flex;border:1px solid var(--bd2);border-radius:9px;overflow:hidden}
.sv-gk{border:0;border-left:1px solid var(--bd);background:var(--s);color:var(--t2);font-size:13px;padding:6px 11px;cursor:pointer}
.sv-gk:first-child{border-left:0}
.sv-gk:hover{background:var(--s2)}
.sv-gk.on{background:var(--acc);color:#fff}
.sv-gcount{margin-left:auto;font-size:12px;color:var(--t3)}
.sv-graph2{border:1px solid var(--bd);border-radius:12px;background:var(--s);padding:14px 16px 10px}
.sv-graph2 h4{margin:0 0 10px;font-size:13.5px;font-weight:650;color:var(--t)}
.sv-gsvg{width:100%;height:auto;display:block;overflow:visible}
.sv-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--t2)}
.sv-legend span{display:inline-flex;align-items:center;gap:6px}
.sv-legend i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ══ r188: floating WhatsApp chat windows (LinkedIn-style) ═════════════════ */
.wa-pop-host{position:fixed;right:18px;bottom:0;z-index:9500;display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.wapop{width:328px;max-width:calc(100vw - 32px);background:var(--s);border:1px solid var(--bd2);border-radius:12px 12px 0 0;
  box-shadow:0 -2px 28px rgba(15,23,42,.18),0 0 0 1px rgba(15,23,42,.03);display:flex;flex-direction:column;
  overflow:hidden;pointer-events:auto;animation:wapopIn .16s ease-out}
@keyframes wapopIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.wapop-head{display:flex;align-items:center;gap:9px;padding:9px 10px;background:var(--s2);border-bottom:1px solid var(--bd);cursor:pointer}
.wapop-av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:11.5px;font-weight:700}
.wapop-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.wapop-who b{font-size:13.5px;font-weight:650;color:var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wapop-who i{font-size:10.5px;font-style:normal;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wapop-acts{display:flex;gap:2px;flex:none}
.wapop-acts button{border:0;background:transparent;color:var(--t3);cursor:pointer;font-size:13px;line-height:1;
  width:26px;height:26px;border-radius:6px;display:grid;place-items:center}
.wapop-acts button:hover{background:var(--bd);color:var(--t)}
.wapop-body{height:330px;overflow-y:auto;padding:10px 10px 6px;background:var(--bg);display:flex;flex-direction:column;gap:3px}
.wapop.min{border-radius:12px 12px 0 0}
.wapop.min .wapop-head{border-bottom:0}
.wapop-day{align-self:center;font-size:10.5px;color:var(--t3);background:var(--s);border:1px solid var(--bd);
  border-radius:10px;padding:2px 9px;margin:6px 0 4px}
.wapop-row{display:flex;margin:1px 0}
.wapop-row.out{justify-content:flex-end}
.wapop-bub{max-width:82%;padding:6px 9px 4px;border-radius:10px;font-size:12.5px;line-height:1.4;
  background:var(--s);border:1px solid var(--bd);color:var(--t);word-break:break-word;position:relative}
.wapop-row.out .wapop-bub{background:color-mix(in srgb,var(--g) 14%,var(--s));border-color:color-mix(in srgb,var(--g) 26%,var(--bd))}
.wapop-meta{display:block;text-align:right;font-size:9.5px;color:var(--t3);margin-top:2px}
.wapop-tick{margin-left:4px}
.wapop-tick.read{color:#2563EB}
.wapop-img{max-width:100%;border-radius:7px;display:block;margin-bottom:3px}
.wapop-file{display:inline-block;font-size:12px;color:var(--p);text-decoration:none}
.wapop-empty{margin:auto;text-align:center;font-size:12px;color:var(--t3);padding:14px;line-height:1.5}
.wapop-foot{display:flex;align-items:flex-end;gap:6px;padding:8px;border-top:1px solid var(--bd);background:var(--s)}
.wapop-foot textarea{flex:1;resize:none;max-height:86px;border:1px solid var(--bd2);border-radius:9px;
  padding:7px 9px;font:inherit;font-size:12.5px;background:var(--s2);color:var(--t)}
.wapop-send{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:var(--acc);color:#fff;
  cursor:pointer;font-size:13px;display:grid;place-items:center}
.wapop-send:hover{filter:brightness(1.06)}
@media(max-width:620px){.wa-pop-host{right:0;left:0;justify-content:center}.wapop{width:100%;border-radius:12px 12px 0 0}}

/* r189: the popup's own toolbar and full composer */
.wapop-bar{display:flex;gap:6px;padding:6px 8px;border-bottom:1px solid var(--bd);background:var(--s)}
.wapop-bar select{flex:1;min-width:0;font-size:11.5px;padding:4px 6px;border:1px solid var(--bd2);border-radius:7px;background:var(--s2);color:var(--t2)}
.wapop-acts button.on{color:#F59E0B}
.wapop-ic{flex:none;width:28px;height:28px;border:0;background:transparent;color:var(--t3);border-radius:7px;cursor:pointer;display:grid;place-items:center}
.wapop-ic:hover{background:var(--s2);color:var(--t)}
.wapop-ic.rec{color:#fff;background:var(--r);animation:wapopRec 1s ease-in-out infinite}
@keyframes wapopRec{50%{opacity:.55}}
.wapop-slash{font-size:15px;font-weight:700;line-height:1}
.wapop-locked{display:flex;align-items:center;gap:8px;padding:9px 10px;border-top:1px solid var(--bd);
  background:var(--ab);color:var(--a);font-size:11.5px;line-height:1.4;cursor:pointer}
.wapop-locked svg{flex:none}
.wapop-locked span{flex:1;min-width:0}
.wapop-locked button{flex:none;border:1px solid var(--abd);background:var(--s);color:var(--a);
  font-size:11px;font-weight:600;padding:4px 9px;border-radius:7px;cursor:pointer}
.wapop-locked button:hover{background:var(--s2)}
/* r190: header icons are SVG now — centre them and keep the star fill visible */
.wapop-acts button svg{display:block;pointer-events:none}
.wapop-acts button.on svg{color:#F59E0B}
.wapop-file svg{display:inline-block;vertical-align:-2px;margin-right:3px}

/* r191: the popup's own template sheet — slides up inside the window */
.wapop{position:relative}
.wapop-tpl{position:absolute;left:0;right:0;bottom:0;top:46px;z-index:3;background:var(--s);
  display:flex;flex-direction:column;border-top:1px solid var(--bd);animation:wapopTplIn .14s ease-out}
@keyframes wapopTplIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wapop-tpl-h{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid var(--bd);background:var(--s2)}
.wapop-tpl-h b{font-size:12.5px;color:var(--t)}
.wapop-tpl-h span{flex:1;font-size:10.5px;color:var(--t3);line-height:1.3}
.wapop-tpl-h button{border:0;background:transparent;color:var(--t3);cursor:pointer;width:24px;height:24px;
  border-radius:6px;display:grid;place-items:center}
.wapop-tpl-h button:hover{background:var(--bd);color:var(--t)}
.wapop-tpl-search{padding:8px 10px 4px}
.wapop-tpl-search input{width:100%;font:inherit;font-size:12.5px;padding:6px 9px;border:1px solid var(--bd2);
  border-radius:8px;background:var(--s2);color:var(--t)}
.wapop-tpl-list{flex:1;overflow-y:auto;padding:6px}
.wapop-tpl-it{display:block;width:100%;text-align:left;border:1px solid var(--bd);background:var(--s);
  border-radius:9px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font:inherit}
.wapop-tpl-it:hover{border-color:var(--acc);background:var(--s2)}
.wapop-tpl-n{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--t);margin-bottom:3px}
.wapop-tpl-n i{font-style:normal;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:9px;
  background:var(--s2);color:var(--t3);border:1px solid var(--bd)}
.wapop-tpl-n i.ok{background:var(--gb);color:var(--g);border-color:var(--gbd)}
.wapop-tpl-b{display:block;font-size:11.5px;color:var(--t3);line-height:1.45}
.wapop-tpl-empty{padding:22px 14px;text-align:center;font-size:12px;color:var(--t3);line-height:1.55}

/* r193: template preview, and honest sending feedback */
.wapop-tpl-h b{flex:1;text-align:center;font-size:12.5px}
.wapop-tpl-back{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--t2);
  font:inherit;font-size:11.5px;cursor:pointer;padding:3px 6px;border-radius:6px;width:auto!important;height:auto!important}
.wapop-tpl-back:hover{background:var(--bd);color:var(--t)}
.wapop-tpl-back svg{width:13px;height:13px}
.wapop-tpl-prev{flex:1;overflow-y:auto;padding:12px 12px 4px}
.wapop-prev-label{font-size:10.5px;color:var(--t3);margin-bottom:7px}
.wapop-prev-card{border:1px solid var(--bd);border-radius:10px;overflow:hidden;
  background:color-mix(in srgb,var(--g) 9%,var(--s))}
.wapop-prev-hd{font-weight:700;font-size:12.5px;padding:9px 11px 0;color:var(--t)}
.wapop-prev-body{padding:9px 11px;font-size:12.5px;line-height:1.5;color:var(--t);white-space:pre-wrap;word-break:break-word}
.wapop-prev-ft{padding:0 11px 9px;font-size:11px;color:var(--t3)}
.wapop-prev-btns{display:flex;flex-direction:column;border-top:1px solid var(--bd)}
.wapop-prev-btns span{text-align:center;padding:8px;font-size:12px;color:var(--p);border-top:1px solid var(--bd)}
.wapop-prev-btns span:first-child{border-top:0}
.wapop-prev-warn{display:flex;gap:7px;align-items:flex-start;margin-top:10px;padding:8px 10px;border-radius:8px;
  background:var(--ab);border:1px solid var(--abd);color:var(--a);font-size:11px;line-height:1.45}
.wapop-prev-warn svg{flex:none;width:14px;height:14px;margin-top:1px}
.wapop-tpl-foot{display:flex;gap:8px;padding:10px;border-top:1px solid var(--bd);background:var(--s)}
.wapop-tpl-foot .btn{flex:none}
.wapop-tpl-go{flex:1;border:0;background:var(--acc);color:#fff;font:inherit;font-size:13px;font-weight:600;
  padding:9px 12px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.wapop-tpl-go:hover{filter:brightness(1.06)}
.wapop-tpl-go.busy{opacity:.75;cursor:default}
.wapop-spin{animation:wapopSpin .8s linear infinite}
@keyframes wapopSpin{to{transform:rotate(360deg)}}
.wapop-tick.sending{display:inline-flex;align-items:center;gap:3px;color:var(--t3)}
.wapop-tick.sending svg{width:10px;height:10px}
.wapop-tick.fail{color:var(--r);font-weight:600}

/* r194: unread / missed counts on the lead header buttons */
.lpv-hero .btn.has-badge,.btn.has-badge{position:relative}
.lpv-badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;margin-left:6px;
  border-radius:9px;background:var(--r);color:#fff;font-size:10.5px;font-weight:700;line-height:1;vertical-align:1px}
.btn.lpv-call.has-badge .lpv-badge{background:var(--r)}
[data-testid="lead-action-whatsapp"].has-badge .lpv-badge{background:var(--g)}

/* ══ r195: the calendar day view as a real worklist ═══════════════════════ */
.cd-day{padding:0}
.cd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--bd);
  border-bottom:1px solid var(--bd)}
.cd-kpi{background:var(--s);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.cd-kpi b{font-size:20px;font-weight:700;color:var(--t);line-height:1.1}
.cd-kpi span{font-size:11px;color:var(--t3)}
.cd-kpi.warn b{color:var(--a)}
.cd-kpi.bad b{color:var(--r)}
.cd-kpi.good b{color:var(--g)}
.cd-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--bd);background:var(--s2)}
.cd-tab{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd2);background:var(--s);
  color:var(--t2);font:inherit;font-size:12.5px;padding:5px 11px;border-radius:20px;cursor:pointer}
.cd-tab:hover{border-color:var(--acc);color:var(--t)}
.cd-tab.on{background:var(--acc);border-color:var(--acc);color:#fff}
.cd-tab i{font-style:normal;font-size:11px;font-weight:700;background:var(--s2);color:var(--t3);
  border-radius:9px;padding:0 6px;min-width:18px;text-align:center}
.cd-tab.on i{background:rgba(255,255,255,.28);color:#fff}
.cd-mine{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);cursor:pointer}
.cd-mine input{accent-color:var(--p);width:15px;height:15px;margin:0}
.cd-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--bd);cursor:pointer}
.cd-row:hover{background:var(--s2)}
.cd-row:last-child{border-bottom:0}
.cd-row.done{opacity:.6}
.cd-row.done .cd-main b{text-decoration:line-through}
.cd-tick{flex:none;color:var(--t3);display:grid;place-items:center}
.cd-row.done .cd-tick{color:var(--g)}
.cd-tick.bad{color:var(--r)}
.cd-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cd-main b{font-size:13px;font-weight:600;color:var(--t)}
.cd-main i{font-style:normal;font-size:11.5px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-who{flex:0 0 150px;font-size:12.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-time{flex:none;font-size:11.5px;color:var(--t3);white-space:nowrap}
.cd-time.late{color:var(--r);font-weight:600}
@media(max-width:700px){.cd-who{display:none}}
/* r195: the week / month / year summary strip */
.cd-range{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 10px;padding:9px 12px;
  border:1px solid var(--bd);border-radius:10px;background:var(--s)}
.cr-lab{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3);margin-right:4px}
.cr-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);
  border:1px solid var(--bd2);border-radius:20px;padding:3px 10px;background:var(--s2)}
.cr-chip i{font-style:normal;font-weight:700;font-size:11.5px;color:var(--t)}
.cr-chip.warn{border-color:var(--abd);background:var(--ab);color:var(--a)}
.cr-chip.warn i{color:var(--a)}
.cr-chip.bad{border-color:var(--rbd);background:var(--rb);color:var(--r)}
.cr-chip.bad i{color:var(--r)}
.cr-chip.good{border-color:var(--gbd);background:var(--gb);color:var(--g)}
.cr-chip.good i{color:var(--g)}

/* r328: rail labels fit on one or two tidy lines — long words are shortened
   in app.js (railLabel), and these keep the rest from splitting mid-word. */
body.sb-fixed .sbar .ntab > span,body.sb-fixed .sbar .ntab .sv-txt{
  overflow-wrap:normal;word-break:normal;hyphens:none;max-width:82px;font-size:10px;letter-spacing:-.1px}

/* r329: only the Automation page is kept inside the rail. The earlier
   page-wide rule changed every screen's layout, so it is gone — this one
   touches nothing else. */
#page-automation{overflow-x:hidden}
#page-automation #flows_root,#page-automation .fb-two,#page-automation .wt-wrap{min-width:0;max-width:100%}
#page-automation .fb-two > *{min-width:0}

/* ══ r381 · Opportunities and Tasks wear the LEADS skin ══
   The r380 rules hung off the page id and lost to older, more specific ones,
   so the tables still looked different. These name the tables themselves and
   say !important, the same way the leads overrides do. */
#pipe-table,.fu-tbl{border-collapse:collapse!important;background:var(--s)!important}
#pipe-table thead th,.fu-tbl thead th{
  position:sticky!important;top:0;z-index:2;
  background:var(--s2)!important;color:var(--t2)!important;
  font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;
  letter-spacing:.05em!important;padding:9px 12px!important}
#pipe-table tbody td,.fu-tbl tbody td{
  padding-top:12px!important;padding-bottom:12px!important;
  padding-left:12px!important;padding-right:12px!important;vertical-align:middle!important}
#pipe-table tbody tr,.fu-tbl tbody tr{transition:background var(--dur-fast) var(--ease)}
#pipe-table tbody tr:hover > td,.fu-tbl tbody tr:hover > td{background:var(--sbar-hv)!important}
[data-theme="dark"] #pipe-table tbody tr:hover > td,
[data-theme="dark"] .fu-tbl tbody tr:hover > td{background:var(--s2)!important}
#pipe-table tbody tr:last-child > td,.fu-tbl tbody tr:last-child > td{
  border-bottom:1px solid var(--bd)!important}
#page-pipeline .tbl-wrap,#page-followups .tbl-wrap{border-radius:var(--rad)}
/* the totals line reads as a summary, not as another deal */
#pipe-ttop td{background:var(--s2)!important;font-weight:600!important;color:var(--t2)!important}
#pipe-ttop tr:hover > td{background:var(--s2)!important}
/* the first column stays put while the rest scrolls sideways, as on Leads */
#pipe-table thead th:nth-child(1){background:var(--s2)!important;z-index:4}
#pipe-table thead th:nth-child(1),#pipe-table tbody td:nth-child(1){
  position:sticky!important;left:0;z-index:3;box-shadow:6px 0 8px -6px rgba(0,0,0,.12)}
#pipe-table tbody td:nth-child(1){background:var(--s)!important}
#pipe-ttop td:nth-child(1){background:var(--s2)!important}
#pipe-table tbody tr:hover > td:nth-child(1){background:var(--s2)!important}

/* r377 · the Stage cell's three lines line up: the stage, the note under it,
   and the bar all start at the same place, and the bar fills the column
   instead of stopping at a fixed 110px. */
#page-pipeline #pipe-table td .lstatus{min-width:150px}
#page-pipeline #pipe-table td .lstatus-sub{margin-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-pipeline #pipe-table td .lstatus-bar{width:auto;margin-left:14px;margin-top:6px}

/* ══ r378 · the Tasks table wears the Leads table's skin ══
   Same white sticky header, same row height and hover, and the name is
   clearly a link that opens that person. */
#page-followups .fu-tbl{width:100%;border-collapse:collapse;background:var(--s)}
#page-followups .fu-tbl thead th{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--t2);padding:9px 12px;border-bottom:2px solid var(--bd2)}
#page-followups .fu-tbl td{padding:10px 12px;border-bottom:1px solid var(--bd);vertical-align:middle}
#page-followups .fu-tbl td,#page-followups .fu-tbl th{border-right:1px solid var(--bd)}
#page-followups .fu-tbl td:last-child,#page-followups .fu-tbl th:last-child{border-right:0}
#page-followups .fu-tbl tbody tr:hover > td{background:var(--s2)}
#page-followups .fu-tbl tbody tr:last-child > td{border-bottom:1px solid var(--bd)}
#page-followups .fu-lead{font-weight:600}
#page-followups .fu-tbl .tlink{cursor:pointer;color:var(--p)}
#page-followups .fu-tbl .tlink:hover{text-decoration:underline}
#page-followups .fu-tbl .fu-t.tlink{color:var(--t)}
#page-followups .fu-tbl .fu-t.tlink:hover{color:var(--p)}

/* r379 · the Follow-up cell carries the task's type next to its date */
.fu-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t);white-space:nowrap}
.fu-chip i{font-size:14px;line-height:1;flex:none}
.fu-chip-d{font-weight:500}
.fu-chip-s{font-size:10.5px;color:var(--t3);margin-top:2px;margin-left:31px;
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* r391 · Tasks: the Due cell names the task type next to the time */
#page-followups .fu-due{display:flex;align-items:center;gap:7px;white-space:nowrap}
#page-followups .fu-due-s{margin-left:31px}


/* r392 · task-type chips, drawn like the Bulk actions menu icons:
   the type's own colour on a 12% tint of itself, in a rounded square. */
.tt-ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.tt-ic i{font-size:15px;line-height:1}
.tt-ic.sm{width:24px;height:24px;border-radius:7px}
.tt-ic.sm i{font-size:13px}
[data-theme="dark"] .tt-ic{background:color-mix(in srgb,var(--c) 22%,transparent)}

/* ══ r393 · the Leads page uses the Bulk-actions icon style too ══
   Each quick tab's icon sits in a rounded square tinted with its own colour,
   and the row actions (call · WhatsApp · email · task) become the same soft
   chips instead of outlined buttons — one icon language across the page. */
#page-leads .qtb{--c:#64748B}
#page-leads .qtb[data-qt="__all"]     {--c:#475569}
#page-leads .qtb[data-qt="__new"]     {--c:#16A34A}
#page-leads .qtb[data-qt="__fu_today"]{--c:#0D9488}
#page-leads .qtb[data-qt="__pending"] {--c:#DC2626}
#page-leads .qtb[data-qt="__reenq"]   {--c:#7C3AED}
#page-leads .qtb[data-qt="__refme"]   {--c:#2563EB}
#page-leads .qtb > svg:first-child{
  width:24px!important;height:24px!important;padding:5px;box-sizing:border-box;border-radius:7px;
  color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);flex:none;margin-right:2px}
#page-leads .qtb.on > svg:first-child{background:color-mix(in srgb,var(--c) 20%,transparent)}
[data-theme="dark"] #page-leads .qtb > svg:first-child{background:color-mix(in srgb,var(--c) 22%,transparent)}

/* row actions: soft chips, no outline — the same as the Bulk actions menu */
.lead-acts>.btn.licon:not(.is-off),.tc-contact>.btn.licon:not(.is-off){
  width:30px;height:30px;padding:0!important;border-radius:9px!important;border:0!important;
  display:inline-grid;place-items:center;box-shadow:none!important;
  color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,transparent)!important}
.lead-acts>.btn.licon:nth-child(1):not(.is-off),.tc-contact>.btn.licon:nth-child(1):not(.is-off){--c:#DC2626;color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,transparent)!important;border:0!important}
.lead-acts>.btn.licon:nth-child(2):not(.is-off),.tc-contact>.btn.licon:nth-child(2):not(.is-off){--c:#16A34A;color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,transparent)!important;border:0!important}
.lead-acts>.btn.licon:nth-child(3):not(.is-off),.tc-contact>.btn.licon:nth-child(4):not(.is-off){--c:#DB2777;color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,transparent)!important;border:0!important}
.lead-acts>.btn.licon:nth-child(4):not(.is-off){--c:#0284C7;color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,transparent)!important;border:0!important}
.tc-contact>.btn.licon:nth-child(3):not(.is-off){--c:#6D28D9;color:var(--c)!important;background:color-mix(in srgb,var(--c) 12%,transparent)!important;border:0!important}
/* hover needs the same weight as the colours above to win */
.lead-acts>.btn.licon:nth-child(n):not(.is-off):hover,.tc-contact>.btn.licon:nth-child(n):not(.is-off):hover{
  background:color-mix(in srgb,var(--c) 22%,transparent)!important}
.lead-acts>.btn.licon:not(.is-off):hover,.tc-contact>.btn.licon:not(.is-off):hover{
  background:color-mix(in srgb,var(--c) 20%,transparent)!important;filter:none}
[data-theme="dark"] .lead-acts>.btn.licon:not(.is-off),[data-theme="dark"] .tc-contact>.btn.licon:not(.is-off){
  background:color-mix(in srgb,var(--c) 22%,transparent)!important;filter:none}

/* ══ r394 · Tasks calendar — Day / Week / Month / Year ═══════════════════════
   The calendar has its own counts, type chips and Owner panel, so the page's
   tiles, status strip and Owner/Type dropdowns step aside while it is on. */
#page-followups.fu-cal-on #fu-kpis,#page-followups.fu-cal-on #fu-status,#page-followups.fu-cal-on #fu-chipbar{display:none!important}
#fu-calendar{margin-top:10px}
#fu-calendar .tcal-h{margin:0 0 12px;gap:8px}
#fu-calendar .tcal-h .btn.sm{height:32px;display:inline-flex;align-items:center}
#fu-calendar .tcal-nav{width:32px;justify-content:center;padding:0;font-size:17px;line-height:1}
#fu-calendar .sv-cal-m{font-size:16px;font-weight:700;color:var(--t);margin:0 6px;line-height:1.2}
#fu-calendar .sv-cal-mode{height:32px}
#fu-calendar .sv-cal-by{font-size:12px;color:var(--t3)}
#fu-calendar .tcal-main{flex:1;min-width:0}
#fu-calendar .tcal-card{border:1px solid var(--bd);border-radius:12px;background:var(--s);overflow:hidden}
/* the counts — each one is a filter in Day view */
#fu-calendar .cd-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}
#fu-calendar .cd-kpi{border:0;text-align:left;font:inherit;color:inherit;padding:14px 16px;gap:3px;position:relative}
#fu-calendar button.cd-kpi{cursor:pointer}
#fu-calendar button.cd-kpi:hover{background:var(--s2)}
#fu-calendar .cd-kpi b{font-size:22px}
#fu-calendar .cd-kpi span{font-size:12px}
#fu-calendar .cd-kpi.on{background:var(--s2)}
#fu-calendar .cd-kpi.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--p)}
#fu-calendar .cd-tabs{background:var(--s);gap:7px;padding:12px 14px}
#fu-calendar .cd-tab{font-weight:600;font-size:12.5px;padding:5px 12px}
#fu-calendar .cd-tab.on{background:var(--p);border-color:var(--p)}
#fu-calendar .cd-tab.bad:not(.on){border-color:var(--rbd);color:var(--r)}
#fu-calendar .cd-tab.bad:not(.on) i{background:var(--rb);color:var(--r)}
#fu-calendar .cd-tsep{width:1px;align-self:stretch;background:var(--bd2);margin:0 3px}
#fu-calendar .cd-mine{font-weight:600}
/* Day: section bands and task cards */
#fu-calendar .tcal-list{padding:2px 0 4px}
#fu-calendar .cd-sec{margin:12px 14px 10px;padding:7px 12px;border-radius:8px;border:0;background:var(--s2);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
#fu-calendar .tc-card{margin:0 14px 10px;box-shadow:none}
#fu-calendar .tc-main[role=button]{cursor:pointer;border-radius:6px}
#fu-calendar .tc-main[role=button]:focus-visible{outline:2px solid var(--p);outline-offset:3px}
#fu-calendar .tc-own i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--oc);margin-right:6px;vertical-align:0}
#fu-calendar .tc-prio{margin-left:6px;font-size:10.5px;padding:1px 8px;vertical-align:1px}
#fu-calendar .tc-remark{margin-top:6px;font-size:12.5px;color:var(--g)}
#fu-calendar .tc-card.done .tc-remark{text-decoration:none}
#fu-calendar .tc-badge{display:inline-flex;align-items:center;gap:5px}
#fu-calendar .tc-badge .sico,#fu-calendar .tc-acts .sico{font-size:13px}
#fu-calendar .tc-acts .btn{display:inline-flex;align-items:center;gap:5px}
#fu-calendar .cd-row{margin:0 14px;border:1px solid var(--bd);border-radius:10px;margin-bottom:8px}
#fu-calendar .cd-row:last-child{border-bottom:1px solid var(--bd)}
#fu-calendar .tcal-cap{margin:4px 14px 8px;font-size:12px;color:var(--t3)}
#fu-calendar .tcal-empty{padding:34px 16px;text-align:center;color:var(--t3);display:flex;flex-direction:column;align-items:center;gap:12px}
#fu-calendar .tcal-empty p{margin:0;font-size:13px}
#fu-calendar .tcal-note{padding:8px 14px;font-size:12px;color:var(--t2);background:var(--ab);border-bottom:1px solid var(--abd)}
/* the pager — same "Show N rows" as the tables */
#fu-calendar .tcal-pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--bd);font-size:12.5px;color:var(--t2)}
#fu-calendar .tcal-range{margin-right:4px}
#fu-calendar .tcal-pager .btn.sm{width:30px;height:30px;padding:0;display:inline-grid;place-items:center;font-size:15px}
#fu-calendar .tcal-pager .btn[disabled]{opacity:.45;cursor:default}
#fu-calendar .tcal-size{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
#fu-calendar .tcal-size select{height:30px;border:1px solid var(--bd2);border-radius:7px;background:var(--s);color:var(--t);font:inherit;padding:0 6px}
/* Week / Month / Year sit inside the same card, under the chips */
#fu-calendar .tcal-grid{padding:12px}
#fu-calendar .sv-cal-c{position:relative;cursor:pointer}
#fu-calendar .sv-cal-n{align-self:flex-start;border:0;background:transparent;font:inherit;font-size:12px;font-weight:600;color:var(--t2);padding:1px 6px;margin:-1px 0 1px -4px;border-radius:6px;cursor:pointer}
#fu-calendar .sv-cal-n:hover{background:var(--s2);color:var(--t)}
#fu-calendar .sv-cal-c.today .sv-cal-n{background:var(--p);color:#fff}
#fu-calendar .sv-ev{display:block;width:100%;text-align:left;border:0;font:inherit;font-size:11.5px;line-height:1.35;padding:3px 7px;border-radius:6px;cursor:pointer;
  background:color-mix(in srgb,var(--ec,#94a3b8) 12%,var(--s));color:var(--t);white-space:normal;overflow-wrap:anywhere}
#fu-calendar .sv-ev::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ec,#94a3b8);margin-right:5px;vertical-align:1px}
#fu-calendar .sv-ev b{font-weight:600;color:var(--t2)}
#fu-calendar .sv-ev small{display:block;font-size:11px;color:var(--t3)}
#fu-calendar .sv-cal-colb .tcal-none{color:var(--bd2)}
#fu-calendar .sv-ev.late b{color:var(--r)}
#fu-calendar .sv-ev.done{opacity:.6;text-decoration:line-through}
#fu-calendar .sv-ev-more{border:0;background:transparent;font:inherit;text-align:left;padding:1px 6px;cursor:pointer;color:var(--t2);font-weight:600}
#fu-calendar .sv-ev-more:hover{color:var(--p)}
#fu-calendar .sv-cal-colh{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;border:0;border-bottom:1px solid var(--bd);font:inherit;cursor:pointer}
#fu-calendar .sv-cal-colh i{font-style:normal;font-size:11px;font-weight:700;color:var(--t3);background:var(--s);border-radius:9px;padding:0 6px}
#fu-calendar .sv-cal-col.today .sv-cal-colh{background:var(--p);color:#fff}
#fu-calendar .sv-cal-col.today .sv-cal-colh i{color:var(--p)}
#fu-calendar .tcal-none{font-size:11.5px;color:var(--t3);padding:4px 2px}
#fu-calendar .sv-ym-h i{font-style:normal;font-size:11px;font-weight:700;color:var(--t3);margin-left:4px}
#fu-calendar button.sv-yc{border:0;background:transparent;font:inherit;font-size:10px;cursor:pointer;width:100%}
#fu-calendar button.sv-yc:hover{background:var(--s2)}
#fu-calendar .sv-yc.has{font-weight:700;color:var(--t)}
#fu-calendar .sv-ev:focus-visible,#fu-calendar .sv-cal-n:focus-visible,#fu-calendar .sv-yc:focus-visible,#fu-calendar .cd-kpi:focus-visible,
#fu-calendar .cd-tab:focus-visible,#fu-calendar .sv-cal-colh:focus-visible{outline:2px solid var(--p);outline-offset:1px}
/* the Owner panel */
#fu-calendar .sv-cal-side{width:210px;top:72px}
#fu-calendar .tcal-side-empty{font-size:12.5px;color:var(--t3);padding:4px 6px}
@media(max-width:1100px){#fu-calendar .cd-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
#fu-calendar .tcal-cnt{display:none}
@media(max-width:820px){#fu-calendar .sv-cal-side{width:100%;position:static}#fu-calendar .sv-cal-by{display:none}#fu-calendar .sv-cal-week{grid-template-columns:1fr}#fu-calendar .sv-cal-col{min-height:0}
  #fu-calendar .sv-cal{gap:3px}#fu-calendar .sv-cal-c{min-height:64px;padding:4px}#fu-calendar .sv-ev{font-size:10.5px}
  #fu-calendar .tc-ph{margin-left:0;width:100%}}
@media(max-width:560px){#fu-calendar .cd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}#fu-calendar .sv-cal-modes{order:9;width:100%}
  #fu-calendar .sv-cal-mode{flex:1}#fu-calendar .sv-cal-c .sv-ev{display:none}#fu-calendar .sv-cal-c .sv-ev-more{display:none}
  #fu-calendar .tcal-cnt{display:inline-block;align-self:flex-start;font-size:10.5px;font-weight:700;color:var(--p);background:var(--s2);border-radius:8px;padding:0 6px}}
@media(prefers-reduced-motion:reduce){#fu-calendar *{transition:none!important}}

/* ═══ r401 · floating WhatsApp chat — same bubbles as the chat page, real composer, unread badge ═══ */
.wapop-body{gap:0;background-color:var(--wa-chat-bg)}
.wapop-body .wa-bubble{max-width:84%;font-size:13px}
.wapop-body .wa-date-sep{margin:8px 0 6px}
.wapop-body .wa-msg-row{margin-bottom:2px}
.wapop-foot{align-items:flex-end;gap:4px;padding:7px 8px;background:var(--wa-panel-header)}
.wapop-foot textarea{flex:1;min-width:0;resize:none;overflow-y:hidden;min-height:38px;max-height:112px;height:38px;
  padding:9px 14px;border:0;border-radius:20px;background:var(--wa-in-bubble);color:var(--wa-text);font:inherit;font-size:13.5px;line-height:20px;
  box-shadow:0 1px 1px rgba(0,0,0,.06);outline:none;white-space:pre-wrap;word-break:break-word;scrollbar-width:thin}
.wapop-foot textarea::placeholder{color:var(--wa-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wapop-foot textarea:focus{box-shadow:0 0 0 2px color-mix(in srgb,var(--wa-teal-dark) 35%,transparent)}
.wapop-foot .wapop-ic{width:34px;height:38px;border-radius:50%}
.wapop-send{width:38px;height:38px;background:#00a884}
.wapop-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--wa-unread);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums;margin-right:2px}
.wapop.has-unread .wapop-who i{color:var(--wa-unread);font-weight:600}
.wapop.has-unread .wapop-head{animation:wapopNew .9s ease 2}
@keyframes wapopNew{50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){.wapop.has-unread .wapop-head{animation:none}}

/* r401 · WhatsApp composer layout: [attach] [/] [ message ] [mic ↔ send] */
.wapop{width:360px}
.wapop-foot>.wapop-ic{order:0;width:30px}
.wapop-foot>textarea{order:1}
.wapop-foot>[id^="wapop-mic-"]{order:2;width:38px;color:var(--wa-teal-icon)}
.wapop-foot>.wapop-send{order:3}
.wapop-foot:not(.has-text)>.wapop-send{display:none}
.wapop-foot.has-text>[id^="wapop-mic-"]:not(.rec){display:none}

/* ═══ r403 · voice message bar (Chat page + floating chat), like WhatsApp ═══ */
.wa-rec-on>*:not(.wa-recbar){display:none!important}
.wa-recbar{flex:1;width:100%;display:flex;align-items:center;gap:8px;min-height:46px;padding:2px 4px}
.wa-rb-btn{width:38px;height:38px;flex:none;border:0;border-radius:50%;background:transparent;color:var(--wa-teal-icon);display:grid;place-items:center;cursor:pointer}
.wa-rb-btn:hover{background:var(--wa-hover)}
.wa-rb-btn.del:hover{color:#ea0038}
.wa-rb-btn.mic{color:#ea0038}
.wa-rb-btn.play{color:var(--wa-text)}
.wa-rb-btn:focus-visible,.wa-rb-send:focus-visible{outline:2px solid #00a884;outline-offset:2px}
.wa-rb-dot{width:10px;height:10px;flex:none;border-radius:50%;background:#ea0038;animation:waRbBlink 1s ease-in-out infinite}
.wa-rb-time{min-width:36px;font-size:14px;color:var(--wa-text);font-variant-numeric:tabular-nums}
.wa-rb-wave{flex:1;min-width:60px;height:26px;display:flex;align-items:center;gap:2px;overflow:hidden}
.wa-rb-wave i{flex:1;min-width:2px;max-width:4px;border-radius:2px;background:var(--wa-text-dim);transition:height .08s linear}
.wa-recbar.paused .wa-rb-wave i{background:#aebac1}
.wa-recbar.paused .wa-rb-wave i.on{background:#00a884}
.wa-rb-send{width:42px;height:42px;flex:none;border:0;border-radius:50%;background:#00a884;color:#fff;display:grid;place-items:center;cursor:pointer}
.wa-rb-send:hover{filter:brightness(1.07)}
.wa-recbar.sending{justify-content:center;gap:10px;font-size:13px;color:var(--wa-text-dim)}
.wa-rb-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--wa-border);border-top-color:#00a884;animation:waRbSpin .7s linear infinite}
@keyframes waRbBlink{50%{opacity:.25}}
@keyframes waRbSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wa-rb-dot{animation:none}}


/* r413 · a long filter chip (e.g. "★★★ 3 stars or ★★ 2 stars or ★ 1 star") is cut
   with "…" instead of pushing the search text onto a second line; the full
   text shows on hover */
.sp-facet{max-width:240px!important;flex:0 1 auto;min-width:0}
.sp-facet-v{min-width:0}

/* r428 · rail labels never break inside a word ("Marketin / g") — one line,
   a touch tighter, and the button gives the label its full width */
body.sb-fixed .sbar .ntab{padding-left:3px!important;padding-right:3px!important}
body.sb-fixed .sbar .ntab .sv-txt,body.sb-fixed .sbar .ntab.nparent > span:not(.ni):not(.nchev),body.sb-fixed .sbar .ntab > span:not(.ni):not(.nchev):not(.nbadge){
  white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;hyphens:none!important;
  max-width:100%!important;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;letter-spacing:-.01em}
/* r602: field filters from Setup › Fields */
.sp-sec-t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:6px 14px 2px}
.sp-ftext{padding:4px 12px 6px}
.sp-ftext input{width:100%;height:32px;border:1px solid var(--bd);border-radius:8px;padding:0 10px;font:inherit;font-size:12.5px;background:var(--s2,#F8FAFC)}
.sp-ftext input:focus{outline:none;border-color:var(--p);background:var(--s)}