/* ════════════════════════════════════════════════════════════════════════
   LEADS WIDGETS — REDESIGN  (scope .lw-*)
   Diangkat dari prototipe dummypreview/leads-widgets.html
   Dipakai oleh wrapper (reports.vue / dashboards widget.vue) + 14 widget body.
   Bahasa visual: brand #1a83c7, font Inter (sudah global), token --lw-*.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --lw-brand:#1a83c7; --lw-brand-d:#136aa3; --lw-brand-l:#e7f2fa; --lw-brand-l2:#f0f6fb;
  --lw-ink:#1d2433; --lw-ink2:#394c62; --lw-ink3:#5e6e82; --lw-muted:#8492a6; --lw-faint:#a3afbd;
  --lw-line:#e8ecf2; --lw-line2:#eef2f7; --lw-bg:#f2f4f4; --lw-card:#fff;
  --lw-hot:#2e9e5b; --lw-hot-l:#e9f7ee; --lw-warn:#c47f17; --lw-warn-l:#fdf6ec;
  --lw-bad:#d8483f; --lw-bad-l:#fbe8e6; --lw-tip:#1a83c7; --lw-tip-l:#e9f3fb;
  --lw-r:14px; --lw-r-sm:10px; --lw-r-xs:8px;
  --lw-sh:0 1px 2px rgba(20,40,80,.04),0 5px 16px rgba(20,40,80,.05);
  --lw-sh-h:0 2px 6px rgba(20,40,80,.07),0 16px 34px rgba(20,40,80,.12);
  /* palet seri chart (samakan dgn Highcharts colors) */
  --c1:#1a83c7; --c2:#2A9BC8; --c3:#21A7B8; --c4:#1BB39C; --c5:#52c41a;
  --c6:#f0894e; --c7:#7a77ff; --c8:#e8590c;
}
.lw-card *{box-sizing:border-box}
.lw-card button{font-family:inherit;cursor:pointer}
.lw-card ::-webkit-scrollbar{width:8px;height:8px}
.lw-card ::-webkit-scrollbar-thumb{background:#cdd5e1;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.lw-card ::-webkit-scrollbar-thumb:hover{background:#a9b5c6}
.lw-card ::-webkit-scrollbar-track{background:transparent}

/* ════════════ CARD CHROME ════════════ */
.lw-card{background:var(--lw-card);border:1px solid var(--lw-line);border-radius:var(--lw-r);box-shadow:var(--lw-sh);
  display:flex;flex-direction:column;min-height:340px;max-height:440px;position:relative;transition:.15s}
.lw-card:hover{box-shadow:var(--lw-sh-h)}
/* widget body custom (tanpa .lw-root) pakai tinggi natural; cap 440 hanya utk widget standar */
.lw-card:not(:has(.lw-root)){max-height:none}
.lw-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--lw-line2)}
.lw-head .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0;
  background:var(--lw-brand-l);color:var(--lw-brand)}
