/* SM Produksi (Sophie Martin Production Tracker), "atelier ledger" theme. DESIGN.md is the brief.

   Palette (light first; dark keeps the same roles via light-dark()). Contrast measured (WCAG 2.x):
     canvas  #F6F3EE  warm bone page          paper   #FFFDFA  cards, tables, inputs
     paper-2 #EFEBE4  table heads, wells      line    #E2DCD2  hairlines      line-2 #C9C1B4 control borders
     ink     #1D1A17  text + the go button    17.1:1 on paper
     ink-2   #5E584F  secondary text           6.9:1 on paper, 6.4:1 on canvas
     rose    #B30F72  brand signature, sampled from the logo gem #CB007B (hue 324) and deepened
                      (HSL L .40 -> .38, S 1.0 -> .85): 6.4:1 on paper, 5.9:1 on canvas, 5.5:1 on blush
     blush   #F8E7F0  rose tint for bands / selected rows
     ok      #2E6B45 on #E6F0E8 (5.4:1)  wait #8A5A12 on #F8EBD2 (5.0:1)  late #A8302A on #F8E3E0 (5.5:1)
     prod    #2C5A84 on #E3EBF3 (6.0:1)  ship #5B4A88 on #ECE8F4 (6.3:1)   (order-flow chip families)
   Dark: canvas #161412, paper #1E1B18, ink #EEE9E2 (14.2:1), ink-2 #ABA397 (6.9:1), rose #F08BC4 (7.5:1).

   Rules: primary action = ink. Rose only as signature (logo, rule under titles, active nav, selected rows,
   focus rings, the factory "Hari ini" band). Crimson only for late / error / discrepancy, never a button fill.
   Type: Fraunces (display serif, optical sizing) + Figtree (UI). Every number tabular.
   Factory scale: [data-scale="factory"] (set on the shell for the factory role and on factory flows). */

