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

/* ════════════ CARD CHROME ════════════ */
.tw-card{background:var(--tw-card);border:1px solid var(--tw-line);border-radius:var(--tw-r);box-shadow:var(--tw-sh);
  display:flex;flex-direction:column;min-height:360px;max-height:520px;position:relative;transition:.15s}
.tw-card:hover{box-shadow:var(--tw-sh-h)}
.tw-card:has(.tw-pop.open){z-index:80;overflow:visible}
.widget-report>.col-sm-6:has(.tw-pop.open){z-index:80}
/* kartu tabel lebar (col-12, mis. Report Sub-Category Ticket): tingginya mengikuti
   isi — 10 baris + baris Total + kaki tidak muat di max-height 520px bawaan. */
.tw-card.tw-wide{max-height:none}
/* rantai tinggi: body widget mengisi tinggi kartu agar isi & state ter-center.
   Di-scope :has(.tw-root) agar hanya widget redesign yg terpengaruh. */
.tw-card .widget-body:has(.tw-root){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tw-card .widget-body:has(.tw-root)>.d-flex.align-items-stretch{flex:1;min-height:0}
.tw-card .widget-body:has(.tw-root)>.d-flex.align-items-stretch>*{display:flex;flex-direction:column;flex:1;min-height:0}
.tw-head{display:flex;align-items:center;gap:9px;padding:13px 14px;border-bottom:1px solid var(--tw-line2)}
.tw-head .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex-shrink:0;
  background:var(--tw-brand-l);color:var(--tw-brand)}
