/* =====================================================================================
   JENIL ERP DESIGN LANGUAGE — light enterprise (v7.158 prototype, Roll Forming › Today only).
   Calm light workspace, compact controls, sophisticated tables. JENIL identity: slate-navy rail,
   the amber "notch" selection marker, steel-blue actions, production-state dots.
   Approved: applies to the whole ERP (rolled out v7.158).
   ===================================================================================== */
body{--rail:#22303D;--rail2:#2A3947;--rail3:#34455A;--railt:#E6ECF1;--railm:#9FB0BE;
  --bg:#F6F6F4;--s1:#FFFFFF;--s2:#FAFAF9;--ln:#E4E6E8;--ln2:#EFF0F1;--ink:#1D2328;--ink2:#40494F;--mut:#6E7780;--mut2:#98A0A7;
  --acc:#D4A04A;--act:#2F6690;--act2:#EEF3F8;--run:#3E7D5E;--run2:#EEF5F0;--warn:#9A7424;--warn2:#FBF5E6;--bad:#A94F4A;--bad2:#F9EEED; /* soft semantic palette */
  --ff:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;--fm:'Inter','Segoe UI',system-ui,-apple-system,sans-serif; /* numbers: main sans + tabular figures */
  font-family:var(--ff);background:var(--bg);color:var(--ink)}