:root{
  color-scheme:light dark;
  --canvas:light-dark(#F6F3EE,#161412);
  --paper:light-dark(#FFFDFA,#1E1B18);
  --paper-2:light-dark(#EFEBE4,#27231F);
  --line:light-dark(#E2DCD2,#332E29);
  --line-2:light-dark(#C9C1B4,#4A443C);
  --line-3:light-dark(#A39A8C,#6A6257);          /* stronger control border (factory inputs, steppers) */
  --ink:light-dark(#1D1A17,#EEE9E2);
  --ink-2:light-dark(#5E584F,#ABA397);
  --on-ink:light-dark(#FFFDFA,#161412);
  --rose:light-dark(#B30F72,#F08BC4);
  --blush:light-dark(#F8E7F0,#3A2030);
  --ok:light-dark(#2E6B45,#86C79C);       --ok-bg:light-dark(#E6F0E8,#1D2D22);
  --wait:light-dark(#8A5A12,#E3B467);     --wait-bg:light-dark(#F8EBD2,#33280F);
  --late:light-dark(#A8302A,#F2958B);     --late-bg:light-dark(#F8E3E0,#3B1F1C);
  --prod:light-dark(#2C5A84,#93B8E0);     --prod-bg:light-dark(#E3EBF3,#1C2633);
  --ship:light-dark(#5B4A88,#B9A9EA);     --ship-bg:light-dark(#ECE8F4,#26213A);
  --hover:light-dark(rgb(29 26 23 / .04),rgb(238 233 226 / .05));
  --scrim:rgb(22 20 18 / .38);
  --shadow:0 1px 2px rgb(29 26 23 / .04),0 8px 24px rgb(29 26 23 / .06);
  --shadow-float:0 1px 2px rgb(29 26 23 / .05),0 18px 48px rgb(29 26 23 / .10);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Figtree","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --dur:200ms;
  --r-card:10px; --r-ctl:8px; --r-pill:999px;
  --sb-w:252px; --tb-h:60px;
  --ctl-h:36px;
  --fs-body:14px;
}
@media (prefers-color-scheme:dark){
  :root{--shadow:0 1px 2px rgb(0 0 0 / .3),0 10px 28px rgb(0 0 0 / .35);--shadow-float:0 1px 2px rgb(0 0 0 / .35),0 22px 56px rgb(0 0 0 / .5);--scrim:rgb(0 0 0 / .55)}
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--canvas);scrollbar-color:var(--line-2) transparent;scrollbar-width:thin;-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);font:400 var(--fs-body)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;
  font-variant-numeric:tabular-nums lining-nums;text-rendering:optimizeLegibility}
/* paper grain: a fixed 3 % noise layer on the canvas only (cards are opaque paper and cover it) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::before{opacity:.06;filter:invert(1)}}
#root{position:relative;z-index:1}
::selection{background:color-mix(in srgb,var(--rose) 22%,transparent)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px;border-radius:var(--r-ctl)}
svg{flex:none;display:block}
h1,h2,h3{font-weight:600;text-wrap:balance}
h1{font:500 1.75rem/1.15 var(--serif);letter-spacing:-.02em;font-optical-sizing:auto}
h2{font-size:1rem;line-height:1.3;letter-spacing:-.005em}
h3{font-size:.875rem}
.serif{font-family:var(--serif);font-optical-sizing:auto;letter-spacing:-.02em}
.num,.n{font-variant-numeric:tabular-nums lining-nums}
.muted{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.code{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.strong{font-weight:600}
.small{font-size:.8125rem}
.eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.spacer{flex:1}
.hstack{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:16px}
.linkish{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:text-decoration-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.linkish:hover{text-decoration-color:var(--rose)}
.textlink{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;
  text-decoration-thickness:1px;padding:4px 0;transition:text-decoration-color var(--dur) var(--ease)}
.textlink:hover{text-decoration-color:var(--rose)}
.textlink.danger{color:var(--late)}
.neg{color:var(--late)}
.warn-text{color:var(--wait)}
.ok-text{color:var(--ok)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- boot / fatal ---------- */
.boot{min-height:100vh;display:grid;place-items:center;color:var(--ink-2);gap:12px;align-content:center}
.fatal{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.fatal-card{width:min(440px,100%);text-align:center;display:grid;justify-items:center;gap:14px}
.fatal-card h1{font-size:1.625rem}
.fatal-card p{color:var(--ink-2);max-width:36ch}

/* ---------- shell (ops / finance / admin) ---------- */
.shell{display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--paper);
  border-right:1px solid var(--line);display:flex;flex-direction:column;scrollbar-width:thin}
.sb-logo{display:flex;flex-direction:column;gap:8px;padding:24px 24px 20px}
.sb-logo img{width:152px;height:auto;display:block}
.sb-logo span{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.logo-img{filter:none}
@media (prefers-color-scheme:dark){.logo-img{filter:invert(1) hue-rotate(180deg) brightness(1.08)}}
.sb-nav{padding:4px 12px 20px;flex:1}
.sb-group{margin-top:18px}
.sb-group:first-child{margin-top:6px}
.sb-group-title{font-size:.6875rem;font-weight:600;letter-spacing:.12em;color:var(--ink-2);padding:0 12px 6px;text-transform:uppercase}
.sb-item{display:flex;align-items:center;gap:11px;min-height:36px;padding:0 12px;border-radius:var(--r-ctl);
  color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);position:relative;font-weight:500}
.sb-item svg{opacity:.85}
.sb-item:hover{background:var(--hover);color:var(--ink)}
.sb-item.active{background:var(--canvas);color:var(--ink);font-weight:600}
.sb-item.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:2px;border-radius:0 2px 2px 0;background:var(--rose)}
.sb-item.active svg{color:var(--rose);opacity:1}
.sb-item .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-badge{min-width:22px;height:20px;padding:0 7px;border-radius:var(--r-pill);font-size:.6875rem;font-weight:600;
  display:inline-grid;place-items:center;background:var(--paper-2);color:var(--ink-2)}
.sb-badge.alert{background:var(--late-bg);color:var(--late)}
.sb-foot{padding:16px 24px 20px;border-top:1px solid var(--line);font-size:.75rem;color:var(--ink-2);line-height:1.4}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;height:var(--tb-h);display:flex;align-items:center;gap:14px;
  padding:0 40px;background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.tb-crumb{display:flex;align-items:center;gap:8px;min-width:0;font-size:.8125rem;color:var(--ink-2)}
.tb-crumb b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-crumb .sep{color:var(--line-2)}
.tb-user{display:flex;align-items:center;gap:12px;margin-left:auto;white-space:nowrap}
.tb-name{font-weight:600}
.role-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:600;background:var(--paper-2);color:var(--ink-2);white-space:nowrap}   /* F3i: never "Financ e" in a squeezed table cell */
.topbar .menu-btn{display:none}
.content{padding:32px 40px 72px;min-width:0;width:100%;max-width:1520px}
.scrim{display:none}
@media (max-width:1100px){
  .topbar{padding:0 24px}
  .content{padding:24px 24px 64px}
}
/* F3i (R7 #3): 1024 is a supported width for every role. Below 1280 the sidebar folds into the menu button (an
   off-canvas panel) so the content keeps the room it has at 1280 (1024 − 48 px gutters ≈ 1280 − 248 sidebar − 80) */
@media (max-width:1279px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;z-index:70;width:min(288px,86vw);transform:translateX(-100%);
    transition:transform var(--dur) var(--ease);box-shadow:var(--shadow-float)}
  .shell.nav-open .sidebar{transform:none}
  .shell.nav-open .scrim{display:block;position:fixed;inset:0;z-index:65;background:var(--scrim)}
  .topbar .menu-btn{display:inline-flex}
}
@media (max-width:900px){
  .topbar{padding:0 12px 0 8px}
  .tb-name{display:none}
  .content{padding:20px 16px 56px}
}
@media (max-width:520px){.tb-crumb .grp,.tb-crumb .sep{display:none}.role-chip{display:none}}

/* ---------- page head ---------- */
.page-head{display:flex;align-items:flex-end;gap:14px 20px;flex-wrap:wrap;margin-bottom:24px}
.ph-main{min-width:0;flex:1 1 360px}
.ph-eyebrow{margin-bottom:8px}
.ph-back{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500;color:var(--ink-2);margin-bottom:10px;
  transition:color var(--dur) var(--ease)}
.ph-back:hover{color:var(--ink)}
.ph-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ph-title h1 .code{font-family:var(--serif);letter-spacing:-.01em}
.ph-rule{display:block;width:28px;height:2px;background:var(--rose);border-radius:2px;margin-top:12px}
.ph-sub{color:var(--ink-2);margin-top:10px;max-width:72ch}
.ph-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.section{margin-top:36px}
.section:first-child{margin-top:0}
.section-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.section-head h2{font:500 1.1875rem/1.25 var(--serif);letter-spacing:-.01em}
.section-head .muted{font-weight:400;font-size:.8125rem}
.section-head .ph-actions{margin-left:auto}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.grid-2>.section,.grid-3>.section{margin-top:0}
@media (min-width:1101px){.grid-2.grid-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.grid-2.grid-split{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}}
.section+.grid-2,.section+.grid-3,.kpis+.grid-2,.kpis+.section,.pipeline+.grid-2{margin-top:36px}
@media (max-width:1100px){.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctl-h);padding:0 14px;
  border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--paper);color:var(--ink);
  font-weight:600;font-size:.875rem;white-space:nowrap;line-height:1;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease),transform 120ms var(--ease)}
.btn:hover{border-color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.btn-primary:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 86%,var(--rose))}
.btn-danger{color:var(--late);border-color:var(--line-2)}
.btn-danger:hover{border-color:var(--late)}
.btn-danger.solid{background:var(--paper);color:var(--late);border-color:var(--late)}
.btn-quiet{border-color:transparent;background:none;color:var(--ink-2)}
.btn-quiet:hover{border-color:transparent;background:var(--hover);color:var(--ink)}
.btn-sm{min-height:28px;padding:0 10px;font-size:.8125rem;gap:6px}
.btn-icon{padding:0;width:var(--ctl-h)}
.btn-icon.btn-sm{width:28px}
.btn-lg{min-height:44px;padding:0 20px;font-size:.9375rem}
.btn-lg svg{width:18px;height:18px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.btn .spin{width:14px;height:14px}
.btn-primary .spin{border-color:color-mix(in srgb,var(--on-ink) 35%,transparent);border-top-color:var(--on-ink)}
.row-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}

/* ---------- inputs ---------- */
input[type=text],input[type=password],input[type=search],input[type=date],input[type=number],
input:not([type]),select,textarea,.input{
  width:100%;min-height:var(--ctl-h);padding:6px 11px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-ctl);font:inherit;font-variant-numeric:tabular-nums;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
textarea{min-height:72px;resize:vertical;line-height:1.45}
select{padding-right:30px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%235E584F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
input::placeholder,textarea::placeholder{color:var(--ink-2);opacity:.85}
input:hover:not([disabled]):not([readonly]),select:hover:not([disabled]),textarea:hover:not([disabled]){border-color:var(--line-3)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rose) 18%,transparent)}
input[disabled],select[disabled],textarea[disabled]{background:var(--paper-2);color:var(--ink-2);cursor:not-allowed}
input[readonly]{background:var(--paper-2)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink);width:17px;height:17px;flex:none;cursor:pointer;min-height:0}
input.n,.input.n{text-align:right}
.is-invalid,input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:var(--late)!important}
input.is-invalid:focus-visible,select.is-invalid:focus-visible,textarea.is-invalid:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--late) 16%,transparent)}
.form-grid{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:16px 20px}
.form-grid .span-2{grid-column:span 2}
.form-grid .span-all{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .span-2{grid-column:auto}}
.field{min-width:0}
.field>label,.field>.label{display:block;margin-bottom:6px;font-size:.8125rem;font-weight:600}
.field .hint{color:var(--ink-2);font-weight:400}
.field-help{font-size:.75rem;color:var(--ink-2);margin-top:5px}
.field-err{font-size:.8125rem;color:var(--late);margin-top:5px;font-weight:500}
.field-errs{display:grid;gap:4px;padding:10px 14px;border-radius:var(--r-ctl);background:var(--late-bg);color:var(--late);font-size:.8125rem}
.affix{display:flex;align-items:stretch;min-width:0}
.affix>input{flex:1;min-width:0}
.affix .pre,.affix .suf{display:inline-flex;align-items:center;padding:0 10px;font-size:.8125rem;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--line-2);white-space:nowrap}
.affix .pre{border-right:none;border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.affix .suf{border-left:none;border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.affix .pre+input{border-top-left-radius:0;border-bottom-left-radius:0}
.affix input:has(+.suf){border-top-right-radius:0;border-bottom-right-radius:0}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;font-size:.8125rem;min-height:var(--ctl-h);font-weight:500}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-ctl);overflow:hidden;background:var(--paper)}
.seg button{min-height:calc(var(--ctl-h) - 2px);padding:0 14px;font-weight:600;font-size:.8125rem;color:var(--ink-2);border-right:1px solid var(--line-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.seg button:not([aria-pressed="true"]):hover{background:var(--hover);color:var(--ink)}
.radio-cards{display:grid;gap:10px}
.radio-card{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-card);cursor:pointer;background:var(--paper);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.radio-card.on{border-color:var(--rose);background:var(--blush)}
.radio-card input{margin-top:2px}
.radio-card .rc-sub{font-size:.8125rem;color:var(--ink-2)}

/* ---------- combobox (search-select) ---------- */
.combo{position:relative;min-width:0}
.combo-box{position:relative}
.combo-input{display:flex;align-items:center;gap:6px;width:100%}
.combo-input input{flex:1}
.combo-clear{position:absolute;right:5px;top:50%;translate:0 -50%;width:26px;height:26px;display:grid;place-items:center;
  border-radius:6px;color:var(--ink-2)}
.combo-clear:hover{background:var(--hover);color:var(--ink)}
.combo.has-value input{padding-right:32px}
.combo-list{position:fixed;z-index:400;max-height:320px;overflow-y:auto;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:6px}
.combo-opt{display:block;width:100%;padding:8px 10px;border-radius:6px;cursor:pointer}
.combo-opt.active{background:var(--blush)}
.combo-opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.combo-opt .lbl{display:block;overflow-wrap:anywhere;font-weight:500}
.combo-opt .sub{display:block;font-size:.75rem;color:var(--ink-2);overflow-wrap:anywhere}
/* F3g (R5 #3): the whole chosen label under a control too narrow for it (two SKUs of one family differ at the end) */
.combo-picked{margin-top:4px;font-size:.75rem;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.combo-empty{padding:10px;color:var(--ink-2);font-size:.8125rem}

/* ---------- toolbar ---------- */
.toolbar{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap;margin-bottom:14px}
.toolbar select,.toolbar input[type=date]{width:auto;min-width:0}
.toolbar .filter{max-width:230px}
.toolbar .date-range{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--ink-2);flex-wrap:wrap}
.search{position:relative;flex:0 1 320px;min-width:180px}
.search svg{position:absolute;left:11px;top:50%;translate:0 -50%;color:var(--ink-2);pointer-events:none}
.search input{padding-left:34px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border-radius:var(--r-pill);
  background:var(--blush);color:var(--ink);font-size:.8125rem;font-weight:600}
.filter-chip button{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--ink-2)}
.filter-chip button:hover{background:color-mix(in srgb,var(--rose) 14%,transparent);color:var(--ink)}
@media (max-width:640px){.search{flex-basis:100%}.toolbar .filter{max-width:none;flex:1 1 200px}}  /* F3g: a phone filter is wide enough for its longest choice ("Semua jenis dokumen") */

/* ---------- tables ---------- */
.tbl-block{min-width:0}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);position:relative;scrollbar-width:thin}
.tbl-wrap.fill{max-height:calc(100vh - var(--tbl-offset,270px));min-height:200px}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.84375rem}
.tbl th{position:sticky;top:0;z-index:2;background:var(--paper-2);text-align:left;font-weight:600;font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:10px 14px;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:bottom}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tfoot td{position:sticky;bottom:0;background:var(--paper-2);font-weight:600;border-top:1px solid var(--line-2);border-bottom:none}
.tbl th.n,.tbl td.n{text-align:right;white-space:nowrap}
.tbl td.c,.tbl th.c{text-align:center}
.tbl td.wrap{white-space:normal;min-width:180px;max-width:360px}
/* a bounded cell: long free text WRAPS inside its max-width; nothing in a table is ever cut off (F3f, R4) */
.tbl td.bound{max-width:260px;white-space:normal;overflow-wrap:anywhere}
.tbl td.nowrap{white-space:nowrap}
.tbl td.act{width:1%;white-space:nowrap;text-align:right}
.tbl td .unit{color:var(--ink-2)}
.tbl .null{color:var(--line-3)}
.tbl tbody tr{transition:background var(--dur) var(--ease)}
.tbl tbody tr.clickable{cursor:pointer}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl tbody tr.sel td{background:var(--blush)}
.tbl tbody tr.sel td:first-child{box-shadow:inset 2px 0 0 var(--rose)}
.tbl tbody tr.dim td{color:var(--ink-2)}
.tbl.loading tbody{opacity:.55;transition:opacity var(--dur) var(--ease)}
.tbl.compact td{padding:8px 12px}
.tbl.compact th{padding:8px 12px}
.tbl.edit td{padding:6px 8px;vertical-align:top}
.tbl.edit td.n,.tbl.edit td.ro{padding-top:14px}
.tbl.edit input,.tbl.edit select{min-height:34px}
.th-sort{display:inline-flex;align-items:center;gap:4px;color:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap}
.th-sort:hover{color:var(--ink)}
.th-sort .ind{font-size:.625rem;width:8px;color:var(--rose)}
.tbl-state{padding:36px 16px;text-align:center;color:var(--ink-2)}
.skel-row td{height:44px}
.skel-row td::before{content:"";display:block;height:9px;width:var(--w,60%);border-radius:5px;background:var(--paper-2)}
.pager{display:flex;align-items:center;gap:10px;justify-content:flex-end;padding:12px 2px 0;font-size:.8125rem;color:var(--ink-2)}
.pager .info{margin-right:auto}
.sub-line{display:block;font-size:.75rem;color:var(--ink-2);margin-top:2px;font-weight:400}

