/* portal-kelolastok.css — Modul Kelola Visibilitas Stok BERSAMA (manager). Kelas ter-scope
   `.kelolastok-*`/`.ks-*` agar identik di halaman mana pun & tak bentrok CSS halaman.
   Pakai token tema yang sudah ada (--accent/--card/--input/--soft/--border/--ada/--habis/--clay-*).
   Tombol (Kelola Stok, Aksi, Bulk) pakai STANDAR `.psbtn` (pil putih clay) dari portal-subbar.css. */

.kelolastok-sec{ width:min(95vw,1480px); margin-left:calc(50% - min(47.5vw,740px)); margin-top:18px; margin-bottom:32px; }
.kelolastok-sec.hidden{ display:none; }
@media(max-width:780px){ .kelolastok-sec{ width:100%; margin-left:0; } }
.kelolastok-head{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin:0 0 12px; }
.kelolastok-head small{ font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); }
.kelolastok-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)); }

.kelolastok-toolbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.kelolastok-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)); }
.kelolastok-search::placeholder{ color:var(--muted); }
.kelolastok-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; }
.kelolastok-chk{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); white-space:nowrap; }
.kelolastok-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)); }

.kelolastok-bulk{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.kelolastok-bulk .ks-selcount{ font-size:12px; font-weight:700; color:var(--text2); }
.kelolastok-bulk .psbtn{ padding:6px 12px; }

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

.kelolastok-tbl{ width:100%; border-collapse:collapse; }
.kelolastok-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; }
.kelolastok-tbl th.r, .kelolastok-tbl td.r{ text-align:right; }
.kelolastok-tbl td{ padding:11px 12px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.kelolastok-tbl tbody tr:hover td{ background:var(--soft); }
.kelolastok-code{ font-family:'Montserrat',monospace; font-weight:700; font-size:12px; }
.kelolastok-tbl td.kelolastok-spec{ color:var(--muted); font-size:11.5px; white-space:normal; min-width:240px; max-width:360px; }
.ks-vis{ font-size:10px; font-weight:800; padding:3px 9px; border-radius:11px; white-space:nowrap; }
.ks-vis.on{ color:var(--ada); background:color-mix(in srgb,var(--ada) 14%,transparent); }
.ks-vis.off{ color:var(--habis); background:color-mix(in srgb,var(--habis) 14%,transparent); }
.kelolastok-empty{ text-align:center; color:var(--muted); padding:22px; font-size:13px; }