/* ════════════════════════════════════════════════════════════════════════
   ORGANIZATION WIDGETS — REDESIGN  (scope .ow-*)
   Diangkat dari prototipe dummypreview/org-widgets.html.
   Dipakai oleh wrapper org/components/reports.vue + body widget modul Org.
   Bahasa visual: brand #1a83c7, font Inter (sudah global), token --ow-*.
   CSS terpisah dari leads-widgets.css (.lw-*) & deals-widgets.css (.dw-*),
   mengikuti keputusan/precedent port Deals.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --ow-brand:#1a83c7; --ow-brand-d:#136aa3; --ow-brand-l:#e7f2fa; --ow-brand-l2:#f0f6fb;
  --ow-ink:#1d2433; --ow-ink2:#394c62; --ow-ink3:#5e6e82; --ow-muted:#8492a6; --ow-faint:#a3afbd;
  --ow-line:#e8ecf2; --ow-line2:#eef2f7; --ow-bg:#f2f4f4; --ow-card:#fff;
  --ow-hot:#2e9e5b; --ow-hot-l:#e9f7ee; --ow-warn:#c47f17; --ow-warn-l:#fdf6ec;
  --ow-bad:#d8483f; --ow-bad-l:#fbe8e6;
  --ow-r:14px; --ow-r-sm:10px; --ow-r-xs:8px;
  --ow-sh:0 1px 2px rgba(20,40,80,.04),0 5px 16px rgba(20,40,80,.05);
  --ow-sh-h:0 2px 6px rgba(20,40,80,.07),0 16px 34px rgba(20,40,80,.12);
  --owc1:#1a83c7; --owc2:#2A9BC8; --owc3:#21A7B8; --owc4:#1BB39C; --owc5:#52c41a;
  --owc6:#f0894e; --owc7:#7a77ff; --owc8:#e8590c;
}
.ow-card *{box-sizing:border-box}
.ow-card button{font-family:inherit;cursor:pointer}
.ow-card ::-webkit-scrollbar{width:8px;height:8px}
.ow-card ::-webkit-scrollbar-thumb{background:#cdd5e1;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
.ow-card ::-webkit-scrollbar-thumb:hover{background:#a9b5c6}
.ow-card ::-webkit-scrollbar-track{background:transparent}

/* ════════════ CARD CHROME ════════════ */
.ow-card{background:var(--ow-card);border:1px solid var(--ow-line);border-radius:var(--ow-r);box-shadow:var(--ow-sh);
  display:flex;flex-direction:column;min-height:360px;max-height:480px;position:relative;transition:.15s}
.ow-card:hover{box-shadow:var(--ow-sh-h)}
/* rantai tinggi: body widget mengisi tinggi kartu agar isi & state ter-center.
   Di-scope :has(.ow-root) agar hanya widget redesign yg terpengaruh. */
.ow-card .widget-body:has(.ow-root){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.ow-card .widget-body:has(.ow-root)>.d-flex.align-items-stretch{flex:1;min-height:0}
.ow-card .widget-body:has(.ow-root)>.d-flex.align-items-stretch>*{display:flex;flex-direction:column;flex:1;min-height:0}
.ow-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--ow-line2)}
.ow-head .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0;
  background:var(--ow-brand-l);color:var(--ow-brand)}
