/* portal-pembelian.css — Modul HISTORY PEMBELIAN (halaman sales, manager). Kelas ter-scope `.pb-*`.
   Menumpang kelas bersama dari portal-terlaris.css (.trl-card/.trl-head/.trl-seg/.sa-tray/.sa-tbl/.tc-*).
   Token tema: --accent/--card/--input/--soft/--border/--text/--text2/--muted/--ada/--sisa/--habis/--clay*. */

.pb-sec .hidden, .pb-twin.hidden, .pb-supx.hidden{ display:none; }

/* ---- filter (satu baris di atas semua kartu) ---- */
.pb-filters{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; margin-bottom:14px; }
.pb-filters .trl-seg{ flex-wrap:wrap; }
.pb-fgrp{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pb-flbl{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pb-sup{ min-width:170px; }

/* ---- KPI ---- */
.pb-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media(max-width:1000px){ .pb-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:340px){ .pb-kpis{ grid-template-columns:1fr; } }
.pb-kpi{ background:var(--input); border-radius:14px; padding:14px 16px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); min-width:0; }
.pb-kl{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.pb-kv{ font-size:22px; font-weight:800; color:var(--text); line-height:1.2; }
.pb-ks{ font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5; }
.pb-ks b{ color:var(--text2); }
.pb-ks b.pb-warn{ color:var(--sisa,#E8A020); }
@media(max-width:520px){ .pb-kv{ font-size:18px; } .pb-kpi{ padding:12px 12px; } .pb-ks{ font-size:10.5px; } }

/* ---- chart ---- */
.pb-tblbtn, .pb-supx{ margin-left:auto; border:1px solid var(--border); background:var(--card); color:var(--text2); font:inherit; font-size:11px; font-weight:700;
  letter-spacing:0; text-transform:none; padding:6px 12px; border-radius:10px; cursor:pointer; transition:border-color .2s; }
.pb-tblbtn:hover, .pb-supx:hover{ border-color:var(--accent); color:var(--accent); }
.pb-headline{ font-size:13px; color:var(--text2); margin:-4px 0 10px; line-height:1.6; }
.pb-headline .pb-big{ color:var(--accent); font-size:15px; }
.pb-headline .trl-up{ color:var(--ada,#10B981); } .pb-headline .trl-down{ color:var(--habis,#E05050); } .pb-headline .trl-flat{ color:var(--accent); }
.pb-cur{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:20px; padding:1px 7px; vertical-align:1px; }
.pb-lgb{ width:10px; height:10px; border-radius:3px; display:inline-block; }
.pb-lgb.beli{ background:linear-gradient(135deg,#7B3FE4,#5535C0); }
.pb-lgb.jual{ background:var(--muted); opacity:.5; }
.pb-g1{ stop-color:#7B3FE4; } .pb-g2{ stop-color:#5535C0; }
body.dark .pb-g1{ stop-color:#9B6BF0; } body.dark .pb-g2{ stop-color:#6A39D0; }
.pb-bar-b{ fill:url(#pbgrad); }
.pb-bar-b.cur{ opacity:.7; }
.pb-bar-j{ fill:var(--muted); opacity:.5; }
.pb-hov{ fill:var(--accent); fill-opacity:.07; pointer-events:none; }
.tc-xlbl.pb-xcur{ fill:var(--accent); }
.pb-chart .tc-tip{ white-space:nowrap; line-height:1.55; }
.pb-dot{ width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:0; }
.pb-dot.beli{ background:#7B3FE4; } .pb-dot.jual{ background:var(--muted); opacity:.6; }
.pb-twin{ margin-top:14px; }
.pb-twin .sa-tbl{ min-width:620px; }
.sa-tbl td.pb-pos{ color:var(--sisa,#E8A020); font-weight:700; }
.sa-tbl td.pb-neg{ color:var(--ada,#10B981); font-weight:700; }

/* ---- analisa ---- */
.pb-ins .trl-iline b.trl-up{ color:var(--ada,#10B981); }
.pb-ins .trl-iline b.trl-down{ color:var(--habis,#E05050); }
.pb-ins .trl-iline b.trl-flat{ color:var(--accent); }

/* ---- umur stok (bar ordinal; ramp ungu satu hue — tervalidasi light & dark) ---- */
.pb-arow{ display:grid; grid-template-columns:118px minmax(0,1fr) 96px; gap:10px; align-items:center; padding:7px 0; }
.pb-alb{ font-size:12px; font-weight:700; color:var(--text2); }
.pb-arow.old .pb-alb{ color:var(--text); }
.pb-atrack{ height:14px; background:var(--input); border-radius:7px; overflow:hidden; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); }
.pb-abar{ display:block; height:100%; border-radius:0 4px 4px 0; }
.pb-aval{ text-align:right; font-size:12.5px; line-height:1.2; }
.pb-aval b{ color:var(--text); display:block; }
.pb-aval small{ color:var(--muted); font-size:10.5px; font-weight:700; }
.pb-b1{ background:#B39DFA; } .pb-b2{ background:#9674F2; } .pb-b3{ background:#7B3FE4; } .pb-b4{ background:#5E2BC0; } .pb-b5{ background:#3F1A8A; }
body.dark .pb-b1{ background:#5A3DA8; } body.dark .pb-b2{ background:#7552D0; } body.dark .pb-b3{ background:#9270EE; } body.dark .pb-b4{ background:#B397F6; } body.dark .pb-b5{ background:#D3C2FC; }
.pb-b0{ background:var(--muted); opacity:.55; }
.pb-anote{ font-size:11px; color:var(--muted); line-height:1.55; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.pb-anote b{ color:var(--text2); }
@media(max-width:520px){ .pb-arow{ grid-template-columns:92px minmax(0,1fr) 84px; gap:8px; } .pb-alb{ font-size:11px; } }

/* ---- tabel supplier & produk ---- */
.sa-tbl tr.pb-click{ cursor:pointer; }
.sa-tbl tr.pb-click.on td{ background:color-mix(in srgb,var(--accent) 16%,transparent); }
.sa-tbl tr.pb-click.on td.sa-cname{ color:var(--accent); }
.pb-stbl{ min-width:860px; }
.pb-sec .sa-tbl td.r, .pb-sec .sa-tbl th.r{ white-space:nowrap; }
.pb-muted{ color:var(--muted); font-weight:600; }
.sa-tbl b.trl-up{ color:var(--ada,#10B981); } .sa-tbl b.trl-down{ color:var(--habis,#E05050); }
.pb-ptray{ max-height:min(60vh,520px); }
.pb-ptbl{ min-width:1060px; }
.pb-ptbl th[data-s]{ cursor:pointer; user-select:none; }
.pb-ptbl th[data-s]:hover{ color:var(--accent); }
.pb-ptbl th.pb-sorted{ color:var(--accent); }
.pb-ptbl th.pb-sorted::after{ content:' ' attr(data-dir); font-size:9px; }
.pb-pn{ max-width:340px; min-width:220px; }
.pb-nm{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; line-height:1.35; }
.pb-pn small, .sa-tbl td.pb-u small, .sa-tbl td.r small{ display:block; font-size:10px; color:var(--muted); font-weight:600; margin-top:2px; }
.sa-tbl td.r small.pb-muted{ display:inline; }

/* chip status (filter) */
.pb-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pb-chip{ border:1px solid var(--border); background:var(--card); color:var(--text2); font:inherit; font-size:11.5px; font-weight:700; padding:6px 12px;
  border-radius:20px; cursor:pointer; transition:border-color .15s, background .15s; }
.pb-chip b{ margin-left:4px; font-weight:800; }
.pb-chip:hover{ border-color:var(--accent); }
.pb-chip.on{ background:linear-gradient(135deg,#7B3FE4,#5535C0); border-color:transparent; color:#fff; }
.pb-chip.c-mati b, .pb-chip.c-belum b{ color:var(--habis,#E05050); } .pb-chip.c-aging b, .pb-chip.c-lambat b{ color:var(--sisa,#E8A020); }
.pb-chip.c-sehat b{ color:var(--ada,#10B981); } .pb-chip.c-baru b{ color:var(--accent); }
.pb-chip.on b{ color:#fff; }

/* badge status — warna status + label teks (tak pernah warna saja) */
.pb-st{ display:inline-block; font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:20px; white-space:nowrap; line-height:1.3; }
.pb-st.st-mati{ background:color-mix(in srgb,var(--habis,#E05050) 14%,transparent); color:var(--habis,#E05050); }
.pb-st.st-aging{ background:color-mix(in srgb,var(--sisa,#E8A020) 18%,transparent); color:var(--sisa,#E8A020); }
.pb-st.st-belum{ background:color-mix(in srgb,var(--habis,#E05050) 7%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--habis,#E05050) 45%,transparent); color:var(--habis,#E05050); }
.pb-ins .trl-iline b.pb-amber{ color:var(--sisa,#E8A020); }
.pb-st.st-lambat{ background:transparent; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sisa,#E8A020) 60%,transparent); color:var(--sisa,#E8A020); }
.pb-st.st-baru{ background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.pb-st.st-sehat{ background:color-mix(in srgb,var(--ada,#10B981) 14%,transparent); color:var(--ada,#10B981); }
.pb-st.st-habis{ background:var(--soft); color:var(--muted); }
.pb-legend{ font-size:11px; color:var(--muted); line-height:2; margin-top:12px; }
.pb-legend b{ color:var(--text2); }
.pb-legend .pb-st{ font-size:9.5px; padding:2px 7px; }
.pb-gab{ color:var(--accent); font-weight:700; }

/* ---- periode: tombol + modal centang TAHUN × BULAN (11 Okt 2026) ---- */
.pb-perbtn{ text-align:left; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pb-pmodal{ position:fixed; inset:0; background:rgba(12,10,20,.5); display:flex; align-items:center; justify-content:center; z-index:120; padding:16px; }
.pb-pmodal.hidden{ display:none; }
.pb-pbox{ background:var(--card); border:1px solid var(--border); border-radius:16px; width:100%; max-width:440px; max-height:86vh; display:flex; flex-direction:column;
  box-shadow:var(--clay-lg, 0 20px 50px rgba(0,0,0,.3)); color:var(--text); }
.pb-phead{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border); font-weight:800; font-size:14px; }
.pb-px{ background:none; border:none; font-size:18px; line-height:1; color:var(--text2); cursor:pointer; padding:4px; }
.pb-pbody{ padding:14px 18px 6px; overflow:auto; min-height:0; }
.pb-plbl{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:9.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:2px 0 8px; }
.pb-pgrid{ display:grid; gap:6px; margin-bottom:14px; }
.pb-pyrs{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); }
.pb-pmos{ grid-template-columns:repeat(6,minmax(0,1fr)); }
@media(max-width:440px){ .pb-pmos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pb-ck{ display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border); background:var(--input); color:var(--text2);
  font:inherit; font-size:12px; font-weight:700; padding:8px 4px; border-radius:10px; cursor:pointer; letter-spacing:0; text-transform:none;
  transition:border-color .15s, background .15s, color .15s; min-width:0; }
.pb-ck i{ width:13px; height:13px; border-radius:4px; border:1.5px solid var(--muted); flex:none; box-sizing:border-box; position:relative; }
.pb-ck.on{ background:color-mix(in srgb,var(--accent) 12%,var(--card)); border-color:var(--accent); color:var(--accent); }
.pb-ck.on i{ background:linear-gradient(135deg,#7B3FE4,#5535C0); border-color:transparent; }
.pb-ck.on i::after{ content:''; position:absolute; left:3.5px; top:.5px; width:3.5px; height:7px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.pb-ck.nodata{ opacity:.45; }
.pb-ck:hover{ border-color:var(--accent); }
.pb-pq{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.pb-qb{ border:1px solid var(--border); background:var(--card); color:var(--text2); font:inherit; font-size:11px; font-weight:700; padding:4px 9px; border-radius:8px;
  cursor:pointer; letter-spacing:0; text-transform:none; }
.pb-qb:hover{ border-color:var(--accent); color:var(--accent); }
.pb-ck:focus-visible, .pb-qb:focus-visible, .pb-pok:focus-visible, .pb-px:focus-visible, .pb-perbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pb-pnote{ font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:8px; }
.pb-pfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--border); }
.pb-psum{ font-size:12px; font-weight:700; color:var(--text2); }
.pb-psum.warn{ color:var(--habis,#E05050); }
.pb-pbtns{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.pb-pok{ border:none; background:linear-gradient(135deg,#7B3FE4,#5535C0); color:#fff; font:inherit; font-size:12px; font-weight:800; padding:7px 16px; border-radius:9px; cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .pb-ck{ transition:none; } }