/* ---------- chips / badges (status families; no decorative dots) ---------- */
.chip{--tone:var(--ink-2);--tone-bg:var(--paper-2);display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);font-size:.75rem;font-weight:600;white-space:nowrap;color:var(--tone);background:var(--tone-bg);letter-spacing:.005em}
.chip.t-neutral{--tone:var(--ink-2);--tone-bg:var(--paper-2)}
.chip.t-wait{--tone:var(--wait);--tone-bg:var(--wait-bg)}
.chip.t-prod{--tone:var(--prod);--tone-bg:var(--prod-bg)}
.chip.t-ship{--tone:var(--ship);--tone-bg:var(--ship-bg)}
.chip.t-done{--tone:var(--ok);--tone-bg:var(--ok-bg)}
.chip.t-late{--tone:var(--late);--tone-bg:var(--late-bg)}
.chip.t-muted{--tone:var(--ink-2);--tone-bg:transparent;text-decoration:line-through;font-weight:500;box-shadow:inset 0 0 0 1px var(--line-2)}
.badge{--tone:var(--ink-2);display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-pill);
  font-size:.6875rem;font-weight:600;white-space:nowrap;color:var(--tone);vertical-align:1px;background:var(--paper-2);letter-spacing:.02em}
.badge.t-late{background:var(--late-bg);color:var(--late)}
.badge.t-wait{background:var(--wait-bg);color:var(--wait)}
.badge.t-prod{background:var(--prod-bg);color:var(--prod)}
.badge.t-ship{background:var(--ship-bg);color:var(--ship)}
.badge.t-done{background:var(--ok-bg);color:var(--ok)}
.badge.t-rose{background:var(--blush);color:var(--rose)}

/* ---------- KPI band (ops / finance) ---------- */
.kpis{display:grid;grid-template-columns:repeat(var(--kc,4),minmax(0,1fr));background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;margin-bottom:8px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:16px}.kpi-value{font-size:1.75rem}.kpi-value.money{font-size:1.25rem}}
.kpi{position:relative;display:block;padding:20px 22px 20px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:0 -1px -1px 0;transition:background var(--dur) var(--ease)}
a.kpi:hover{background:var(--hover)}
a.kpi:hover .kpi-go{opacity:1;transform:none}
.kpi-label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  line-height:1.35;min-height:2.7em;padding-right:22px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi-value{font:450 2.125rem/1.05 var(--serif);letter-spacing:-.025em;margin-top:12px;white-space:nowrap;font-optical-sizing:auto;
  font-variant-numeric:lining-nums tabular-nums}
