:root{
  --ws-gap:.875rem; --ws-radius:14px; --ws-shadow:0 6px 18px rgba(2,32,21,.05);
  --ws-border:1px solid rgba(2,32,21,.08); --ws-soft:#f8faf9; --ws-accent:#1b8a56;
}

/* Header presisi */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.25rem 0}
.page-header__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.page-header__sub{font-size:.85rem;color:var(--bs-secondary-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#btnBack{white-space:nowrap}

/* Card */
.card-soft{border:var(--ws-border);border-radius:var(--ws-radius);box-shadow:var(--ws-shadow);background:#fff;overflow:hidden}
.card-soft>.card-header{background:#fff;padding:.6rem .9rem;border-bottom:var(--ws-border);display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.card-subtitle{font-size:.8rem;color:var(--bs-secondary-color);margin-top:2px}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ws-gap)}
@media (max-width:992px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:576px){.kpi-grid{grid-template-columns:1fr}}
.kpi{display:flex;align-items:center;gap:.75rem;background:linear-gradient(180deg,#fff,var(--ws-soft));border:var(--ws-border);border-radius:var(--ws-radius);padding:.8rem 1rem;min-height:70px}
.kpi .icon{font-size:1.6rem;color:var(--ws-accent)}
.kpi .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;color:var(--bs-secondary-color)}
.kpi .value{font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums lining-nums}

/* Tables & chips */
.table-soft thead{background:#f6faf7}
.table-soft tbody td{white-space:nowrap}
.badge-soft{background:#eef7f2;color:#157347;border:1px solid #d9eee5}
.chip-kpis{display:flex;gap:.35rem;flex-wrap:wrap}

/* Grid konten */
.insight-grid{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);gap:var(--ws-gap)}
@media (max-width:1200px){.insight-grid{grid-template-columns:1fr}}
.stack-cards{display:grid;gap:var(--ws-gap)}

/* Segmented Tabs */
.tabs-segmented{
  display:flex; gap:.5rem;
  background:var(--bs-body-bg,#fff);
  padding:.375rem; border:1px solid rgba(0,0,0,.06);
  border-radius:9999px; box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  width:100%; overflow:auto; scrollbar-width:none;
}
.tabs-segmented::-webkit-scrollbar{ display:none; }

.segtab{
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:.5rem .875rem; border-radius:9999px; font-weight:600;
  color:var(--bs-secondary-color,#6c757d); white-space:nowrap;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .04s ease;
  display:flex; align-items:center; gap:.25rem;
}
.segtab:hover{ background:rgba(25,135,84,.08); color:#198754; }
.segtab:active{ transform:translateY(1px); }

.segtab.active{
  background:#198754; color:#fff; box-shadow:0 2px 6px rgba(25,135,84,.25);
}
.segtab.active:hover{ background:#157347; }

/* Optional: responsif – biar tidak mepet ke kiri/kanan */
@media (max-width: 576px){
  .tabs-segmented{ padding:.25rem; }
  .segtab{ padding:.45rem .7rem; font-weight:600; }
}

/* Smooth switch antar tab: kontainer tab animasi tinggi, tidak meng-anchoring scroll */
.tab-content{
  transition: height .25s ease;
  overflow-anchor: none;      /* cegah page loncat saat tinggi berubah */
}

/* Opsional: haluskan transisi konten */
.tab-pane{
  transition: opacity .18s ease;
}
.tab-pane:not(.active){
  opacity: 0;
}

.card-soft .card-header > h2 { margin: 0; }
.card-soft .card-header .btn { white-space: nowrap; }