/* portal-cekstok.css — Modul Cek Stok BERSAMA (versi Sales). Kelas ter-scope `.cekstok-*`
   agar identik di halaman mana pun & tak bentrok CSS halaman. Pakai token tema yang sudah ada
   (--accent/--card/--input/--soft/--border/--ada/--sisa/--habis/--clay-*). Pasang via CekStok.mount(). */

/* Tombol Cek Stok kini pakai STANDAR `.psbtn` (pil putih clay) dari portal-subbar.css,
   dan toggle dikoordinasi PortalViews (portal-views.js). Halaman pemakai WAJIB me-link keduanya. */

.cekstok-sec{ width:min(95vw,1480px); margin-left:calc(50% - min(47.5vw,740px)); margin-top:18px; margin-bottom:32px; }
.cekstok-sec.hidden{ display:none; }
@media(max-width:780px){ .cekstok-sec{ width:100%; margin-left:0; } }
.cekstok-head{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin:0 0 12px; }
.cekstok-head small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.cekstok-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--clay,0 6px 24px rgba(0,0,0,.07)); }

.cekstok-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.cekstok-search{ flex:1; min-width:200px; background-color:var(--input); border:none; border-radius:11px; padding:10px 14px; font-size:13px; font-family:inherit; color:var(--text); box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); }
.cekstok-search::placeholder{ color:var(--muted); }
.cekstok-sel{ appearance:none; -webkit-appearance:none; background-color:var(--input); border:none; border-radius:11px; padding:10px 34px 10px 13px; font-size:12.5px; font-weight:600; font-family:inherit; color:var(--text); cursor:pointer; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.12)); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237B3FE4' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 12px center; }
.cekstok-count{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted); background:var(--soft); border-radius:20px; padding:7px 14px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); }

.cekstok-scroll{ overflow:auto; max-height:62vh; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.cekstok-scroll::-webkit-scrollbar{ width:11px; height:11px; }
.cekstok-scroll::-webkit-scrollbar-track{ background:var(--input); border-radius:10px; box-shadow:var(--clay-in, inset 0 1px 3px rgba(0,0,0,.1)); }
.cekstok-scroll::-webkit-scrollbar-thumb{ background:var(--accent-grad); border-radius:10px; border:3px solid transparent; background-clip:padding-box; }

.cekstok-tbl{ width:100%; border-collapse:collapse; min-width:1080px; }
.cekstok-tbl thead th{ position:sticky; top:0; background:var(--card); z-index:2; text-align:left; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); padding:10px 12px; border-bottom:1.5px solid var(--border); white-space:nowrap; }
.cekstok-tbl th.r, .cekstok-tbl td.r{ text-align:right; }
.cekstok-tbl td{ padding:11px 12px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.cekstok-tbl tbody tr:nth-child(odd){ background:color-mix(in srgb, var(--accent) 7%, transparent); }
.cekstok-tbl tbody tr:hover td{ background:var(--soft); }
.cekstok-code{ font-family:'Montserrat',monospace; font-weight:700; font-size:12px; }
.cekstok-lvl{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; background:var(--soft); color:var(--text2); white-space:nowrap; }
.cekstok-tbl td.cekstok-spec{ color:var(--muted); font-size:11.5px; white-space:normal; min-width:240px; max-width:360px; }
.cekstok-num{ font-variant-numeric:tabular-nums; font-weight:700; }
.cekstok-num.ok{ color:var(--ada); } .cekstok-num.low{ color:var(--sisa); } .cekstok-num.out{ color:var(--habis); }
.cekstok-hb{ font-size:10px; font-weight:800; padding:3px 9px; border-radius:11px; white-space:nowrap; }
.cekstok-hb.naik{ color:var(--sisa); background:color-mix(in srgb,var(--sisa) 14%,transparent); }
.cekstok-hb.turun{ color:var(--ada); background:color-mix(in srgb,var(--ada) 14%,transparent); }
.cekstok-hb.new{ color:var(--accent); background:var(--accent-dim); }
.cekstok-empty{ text-align:center; color:var(--muted); padding:22px; font-size:13px; }