.kpi-value.money{font-size:1.75rem}
.kpi-sub{font-size:.75rem;color:var(--ink-2);margin-top:8px;min-height:1.1em}
.kpi.zero .kpi-value{color:var(--ink-2)}
.kpi.alert .kpi-value{color:var(--late)}
.kpi.warn .kpi-value{color:var(--ink)}
.kpi.warn .kpi-label{color:var(--wait)}
.kpi-go{position:absolute;right:18px;top:18px;color:var(--rose);opacity:0;transform:translateX(-4px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.kpis.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.pipe-step{padding:16px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0;min-width:0;transition:background var(--dur) var(--ease)}
@media (max-width:700px){.pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pipe-step:hover{background:var(--hover)}
.pipe-step .pipe-n{font:450 1.625rem/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.pipe-step .pipe-l{font-size:.75rem;color:var(--ink-2);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe-step.zero .pipe-n{color:var(--line-3)}
.prog{display:flex;align-items:center;gap:10px;min-width:120px}
.prog-bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden;min-width:60px}
.prog-fill{height:100%;background:var(--ink);border-radius:var(--r-pill)}
.prog.done .prog-fill{background:var(--ok)}
.prog.late .prog-fill{background:var(--late)}
.prog-label{font-size:.75rem;color:var(--ink-2);min-width:38px;text-align:right}

/* ---------- facts / callouts / lists ---------- */
.facts{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:16px 24px}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact-k{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.fact-v{margin-top:4px;overflow-wrap:anywhere;font-weight:500}
.callout{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-card);
  background:var(--paper-2);font-size:.8125rem;line-height:1.5}
.callout svg{margin-top:1px}
.callout.warn{background:var(--wait-bg);color:var(--ink)}
.callout.warn>svg{color:var(--wait)}
.callout.err{background:var(--late-bg);color:var(--ink)}
.callout.err>svg{color:var(--late)}
.callout.ok{background:var(--ok-bg);color:var(--ink)}
.callout.ok>svg{color:var(--ok)}
.callout.info{background:var(--paper);border:1px solid var(--line)}
.callout .grow{flex:1;min-width:0}
.conv{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);background:var(--paper-2);font-size:.8125rem;font-weight:500}
.list{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.list-item{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1;min-width:0}
.list-item .title{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.list-item .meta{font-size:.75rem;color:var(--ink-2);margin-top:3px}
.timeline{list-style:none;border-left:1px solid var(--line-2);margin-left:6px;padding-left:18px}
.timeline li{position:relative;padding:0 0 14px}
.timeline li::before{content:"";position:absolute;left:-24.5px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-2)}
.timeline li:first-child::before{border-color:var(--rose);background:var(--rose)}
.timeline .when{font-size:.75rem;color:var(--ink-2)}
.empty{padding:36px 20px;text-align:center;color:var(--ink-2);display:grid;justify-items:center;gap:6px}
.empty .sketch{color:var(--line-3);margin-bottom:6px}
.empty-title{font:500 1.0625rem/1.3 var(--serif);color:var(--ink);letter-spacing:-.01em}
.empty-hint{font-size:.8125rem;max-width:52ch;margin:0 auto}
.empty .btn{margin-top:10px}
.error-box{padding:16px 18px;border-radius:var(--r-card);background:var(--late-bg)}
.error-box-title{font-weight:600;color:var(--late)}
.error-box-detail{font-size:.8125rem;margin:4px 0 10px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink);
  animation:spin .7s linear infinite;display:inline-block;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;color:var(--ink-2);font-weight:600;font-size:.875rem;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--rose)}
.tab-count{font-size:.6875rem;padding:0 7px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink-2);line-height:18px}

/* ---------- wizard steps ---------- */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;list-style:none}
.step{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:var(--r-pill);color:var(--ink-2);font-weight:600;font-size:.8125rem}
.step .no{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);font-size:.75rem}
.step.on{color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.step.on .no{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.step.ok .no{border-color:var(--ok);color:var(--ok)}

/* ---------- dialog / drawer ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:var(--scrim);display:flex;
  align-items:flex-start;justify-content:center;padding:8vh 16px 16px;overflow-y:auto}
.modal{width:min(540px,100%);background:var(--paper);color:var(--ink);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-float);display:flex;flex-direction:column;max-height:86vh}
.modal.lg{width:min(780px,100%)}
.modal.xl{width:min(1060px,100%)}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 16px 14px 24px}
.modal-title{font:500 1.25rem/1.25 var(--serif);letter-spacing:-.015em;flex:1}
.modal-body{padding:4px 24px 20px;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 24px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.modal-foot .left{margin-right:auto}
.drawer-backdrop{position:fixed;inset:0;z-index:90;background:var(--scrim)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(var(--dw,760px),100vw);background:var(--canvas);
  border-left:1px solid var(--line);box-shadow:var(--shadow-float);display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 18px 16px 28px;border-bottom:1px solid var(--line);background:var(--paper)}
.drawer-head .grow{flex:1;min-width:0}
.drawer-title{font:500 1.375rem/1.2 var(--serif);letter-spacing:-.02em}
.drawer-sub{font-size:.8125rem;color:var(--ink-2);margin-top:4px}
.drawer-body{padding:20px 28px 36px;overflow-y:auto;flex:1}
@media (prefers-reduced-motion:no-preference){
  .modal{animation:pop var(--dur) var(--ease)}
  .modal-backdrop,.drawer-backdrop{animation:fade var(--dur) var(--ease)}
  .drawer{animation:slide 240ms var(--ease)}
  @keyframes pop{from{opacity:0;transform:scale(.98)}}
  @keyframes fade{from{opacity:0}}
  @keyframes slide{from{transform:translateX(16px);opacity:0}}
}

/* ---------- toast ---------- */
.toast-host{position:fixed;right:24px;bottom:24px;z-index:500;display:flex;flex-direction:column;gap:10px;
  width:min(440px,calc(100vw - 32px))}
.toast{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-card);
  background:var(--ink);color:var(--on-ink);font-size:.8125rem;line-height:1.45;box-shadow:var(--shadow-float);font-weight:500}
.toast>svg{margin-top:1px;flex:none}
.toast.ok>svg{color:light-dark(#9ED8AF,#2E6B45)}
.toast.err{background:var(--late-bg);color:var(--late);box-shadow:var(--shadow-float),inset 0 0 0 1px color-mix(in srgb,var(--late) 30%,transparent)}
.toast .msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast .times{opacity:.7;font-weight:600;margin-left:4px}
.toast a{text-decoration:underline;font-weight:600;margin-left:6px}
.toast-x{opacity:.75;line-height:1;padding:2px;color:inherit}
.toast-x:hover{opacity:1}
@media (prefers-reduced-motion:no-preference){.toast{animation:rise var(--dur) var(--ease)}@keyframes rise{from{opacity:0;transform:translateY(6px)}}}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:40px 16px}
.login-card{width:min(420px,100%);display:flex;flex-direction:column}
.login-card .logo-img{width:212px;height:auto;margin-bottom:44px}
.login-title{font:450 3rem/1 var(--serif);letter-spacing:-.03em}
.login-rule{width:32px;height:2px;background:var(--rose);border-radius:2px;margin:18px 0 14px}
.login-sub{color:var(--ink-2);font-size:.9375rem;margin:0 0 32px}
.login-card .field{margin-bottom:18px}
.login-card .field>label{font-size:.875rem}
.login-card input{min-height:52px;font-size:1.0625rem;padding:10px 14px;border-radius:10px}
.login-card .btn{width:100%;margin-top:10px;min-height:54px;font-size:1rem;border-radius:10px}
.login-msg{font-size:.875rem;margin-top:16px;min-height:1.4em;font-weight:500}
.login-msg.err{color:var(--late)}
.login-foot{font-size:.75rem;color:var(--ink-2);margin-top:44px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- ops screens (wave 2 parts kept) ---------- */
.cta-bar{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;padding:16px 18px;margin-top:16px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper)}
.cta-bar .cta-text{flex:1 1 260px;min-width:0;font-size:.8125rem;color:var(--ink-2)}
.tbl td.var-cell{min-width:90px}
.tbl.edit td .field-err{white-space:normal}
.tbl.edit .affix{min-width:108px}   /* F3i: 120 → 108 so a BoM line keeps room for its picker (a whole code) at 1280 with Rp 10^14 costs */
.tbl.edit td>input[type=text]:not(.n),.tbl.edit td>select{min-width:130px}
.log-cell{display:flex;align-items:flex-start;gap:6px;flex-wrap:nowrap}
.log-cell input[type=date]{width:140px;min-height:32px;padding:3px 8px}
.log-cell .affix{width:96px}
.log-cell .affix input{min-height:32px}
.log-cell .btn{min-height:32px}
.stack-cell{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.stack-cell .lbl{font-size:.6875rem;color:var(--ink-2)}
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:16px}
.pack-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pack-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pack-head .grow{flex:1;min-width:0}
.pack-head .title{font-weight:600}
.pack-prog{width:190px}
@media (max-width:520px){.pack-prog{width:100%}}
@media (max-width:640px){.section-head{flex-wrap:wrap}.section-head .ph-actions{margin-left:0}}
.pack-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.pack-inputs{grid-template-columns:minmax(0,1fr)}}
.sum-line{display:flex;align-items:center;gap:8px;font-size:.8125rem;flex-wrap:wrap}
.sum-line .ok{color:var(--ok);font-weight:600}
.sum-line .bad{color:var(--late);font-weight:600}
.pack-foot{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.cost-grid{display:grid;grid-template-columns:auto auto auto;gap:4px 20px;font-size:.8125rem;align-items:baseline;justify-content:start}
.cost-grid .h{font-size:.6875rem;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.cost-grid .n{text-align:right}
.cost-grid .off{font-weight:650}
.res-list{display:grid;gap:12px}
.res-card{border-radius:var(--r-card);background:var(--ok-bg);padding:14px 16px;display:flex;gap:12px 24px;flex-wrap:wrap;align-items:flex-start}
.res-card .grow{flex:1 1 240px;min-width:0}
.diff-old{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-2)}
.diff-tbl td{vertical-align:top;overflow-wrap:anywhere;white-space:normal;max-width:320px}
.file-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.file-pick label.btn{cursor:pointer;position:relative}
.file-pick label.btn:focus-within{outline:2px solid var(--rose);outline-offset:2px}
.file-pick label.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.integrity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.integrity-grid{grid-template-columns:minmax(0,1fr)}}
.report-meta{font-size:.8125rem;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:10px 20px;font-size:.875rem}
.kv dt{color:var(--ink-2)}
.kv dd{font-weight:500;overflow-wrap:anywhere}

/* ================================================================================================
   FACTORY (DESIGN.md §4): zero-training, one job per screen, big tap targets, serif counts.
   [data-scale="factory"] sets the scale on the factory shell and on factory flows rendered for admin.
   ================================================================================================ */
[data-scale="factory"]{--fs-body:18px;--ctl-h:56px;font-size:18px;line-height:1.45}
[data-scale="factory"] .btn{font-size:1.0625rem;border-radius:10px;padding:0 20px}
[data-scale="factory"] .btn-sm{min-height:40px;font-size:.9375rem;padding:0 14px}
[data-scale="factory"] input[type=text],[data-scale="factory"] input[type=date],[data-scale="factory"] input:not([type]),
[data-scale="factory"] select,[data-scale="factory"] textarea{border-color:var(--line-3);border-radius:10px;font-size:1.0625rem;padding:10px 14px}
[data-scale="factory"] .field>label{font-size:.9375rem;margin-bottom:8px}
[data-scale="factory"] .field-err{font-size:.9375rem}
[data-scale="factory"] .callout{font-size:1rem;padding:14px 18px}
[data-scale="factory"] .small{font-size:.9375rem}
[data-scale="factory"] .badge{height:28px;padding:0 12px;font-size:.8125rem}
[data-scale="factory"] .chip{height:30px;padding:0 12px;font-size:.875rem}
[data-scale="factory"] .modal{width:min(640px,100%)}
[data-scale="factory"] .modal-title{font-size:1.5rem}

/* factory shell: top bar + tab rail, centered job column */
.fshell{min-height:100vh;display:flex;flex-direction:column}
.ftop{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.ftop-row{display:flex;align-items:center;gap:24px;padding:16px 40px 6px;max-width:1120px;margin:0 auto;width:100%}
.ftop-row .logo-img{width:150px;height:auto}
.fuser{margin-left:auto;text-align:right;line-height:1.2}
.fuser-name{font:500 1.5rem/1.1 var(--serif);letter-spacing:-.02em}
.fuser-switch{font-size:.875rem;color:var(--ink-2);margin-top:4px}
.fuser-switch button{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;padding:2px 0}
.fuser-switch button:hover{text-decoration-color:var(--rose)}
.fnav{display:flex;gap:4px;padding:0 22px;max-width:1120px;margin:0 auto;width:100%;overflow-x:auto;scrollbar-width:none}
.fnav a{position:relative;display:flex;align-items:center;gap:10px;min-height:60px;padding:0 18px;font-weight:600;font-size:1.0625rem;
  color:var(--ink-2);white-space:nowrap;transition:color var(--dur) var(--ease)}
.fnav a:hover{color:var(--ink)}
.fnav a.active{color:var(--ink)}
.fnav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--rose)}
.fnav a.active svg{color:var(--rose)}
.fnav .sb-badge{min-width:26px;height:24px;font-size:.8125rem}
.fmain{flex:1;padding:36px 40px 80px;max-width:1120px;margin:0 auto;width:100%}
@media (max-width:1100px){.ftop-row{padding:12px 24px}.fnav{padding:0 16px}.fmain{padding:28px 24px 72px}}
@media (max-width:700px){.ftop-row .logo-img{width:120px}.fuser-name{font-size:1.125rem}.fnav a{padding:0 12px;font-size:.9375rem;min-height:52px}.fmain{padding:20px 16px 64px}}