body *{letter-spacing:normal}
/* ---------- rail ---------- */
body #side{width:228px;flex:0 0 228px;background:var(--rail);border-right:0;box-shadow:none}
body #side .sb{padding:13px 16px 12px;background:var(--rail);border-bottom:1px solid rgba(255,255,255,.07);gap:10px}
body #side .sb b{font-family:var(--ff);font-weight:800;font-size:15px;letter-spacing:.2em!important;color:#fff}
body #side .sb i{font-family:var(--ff);font-size:10px;letter-spacing:.02em!important;color:var(--railm);text-transform:none;margin-top:3px}
body #side .sb .cube{height:26px;filter:none}
body #side .navgrp{padding:14px 18px 4px!important;font-family:var(--ff)!important;font-size:10.5px!important;font-weight:600;letter-spacing:.08em!important;color:#8093A3!important;text-transform:uppercase}
body #side .nav{margin:1px 8px;width:calc(100% - 16px);padding:0 10px;height:30px;border-radius:5px!important;color:#CCD6DE;font-size:13px;font-weight:450;gap:10px;background:none;box-shadow:none!important;border-left:0!important;position:relative}
body #side .nav:hover{background:var(--rail2);color:#fff}
body #side .nav.on{background:var(--rail3);color:#fff;font-weight:600}
body #side .nav.on::before{content:'';position:absolute;left:-8px;top:7px;bottom:7px;width:4px;border-radius:0 3px 3px 0!important;background:var(--acc)}
body #side .nav .dot{width:16px;height:16px;border-radius:0!important;background:#8FA2B2;box-shadow:none!important;flex:0 0 16px;
  -webkit-mask:var(--ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E")) center/16px 16px no-repeat;
          mask:var(--ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3C/svg%3E")) center/16px 16px no-repeat}
body #side .nav:hover .dot{background:#E6ECF1}
body #side .nav.on .dot{background:var(--acc)}
body #side .nav[data-id=mine],body #side .nav[data-id=today]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")}
body #side .nav[data-id=dash],body #side .nav[data-id=mis],body #side .nav[data-id=rep],body #side .nav[data-id=oee]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E")}
body #side .nav[data-id=alerts],body #side .nav[data-id=salerts]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E")}
body #side .nav[data-id=track],body #side .nav[data-id=wip]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'/%3E%3C/svg%3E")}
body #side .nav[data-id=sales],body #side .nav[data-id=orders],body #side .nav[data-id=rates],body #side .nav[data-id=recv],body #side .nav[data-id=cust]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M9 12h7M9 16h7M9 8h3'/%3E%3C/svg%3E")}
body #side .nav[data-id=plan],body #side .nav[data-id=cap],body #side .nav[data-id=sched],body #side .nav[data-id=mrp]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
body #side .nav[data-id=floor],body #side .nav[data-id^=st-]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 21V11l5 3V11l5 3V7l8 4v10z'/%3E%3C/svg%3E")}
body #side .nav[data-id=st-ROLL]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Ccircle cx='17' cy='12' r='4'/%3E%3Cpath d='M7 8h10M7 16h10'/%3E%3C/svg%3E")}
body #side .nav[data-id=inv],body #side .nav[data-id=fg],body #side .nav[data-id=trf],body #side .nav[data-id=stk],body #side .nav[data-id=spare]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 7l9-4 9 4-9 4-9-4z'/%3E%3Cpath d='M3 7v10l9 4 9-4V7M12 11v10'/%3E%3C/svg%3E")}
body #side .nav[data-id=pur]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 4h3l3 11h10l2-8H7'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3C/svg%3E")}
body #side .nav[data-id=qual],body #side .nav[data-id=cmp],body #side .nav[data-id=audit],body #side .nav[data-id=cal],body #side .nav[data-id=ptest]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
body #side .nav[data-id=pack],body #side .nav[data-id=ready],body #side .nav[data-id=disp],body #side .nav[data-id=pspec],body #side .nav[data-id=expdoc]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2 7h12v10H2zM14 10h4l4 4v3h-8z'/%3E%3Ccircle cx='6' cy='18.5' r='1.5'/%3E%3Ccircle cx='17' cy='18.5' r='1.5'/%3E%3C/svg%3E")}
body #side .nav[data-id=bd],body #side .nav[data-id=mnt],body #side .nav[data-id=tools]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 1 5 5L11 20a2 2 0 0 1-3-3l8.5-8.5'/%3E%3Cpath d='M14 4l6 6'/%3E%3C/svg%3E")}
body #side .nav[data-id=att],body #side .nav[data-id=skill],body #side .nav[data-id=users],body #side .nav[data-id=hand]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20c0-4 3-6 7-6s7 2 7 6M16 4.5a3.5 3.5 0 0 1 0 7M18 14c2.5.6 4 2.6 4 6'/%3E%3C/svg%3E")}
body #side .nav[data-id=im],body #side .nav[data-id=set],body #side .nav[data-id=cos]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E")}

body #side .coswitch{margin:10px 12px;width:calc(100% - 24px);background:var(--rail2)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:5px!important;font-size:12.5px!important;min-height:32px;color:var(--railt)!important}
body #side .btn{border-radius:5px!important;min-height:30px;font-size:12px;background:var(--rail2);border:1px solid rgba(255,255,255,.1);color:var(--railt)}
/* ---------- command bar (thin, light) ---------- */
body #top{min-height:46px;height:46px;padding:0 16px 0 12px;background:var(--s1)!important;border-bottom:1px solid var(--ln);box-shadow:none;gap:12px;color:var(--ink)}
body #top h2{font-family:var(--ff);font-size:15px;font-weight:600;letter-spacing:0!important;color:var(--ink);display:flex;align-items:center;gap:8px}
body #top h2::before{content:'JENIL';font-weight:800;font-size:11px;letter-spacing:.18em;color:var(--ink);padding:2px 9px 2px 0;border-right:1px solid var(--ln);box-shadow:inset 0 -2px 0 var(--acc)}
body #top .sub{display:inline-block;font-family:var(--ff);font-size:11px;letter-spacing:0!important;text-transform:none;color:var(--mut);margin-top:1px}
body #top .sub::before{content:'Plant · '}
body #top .gsearch{flex:0 1 440px;margin-left:auto}
body #top .gsearch input{height:32px;border-radius:6px!important;background:var(--bg)!important;border:1px solid var(--ln)!important;color:var(--ink)!important;font-size:13px!important;padding-left:32px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7780' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:10px center!important;background-size:15px!important}
body #top .gsearch input:focus{background-color:#fff!important;border-color:var(--act)!important;box-shadow:0 0 0 3px var(--act2)}
body #top .scanbtn,body #top .sidetog,body #top .burger{height:32px;width:32px;border-radius:6px!important;background:var(--s1)!important;border:1px solid var(--ln)!important;color:var(--ink2)!important}
body #top .who{color:var(--mut);border-left:1px solid var(--ln);padding-left:14px}
body #top .who b{color:var(--ink);font-size:12.5px;font-weight:600}
/* ---------- workspace ---------- */
body #main{background:var(--bg)}
body #main>div:not(#top),body #main>section{padding:12px 20px 24px}
body .stage-hd{margin:0 0 12px;align-items:center;border-bottom:1px solid var(--ln);gap:12px}
body .stage-hd .tabs{border:0;margin:0;gap:4px}
body .stage-hd .tab{padding:8px 12px 9px;font-size:13px;font-weight:500;color:var(--mut);border-bottom:2px solid transparent;border-radius:0!important;background:none!important;margin-bottom:-1px}
body .stage-hd .tab:hover{color:var(--ink)}
body .stage-hd .tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--act)}
body .stage-act{padding:0}
body .btn{border-radius:5px!important;font-weight:500;font-size:12.5px;min-height:30px;padding:5px 12px;box-shadow:none;letter-spacing:0}
body .btn.sm{min-height:26px;padding:3px 10px;font-size:12px}
body .btn.amber{background:var(--act);border:1px solid var(--act);color:#fff;font-weight:600}
body .btn.amber:hover:not(:disabled){background:#1C5279;filter:none}
body .btn.ok{background:#fff;border:1px solid var(--ln);color:var(--run)}
body .btn.ghost{background:#fff;border:1px solid var(--ln);color:var(--ink2)}
body .btn.ghost:hover:not(:disabled){background:var(--s2);border-color:#D2D6DA}
body .btn:disabled{opacity:.4}
body .stage-act .btn.amber{background:#fff;color:var(--ink2);border-color:var(--ln);font-weight:500}
body #main .f .lbl,body #main .lbl{font-size:11.5px;font-weight:500;color:var(--mut);letter-spacing:0!important;text-transform:none}
body #main input:not([type=checkbox]):not([type=radio]),body #main select{min-height:30px;height:30px;padding:4px 10px;font-size:13px;border-radius:5px!important;border:1px solid var(--ln);background:#fff}
body #main input:focus,body #main select:focus{border-color:var(--act);box-shadow:0 0 0 3px var(--act2)}
body #main .filters:first-of-type{margin-bottom:10px}
/* status strip */
body .jx-strip{display:grid;grid-template-columns:repeat(5,1fr);background:var(--s1);border:1px solid var(--ln);border-radius:8px!important;margin-bottom:16px}
body .jx-cell{padding:11px 18px 12px;border-left:1px solid var(--ln2);display:flex;flex-direction:column;gap:2px}
body .jx-cell:first-child{border-left:0}
body .jx-cell label{order:2;font-size:12px;font-weight:500;color:var(--mut);display:flex;align-items:center;gap:6px}
body .jx-cell label::before{content:'';width:6px;height:6px;border-radius:50%!important;background:#C3C9CE}
body .jx-cell b{order:1;font-family:var(--ff);font-size:24px;font-weight:650;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
body .jx-cell span{order:3;font-size:11.5px;color:var(--mut2)}
body .jx-cell.lead label::before{background:var(--acc)}
body .jx-cell.ok label::before{background:var(--run)}body .jx-cell.ok b{color:var(--run)}
body .jx-cell.bad label::before{background:var(--bad)}body .jx-cell.bad b{color:var(--bad)}
body .jx-cell.warn label::before{background:var(--warn)}body .jx-cell.warn b{color:var(--warn)}
/* section heads */
body .jx-sec{margin-bottom:18px}
body .jx-sec-h{display:flex;align-items:baseline;gap:10px;margin:0 0 8px}
body .jx-sec-h h2{font-family:var(--ff);font-size:15px;font-weight:600;letter-spacing:0!important;margin:0;color:var(--ink)}
body .jx-sec-sub{font-size:12px;color:var(--mut2)}
/* running now — a clean list per set */
body .jx-desk{display:grid;grid-template-columns:repeat(auto-fit,minmax(540px,1fr));gap:12px;align-items:start}   /* v7.206.2: two columns from a 1100 px content width (1366 / 1440 / 1920 desktops); cards keep their own height */
body .jx-set{background:var(--s1);border:1px solid var(--ln);border-radius:8px!important;overflow:hidden}
body .jx-set-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 16px 9px;border-bottom:1px solid var(--ln2)}   /* v7.206.2: the header wraps inside a narrow set card instead of pushing the plan figures out of it */
body .jx-set-name{font-size:14px;font-weight:650;white-space:nowrap}
body .jx-set-unit{font-size:12px;color:var(--mut2);white-space:nowrap}
body .jx-grow{flex:1}
body .jx-state{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px!important;background:#F0F1F2;color:var(--mut)}
body .jx-state i{width:6px;height:6px;border-radius:50%!important;background:#A6AEB5}
body .jx-state.running{background:var(--run2);color:var(--run)}body .jx-state.running i{background:var(--run)}
body .jx-state.paused{background:var(--warn2);color:var(--warn)}body .jx-state.paused i{background:var(--warn)}
body .jx-state.stopped{background:var(--bad2);color:var(--bad)}body .jx-state.stopped i{background:var(--bad)}
body .jx-kv{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--mut)}
body .jx-kv em{font-style:normal}
body .jx-kv b{font-family:var(--ff);font-size:13.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
body .jx-kv.bad b{color:var(--bad)}
body .jx-kv.wide{min-width:0;flex-wrap:wrap}
body .jx-of{font-size:12px;color:var(--mut2)}
body .jx-bar{display:inline-block;width:72px;height:4px;background:var(--ln2);border-radius:2px!important;overflow:hidden;margin-left:8px;vertical-align:middle}
body .jx-bar i{display:block;height:100%;background:var(--run)}
body .jx-mcs{padding:0}
body .jx-mc{display:grid;grid-template-columns:12px 100px 110px 150px 1fr 64px 44px;align-items:center;gap:10px;padding:6px 16px;font-size:13px;border-top:1px solid var(--ln2)}
body .jx-mc:first-child{border-top:0}
body .jx-mc:hover{background:var(--s2)}
body .jx-led{width:7px;height:7px;border-radius:50%!important;background:#C8CDD2}
body .jx-mc.running .jx-led{background:var(--run);box-shadow:0 0 0 3px var(--run2)}
body .jx-mc.stopped .jx-led{background:var(--bad)}
body .jx-mc.idle .jx-led{background:#D9B36A}
body .jx-mc-name{font-weight:600}
body .jx-mc-st{font-size:12px;color:var(--mut);text-transform:capitalize}
body .jx-mc.running .jx-mc-st{color:var(--run)}body .jx-mc.stopped .jx-mc-st{color:var(--bad)}
body .jx-mc-op,body .jx-mc-job{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink2)}
body .jx-dim{color:var(--mut2)}
body .jx-num{font-family:var(--fm);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
body .jx-num.dim{color:var(--mut2)}body .jx-num.bad{color:var(--bad)}
body .jx-set-plan{display:flex;flex-wrap:wrap;gap:4px 16px;padding:7px 16px;border-top:1px solid var(--ln2);font-size:12px;color:var(--mut)}
body .jx-set-plan b{color:var(--ink);font-weight:600}
body .jx-set-plan .warn{color:var(--warn)}
body .jx-set-ctl{padding:8px 16px;border-top:1px solid var(--ln2)}
body .jx-set-foot{padding:7px 16px 8px;border-top:1px solid var(--ln2);font-size:12px;color:var(--mut2);background:var(--s2)}
body .jx-empty{padding:14px;border:1px dashed var(--ln);border-radius:8px!important;color:var(--mut);font-size:13px;background:var(--s1)}
/* production queue — one surface, a list, no nested cards */
body .jx-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--ln);border-bottom:1px solid var(--ln2);border-radius:8px 8px 0 0!important;padding:8px 12px;margin:0!important;box-shadow:none}
body .jx-toolbar .f{flex:0 0 auto;display:flex;align-items:center;gap:8px}
body .jx-toolbar .f .lbl{margin:0;font-size:12px}
body #main .jx-toolbar input:not([type=checkbox]){height:30px;min-height:30px;font-size:13px;width:300px;padding-left:30px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398A0A7' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='m20 20-4.5-4.5'/%3E%3C/svg%3E") no-repeat 9px center/14px}
body .grpbox{background:var(--s1);border:1px solid var(--ln);border-top:0;border-radius:0!important;margin:0;box-shadow:none}
body .grpbox:last-of-type{border-radius:0 0 8px 8px!important}
body .grphd{padding:7px 12px;background:var(--s2);border-bottom:1px solid var(--ln2);gap:10px}
body .grphd:hover{background:#F3F3F1}
body .grpname{font-size:13px;font-weight:600;color:var(--ink)}
body .grpstat{font-family:var(--ff);font-size:12px;color:var(--mut)}
body .grpbody{padding:0;background:var(--s1);border-top:0}
body .jq-order{border-top:1px solid var(--ln)}
body .jq-order:first-child{border-top:0}
body .jq-oh{display:flex;align-items:center;gap:10px;padding:10px 14px 4px}
body .jq-pri{width:4px;height:16px;border-radius:2px!important;background:#C9CED3;flex:0 0 4px}
body .jq-pri.High{background:var(--warn)}body .jq-pri.Urgent{background:var(--bad)}
body .jq-ono{font-family:var(--ff);font-weight:650;font-size:14px;color:var(--ink)}
body .jq-cust{font-weight:500;font-size:13px;color:var(--ink2)}
body .jq-meta{font-size:12px;color:var(--mut2)}
body .jq-due{font-size:12px;color:var(--mut)}
body .jq-due::before{content:'·';margin-right:8px;color:var(--mut2)}
body .jq-due.late{color:var(--bad);font-weight:600}
body .jq-sp{flex:1}
body .jq-kv{display:flex;align-items:baseline;gap:5px;font-size:12px;color:var(--mut)}
body .jq-kv em{font-style:normal}
body .jq-kv b{font-family:var(--ff);font-size:14px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
body .jq-kv.ok b{color:var(--run)}
body .jq-lnk{background:none;border:0;padding:2px 4px;font:inherit;font-size:12.5px;font-weight:500;color:var(--act);cursor:pointer}
body .jq-lnk:hover{text-decoration:underline}
body .jq-prod{padding:0 14px 10px 28px}
body .jq-ph{display:flex;align-items:baseline;gap:8px;padding:4px 0 4px}
body .jq-pname{font-size:13px;font-weight:600;color:var(--ink2)}
body .jq-tag{font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px!important;border:0;color:var(--ink2);background:#F0F1F2}
body .jq-tag.fin{color:#9A7424;background:#FBF1DC}
body .jq-pspec{font-size:12px;color:var(--mut2)}
body .jq-prod .tw{border:0;border-radius:0!important;overflow-x:auto}
body .jq-t{width:100%;border-collapse:collapse;font-size:13px;min-width:0}
body .jq-t th{background:none;font-size:11.5px;font-weight:500;letter-spacing:0!important;text-transform:none;color:var(--mut2);padding:5px 8px;border-bottom:1px solid var(--ln);white-space:nowrap}
body .jq-t td{padding:7px 8px;border-bottom:1px solid var(--ln2);vertical-align:middle;white-space:nowrap}
body .jq-t tr:last-child td{border-bottom:0}
body .jq-t tbody tr:hover td{background:#F9FAFB}
body .jq-t td.n,body .jq-t th.n{text-align:right;font-family:var(--fm);font-size:12.5px;font-variant-numeric:tabular-nums}
body .jq-t th.n{font-family:var(--ff);font-size:11.5px}
body .jq-t td.dim{color:var(--mut2)}body .jq-t td.bad{color:var(--bad)}body .jq-t td.ok{color:var(--run)}
body .jq-pend{font-weight:700;color:var(--ink)}
body .jq-done td{color:var(--mut2)}
body .jq-mem{font-weight:600}
body .jq-mdot{display:inline-block;width:8px;height:8px;border-radius:2px!important;margin-right:8px;vertical-align:0}
body .jq-spec{font-weight:400;color:var(--mut2);margin-left:6px;font-size:12px}
body .jq-mc{font-size:12.5px;color:var(--ink2)}
body .jq-plan{display:inline-flex;flex-direction:column;line-height:1.25;margin-right:10px}
body .jq-plan b{font-size:12.5px;font-weight:600;color:var(--act)}
body .jq-plan i{font-style:normal;font-size:11.5px;color:var(--mut2)}
body .jq-plan.noset b{color:var(--warn)}
body .jq-noplan{font-size:12px;color:var(--warn)}
body .jq-dim{color:var(--mut2)}
body .jq-prog{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px}
body .jq-bar{display:block;width:60px;height:3px;background:var(--ln2);border-radius:2px!important;overflow:hidden}
body .jq-bar i{display:block;height:100%;background:var(--run)}
body .jq-acth{text-align:right}
/* actions: one primary, the rest quiet text actions — never wrapping */
body .jq-act{text-align:right;white-space:nowrap!important;width:1%}
body .jq-act>*{margin-left:6px;vertical-align:middle}
body .jq-act .btn.amber{min-height:26px;padding:3px 11px}
body .jq-act .btn.ok,body .jq-act .btn.ghost{background:none;border:0;padding:3px 4px;min-height:0;color:var(--act);font-weight:500}
body .jq-act .btn.ok{color:var(--run)}
body .jq-act .btn.ok:disabled,body .jq-act .btn.ghost:disabled{color:var(--mut2);opacity:1}
body .jq-act .btn.ghost:hover:not(:disabled),body .jq-act .btn.ok:hover:not(:disabled){text-decoration:underline;background:none}
body .jq-act .btn.ghost.sm:last-child{color:var(--mut)}
body .jq-units td{padding:2px 8px 8px 30px;font-size:12px;color:var(--mut)}
body .jq-units span{margin-right:16px}
body .showmore{padding:10px 0}
body .card>h3::before,body .kpi::after{display:none}
/* fit: the queue fits 1440 without a scrollbar; toolbar controls compact */
body #main .jx-toolbar input:not([type=checkbox]){height:30px!important;min-height:30px!important;font-size:13px!important;min-width:0!important;width:300px!important;padding:4px 10px 4px 30px!important}
body #main .jx-toolbar select{height:30px!important;min-height:30px!important;width:auto!important}
body .jx-toolbar .f .lbl{white-space:nowrap}
body .grpbody .jq-order{margin:0;border-left:0;box-shadow:none}
body .jq-prod{padding:0 14px 10px 18px}
body .jq-t th,body .jq-t td{padding-left:6px;padding-right:6px}
body .jq-plan i{display:block}
body .grpbody{border-left:0!important;margin:0!important;padding:0!important}
body .jq-prod{padding:0 12px 10px 16px}
body .jq-prog .jq-bar{width:52px}
body .jq-act>*{margin-left:4px}
body .jq-t td.jq-act,body .jq-t th.jq-acth{padding-right:2px}

body,body *{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"zero" 0}

/* soft palette details */
body .jx-mc.idle .jx-led{background:#CFC3A6}
body .jq-tag.fin{color:var(--warn);background:var(--warn2)}
body .jq-plan.noset b,body .jq-noplan{color:var(--warn)}

/* =====================================================================================
   JENIL DESIGN SYSTEM — shared components for every screen (rollout)
   ===================================================================================== */
/* progress bars: soft sage (amber = attention) */
.bar{height:6px!important;background:#ECEEEF!important;border-radius:999px!important}
.bar i{background:#6FA488!important;border-radius:999px!important}
.bar.w i{background:#D4A04A!important}
/* page header area */
#main h1,#main .h1{font-family:var(--ff);font-size:20px;font-weight:650;letter-spacing:0}
/* generic tabs (every page) */
#main .tabs{border-bottom:1px solid var(--ln);gap:4px;margin:0 0 12px}
#main .tabs .tab{padding:8px 12px 9px;font-size:13px;font-weight:500;color:var(--mut);background:none!important;border:0;border-bottom:2px solid transparent;border-radius:0!important;margin-bottom:-1px;box-shadow:none}
#main .tabs .tab:hover{color:var(--ink)}
#main .tabs .tab.on{color:var(--ink);font-weight:600;border-bottom-color:var(--act);background:none!important}
.tab-n{background:#F0F1F2!important;color:var(--mut)!important;font-size:11px;font-weight:500}
/* cards: white, hairline, restrained radius, no decoration */
.card{background:var(--s1)!important;border:1px solid var(--ln)!important;border-radius:8px!important;box-shadow:none!important;margin-bottom:12px}
.card>h3,.modal>h3{background:var(--s1)!important;color:var(--ink)!important;font-family:var(--ff)!important;font-size:14px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;padding:10px 14px!important;border-bottom:1px solid var(--ln2)!important}
.card>h3::before{display:none!important}
.card .pad,.card>.pad{padding:12px 14px}
/* KPIs: flat, white, number first, soft colour only on the figure */
.kpi{background:var(--s1)!important;border:1px solid var(--ln)!important;border-left:1px solid var(--ln)!important;border-radius:8px!important;box-shadow:none!important;padding:11px 14px!important}
.kpi::after{display:none!important}
.kpi label{font-family:var(--ff)!important;font-size:12px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--mut)!important;display:flex;align-items:center;gap:6px}
.kpi label::before{content:'';width:6px;height:6px;border-radius:50%!important;background:#C3C9CE;flex:0 0 6px}
.kpi.a label::before{background:#D4A04A}.kpi.g label::before{background:#6FA488}.kpi.r label::before{background:#C58B86}.kpi.b label::before{background:#7F9CB8}
.kpi .v{font-family:var(--ff)!important;font-size:22px!important;font-weight:650!important;color:var(--ink)}
.kpi.g .v{color:var(--run)}.kpi.r .v{color:var(--bad)}.kpi.b .v{color:var(--info)}.kpi.a .v{color:#8A6A2A}
.kpi .n,.kpi small{font-size:11.5px;color:var(--mut2)}
.kpi.on,.kpi.sel,.kpi[aria-pressed=true]{border-color:#C9A15A!important;box-shadow:inset 0 -2px 0 #D4A04A!important}
/* tables */
table{border-collapse:collapse}
#main th,.modal th{background:var(--s2)!important;font-family:var(--ff)!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--mut)!important;padding:7px 10px!important;border-bottom:1px solid var(--ln)!important;white-space:nowrap}
#main td,.modal td{padding:7px 10px!important;border-bottom:1px solid var(--ln2)!important;font-size:13px}
#main tbody tr:hover td{background:#F9FAFA}
#main td.n,#main th.n,.modal td.n,.modal th.n{text-align:right;font-family:var(--ff)!important;font-variant-numeric:tabular-nums}
.tw{border-radius:0!important}
/* filters / forms */
#main .filters{gap:8px 12px;margin-bottom:12px;align-items:flex-end}
#main .lbl,.modal .lbl,#main label.lbl,.field .lbl{font-family:var(--ff)!important;font-size:11.5px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--mut)!important}
#main input:not([type=checkbox]):not([type=radio]):not([type=range]),#main select,#main textarea,.modal input:not([type=checkbox]):not([type=radio]),.modal select,.modal textarea{min-height:32px;height:auto;padding:5px 10px;font-size:13px;border:1px solid var(--ln)!important;border-radius:5px!important;background:#fff!important;box-shadow:none}
#main textarea,.modal textarea{min-height:64px}
#main input:focus,#main select:focus,#main textarea:focus,.modal input:focus,.modal select:focus,.modal textarea:focus{border-color:var(--act)!important;box-shadow:0 0 0 3px var(--act2)!important;outline:none}
/* buttons everywhere */
.btn{border-radius:5px!important;font-family:var(--ff);font-weight:500;font-size:13px;min-height:32px;padding:5px 13px;box-shadow:none!important;letter-spacing:0;text-transform:none}
.btn.sm{min-height:26px;padding:3px 10px;font-size:12px}
.btn.big{min-height:40px;font-size:14.5px}
.btn.amber{background:var(--act)!important;border:1px solid var(--act)!important;color:#fff!important;font-weight:600;background-image:none!important}
.btn.amber:hover:not(:disabled){background:#28577C!important}
.btn.ghost{background:#fff!important;border:1px solid var(--ln)!important;color:var(--ink2)!important}
.btn.ghost:hover:not(:disabled){background:var(--s2)!important;border-color:#D2D6DA!important}
.btn.ok{background:#fff!important;border:1px solid #CFE3D6!important;color:var(--run)!important}
.btn:disabled{opacity:.42}
/* chips */
.tag,.chip{border-radius:999px!important;font-family:var(--ff);font-size:11.5px;font-weight:500;padding:2px 9px;text-transform:none;letter-spacing:0}
.pri{border-radius:2px!important}
/* groups / accordions */
.grpbox,.acc-item{border:1px solid var(--ln)!important;border-radius:8px!important;box-shadow:none!important}
.grphd,.acc-hd{background:var(--s1)!important}
.grphd:hover,.acc-hd:hover{background:var(--s2)!important}
.acc-title,.grpname{font-family:var(--ff)!important;font-size:13.5px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
.acc-item.open .acc-hd{background:var(--s2)!important;border-bottom:1px solid var(--ln2)}
.acc-body,.grpbody{background:var(--bg)!important}
/* alerts */
.al{border-radius:6px!important;box-shadow:none!important;font-size:13px}
/* dialogs */
#mask.on{background:rgba(29,35,40,.38)!important}
.modal{border-radius:10px!important;border:1px solid var(--ln);box-shadow:0 18px 48px rgba(29,35,40,.22)!important;background:var(--s1)!important}
.modal>h3 .x{background:none!important;border:0!important;color:var(--mut)!important;border-radius:5px!important}
.modal>h3 .x:hover{background:var(--s2)!important;color:var(--ink)!important}
.mfoot{background:var(--s2)!important;border-top:1px solid var(--ln2)!important}
/* empty states */
.empty{background:var(--s1)!important;border:1px dashed var(--ln)!important;border-radius:8px!important;color:var(--mut)}
.empty b,.empty h4{font-family:var(--ff)!important;font-size:14px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important}
/* misc display text that used the condensed face */
.sub,.co,.kbig,.big,.hdt{font-family:var(--ff)!important;letter-spacing:0}
/* phones: keep the rail off-canvas, compact bar */
@media(max-width:900px){body #side{left:-260px}body #side.open{left:0}}
@media(max-width:560px){#top{padding:0 8px!important;gap:8px!important}#top h2::before{display:none}#top .sub{display:none}#top .gsearch{flex:1 1 60px!important;margin-left:0}#top .who{display:none}
  .kpi .v{font-size:19px!important}#main .tabs .tab{padding:7px 10px 8px}}
/* ---- responsive: control desk + queue on tablets and phones ---- */
@media(max-width:1100px){body .jx-strip{grid-template-columns:repeat(3,1fr)}body .jx-cell:nth-child(4){border-left:0}body .jx-cell:nth-child(n+4){border-top:1px solid var(--ln2)}
  body .jx-desk{grid-template-columns:1fr}}
@media(max-width:560px){
  body #top h2::before{display:none}body #top .sub{display:none!important}body #top .who{display:none}body #top .gsearch{flex:1 1 60px!important;margin-left:0}
  body .jx-strip{grid-template-columns:1fr 1fr}body .jx-cell{border-left:0!important;border-top:1px solid var(--ln2)}body .jx-cell:first-child{grid-column:1/-1;border-top:0}body .jx-cell:nth-child(odd):not(:first-child){border-left:1px solid var(--ln2)!important}
  body .jx-cell b{font-size:20px}
  body .jx-set-h{flex-wrap:wrap;gap:6px 10px}body .jx-grow{display:none}body .jx-kv.wide{min-width:0;flex-basis:100%}
  body .jx-mc{grid-template-columns:10px 1fr auto;grid-template-areas:"led name st" "led op op" "led job job";row-gap:1px}
  body .jx-mc>.jx-led{grid-area:led}body .jx-mc>.jx-mc-name{grid-area:name}body .jx-mc>.jx-mc-st{grid-area:st}body .jx-mc>.jx-mc-op{grid-area:op;font-size:12px}body .jx-mc>.jx-mc-job{grid-area:job;font-size:12px}
  body .jx-mc>.jx-num{display:none}
  body .jx-sec-h{flex-wrap:wrap}
  body .jx-toolbar{flex-wrap:wrap}body #main .jx-toolbar input:not([type=checkbox]){width:100%!important}
  body .jq-oh{flex-wrap:wrap;row-gap:4px}body .jq-sp{display:none}
  body .jq-prod{padding:0 8px 10px 8px}body .jq-prod .tw{max-width:100%;overflow-x:auto}
  body .jq-ph{flex-wrap:wrap}
}
#main .filters label,#main .f>label,#main .f>.lbl,#main .field>label{font-family:var(--ff)!important;font-size:11.5px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--mut)!important}
#main .filters input:not([type=checkbox]):not([type=radio]),#main .filters select{height:32px!important;min-height:32px!important;font-size:13px!important}
.kpi,.kpi.a,.kpi.g,.kpi.r,.kpi.b{border-color:var(--ln)!important}
.kpi.on,.kpi.sel{border-color:#C9A15A!important}

/* dispatch card: one compact action line with a "More" menu */
.dsp-bar{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.dsp-more{position:relative;display:inline-block}
.dsp-menu{position:absolute;right:0;top:calc(100% + 4px);display:block;min-width:230px;padding:4px;background:#fff;border:1px solid #DDE2E6;border-radius:8px;box-shadow:0 10px 26px rgba(31,49,68,.16);z-index:60;white-space:normal}
.dsp-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font:inherit;font-size:13px;font-weight:500;color:#1D2328;border-radius:6px;cursor:pointer}
.dsp-menu button:hover,.dsp-menu button:focus{background:#EEF3F8;outline:none}
.dsp-menu button.danger{color:var(--red,#A94F4A)}
@media (max-width:900px){.dsp-bar{flex-wrap:wrap;white-space:normal;justify-content:flex-end}}

/* dispatch: one compact order line, click to open the size-wise details */
.dsp-sum{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;padding:9px 12px;border:1px solid #DDE2E6;border-radius:8px;background:#F7F9FB;cursor:pointer;font-size:13px;white-space:nowrap;overflow:hidden}
.dsp-sum:hover{background:#EEF3F8}.dsp-sum.open{border-color:#1F3144;background:#EEF3F8}
.dsp-sum .dsp-sum-no{color:#1F3144;min-width:120px}.dsp-sum .dsp-sum-tw{margin-left:auto;color:#6E7780;font-size:12px}
.dsp-sum-body{margin-top:10px}
@media (max-width:900px){.dsp-sum{flex-wrap:wrap;gap:4px 14px;white-space:normal}}
.dsp-actions{display:flex;justify-content:flex-end;margin:0 0 10px}
@media (max-width:900px){.dsp-actions{justify-content:flex-start}}
/* dispatch: filter bar + single-row challan summary */
.dsp-filters{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;margin:0 0 12px;font-size:12.5px;color:#6E7780}
.dsp-filters label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dsp-filters input{height:32px;padding:4px 8px;font-size:13px}
.dsp-filters .dsp-f-cust input{width:230px}
.dsp-sum{gap:14px}
.dsp-sum .dsp-sum-dsp{color:#1F3144;min-width:112px}
.dsp-sum .dsp-sum-cust{max-width:220px;overflow:hidden;text-overflow:ellipsis;color:#1D2328}
.dsp-sum .dsp-sum-no{min-width:0;color:#1F3144;font-weight:600}
@media (max-width:900px){.dsp-filters{flex-wrap:wrap;gap:8px 12px}.dsp-filters .dsp-f-cust{flex:1 1 100%}.dsp-filters .dsp-f-cust input{flex:1;width:auto;min-width:0}.dsp-sum .dsp-sum-cust{max-width:100%}}
#main .dsp-filters input{height:34px;min-height:34px;padding:4px 10px;font-size:13px;border-radius:6px}
#main .dsp-filters input[type=date]{width:150px}
@media (max-width:900px){#main .dsp-filters input[type=date]{width:auto;flex:1}#main .dsp-filters label{flex:1 1 45%}}
/* Packing Requirement — projected availability rows */
.pk-t td{vertical-align:top}.pk-sum{font-size:12px;color:#39424A;white-space:normal}.pk-sum b{color:#1D2328}

#main .pk-t{table-layout:auto}
#main .pk-t td:first-child{min-width:260px;max-width:360px;white-space:normal}
#main .pk-t th{white-space:normal;min-width:74px}
#main .pk-t tr.pk-row td{background:#fff}
#main .pk-t tr.pk-green td{background:#EEF7F1}#main .pk-t tr.pk-amber td{background:#FBF5E8}#main .pk-t tr.pk-red td{background:#FBEDEC}
#main .pk-t tr.pk-green td:first-child{box-shadow:inset 4px 0 0 #2E7D4F}#main .pk-t tr.pk-amber td:first-child{box-shadow:inset 4px 0 0 #9A7424}#main .pk-t tr.pk-red td:first-child{box-shadow:inset 4px 0 0 #A94F4A}
/* Packing Spec components + checklist packing panel */
.pk-comps{border:1px solid #DDE2E6;border-radius:8px;padding:6px 10px;margin:8px 0}
.pk-comp{display:grid;grid-template-columns:120px 1fr 64px 150px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #EEF1F3}
.pk-comp:last-child{border-bottom:0}.pk-comp-l{font-weight:700;color:#1F3144}.pk-comp-sel{display:flex;gap:6px;align-items:center}.pk-comp-sel select{flex:1;min-width:0}
.pk-comp-img img{width:56px;height:56px;object-fit:cover;border-radius:6px;border:1px solid #DDE2E6;cursor:zoom-in;display:block}
.pk-comp-act{display:flex;gap:8px;flex-wrap:wrap}
.pk-sugg{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
.pk-panel{border:1px solid #E4D5B0;background:#FFFBF2;border-radius:8px;padding:8px 10px;margin:6px 0 10px}
.pk-line{display:flex;gap:10px;font-size:13px;padding:2px 0}.pk-line span{flex:0 0 110px}
.pk-imgs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.pk-imgs figure{margin:0;cursor:zoom-in;text-align:center}.pk-imgs img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid #DDE2E6}.pk-imgs figcaption{font-size:10px;color:#6E7780;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.pk-comp{grid-template-columns:1fr 64px;}.pk-comp-l{grid-column:1/-1}.pk-comp-act{grid-column:1/-1}}
.pk-chk{display:inline-flex;align-items:center;gap:4px;border:1px solid #DDE2E6;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}
/* v7.171.1 release-print plan picker: the whole row is the target */
.rp-pick tbody tr{cursor:pointer;user-select:none}.rp-pick tbody tr:hover td{background:#F4F7FA}.rp-pick tbody tr.on td{background:#EEF7F1}
.rp-pick input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#1F3144}
/* v7.172 dispatch list grouped by company */
.dsp-co{margin:0 0 8px}.dsp-co-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 12px;border:1px solid var(--line,#DDE2E6);border-radius:8px;background:#F7F9FB;cursor:pointer;user-select:none}
.dsp-co-h.open{background:#EEF3F8;border-color:#C9D4DE}.dsp-co-h b{font-size:14px}.dsp-co-tw{font-size:11px;color:#5B6570;width:12px}.dsp-co>.card{margin:6px 0 0 14px}
/* v7.178: compact "Show" toggles — same height / radius / border / font as the filter selects; one look everywhere */
#main .filters .f.f-togs{flex:0 0 auto!important;min-width:0!important;max-width:none!important;width:auto}
.tg-row{display:flex;gap:6px;flex-wrap:nowrap}
.tg{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid rgb(228,230,232);border-radius:5px;background:#fff;font-size:13px;line-height:1;white-space:nowrap;cursor:pointer;user-select:none;margin:0;box-sizing:border-box;color:inherit;font-weight:500}
.tg input[type=checkbox]{margin:0;width:14px;height:14px;flex:0 0 auto;accent-color:#1F3144}
.tg.on{border-color:#1F3144;background:#EEF3F8}
body #main .jx-toolbar .tg{height:30px}
@media (max-width:760px){ #main .filters .f.f-togs{flex:1 1 100%!important} .tg-row{flex-wrap:wrap} }

/* v7.187 Packing → Packing Requirement: order-wise review cards and the attention dot */
.pdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#C8432E;margin-left:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(200,67,46,.55);animation:pdot 1.6s ease-out infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 rgba(200,67,46,.55)}70%{box-shadow:0 0 0 7px rgba(200,67,46,0)}100%{box-shadow:0 0 0 0 rgba(200,67,46,0)}}
.pr-card{border:1px solid var(--line2);border-left:4px solid #2E7D4F;border-radius:var(--r);background:var(--card);padding:10px 12px;margin-bottom:10px}
.pr-card.short{border-left-color:#A94F4A}
.pr-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.pr-new{margin-left:8px;font-size:11px;font-weight:700;color:#C8432E;letter-spacing:.04em}
.pr-line{border-top:1px dashed var(--line);padding:6px 0}
.pr-lh{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.pr-qty{margin-left:auto}
.pr-m{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:3px 0 3px 10px}
.pr-mn{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.pr-short{color:#fff;background:#A94F4A;border-radius:6px;padding:1px 8px;font-weight:700}.pr-ok{color:#2E7D4F;font-weight:700}
.pr-warn{color:#A94F4A;font-weight:700;padding:2px 0 2px 10px}
@media(max-width:700px){.pr-mn{width:100%;justify-content:space-between}}
/* v7.189: Packing Requirement — one compact bar per order (Roll Forming grpbox pattern), requirement shown only when opened */
.pr-grp{margin-bottom:8px;border-left:4px solid #2E7D4F!important}.pr-grp.short{border-left-color:#A94F4A!important}
.pr-hd{flex-wrap:wrap;gap:8px 10px;padding:9px 12px}.pr-hd .grpname{font-size:14px!important}
.pr-tag{font-size:11px;padding:1px 7px;border-radius:6px}.pr-ok.pr-tag{background:#EEF7F1}
.pr-rev{font-size:11px;font-weight:700;color:#2E7D4F;letter-spacing:.04em}
.pr-meta{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pr-hd .grpstat{white-space:normal}
.pr-body{padding:4px 12px 10px 24px!important;margin:0!important;border-left:0!important}
.pr-body .pr-head{margin:4px 0 2px}
@media(max-width:640px){.pr-hd{padding:9px 10px}.pr-meta{flex-basis:100%;white-space:normal;order:5}.pr-hd .grpstat{flex-basis:100%;order:6}.pr-body{padding-left:12px!important}}


/* v7.187 Point #4: Production Planning list — whole row opens, no sideways scroll for Open */
.pl-list table{width:100%;table-layout:auto}.pl-row{cursor:pointer}.pl-row:hover td{background:#F4F7FA}.pl-row:focus{outline:2px solid var(--amber);outline-offset:-2px}
.pl-list th.pl-open,.pl-list td.pl-open{width:72px;white-space:nowrap}
@media(max-width:760px){.pl-list th.pl-open,.pl-list td.pl-open{display:none}.pl-list th:nth-child(3),.pl-list td:nth-child(3){display:none}}
/* v7.190: HOLD shown in Production Planning (list marker + order banner) */
.pl-hold{display:inline-block;margin-top:3px;font-size:11px;font-weight:800;letter-spacing:.04em;color:#fff;background:#A94F4A;border-radius:6px;padding:1px 7px;max-width:100%;white-space:normal}
.pl-hold-banner{margin:6px 0 10px}

/* ===== v7.190 mobile form fixes (approved G1–G7) — presentation only ===== */
/* G5: long modal titles wrap; the × stays on the first header row at its full size */
.modal>h3{flex-wrap:nowrap;gap:10px;min-width:0}
.modal>h3 .x{flex:0 0 auto;margin-left:auto}
/* G7: a checkbox / radio keeps its native size — the generic full-width input rule was stretching it */
input[type="checkbox"],input[type="radio"]{width:auto!important;height:auto;min-height:0;padding:0}
@media(max-width:700px){
  /* G4: plan-form material chips wrap on a phone instead of running past the modal edge (desktop keeps its one-line chips) */
  .pv .chip{white-space:normal!important;max-width:100%;line-height:1.45;text-align:left;height:auto;overflow:visible;text-overflow:clip}
  /* G1: Sales Order item rows become stacked cards — same fields, same DOM/Enter order; Product gets the full width */
  .so-items table,.so-items tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  .so-items thead{display:none}
  .so-items tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px;padding:10px 0 12px;border-bottom:1px solid var(--line2)}
  .so-items tbody td{display:block;padding:0!important;border:0!important;min-width:0;position:static!important;background:transparent!important;box-shadow:none!important}
  .so-items tbody tr{background:transparent!important}
  .so-items td[data-l="Product"],.so-items td[data-l="Delivery"]{grid-column:1/-1}
  .so-items td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
  .so-items td.so-rm{grid-column:1/-1;text-align:right}
  .so-items td.so-rm .btn{min-height:36px;padding:6px 14px}
  .so-items td.so-rm .btn::after{content:' Remove line'}
  .so-items td .small{white-space:normal!important}
  /* G2: dense entry tables inside a modal — the modal body is the only vertical scroller; the table keeps its
     columns and scrolls sideways on purpose; the name column stays readable (and pinned where it is plain text) */
  .modal .tw.dense{max-height:none!important;overflow-y:visible;overflow-x:auto}
  .modal .tw.dense table{min-width:560px}
  .modal .tw.dense td:first-child,.modal .tw.dense th:first-child{min-width:150px}
  .modal .tw.dense.names td:first-child,.modal .tw.dense.names th:first-child{position:sticky;left:0;z-index:2;background:var(--card);box-shadow:2px 0 0 var(--line2)}
  .modal .tw.dense td.item,.modal .tw.dense td .itemlabel{max-width:none;white-space:normal;overflow:visible}
  /* G3: Production Planning plan rows — stacked, with the action buttons in a wrapped row under the plan; the card's
     inner scroll box is released so the page scrolls and nothing hides under the fixed bottom tabs */
  .card .tw.plans-t{max-height:none!important;overflow:visible}
  .plans-t table,.plans-t tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  .plans-t thead{display:none}
  .plans-t tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line2);width:100%;max-width:100%}
  .plans-t tbody td{display:block;padding:0!important;border:0!important;min-width:0;max-width:100%;text-align:left!important;white-space:normal!important;position:static!important;background:transparent!important;box-shadow:none!important}
  .plans-t tbody tr{background:transparent!important}
  .plans-t td[data-l="Plan"],.plans-t td.plan-acts{grid-column:1/-1}
  .plans-t td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
  .plans-t td.plan-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px!important}
  .plans-t td.plan-acts .btn{min-height:40px}
  .plans-t tbody tr:last-child{border-bottom:0;padding-bottom:18px}
  /* G6: iOS zooms into controls below 16px — the three confirmed small controls (and any other) read 16px on a phone */
  .modal select,.modal input:not([type=checkbox]):not([type=radio]),.modal textarea,.tabs input,#addreq{font-size:16px!important}
}

/* v7.190: Packing Requirement — ORDER PACKING TOTAL block above the size-wise detail (informational aggregation) */
.pr-tot{border:1px solid var(--line2);border-radius:8px;background:var(--s2,#F7F9FB);padding:8px 10px;margin:6px 0 10px}
.pr-tot-h{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--ink);margin-bottom:4px}
.pr-tot-r{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:4px 0;border-top:1px dashed var(--line)}
.pr-tot-r.short .pr-tot-m b{color:#A94F4A}
.pr-tot-n{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline}
.pr-tot-f{margin-top:4px}
@media(max-width:700px){.pr-tot-n{width:100%;justify-content:space-between}.pr-tot{padding:8px}}

/* ===== v7.191 Management / Factory Control Dashboard (read only) — presentation only ===== */
.mg{max-width:1500px}
.mg-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.mg-ask{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.01em}
.mg-upd{display:flex;align-items:center;gap:10px}
.mg-att{display:flex;flex-direction:column}
.mg-att-r{display:grid;grid-template-columns:96px minmax(0,1fr) 18px;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ln2);padding:9px 14px;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.mg-att-r:last-child{border-bottom:0}
.mg-att-r:hover{background:var(--s2)}
.mg-att-k{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:3px 7px;text-align:center;color:#5D6A75;background:#EEF1F3;white-space:nowrap}
.mg-att-r.k-machine .mg-att-k,.mg-att-r.k-overdue .mg-att-k,.mg-att-r.k-hold .mg-att-k{color:#8F3F3A;background:var(--bad2)}
.mg-att-r.k-duetoday .mg-att-k,.mg-att-r.k-packing .mg-att-k,.mg-att-r.k-material .mg-att-k{color:#7A5A16;background:var(--warn2)}
.mg-att-r.k-wip .mg-att-k,.mg-att-r.k-ncr .mg-att-k,.mg-att-r.k-idle .mg-att-k{color:#2F5F86;background:var(--act2)}
.mg-att-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.mg-att-t b{font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-att-w{font-size:12.5px;color:var(--ink2);white-space:normal}
.mg-att-go{color:var(--mut2);font-size:18px;text-align:right}
.mg-kpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-bottom:12px}
.mg-kpis .kpi{min-width:0}
.mg-kpis .kpi .v{font-size:24px!important;line-height:1.15}
.mg-kpis .kpi .n{white-space:normal}
.mg .kpi label{white-space:normal!important;line-height:1.25}
.mg-txt{font-size:17px;line-height:1.3}
.mg-kpis4{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px 14px 4px;margin-bottom:0}
.mg-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px 14px}
.mg-stage{display:flex;flex-direction:column;gap:6px;background:var(--s2);border:1px solid var(--ln);border-radius:8px;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.mg-stage:hover{border-color:#C9A15A}
.mg-stage-n{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.mg-stage-v,.mg-stage-r{display:flex;align-items:baseline;gap:6px}
.mg-stage-v b{font-size:22px;font-weight:650;color:var(--run)}
.mg-stage-r b{font-size:15px;font-weight:650;color:var(--mut2)}
.mg-stage-r.bad b{color:var(--bad)}
.mg-stage i{font-style:normal;font-size:11.5px;color:var(--mut2)}
.mg-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 14px 8px}
.mg-count{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--s2);border:1px solid var(--ln);border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;color:var(--ink);text-align:left;min-width:0;min-height:56px}
.mg-count:hover{border-color:#C9A15A}
.mg-count b{font-size:20px;font-weight:650;line-height:1.1}
.mg-count span{font-size:11.5px;color:var(--mut);line-height:1.25}
.mg-count.g b{color:var(--run)}.mg-count.r b{color:var(--bad)}.mg-count.a b{color:#8A6A2A}
.mg-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 14px 10px}
.mg-list{display:flex;flex-direction:column;border-top:1px solid var(--ln2)}
.mg-li{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--ln2);padding:8px 14px;cursor:pointer;font:inherit;color:var(--ink);font-size:12.5px;min-height:40px}
.mg-li:last-child{border-bottom:0}
.mg-li:hover{background:var(--s2)}
.mg-li-a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mg-li-b{flex:0 0 auto;text-align:right;white-space:nowrap}
.mg-t table{width:100%}
.mg-t td,.mg-t th{white-space:nowrap}
.mg-scroll{overflow-x:auto}
.mg-foot{padding:4px 2px 24px}
@media(max-width:1500px){.mg-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1100px){.mg-g2{grid-template-columns:1fr}}
@media(max-width:700px){
  .mg-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mg-kpis4{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 10px 2px}
  .mg-kpis .kpi .v{font-size:21px!important}
  .mg-stages{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}
  .mg-stage-v b{font-size:19px}
  .mg-counts{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px 10px 6px}
  .mg-att-r{grid-template-columns:minmax(0,1fr) 14px;gap:4px 8px;padding:9px 10px}
  .mg-att-k{grid-column:1;justify-self:start;margin-bottom:2px}
  .mg-att-t{grid-column:1}
  .mg-att-t b{white-space:normal}
  .mg-att-go{grid-column:2;grid-row:1/3}
  .mg-li{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 10px}
  .mg-li-a{white-space:normal}
  .mg-li-b{text-align:left;white-space:normal}
  .mg-line{flex-direction:column;gap:4px;padding:4px 10px 10px}
  /* the two order-wise tables become stacked cards (the G1/G3 pattern); the material table keeps its columns and scrolls sideways on purpose */
  .mg-t:not(.mg-scroll) table,.mg-t:not(.mg-scroll) tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  .mg-t:not(.mg-scroll) thead{display:none}
  .mg-t:not(.mg-scroll) tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px 10px;padding:10px 10px;border-bottom:1px solid var(--line2);width:100%;max-width:100%}
  .mg-t:not(.mg-scroll) tbody td{display:block;padding:0!important;border:0!important;min-width:0;max-width:100%;text-align:left!important;white-space:normal!important;background:transparent!important}
  .mg-t:not(.mg-scroll) td[data-l="SO"],.mg-t:not(.mg-scroll) td[data-l="Reason"]{grid-column:1/-1}
  .mg-t:not(.mg-scroll) td[data-l="Customer"]{grid-column:1/3}
  .mg-t:not(.mg-scroll) td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
  .mg-scroll table{min-width:720px}
  .mg-scroll td:first-child,.mg-scroll th:first-child{position:sticky;left:0;z-index:2;background:var(--s1);box-shadow:2px 0 0 var(--ln2);min-width:150px;white-space:normal}
  .mg-top{margin-bottom:10px}
  .mg-ask{font-size:14px}
  .mg-foot{padding-bottom:80px}
}

/* ===== v7.191 Purchase Worklist — presentation only ===== */
.wl-counts{padding:0;margin-bottom:12px;grid-template-columns:repeat(6,minmax(0,1fr))}
.wl-count.on{border-color:#C9A15A!important;box-shadow:inset 0 -2px 0 #D4A04A}
.wl-count.wl-info{cursor:default}.wl-count.b b{color:var(--act)}
.wl-filters{align-items:flex-end;gap:10px 14px}
.wl-filters .wl-tabs{margin:0;flex:1 1 100%}
.wl-acts{align-self:flex-end;margin-left:auto}
.wl-row.short td{background:transparent}
.card .tw.wl-t{max-height:none!important;overflow:visible;overflow-x:auto}
.wl-t>table,.wl-t>table>tbody>tr>td{min-width:0!important}.wl-t>table{width:100%;table-layout:fixed}
.wl-t>table>tbody>tr>td{overflow-wrap:anywhere}
.wl-t .tag{white-space:nowrap}
.wl-t td,.wl-t th{vertical-align:top}
.wl-t td[data-l="Last purchase"],.wl-t td[data-l="Last purchase"] *{white-space:normal!important;overflow-wrap:anywhere}
.wl-t td[data-l="Material"]{white-space:normal}
.wl-t td[data-l="Material"] .small{white-space:normal}
.wl-t td[data-l="To buy"],.wl-t td[data-l="Stock · min keep"]{white-space:nowrap}
.wl-t td[data-l="On PO"],.wl-t td[data-l="Need by · order by"]{white-space:normal}
.wl-t .wl-exp{text-align:left;white-space:normal}
.wl-t .wl-acts-c{white-space:normal}
.wl-t .wl-acts-c .btn{padding:4px 8px}
.wl-exp{background:transparent;border:0;padding:0;font:inherit;color:var(--act);cursor:pointer;text-align:right;font-weight:650}
.wl-sub td{background:var(--s2)!important;padding:8px 14px!important}
.wl-subbox{border:1px solid var(--ln2);border-radius:8px;background:var(--s1);padding:8px 10px}
.wl-lines table{width:100%}
.wl-sups{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding:4px 0}
.wl-sup{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;cursor:pointer}
.wl-sup input{margin-top:3px}
.wl-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;margin-bottom:12px}
.wl-fact{display:flex;flex-direction:column;gap:1px;font-size:13px}
@media(max-width:1300px){.wl-counts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .wl-counts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wl-filters .f{flex:1 1 45%}.wl-acts{flex:1 1 100%;margin-left:0;flex-wrap:wrap}
  .wl-facts{grid-template-columns:1fr}
  .wl-sup{font-size:14px}
  /* the worklist table and the modal/line tables become stacked cards (the G1/G3 pattern) */
  .wl-t table,.wl-t tbody,.wl-lines table,.wl-lines tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  .wl-t thead,.wl-lines thead{display:none}
  .wl-t>table{table-layout:auto}
  .wl-t>table>tbody>tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;padding:10px 8px;border-bottom:1px solid var(--line2);width:100%;max-width:100%}
  .wl-lines tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:8px 4px;border-bottom:1px solid var(--line2)}
  .wl-t td,.wl-lines td{display:block;padding:0!important;border:0!important;min-width:0;max-width:100%;text-align:left!important;white-space:normal!important;background:transparent!important}
  .wl-t td[data-l="Material"],.wl-t td[data-l="Last purchase"],.wl-t td[data-l="Actions"],.wl-t td[data-l="Need by · order by"],.wl-lines td[data-l="PO"],.wl-lines td[data-l="Supplier"]{grid-column:1/-1}
  .wl-t td[data-l="Pick"]{grid-column:1/-1}.wl-t td[data-l="Pick"]:empty{display:none}
  .wl-t td[data-l]:not([data-l="Pick"]):not([data-l="Material"])::before,.wl-lines td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
  .wl-t tr.wl-sub{display:block;padding:0 0 10px}
  .wl-t tr.wl-sub>td{padding:0!important}
  .wl-exp{text-align:left}
  .wl-acts-c .btn{min-height:38px}
  .wl-t td:last-child:not([data-l]){grid-column:1/-1}
  .modal .wl-mt.tw.dense table{min-width:0}
  .modal .wl-mt table,.modal .wl-mt tbody{display:block;width:100%!important}
  .modal .wl-mt thead{display:none}
  .modal .wl-mt tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;padding:8px 0;border-bottom:1px solid var(--line2)}
  .modal .wl-mt td{display:block;padding:0!important;border:0!important;min-width:0;white-space:normal!important}
  .modal .wl-mt td[data-l="Material"],.modal .wl-mt td[data-l="Supplier"],.modal .wl-mt td[data-l="Spec"]{grid-column:1/-1}
  .modal .wl-mt td[data-l]:not([data-l="Material"])::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:2px}
  .modal .wl-mt td input,.modal .wl-mt td select{width:100%!important;min-width:0!important}
}

/* ===== v7.191 Traceability lookup — presentation only ===== */
.tr-bar{display:flex;gap:8px;align-items:center;padding:12px 14px 6px;flex-wrap:wrap}
.tr-bar .tr-q{flex:1 1 320px;min-width:0;font-size:15px;padding:9px 12px}
.tr-banner{margin:0 0 12px}
.tr-head{background:var(--navy);color:#fff;border-radius:12px;padding:10px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.tr-sec{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:18px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--acc)}
.tr-sec .small{text-transform:none;letter-spacing:0;font-weight:500}
.tr-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;background:var(--s1);border:1px solid var(--ln);border-radius:8px;padding:10px 14px;margin-bottom:12px}
.tr-fact{display:flex;flex-direction:column;gap:1px;font-size:13px;min-width:0;overflow-wrap:anywhere}
.tr-hits{display:flex;flex-direction:column}
.tr-hit{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--ln2);padding:9px 14px;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.tr-hit:hover{background:var(--s2)}
.tr-hit-a{font-size:13.5px;overflow-wrap:anywhere}
.tr-hit-b{font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.tr-pack{padding:8px 14px 4px;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
.tr-t td,.tr-t th{vertical-align:top}
@media(max-width:1100px){.tr-g3{grid-template-columns:1fr 1fr}.tr-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .tr-g2,.tr-g3{grid-template-columns:1fr}
  .tr-facts{grid-template-columns:1fr;padding:10px}
  .tr-bar{padding:10px 10px 4px}.tr-bar .btn{flex:1 1 auto;min-height:40px}
  .tr-head{padding:10px 12px}
  /* the trace tables stack into cards (G1/G3 pattern); long identifiers wrap */
  .card .tw.tr-t{max-height:none!important;overflow:visible}
  .tr-t table,.tr-t tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  .tr-t thead{display:none}
  .tr-t tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:9px 10px;border-bottom:1px solid var(--line2);width:100%;max-width:100%}
  .tr-t tbody td{display:block;padding:0!important;border:0!important;min-width:0;max-width:100%;text-align:left!important;white-space:normal!important;background:transparent!important;overflow-wrap:anywhere}
  .tr-t td:empty{display:none}
  .tr-t td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:1px}
  .tr-t td[data-l="Subject"],.tr-t td[data-l="Supplier · GRN · invoice"],.tr-t td[data-l="Source"],.tr-t td[data-l="Reason"],.tr-t td[data-l="Readings"],.tr-t td[data-l="Detail"],.tr-t td[data-l="Item"],.tr-t td[data-l="Operators"],.tr-t td[data-l="Machines"]{grid-column:1/-1}
  .tr-t td[data-l="Coil"] a{overflow-wrap:anywhere}
}
/* v7.191 — Product Technical Master V1 (Products & masters → Technical) */
.ts-pick select{max-width:360px}
.ts-head{background:var(--navy);color:#fff;border-radius:12px;padding:12px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start;margin:4px 0 8px}
.ts-head .ts-name{font-size:17px;display:block;margin:2px 0}
.ts-scope{display:flex;flex-direction:column;gap:6px;min-width:260px}
.ts-radio{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 10px;border:1px solid rgba(255,255,255,.25);border-radius:8px;cursor:pointer;min-height:40px}
.ts-radio.on{background:rgba(255,255,255,.12);border-color:var(--acc)}
.ts-radio input{margin:0}
.ts-scope select{min-height:40px}
.ts-ref{margin:0 0 10px;overflow-wrap:anywhere}
.ts-empty{padding:10px 0}
.ts-rev{border:1px solid var(--ln);border-radius:12px;padding:12px 14px;margin:8px 0 14px;background:#fff}
.ts-rev.is-cur{border-color:var(--ok);box-shadow:0 0 0 3px var(--s-ok-bg)}
.ts-rev.is-dft{border-color:#D4A04A;border-style:dashed}
.ts-rev.is-sup{opacity:.92;background:var(--s1)}
.ts-rev-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.ts-rev-h b{font-size:15px}
.ts-st{display:inline-flex;align-items:center;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:3px 10px}
.ts-cur{background:var(--s-ok-bg);color:var(--s-ok)}
.ts-dft{background:#FFF4DD;color:#8A5A00}
.ts-sup{background:var(--s2);color:var(--mut)}
.ts-sec{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:16px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--acc)}
.ts-sec .small{text-transform:none;letter-spacing:0;font-weight:500}
.ts-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;background:var(--s1);border:1px solid var(--ln);border-radius:8px;padding:10px 14px;margin-bottom:10px}
.ts-fact{display:flex;flex-direction:column;gap:1px;font-size:13px;min-width:0;overflow-wrap:anywhere}
.ts-kg{font-size:20px;font-variant-numeric:tabular-nums}
.ts-note{background:var(--s1);border-radius:8px;padding:8px 12px}
.ts-hist{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:10px;overflow:hidden}
.ts-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--ln2);padding:9px 12px;cursor:pointer;font:inherit;color:var(--ink);min-height:44px}
.ts-h:first-child{border-top:0}.ts-h:hover{background:var(--s2)}.ts-h.on{background:var(--s1);box-shadow:inset 4px 0 0 var(--acc)}
.ts-t td,.ts-t th{vertical-align:top}
.ts-t.ts-vt input{width:100%;min-width:0}
.ts-form .ts-g{gap:8px 14px}
@media(max-width:1100px){.ts-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .ts-pick{flex-direction:column;align-items:stretch;width:100%}.ts-pick input,.ts-pick select{width:100%;max-width:none}
  .ts-head{padding:12px}.ts-scope{min-width:0;width:100%}
  .ts-facts{grid-template-columns:1fr;padding:10px}
  .ts-rev{padding:10px}
  .ts-form .grid.g3{grid-template-columns:1fr!important}
  .card .tw.ts-t{max-height:none!important;overflow:visible}
  .ts-t table,.ts-t tbody{display:block;width:100%!important;min-width:0!important;max-width:100%}
  .ts-t thead{display:none}
  .ts-t tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;padding:9px 10px;border-bottom:1px solid var(--line2);width:100%;max-width:100%}
  .ts-t tbody td{display:block;padding:0!important;border:0!important;min-width:0;max-width:100%;text-align:left!important;white-space:normal!important;background:transparent!important;overflow-wrap:anywhere}
  .ts-t td:empty{display:none}
  .ts-t td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-bottom:1px}
  .ts-t td[data-l="Material"],.ts-t td[data-l="Field"],.ts-t td[data-l="Value"],.ts-t td[colspan]{grid-column:1/-1}
  .ts-h{padding:9px 10px}
}