/* sja-produce-board.css — "Perlu diproduksi" (SJA Produksi tab + Beranda of the SJA factory login). Screen logic: sja-produce-board.js. Every class starts with sjapb-.
 * Colours: red only for a real shortage (Kurang, perlu), green for cukup, the warning amber only for Terlambat (lesson warning-colors-only-for-warnings).
 * Phone first (stacked PO rows, nothing wider than the screen); the table-like rows switch on the width of the board itself, not of the window. */
.sjapb{container:sjapb/inline-size;max-width:1100px;margin:0 auto;padding:.7rem .7rem 1.4rem;color:var(--dark,#101828);font-size:1rem}
.sjapb *,.sjapb *::before,.sjapb *::after{box-sizing:border-box}
.sjapb [hidden],.sjapb-home [hidden]{display:none!important}
.sjapb-compact{max-width:none;padding:0}
.sjapb-state{text-align:center;padding:1.4rem 1rem;color:var(--muted,#667085);background:var(--light,#F8FAFC);border:1px solid var(--border,#E4E7EC);border-radius:12px}
.sjapb-state p{margin-top:.6rem;font-size:1rem}
.sjapb-state b{color:var(--dark,#101828)}
.sjapb-spin{width:34px;height:34px;margin:0 auto;border:3px solid var(--border,#E4E7EC);border-top-color:var(--p,#4F46E5);border-radius:50%;animation:sjapbspin .8s linear infinite}
@keyframes sjapbspin{to{transform:rotate(360deg)}}
.sjapb-head{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .8rem}
.sjapb .sjapb-h{order:1;margin:0;flex:1 1 auto;font-size:1.12rem;font-weight:800;line-height:1.25}
.sjapb-rl{order:2}
.sjapb-upd{order:3;flex:1 0 100%;font-size:.85rem;color:var(--muted,#667085)}
.sjapb-btn{min-height:44px;min-width:44px;padding:.4rem .9rem;border:1.5px solid var(--border-input,#D0D5DD);border-radius:11px;background:#fff;color:var(--dark,#101828);font:inherit;font-size:.95rem;font-weight:700;cursor:pointer}
.sjapb-btn:disabled{opacity:.55;cursor:default}
.sjapb-sum{margin:.45rem 0 .6rem;font-size:1.02rem;font-weight:600;line-height:1.4}
.sjapb-sum b{font-weight:900}
.sjapb-note{margin:0 0 .6rem;padding:.6rem .8rem;border-radius:10px;background:#FEF2F2;border-left:4px solid var(--danger,#DC2626);color:#991B1B}
.sjapb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin-bottom:.6rem}
.sjapb-q{flex:1 1 14rem;min-height:48px;padding:.4rem .75rem;border:1.5px solid var(--border-input,#D0D5DD);border-radius:10px;background:#fff;font:inherit;font-size:1rem}
.sjapb-tg{display:flex;align-items:center;gap:.5rem;min-height:44px;font-weight:700;cursor:pointer}
.sjapb-tg input{width:24px;height:24px;margin:0;flex:none}
.sjapb-empty{padding:1.2rem .5rem;text-align:center;color:var(--muted,#667085)}

/* product card: a to-do item. The CODE leads (they produce by code), then name + unit; the PO / customer rows are always open. Big type: the worker reads what to make at a glance. */
.sjapb-card{margin:0 0 .6rem;border:1px solid var(--border,#E4E7EC);border-radius:12px;background:#fff;overflow:hidden}
.sjapb-card.is-short{border-left:6px solid var(--danger,#DC2626)}
.sjapb-card.is-ok{border-left:4px solid #D0D5DD}
.sjapb-ph{margin:0;font-size:1rem}
.sjapb-hd{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pn chip" "nums nums";align-items:start;gap:.4rem .6rem;padding:.7rem .75rem .5rem}
.sjapb-pn{grid-area:pn;display:flex;flex-wrap:wrap;align-items:baseline;gap:.05rem .6rem;min-width:0}
.sjapb-name{font-size:1.3rem;font-weight:800;line-height:1.25;color:var(--dark,#101828);overflow-wrap:anywhere}
.sjapb-code{font-size:.85rem;font-weight:700;color:var(--muted,#667085);overflow-wrap:anywhere}
.sjapb-pu{font-size:.95rem;font-weight:700;color:var(--ink2,#475467)}
.sjapb-chip{grid-area:chip;display:inline-block;padding:.1rem .55rem;border-radius:8px;font-size:.8rem;font-weight:700;white-space:nowrap}
.sjapb-chip.is-ok{background:#ECFDF3;color:#067647}
.sjapb-chip.is-todo{background:#FEF3F2;color:#B42318}
.sjapb-nums{grid-area:nums;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}
.sjapb-n{display:flex;flex-direction:column;min-width:0}
.sjapb-n small{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,#667085)}
.sjapb-n>b,.sjapb-nq>b{font-size:1.3rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.sjapb-nq{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.35rem;min-width:0}
.sjapb-nq>b{min-width:0;overflow-wrap:anywhere}
.sjapb-nq .sjapb-u{font-size:.9rem;font-weight:700}
.sjapb-nq .sjapb-c{flex-basis:100%}
/* cartons: a muted second figure (beside the quantity when there is room, under it when not) */
.sjapb-c{font-size:.9rem;font-weight:600;color:var(--muted,#667085);font-variant-numeric:tabular-nums;white-space:nowrap}
.sjapb-nw{white-space:nowrap}
.sjapb-cc{display:block;font-weight:600}
.sjapb-pn .sjapb-noctn{flex-basis:100%;margin-top:.1rem;font-size:.85rem;font-weight:600;color:var(--muted,#667085)}
.sjapb-n.is-k small,.sjapb-n.is-k .sjapb-nq>b,.sjapb-n.is-k .sjapb-u{color:var(--danger,#DC2626)}
.sjapb-n.is-k .sjapb-nq>b{font-weight:900}
.sjapb-body{padding:0 .75rem .8rem;border-top:1px solid #F2F4F7}
.sjapb-poh{display:none}

/* one PO behind a product, who first (phone: three lines) */
.sjapb-po{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cust qty" "pono date" "trip cv";gap:.2rem .6rem;align-items:start;padding:.6rem 0;border-top:1px solid #F2F4F7}
.sjapb-po:first-child{border-top:0}
.sjapb-pono{grid-area:pono;font-size:.9rem;font-weight:700;color:var(--ink2,#475467);font-variant-numeric:tabular-nums}
.sjapb-cust{grid-area:cust;min-width:0;overflow-wrap:anywhere}
.sjapb-cust b{font-size:1.1rem;font-weight:800}
.sjapb-qty{grid-area:qty;font-size:1.1rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sjapb-qty .sjapb-c{display:block}
.sjapb-date{grid-area:date;text-align:right;font-size:.9rem}
.sjapb-trip{grid-area:trip;font-size:.9rem}
.sjapb-cv{grid-area:cv;text-align:right;font-size:.8rem}
.sjapb-cust small,.sjapb-qty small,.sjapb-date small,.sjapb-trip small{display:block;font-size:.85rem;font-weight:400;color:var(--muted,#667085)}
.sjapb-u{font-weight:600;color:var(--ink2,#475467)}
.sjapb-d{font-variant-numeric:tabular-nums}
.sjapb-none{color:var(--muted,#667085)}
.sjapb-late{display:inline-block;margin-left:.45rem;padding:.05rem .5rem;border-radius:999px;background:#FFFAEB;border:1px solid #FEDF89;color:#B54708;font-size:.85rem;font-weight:800;white-space:nowrap}
/* coverage: a small muted chip, never the thing the eye lands on */
.sjapb-cov{display:inline-block;padding:.08rem .5rem;border-radius:8px;font-size:.8rem;font-weight:600}
.sjapb-cov.is-ok{background:#ECFDF3;color:#067647}
.sjapb-cov.is-part{background:#F2F4F7;border:1px solid #D0D5DD;color:#344054}
.sjapb-cov.is-need{background:#FEF3F2;color:#B42318}
.sjapb-cov .sjapb-cc{font-size:.8rem}
/* the tick: done making it -> opens the production form with the shortfall filled in (nothing is written from here) */
.sjapb-prod{display:block;width:100%;min-height:56px;margin-top:.55rem;padding:.5rem 1rem;border:0;border-radius:12px;background:var(--p,#4F46E5);color:#fff;font:inherit;font-size:1.1rem;font-weight:800;cursor:pointer}
.sjapb-more{display:block;width:100%;min-height:48px;margin:.2rem 0 .5rem;border:1.5px solid var(--border-input,#D0D5DD);border-radius:12px;background:#fff;color:var(--p,#4F46E5);font:inherit;font-weight:800;cursor:pointer}

/* products without an open PO (collapsed) */
.sjapb-idle{margin-top:.8rem;border:1px solid var(--border,#E4E7EC);border-radius:12px;background:#fff;overflow:hidden}
.sjapb-tog{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.35rem .5rem;width:100%;min-height:56px;padding:.6rem .75rem;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sjapb-tog .sjapb-pn{display:block;grid-area:auto}
.sjapb-tog .sjapb-pn b{font-size:1.05rem}
.sjapb-chev{font-size:1.1rem;color:var(--muted,#667085);transition:transform .15s}
.sjapb-tog[aria-expanded="true"] .sjapb-chev{transform:rotate(180deg)}
.sjapb-ir{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .75rem;border-top:1px solid #F2F4F7}
.sjapb-in{min-width:0;overflow-wrap:anywhere}
.sjapb-in small{display:block;font-size:.85rem;color:var(--muted,#667085)}
.sjapb-is{flex:none;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.sjapb-is .sjapb-c{margin-left:.45rem}

/* Beranda: three big buttons above the board */
.sjapb-home{margin:0 0 24px}
.sjapb-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.sjapb-big{min-height:64px;padding:.5rem .4rem;border:1.5px solid var(--border-input,#D0D5DD);border-radius:12px;background:#fff;color:var(--dark,#101828);font:inherit;font-size:1rem;font-weight:800;line-height:1.2;cursor:pointer}
.sjapb-big:first-child{background:var(--p,#4F46E5);border-color:var(--p,#4F46E5);color:#fff}
@media(max-width:599px){.sjapb-home{margin-bottom:10px}.sjapb-acts{gap:5px;margin-bottom:8px}.sjapb-big{font-size:.92rem}}

/* a middle width (the Beranda column on a tablet): customer | qty | date | coverage on one line, PO and truck under */
@container sjapb (min-width:520px){
  .sjapb-upd{order:2;flex:none}
  .sjapb-rl{order:3}
  .sjapb-hd{grid-template-columns:minmax(0,1fr) 18rem auto;grid-template-areas:"pn nums chip"}
  .sjapb-po{grid-template-columns:minmax(0,1.1fr) fit-content(11rem) minmax(0,1fr) fit-content(13rem);grid-template-areas:"cust qty date cv" "pono . trip .";gap:.2rem .9rem}
  .sjapb-date,.sjapb-cv,.sjapb-qty{text-align:left}
  .sjapb-qty{text-align:right}
}
/* the board is wide enough for table-like rows (container width, not the window: the desktop sidebar takes ~180px) */
@container sjapb (min-width:760px){
  .sjapb-name{font-size:1.45rem}
  .sjapb-hd{grid-template-columns:minmax(0,1fr) 26rem auto;padding-top:.8rem}
  .sjapb-qty .sjapb-c{display:inline;margin-left:.4rem}
  .sjapb-poh,.sjapb-po{display:grid;grid-template-columns:minmax(8rem,1.2fr) 11.5rem minmax(8.5rem,.9fr) minmax(9rem,1fr) 5.5rem minmax(9rem,.9fr);grid-template-areas:none;gap:.2rem .9rem;align-items:start}
  .sjapb-poh{padding:.55rem 0 .25rem;font-size:.85rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#667085)}
  .sjapb-po .sjapb-pono,.sjapb-po .sjapb-cust,.sjapb-po .sjapb-qty,.sjapb-po .sjapb-date,.sjapb-po .sjapb-trip,.sjapb-po .sjapb-cv{grid-area:auto;text-align:left}
  .sjapb-po .sjapb-qty{text-align:left}
  .sjapb-po .sjapb-cust{grid-column:1}.sjapb-po .sjapb-qty{grid-column:2}.sjapb-po .sjapb-date{grid-column:3}.sjapb-po .sjapb-trip{grid-column:4}.sjapb-po .sjapb-pono{grid-column:5}.sjapb-po .sjapb-cv{grid-column:6}
  .sjapb-po .sjapb-pono,.sjapb-po .sjapb-cust,.sjapb-po .sjapb-qty,.sjapb-po .sjapb-date,.sjapb-po .sjapb-trip,.sjapb-po .sjapb-cv{grid-row:1}
  .sjapb-prod{width:auto;min-width:22rem;margin-left:auto}
}
/* a wide board: the cartons sit beside the quantity in the product header too */
@container sjapb (min-width:1000px){
  .sjapb-hd{grid-template-columns:minmax(0,1fr) 40rem auto}
  .sjapb-nq .sjapb-c{flex-basis:auto}
}