.tw-htxt{min-width:0;display:flex;flex-direction:column}
.tw-htxt .ttl{font-size:13.5px;font-weight:750;color:var(--tw-ink);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-htxt .sub{font-size:11px;color:var(--tw-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-hsp{flex:1}
.tw-ib{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tw-muted);font-size:14px;
  border:1px solid transparent;background:none;flex-shrink:0;position:relative;transition:.12s}
.tw-ib:hover{background:var(--tw-brand-l2);color:var(--tw-brand)}
.tw-ib.on{background:var(--tw-brand-l);color:var(--tw-brand)}
.tw-ib.has-filter{color:var(--tw-brand);background:var(--tw-brand-l)}
.tw-ib.has-filter::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;
  background:var(--tw-hot);border:2px solid #fff;box-shadow:0 0 0 1px var(--tw-hot)}
/* bar ringkasan filter aktif */
.tw-activefilter{display:flex;align-items:center;gap:9px;margin:0 16px 11px;padding:8px 12px;border-radius:9px;
  background:var(--tw-brand-l2);border:1px solid #dcebf7;font-size:11.5px;color:var(--tw-ink2)}
.tw-activefilter>.af-ic{color:var(--tw-brand);font-size:14px;flex-shrink:0}
.tw-activefilter .af-lbl{font-weight:700;color:var(--tw-brand);white-space:nowrap}
.tw-activefilter .af-body{flex:1;min-width:0;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.tw-activefilter .af-body .text-primary{color:var(--tw-muted)!important;font-weight:600}
.tw-activefilter .af-x{margin-left:auto;width:25px;height:25px;border-radius:7px;display:grid;place-items:center;
  color:var(--tw-muted);background:#fff;border:1px solid #dcebf7;flex-shrink:0;cursor:pointer;transition:.12s}
.tw-activefilter .af-x:hover{background:var(--tw-bad-l);border-color:#f0c9c5;color:var(--tw-bad)}
/* ⓘ kecil */
.tw-infowrap{flex-shrink:0;margin-left:-2px;position:relative}
.tw-ib.tw-info{width:22px;height:22px;font-size:13px;color:var(--tw-faint)}
.tw-ib.tw-info:hover,.tw-ib.tw-info.on{background:var(--tw-brand-l);color:var(--tw-brand)}
/* segmented view toggle */
.tw-seg{display:inline-flex;background:#f3f6fa;border:1px solid var(--tw-line);border-radius:8px;padding:2px;gap:2px;flex-shrink:0}
.tw-seg button{height:24px;width:28px;border-radius:6px;display:grid;place-items:center;font-size:12px;color:var(--tw-muted);border:none;background:none}
.tw-seg button.on{background:#fff;color:var(--tw-brand);box-shadow:0 1px 2px rgba(20,40,80,.08)}
.tw-chartpicker{position:relative;flex-shrink:0}
.tw-charttrigger{height:30px;display:flex;align-items:center;gap:6px;padding:0 9px;border:1px solid var(--tw-line);border-radius:8px;background:#fff;color:var(--tw-ink2);font-size:11.5px;font-weight:650}
.tw-charttrigger:hover,.tw-charttrigger.on{border-color:#cfe2f1;background:var(--tw-brand-l2);color:var(--tw-brand)}
.tw-charttrigger>i:first-child{font-size:13px;color:var(--tw-muted)}
.tw-charttrigger>i:last-child{font-size:13px;margin-left:2px}
.tw-pop.tw-chartmenu{right:0;width:142px;padding:6px}
.tw-chartmenu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 9px;border:0;border-radius:7px;background:none;color:var(--tw-ink2);font-size:12px;text-align:left}
.tw-chartmenu button:hover,.tw-chartmenu button.active{background:var(--tw-brand-l2);color:var(--tw-brand)}
.tw-chartmenu button i{width:15px;text-align:center;color:var(--tw-muted)}

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

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

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

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

/* ════════════ LIST label/count (tickets_by_priority) ════════════ */
.tw-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin:-4px 0}
.tw-li{display:flex;align-items:center;gap:11px;padding:9px 6px;border-bottom:1px solid var(--tw-line2);transition:.12s}
.tw-li:hover{background:var(--tw-brand-l2);border-radius:8px;cursor:pointer}
.tw-dot{width:12px;height:12px;border-radius:4px;flex-shrink:0}
.tw-li-main{min-width:0;flex:1}
.tw-li-nm{font-size:12.5px;font-weight:700;color:var(--tw-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-li-meta{font-size:11px;color:var(--tw-muted);margin-top:2px}
.tw-li-val{font-size:16px;font-weight:800;color:var(--tw-ink);flex-shrink:0;font-variant-numeric:tabular-nums}
.tw-li-val a{color:inherit;text-decoration:none}
.tw-li-act{font-size:11px;font-weight:650;color:var(--tw-brand);flex-shrink:0;display:inline-flex;align-items:center;gap:4px;opacity:0;transition:.12s;margin-left:6px}
.tw-li:hover .tw-li-act{opacity:1}
/* kartu metrik (status grid 2 kolom) */
.tw-cards{flex:1;display:grid;grid-template-columns:1fr;gap:10px;align-content:center}
.tw-metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;border-radius:10px;
  background:var(--tw-brand-l2);border:1px solid var(--tw-line2);cursor:pointer;transition:.12s}
.tw-metric:hover{background:var(--tw-brand-l);border-color:#bcd6ea}
.tw-metric .ml{font-size:12px;font-weight:600;color:var(--tw-ink2);display:flex;align-items:center;gap:7px;min-width:0}
.tw-metric .ml .tw-dot{width:9px;height:9px;border-radius:50%}
.tw-metric .mv{font-size:18px;font-weight:800;color:var(--tw-ink);font-variant-numeric:tabular-nums}
.tw-metric .mv a{color:inherit;text-decoration:none}

/* ════════════ PROGRESS / KPI ════════════ */
.tw-prog{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center;padding:4px 2px}
.tw-prog.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-content:center}
@media(max-width:520px){.tw-prog.grid2{grid-template-columns:1fr}}
.tw-prow .pr-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.tw-prow .pr-l{font-size:12px;font-weight:600;color:var(--tw-ink2)}
.tw-prow .pr-v{font-size:13px;font-weight:800;color:var(--tw-ink);font-variant-numeric:tabular-nums}
.tw-prow .pr-v a{color:inherit;text-decoration:none}
.tw-prow .pr-v small{font-size:11px;font-weight:600;color:var(--tw-muted)}
.tw-track{height:9px;border-radius:6px;background:var(--tw-line);overflow:hidden}
.tw-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--tw-brand),#3da0dd)}
.tw-fill.full{background:linear-gradient(90deg,#2e9e5b,#34c08f)}
.tw-prow .pr-cap{font-size:10.5px;color:var(--tw-muted);margin-top:5px}
/* KPI besar (tickets_open / tickets_due_date / average_close_tickets) */
.tw-kpi{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:8px 4px}
.tw-kpi .kp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.tw-kpi .kp-l{font-size:12.5px;font-weight:600;color:var(--tw-ink2)}
.tw-kpi .kp-big{font-size:46px;font-weight:800;color:var(--tw-brand);line-height:.95;font-variant-numeric:tabular-nums;cursor:pointer}
.tw-kpi .kp-big a{color:inherit;text-decoration:none}
.tw-kpi .kp-big.warn{color:var(--tw-warn)} .tw-kpi .kp-big.bad{color:var(--tw-bad)}
.tw-kpi .kp-trk{height:22px;border-radius:8px;background:var(--tw-line);overflow:hidden;position:relative}
.tw-kpi .kp-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--tw-brand),#3da0dd);display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-size:11px;font-weight:800}
.tw-kpi .kp-foot{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--tw-ink3)}
.tw-kpi .kp-foot b{color:var(--tw-ink);font-weight:800}

/* ════════════ MATRIX (stage × prioritas) ════════════ */
.tw-matrix{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center;padding:2px;overflow-y:auto}
.tw-mrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--tw-brand-l2);border:1px solid var(--tw-line2)}
.tw-mrow .ms{min-width:120px}
.tw-mrow .ms .nm{font-size:12.5px;font-weight:750;color:var(--tw-ink)}
.tw-mrow .ms .sub{font-size:10.5px;color:var(--tw-muted)}
.tw-mrow .mcells{flex:1;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.tw-mc{display:flex;flex-direction:column;align-items:center;gap:3px}
.tw-mc .circle{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:800}
.tw-mc .pl{font-size:9.5px;color:var(--tw-muted);font-weight:600}

/* ════════════ PIPELINE (funnel stage) ════════════ */
.tw-pipe{flex:1;display:flex;flex-direction:column;gap:16px;justify-content:center;padding:4px 2px}
.tw-stages{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.tw-stg{flex:1;min-width:90px;position:relative;background:linear-gradient(180deg,#3da0dd,var(--tw-brand));color:#fff;
  padding:13px 8px 13px 20px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.tw-stg:first-child{padding-left:12px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.tw-stg .sn{font-size:11px;font-weight:600;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tw-stg .sv{font-size:18px;font-weight:800;line-height:1.1}
.tw-stg.s2{background:linear-gradient(180deg,#2A9BC8,#21A7B8)}
.tw-stg.s3{background:linear-gradient(180deg,#21A7B8,#1BB39C)}
.tw-stg.s4{background:linear-gradient(180deg,#34c08f,#2e9e5b)}
.tw-pipe-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.tw-ps{padding:10px 12px;border-radius:10px;background:var(--tw-brand-l2);border:1px solid var(--tw-line2);text-align:center}
.tw-ps .pl{font-size:10.5px;color:var(--tw-muted);font-weight:600}
.tw-ps .pv{font-size:17px;font-weight:800;color:var(--tw-ink);font-variant-numeric:tabular-nums;margin-top:2px}

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

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

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

/* ── widget tabel lebar (report_voc_rental, 46 kolom) ──
   Kartu dapat kolom penuh dari reports.vue (col-12); batas tinggi 520px kartu biasa
   harus dilepas, kalau tidak tabel + KPI + paginasi terpotong di dalam kartu.
   Kotak pencarian tinggal di KEPALA kartu, sebaris ikon corong & ⋯ (owner 12 Agu 2026). */
.tw-card.tw-wide{max-height:none}
.tw-vocq{display:flex;align-items:center;gap:6px;border:1px solid var(--tw-line);border-radius:8px;padding:0 9px;height:30px;
  background:#f7f9fc;width:230px;flex-shrink:0;transition:.13s}
.tw-vocq:focus-within{border-color:var(--tw-brand);background:#fff;box-shadow:0 0 0 3px var(--tw-brand-l)}
.tw-vocq>i{color:var(--tw-faint);font-size:13px;flex-shrink:0}
.tw-vocq input{border:none;outline:none;background:none;font-size:11.5px;color:var(--tw-ink2);width:100%;min-width:0}
.tw-vocq button{border:none;background:none;color:var(--tw-muted);cursor:pointer;padding:0;display:grid;place-items:center;
  font-size:13px;flex-shrink:0}
.tw-vocq button:hover{color:var(--tw-brand)}