/* job head */
.fhead{margin-bottom:28px}
.fhead .ph-back{font-size:1rem;margin-bottom:14px;gap:8px}
.fhead h1{font:450 2.5rem/1.05 var(--serif);letter-spacing:-.03em}
.fhead .ph-rule{margin-top:14px}
.fhead-sub{font-size:1.125rem;color:var(--ink-2);margin-top:12px}
@media (max-width:700px){.fhead h1{font-size:2rem}}

/* short screens (10-inch tablet 1024x768, 1280x800 laptops): the four task cards and a job's go button stay in view */
@media (max-height:860px){
  .ftop-row{padding-top:10px}
  .fnav a{min-height:52px}
  .fmain{padding-top:22px}
  .fhead{margin-bottom:18px}
  .fhead .ph-back{margin-bottom:8px}
  .fhead h1{font-size:2.125rem}
  .fhead .ph-rule{margin-top:10px}
  .fhead-sub{margin-top:8px}
  .fpanel{padding:20px 22px}
}

/* the "Hari ini" band on the factory home */
.today-band{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  padding:28px 32px;border-radius:16px;background:var(--blush);margin-bottom:28px;position:relative;overflow:hidden}
.today-band .eyebrow{color:var(--rose)}
.today-band h1{font:450 2.75rem/1 var(--serif);letter-spacing:-.03em;margin-top:10px}
.today-band .today-date{font:450 1.25rem/1.2 var(--serif);color:var(--ink);text-align:right}
.today-band .today-hint{font-size:1rem;color:var(--ink-2);margin-top:6px;text-align:right}
@media (max-width:700px){.today-band{padding:22px}.today-band h1{font-size:2.125rem}.today-band .today-date,.today-band .today-hint{text-align:left}}

