/* selliora-pro.css — one look for the whole CRM.
   Loaded LAST. Restyles the shared primitives every page is built from
   (shell, sidebar, top bar, cards, buttons, inputs, tables, pills, tabs,
   modals, page headers) so all pages read as one product.
   Palette: navy sidebar · white surfaces on a pale canvas · one orange accent. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* ── ONE source of colour ────────────────────────────────────────────
     The theme picker sets two values: Brand → sidebar, Accent → everything
     interactive. Every colour below derives from those, so a change in the
     picker reaches every page, chart, chip, badge and avatar at once. */
  --acc:hsl(var(--accent-h),var(--accent-s),var(--accent-l));
  --acc-d:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) - 9%));
  --acc-l:hsl(var(--accent-h),85%,95%);
  --ring:hsla(var(--accent-h),var(--accent-s),var(--accent-l),.25);
  /* the app's historic "primary" (--p) now IS the accent */
  --p:var(--acc);--pd:var(--acc-d);--pm:var(--acc-d);--pl:var(--acc-l);
  --ai-grad-2:linear-gradient(115deg,var(--acc),var(--acc-d));
  /* sidebar takes the brand colour */
  --sbar:hsl(var(--brand-h),var(--brand-s),var(--brand-l));
  --sbar-t:#B6C0D0;--sbar-hv:rgba(255,255,255,.06);--sbar-ac:rgba(255,255,255,.10);--sbar-bd:rgba(255,255,255,.08);
  /* tinted bands follow the accent hue */
  --tint:hsl(var(--accent-h),80%,96.5%);--tint-bd:hsl(var(--accent-h),60%,86%);
  /* canvas & surfaces */
  --bg:#F5F7FA;--s:#FFFFFF;--s2:#F8FAFC;--card:#FFFFFF;--inp:#FFFFFF;
  --bd:#E6EAF0;--bd2:#D9DFE8;--inp-bd:#D3DAE4;
  /* text */
  --t:#0F172A;--t2:#4B5563;--t3:#7C8698;
  /* semantic */
  --g:#15803D;--gb:#E8F7EE;--gbd:#86D3A6;
  --a:#B45309;--ab:#FDF1E3;--abd:#F0B466;
  --r:#B91C1C;--rb:#FDECEC;--rbd:#F2A0A0;
  --bb:#EAF2FB;--bc:#1D4ED8;
  --sbw:272px;
  --rad:8px;--rads:6px;
  --shadow:0 1px 2px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.10);
  --tbh:60px;
}
[data-theme="dark"]{
  --bg:#0F1521;--s:#151C29;--s2:#1B2333;--card:#151C29;--inp:#111826;
  --bd:#243044;--bd2:#2E3B52;--inp-bd:#33415A;
  --t:#EAF0F7;--t2:#AEB8C7;--t3:#7F8A9C;
  --acc-l:hsl(var(--accent-h),45%,14%);--tint:hsl(var(--accent-h),35%,12%);--tint-bd:hsl(var(--accent-h),30%,22%);
  --gb:#12291F;--ab:#2E2411;--rb:#33191B;--bb:#16233A;
}

