/* stok-list.css — the stock lists (SJA Produksi -> Stok, and the raw-material Stok tab). Logic: stok-list.js (+ purchasing-workspace.js for the raw materials). Every class starts with stl-.
 * Reads like the "Perlu diproduksi" board (sja-produce-board.css): the category is a compact header, the CODE leads, the number is big and on the right, a state is a small chip.
 * Colours: red only for habis / minus (a real problem), the warning amber only for rendah (under a minimum), grey for "belum ada" (no record) and nonaktif.
 * Phone first (rows about 46px, nothing wider than the screen); the aligned columns switch on the width of the LIST (container query), not of the window:
 * the desktop sidebar takes ~180px (lesson desktop-table-switches-on-list-width-not-viewport-width). */
.stl{container:stl/inline-size;color:var(--dark,#101828)}
.stl *,.stl *::before,.stl *::after{box-sizing:border-box}
.stl-on{container:stl/inline-size}

/* filter chips: Semua · Rendah · Habis (the number is what the chip lists) */
.stl-bar{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .55rem}
.stl-fb{min-height:44px;padding:.25rem .85rem;border:1.5px solid var(--border-input,#D0D5DD);border-radius:999px;background:#fff;color:var(--ink2,#475467);font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;white-space:nowrap}
.stl-fb.is-on{background:var(--p,#4F46E5);border-color:var(--p,#4F46E5);color:#fff}
.stl-fn{font-weight:900;font-variant-numeric:tabular-nums}
.stl-empty{padding:1.2rem .5rem;text-align:center;color:var(--muted,#667085)}

/* one category: a sticky compact header (name, count, total) and its rows, open by default. SJA: it sticks under the sticky tab bar of the Produksi page (40px);
 * the raw-material tab has no bar above it (top:0 lands under the fixed desktop header by itself: the content's padding counts). */
#sja-body .stl-gh{top:40px}
.stl-g{margin:0 0 .6rem;border:1px solid var(--border,#E4E7EC);border-radius:12px;background:#fff}
.stl-gh{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.3rem .7rem;position:sticky;top:0;z-index:2;background:var(--light,#F8FAFC);border-bottom:1px solid var(--border,#E4E7EC);border-radius:11px 11px 0 0;cursor:pointer;list-style:none}
.stl-g:not([open])>.stl-gh{border-bottom:0;border-radius:11px}
.stl-gh::-webkit-details-marker{display:none}
.stl-gt{min-width:0;font-size:1.05rem;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.stl-gn{flex:none;padding:0 .5rem;border-radius:999px;background:#EAECF0;color:var(--ink2,#475467);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.stl-gs{flex:1 1 auto;min-width:0;text-align:right;font-size:.95rem;font-weight:700;color:var(--ink2,#475467);font-variant-numeric:tabular-nums}
.stl-gq{white-space:nowrap}
.stl-gc{flex:none;width:.6rem;height:.6rem;margin:0 .2rem;border-right:2.5px solid var(--muted,#667085);border-bottom:2.5px solid var(--muted,#667085);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.stl-g:not([open])>.stl-gh .stl-gc{transform:rotate(-45deg)}
.stl-gb{display:block}

/* a product row: CODE bold, name small after, the chip; the number big on the right; the demoted action (🔢 / the details) last */
.stl-r{border-top:1px solid #F2F4F7}
.stl-gb>.stl-r:first-child{border-top:0}
.stl-rs{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:.1rem .5rem;min-height:46px;padding:.15rem .6rem;list-style:none;cursor:pointer}
.stl-rs::-webkit-details-marker{display:none}
.stl-id{display:flex;align-items:baseline;gap:.15rem .45rem;min-width:0}
.stl-code{flex:none;max-width:40%;font-size:.78rem;font-weight:700;line-height:1.25;color:var(--muted,#667085);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stl-nm{flex:0 1 auto;min-width:0;font-size:1.15rem;font-weight:800;line-height:1.25;color:var(--dark,#101828);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stl-chip{flex:none;display:inline-block;padding:.02rem .5rem;border-radius:8px;font-size:.78rem;font-weight:700;line-height:1.5;white-space:nowrap}
.stl-chip.is-habis{background:#FEF3F2;color:#B42318}
.stl-chip.is-low{background:#FFFAEB;border:1px solid #FEDF89;color:#B54708}
.stl-chip.is-none,.stl-chip.is-off,.stl-chip.is-quiet{background:#F2F4F7;color:#475467}
.stl-q{display:block;min-width:0;text-align:right;white-space:nowrap}
.stl-n{font-size:1.2rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.stl-q.is-zero .stl-n,.stl-q.is-none .stl-n{color:var(--muted,#667085)}
.stl-q.is-neg .stl-n{color:var(--danger,#DC2626)}
.stl-u{font-size:.8rem;font-weight:600;color:var(--ink2,#475467)}
.stl-c{display:block;font-size:.9rem;font-weight:600;line-height:1.2;color:var(--muted,#667085);font-variant-numeric:tabular-nums}
.stl-act{flex:none;width:44px;height:44px;margin-left:auto;padding:0;border:1px solid var(--border,#E4E7EC);border-radius:10px;background:#fff;font-size:1rem;cursor:pointer}
.stl-act-0{display:block;width:44px}
.stl-r.is-inactive .stl-rs{opacity:.7}
.stl-sja>.stl-rs{min-height:56px;grid-template-columns:minmax(0,1fr) auto 24px}
.stl-ex{width:.55rem;height:.55rem;justify-self:center;border-right:2.5px solid var(--p,#4F46E5);border-bottom:2.5px solid var(--p,#4F46E5);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.stl-r[open]>.stl-rs .stl-ex{transform:rotate(-135deg)}
.stl-sja .stl-kg{font-weight:600}
.stl-sx{display:flex;flex-wrap:wrap;gap:.1rem 1.1rem;align-items:center}
.stl-sx>span{font-size:.9rem;color:var(--muted,#667085);font-variant-numeric:tabular-nums}
.stl-sx>span b{color:var(--dark,#101828);font-weight:800}
.stl-sx>.is-neg b{color:var(--danger,#DC2626)}
.stl-sx>.is-pos b{color:#067647}
.stl-more{display:none}
.stl-r[open]>.stl-more{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;padding:.1rem .7rem .5rem}
/* raw materials (purchasing-workspace.js, surface stock): the same row, inside the existing <details data-pw-group>; the old grid is switched off here */
.stl-on .pw-material-list,.stl-on .pw-results{display:block}
.stl-on .pw-material.stl-r{border:0;border-top:1px solid #F2F4F7;border-radius:0;background:#fff;overflow:visible}
.stl-on .stl-gb>.pw-material.stl-r:first-child{border-top:0}
.stl-on .pw-material.stl-r[open]{border-color:#F2F4F7;background:#fff}
.stl-on .pw-material.stl-r>summary{display:grid;grid-template-columns:minmax(0,1fr) auto 24px;grid-template-areas:"id qs chev";align-items:center;gap:.1rem .5rem;min-height:46px;padding:.15rem .6rem}
.stl-on .pw-material.stl-r>summary::after{grid-area:chev;justify-self:end;align-self:center;font-size:1rem}
.stl-on .pw-material.stl-r>summary>.stl-id{grid-area:id;min-width:0}
.stl-on .pw-material.stl-r>summary>.stl-qs{grid-area:qs;display:flex;flex-direction:column;align-items:flex-end;gap:.05rem;padding:0;border:0}
.stl-on .pw-material.stl-r>summary>.stl-ord{grid-column:1/-1;grid-row:auto;display:block}
.stl-on .pw-material.stl-r>summary>.pw-mute{grid-column:1/-1;grid-row:auto;justify-self:start;margin:.1rem 0 .2rem}
.stl-on .pw-material.stl-r>summary>.pw-item-price{grid-column:1/-1;grid-row:auto;padding:.1rem 0;border:0}
.stl-on .stl-ord .pw-ordered{display:inline-block;margin:.1rem .3rem .2rem 0;padding:.1rem .5rem;border-radius:8px;background:#eef2ff;color:#3730a3;font-size:.8rem;font-weight:800;line-height:1.4}
.stl-on .stl-ord .pw-late{color:#B42318}
.stl-on .stl-id .pw-name{display:inline;font-size:1.15rem;font-weight:800;color:var(--dark,#101828);line-height:1.25;overflow-wrap:normal}
.stl-on .stl-id .pw-spec{display:inline;margin:0;font-size:.85rem;font-weight:400;color:var(--muted,#667085)}
.stl-on .stl-id .pw-row-state{flex:none;display:inline-flex;align-items:center;gap:.3rem;padding:0}
.stl-on .stl-id .pw-row-state:empty{display:none}
.stl-on .stl-id .pw-muted-flag{margin:0}
.stl-on .stl-id .stl-nm{flex:0 1 auto}
.stl-v{display:flex;align-items:baseline;justify-content:flex-end;gap:.35rem;min-width:0}
.stl-wh{font-style:normal;font-size:.8rem;font-weight:800;color:var(--ink2,#475467)}
.stl-lc{display:none;min-width:0;font-size:.85rem;color:var(--muted,#667085);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stl-on .pw-material.stl-r>.pw-material-detail{border-top:1px solid #E4E7EC}

/* the list is wide enough for aligned columns (list width, not window width) */
@container stl (min-width:760px){
  .stl-gh{padding:.3rem .9rem}
  .stl-rs,.stl-sja>.stl-rs{grid-template-columns:minmax(15rem,1fr) 14rem 24px;gap:.3rem 1.5rem;padding:.2rem .9rem}
  .stl-c{display:inline;margin-left:.5rem}
  .stl-r[open]>.stl-more{padding-left:.9rem}
  .stl-n{font-size:1.3rem}
  .stl-nm{font-size:1.2rem}
  .stl-on .pw-material.stl-r>summary{grid-template-columns:minmax(16rem,1.6fr) minmax(14rem,1fr) 28px;grid-template-areas:"id qs chev";gap:.3rem 1rem;padding:.25rem .9rem}
  .stl-on .pw-material-price.stl-r>summary{grid-template-columns:minmax(16rem,1.6fr) 11rem minmax(14rem,1fr) 28px;grid-template-areas:"id pr qs chev"}
  .stl-on .pw-material.stl-r>summary>.pw-item-price{grid-area:pr;grid-column:auto}
  .stl-on .pw-material.stl-r>summary>.stl-qs{align-items:stretch}
  .stl-v{justify-content:flex-end}
  .stl-lc{display:block;flex:1 1 auto;text-align:left}
  .stl-on .stl-id .pw-name{font-size:1.2rem}
}

/* a phone: the raw-material page head shrinks to search, factory, chips, category and place (labels stay for screen readers) */
@container stl (max-width:759px){
  .stl-on .pw-top{grid-template-columns:minmax(0,1fr) minmax(6.5rem,9rem);gap:6px;margin-bottom:6px;align-items:center}
  .stl-on .pw-top h1{grid-column:1;grid-row:1;padding:0;font-size:1.1rem}
  .stl-on .pw-top .pw-warehouse{grid-column:2;grid-row:1}
  .stl-on .pw-top .pw-search{grid-column:1/-1;grid-row:2}
  .stl-on .pw-top .pw-pending{grid-column:1/-1;grid-row:3}
  .stl-on .pw-top label>span,.stl-on .pw-controls label>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .stl-on .pw-top select,.stl-on .pw-top input{height:44px}
  .stl-on .pw-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 0 6px;margin-bottom:6px;border-block:0}
  .stl-on .pw-controls .stl-bar{grid-column:1/-1;margin:0}
  .stl-on .pw-controls .pw-scope{grid-column:1/-1;justify-self:start;margin:0;padding:0}
}