/* task cards (home) */
.taskcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:760px){.taskcards{grid-template-columns:minmax(0,1fr)}}
.taskcard{display:flex;flex-direction:column;gap:18px;padding:26px 28px 28px;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;min-width:0;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.taskcard:not(.idle):hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.taskcard-top{display:flex;align-items:flex-start;gap:16px}
.taskcard-ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--canvas);color:var(--ink);flex:none}
.taskcard-verb{font:500 1.625rem/1.15 var(--serif);letter-spacing:-.02em}
.taskcard-what{font-size:1rem;color:var(--ink-2);margin-top:4px}
.taskcard-tag{margin-left:auto}
.taskcard-count{display:flex;align-items:baseline;gap:10px}
.taskcard-count .n{font:400 3.5rem/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.taskcard-count .u{font-size:1.0625rem;color:var(--ink-2);font-weight:500}
.taskcard .bigbtn{margin-top:auto}
.taskcard.idle{background:transparent;border-style:dashed;border-color:var(--line-2)}
.taskcard.idle .taskcard-ico{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.taskcard.idle .taskcard-verb{color:var(--ink-2)}
.taskcard.idle .taskcard-none{font:450 1.5rem/1.1 var(--serif);color:var(--ink-2);letter-spacing:-.02em}
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
.review-grid .k{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.review-grid .v{font-size:1.1875rem;font-weight:650;margin-top:6px;overflow-wrap:anywhere}
.review-grid .v.total{font:450 1.75rem/1.1 var(--serif);letter-spacing:-.02em}
@media (max-width:760px){.review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.review-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.review-line:last-child{border-bottom:none}
.tag-late{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--late-bg);
  color:var(--late);font-size:.875rem;font-weight:700;white-space:nowrap}

@media (max-height:860px){
  .today-band{padding:20px 28px;margin-bottom:18px}
  .today-band h1{font-size:2.25rem;margin-top:6px}
  .taskcards{gap:16px}
  .taskcard{padding:18px 22px 20px;gap:12px}
  .taskcard-ico{width:48px;height:48px}
  .taskcard-count .n{font-size:2.75rem}
}

/* the go button: full width, >= 56 px, ink, verb */
.bigbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:60px;padding:0 24px;border-radius:12px;
  background:var(--ink);color:var(--on-ink);font-size:1.1875rem;font-weight:650;letter-spacing:.005em;border:1px solid var(--ink);
  transition:background var(--dur) var(--ease),transform 120ms var(--ease),opacity var(--dur) var(--ease)}
.bigbtn:hover{background:color-mix(in srgb,var(--ink) 86%,var(--rose))}
.bigbtn:active{transform:translateY(1px)}
.bigbtn[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.bigbtn svg{width:22px;height:22px}
.bigbtn .spin{width:20px;height:20px;border-color:color-mix(in srgb,var(--on-ink) 35%,transparent);border-top-color:var(--on-ink)}
.bigbtn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line-3)}
.bigbtn.ghost:hover{background:var(--paper-2)}
.action-bar{margin-top:28px;padding:4px 0 8px}
.action-why{font-size:1rem;color:var(--ink-2);font-weight:600;margin-top:10px;text-align:center;min-height:1.4em}
.action-err{font-size:1rem;color:var(--late);font-weight:600;margin-top:10px;text-align:center}
.action-links{display:flex;justify-content:center;gap:28px;margin-top:14px;flex-wrap:wrap;font-size:1rem}

/* product anchor: swatch tile with the model initial + name + colour */
.anchor{display:flex;align-items:center;gap:16px;min-width:0}
.swatch{--sw:#d9d2c6;width:56px;height:56px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--sw);
  box-shadow:inset 0 0 0 1px rgb(29 26 23 / .12);color:var(--sw-ink,#1D1A17);font:500 1.5rem/1 var(--serif)}
.swatch.sm{width:40px;height:40px;border-radius:9px;font-size:1.0625rem}
.swatch.lg{width:72px;height:72px;border-radius:14px;font-size:2rem}
.anchor-name{font-size:1.25rem;font-weight:650;line-height:1.2;letter-spacing:-.005em;overflow-wrap:anywhere}
.anchor-colour{font-weight:500;color:var(--ink-2)}
.anchor-qty{font-weight:600;color:var(--ink-2);margin-left:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.anchor-meta{font-size:.9375rem;color:var(--ink-2);margin-top:4px}
.anchor-meta .code{font-size:.8125rem}

/* job cards (lists of orders / lines) */
.jobs{display:grid;gap:14px}
.jobcard{display:flex;align-items:center;gap:20px;padding:20px 22px;background:var(--paper);border:1px solid var(--line);border-radius:14px;
  min-width:0;width:100%;text-align:left;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform 120ms var(--ease)}
.jobcard:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.jobcard:active{transform:translateY(1px)}
.jobcard .grow{flex:1;min-width:0}
.jobcard .go{color:var(--ink-2);flex:none}
.jobcard.dim{background:transparent;border-style:dashed}
.jobcard.dim .anchor-name{color:var(--ink-2)}
.jobcard-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;text-align:right}
.jobcard-products{display:grid;gap:12px}
.jobgroup-title{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:30px 0 12px}
@media (max-width:700px){.jobcard{flex-wrap:wrap;padding:16px}.jobcard-side{align-items:flex-start;text-align:left;width:100%}}

/* thick progress bar with words */
.fbar{display:grid;gap:8px;min-width:0}
.fbar-track{height:14px;border-radius:var(--r-pill);background:var(--paper-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.fbar-fill{height:100%;border-radius:var(--r-pill);background:var(--ink)}
.fbar.done .fbar-fill{background:var(--ok)}
.fbar-words{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:1rem}
.fbar-words b{font:500 1.375rem/1 var(--serif);letter-spacing:-.02em}
.fbar-words .due{color:var(--ink-2)}
.fbar-words .due.late{color:var(--ink);font-weight:600}

/* panels inside a job */
.fpanel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.fpanel+.fpanel{margin-top:18px}
.fgrid>.fpanel+.fpanel{margin-top:0}
.upper{text-transform:uppercase}
.fpanel-title{font:500 1.375rem/1.2 var(--serif);letter-spacing:-.02em;margin-bottom:6px}
.fpanel-hint{font-size:1rem;color:var(--ink-2);margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
@media (max-width:760px){.fgrid{grid-template-columns:minmax(0,1fr)}}

/* stepper: − [ number ] + */
.stepper{display:inline-grid;grid-template-columns:64px minmax(110px,1fr) 64px;align-items:stretch;width:min(100%,360px);
  border:1px solid var(--line-3);border-radius:14px;background:var(--paper);overflow:hidden}
.stepper.wide{width:100%}
.stepper button{display:grid;place-items:center;min-height:64px;color:var(--ink);background:var(--paper-2);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.stepper button:hover:not([disabled]){background:color-mix(in srgb,var(--paper-2) 60%,var(--line))}
.stepper button:active:not([disabled]){background:var(--line)}
.stepper button[disabled]{color:var(--line-3);cursor:not-allowed}
.stepper button svg{width:24px;height:24px}
.stepper .stepper-field{display:flex;align-items:baseline;justify-content:center;gap:6px;padding:0 8px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.stepper input{border:none!important;box-shadow:none!important;background:transparent!important;text-align:center;
  font:450 1.875rem/1 var(--serif)!important;letter-spacing:-.02em;padding:0!important;min-height:62px!important;width:100%;min-width:0;
  font-variant-numeric:lining-nums tabular-nums}
.stepper .unit{font-size:1rem;color:var(--ink-2);font-weight:600;flex:none}
.stepper:focus-within{border-color:var(--rose);box-shadow:0 0 0 3px color-mix(in srgb,var(--rose) 18%,transparent)}
.stepper.is-invalid{border-color:var(--late)}
.stepper-label{display:block;font-size:1rem;font-weight:650;margin-bottom:10px}
.stepper-hint{font-size:1rem;color:var(--ink);margin-top:10px}
.stepper-hint b{color:var(--ink)}
.stepper-err{font-size:.9375rem;color:var(--late);margin-top:8px;font-weight:600}
.bignum{font:400 3rem/1 var(--serif);letter-spacing:-.03em;font-variant-numeric:lining-nums tabular-nums}
.bignum .u{font:600 1rem/1 var(--sans);letter-spacing:0;color:var(--ink-2);margin-left:6px}
.bignum.late{color:var(--late)}
.bignum.muted{color:var(--ink-2)}

/* reason chips */
.rchips{display:flex;flex-wrap:wrap;gap:10px}
.rchip{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:var(--r-pill);border:1px solid var(--line-3);
  background:var(--paper);font-size:1rem;font-weight:600;color:var(--ink);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.rchip:hover{border-color:var(--ink-2)}
.rchip[aria-checked="true"]{background:var(--blush);border-color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose)}
.rchip[aria-checked="true"] svg{color:var(--rose)}
.rchips.sm .rchip{min-height:36px;padding:0 14px;font-size:.875rem}

/* pick list (Ambil bahan) */
.picklist{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pickrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 24px;padding:20px 26px;border-bottom:1px solid var(--line)}
.pickrow:last-child{border-bottom:none}
.pickrow-name{font-size:1.1875rem;font-weight:650;line-height:1.25}
.pickrow-sub{font-size:.9375rem;color:var(--ink-2);margin-top:4px}
.pickrow-qty{text-align:right}
.pickrow-qty .k{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pickrow-qty .v{font:450 1.75rem/1.1 var(--serif);letter-spacing:-.02em;margin-top:4px;font-variant-numeric:lining-nums tabular-nums}
.pickrow-qty .v .u{font:600 1rem/1 var(--sans);color:var(--ink-2);margin-left:6px}
.pickrow-edit{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px 28px;align-items:start;
  padding-top:8px}
@media (max-width:760px){.pickrow-edit{grid-template-columns:minmax(0,1fr)}.pickrow{padding:18px}}
.pickrow.changed{background:color-mix(in srgb,var(--blush) 55%,var(--paper))}
.pickrow .diff{font-size:1rem;font-weight:700}
.pickrow .diff.minus{color:var(--late)}
.pickrow .diff.plus{color:var(--wait)}
.pickrow .extra-tag{display:inline-flex;margin-left:10px;vertical-align:2px}
.pickrow-remove{color:var(--ink-2);font-size:.9375rem;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}

/* the day: today locked, "Hari lain…" reveal */
.dayline{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;font-size:1.0625rem}
.dayline .day{display:inline-flex;align-items:center;gap:10px;font-weight:650}
.dayline .day svg{color:var(--ink-2)}
.dayline input[type=date]{width:auto;min-width:200px}
.late-note{margin-top:12px}

/* line chips (production line) reuse .rchip; success panel */
.success{display:grid;justify-items:start;gap:18px;padding:36px 40px;border-radius:18px;background:var(--ok-bg);color:var(--ink)}
.success-check{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:light-dark(#FFFDFA,#10221A)}
.success-check svg{width:38px;height:38px}
.success-line{font:450 2rem/1.15 var(--serif);letter-spacing:-.025em;max-width:28ch}
.success-detail{font-size:1.0625rem;color:var(--ink);display:grid;gap:6px}
.success-detail .muted{color:var(--ink-2)}
.success-actions{display:flex;gap:14px 28px;align-items:center;flex-wrap:wrap;width:100%;margin-top:6px}
.success-actions .bigbtn{width:auto;min-width:240px}
.success-doc{font-size:.9375rem;color:var(--ink-2)}
@media (max-width:700px){.success{padding:26px 22px}.success-line{font-size:1.625rem}.success-actions .bigbtn{width:100%}}
@media (prefers-reduced-motion:no-preference){.success{animation:rise 260ms var(--ease)}.success-check{animation:pop 320ms var(--ease)}}

/* packing numbers */
.packnums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.packnum{padding:18px 20px;border-radius:14px;background:var(--canvas)}
.packnum .k{font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.packnum .bignum{margin-top:8px;font-size:2.5rem}
@media (max-width:760px){.packnums{grid-template-columns:minmax(0,1fr)}}

/* selectable cards (Kirim) */
.selcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 20px;padding:18px 22px;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.selcard.on{border-color:var(--rose);background:color-mix(in srgb,var(--blush) 50%,var(--paper));box-shadow:inset 0 0 0 1px var(--rose)}
.selbox{width:36px;height:36px;border-radius:10px;border:2px solid var(--line-3);display:grid;place-items:center;background:var(--paper);color:var(--on-ink);flex:none}
.selcard.on .selbox{background:var(--ink);border-color:var(--ink)}
.selbox svg{width:20px;height:20px}
.selcard-qty{grid-column:2/-1}
@media (min-width:900px){.selcard-qty{grid-column:auto}}
.review{display:grid;gap:12px}
.review-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
.review-row:last-child{border-bottom:none}
.review-row .k{color:var(--ink-2)}
.review-row .v{font-weight:650;text-align:right}
.sjlist{display:grid;gap:10px}
.sjrow{display:flex;align-items:center;gap:16px 20px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
.sjrow .grow{flex:1;min-width:0}
.sjrow-no{font:500 1.125rem/1.2 var(--serif);letter-spacing:-.01em}
.sjrow-meta{font-size:.9375rem;color:var(--ink-2);margin-top:3px}

/* empty-state sketches */
.sketch{display:block}
.fempty{display:grid;justify-items:center;text-align:center;gap:10px;padding:56px 24px;border:1px dashed var(--line-2);border-radius:16px}
.fempty .sketch{color:var(--line-3)}
.fempty-title{font:450 1.625rem/1.2 var(--serif);letter-spacing:-.02em}
.fempty-hint{font-size:1.0625rem;color:var(--ink-2);max-width:40ch}
.fempty .bigbtn{width:auto;min-width:240px;margin-top:10px}

/* ---------- round 3b: ops / finance parts ---------- */
.chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ph-refs{display:block;margin-top:4px;font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lock-hint{display:inline-flex;align-items:flex-start;gap:6px;color:var(--ink-2)}
.lock-hint svg{flex:none;margin-top:2px}
.locked-field{display:flex;align-items:center;gap:8px;height:var(--ctl-h);padding:0 12px;border:1px dashed var(--line-2);
  border-radius:var(--r-ctl);background:var(--paper-2);color:var(--ink-2);min-width:0}
.locked-field input{border:none;background:transparent;padding:0;height:auto;color:var(--ink);font:inherit;flex:1;min-width:0;box-shadow:none}
.locked-field input:focus{outline:none;box-shadow:none}
.warn-list{margin:0;padding-left:18px;display:grid;gap:6px}
.warn-list li::marker{color:var(--wait)}
.flink-row{margin-top:28px;text-align:center}
.is-loading{opacity:.55;transition:opacity var(--dur) var(--ease)}

/* user menu (topbar) */
.umenu{position:relative}
.umenu-btn{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 10px 0 12px;border-radius:var(--r-pill);
  border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.umenu-btn:hover,.umenu-btn[aria-expanded="true"]{border-color:var(--line);background:var(--paper)}
.umenu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:240px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:6px;animation:umenu-in var(--dur) var(--ease)}
@keyframes umenu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.umenu-who{padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;white-space:normal}
.umenu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:none;background:transparent;border-radius:var(--r-ctl);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.umenu-item:hover,.umenu-item:focus-visible{background:var(--hover)}
@media (max-width:520px){.umenu-btn .tb-name{max-width:110px;overflow:hidden;text-overflow:ellipsis}}

/* document blocks (detail screens) */
.docblock{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.docblock-head{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:14px 18px}
.docblock-id{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.docblock-id .code{font-size:.9375rem}
.docblock-meta{flex:1 1 240px;min-width:0;color:var(--ink-2);font-size:.8125rem;font-variant-numeric:tabular-nums}
.docblock-actions{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-left:auto}
.docblock-body{padding:0 18px 16px}
.docblock-body>.tbl-wrap{margin:0}
.docblock.is-reversed{background:var(--canvas);border-style:dashed}
.docblock.is-reversed .docblock-id .code{text-decoration:line-through;text-decoration-color:var(--line-3)}
.docblock.is-reversed .docblock-body{opacity:.72}
.docblock>.rev-note{margin:0 18px 12px}

/* reversal ("Balik dokumen") */
.rev{display:inline-flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:420px}
.rev-why{display:flex;align-items:flex-start;gap:6px;font-size:.75rem;line-height:1.45;color:var(--ink-2);text-align:right}
.rev-why svg{flex:none;margin-top:2px}
.rev-stamp{font-weight:700;letter-spacing:.12em;font-size:.6875rem}
.rev-note{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.8125rem;color:var(--ink)}
.rev-note .muted{flex-basis:100%}
.rev-note.callout{display:flex}
@media (max-width:640px){.rev{align-items:flex-start}.rev-why{text-align:left}}

/* confirmations on the order detail */
.conf-list{display:grid;border-top:1px solid var(--line);margin:0 -18px -16px}
.conf-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px 16px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line)}
.conf-row:last-child{border-bottom:none}
.conf-row.is-reversed{opacity:.6}
.conf-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.conf-act{justify-self:end}
@media (max-width:760px){.conf-row{grid-template-columns:minmax(0,1fr)}.conf-act{justify-self:start}}

/* file pick (signed SJ scan) */
.file-pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-pick .btn.is-busy{opacity:.6;pointer-events:none}
.file-err{flex-basis:100%;margin-top:0}

/* Pengaturan: production lines */
.line-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.line-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start}
.line-no{height:var(--ctl-h);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:.8125rem}

/* Impor: what the import creates */
.created-lists{display:grid;gap:10px}
.created-lists.compact{margin-top:8px;gap:6px}
.created-row{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.created-label{font-size:.8125rem;color:var(--ink-2);min-width:130px}

/* Penyesuaian: wip_loss line picker */
.wip-lines{display:grid;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.wip-line{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.wip-line:last-child{border-bottom:none}
.wip-line .grow{flex:1 1 180px;min-width:0}
.wip-line.off{background:var(--canvas);color:var(--ink-2)}
.wip-line.on{background:var(--blush);box-shadow:inset 2px 0 0 var(--rose)}
.wip-why{display:inline-flex;align-items:center;gap:4px}

/* Laporan: output per line summary */
.line-sum{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.line-sum-item{display:flex;flex-direction:column;gap:2px;padding:12px 18px;min-width:120px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.line-sum-n{font:400 1.75rem/1.1 var(--serif);letter-spacing:-.02em}
.line-sum-l{font-size:.8125rem;color:var(--ink-2)}

/* Integritas: named checks */
.checklist{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.check-item{display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line)}
.check-item:last-child{border-bottom:none}
.check-item .grow{flex:1;min-width:0}
.check-mark{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);color:var(--ink-2);margin-top:1px}
.check-item.good .check-mark{border-color:transparent;background:var(--ok-bg);color:var(--ok)}
.check-item.bad .check-mark{border-color:transparent;background:var(--late-bg);color:var(--late)}
.check-name{font-weight:600}
.check-why{font-size:.8125rem;color:var(--ink-2);margin-top:2px;max-width:80ch}
.check-state{flex:none;align-self:center}
@media (max-width:640px){.check-item{flex-wrap:wrap}.check-state{margin-left:36px}}

/* ---------- print hook: the app chrome never prints ---------- */
@media print{
  body::before{display:none}
  .sidebar,.topbar,.toolbar,.pager,.no-print,.toast-host,.modal-backdrop,.drawer,.drawer-backdrop,.ftop{display:none!important}
  .shell{display:block}
  .content,.fmain{padding:0;max-width:none}
  body{background:#fff;color:#000}
  .tbl-wrap,.tbl-wrap.fill{max-height:none;overflow:visible;border:none}
}

/* ---------- round 3c ---------- */
/* a request run by a confirm dialog failed: the reason stays in the dialog, the typed text is kept */
.dialog-fail{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border-radius:var(--r-ctl);
  background:var(--late-bg);color:var(--late);font-size:.8125rem;line-height:1.5}
.dialog-fail svg{flex:none;margin-top:2px}
.rev-note .rev-extra{flex-basis:100%;padding-left:10px;border-left:2px solid var(--wait);color:var(--ink);font-size:.8125rem}
/* finance tables that must fit 1280: secondary columns live in the row drawer below 1440 */
@media (max-width:1439px){.tbl th.col-wide,.tbl td.col-wide{display:none}}
.tbl td.status-cell{min-width:120px;white-space:normal}
.tbl td.status-cell .chips{flex-wrap:wrap}
.tbl .chip,.tbl .badge{white-space:nowrap;flex:none}
/* sticky row-action column (right edge) */
.tbl th.act-sticky,.tbl td.act-sticky{position:sticky;right:0;z-index:1;background:var(--paper);box-shadow:inset 1px 0 0 var(--line)}
.tbl th.act-sticky{z-index:3;background:var(--paper-2)}
.tbl tbody tr:hover td.act-sticky{background:color-mix(in srgb,var(--paper) 96%,var(--ink))}
.tbl tbody tr.dim td.act-sticky{background:var(--paper)}
/* order timeline: a status that stepped back (reversal) reads muted, with a rose segment on the rule */
.timeline li.is-back>.strong{color:var(--ink-2);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.timeline li.is-back>.strong svg{color:var(--rose)}
.timeline li.is-back::before{border-color:var(--rose);background:var(--paper);width:9px;height:9px;left:-23.5px;top:7px}
.timeline li.is-back::after{content:"";position:absolute;left:-19px;top:0;bottom:0;width:1px;background:var(--rose)}
.report-help{margin:-4px 0 12px}
.tbl td.bound.narrow{max-width:200px}
@media (max-width:1599px){.tbl th.col-xwide,.tbl td.col-xwide{display:none}}
.drawer-title .chip,.drawer-title .badge,.modal-title .chip,.modal-title .badge{font-family:var(--sans);vertical-align:middle}
@media (max-width:700px){.tbl th.act-sticky,.tbl td.act-sticky{position:static;box-shadow:none}}
.tbl th .th-sub{display:block;font-weight:500;letter-spacing:.06em;color:var(--ink-2);margin-top:1px}

/* F3d: screen-reader-only text (compact Balik buttons in table cells keep the server sentence as their description) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rev.rev-compact{max-width:none}
.tbl td.note-cell{min-width:160px;max-width:280px;white-space:normal}
.rev-why-inline{display:flex;gap:4px;align-items:flex-start;color:var(--ink-2)}
.rev-why-inline svg{flex:none;margin-top:2px}
.drawer-actions{display:flex;justify-content:flex-end}
.drawer-actions .rev{max-width:100%}
.tbl td.bound.note-xs{max-width:180px}
.rev-why>span>svg{display:inline-block;vertical-align:-1px;margin-right:5px}

/* ---------- round F3e ---------- */
/* long codes (60-char SKU, long RO / PO / ref numbers) never widen a table: inside a cell a code wraps at its own
   separators (- and / before a letter; "KUL-001" and "PO/2026/10/0035" never break) within 22ch, so every character
   stays readable (two SKUs that differ only at the end stay distinguishable). Page titles and doc heads wrap too. */
.tbl td .code{display:inline-block;max-width:24ch;white-space:normal;overflow-wrap:break-word}
/* free text in a wrapping cell and every secondary line may break inside a long token (a 47-char RO number has no
   break point: Chrome never breaks at "/") */
.tbl td.wrap,.tbl td .sub-line,.tbl td .wrap-any{overflow-wrap:anywhere}
/* below 1440 the cells breathe a little less so dense finance tables fit 1280 with long data */
@media (max-width:1439px){
  .tbl th,.tbl td{padding-left:10px;padding-right:10px}
  .tbl td.wrap{min-width:150px}
  .tbl td.bound{max-width:200px}
}
.ph-title h1,.drawer-title,.docblock-id{overflow-wrap:anywhere;min-width:0}
.ph-title h1 .code,.drawer-title .code,.docblock-id .code{white-space:normal}
/* a character-limited field: "n / max karakter" under it */
.field-count{margin-top:4px;font-size:.75rem;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.field-count.is-full{color:var(--wait)}
/* a secondary line shown only where its own column is hidden (below 1440, see col-wide) */
.only-narrow{display:none}
@media (max-width:1439px){.tbl td .sub-line.only-narrow{display:block}}
/* F3g: a narrow-only line clamped to three lines (the row drawer has the whole text) */
@media (max-width:1439px){.tbl td .sub-line.only-narrow.clamp3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;white-space:normal}}
/* a blocked Balik in a table cell: the server's sentence under the button, visible and wrapped (R3 #2) */
.rev.rev-compact .rev-why{white-space:normal;width:max-content;max-width:190px;font-size:.71875rem;text-align:left}
.tbl td .rev-note.rev-note-cell{font-size:.75rem;gap:2px 6px;color:var(--ink-2)}
.tbl td .rev-note.rev-note-cell .muted{flex-basis:100%}
/* a secondary line that may wrap inside a no-wrap (number) cell: a long limiting SKU under the capacity */
.tbl td .sub-line.sub-wrap{white-space:normal;max-width:22ch;margin-left:auto}
/* a reversed KF on the order page: the same note as every other reversed document, full width under its row (R3 #8) */
.conf-rev{grid-column:1/-1}
.conf-row.is-reversed .conf-rev .rev-note{font-size:.75rem}
/* a fact value (RO / PO numbers, long refs) wraps inside its grid cell: no page scroll at 390 (R3 #3) */
.fact,.facts>*{min-width:0}
.fact-v,.fact-v .code{white-space:normal;overflow-wrap:anywhere}

/* ---------- round F3f ---------- */
/* a code is as wide as its text up to 22ch: a short code ("TAS-A", "PO/2026/10/0035") never breaks however much the
   table squeezes its column; only a code longer than 22ch wraps, inside its 22ch box (R4 #4) */
.tbl td .code{width:max-content;max-width:24ch;overflow-wrap:anywhere}
/* Penyesuaian: status chips over the requester, one cell (R4 #1) */
.tbl td.status-cell .sub-line{white-space:normal}
/* a chip whose text can be long (the model chip on the resep page) wraps instead of leaving its row (R4 #3) */
.chip.chip-wrap{white-space:normal;overflow-wrap:anywhere;max-width:100%;height:auto;min-height:24px;line-height:1.35;padding-top:3px;padding-bottom:3px}
/* long data can never widen a table (F3f): a text cell breaks a long token (a 500-char phone, a 120-char file name, a
   60-char ASN) inside the column instead of pushing it wider; a text cell keeps at least ~9 characters of width so
   the table never squeezes it into a letter-wide strip */
.tbl td{overflow-wrap:anywhere}
.tbl td:not(.n):not(.nowrap):not(.act):not(.act-sticky){min-width:9ch}
/* a cell's secondary lines (kirim supplier …, faktor …, a kind label, a person + time) wrap under the main line, even
   in a no-wrap cell: the main line (a code, a figure) sets the column width; a WAC / FIFO pair never breaks */
.tbl td .sub-line{white-space:normal}
.tbl td .num.pair .sub-line{white-space:nowrap}
/* a KPI never leaves its tile (R4 #5): the figure may wrap at its spaces, a long sub-line (a 60-char limiting SKU)
   breaks anywhere; on a phone the money figures are a step smaller */
.kpi-value{white-space:normal;overflow-wrap:anywhere}
.kpi-sub{overflow-wrap:anywhere}
@media (max-width:480px){.kpi-value.money{font-size:1.125rem}.kpis.wide .kpi-value{font-size:1.5rem}}
.sub-line.strong{font-weight:600;color:var(--ink)}
.tbl td .wrap-any{white-space:normal}
/* page heads: a 60-char RO / PO / ASN in the refs line wraps instead of widening the page at 390 (F3f) */
.ph-sub,.ph-refs{overflow-wrap:anywhere;min-width:0}
/* a dashboard list title (an order with a 60-char product code) wraps, never cut off */
.list-item .title,.list-item .title .code,.list-item .meta{overflow-wrap:anywhere;white-space:normal}
.tbl td.bound.model-cell{max-width:150px}
.tbl.edit td:first-child{min-width:220px}

/* F3h: the Hari ini card's secondary job link + the leftover-return group on Ambil bahan */
.taskcard-extra{display:inline-block;margin-top:12px;font-weight:600}
.return-group{margin-top:34px}
.jobcard .go-label{font-weight:650;font-size:.9375rem}

/* F3h (R6 #9): codes in titles — up to 22 characters on one line (TitleCode), longer ones wrap anywhere */
.ph-title h1 .code.tcode,.drawer-title .code.tcode{white-space:nowrap;overflow-wrap:normal;word-break:normal}
.ph-title h1 .code.tcode-long,.drawer-title .code.tcode-long{white-space:normal;overflow-wrap:anywhere}
/* F3h (R6 #9): the BoM editor at phone width — each line a card; the material picker gets the whole first row, the
   numbers sit two per row under it with their own small labels */
@media (max-width:640px){
  .tbl.bom-edit{min-width:0!important;width:100%}
  .tbl.bom-edit thead{display:none}
  .tbl.bom-edit,.tbl.bom-edit tbody,.tbl.bom-edit tfoot{display:block}
  .tbl.bom-edit tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px;padding:12px;border-bottom:1px solid var(--line)}
  .tbl.bom-edit td{display:block;padding:0!important;border:0!important;text-align:left;min-width:0}
  .tbl.bom-edit tbody td:first-child{grid-column:1/-1}
  .tbl.bom-edit td[data-label]::before{content:attr(data-label);display:block;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px}
  .tbl.bom-edit td.act{grid-column:1/-1;justify-self:end;width:auto!important;min-width:0!important}
  .tbl.bom-edit td.act .btn{margin:0}
  .tbl.bom-edit tfoot tr{grid-template-columns:1fr auto}
  .tbl.bom-edit tfoot td:empty{display:none}
}
/* F3h: at phone width the drawer's actions go under its title, so the title (and a code in it) has the full width */
@media (max-width:640px){.drawer-head{flex-wrap:wrap}.drawer-head .grow{flex:1 1 calc(100% - 48px)}.drawer-head .ph-actions{order:3;flex:1 1 100%;flex-wrap:wrap}}
/* F3h: a blocked Balik sentence in a table's action column wraps to about the buttons' width, so a long server
   sentence ("Stok KUL-001 dari dokumen ini sudah terpakai …") never widens the sticky column over the status column */
.tbl td.act .rev.rev-compact .rev-why{width:17ch;max-width:17ch;white-space:normal;overflow-wrap:anywhere}   /* 17ch of .75rem ≈ 112px < Setujui + Tolak */
/* F3i (R7 #3): a search-select inside an editable table keeps room for a whole code (≤ 22 characters) + its clear button,
   whatever the viewport (receipt lines, BoM lines at 1024) */
.tbl.edit td .combo{min-width:calc(20ch + 40px)}
/* F3j: on a phone (the table scrolls inside its frame there) a real 22-char code (LHSM25 (LOGO HURUF 35)) was 5 px short of
   20ch + 40px; from 1024 up the column is wider than either, and the larger floor would widen the BoM editor at 1280 */
@media (max-width:760px){.tbl.edit td .combo{min-width:calc(22ch + 48px)}}
/* F3i: a column that hides below 1280 (col-mid) and the sub-line that takes its place there (only-mid) */
.only-mid{display:none}
@media (max-width:1279px){.tbl th.col-mid,.tbl td.col-mid{display:none}.tbl td .sub-line.only-mid{display:block}}
/* F3i: a badge that follows text or another chip outside a .chips row keeps a visible gap (an htm leading space is not
   reliable), e.g. "Belum ada" + "Ada draft", "Hitam" + "Di bawah min" */
:not(.chips)>.badge:not(:first-child){margin-left:6px}
/* F3i: wide form grids (3-4 columns) take 2 columns below 1280; a span-all / span-2 field keeps the whole row */
@media (max-width:1279px) and (min-width:641px){.form-grid.fg-wide{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.fg-wide .span-2{grid-column:span 2}}
/* F3k (R9 #1): the receipt form's lines take two rows each (one tbody per line): the material, then the numbers. Every
   number box keeps room for the largest value the server takes (qty 9.999.999.999,9999, price 999.999.999.999,99) */
.tbl.rcv-lines th{position:static}
.tbl.rcv-lines thead tr.rcv-mat th{border-bottom:none;padding-bottom:0}
.tbl.edit.rcv-lines td:first-child{min-width:0}
.tbl.rcv-lines tbody tr.rcv-mat td{border-bottom:none;padding-bottom:2px}
.tbl.rcv-lines tbody tr:last-child td{border-bottom:1px solid var(--line)}
.tbl.rcv-lines tbody tr:hover td{background:none}
.tbl.rcv-lines .affix>input.n{min-width:calc(16ch + 22px)}
.tbl.rcv-lines td.rcv-total{white-space:normal}
/* F3k (real-data gate): 22 characters of real SKU are wider than 22ch ("LHSM25 (LOGO HURUF 35)" = 22.2ch: capitals and
   brackets are wider than a digit), so a table code's box is 24ch: every real code ≤ 22 chars stays on one line */
/* F3l (R10 #5): the BoM editor's qty box shows the schema's largest qty_net (9.999.999.999,9999) whole; a figure of a
   .grp cell wraps only after a thousands dot (groupBreaks), so the schema maxima never widen the table past the screen */
.nw{white-space:nowrap}
.tbl td .grp{white-space:normal}
.tbl.edit .affix>input.qty-max{min-width:calc(16ch + 22px)}
@media (max-width:640px){.tbl.bom-edit tbody td.bom-qty{grid-column:1/-1}}
/* F3l (R10 #2): a `words` cell keeps its words whole (a long token is .wrap-any, Words); an `hw` column's header wraps
   between its words ("SELISIH / TERBUKA") instead of setting the column's width on one line */
.tbl td.words,.tbl td .words{overflow-wrap:break-word}
.tbl th.hw{white-space:normal}