/* ── base ── */
html,body{font-family:var(--font)!important;color:var(--t);background:var(--bg)}
body{font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{letter-spacing:-.01em;color:var(--t)}
a{color:var(--acc)}
::selection{background:var(--acc-l)}

/* ── shell: sidebar ── */
.sbar{background:var(--sbar)!important;border-right:0!important;color:var(--sbar-t)}
.sbar .sb-brand{padding:16px 16px 10px;border-bottom:1px solid var(--sbar-bd);display:flex;align-items:center;gap:10px}
.sbar .sb-brand .bt{color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.sbar .sb-brand .bt::before{content:attr(data-initials);width:36px;height:36px;border-radius:9px;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:.02em;flex:none}
.sbar .brand-badge{background:transparent;color:#8A94A8;font-size:10.5px;font-weight:500;padding:0;margin-left:2px;letter-spacing:.01em}
.sbar .sb-collapse{color:#8A94A8;background:transparent;border:0}
.sbar .sb-collapse:hover{color:#fff}
.ask-ai-wrap{padding:12px 14px 4px}
.ask-ai{width:100%;justify-content:center;border-radius:9px;background:var(--acc)!important;color:#fff;border:0;font-weight:600;font-size:13px;box-shadow:none}
.ask-ai:hover{background:var(--acc-d)!important;color:#fff}
.ntabs{padding:8px 10px 12px}
.ntabs .ngroup,.ntabs .nav-group-label,.ntabs .nsec{color:#8A94A8;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:14px 10px 6px}
.ntab{color:var(--sbar-t);border-radius:8px;padding:8px 10px;margin:1px 0;font-weight:500;font-size:13.5px;position:relative;border-left:3px solid transparent;gap:10px}
.ntab .ni{opacity:.85}
.ntab:hover{background:var(--sbar-hv);color:#fff}
.ntab.active{background:var(--sbar-ac);color:#fff!important;border-left-color:var(--acc);font-weight:600}
.ntab.active span{color:#fff!important}
.ntab.active .ni{opacity:1;color:#fff}
#fu-badge{background:var(--acc)!important}
.ntab .nbadge,.ntab .badge,.ntab .cnt{margin-left:auto;background:var(--acc);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
.sb-foot{border-top:1px solid var(--sbar-bd);padding:12px 14px}
.sb-user #nav-name{color:#fff}
.sb-links a{color:#B6C0D0}
.btn-logout{background:transparent;color:#B6C0D0;border:1px solid var(--sbar-bd);border-radius:8px}
.btn-logout:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.nav-av{background:var(--acc);color:#fff;font-weight:700}

/* ── shell: top bar ── */
.topbar{position:fixed;top:0;left:var(--sbw);right:0;height:var(--tbh);z-index:1200;background:var(--s);border-bottom:1px solid var(--bd);
  display:flex;align-items:center;gap:10px;padding:0 22px;transition:left .18s ease}
.topbar .tb-search{flex:1;max-width:760px;position:relative;display:flex;align-items:center}
.topbar .tb-search input{width:100%;height:40px;border:1px solid var(--bd2);border-radius:10px;padding:0 128px 0 38px!important;font:inherit;font-size:13.5px;background:var(--s);color:var(--t);outline:none}
.topbar .tb-search input:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-l)}
.topbar .tb-search .tb-sico{position:absolute;left:12px;color:var(--t3);pointer-events:none}
.topbar .tb-ai{position:absolute;right:6px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bd2);background:var(--s2);color:var(--t);font:inherit;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.topbar .tb-ai:hover{border-color:var(--acc);color:var(--acc)}
.topbar .tb-btn{width:38px;height:38px;border:1px solid var(--bd2);border-radius:10px;background:var(--s);color:var(--t2);display:grid;place-items:center;cursor:pointer;font:inherit;font-size:15px}
.topbar .tb-btn:hover{border-color:var(--acc);color:var(--acc)}
.topbar .tb-org{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--t);padding:0 6px;white-space:nowrap}
.topbar .tb-org::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--g)}
.topbar .tb-av{width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;cursor:pointer;border:0;font-family:inherit}
.topbar .tb-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar .tb-slot{display:contents}
/* the previously floating buttons now sit inside the bar */
#sbrand-btn,#sn-bell,#sh-btn{position:static!important;top:auto!important;right:auto!important;width:38px!important;height:38px!important;border-radius:10px!important;box-shadow:none!important}
#sn-badge{top:-4px;right:-4px}
#sn-panel,#sh-panel{top:calc(var(--tbh) + 8px)!important}

/* main content clears the bar */
#app .page,#app main,.main,#content{padding-top:calc(var(--tbh) + 22px)}
.page{max-width:1440px}
.status-bar{border-top:1px solid var(--bd);background:var(--s);color:var(--t3)}

/* ── page headers ── */
.ph{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;color:var(--t)}
.ps{font-size:13px;color:var(--t2);margin-bottom:18px}
.card-title{font-size:13px;font-weight:600;color:var(--t);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.card-title .sico{color:var(--t3)}

/* ── cards ── */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--rad);box-shadow:var(--shadow);padding:18px 20px}
.card:hover{box-shadow:var(--shadow)}
.stat,.kpi,.metric{border:1px solid var(--bd);border-radius:var(--rad);background:var(--card)}
.stat .k,.kpi .k,.metric .k,.bl-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-weight:600}
.stat .v,.kpi .v,.metric .v,.bl-v{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--t)}
.bl-ico,.stat .ico{background:var(--s2);color:var(--t2)}

/* ── buttons: exactly two styles, primary is the accent ── */
.btn{border:1px solid var(--bd2);background:var(--s);color:var(--t);border-radius:var(--rads);padding:8px 14px;font-size:13px;font-weight:600;box-shadow:none;transition:background .12s,border-color .12s,color .12s}
.btn:hover{background:var(--s2);border-color:var(--bd2)}
.btn.pri,.btn.primary,button.pri{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important;box-shadow:none!important}
.btn.pri:hover,.btn.primary:hover{background:var(--acc-d)!important;border-color:var(--acc-d)!important}
.btn.ghost,.btn.outline{border-color:var(--acc);color:var(--acc);background:transparent}
.btn.ghost:hover,.btn.outline:hover{background:var(--acc-l)}
.btn.danger{border-color:var(--rbd);color:var(--r);background:var(--rb)}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.bl-ib.pri{background:var(--acc);border-color:var(--acc)}
.wa-locked-btn{background:var(--acc);color:#fff}

/* ── inputs ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea,.t{
  border:1px solid var(--inp-bd);border-radius:var(--rads);background:var(--inp);color:var(--t);font:inherit;font-size:13.5px;padding:8px 11px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-l)}
label{font-size:12.5px;font-weight:600;color:var(--t2)}
.ff label{margin-bottom:5px;display:block}
.search-wrap input{padding-left:34px}
.search-wrap .si{color:var(--t3)}

/* ── tables ── */
table{border-collapse:collapse;width:100%}
th,thead td,.th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);font-weight:600;text-align:left;padding:10px 14px;border-bottom:1px solid var(--bd);background:var(--s)}
td{padding:12px 14px;border-bottom:1px solid var(--bd);font-size:13.5px;vertical-align:middle;color:var(--t)}
tbody tr:hover>td{background:var(--s2)}
tbody tr:last-child>td{border-bottom:0}
.tbl,.table,.grid-table{border:1px solid var(--bd);border-radius:var(--rad);overflow:hidden;background:var(--card)}

/* ── pills / status ── */
.pill{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;letter-spacing:.01em}
.pill.pg{background:var(--gb);color:var(--g)}
.pill.pa{background:var(--ab);color:var(--a)}
.pill.pr{background:var(--rb);color:var(--r)}
.pill.pb{background:var(--bb);color:var(--bc)}
.pill.pn{background:var(--s2);color:var(--t2);border:1px solid var(--bd)}

/* ── tabs ── */
.set-tab,.tab{padding:10px 4px;margin-right:22px;border:0;border-bottom:2px solid transparent;background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:var(--t2);border-radius:0}
.set-tab.active,.tab.active{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.set-tab:hover{color:var(--t)}
.bl-tabs{gap:0}

/* ── chips / filter pills (e.g. All 13 · Unread · Read) ── */
.chip,.fchip,.qf-chip{border:1px solid var(--bd2);background:var(--s);color:var(--t2);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600}
.chip.active,.fchip.active,.qf-chip.active{background:var(--acc-l);border-color:var(--acc);color:var(--acc)}

/* ── modals ── */
.overlay{background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.modal{border-radius:14px;border:1px solid var(--bd);box-shadow:var(--shadow-lg);padding:22px 24px}
.modal-title{font-size:16px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.modal-close{color:var(--t3)}
.modal-actions{gap:8px;margin-top:18px}

/* ── toasts ── */
.toast,#toast,.doc-toast{border-radius:10px;background:#0F172A;color:#fff;font-weight:500;box-shadow:var(--shadow-lg)}

/* ── empty states ── */
.empty,.wa-empty-thread{color:var(--t3)}

/* ── WhatsApp inbox: match the reference list ── */
.wa-list-item,.wa-conv{border-bottom:1px solid var(--bd)}
.wa-list-item.active,.wa-conv.active{background:var(--acc-l)}
.wa-avatar{background:var(--acc)}

/* ── remove leftover heavy shadows / gradients from older pages ── */
.card,.modal,.btn,.ntab{background-image:none}
.ask-ai{background-image:none}

/* ── mobile ── */
@media (max-width:900px){
  .topbar{left:0;padding-left:56px}
  .topbar .tb-org,.topbar .tb-ai span{display:none}
  #app .page{padding-top:calc(var(--tbh) + 14px)}
}

/* ═══════════════════════════════════════════════════════════════════
   Refinement pass — tighter radii, tinted bands, bordered icon buttons.
   Matches the reference leads page; the same rules reach every page
   that uses these strips. Loaded after the rules above, so it wins.
   ═══════════════════════════════════════════════════════════════════ */
:root{--rad:8px;--rads:6px}

/* radii: nothing rounder than 8px except pills & chips */
.card,.modal,.stat,.kpi,.metric,.tbl,.table,.grid-table,.bl-card,.bl-stat,.lkpi,.chipbar,.ssbar,.lead-toolbar,.wa-tpl-sheet,.stx-wrap{border-radius:8px!important}
.btn,.bl-ib,.tb-btn,.tb-ai,input:not([type=checkbox]):not([type=radio]),select,textarea,.t,.stx-iw>input,#tp_wa_header_media_btn{border-radius:6px!important}
.topbar .tb-search input{border-radius:6px!important}
.pill{border-radius:4px;padding:2px 8px;font-size:11px}
.pill.pg{border:1px solid var(--gbd)}.pill.pa{border:1px solid var(--abd)}.pill.pr{border:1px solid var(--rbd)}.pill.pb{border:1px solid #BFD3F2}

/* KPI tiles (leads: ALL · PLANNED · MISSED · DONE) */
.lkpi-strip{gap:10px;padding:0 0 12px}
.lkpi{background:var(--card)!important;border:1px solid var(--bd2)!important;padding:12px 16px;min-width:150px;box-shadow:none!important}
.lkpi:hover{border-color:var(--acc)!important;box-shadow:none!important}
.lkpi-l{font-size:10.5px;letter-spacing:.09em;color:var(--t3);font-weight:600}
.lkpi-n{font-size:22px;font-weight:700;margin-top:4px}
.lkpi.active{background:var(--acc)!important;border-color:var(--acc)!important}
.lkpi.active .lkpi-l{color:rgba(255,255,255,.85)}
.lkpi.active .lkpi-n{color:#fff}

/* stage / sub-stage strip → the pale tinted band */
.ssbar,.ssbar.on{background:var(--tint)!important;border:1px solid var(--tint-bd)!important;padding:8px 12px!important;margin:6px 0 10px!important;gap:8px}
.ssbar-crumb{font-weight:600;color:var(--acc);font-size:13px}
.ss-switch{background:var(--card)!important;border:1px solid var(--bd2)!important;color:var(--t)!important;border-radius:999px!important;padding:5px 13px!important;font-size:12.5px!important;font-weight:500!important;box-shadow:none!important}
.ss-switch:hover{border-color:var(--acc)!important}
.ss-switch.on{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important;font-weight:600!important}

/* active-filter chip bar → white strip with a border */
.chipbar{background:var(--card)!important;border:1px solid var(--bd)!important;padding:8px 12px!important;margin-bottom:10px!important;gap:8px}
.fchip{background:var(--card)!important;border:1px solid var(--bd2)!important;border-radius:6px!important;padding:6px 10px!important;font-size:12.5px!important;color:var(--t)!important;box-shadow:none!important}
.fchip:hover{border-color:var(--acc)!important}
.chipbar-tags{border:1px solid var(--bd2)!important;border-radius:6px!important;background:var(--card)!important;padding:6px 10px!important}
.chipbar-clear{color:var(--t2)!important;font-weight:600}
.chipbar-right .btn,.lead-tb-right .btn{width:34px;height:34px;padding:0;display:inline-grid;place-items:center}

/* WhatsApp inbox filter chips (All · Unread · Read · Open window) */
.wa-tab-chip{background:var(--card);border:1px solid var(--bd2);border-radius:999px;color:var(--t2);font-weight:500;padding:5px 12px;font-size:12.5px}
.wa-tab-chip.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.wa-tab-chip.urgent:not(.on){border-color:var(--rbd);color:var(--r)}

/* row action icon buttons: bordered squares, one colour */
.btn.licon,.btn.sm.licon{width:30px;height:30px;padding:0!important;display:inline-grid;place-items:center;border:1px solid var(--bd2)!important;background:var(--card)!important;color:var(--t2)!important;border-radius:6px!important;margin:0 1px}
.btn.licon:hover{border-color:var(--acc)!important;color:var(--acc)!important;background:var(--tint)!important}
.btn.licon svg{width:15px;height:15px}
.row-action-menu{border-radius:8px;border:1px solid var(--bd)}

/* tables: quiet header, comfortable rows */
th,.th{font-size:10.5px;letter-spacing:.09em;color:var(--t3);background:var(--card);padding:11px 14px}
td{padding:13px 14px;border-bottom:1px solid #EEF0F3}
[data-theme="dark"] td{border-bottom-color:var(--bd)}
tbody tr:hover>td{background:#FAFBFC}
[data-theme="dark"] tbody tr:hover>td{background:var(--s2)}
.lead-name,.t-name{font-weight:600;color:var(--t)}
td .sub,td small{color:var(--t3);font-size:12px}

/* page padding & section spacing — consistent on every page */
#app .page{padding-left:22px;padding-right:22px}
.card+.card,.card+div>.card{margin-top:12px}

/* footer pager */
.pager,.pagination{display:flex;align-items:center;gap:8px;padding:12px 0;color:var(--t2);font-size:13px}
.pager .btn,.pagination .btn{width:34px;height:34px;padding:0;display:inline-grid;place-items:center}

/* ── charts & data viz: same accent everywhere, no gradients ── */
.selo-bar{background:var(--acc-l)!important;box-shadow:inset 0 0 0 1px var(--tint-bd)!important;border-radius:6px!important}
.selo-col.hot .selo-bar{background:var(--acc)!important;box-shadow:none!important}
.selo-col.hot .selo-pct{color:var(--acc)!important}
.selo-col.hot .selo-lab{background:var(--acc)!important;color:#fff!important;border-radius:6px!important}
[data-theme="dark"] .selo-bar{background:var(--tint)!important}
.chart-line,.rev-line,.spark path,.trend-line{stroke:var(--acc)!important}
.chart-dot,.rev-dot,.spark circle,.trend-dot{fill:var(--acc)!important}
.chart-fill,.rev-fill{fill:var(--acc-l)!important}

/* ═══════════════════════════════════════════════════════════════════
   Colour rule (applies everywhere):
     green  = money in · done · success        red   = overdue · loss · danger
     amber  = warning · pending                blue  = informational only
     accent = every other emphasis. Nothing else gets its own colour.
   ═══════════════════════════════════════════════════════════════════ */
/* Reports → Custom Report Builder banner (was a purple gradient) */
#arb-launch{background:var(--tint)!important;border:1px solid var(--tint-bd)!important;border-radius:8px!important}
#arb-launch .arb-ic{background:var(--acc)!important;box-shadow:none!important;border-radius:8px!important}
#arb-open-btn,.arb-btn.p,.rb-btn.p{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important;border-radius:6px!important;box-shadow:none!important}
.rb-bar .fl,.arb-bar .fl{background:var(--acc)!important}
.arb-rchip{border:1px solid var(--bd2)!important;background:var(--card)!important;border-radius:6px!important}
.arb-rchip .st{color:var(--a)!important}
/* Help panel + bell panel: same accent, same neutrals */
#sh-btn:hover,#sh-head b span,#sh-panel a{color:var(--acc)!important}
#sh-head b::before,.sn-item .ic{color:var(--acc)}
/* KPI numbers: only meaningful colours. A percentage paid is neutral. */
.met-v{color:var(--t)}
.met-v.green{color:var(--g)}.met-v.red{color:var(--r)}.met-v.amber{color:var(--a)}
.met-v.blue{color:var(--t)!important}
/* Team activity: counts are neutral; zero shows amber as a nudge, targets met show green */
.ta-kpi .ta-kpi-v{color:var(--t)}
/* Landing-page / widget designer: default swatch is the accent */
#lp_color{border-radius:6px}

/* ── nested sidebar: collapsible parents, indented children ── */
.ntab.nparent{border-left-color:transparent!important;background:transparent!important;color:var(--sbar-t)}
.ntab.nparent:hover{background:var(--sbar-hv)!important;color:#fff}
.ntab.nparent.has-active{color:#fff}
.ntab.nparent .nchev{margin-left:auto;font-size:11px;opacity:.7;transition:transform .15s}
.ntab.nparent.open .nchev{transform:rotate(180deg)}
.nsub{display:flex;flex-direction:column;margin:0 0 2px;padding-left:12px;position:relative}
.nsub::before{content:'';position:absolute;left:19px;top:4px;bottom:4px;width:1px;background:var(--sbar-bd)}
.nsub.closed{display:none}
.nsub .ntab{padding:6px 10px 6px 24px;font-size:13px;font-weight:500;border-left:0!important;border-radius:6px}
.nsub .ntab .ni{width:16px;height:16px;opacity:.7}
.nsub .ntab .ni svg{width:15px;height:15px}
.nsub .ntab.active{background:var(--sbar-ac)!important;color:#fff!important;font-weight:600}
.nsub .ntab.active::before{content:'';position:absolute;left:-13px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--acc);transform:translate(0,-50%)}
.nsub .ntab{position:relative}
.nsub .ntab .nbadge,.nsub .ntab #fu-badge{margin-left:auto}
body.sb-collapsed .nsub{display:none!important}
body.sb-collapsed .ntab.nparent .nchev{display:none}
body.sb-collapsed .ntab.nparent.has-active{background:var(--sbar-ac)!important;border-left-color:var(--acc)!important}

/* ── sidebar width & full-width active highlight ── */
.sbar{width:var(--sbw)}
.ntabs{padding:8px 8px 12px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.ntabs::-webkit-scrollbar{width:4px}
.ntabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.ntabs::-webkit-scrollbar-track{background:transparent}
.ntab,.ntab.nparent{width:100%!important;box-sizing:border-box;padding:9px 12px;font-size:14px}
.ntab .ni svg{width:18px;height:18px}
.nsub{padding-left:14px}
.nsub .ntab{width:100%!important;padding:7px 10px 7px 26px;font-size:13.5px}
.nsub::before{left:21px}
.nsub .ntab.active::before{left:-15px}
.ntabs .nav-group-label{padding:16px 12px 6px}

/* ── Tasks page: table layout, same primitives as Leads ── */
.fu-seg{display:inline-flex;border:1px solid var(--bd2);border-radius:6px;overflow:hidden;background:var(--card)}
.fu-seg button{border:0;background:transparent;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fu-seg button+button{border-left:1px solid var(--bd2)}
.fu-seg button.on{background:var(--acc);color:#fff}
.fu-tbl .fu-ico{width:32px;height:32px;border-radius:8px;background:var(--s2);display:grid;place-items:center;color:var(--t2);flex:none}
.fu-tbl tr.fu-over .fu-ico{background:var(--rb);color:var(--r)}
.fu-tbl tr.fu-done .fu-t{color:var(--t3);text-decoration:line-through}
.fu-tbl .fu-t{font-weight:600;color:var(--t)}
.fu-tbl .fu-s{font-size:12px;color:var(--t3);margin-top:2px}
.fu-tbl .fu-lead{color:var(--acc);font-weight:600;text-decoration:none}
.fu-tbl .fu-lead:hover{text-decoration:underline}
.fu-tbl .fu-av{width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.fu-tbl td{padding:12px 14px}
#page-followups .chipbar select.fchip{min-width:150px}
#page-followups .lkpi{cursor:pointer;min-width:160px}

/* ── sidebar footer: readable on the dark rail ── */
.sb-foot{background:rgba(0,0,0,.12);border-top:1px solid var(--sbar-bd);padding:12px 14px}
.sb-foot #nav-name{color:#fff!important;font-size:13px!important}
.sb-foot #nav-role{background:var(--acc)!important;color:#fff!important;font-weight:700;font-size:9.5px!important;padding:2px 7px!important;border-radius:4px!important}
.sb-foot .sb-links a{color:#C6CFDC!important;font-size:12px;text-decoration:none}
.sb-foot .sb-links a:hover{color:#fff!important;text-decoration:underline}
.sb-foot .nav-av{background:var(--acc);color:#fff;font-weight:700;width:34px;height:34px;border-radius:50%}
.sb-foot .btn-logout,.sb-foot #theme-toggle{background:rgba(255,255,255,.06);color:#E6EBF2;border:1px solid var(--sbar-bd);border-radius:6px}
.sb-foot .btn-logout:hover,.sb-foot #theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
/* the palette button lives on the Branding page now */
#sbrand-btn{display:none!important}

/* ── dark mode: surfaces, tints and chrome all from tokens ── */
[data-theme="dark"] body{background:var(--bg)}
[data-theme="dark"] .card,[data-theme="dark"] .modal,[data-theme="dark"] .lkpi,[data-theme="dark"] .chipbar,[data-theme="dark"] .fu-seg{background:var(--card);border-color:var(--bd)}
[data-theme="dark"] .lkpi{border-color:var(--bd2)!important}
[data-theme="dark"] .topbar,[data-theme="dark"] .status-bar{background:var(--s);border-color:var(--bd)}
[data-theme="dark"] .topbar .tb-search input,[data-theme="dark"] .topbar .tb-btn,[data-theme="dark"] .topbar .tb-ai{background:var(--s2);border-color:var(--bd2);color:var(--t)}
[data-theme="dark"] th,[data-theme="dark"] .th{background:var(--card);color:var(--t3)}
[data-theme="dark"] td{border-bottom-color:var(--bd)}
[data-theme="dark"] .ss-switch,[data-theme="dark"] .fchip,[data-theme="dark"] .wa-tab-chip,[data-theme="dark"] .btn{background:var(--s2)!important;border-color:var(--bd2)!important;color:var(--t)!important}
[data-theme="dark"] .ss-switch.on,[data-theme="dark"] .wa-tab-chip.on,[data-theme="dark"] .btn.pri{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important}
[data-theme="dark"] .btn.licon,[data-theme="dark"] .bl-ib{background:var(--s2)!important;border-color:var(--bd2)!important;color:var(--t2)!important}
[data-theme="dark"] .bl-ib.pri{background:var(--acc)!important;color:#fff!important}
[data-theme="dark"] .pill.pn{background:var(--s2);border-color:var(--bd2);color:var(--t2)}
[data-theme="dark"] .pill.pg{background:var(--gb);color:#6EE7A0;border-color:#1F5A38}
[data-theme="dark"] .pill.pa{background:var(--ab);color:#F5C26B;border-color:#5A3F14}
[data-theme="dark"] .pill.pr{background:var(--rb);color:#F79A9A;border-color:#5A2020}
[data-theme="dark"] .pill.pb{background:var(--bb);color:#8FB4F8;border-color:#243B66}
[data-theme="dark"] .selo-bar{background:var(--s2)!important;box-shadow:inset 0 0 0 1px var(--bd2)!important}
[data-theme="dark"] .selo-col.hot .selo-bar{background:var(--acc)!important}
[data-theme="dark"] .fu-tbl .fu-ico,[data-theme="dark"] .bl-ico{background:var(--s2)}
[data-theme="dark"] .sn-panel,[data-theme="dark"] #sn-panel,[data-theme="dark"] #sh-panel,[data-theme="dark"] .stx-pop{background:var(--card);border-color:var(--bd);color:var(--t)}
[data-theme="dark"] .stx-wrap,[data-theme="dark"] .stx-cnt{background:var(--inp)}
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]),[data-theme="dark"] select,[data-theme="dark"] textarea{background:var(--inp);border-color:var(--inp-bd);color:var(--t)}
[data-theme="dark"] .toast,[data-theme="dark"] .doc-toast{background:#F1F5F9;color:#0F172A}
[data-theme="dark"] .empty{color:var(--t3)}

/* ── email compose drawer ── */
#email-compose-modal .modal{padding:0}
#email-compose-modal .modal-title{padding:16px 22px;margin:0;border-bottom:1px solid var(--bd)}
.ec-row{display:flex;align-items:center;gap:12px;padding:8px 22px;border-bottom:1px solid var(--bd)}
.ec-row>label{width:70px;flex:none;font-size:13px;color:var(--t2);font-weight:500}
.ec-row .t,.ec-row select{flex:1;border:0!important;background:transparent!important;padding:6px 0!important;box-shadow:none!important}
.ec-row .t:focus{outline:none}
.ec-ccbcc{font-size:12.5px;color:var(--t3)}
.ec-ccbcc a{color:var(--t3);margin-left:8px;text-decoration:none}.ec-ccbcc a:hover{color:var(--acc)}
.ec-chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:32px;cursor:text}
.ec-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--tint-bd);background:var(--tint);color:var(--t);border-radius:6px;padding:3px 8px;font-size:12.5px}
.ec-chip.primary{border-color:var(--acc)}
.ec-chip button{border:0;background:transparent;color:var(--t3);cursor:pointer;font-size:12px;padding:0;line-height:1}
.ec-chips input{border:0!important;background:transparent!important;outline:none!important;min-width:180px;flex:1;font:inherit;font-size:13px;padding:4px 0!important;box-shadow:none!important}
.ec-editor{margin:12px 22px 0;border:1px solid var(--bd2);border-radius:8px;overflow:hidden;background:var(--card)}
.ec-tools{display:flex;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--bd);background:var(--s2);flex-wrap:wrap}
.ec-tb{height:28px;min-width:28px;padding:0 7px;border:0;background:transparent;border-radius:5px;cursor:pointer;font:inherit;font-size:13px;color:var(--t2);display:inline-flex;align-items:center;justify-content:center}
.ec-tb:hover{background:var(--card);color:var(--acc)}
.ec-sep{width:1px;height:18px;background:var(--bd2);margin:0 4px}
.ec-body{min-height:260px;max-height:46vh;overflow:auto;padding:14px 16px;font-size:14px;line-height:1.55;color:var(--t);outline:none}
.ec-body:empty::before{content:attr(data-placeholder);color:var(--t3)}
.ec-body a{color:var(--acc)}
.ec-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px 18px;margin-top:12px;border-top:1px solid var(--bd)}

/* ── template builder: room to work, clear sections ── */
#template-modal .modal{width:min(1180px,95vw);max-width:none}
#template-modal .fgrid{grid-template-columns:1fr 1fr;gap:12px}
#template-modal .ff.full{grid-column:1/-1}
#template-modal .ff>label{display:block;margin-bottom:5px;font-size:12.5px;font-weight:600;color:var(--t2)}
#template-modal .ff input,#template-modal .ff select,#template-modal .ff textarea{width:100%}
/* the email-only blocks read as their own sections */
#tp_subject_wrap,#tp_email_buttons_wrap,#tp_email_footer_wrap,#tp_wa_header_wrap,#tp_wa_footer_wrap,#tp_wa_buttons_wrap{
  border:1px solid var(--bd);border-radius:8px;padding:12px 14px;background:var(--s2);margin-top:2px}
#tp_subject_wrap{border-color:var(--tint-bd);background:var(--tint)}
#tp_email_buttons_wrap,#tp_wa_buttons_wrap{border-top:1px solid var(--bd)!important;padding-top:12px!important}
#tp_subject_wrap .fgrid{gap:14px}
#tp_email_buttons_list:empty::before{content:'No buttons yet.';font-size:12.5px;color:var(--t3)}
/* preview column keeps its width on narrower screens instead of collapsing */
#tp_preview_col{flex:0 0 340px}
@media(max-width:1080px){
  #template-modal .modal>div[style*="display:flex"]{flex-direction:column}
  #tp_preview_col{flex:1 1 auto;width:100%}
  #template-modal .fgrid{grid-template-columns:1fr}
}

/* ── email designer: right-side drawer, above the template modal ── */
#unlayer-modal{z-index:1400}                 /* template modal sits at 500 */
#unlayer-modal .ed-modal{width:min(1280px,96vw);height:100%;display:flex;flex-direction:column;padding:0;border-radius:0;overflow:hidden}
.ed-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 22px;border-bottom:1px solid var(--bd);background:var(--card)}
.ed-title{font-size:16px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.ed-title .sico{color:var(--acc)}
.ed-sub{font-size:12.5px;color:var(--t3);margin-top:3px}
.ed-head-actions{display:flex;align-items:center;gap:8px;flex:none}
.ed-seg{display:inline-flex;border:1px solid var(--bd2);border-radius:6px;overflow:hidden;background:var(--card)}
.ed-seg button{border:0;background:transparent;padding:6px 11px;cursor:pointer;color:var(--t2);display:inline-flex;align-items:center}
.ed-seg button+button{border-left:1px solid var(--bd2)}
.ed-seg button.on{background:var(--acc);color:#fff}
.ed-canvas{flex:1;min-height:0;background:var(--s2)}
.ed-canvas iframe{border:0;width:100%;height:100%;display:block}
.ed-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 22px;border-top:1px solid var(--bd);background:var(--card)}
.ed-hint{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:6px}
.ed-hint code{background:var(--s2);border:1px solid var(--bd);border-radius:4px;padding:1px 5px;font-size:11.5px}
@media(max-width:900px){.ed-sub,.ed-seg{display:none}}

/* ── lead profile: only panes scroll, not the page ─────────────
   Previously these rules #page-leadprofile / #page-lead par likhe the, jabki asli
   element is #page-profile  so they did not apply and the whole page
   scrolled.
   And height was set via calc(100vh - 260px); 260 was a guess that
   did not fit the screen. Now there is a flex chain: at each level
   min-height:0, so remaining space distributes automatically  no guessing
   . */
/* The page box starts at the viewport top  the topbar is fixed and
   the page comes below it via padding-top. So counting the topbar again in the height
   subtracting was wrong: an equal empty strip remained below. Take the full
   100vh; padding-top/bottom (which changes with the banner and status bar
   ) leaves room automatically. */
#page-profile.active{
  height:100vh;
  display:flex;flex-direction:column;overflow:hidden;
  /* Left/right/bottom only 5px  let the page fill fully.
     padding-top is left untouched: topbar, banner and celebration bar
     is already accounted for by the app, and it differs per file. So
     was exactly why an empty strip remained last time. */
  padding-left:5px !important;
  padding-right:5px !important;
  padding-bottom:5px !important;
}
body.has-statusbar #page-profile.active{padding-bottom:30px !important}
#page-profile > .lpv-split{flex:1 1 auto;min-height:0;align-items:stretch}
#page-profile .lpv-content{
  min-width:0;min-height:0;height:100%;
  display:flex;flex-direction:column;overflow:hidden;
}
/* header and stage strip stay fixed in place */
#page-profile .lpv-hero,
#page-profile .lpv-stage-strip{flex:none}

#page-profile .lpv-body{flex:1 1 auto;min-height:0;align-items:stretch}
#page-profile .lpv-col-left,
#page-profile .lpv-col-right{
  min-height:0;max-height:none;height:100%;
  overflow-y:auto;overscroll-behavior:contain;padding-right:4px;
}
#page-profile .lpv-col-right{display:flex;flex-direction:column;overflow:hidden}
#page-profile .lpv-col-right .lpv-tabrow{flex:none}
#page-profile #lpv_tab_body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;
}
/* Cards are only as tall as needed  no empty space below */
/* The left column is flex, and flex's default is flex:0 1 auto  meaning
   every child shrinks as soon as space runs low. Isi wajah se Engagement
   stats ki rows kat rahi thi aur scorecard ka "Lead score" label adha dikh
   was happening. The card overflow was not the cause.
   Yahan har child ko shrink hone se rok dete hain: content poora dikhega,
   aur zaroorat padi to column khud scroll karega. */
/* Changed the column from flex to block. In flex each child's default
   is flex:0 1 auto  when space runs low it shrinks and cuts its
   content. In block this cannot happen: each card takes its full height
   and the column scrolls when needed. */
#page-profile .lpv-col-left{display:block}
#page-profile .lpv-col-left > *{flex:none;min-height:auto}
#page-profile .lpv-col-left > * + *{margin-top:10px}
#page-profile .lpv-col-right #lpv_tab_body > .card:last-child{margin-bottom:0}

.lpv-col-left::-webkit-scrollbar,#lpv_tab_body::-webkit-scrollbar{width:6px}
.lpv-col-left::-webkit-scrollbar-thumb,#lpv_tab_body::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:4px}

/* On small screens let everything flow naturally */
@media(max-width:1080px){
  #page-profile.active{height:auto;overflow:auto}
  #page-profile .lpv-col-left,
  #page-profile .lpv-col-right,
  #page-profile #lpv_tab_body{max-height:none;height:auto;overflow:visible}
}

/* Ask AI button removed with the AI Agents page */
.ask-ai-wrap{display:none}
.topbar .tb-search{max-width:820px}

/* ── Sidebar fixes (r117) ─────────────────────────────────────────────────
   1. The sidebar is navy in the light theme too. selliora-theme.css still has
      rules from when it was white (hover text var(--t), name var(--t)!important)
      and they outrank the rules above, so a hovered item and the user's name
      went navy-on-navy and vanished. */
:root:not([data-theme="dark"]) .sbar .ntab:hover,
:root:not([data-theme="dark"]) .sbar .ntab.nparent:hover{color:#fff!important}
:root:not([data-theme="dark"]) .sbar #nav-name{color:#fff!important}
/* 2. A group can now be closed while you are on one of its pages - keep its
      parent highlighted so you can still see where you are. */
.ntab.nparent.has-active:not(.open){background:var(--sbar-ac)!important}
/* 3. ☰-minimised sidebar: show the logo mark above ☰ instead of hiding it.
      Mark only, whole: .bt clips its contents, so the name is removed with
      font-size:0 (the mark sets its own size) and the clip is lifted. An
      uploaded wide logo cannot fit 66px, so the initials mark stands in. */
body.sb-collapsed:not(.sb-hover) .sbar .sb-brand{flex-direction:column;gap:10px;padding:14px 0 10px;justify-content:center}
body.sb-collapsed:not(.sb-hover) .sbar .sb-brand .bt{display:flex;font-size:0;gap:0;overflow:visible;min-width:36px}
body.sb-collapsed:not(.sb-hover) .sbar .sb-brand .bt img,
body.sb-collapsed:not(.sb-hover) .sbar .sb-brand .brand-badge{display:none}   /* "CRM" sets its own font-size, so font-size:0 misses it */

/* ── Top bar (r126): search box centred, "Advance filter" on the left ──
   Three columns: [Advance filter] [search, up to 820px] [+ · bell · help · avatar].
   The side columns share the remaining width equally, so the search box sits
   in the exact middle of the bar. */
.topbar{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,700px) minmax(150px,1fr);align-items:center;gap:16px}
.topbar .tb-left{display:flex;align-items:center;gap:8px;justify-self:start;min-width:0}
.topbar .tb-search{max-width:none;width:100%;justify-self:center}
.topbar .tb-right{justify-self:end;margin-left:0}
.topbar .tb-adv{width:auto;height:38px;padding:0 14px 0 10px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--t2)}
.topbar .tb-adv:hover{color:var(--acc);border-color:var(--acc)}
@media(max-width:900px){
  .topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .topbar .tb-adv span{display:none}
  .topbar .tb-adv{width:38px;padding:0;justify-content:center}
}