/* pages/klien.css — .pg-klien: master-detail ≥1024px; di bawahnya daftar & detail bergantian (kembali lewat "Semua klien" di kepala halaman) */
.pg-klien{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.pg-klien .kl-master{position:sticky;top:22px;padding:14px}
.pg-klien .kl-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.pg-klien .kl-tools .srch-root{min-width:0}
.pg-klien .kl-list{list-style:none;display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 280px);overflow:auto}
.pg-klien .kl-row{display:flex;align-items:center;gap:11px;padding:10px;border-radius:13px;border:1px solid transparent;transition:background-color var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-fast)}
.pg-klien .kl-row:hover{background:var(--hover)}
.pg-klien .kl-row[aria-current="page"]{background:var(--selected-bg);border-color:var(--line-strong);box-shadow:var(--sh-1)}
.pg-klien .kl-main{flex:1;min-width:0;display:flex;flex-direction:column}
.pg-klien .kl-main b{font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-klien .kl-main span{font-size:var(--fs-xs);color:var(--text-3)}
.pg-klien .kl-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:var(--fs-xs)}
.pg-klien .kl-detail{min-height:420px;padding:24px}
.pg-klien .kl-head{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:18px}
.pg-klien .kl-title{flex:1 1 200px;min-width:0}
.pg-klien .kl-title h2{font-size:var(--fs-xl);font-weight:800}
.pg-klien .kl-title p{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:var(--fs-sm);color:var(--text-3)}
.pg-klien .kl-actions{display:flex;gap:8px}
.pg-klien .kl-detail .mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))} /* 3 angka sebaris (tanpa kartu yatim) */
.pg-klien .kl-infos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.pg-klien .kl-info{display:flex;align-items:flex-start;gap:10px;min-width:0}
.pg-klien .kl-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text)}
.pg-klien .kl-info small{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--text-3)}
.pg-klien .kl-info b{font-size:var(--fs-sm);font-weight:600;word-break:break-word}
.pg-klien .kl-sec{margin:22px 0 10px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.pg-klien .kl-sub{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:var(--fs-sm)}
.pg-klien .kl-sub span{display:flex;align-items:center;gap:8px}
.pg-klien .kl-sub b{white-space:nowrap} /* "Rp 3.500.000/bln" tidak terlipat */
.pg-klien .kl-empty{font-size:var(--fs-sm);color:var(--text-3)}
/* Klien diarsipkan: pita penjelasan + Aktifkan lagi di atas angka ringkasan */
.pg-klien .kl-archived{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:18px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);color:var(--text-2)}
.pg-klien .kl-archived-text{display:flex;align-items:flex-start;gap:10px;flex:1 1 260px;min-width:0}
.pg-klien .kl-archived-text svg{flex:none;margin-top:2px;color:var(--text-3)}
.pg-klien .kl-archived b{color:var(--ink)}

@media (max-width:1023px){
  .pg-klien{grid-template-columns:minmax(0,1fr)}
  .pg-klien .kl-master{position:static}
  .pg-klien .kl-list{max-height:none}
  .pg-klien .kl-detail{display:none}
  .pg-klien.is-detail .kl-master{display:none}
  .pg-klien.is-detail .kl-detail{display:block}
}
@media (max-width:767px){
  .pg-klien .kl-detail{padding:16px}
  .pg-klien .kl-infos{grid-template-columns:minmax(0,1fr)}
  .pg-klien .kl-actions{flex:1 1 100%}
  .pg-klien .kl-actions .btn{flex:1;justify-content:center}
}