.ow-htxt{min-width:0;display:flex;flex-direction:column}
.ow-htxt .ttl{font-size:13.5px;font-weight:750;color:var(--ow-ink);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-htxt .sub{font-size:11px;color:var(--ow-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-hsp{flex:1}
.ow-ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ow-muted);font-size:14px;
  border:1px solid transparent;background:none;flex-shrink:0;position:relative;transition:.12s}
.ow-ib:hover{background:var(--ow-brand-l2);color:var(--ow-brand)}
.ow-ib.on{background:var(--ow-brand-l);color:var(--ow-brand)}
.ow-ib.has-filter{color:var(--ow-brand);background:var(--ow-brand-l)}
.ow-ib.has-filter::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--ow-hot);border:2px solid #fff;box-shadow:0 0 0 1px var(--ow-hot)}
/* bar ringkasan filter aktif */
.ow-activefilter{display:flex;align-items:center;gap:9px;margin:0 16px 11px;padding:8px 12px;border-radius:9px;
  background:var(--ow-brand-l2);border:1px solid #dcebf7;font-size:11.5px;color:var(--ow-ink2)}
.ow-activefilter>.af-ic{color:var(--ow-brand);font-size:14px;flex-shrink:0}
.ow-activefilter .af-lbl{font-weight:700;color:var(--ow-brand);white-space:nowrap}
.ow-activefilter .af-body{flex:1;min-width:0;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.ow-activefilter .af-body .text-primary{color:var(--ow-muted)!important;font-weight:600}
.ow-activefilter .af-x{margin-left:auto;width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  color:var(--ow-muted);background:#fff;border:1px solid #dcebf7;flex-shrink:0;cursor:pointer;transition:.12s}
.ow-activefilter .af-x:hover{background:var(--ow-bad-l);border-color:#f0c9c5;color:var(--ow-bad)}
/* ⓘ kecil */
.ow-infowrap{flex-shrink:0;margin-left:-2px;position:relative}
.ow-ib.ow-info{width:22px;height:22px;font-size:13px;color:var(--ow-faint)}
.ow-ib.ow-info:hover,.ow-ib.ow-info.on{background:var(--ow-brand-l);color:var(--ow-brand)}
/* segmented view toggle */
.ow-seg{display:inline-flex;background:#f3f6fa;border:1px solid var(--ow-line);border-radius:8px;padding:2px;gap:2px;flex-shrink:0}
.ow-seg button{height:24px;width:28px;border-radius:6px;display:grid;place-items:center;font-size:12px;color:var(--ow-muted);border:none;background:none}
.ow-seg button.on{background:#fff;color:var(--ow-brand);box-shadow:0 1px 2px rgba(20,40,80,.08)}

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

/* ════════════ POPOVER (info + filter + menu) ════════════ */
.ow-pop{position:absolute;z-index:60;top:calc(100% + 7px);background:#fff;border:1px solid var(--ow-line);
  border-radius:12px;box-shadow:var(--ow-sh-h);padding:14px;display:none;animation:owpop .14s ease}
@keyframes owpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ow-pop.open{display:block}
.ow-pop.info{left:0;width:300px}
.ow-pop.filter{right:0;width:282px}
.ow-pop h6{font-size:12.5px;font-weight:750;color:var(--ow-ink);margin:0 0 7px;display:flex;align-items:center;gap:7px}
.ow-pop h6 i{color:var(--ow-brand)}
.ow-pop .ptxt{font-size:12px;color:var(--ow-ink2);line-height:1.55;margin:0 0 10px}
.ow-pop .ptxt b{color:var(--ow-ink);font-weight:700}
.ow-formula{background:var(--ow-brand-l2);border:1px solid #dcebf7;border-radius:9px;padding:9px 11px;margin:2px 0 4px}
.ow-formula .fl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ow-brand);margin-bottom:4px}
.ow-formula code,.ow-formula .ftxt{font-family:inherit;font-size:11.5px;color:var(--ow-ink2);line-height:1.55;display:block;white-space:pre-wrap}
.ow-fg{margin-bottom:11px}
.ow-fg>label{display:block;font-size:11px;font-weight:600;color:var(--ow-ink3);margin-bottom:6px}
.ow-fsel,.ow-fin{width:100%;height:36px;border:1px solid var(--ow-line);border-radius:8px;padding:0 10px;font-size:12.5px;
  font-family:inherit;color:var(--ow-ink);background:#fff;outline:none}
.ow-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}
.ow-fsel:focus,.ow-fin:focus{border-color:var(--ow-brand);box-shadow:0 0 0 3px var(--ow-brand-l)}
.ow-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ow-pacts{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}
.ow-pb{height:32px;padding:0 14px;border-radius:8px;font-size:12px;font-weight:650;border:none}
.ow-pb.ghost{border:1px solid var(--ow-line);background:#fff;color:var(--ow-ink2)}
.ow-pb.ghost:hover{border-color:#cfdae6}
.ow-pb.pri{background:var(--ow-brand);color:#fff}
.ow-pb.pri:hover{background:var(--ow-brand-d)}
/* menu titik-3 */
.ow-menu{right:0;width:206px;padding:6px}
.ow-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(--ow-ink2);border:none;background:none}
.ow-menu button:hover{background:var(--ow-brand-l2);color:var(--ow-brand)}
.ow-menu button i{font-size:14px;width:16px;text-align:center;color:var(--ow-muted)}
.ow-menu button:hover i{color:var(--ow-brand)}
.ow-menu .sepr{height:1px;background:var(--ow-line2);margin:5px 2px}
.ow-menu .sub-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ow-faint);
  padding:5px 9px 3px}

/* ════════════ TABEL (header bg primary-light, ink text, tanpa garis grid) ════════════ */
.ow-tblwrap{flex:1;overflow:auto;border-radius:10px}
.ow-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.ow-tbl th,.ow-tbl td{border:0 !important}
.ow-tbl thead th{position:sticky;top:0;background:var(--ow-brand-l);text-align:left;
  padding:10px 13px;font-size:11px;font-weight:700;color:var(--ow-ink2);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;border-radius:0}
.ow-tbl thead th.num{text-align:right}
.ow-tbl tbody td{padding:9px 13px;border-bottom:1px solid var(--ow-line2);color:var(--ow-ink2);white-space:nowrap}
.ow-tbl tbody tr:last-child td{border-bottom:none}
.ow-tbl tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:650;color:var(--ow-ink)}
.ow-tbl tbody tr.lnkrow:hover{background:var(--ow-brand-l2);cursor:pointer}
.ow-tbl .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:-1px}
.ow-tbl tfoot td{padding:10px 13px;border-top:1px solid var(--ow-line);font-weight:800;color:var(--ow-ink);font-size:12.5px;background:#fafcfe}
.ow-tbl tfoot td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ════════════ CHART (wrapper Highcharts) ════════════ */
.ow-chart{flex:1;display:flex;align-items:center;justify-content:center;padding:6px;gap:18px;min-height:200px}
.ow-hc{flex:1;min-width:0;height:100%;min-height:240px}

/* ════════════ LIST ════════════ */
.ow-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin:-4px 0}
.ow-li{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--ow-line2);transition:.12s}
.ow-li:hover{background:var(--ow-brand-l2);border-radius:8px;cursor:pointer}
.ow-rank{width:22px;text-align:center;font-size:12px;font-weight:800;color:var(--ow-muted);flex-shrink:0;font-variant-numeric:tabular-nums}
.ow-rank.top{color:var(--ow-warn)}
.ow-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}
.ow-li-main{min-width:0;flex:1}
.ow-li-nm{font-size:12.5px;font-weight:700;color:var(--ow-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-li-meta{font-size:11px;color:var(--ow-muted);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ow-li-meta .mi{display:inline-flex;align-items:center;gap:4px}
.ow-li-meta .mi i{font-size:11px;opacity:.85}
.ow-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--ow-brand-l);color:var(--ow-brand)}
.ow-chip.warn{background:var(--ow-warn-l);color:var(--ow-warn)}
.ow-chip.hot{background:var(--ow-hot-l);color:var(--ow-hot)}
.ow-li-act{font-size:11.5px;font-weight:650;color:var(--ow-brand);flex-shrink:0;display:inline-flex;align-items:center;gap:4px;opacity:0;transition:.12s}
.ow-li:hover .ow-li-act{opacity:1}

/* ════════════ PROGRESS / KPI / STAT DASHBOARD ════════════ */
.ow-prog{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center;padding:4px 2px}
.ow-prog.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-content:center}
@media(max-width:520px){.ow-prog.grid2{grid-template-columns:1fr}}
.ow-prog.stack{justify-content:space-between;gap:20px}
.ow-prow .pr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.ow-prow .pr-l{font-size:12px;font-weight:600;color:var(--ow-ink2)}
.ow-prow .pr-v{font-size:13px;font-weight:800;color:var(--ow-ink);font-variant-numeric:tabular-nums}
.ow-prow .pr-v a{color:inherit;text-decoration:none}
.ow-prow .pr-v small{font-size:11px;font-weight:600;color:var(--ow-muted)}
.ow-track{height:9px;border-radius:6px;background:var(--ow-line);overflow:hidden}
.ow-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ow-brand),#3da0dd)}
.ow-fill.full{background:linear-gradient(90deg,#2e9e5b,#34c08f)}
.ow-prow .pr-cap{font-size:10.5px;color:var(--ow-muted);margin-top:5px}
/* stat trio (leads/national dashboard) */
.ow-stats{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center}
.ow-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:520px){.ow-stat-row{grid-template-columns:1fr}}
.ow-stat{border-radius:11px;padding:14px;background:var(--ow-brand-l2);border:1px solid #e0ecf6;position:relative}
.ow-stat.warn{background:var(--ow-bad-l);border-color:#f3cfca}
.ow-stat.good{background:var(--ow-hot-l);border-color:#c7e8d4}
.ow-stat .s-l{font-size:11.5px;font-weight:650;color:var(--ow-ink3);line-height:1.25}
.ow-stat .s-v{font-size:30px;font-weight:800;color:var(--ow-ink);line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
.ow-stat .s-v a{color:inherit;text-decoration:none}
.ow-stat.warn .s-v{color:var(--ow-bad)}
.ow-stat.good .s-v{color:var(--ow-hot)}
.ow-stat .s-warn{font-size:10.5px;color:var(--ow-bad);margin-top:7px;display:flex;align-items:center;gap:4px;font-weight:600}
.ow-stat .s-go{font-size:10.5px;color:var(--ow-brand);margin-top:7px;display:inline-flex;align-items:center;gap:4px;font-weight:700}

/* ════════════ PAGINATION ════════════ */
.ow-foot .pagination{margin-left:auto;margin-bottom:0}
.ow-pg-info{font-size:11.5px;color:var(--ow-muted)}

/* ════════════ STATES ════════════ */
.ow-state{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:18px;min-height:280px}
[data-state="skeleton"] .ow-state.skeleton{display:flex}
[data-state="firstuse"] .ow-state.firstuse{display:flex}
[data-state="empty"]    .ow-state.empty{display:flex}
[data-state="nosearch"] .ow-state.nosearch{display:flex}
[data-state="error"]    .ow-state.error{display:flex}
.ow-data{flex:1;display:flex;flex-direction:column;min-height:0}
[data-state="skeleton"] .ow-data,
[data-state="firstuse"] .ow-data,
[data-state="empty"] .ow-data,
[data-state="nosearch"] .ow-data,
[data-state="error"] .ow-data,
[data-state="skeleton"] .ow-foot,
[data-state="firstuse"] .ow-foot,
[data-state="empty"] .ow-foot,
[data-state="nosearch"] .ow-foot,
[data-state="error"] .ow-foot{display:none}
.ow-root{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding:14px 16px 16px}
/* banner mode data contoh */
.ow-samplebar{display:none;align-items:center;gap:8px;margin:-2px -2px 12px;padding:7px 11px;border-radius:9px;
  background:linear-gradient(90deg,var(--ow-warn-l),#fffaf1);border:1px solid #f1e2c4;font-size:11.5px;color:#9c6a13}
.is-sample .ow-samplebar{display:flex}
.ow-samplebar>i{font-size:13px;color:var(--ow-warn);flex-shrink:0}
.ow-samplebar b{font-weight:750;color:#7e560f}
.ow-samplebar .sp{flex:1}
.ow-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(--ow-warn);background:#fff;border:1px solid #ecd5a4;transition:.12s;flex-shrink:0}
.ow-samplebar .exit:hover{background:var(--ow-warn);border-color:var(--ow-warn);color:#fff}
/* ilustrasi + teks state */
.ow-ill{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;font-size:34px;margin-bottom:13px}
.ow-ill.muted{background:var(--ow-line2);color:var(--ow-faint)}
.ow-ill.brand{background:var(--ow-brand-l);color:var(--ow-brand)}
.ow-ill.bad{background:var(--ow-bad-l);color:var(--ow-bad)}
.ow-state .st-t{font-size:15.5px;font-weight:750;color:var(--ow-ink)}
.ow-state .st-d{font-size:12.5px;color:var(--ow-muted);line-height:1.55;max-width:340px;margin-top:3px}
.ow-state .st-acts{display:flex;gap:9px;margin-top:15px;flex-wrap:wrap;justify-content:center}
.ow-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}
.ow-sbtn.pri{background:var(--ow-brand);color:#fff} .ow-sbtn.pri:hover{background:var(--ow-brand-d)}
.ow-sbtn.ghost{border:1px solid var(--ow-line);background:#fff;color:var(--ow-ink2)} .ow-sbtn.ghost:hover{border-color:#cfdae6}
/* skeleton shimmer */
.ow-sk{width:100%;height:13px;border-radius:7px;background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);
  background-size:400% 100%;animation:owshim 1.3s ease infinite}
@keyframes owshim{0%{background-position:100% 0}100%{background-position:-100% 0}}
.ow-sk-rows{width:100%;display:flex;flex-direction:column;gap:13px;padding:6px 2px}
.ow-sk-row{display:flex;align-items:center;gap:12px}
.ow-sk-row .ow-sk.c{width:34px;height:34px;border-radius:9px;flex-shrink:0}

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

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