.lw-htxt{min-width:0;display:flex;flex-direction:column}
.lw-htxt .ttl{font-size:13.5px;font-weight:750;color:var(--lw-ink);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-htxt .sub{font-size:11px;color:var(--lw-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-hsp{flex:1}
/* tombol ikon header (i / filter / view-toggle / ⋯) */
.lw-ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--lw-muted);font-size:14px;
  border:1px solid transparent;background:none;flex-shrink:0;position:relative;transition:.12s}
.lw-ib:hover{background:var(--lw-brand-l2);color:var(--lw-brand)}
.lw-ib.on{background:var(--lw-brand-l);color:var(--lw-brand)}
.lw-ib.has-filter{color:var(--lw-brand);background:var(--lw-brand-l)}
.lw-ib.has-filter::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--lw-hot);border:2px solid #fff;box-shadow:0 0 0 1px var(--lw-hot)}
/* bar ringkasan filter aktif (di atas isi widget) */
.lw-activefilter{display:flex;align-items:center;gap:9px;margin:0 16px 11px;padding:8px 12px;border-radius:9px;
  background:var(--lw-brand-l2);border:1px solid #dcebf7;font-size:11.5px;color:var(--lw-ink2)}
.lw-activefilter>.af-ic{color:var(--lw-brand);font-size:14px;flex-shrink:0}
.lw-activefilter .af-lbl{font-weight:700;color:var(--lw-brand);white-space:nowrap}
.lw-activefilter .af-body{flex:1;min-width:0;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.lw-activefilter .af-body .text-primary{color:var(--lw-muted)!important;font-weight:600}
.lw-activefilter .af-x{margin-left:auto;width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  color:var(--lw-muted);background:#fff;border:1px solid #dcebf7;flex-shrink:0;cursor:pointer;transition:.12s}
.lw-activefilter .af-x:hover{background:var(--lw-bad-l);border-color:#f0c9c5;color:var(--lw-bad)}
/* ⓘ kecil & halus menempel di judul (penjelasan widget, bukan tombol aksi) */
.lw-infowrap{flex-shrink:0;margin-left:-2px;position:relative}
.lw-ib.lw-info{width:22px;height:22px;font-size:13px;color:var(--lw-faint)}
.lw-ib.lw-info:hover,.lw-ib.lw-info.on{background:var(--lw-brand-l);color:var(--lw-brand)}
/* segmented view toggle (Chart/Tabel) */
.lw-seg{display:inline-flex;background:#f3f6fa;border:1px solid var(--lw-line);border-radius:8px;padding:2px;gap:2px;flex-shrink:0}
.lw-seg button{height:24px;width:28px;border-radius:6px;display:grid;place-items:center;font-size:12px;color:var(--lw-muted);border:none;background:none}
.lw-seg button.on{background:#fff;color:var(--lw-brand);box-shadow:0 1px 2px rgba(20,40,80,.08)}

/* ── body / footer ── */
.lw-body{flex:1;min-height:0;padding:14px;display:flex;flex-direction:column;position:relative}
.lw-foot{border-top:1px solid var(--lw-line2);padding:9px 14px;display:flex;align-items:center;gap:10px;min-height:46px}

/* ════════════ POPOVER (info + filter + menu) ════════════ */
.lw-pop{position:absolute;z-index:60;top:calc(100% + 7px);background:#fff;border:1px solid var(--lw-line);
  border-radius:12px;box-shadow:var(--lw-sh-h);padding:14px;display:none;animation:lwpop .14s ease}
@keyframes lwpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lw-pop.open{display:block}
.lw-pop.info{left:0;width:300px}
.lw-pop.filter{right:0;width:280px}
.lw-pop h6{font-size:12.5px;font-weight:750;color:var(--lw-ink);margin:0 0 7px;display:flex;align-items:center;gap:7px}
.lw-pop h6 i{color:var(--lw-brand)}
.lw-pop .ptxt{font-size:12px;color:var(--lw-ink2);line-height:1.55;margin:0 0 10px}
.lw-pop .ptxt b{color:var(--lw-ink);font-weight:700}
/* blok rumus */
.lw-formula{background:var(--lw-brand-l2);border:1px solid #dcebf7;border-radius:9px;padding:9px 11px;margin:2px 0 4px}
.lw-formula .fl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--lw-brand);margin-bottom:4px}
.lw-formula code{font-family:inherit;font-size:11.5px;color:var(--lw-ink2);line-height:1.55;display:block;white-space:pre-wrap}
/* field filter */
.lw-fg{margin-bottom:11px}
.lw-fg>label{display:block;font-size:11px;font-weight:600;color:var(--lw-ink3);margin-bottom:6px}
.lw-fsel,.lw-fin{width:100%;height:36px;border:1px solid var(--lw-line);border-radius:8px;padding:0 10px;font-size:12.5px;
  font-family:inherit;color:var(--lw-ink);background:#fff;outline:none}
.lw-fsel{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238492a6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:32px}
.lw-fsel:focus,.lw-fin:focus{border-color:var(--lw-brand);box-shadow:0 0 0 3px var(--lw-brand-l)}
.lw-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* pill periode */
.lw-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.lw-pill{height:28px;padding:0 11px;border:1px solid var(--lw-line);background:#fff;border-radius:7px;font-size:11.5px;
  font-weight:600;color:var(--lw-muted)}
.lw-pill.on{background:var(--lw-brand-l);border-color:#bcd6ea;color:var(--lw-brand)}
.lw-pacts{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}
.lw-pb{height:32px;padding:0 14px;border-radius:8px;font-size:12px;font-weight:650;border:none}
.lw-pb.ghost{border:1px solid var(--lw-line);background:#fff;color:var(--lw-ink2)}
.lw-pb.ghost:hover{border-color:#cfdae6}
.lw-pb.pri{background:var(--lw-brand);color:#fff}
.lw-pb.pri:hover{background:var(--lw-brand-d)}
/* menu titik-3 */
.lw-menu{right:0;width:194px;padding:6px}
.lw-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 9px;border-radius:7px;
  font-size:12.5px;font-weight:500;color:var(--lw-ink2);border:none;background:none}
.lw-menu button:hover{background:var(--lw-brand-l2);color:var(--lw-brand)}
.lw-menu button i{font-size:14px;width:16px;text-align:center;color:var(--lw-muted)}
.lw-menu button:hover i{color:var(--lw-brand)}
.lw-menu .sepr{height:1px;background:var(--lw-line2);margin:5px 2px}
.lw-menu .sub-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--lw-faint);
  padding:5px 9px 3px}
.lw-menu .danger{color:var(--lw-bad)}
.lw-menu .danger i{color:var(--lw-bad)}
.lw-menu .danger:hover{background:var(--lw-bad-l);color:var(--lw-bad)}

/* ════════════ TABEL ════════════ */
.lw-tblwrap{flex:1;overflow:auto;border-radius:10px}
.lw-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
/* reset border global app (theme style.css) yang bikin garis kolom vertikal */
.lw-tbl th,.lw-tbl td{border:0 !important}
/* header = bg primary light (permintaan), teks ink2 (bukan biru) */
/* header tabel = bar rata (bg primary-light, teks ink), TANPA radius per-sel (hindari "pill"); konsisten dgn deals .dw- */
.lw-tbl thead th{position:sticky;top:0;background:var(--lw-brand-l);text-align:left;
  padding:10px 13px;font-size:11px;font-weight:700;color:var(--lw-ink2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-radius:0}
.lw-tbl thead th.num{text-align:right}
/* baris: pemisah halus saja, tanpa border kotak/grid */
.lw-tbl tbody td{padding:9px 13px;border-bottom:1px solid var(--lw-line2);color:var(--lw-ink2);white-space:nowrap}
.lw-tbl tbody tr:last-child td{border-bottom:none}
.lw-tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--lw-ink)}
.lw-tbl .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.lw-tbl tfoot td{padding:10px 13px;border-top:1px solid var(--lw-line);font-weight:800;color:var(--lw-ink);font-size:12.5px;background:#fafcfe}
.lw-tbl tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ════════════ CHART (wrapper Highcharts + legend tabel fallback) ════════════ */
.lw-chart{flex:1;display:flex;align-items:center;justify-content:center;padding:6px;gap:18px;min-height:200px}
.lw-hc{flex:1;min-width:0;height:100%;min-height:220px}
.contacts-chart-widget{min-height:0}
.contacts-chart-widget>.lw-root{height:100%}
.contacts-distribution-chart{width:100%;height:100%;min-height:240px;padding:4px 8px}
.contacts-distribution-chart .lw-hc{width:100%;height:100%;min-height:240px;flex:1 1 100%}
.contacts-distribution-chart.is-cartesian{display:block;padding:4px 10px 0}
/* Saat Table aktif, pertahankan instance Highcharts untuk Unduh PNG tanpa
   membiarkan canvas mengambil ruang dan mendorong tabel ke bawah. */
.contacts-chart-widget .lw-data.is-table-view{position:relative}
.contacts-chart-widget .lw-data.is-table-view .contacts-distribution-chart.is-hidden-for-table{position:absolute;inset:0;visibility:hidden;pointer-events:none}
/* Issue distribution uses the same responsive chart canvas contract as
   Contacts: the wrapper supplies the available body area and Highcharts
   allocates its pie from that live plot, never from a fixed pixel diameter. */
.issue-widget-chart-canvas{width:100%;height:100%;min-height:240px;padding:4px 8px}
/* legenda kanan opsional (kalau legend Highcharts dimatikan) */
.lw-legend{display:flex;flex-direction:column;gap:7px;min-width:120px}
.lw-leg{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--lw-ink2)}
.lw-leg .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.lw-leg .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-leg .vl{font-weight:700;color:var(--lw-ink);font-variant-numeric:tabular-nums}

/* ════════════ LIST (widget list + pagination) ════════════ */
.lw-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin:-4px 0}
.lw-li{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--lw-line2);transition:.12s}
.lw-li:hover{background:var(--lw-brand-l2);border-radius:8px;cursor:pointer}
.lw-av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:.02em}
.lw-li-main{min-width:0;flex:1}
.lw-li-nm{font-size:12.5px;font-weight:700;color:var(--lw-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-li-meta{font-size:11px;color:var(--lw-muted);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lw-li-meta .mi{display:inline-flex;align-items:center;gap:4px}
.lw-li-meta .mi i{font-size:11px;opacity:.85}
.lw-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--lw-brand-l);color:var(--lw-brand)}
.lw-chip.calls{background:#e9f3fb;color:#1a83c7} .lw-chip.notes{background:#fdf6ec;color:#c47f17}
.lw-chip.tasks{background:#e9f7ee;color:#2e9e5b}
.lw-li-act{font-size:11.5px;font-weight:650;color:var(--lw-brand);flex-shrink:0;display:inline-flex;align-items:center;gap:4px;opacity:0;transition:.12s}
.lw-li:hover .lw-li-act{opacity:1}
.lw-li-idle{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:3px 8px;border-radius:999px;background:var(--lw-warn-l);color:var(--lw-warn);font-size:10.5px;font-weight:700;white-space:nowrap}
.lw-li-idle i{font-size:11px}

/* ════════════ PROGRESS (new_leads) ════════════ */
.lw-prog{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center;padding:4px 2px}
.lw-prow .pr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.lw-prow .pr-l{font-size:12px;font-weight:600;color:var(--lw-ink2)}
.lw-prow .pr-v{font-size:13px;font-weight:800;color:var(--lw-ink);font-variant-numeric:tabular-nums}
.lw-prow .pr-v small{font-size:11px;font-weight:600;color:var(--lw-muted)}
.lw-track{height:9px;border-radius:6px;background:var(--lw-line);overflow:hidden}
.lw-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--lw-brand),#3da0dd)}
.lw-fill.full{background:linear-gradient(90deg,#2e9e5b,#34c08f)}
.lw-prow .pr-cap{font-size:10.5px;color:var(--lw-muted);margin-top:5px}
/* new_leads mode KPI tunggal (filterWidget=true) */
.lw-kpi{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.lw-kpi .k-lbl{font-size:12px;font-weight:600;color:var(--lw-muted)}
.lw-kpi .k-val{font-size:38px;font-weight:800;color:var(--lw-ink);letter-spacing:-1px;line-height:1}
.lw-kpi .k-val a{color:inherit;text-decoration:none}

/* ════════════ PAGINATION ════════════ */
.lw-pg{display:flex;align-items:center;gap:3px;margin-left:auto}
.lw-pg button,.lw-pg .page-link{min-width:28px;height:28px;padding:0 7px;border-radius:7px;font-size:12px;font-weight:600;color:var(--lw-ink3);
  border:1px solid var(--lw-line);background:#fff;display:inline-flex;align-items:center;justify-content:center}
.lw-pg button:hover:not(:disabled),.lw-pg .page-link:hover{border-color:#cfdae6;color:var(--lw-brand)}
.lw-pg button.on,.lw-pg .active .page-link{background:var(--lw-brand);border-color:var(--lw-brand);color:#fff}
.lw-pg button:disabled,.lw-pg .disabled .page-link{opacity:.4;cursor:default}
.lw-pg-info{font-size:11.5px;color:var(--lw-muted)}

/* ════════════ STATES: skeleton / firstuse / empty / nosearch / error ════════════
   Selector generik [data-state] → bisa dipasang di root BODY widget (yg tahu dataWidget),
   bukan cuma di .lw-card. Root body = elemen ber-[data-state] yg membungkus
   .lw-samplebar + .lw-data + .lw-state* + .lw-foot. */
.lw-state{flex:1;min-height:280px;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:18px}
[data-state="skeleton"] .lw-state.skeleton{display:flex}
[data-state="firstuse"] .lw-state.firstuse{display:flex}
[data-state="empty"]    .lw-state.empty{display:flex}
[data-state="nosearch"] .lw-state.nosearch{display:flex}
[data-state="error"]    .lw-state.error{display:flex}
/* state non-ready sembunyikan data + footer */
.lw-data{flex:1;display:flex;flex-direction:column;min-height:0}
[data-state="skeleton"] .lw-data,
[data-state="firstuse"] .lw-data,
[data-state="empty"] .lw-data,
[data-state="nosearch"] .lw-data,
[data-state="error"] .lw-data,
[data-state="skeleton"] .lw-foot,
[data-state="firstuse"] .lw-foot,
[data-state="empty"] .lw-foot,
[data-state="nosearch"] .lw-foot,
[data-state="error"] .lw-foot{display:none}
/* root body widget mengisi tinggi kartu (+ padding agar tidak nempel tepi) */
.lw-root{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding:14px 16px 16px}
/* rantai pengisi tinggi: .lw-card → .card-body → wrapper → .lw-root (biar state ke-center) */
.lw-card>.card-body{flex:1;min-height:0;display:flex;flex-direction:column}
.lw-card .lw-bodyfill{flex:1;min-height:0}
/* banner mode data contoh */
.lw-samplebar{display:none;align-items:center;gap:8px;margin:-2px -2px 12px;padding:7px 11px;border-radius:9px;
  background:linear-gradient(90deg,var(--lw-warn-l),#fffaf1);border:1px solid #f1e2c4;font-size:11.5px;color:#9c6a13}
.is-sample .lw-samplebar{display:flex}
.lw-samplebar>i{font-size:13px;color:var(--lw-warn);flex-shrink:0}
.lw-samplebar b{font-weight:750;color:#7e560f}
.lw-samplebar .sp{flex:1}
.lw-samplebar .exit{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 10px;border-radius:7px;
  font-size:11px;font-weight:700;color:var(--lw-warn);background:#fff;border:1px solid #ecd5a4;transition:.12s;flex-shrink:0}
.lw-samplebar .exit:hover{background:var(--lw-warn);border-color:var(--lw-warn);color:#fff}
/* ilustrasi + teks state */
.lw-ill{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;font-size:34px;margin-bottom:13px}
.lw-ill.muted{background:var(--lw-line2);color:var(--lw-faint)}
.lw-ill.brand{background:var(--lw-brand-l);color:var(--lw-brand)}
.lw-ill.bad{background:var(--lw-bad-l);color:var(--lw-bad)}
.lw-state .st-t{font-size:15.5px;font-weight:750;color:var(--lw-ink)}
.lw-state .st-d{font-size:12.5px;color:var(--lw-muted);line-height:1.55;max-width:340px;margin-top:3px}
.lw-state .st-acts{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap;justify-content:center}
.lw-sbtn{height:36px;padding:0 15px;font-size:12.5px}
.lw-sbtn{height:32px;padding:0 13px;border-radius:8px;font-size:12px;font-weight:650;display:inline-flex;align-items:center;gap:6px;border:none}
.lw-sbtn.pri{background:var(--lw-brand);color:#fff} .lw-sbtn.pri:hover{background:var(--lw-brand-d)}
.lw-sbtn.ghost{border:1px solid var(--lw-line);background:#fff;color:var(--lw-ink2)} .lw-sbtn.ghost:hover{border-color:#cfdae6}

/* Leads by status: donut dan legenda dipisah agar ukuran chart konsisten dengan
   desain Dashboard. Kontrol tetap berada di renderer dashboard; aturan ini
   hanya mengatur ruang visual komponen laporan. */
.leads-status-widget-card .lw-chart{min-height:268px;padding:4px 8px;gap:24px}
.leads-status-widget-card .lw-hc{flex:0 1 62%;height:260px;min-height:260px}
.leads-status-widget-card .lw-chart.is-cartesian{display:block;padding:4px 10px 0}
.leads-status-widget-card .lw-chart.is-cartesian .lw-hc{width:100%;height:260px;min-height:260px;flex:1 1 100%}
.leads-status-widget-card .lw-legend{width:190px;min-width:190px;gap:9px}
.leads-status-widget-card .lw-leg{display:grid;grid-template-columns:8px minmax(0,max-content) auto;align-items:center;column-gap:5px;width:100%;min-width:0;padding:0;border:0;background:transparent;text-align:left;cursor:pointer}
.leads-status-widget-card .lw-leg:hover .nm,.leads-status-widget-card .lw-leg:focus .nm{color:var(--lw-brand)}
.leads-status-widget-card .lw-leg:focus{outline:2px solid #c9e3f4;outline-offset:3px;border-radius:4px}
.leads-status-widget-card .lw-leg .sw{width:8px;height:8px;border-radius:50%}
.leads-status-widget-card .lw-leg .nm{flex:none;font-size:11.5px;font-weight:600;color:#52647b;white-space:nowrap}
.leads-status-widget-card .lw-leg .vl{font-size:11.5px;font-weight:600;color:#8090a5;white-space:nowrap}
.leads-status-widget-card .lw-leg .vl strong{color:#34475e;font-weight:800}
.leads-status-widget-card :is(.leads-total-chart,.leads-status-chart){display:block;position:relative;padding:4px 0;gap:0}
.leads-status-widget-card :is(.leads-total-chart,.leads-status-chart) .lw-hc{width:100%;height:260px;min-height:260px;flex:1 1 100%}
:is(.leads-total-donut-center,.leads-status-donut-center){position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;text-align:center;white-space:nowrap}
:is(.leads-total-donut-center,.leads-status-donut-center) strong{display:block;color:#1d2433;font-size:18px;font-weight:800;line-height:1.15}
:is(.leads-total-donut-center,.leads-status-donut-center) span{display:block;margin-top:2px;color:#8492a6;font-size:9px;font-weight:500;line-height:1.15}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-root{padding:8px 8px 12px}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl{width:100%;border-collapse:separate;border-spacing:0 2px;table-layout:fixed}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl th:nth-child(1){width:43%}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl th:nth-child(2){width:43%}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl th:nth-child(3){width:14%}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl thead th{padding:10px 12px;background:#e3f1fb;color:#31516d}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl thead th:first-child{border-radius:8px 0 0 8px}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl thead th:last-child{border-radius:0 8px 8px 0}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl tbody tr{cursor:pointer;transition:background-color .14s ease}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl tbody td{padding:9px 12px!important;background:#fbfdff;border-bottom:0!important;vertical-align:middle}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl tbody tr:hover td{background:#f0f8fe}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-name{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;white-space:nowrap}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-name>span:last-child{overflow:hidden;text-overflow:ellipsis}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-rank{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:6px;font-size:10px;font-weight:800;line-height:1;flex:0 0 auto}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-name .sw{display:inline-block;margin:0;width:8px;height:8px;border-radius:50%;flex:0 0 auto}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-total{display:grid;grid-template-columns:minmax(50px,1fr) auto;align-items:center;gap:8px;width:100%;font-variant-numeric:tabular-nums}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-track{display:block;min-width:0;height:12px;overflow:hidden;border-radius:4px;background:#e2eef8}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-fill{display:block;height:100%;min-width:2px;border-radius:4px;background:#2675c5!important}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-total>span:last-child{min-width:23px;color:#1d2433;font-size:11px;font-weight:800;text-align:right}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-pct{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:22px;border-radius:11px;padding:2px 7px;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl tfoot td{padding:10px 12px!important;border-radius:0!important;background:#f1f5f9!important;color:#1d2433!important}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl tfoot td:first-child{border-radius:8px 0 0 8px!important}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-status-tbl tfoot td:last-child{border-radius:0 8px 8px 0!important}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-owner-matrix{padding:10px 14px 14px}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-note{display:flex;align-items:flex-start;gap:5px;margin:0 0 9px;color:#7a8ca2;font-size:10px;line-height:1.35}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-note i{margin-top:1px;color:#6d91b4;font-size:12px;flex:0 0 auto}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-note b{font-weight:750;color:#6b7f96}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-wrap{border:1px solid #e7edf4;border-radius:9px;overflow:auto}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table{min-width:675px;table-layout:auto;border-collapse:collapse;font-size:10.5px}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table thead th{position:static;padding:8px 9px;background:#e3f1fb;color:#31516d;font-size:9px;font-weight:800;letter-spacing:.02em}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table thead th:first-child{min-width:160px;text-align:left}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table tbody td{padding:7px 9px;background:#fff;border-bottom:1px solid #edf2f6!important;color:#465b72;font-weight:650;vertical-align:middle}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table tbody tr:last-child td{border-bottom:0!important}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table tbody tr:hover td{background:#f7fbff}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table td.num{min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-owner{display:flex;align-items:center;gap:6px;min-width:0}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-rank{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:6px;font-size:9px;font-weight:800;line-height:1;flex:0 0 auto}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-avatar{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;font-size:8px;font-weight:800;color:#fff;line-height:1;flex:0 0 auto}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-owner-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#3d4e65;font-size:10.5px;font-weight:650}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-link{color:#365b80;font-weight:750;text-decoration:none}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-link:hover{color:#1a83c7;text-decoration:underline}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-total{display:inline-flex;align-items:center;justify-content:flex-end;min-width:44px;padding:3px 7px;border-radius:5px;background:#e7f2fa;color:#2675c5;font-weight:800}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-table tfoot td{padding:9px!important;background:#f4f7fa!important;border-top:1px solid #e4ebf1!important;color:#2c394b!important;font-size:10.5px;font-weight:800}
:is(.leads-status-widget-card,.leads-total-widget-card) .lw-matrix-empty{display:flex;align-items:center;justify-content:center;min-height:180px;color:#8492a6;font-size:12px;text-align:center}
@media (max-width: 720px){
  .leads-status-widget-card .lw-chart{align-items:flex-start;flex-direction:column;gap:12px}
  .leads-status-widget-card .lw-hc{width:100%;flex-basis:auto}
  .leads-status-widget-card .lw-chart.is-cartesian{display:block}
  .leads-status-widget-card .lw-legend{display:grid;width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
  .leads-status-widget-card .lw-owner-matrix{padding:8px}
}
/* skeleton shimmer */
.lw-sk{width:100%;height:13px;border-radius:7px;background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);
  background-size:400% 100%;animation:lwshim 1.3s ease infinite}
@keyframes lwshim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.lw-sk-rows{width:100%;display:flex;flex-direction:column;gap:13px;padding:6px 2px}
.lw-sk-row{display:flex;align-items:center;gap:12px}
.lw-sk-row .lw-sk.c{width:34px;height:34px;border-radius:9px;flex-shrink:0}

/* search bar (widget list) */
.lw-search{display:flex;align-items:center;gap:7px;border:1px solid var(--lw-line);border-radius:8px;padding:0 10px;height:30px;
  background:#f7f9fc;width:172px;flex-shrink:0;transition:.13s}
.lw-search:focus-within{border-color:var(--lw-brand);background:#fff;box-shadow:0 0 0 3px var(--lw-brand-l)}
.lw-search i{color:var(--lw-faint);font-size:12px;flex-shrink:0}
.lw-search input{border:none;outline:none;background:none;font-size:12px;color:var(--lw-ink2);width:100%;min-width:0}
/* search di header card (list widget) — konsisten dgn deals */
.lw-head-search{width:150px;height:28px}

/* ════════════ TABEL versi Bootstrap (Contacts .cw-tbl) ════════════ */
.cw-tbl{margin:0;font-size:12.5px}
.cw-tbl thead th{background:var(--lw-brand-l);color:var(--lw-ink2);font-weight:700;font-size:11.5px;border:0;white-space:nowrap;vertical-align:middle}
.cw-tbl tbody td{color:var(--lw-ink2);vertical-align:middle;border-color:var(--lw-line2)}
.cw-tbl tbody tr{cursor:pointer}
.cw-tbl tfoot td{color:var(--lw-ink);font-weight:800;border-top:2px solid var(--lw-line)}
.cw-tbl .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.cw-tbl .text-right{text-align:right;font-variant-numeric:tabular-nums}
.contacts-owner-matrix{min-width:max-content;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.contacts-owner-matrix thead th{position:sticky;top:0;z-index:2;padding:11px 14px;background:var(--lw-brand-l);border:0;border-bottom:1px solid var(--lw-line);color:var(--lw-ink2);font-size:11px;font-weight:800;text-align:right;white-space:nowrap}
.contacts-owner-matrix thead th:first-child{left:0;z-index:3;min-width:170px;text-align:left}
.contacts-owner-matrix tbody td{min-width:110px;padding:8px 14px;border:0;border-bottom:1px solid var(--lw-line2);background:#fff;text-align:right;white-space:nowrap}
.contacts-owner-matrix tbody td:first-child{position:sticky;left:0;z-index:1;min-width:170px;color:var(--lw-ink);font-weight:700;text-align:left}
.contacts-owner-matrix tbody td:not(:first-child)>a,
.contacts-owner-matrix tbody td:not(:first-child)>span{display:block;min-width:58px;padding:4px 9px;border-radius:7px;background:#e8f2fb;color:#24577e;font-weight:700;text-align:right}

/* footer caption util */
.lw-fcap{font-size:11px;color:var(--lw-muted);display:inline-flex;align-items:center;gap:6px}
.lw-fcap i{font-size:12px}
.lw-fade{animation:lwfade .25s ease}
@keyframes lwfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}