/* BFD Computer Stitching Scheduler - v3 application layout.
   Breakpoints: phone < 768, tablet 768-1199, desktop >= 1200. Table columns react to the width of their own container,
   so the same code works at any iframe width. No dependence on viewport height units. */
:root{
  --bg:#eef1f6;--cd:#fff;--tx:#18213a;--mu:#5d6882;--bd:#d5dbe7;--ac:#22315e;
  --side:#17203d;--sidetx:#c9d2ea;--thread:#f08a24;
  --am:#2563c9;--pm:#d4580f;--al:#2a7d4f;--bad:#c0262d;--ok:#1f7a45;
  --hd:#22315e;--hdtx:#fff;--row:#f6f8fc;--sel:#fff1de;
  --hf:'Barlow Semi Condensed','Arial Narrow',Arial,sans-serif;--bf:'IBM Plex Sans',system-ui,Segoe UI,Arial,sans-serif;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--r1:4px;--r2:6px;
  --tap:44px;--rail-w:64px;--nav-w:224px;--top-h:56px;--bnav-h:60px;--sbar-h:56px;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1424;--cd:#182038;--tx:#e7ebf6;--mu:#97a2c0;--bd:#2c3659;--ac:#a9c0ff;--side:#0a0f1e;--sidetx:#a9b4d4;--am:#6b9cf0;--pm:#f08a50;--al:#5fc08a;--bad:#ff8085;--ok:#6fd49a;--hd:#26325a;--hdtx:#e7ebf6;--row:#1c2542;--sel:#3a2d1c}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;height:100%;background:var(--bg);overflow-x:clip}
body{margin:0;width:100%;max-width:100%;height:100%;min-height:100vh;overflow-x:clip;background:var(--bg);color:var(--tx);font:14px/1.5 var(--bf)}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{width:100%;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}

/* ---- top bar ---- */
.topbar{grid-column:1/-1;grid-row:1;position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:var(--sp3);height:calc(var(--top-h) + var(--safe-t));padding:var(--safe-t) var(--sp3) 0;background:var(--side);color:#fff;border-bottom:2px dashed rgba(240,138,36,.7);min-width:0}
.hb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--tap);height:var(--tap);border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:var(--r1);cursor:pointer;order:9}
.hb:hover{background:rgba(255,255,255,.16)}
.logo{display:flex;flex-direction:column;flex:none;line-height:1;white-space:nowrap}
.logo b{font:700 21px/1 var(--hf);letter-spacing:.07em}
.logo .co{display:none;margin-top:4px;font:500 9px/1 var(--bf);letter-spacing:.16em;color:var(--sidetx)}
.ap{margin:0;padding-left:var(--sp3);border-left:2px dashed rgba(240,138,36,.65);font:600 16px/1 var(--hf);letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ap .lg{display:none}
.tr{margin-left:auto;display:flex;align-items:center;gap:var(--sp2);flex:none}
.clock{display:none;font:500 13px/1.25 var(--bf);color:var(--sidetx);text-align:right;white-space:nowrap}
.sync{display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);padding:0 11px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r1);background:rgba(255,255,255,.06);color:#fff;font:500 13px/1 var(--bf);cursor:pointer;white-space:nowrap}
.sync:hover{background:rgba(255,255,255,.14)}
.sync i{width:9px;height:9px;border-radius:50%;background:#43c47c;flex:none}
.sync.warn i,.sync.load i{background:var(--thread)}.sync.bad i{background:#ff6b72}
.sync.load i{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.sync span{display:none}
.ib{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r1);background:none;color:#fff;cursor:pointer;text-decoration:none}
.ib:hover{background:rgba(255,255,255,.14)}
.ib em{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#c0262d;color:#fff;font:700 11px/18px var(--bf);font-style:normal;text-align:center}

/* ---- sidebar: icon rail on tablet, full labels on desktop ---- */
.side{display:none;grid-column:1;grid-row:2;position:relative;z-index:30;background:var(--side);color:var(--sidetx)}
nav{display:flex;flex-direction:column;gap:2px}
.side nav{position:sticky;top:var(--top-h);width:var(--rail-w);padding:var(--sp3) var(--sp2);overflow:hidden;background:var(--side)}
.side nav button,.more button{display:flex;align-items:center;gap:var(--sp3);min-height:var(--tap);width:100%;text-align:left;border:0;border-left:3px solid transparent;background:none;color:var(--sidetx);padding:var(--sp2) var(--sp3);border-radius:0 var(--r1) var(--r1) 0;cursor:pointer;font:500 15px/1.2 var(--bf);white-space:nowrap}
.side nav button span{display:none}
.side nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav button.on{background:rgba(255,255,255,.12);color:#fff;border-left:3px dashed var(--thread)}

/* ---- phone bottom navigation and menu sheet ---- */
.bnav{flex-direction:row;gap:0;position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;height:calc(var(--bnav-h) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--side);border-top:1px solid rgba(255,255,255,.1)}
.bnav button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tap);background:none;border:0;border-top:3px solid transparent;color:var(--sidetx);font:500 11px/1 var(--bf);cursor:pointer;padding:0}
.bnav button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.bnav button.on{color:#fff;border-top:3px dashed var(--thread)}
.mbk{position:fixed;inset:0;z-index:55;background:rgba(10,15,30,.5)}
.more{position:fixed;left:var(--sp3);right:var(--sp3);bottom:calc(var(--bnav-h) + var(--safe-b) + var(--sp3));z-index:56;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2);padding:var(--sp3);background:var(--side);border-radius:var(--r2);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.more button{background:rgba(255,255,255,.07);color:#fff;border-radius:var(--r1);border-left:0}
.more button.on{outline:2px dashed var(--thread)}
.sbar{position:fixed;left:0;right:0;bottom:calc(var(--bnav-h) + var(--safe-b));z-index:25;display:flex;align-items:center;gap:var(--sp2);height:var(--sbar-h);padding:0 var(--sp3);background:var(--cd);border-top:1px solid var(--bd);box-shadow:0 -4px 14px rgba(0,0,0,.08)}
.sbar span{flex:1;font-size:12px;line-height:1.3;overflow:hidden}

main{grid-column:1;grid-row:2;display:block;min-width:0;padding:var(--sp3) var(--sp3) calc(var(--bnav-h) + var(--sbar-h) + var(--safe-b) + var(--sp5))}

/* ---- page header ---- */
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp3);margin:0 0 var(--sp4)}
.pt{font:700 26px/1.1 var(--hf);letter-spacing:.01em}
.ps{margin-top:2px;color:var(--mu);font-size:13px}
.pa{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2)}
.dbar{display:flex;align-items:center;gap:var(--sp1);flex-wrap:wrap}
.dbar input[type=date]{width:150px}
.wd{font-size:12px;color:var(--mu)}

/* ---- type, cards, buttons, inputs ---- */
h1,h2{font-family:var(--hf)}
h2{font:600 18px/1.2 var(--hf);margin:0 0 var(--sp3);padding-bottom:var(--sp2);border-bottom:2px dashed var(--bd);color:var(--tx)}
.mu{color:var(--mu)}.note{margin-top:var(--sp5);font-size:12px}
.card{background:var(--cd);border:1px solid var(--bd);border-radius:var(--r2);padding:var(--sp4);margin-bottom:var(--sp4);min-width:0}
.card>h2 .cn{float:right;font:500 13px/1.6 var(--bf);color:var(--mu)}
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);min-width:var(--tap);border:1px solid var(--bd);background:var(--cd);color:var(--tx);padding:var(--sp2) var(--sp4);border-radius:var(--r1);cursor:pointer;font:500 14px/1.2 var(--bf);transition:background .12s,border-color .12s}
.b:hover{border-color:var(--ac);background:var(--row)}
.b:active{transform:translateY(1px)}
.b:disabled{opacity:.5;cursor:not-allowed}
.b.pri,button.b[data-a^=add],button.b[data-a=sbpush],button.b[data-a=push],button.b[data-a=bk],button.b[data-a=today]{background:var(--ac);color:var(--cd);border-color:var(--ac)}
.b.pri:hover,button.b[data-a^=add]:hover,button.b[data-a=sbpush]:hover{filter:brightness(1.12);background:var(--ac)}
.b.sm{min-height:34px;padding:2px 12px;font-size:13px}
.x{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);color:var(--bad);cursor:pointer;border:0;background:none;font-size:18px;border-radius:var(--r1)}
.x:hover{background:var(--row)}
input,select,textarea{font:inherit;font-size:16px;color:var(--tx);background:var(--cd);border:1px solid var(--bd);border-radius:var(--r1);padding:var(--sp2);max-width:100%;min-height:var(--tap)}
input:hover,select:hover{border-color:var(--mu)}
input:disabled,select:disabled{opacity:.55}
input[type=checkbox]{width:28px;height:28px;min-height:0;margin:8px;accent-color:var(--ac)}
input[data-a=pdone]{appearance:none;-webkit-appearance:none;width:60px;height:34px;margin:5px 0;padding:0;border:0;border-radius:17px;background:var(--bd);position:relative;cursor:pointer;transition:background .15s}
input[data-a=pdone]::after{content:'';position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .15s}
input[data-a=pdone]:checked{background:var(--ok)}input[data-a=pdone]:checked::after{left:30px}
:focus-visible{outline:2px solid var(--thread);outline-offset:1px}
.bar2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2);margin:0 0 var(--sp3)}
.bar2 input:not([type=checkbox]):not([type=date]){flex:1 1 180px;min-width:0}.bar2 select{flex:1 1 140px;min-width:0}
.fg{display:grid;grid-template-columns:1fr;gap:var(--sp3);margin-bottom:var(--sp3)}
.f{display:flex;flex-direction:column;gap:var(--sp1);font-size:13px;color:var(--mu)}.f input,.f select{width:100%}
.chk label{display:inline-flex;align-items:center;min-height:var(--tap);margin-right:var(--sp4)}
.chip{display:inline-flex;align-items:center;gap:2px;padding:0 0 0 var(--sp3);margin:2px;background:var(--row);border:1px solid var(--bd);border-radius:20px}
.badge{display:inline-block;padding:2px 10px;border-radius:12px;background:var(--row);border:1px dashed var(--mu);color:var(--mu);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:12px;border:1px solid currentColor;font:600 12px/1.5 var(--bf);white-space:nowrap}
.pill i{font-style:normal;font-size:10px}
.pill.idle{color:var(--mu);font-weight:500}
.LATE,.bad{color:var(--bad);font-weight:600}.OK{color:var(--ok);font-weight:600}.warn{color:var(--pm);font-weight:600}.DONE{color:var(--ok);font-weight:600}
.empty{padding:var(--sp5) var(--sp4);text-align:center;color:var(--mu);border:1px dashed var(--bd);border-radius:var(--r2)}
.alert{padding:var(--sp3) var(--sp4);margin-bottom:var(--sp4);border-radius:var(--r2);border:1px solid var(--bd);border-left:6px solid var(--am);background:var(--cd)}
.alert.warn{border-left-color:var(--thread)}.alert.bad{border-left-color:var(--bad)}
.alert .bar2{margin:var(--sp3) 0 0}.alert input{flex:1 1 220px}
.hint{color:#9a3412;background:#fff7ed;border-left:3px solid #f97316;border-radius:6px;padding:8px 10px;margin:8px 0;font-size:14px;line-height:1.4}
.toast{position:fixed;z-index:90;left:var(--sp3);right:var(--sp3);margin:0 auto;width:fit-content;bottom:calc(var(--bnav-h) + var(--sbar-h) + var(--safe-b) + var(--sp3));max-width:min(92%,560px);padding:var(--sp3) var(--sp4);border-radius:var(--r2);background:var(--side);color:#fff;border-left:6px solid var(--am);box-shadow:0 8px 30px rgba(0,0,0,.35);font-size:14px;line-height:1.4}
.toast.ok{border-left-color:var(--ok)}
body.dopen .toast{bottom:auto;top:84px}.toast.bad{border-left-color:var(--bad)}.toast.load{border-left-color:var(--thread)}

/* ---- legacy editing tables (Work Tickets, Styles, Components, Output, Preparation, Machines, Settings): phone = cards, tablet+ = tables ---- */
.sc{overflow:visible}
table{display:block;width:100%;border-collapse:separate;border-spacing:0}
table tbody{display:block}
tr.hr{display:none}
table tr{display:block;margin:0 0 var(--sp3);padding:var(--sp2) var(--sp3);background:var(--cd);border:1px solid var(--bd);border-radius:var(--r2)}
td{display:flex;align-items:center;gap:var(--sp3);min-height:var(--tap);padding:var(--sp1) 0;border:0;vertical-align:top}
td::before{content:attr(data-l);flex:0 0 34%;font:600 12px/1.2 var(--bf);color:var(--mu)}
td.ct{padding-bottom:var(--sp2);margin-bottom:var(--sp1);border-bottom:1px dashed var(--bd);font:700 18px/1.2 var(--hf);color:var(--tx)}
td.ct::before{display:none}
td:empty{display:none}
td input:not([type=checkbox]),td select{flex:1;width:100%;min-width:0}
td>div{flex:1;min-width:0}
td .x,td .b{flex:none}
/* action cells (no header label): no empty label column, buttons wrap inside the card */
td[data-l=""]::before{display:none}
td[data-l=""],td:has(>.x+.x){flex-wrap:wrap;justify-content:flex-end;gap:var(--sp2)}
.pp{display:block;width:100%}
.step{display:flex;align-items:center;gap:var(--sp2);margin:0 0 var(--sp2)}
.step .n{flex:none;width:1.6em;text-align:right;color:var(--mu)}
.step input{flex:1 1 0;width:auto!important;min-width:0}
td:has(.pp){flex-direction:column;align-items:stretch;gap:var(--sp2)}td:has(.pp)::before{flex:none}
.use{display:flex;align-items:center;gap:var(--sp2);margin:0 0 var(--sp1)}
.use label{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.use input[type=number]{flex:none!important;width:76px!important;min-width:0!important}
td:has(.use){flex-direction:column;align-items:stretch;gap:var(--sp1)}td:has(.use)::before{flex:none}

/* ---- KPI tiles (buttons: they open the matching list) ---- */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:var(--sp3);margin:0 0 var(--sp4)}
.kp{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--cd);border:1px solid var(--bd);border-radius:var(--r2);padding:var(--sp3) var(--sp4);min-width:0}
button.kp{cursor:pointer;transition:border-color .12s,box-shadow .12s}
button.kp:hover{border-color:var(--ac);box-shadow:0 2px 10px rgba(23,32,61,.12)}
button.kp:active{background:var(--row)}
button.kp::after{content:'\203A';position:absolute;right:12px;top:8px;font-size:20px;line-height:1;color:var(--mu)}
.kp span{display:block;font-size:12px;color:var(--mu);line-height:1.25;padding-right:14px}
.kp b{display:block;margin-top:3px;font:700 24px/1.15 var(--hf);color:var(--tx);overflow-wrap:anywhere}
.kp small{display:block;color:var(--mu);font-size:12px;margin-top:1px}
.kp.bad{border-color:var(--bad)}.kp.bad b{color:var(--bad)}.kp.warn b{color:var(--pm)}

/* ---- dashboard ---- */
.dg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp4);align-items:start}
.dr{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}
.sum{display:flex;flex-wrap:wrap;gap:var(--sp2);margin:0 0 var(--sp3)}
.sum span{padding:3px 10px;border-radius:12px;background:var(--row);border:1px solid var(--bd);font-size:13px}
.sum b{font:700 15px/1 var(--hf)}
.mgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--sp3)}
.mt{border:1px solid var(--bd);border-radius:var(--r2);background:var(--cd);overflow:hidden;min-width:0}
.mh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);padding:var(--sp2) var(--sp3);background:var(--row);border-bottom:1px solid var(--bd)}
.mh b{font:700 15px/1.2 var(--hf);overflow-wrap:anywhere}
.ln{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--sp3);padding:var(--sp2) var(--sp3);border-top:1px dashed var(--bd)}
.mh+.ln{border-top:0}
.lt{flex:none;min-width:40px;text-align:center;padding:3px 6px;border-radius:3px;background:var(--am);color:#fff;font:700 11px/1.2 var(--hf);letter-spacing:.08em}
.lt.PM{background:var(--pm)}.lt.ALL{background:var(--al)}
.lk{flex:1 1 150px;min-width:0;min-height:var(--tap);text-align:left;border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:2px 0;border-radius:var(--r1)}
.lk:hover{background:var(--row)}
.lk b{font:600 14px/1.2 var(--hf)}.lk small{display:block;color:var(--mu);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.nx{flex:1 1 150px;color:var(--mu);font-size:12px}
.rl{display:grid;gap:0}
.rli{display:flex;align-items:center;gap:var(--sp3);width:100%;min-height:var(--tap);text-align:left;font:inherit;color:inherit;background:none;border:0;border-bottom:1px dashed var(--bd);padding:var(--sp2) 2px;cursor:pointer}
.rli:last-child{border-bottom:0}
.rli:hover{background:var(--row)}
.rli .tx{flex:1;min-width:0}
.rli .tx b{font:600 14px/1.25 var(--hf);display:block;overflow-wrap:anywhere}
.rli .tx small{display:block;color:var(--mu);font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.more-l{margin:var(--sp2) 0 0}
.card:has(.gr){overflow-x:auto}
.gr{display:flex;align-items:center;gap:var(--sp2);margin:4px 0}
.gr>b{width:170px;flex:none;font:600 12px/1.2 var(--hf)}
.gt{position:relative;flex:1;height:30px;background:var(--row);border:1px dashed var(--bd);border-radius:5px;min-width:600px}
.gt.ax{height:16px;background:none;border:0;font-size:10px;color:var(--mu)}.gt.ax span{position:absolute}
.bar{position:absolute;top:2px;height:24px;border-radius:4px;color:#fff;font-size:11px;overflow:hidden;white-space:nowrap;padding:4px 5px;background:var(--am);cursor:pointer}
.bar.PM{background:var(--pm)}.bar.ALL{background:var(--al)}.bar.LATE{background:var(--bad)}.bar.DONE{opacity:.45}
.wl{list-style:none;margin:0;padding:0}.wl li{padding:var(--sp2) 0;border-bottom:1px dashed var(--bd);line-height:1.8}
.mg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:var(--sp3)}
.mcard{border:1px solid var(--bd);border-radius:var(--r2);padding:var(--sp3);background:var(--row);min-width:0}
.mcard h3{margin:0 0 var(--sp2);font:700 16px/1.2 var(--hf);overflow-wrap:anywhere}
.ml{padding:var(--sp1) 0;font-size:13px;line-height:1.7;overflow-wrap:anywhere}

/* ---- schedule: toolbar, status chips, table (tablet+), job cards (phone) ---- */
.chips{display:flex;gap:var(--sp2);overflow-x:auto;padding:0 0 var(--sp1);margin:0 0 var(--sp3);scrollbar-width:thin}
.ch{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:var(--tap);padding:0 14px;border:1px solid var(--bd);border-radius:22px;background:var(--cd);color:var(--tx);cursor:pointer;font:500 14px/1 var(--bf)}
.ch b{font:700 13px/1 var(--hf);padding:3px 7px;border-radius:10px;background:var(--row)}
.ch:hover{border-color:var(--ac)}
.ch.on{background:var(--ac);color:var(--cd);border-color:var(--ac)}.ch.on b{background:rgba(255,255,255,.22);color:inherit}
.tb{display:flex;flex-wrap:wrap;gap:var(--sp2);align-items:center;margin:0 0 var(--sp3)}
.tb .sr{flex:1 1 100%;min-width:0}
.tb .ft{flex:1 1 100%}
.tb .fs{display:none;flex:1 1 100%;flex-wrap:wrap;gap:var(--sp2)}
.tb.open .fs{display:flex}
.tb .fs select,.tb .fs label{flex:1 1 100%;min-width:0}
.tb .fs label{display:flex;align-items:center;gap:var(--sp2);color:var(--mu);font-size:13px}.tb .fs label input{flex:1}
.rc{margin:0 0 var(--sp2);color:var(--mu);font-size:13px}
.tw{display:none}
.jl{display:grid;gap:var(--sp3)}
.jc{background:var(--cd);border:1px solid var(--bd);border-left:5px solid var(--am);border-radius:var(--r2);padding:var(--sp3);cursor:pointer}
.jc.LATE{border-left-color:var(--bad)}.jc.DONE{border-left-color:var(--ok)}.jc.sel{background:var(--sel)}
.jc .jh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2)}
.jc .jh b{font:700 18px/1.2 var(--hf);overflow-wrap:anywhere}
.jc .js{color:var(--mu);font-size:13px;overflow-wrap:anywhere}
.jc dl{display:grid;grid-template-columns:auto 1fr;gap:3px var(--sp3);margin:var(--sp2) 0 var(--sp3);font-size:14px}
.jc dt{color:var(--mu)}.jc dd{margin:0;overflow-wrap:anywhere}
.jc .b{width:100%}

/* ---- details drawer (right panel on tablet / desktop, full screen on phone) ---- */
.dbk{position:fixed;inset:0;z-index:70;background:rgba(10,15,30,.45)}
.drw{position:fixed;z-index:80;top:0;right:0;bottom:0;width:100%;display:flex;flex-direction:column;background:var(--cd);color:var(--tx);box-shadow:-10px 0 40px rgba(0,0,0,.3)}
.dh{display:flex;align-items:flex-start;gap:var(--sp3);padding:var(--sp3) var(--sp4);border-bottom:2px dashed var(--thread)}
.dh>div:first-child{flex:1;min-width:0}
.dh .dk{font-size:12px;color:var(--mu)}
.dh h2{margin:0;padding:0;border:0;font:700 24px/1.15 var(--hf);overflow-wrap:anywhere}
.dh .mu{font-size:13px;overflow-wrap:anywhere}
.dh .pill{margin-top:4px;flex:none}
.db{flex:1;min-height:0;overflow:auto;padding:var(--sp4)}
.ds{margin:0 0 var(--sp5)}
.ds h3{margin:0 0 var(--sp3);padding-bottom:6px;border-bottom:1px dashed var(--bd);font:600 15px/1.2 var(--hf);color:var(--ac)}
.fgd{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp3)}
.fd{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:12px;color:var(--mu)}
.fd input,.fd select{width:100%}
.fd .ro{min-height:34px;padding:6px 0;color:var(--tx);font:500 14px/1.4 var(--bf);overflow-wrap:anywhere}
.fd .ro.big{font:700 18px/1.2 var(--hf)}
.note2{margin:var(--sp2) 0 0;padding:var(--sp2) var(--sp3);border-left:4px solid var(--thread);background:var(--row);font-size:13px;line-height:1.45}
.note2.bad{border-left-color:var(--bad)}.note2.ok{border-left-color:var(--ok)}
.df{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2);padding:var(--sp3) var(--sp4);border-top:1px solid var(--bd);background:var(--row)}
.df .mu{flex:1 1 100%;font-size:12px}
.fl a{display:block;padding:4px 0;overflow-wrap:anywhere}
.acts{display:flex;flex-wrap:wrap;gap:var(--sp2)}
.df .b{flex:none}

/* ---- tablet (768-1199): icon rail, drawer, schedule table ---- */
@media(min-width:768px){
  .bnav,.sbar,.more,.mbk{display:none!important}
  .app{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  .side{display:block}
  .side nav button{justify-content:center;padding-left:0;padding-right:0;border-radius:var(--r1)}
  .side nav button.on{border-left-color:transparent;box-shadow:inset 3px 0 0 var(--thread)}
  main{grid-column:2;padding:var(--sp4) var(--sp5) var(--sp5)}
  .hb{order:0}
  .topbar{padding-left:var(--sp2);padding-right:var(--sp4)}
  .ap .lg{display:inline}
  body.navx .side nav{width:var(--nav-w);box-shadow:8px 0 24px rgba(0,0,0,.4)}
  body.navx .side nav button{justify-content:flex-start;padding-left:var(--sp3);border-radius:0 var(--r1) var(--r1) 0}
  body.navx .side nav button span{display:inline}
  body.navx .side nav button.on{box-shadow:none;border-left:3px dashed var(--thread)}
  .fg{grid-template-columns:1fr 1fr}
  .sc{overflow-x:auto}
  table{display:table;min-width:1000px}
  table tbody{display:table-row-group}
  tr.hr{display:table-row}
  table tr{display:table-row;margin:0;padding:0;border:0;border-radius:0;background:none}
  td{display:table-cell;min-height:0;padding:var(--sp2);border-bottom:1px solid var(--bd)}
  td::before{display:none}
  td.ct{font:inherit;border-bottom:1px solid var(--bd);margin:0}
  td:empty{display:table-cell}
  td input:not([type=checkbox]),td select{width:100%;min-width:100px}
  td input[type=number]{width:84px;min-width:0}
  th{padding:var(--sp2);background:var(--hd);color:var(--hdtx);font:600 13px/1.2 var(--hf);letter-spacing:.03em;text-align:left;white-space:nowrap}
  th:first-child{border-radius:4px 0 0 0}th:last-child{border-radius:0 4px 0 0}
  tr:nth-child(even) td{background:var(--row)}
  .sc th:first-child,.sc td:first-child{position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--bd)}
  .sc td:first-child{background:var(--cd);min-width:150px}.sc tr:nth-child(even) td:first-child{background:var(--row)}
  .sc th:first-child{background:var(--hd);z-index:3}
  td:has(.use),td:has(.pp){display:table-cell;flex-direction:initial}.use label{min-width:160px}
  td select{min-width:150px}td input[type=date]{min-width:150px}
  .bar2 input:not([type=checkbox]):not([type=date]){flex:0 1 260px}.bar2 select{flex:0 1 190px}
  .g{display:grid;gap:var(--sp4)}
  .toast{bottom:var(--sp5);left:var(--sp5);right:auto;margin:0}
  body.dopen .toast{top:auto;bottom:var(--sp5)}
  /* schedule toolbar + table */
  .tb .sr{flex:1 1 240px;max-width:380px}
  .tb .ft{display:none}
  .tb .fs{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center}
  .tb .fs select{flex:0 1 170px}.tb .fs label{flex:0 1 auto}.tb .fs label input{flex:none;width:150px}
  .tw{display:block;container-type:inline-size;overflow-x:auto;background:var(--cd);border:1px solid var(--bd);border-radius:var(--r2)}
  .jl{display:none}
  .st{display:table;width:100%;min-width:0}
  .st th{position:sticky;top:0;z-index:5}
  .st td{vertical-align:middle;padding:6px var(--sp2);background:var(--cd)}
  .st tr:nth-child(even) td{background:var(--cd)}
  .st tbody tr{cursor:pointer}
  .st tbody tr:hover td{background:var(--row)}
  .st tbody tr.sel td{background:var(--sel)}
  .st td select{min-width:0;width:100%}
  .st td input{min-width:0;width:100%}
  .st td input[type=number]{width:64px}
  .st td.ct{font:700 14px/1.2 var(--hf);white-space:nowrap}
  .st td.ct small{display:block;font:400 12px/1.3 var(--bf);color:var(--mu);white-space:normal;max-width:170px}
  .st td.pr{min-width:150px;font-size:13px;line-height:1.35}
  .st td.n,.st th.n{text-align:right}
  .st td.dt{white-space:nowrap;font-size:13px}
  .st td.go{width:1%;white-space:nowrap}
  .st .c2,.st .c3,.st .c4,.st .c5{display:none}
  .st .go .b{min-width:0}
  .st td.sh{min-width:78px}
  .rli{min-height:40px}
  /* dashboard */
  .dg{grid-template-columns:minmax(0,1fr)}
  .drw{width:min(620px,100%);border-left:2px dashed var(--thread)}
  .fgd{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fd.w{grid-column:1/-1}
}
@container (min-width:720px){.st .c2{display:table-cell}}
@container (min-width:1020px){.st .c3{display:table-cell}}
@container (min-width:1240px){.st .c4{display:table-cell}.st .nostyle{display:none}}
@container (min-width:1400px){.st .c5{display:table-cell}}

/* ---- desktop (1200+): full sidebar, two-column dashboard ---- */
@media(min-width:900px){.sync span{display:inline}}
@media(min-width:1000px){.clock{display:block}}
@media(min-width:768px){.chips{flex-wrap:wrap;overflow:visible}}
@media(min-width:1200px){
  .app{grid-template-columns:var(--nav-w) minmax(0,1fr)}
  .side nav{width:var(--nav-w)}
  .side nav button{justify-content:flex-start;padding-left:var(--sp3);border-radius:0 var(--r1) var(--r1) 0}
  .side nav button span{display:inline}
  .side nav button.on{box-shadow:none;border-left:3px dashed var(--thread)}
  body.navx .app{grid-template-columns:var(--rail-w) minmax(0,1fr)}
  body.navx .side nav{width:var(--rail-w);box-shadow:none}
  body.navx .side nav button{justify-content:center;padding-left:0;padding-right:0;border-radius:var(--r1)}
  body.navx .side nav button span{display:none}
  body.navx .side nav button.on{border-left-color:transparent;box-shadow:inset 3px 0 0 var(--thread)}
  main{padding:var(--sp4) 28px 32px}
  .logo .co{display:block}
  input,select,textarea{font-size:14px;min-height:36px}
  .b,.x{min-height:36px}
  .ch{min-height:34px;font-size:13px}
  .sync{min-height:36px}.ib,.hb{width:40px;height:40px}
  input[type=checkbox]{width:20px;height:20px;margin:6px}
  .dg{grid-template-columns:minmax(0,1.3fr) minmax(360px,1fr)}
  .rli{min-height:36px}
  .tw{overflow:visible}
  .st th{top:var(--top-h)}
}
@media(min-width:1700px){.dg{grid-template-columns:minmax(0,1.45fr) minmax(420px,1fr)}.mgr{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}
/* phone landscape / touch devices of any size keep large tap targets and 16px inputs */
@media(pointer:coarse){input,select,textarea{font-size:16px;min-height:var(--tap)}.b,.x,.ch,.sync{min-height:var(--tap)}.ib,.hb{width:var(--tap);height:var(--tap)}input[type=checkbox]{width:28px;height:28px}.b.sm{min-height:var(--tap)}}
/* very small phones */
@media(max-width:479px){
  .bar2 .b,.bar2 select,.bar2 input:not([type=checkbox]){flex:1 1 100%}
  .kpi{grid-template-columns:1fr 1fr}.kp{padding:var(--sp3)}.kp b{font-size:20px}
  .topbar{gap:var(--sp2);padding-left:var(--sp3);padding-right:var(--sp2)}.tr{gap:0}
  .ap{font-size:13px;padding-left:var(--sp2);letter-spacing:.06em}.logo b{font-size:15px;letter-spacing:.04em}
  .sync{min-width:var(--tap);justify-content:center;padding:0}
  .pt{font-size:22px}
}
/* a short window (for example an embed that is only a few hundred px tall): stop pinning bars so the content gets the room */
@media(max-height:560px){
  .topbar{position:static}.st th{top:0}
  .bnav,.sbar{position:static}
  main{padding-bottom:var(--sp4)}
  .toast{position:static;margin:var(--sp2) auto}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.side,.topbar,.bnav,.sbar,.more,.mbk,.imp,.drw,.dbk{display:none!important}main{grid-column:1}}



/* ---- Styles tab: list + detail, colour chips, new-style dialog; Components picker ---- */
.sly{display:grid;gap:var(--sp4);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1200px){.sly{grid-template-columns:320px minmax(0,1fr)}}
@media(max-width:1199px){.stl{max-height:260px}}
.sly>.sls,.sld>.card{margin-bottom:0}.sld{scroll-margin-top:calc(var(--top-h) + 12px)}.sld{display:grid;gap:var(--sp4);min-width:0}
.slh{display:flex;align-items:center;justify-content:space-between;gap:var(--sp2);margin-bottom:var(--sp3)}.slh h2{margin:0}
#stq,#csq{width:100%;margin-bottom:var(--sp2)}
.stl{display:flex;flex-direction:column;gap:6px;max-height:min(60vh,560px);overflow:auto;padding:2px}
.stl.sm{flex-direction:row;flex-wrap:wrap;max-height:none;overflow:visible}
.stc{display:flex;flex-direction:column;align-items:flex-start;gap:5px;width:100%;min-height:var(--tap);padding:10px 12px;text-align:left;border:1px solid var(--bd);border-left:4px solid transparent;border-radius:var(--r2);background:var(--cd);color:var(--tx);cursor:pointer;font:inherit}
.stc.sm{width:auto;justify-content:center}
.stc:hover{border-color:var(--ac)}.stc:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.stc.on{border-color:var(--thread);border-left:4px solid var(--thread);background:var(--sel)}
.stc b{font:600 15px/1.25 var(--hf);letter-spacing:.02em;overflow-wrap:anywhere}.stc small{color:var(--mu);font-size:12px}
.cl{display:flex;flex-wrap:wrap;gap:4px}
.cc,.cb{display:inline-flex;align-items:center;gap:2px;padding:1px 9px;border-radius:999px;border:1px solid var(--bd);background:var(--row);color:var(--tx);font:600 11px/1.7 var(--bf);letter-spacing:.04em;white-space:nowrap}
.cb{background:var(--ac);border-color:var(--ac);color:var(--bg);vertical-align:middle}
.cb.all{background:transparent;color:var(--mu);border-style:dashed;border-color:var(--mu)}
h2 .cb{font-size:12px;margin-left:6px}
.chipbox{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;min-height:30px;align-items:center}
.chipbox .cc{font-size:13px;padding:2px 2px 2px 12px}
.chipbox .x{min-width:var(--tap);min-height:32px;font-size:18px;line-height:1}
.chipbox+.bar2 input{flex:1;min-width:0}
.edh{display:flex;align-items:center;gap:var(--sp3);flex-wrap:wrap;margin-bottom:var(--sp3)}
.edh>div:first-child{flex:1 1 220px;min-width:0}
.edh .dk{font:600 11px/1 var(--bf);letter-spacing:.14em;text-transform:uppercase;color:var(--mu);margin-bottom:4px}
.edn{margin:0;font:700 22px/1.2 var(--hf);letter-spacing:.02em;overflow-wrap:anywhere}
.ss{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--bd);font:600 12px/1 var(--bf)}
.ss.ok{color:var(--ok);border-color:var(--ok)}.ss.warn{color:var(--pm);border-color:var(--pm)}.ss.load{color:var(--mu)}
.b.dang{color:var(--bad);border-color:var(--bad)}
.pk{display:grid;gap:var(--sp4)}
.mbg{position:fixed;inset:0;z-index:69;background:rgba(10,15,30,.55)}
.modal{position:fixed;z-index:70;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:var(--sp5);border-radius:var(--r2);background:var(--cd);color:var(--tx);box-shadow:0 18px 48px rgba(0,0,0,.35)}
.modal h2{margin:0 0 var(--sp4);font:700 20px/1.2 var(--hf)}
.modal .fd{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--sp3)}.modal .fd>span{font-weight:600}
.modal #nsn{width:100%}
.mf{display:flex;justify-content:flex-end;gap:var(--sp2);margin-top:var(--sp4)}

/* ---- Components matrix (grid, not a table, so phone card styling does not apply) ---- */
.vt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--sp4)}
.mxw{overflow-x:auto;margin:var(--sp3) 0;border:1px solid var(--bd);border-radius:var(--r2)}
.mxg{display:grid;min-width:max-content}
.mxg>div{display:flex;align-items:center;justify-content:center;padding:6px;border-bottom:1px solid var(--bd);background:var(--cd)}
.mxg>.mxh{background:var(--hd);color:var(--hdtx);font:600 12px/1.2 var(--bf);letter-spacing:.04em;min-height:40px;text-align:center}
.mxg>.mxh:first-child,.mxg>.mxr{justify-content:flex-start;position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--bd)}
.mxg>.mxh:first-child{background:var(--hd)}
.mx{width:100%;min-height:var(--tap);padding:0 8px;border:1px dashed var(--bd);border-radius:var(--r2);background:none;color:var(--mu);cursor:pointer;font:600 12px/1.2 var(--bf);white-space:nowrap}
.mx:hover{border-color:var(--ac)}
.mx.on{border:1px solid var(--ok);background:rgba(31,122,69,.12);color:var(--ok)}
.mx.miss{border:1px solid var(--bad);background:rgba(192,38,45,.08);color:var(--bad)}
.mx.inh{border-style:dotted}
.mxn{min-height:var(--tap);padding:0;border:0;background:none;color:var(--ac);font:600 14px/1.2 var(--hf);text-align:left;text-decoration:underline;cursor:pointer;overflow-wrap:anywhere}
.mxn.on{color:var(--thread)}
.mxa{align-items:center;gap:var(--sp2);margin-top:var(--sp3)}
.mxa input{flex:1 1 180px;min-width:0}
.vb{border:1px solid var(--bd);border-radius:var(--r2);padding:var(--sp3);margin-bottom:var(--sp3)}
.vbh{margin-bottom:var(--sp2)}
.mw{display:block;margin-top:4px;font-weight:600}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--bd)}

/* ---- widths (REG / WIDE badges), Style No., archive ---- */
.wb{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:1px 7px;border-radius:4px;font:700 11px/1.6 var(--hf);letter-spacing:.08em;vertical-align:middle;white-space:nowrap;border:1px solid}
.wb.reg{color:var(--am);border-color:var(--am);background:rgba(37,99,201,.08)}
.wb.wide{color:#fff;border-color:#6d3fc0;background:#6d3fc0}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wb.wide{background:#8b63d9;border-color:#8b63d9}}
.cl .wb{margin-right:2px}
.sno{font-variant-numeric:tabular-nums;color:var(--thread)}
.stc.arch{opacity:.75;border-style:dashed}
.sat{display:flex;align-items:center;gap:8px;min-height:36px;margin:0 0 var(--sp2);font-size:13px;color:var(--mu);cursor:pointer}
.wck{display:flex;flex-wrap:wrap;gap:var(--sp3)}
.wc{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 12px;border:1px solid var(--bd);border-radius:var(--r2);cursor:pointer}
.wqs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.wq{display:inline-flex;align-items:center;gap:6px}.wq input{width:84px;min-width:0}
.wqt{white-space:nowrap}.wqt b{color:var(--tx)}
.wls{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:4px}.wls small{color:var(--mu);font-weight:600}
.wsw{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2);margin:0 0 var(--sp3)}
.wfc{margin:0 0 var(--sp3)}
.ch .wb{min-width:0;padding:0 5px}
.b.xp{flex:none}
.wsw .chips,.chips.wfc{flex-wrap:wrap;overflow:visible}
.use label .cb,.use label .wb{margin-left:4px}
@media(min-width:768px){td[data-l=""]{white-space:nowrap}}
/* phone cards: long "STYLE NO · Style · Color" picker gets the full width under its label */
td:has(>select[data-p$=".sc"]){flex-wrap:wrap}td:has(>select[data-p$=".sc"])>select{flex:1 1 calc(100% - 60px)}
@media(max-width:767px){td:has(>select[data-p$=".sc"])::before{flex-basis:100%}}
/* ---- confirm dialog: centred on tablet/PC, bottom sheet on phones ---- */
#dlg .mbg{z-index:95}
.modal.dlg{z-index:96;width:min(480px,calc(100vw - 32px))}
.dlg h2{margin:0 0 var(--sp2)}
.dlg .dn{margin:0 0 var(--sp3);font:700 17px/1.3 var(--hf);overflow-wrap:anywhere}
.dlg .dm{margin:0 0 var(--sp3);line-height:1.45}
.dlg .dlead{margin:0 0 4px}
.dli{margin:0 0 var(--sp3);padding:var(--sp2) var(--sp3) var(--sp2) 28px;border:1px solid var(--bd);border-radius:var(--r2);background:var(--row);line-height:1.6}
.dar{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:var(--sp3) 0;padding:var(--sp3);border:1px solid var(--ok);border-radius:var(--r2);background:rgba(31,122,69,.06)}
.dar .b{width:100%}
.dty{display:flex;flex-direction:column;gap:6px;margin-top:var(--sp3)}.dty input{width:100%;font-weight:600;letter-spacing:.04em}
.b.del{background:var(--bad);border-color:var(--bad);color:#fff}
.b.del:disabled{opacity:.45;cursor:not-allowed}
.dlg .mf{flex-wrap:wrap}
.toast.undo{display:flex;align-items:center;gap:var(--sp3)}
.toast .ub{flex:none;background:#fff;color:var(--side);border-color:#fff;font-weight:700}
@media(max-width:767px){
  .modal.dlg{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:88vh;border-radius:16px 16px 0 0;padding:var(--sp4) var(--sp4) calc(var(--sp4) + var(--safe-b))}
  .modal.dlg::before{content:"";display:block;width:44px;height:5px;margin:-4px auto var(--sp3);border-radius:3px;background:var(--bd)}
  .dlg .mf{flex-direction:column-reverse;gap:var(--sp2)}
  .dlg .mf .b,.dar .b{width:100%;min-height:52px;font-size:16px}
}
</style>
<style>
/* ===================== v2 (Phase 1) additions ===================== */
.sp{flex:1 1 auto}
.ck{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer;color:var(--tx);font-size:14px}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--bd);background:var(--row);color:var(--mu);font:600 11px/1.7 var(--bf);letter-spacing:.04em;white-space:nowrap;vertical-align:middle}
.tag.bad{color:var(--bad);border-color:var(--bad)}.tag.warn{color:#9a5a00;border-color:var(--thread)}
.warn{color:#9a5a00}
@media(prefers-color-scheme:dark){.warn,.tag.warn{color:#ffb15c}}
.ok{color:var(--ok)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;border:1px solid rgba(0,0,0,.15);flex:none}
.ch2{display:flex;align-items:center;gap:var(--sp2);margin:0 0 var(--sp3)}.ch2 h2{margin:0}
.n4{width:84px!important;min-width:0!important;flex:none!important}
.sr{flex:1 1 220px;min-width:0}
.bar2{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2)}
.bar2>label{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.card>.bar2+table,.card>.bar2+.stgrid,.card>.bar2+.empty,.card>p+.bar2{margin-top:var(--sp3)}
.act{white-space:nowrap}.act select{max-width:170px}
.dx{flex:none}
.alert.info{border-left-color:var(--am)}.alert.bad{border-left-color:var(--bad)}
.alert .bar2{margin-top:var(--sp2)}
/* main area: saving is automatic, no save bar */
#sbar{display:none!important}
main{padding-bottom:calc(var(--bnav-h) + var(--safe-b) + var(--sp5))}
@media(min-width:768px){main{padding-bottom:var(--sp5)}}
/* simple tables (no 1000px minimum like the old wide editors) */
@media(min-width:768px){#v table:not(.nocard){min-width:0}#v table:not(.nocard) td select{min-width:0}}
table.nocard{display:table;width:100%;min-width:0;border-collapse:collapse}
table.nocard tbody,table.nocard thead{display:table-row-group}table.nocard thead{display:table-header-group}
table.nocard tr{display:table-row;margin:0;padding:0;border:0;background:none;border-radius:0}
table.nocard td,table.nocard th{display:table-cell;min-height:0;padding:4px;border-bottom:1px solid var(--bd);vertical-align:top}
table.nocard td::before{display:none}
table.nocard th{background:none;color:var(--mu);font:600 12px/1.2 var(--bf);text-align:left}
table.nocard td input:not([type=checkbox]),table.nocard td select{min-width:0;width:100%}
/* navigation groups */
.ng{margin:0 0 var(--sp2)}.ngh{padding:10px var(--sp3) 4px;font:600 11px/1 var(--bf);letter-spacing:.12em;text-transform:uppercase;color:rgba(201,210,234,.6);white-space:nowrap}
.side nav{max-height:calc(100vh - var(--top-h));overflow-y:auto}
.side nav .ngh{display:none}
@media(min-width:1200px){.side nav .ngh{display:block}body.navx .side nav .ngh{display:none}}
@media(min-width:768px) and (max-width:1199px){body.navx .side nav .ngh{display:block}}
.side nav button.soon,.more button.soon{opacity:.62}
.phb{margin-left:auto;font:600 10px/1 var(--bf);font-style:normal;padding:2px 5px;border-radius:3px;background:rgba(255,255,255,.12)}
.side nav button .phb{display:none}
@media(min-width:1200px){.side nav button .phb{display:inline}body.navx .side nav button .phb{display:none}}
.more{grid-template-columns:1fr;max-height:calc(100vh - var(--bnav-h) - 80px);overflow:auto}
.mg2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2)}.mg2 .ngh{grid-column:1/-1;padding-left:2px}
.soon{text-align:center;padding:var(--sp5) var(--sp3)}.soon h2{margin:8px 0}.soon p{max-width:620px;margin:8px auto}
.phbig{display:inline-block;padding:4px 14px;border-radius:999px;border:2px dashed var(--thread);font:700 14px/1.4 var(--hf);letter-spacing:.08em;color:var(--ac)}
/* machine status */
.spill{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;font:600 12px/1.7 var(--bf);white-space:nowrap;border:1px solid var(--bd)}
.spill i{font-style:normal;font-size:10px}
.st-RUNNING{color:#14653a;background:#e3f5ea;border-color:#9ed6b5}
.st-IDLE{color:#3d4a66;background:#eef1f6;border-color:#c9d1e0}
.st-DOWN{color:#fff;background:#c0262d;border-color:#c0262d}
.st-REPAIR{color:#5c3800;background:#ffe2b8;border-color:#f0a54a}
.st-RETIRED{color:#77809a;background:transparent;border-style:dashed;text-decoration:line-through}
@media(prefers-color-scheme:dark){.st-RUNNING{color:#9be8bb;background:#163d28;border-color:#2c6b47}.st-IDLE{color:#c9d2ea;background:#232c48;border-color:#3a4669}.st-REPAIR{color:#ffd59a;background:#4a3212;border-color:#8a5a1a}}
.kp.ok b{color:var(--ok)}.kp.warn b{color:#b46a00}
.secgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--sp3)}
.sec-card{margin:0}.sch{display:flex;align-items:baseline;gap:var(--sp2);justify-content:space-between}.sch b{font:700 17px/1.2 var(--hf)}
.tday{margin:6px 0 10px;font-size:13px;line-height:1.7}
.tday .tt,.tday .ov{display:inline-block;padding:0 7px;border-radius:4px;background:var(--row);border:1px solid var(--bd);font-weight:600}
.tday .ov,.cc2 .ov{color:var(--pm)}.tday .bk,.cc2 .bk{color:var(--mu)}
.off{color:var(--mu);font-style:italic}
.mchips{display:flex;flex-wrap:wrap;gap:6px}
.mchip{min-height:36px;padding:0 10px;border-radius:6px;border:1px solid;font:600 13px/1 var(--bf);cursor:pointer}
.mchip:hover{filter:brightness(.95)}
@media(pointer:coarse){.mchip{min-height:var(--tap)}}
/* downtime log */
.dtl{display:grid;gap:var(--sp2)}
.dtr{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2);padding:var(--sp2);border:1px solid var(--bd);border-radius:var(--r2);background:var(--row);font-size:13px}
.dtr label{display:inline-flex;align-items:center;gap:6px;flex:1 1 200px}.dtr label input{flex:1;min-width:0}
/* styles grid */
.stgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--sp3)}
.stc2{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:var(--tap);padding:12px;text-align:left;border:1px solid var(--bd);border-left:4px solid var(--ac);border-radius:var(--r2);background:var(--cd);color:var(--tx);font:inherit;cursor:pointer}
.stc2:hover{border-color:var(--ac)}.stc2.arch{opacity:.65;border-left-style:dashed}.stc2 small{color:var(--mu)}
/* schedule settings */
.brk{padding:var(--sp3);margin:0 0 var(--sp3);border:1px solid var(--bd);border-radius:var(--r2);background:var(--row)}
.brk.off{opacity:.6}.brh{display:flex;align-items:flex-start;gap:var(--sp2);margin-bottom:6px}.brt{flex:1;font-weight:500}
.brk .bar2 input[type=time]{width:120px}.brk .bar2 select{max-width:220px}
.chipbox.lst .chip{padding-left:4px}.chipbox.lst .chip b{padding:0 4px}.chipbox.lst .x{min-width:32px;min-height:32px;color:var(--mu)}
.chipbox.lst .x[data-a=lsDel],.chipbox .x[data-a=holDel]{color:var(--bad)}
/* work calendar */
.cwk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2);margin-bottom:var(--sp3)}.cwk b{font:700 16px/1.2 var(--hf);padding:0 6px}
.ctb{position:sticky;top:calc(var(--top-h) + var(--safe-t));z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:var(--sp2);margin:0 0 var(--sp3);background:var(--cd);border:1px solid var(--bd);border-radius:var(--r2);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.ctb .b.sm{min-height:34px}
@media(pointer:coarse){.ctb .b.sm{min-height:var(--tap)}}
.calw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:var(--r2)}
table.cal{min-width:980px;table-layout:fixed}
table.cal th,table.cal td{border-right:1px solid var(--bd);padding:0;white-space:normal}
table.cal thead th{background:var(--hd);color:var(--hdtx);text-align:center;vertical-align:middle}
table.cal thead th:first-child{width:170px}
table.cal thead th.nwd{background:#5a6585}table.cal thead th.tdy{box-shadow:inset 0 -4px 0 var(--thread)}
table.cal .rh{display:block;width:100%;min-height:var(--tap);padding:6px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;text-align:inherit}
table.cal thead .rh small{color:inherit;opacity:.8;font-weight:400}
table.cal tbody th{position:sticky;left:0;z-index:2;background:var(--cd);text-align:left;font:600 13px/1.25 var(--bf);color:var(--tx);box-shadow:1px 0 0 var(--bd)}
table.cal thead th:first-child{position:sticky;left:0;z-index:3}
table.cal tbody th select{margin:0 6px 6px;width:calc(100% - 12px);min-height:32px;font-size:12px}
table.cal tr.mrow th{font-weight:500;color:var(--mu);padding-left:8px}
.cc2{height:84px;padding:6px!important;font-size:12px;line-height:1.35;cursor:pointer;background:var(--cd);user-select:none}
.cc2:hover{background:var(--row)}
.cc2.inh{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(127,140,170,.07) 7px 9px)}
.cc2.own{background:var(--cd);box-shadow:inset 3px 0 0 var(--am)}
.cc2.minh{color:var(--mu)}
.cc2.sel{background:var(--sel)!important;outline:2px solid var(--thread);outline-offset:-2px}
.cc2 .t{font-weight:600}.cc2 .av{margin-top:2px;color:var(--mu);font-size:11px}.cc2 .nt{font-size:11px}
.leg2{display:flex;flex-wrap:wrap;gap:var(--sp4);margin-top:var(--sp3);font-size:12px;color:var(--mu)}
.lb{display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px;border:1px solid var(--bd)}
.lb.own{box-shadow:inset 3px 0 0 var(--am)}.lb.inh{background:repeating-linear-gradient(135deg,transparent 0 3px,rgba(127,140,170,.3) 3px 5px)}
/* day editor */
.ded{border:2px solid var(--thread)}
.dedg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp4)}
@media(min-width:900px){.dedg{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr)}}
.dedg h3{margin:0 0 6px;font:600 15px/1.2 var(--hf);color:var(--ac)}
.dedg table.nocard input[type=time]{min-width:96px}
.kv{display:grid;grid-template-columns:auto auto;align-content:start;justify-content:start;gap:4px 16px;margin-bottom:var(--sp3)}
/* day timeline */
.tl{margin:var(--sp4) 0 var(--sp3)}
.tla{position:relative;height:18px;margin:0 22px;font-size:11px;color:var(--mu)}
.tla span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.tlb{position:relative;height:34px;margin:0 22px;border-radius:4px;background:var(--row);border:1px solid var(--bd)}
.seg{position:absolute;top:3px;bottom:3px;border-radius:3px;overflow:hidden;white-space:nowrap;font:600 11px/28px var(--bf);color:#fff;padding:0 6px;text-overflow:ellipsis}
.seg.S{background:var(--am)}.seg.O{background:var(--pm)}
.seg.K{top:0;bottom:0;padding:0;background:repeating-linear-gradient(45deg,#1b2440 0 4px,#ffd27a 4px 8px);opacity:.85;border-radius:0}
.leg{display:flex;gap:var(--sp4);margin:6px 22px 0;font-size:12px;color:var(--mu)}
.leg i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:5px;vertical-align:-2px}
.leg i.S{background:var(--am)}.leg i.O{background:var(--pm)}.leg i.K{background:repeating-linear-gradient(45deg,#1b2440 0 3px,#ffd27a 3px 6px)}
/* work calendar on phones: one card per day */
.calp{display:grid;gap:var(--sp3)}
.cpd{border:1px solid var(--bd);border-radius:var(--r2);overflow:hidden;background:var(--cd)}
.cph{display:block;width:100%;min-height:var(--tap);padding:8px 12px;border:0;background:var(--hd);color:var(--hdtx);font:600 15px/1.2 var(--hf);text-align:left;cursor:pointer}
.cph small{font:400 12px var(--bf);opacity:.85}
.cpd.nwd .cph{background:#5a6585}.cpd.tdy .cph{box-shadow:inset 0 -4px 0 var(--thread)}
.cpr{display:grid;grid-template-columns:38% 1fr;border-top:1px solid var(--bd)}
.cpl{padding:8px 10px;font:600 13px/1.3 var(--bf);border-right:1px solid var(--bd)}.cpr.mrow .cpl{font-weight:500;color:var(--mu)}
.cpr .cc2{height:auto;min-height:var(--tap)}
.cpa select{flex:1 1 100%}
/* status dialog; room for the Google Sites edit button (bottom-right, editors only) */
.stb{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp3)}.stb .b{min-width:150px;justify-content:flex-start}
.df{padding-right:76px}
/* dialog extras */
#dlg .fgd{margin-top:var(--sp3)}
@media(max-width:479px){.cwk .b{flex:1 1 40%}.ctb{position:static}}
</style>
<style>
/* ===================== Phase 2: components, process library, routing, skills ===================== */
.rvt{margin-bottom:var(--sp3)}.rvt .ch b{margin-left:2px}
.cc.dj{border-style:dashed;border-color:var(--thread)}
.cc small{font-weight:500;color:var(--mu);letter-spacing:0}
.rtt tr[draggable=true]{cursor:grab}.rtt tr.drg td{opacity:.45}
.ckl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:0 var(--sp3)}
.ckl .ck{min-height:40px}
.skg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:var(--sp2) var(--sp3)}
.wl{margin:6px 0 0;padding-left:20px;line-height:1.55}.wl li.bad{color:var(--bad);font-weight:600}.wl li.info{color:var(--mu)}
.tag.warn{color:#9a5a00;border-color:var(--thread)}
/* flow diagram */
.flw{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:var(--r2);background:var(--row);max-height:70vh}
.flw svg{display:block;font-family:var(--bf);width:auto;height:auto;max-width:none;fill:currentColor;stroke:none;stroke-width:0;flex:none}
.flw .fe{fill:none;stroke:var(--mu);stroke-width:1.6}
.flw .fc{fill:none;stroke:var(--thread);stroke-width:1.6;stroke-dasharray:6 4}
.flw marker path{fill:var(--mu)}
.flw .fcl{font-size:11px;fill:#9a5a00;font-weight:600}
.flw .fb{cursor:pointer}.flw .fb .bx{fill:var(--cd);stroke:var(--bd);stroke-width:1.2}
.flw .fb:hover .bx,.flw .fb:focus .bx{stroke:var(--ac);stroke-width:2}.flw .fb:focus{outline:none}
.flw .fb.fin .bx{stroke:var(--ok);stroke-width:2}.flw .fb.dead .bx{stroke:var(--thread);stroke-width:2;stroke-dasharray:5 3}
.flw .ft{font:700 14px var(--hf);fill:var(--tx)}.flw .fs{font-size:11.5px;fill:var(--mu)}
.flw .fcut rect{fill:var(--cd);stroke:var(--thread);stroke-width:1.4;stroke-dasharray:6 4}.flw .fcut text{font:600 13px var(--hf);fill:#9a5a00}
.lb.fbx{background:var(--cd);border-left:4px solid var(--am)}.djl{color:#9a5a00}
@media(prefers-color-scheme:dark){.flw .fcl,.flw .fcut text,.djl{fill:#ffb15c;color:#ffb15c}}
</style>
<style>
/* ===================== Phase 3: work tickets, size grid, lots ===================== */
.drw.dwide{width:min(1180px,100%)}
.tkt td.num,.ltb .num{text-align:right;font-variant-numeric:tabular-nums}
.dts{display:flex;flex-direction:column;gap:1px;line-height:1.35}
.lsn{display:inline-block;margin:2px 2px 0 0}
.szg{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.szc{display:flex;flex-direction:column;gap:3px;font:600 12px var(--bf);color:var(--mu)}
.szc>span{display:flex;justify-content:space-between;gap:4px}.szc small{font-weight:500}
.szc input{width:100%;min-width:0;text-align:right;font-variant-numeric:tabular-nums}
.szc.out input{border-color:var(--thread);border-style:dashed}.szc.out>span{color:#9a5a00}
.szc.ro b{display:block;text-align:right;padding:6px 4px;font-size:15px}
.tkt2{margin:10px 0 0;font-size:15px}.tkt2 b{font-size:18px}
.unl{margin:8px 0}.unl .ok,.ltb .ok,.szc .ok{color:var(--ok);font-weight:600}
.ltw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:var(--r2)}
.ltb{border-collapse:collapse;width:max-content;min-width:100%}
.ltb th,.ltb td{padding:5px 6px;white-space:nowrap;border-bottom:1px solid var(--bd)}
.ltb td input{width:62px;text-align:right;font-variant-numeric:tabular-nums;padding:6px 6px}
.ltb .tkr td{background:var(--row);color:var(--mu)}.ltb .unr td{background:var(--row);font-weight:700}
.lgrip{cursor:grab;color:var(--mu);font-size:18px;text-align:center;width:18px;user-select:none}
.ltb tr.drg td{opacity:.45}
.lcard{border:1px solid var(--bd);border-radius:var(--r2);padding:10px 12px;margin:10px 0;background:var(--cd)}
.lcard.unc{background:var(--row)}
.lch .nw{white-space:nowrap}.lch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}.lch .sp{flex:1}
.lcb{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.ls-NS{color:#3d4a66;background:#eef1f6;border-color:#c9d1e0}
.ls-SC{color:#1d4f91;background:#e3eefc;border-color:#9fbfe8}
.ls-IP{color:#5c3800;background:#ffe2b8;border-color:#f0a54a}
.ls-DN{color:#14653a;background:#e3f5ea;border-color:#9ed6b5}
.ls-CX{color:#77809a;background:transparent;border-style:dashed}
.ls-NEW{color:#6d3fc0;background:transparent;border-style:dashed;border-color:#8b63d9}
@media(prefers-color-scheme:dark){.ls-NS{color:#c9d2ea;background:#232c48;border-color:#3a4669}.ls-SC{color:#a9cbff;background:#18304f;border-color:#2f5a8f}.ls-IP{color:#ffd59a;background:#4a3212;border-color:#8a5a1a}.ls-DN{color:#9be8bb;background:#163d28;border-color:#2c6b47}.ls-NEW{color:#c4a8ff}.szc.out>span{color:#ffb15c}}
@media(max-width:767px){.szg{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.szc input{min-height:44px;font-size:16px}}
</style>
<style>
/* ===================== Phase 4: scheduling (Gantt, phone list, job panel) ===================== */
.gtb{align-items:center}.gtb .vt{margin:0}.gnav{display:inline-flex;gap:4px}.gtb input[type=date]{width:auto}
.drw.dmid{width:min(760px,100%)}
.ggt{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:var(--r2);max-height:68vh;background:var(--cd);position:relative}
.ggin{position:relative}
.ggh,.ggr,.ggs{display:flex}
.ggh{position:sticky;top:0;z-index:4;background:var(--hd);color:var(--hdtx)}
.ggl{position:sticky;left:0;z-index:3;flex:none;width:150px;padding:4px 8px;background:var(--cd);border-right:1px solid var(--bd);display:flex;flex-direction:column;justify-content:center;gap:1px;font-size:13px;line-height:1.25;overflow:hidden}
.ggh .ggl{background:var(--hd)}.ggl small{color:var(--mu);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ggl .spill{font-size:10px;padding:0 6px;align-self:flex-start}
.gghk{position:relative;height:28px;flex:none}
.ggt2{position:absolute;top:0;height:28px;line-height:28px;padding-left:4px;font:600 11px var(--bf);border-left:1px solid rgba(255,255,255,.25);white-space:nowrap;overflow:hidden}
.ggt2.d{text-align:left;padding-left:6px}.ggt2 small{opacity:.7}
.ggs{position:sticky;left:0;padding:6px 8px 3px;font:700 12px var(--hf);letter-spacing:.04em;text-transform:uppercase;color:var(--mu);gap:6px;align-items:center;background:var(--row);border-top:1px solid var(--bd)}
.ggr{border-top:1px solid var(--bd);min-height:34px}.ggr.mdown .ggk{background-color:rgba(192,38,45,.06)}.ggr.gover .ggk{outline:2px dashed var(--ac);outline-offset:-2px}
.ggk{position:relative;flex:none;background:repeating-linear-gradient(135deg,rgba(120,130,150,.10) 0 6px,rgba(120,130,150,.18) 6px 12px)}
.ggk i{position:absolute;top:0;bottom:0;display:block}
.ggk i.gs{background:var(--cd)}.ggk i.go{background:repeating-linear-gradient(45deg,rgba(245,158,11,.16) 0 5px,rgba(245,158,11,.30) 5px 10px)}.ggk i.gb{background:repeating-linear-gradient(90deg,rgba(100,110,130,.35) 0 2px,rgba(100,110,130,.12) 2px 4px)}
.ggk .gnl{position:absolute;top:0;bottom:0;width:2px;background:#dc2626;z-index:2}
.jb{position:absolute;height:22px;border-radius:5px;color:#fff;font:600 11.5px/22px var(--bf);padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;z-index:1;box-shadow:0 1px 2px rgba(0,0,0,.25);user-select:none;touch-action:none}
.jb:hover{filter:brightness(1.1);z-index:3}.jb.cont{border-radius:2px}.jb.done{opacity:.45}.jb.run{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 6px,transparent 6px 12px)!important}
.jb.bad{outline:2px solid #dc2626;outline-offset:1px}
#gghost{position:fixed;z-index:200;max-width:320px;background:var(--cd);color:var(--tx);border:2px solid var(--ok);border-radius:8px;padding:8px 10px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}
#gghost.bad{border-color:#dc2626}#gghost ul{margin:4px 0 0;padding-left:16px;color:#b91c1c}#gghost .ok{color:var(--ok);font-weight:600}
.gleg{margin-top:8px}.gleg .lg{display:inline-block;width:16px;height:10px;border:1px solid var(--bd);vertical-align:-1px;margin:0 3px 0 8px}
.gleg .lg.gs{background:var(--cd)}.gleg .lg.go{background:repeating-linear-gradient(45deg,rgba(245,158,11,.2) 0 3px,rgba(245,158,11,.4) 3px 6px)}.gleg .lg.gb{background:rgba(100,110,130,.35)}.gleg .lg.gx{background:rgba(120,130,150,.25)}.gleg .lg.gn{background:#dc2626;width:3px}
.cnt{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;background:var(--row);font-size:12px;text-align:center;margin-left:4px}
.gwl{margin:0;padding-left:20px;line-height:1.6}.gwl li.bad{color:var(--bad)}.gwl li.warn{color:#9a5a00}.gwl li.info{color:var(--mu)}
.lnk{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.pmc{border:1px solid var(--bd);border-radius:var(--r2);padding:10px 12px;margin:10px 0;background:var(--cd)}
.pmh{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}.pmh .sp{flex:1}
.pjb{border-left:5px solid var(--ac);padding:8px 10px;margin:6px 0;background:var(--row);border-radius:6px;display:flex;flex-direction:column;gap:6px}
.pjb small{display:block;color:var(--mu)}.pjbb{display:flex;gap:6px;flex-wrap:wrap}
.astk{max-height:220px;overflow:auto;border:1px solid var(--bd);border-radius:var(--r2);padding:4px 10px;margin:8px 0}.asr{margin-top:6px}
@media(prefers-color-scheme:dark){.gwl li.warn{color:#ffb15c}#gghost ul{color:#fca5a5}}
@media(max-width:767px){.gtb .vt{display:none}}
</style>
<style>
/* ===================== Phase 5: receiving ===================== */
.rct td.num,.rch .num{text-align:right;font-variant-numeric:tabular-nums}
.rch{width:100%;border-collapse:collapse}.rch td{padding:6px 6px;border-bottom:1px solid var(--bd)}
.ns-OK{color:#14653a;background:#e3f5ea;border-color:#9ed6b5}
.ns-PART{color:#5c3800;background:#ffe2b8;border-color:#f0a54a}
.ns-WAIT{color:#3d4a66;background:#eef1f6;border-color:#c9d1e0}
.ns-LATE{color:#fff;background:#c0262d;border-color:#c0262d}
.ns-NS{color:#77809a;background:transparent;border-style:dashed}
@media(prefers-color-scheme:dark){.ns-OK{color:#9be8bb;background:#163d28;border-color:#2c6b47}.ns-PART{color:#ffd59a;background:#4a3212;border-color:#8a5a1a}.ns-WAIT{color:#c9d2ea;background:#232c48;border-color:#3a4669}}
</style>
<style>.rk{display:inline-flex;flex-direction:column;gap:1px;line-height:1.35}.rk small{font-weight:500}</style>
<style>
/* ===================== Phase 6: output (SIC) + efficiency ===================== */
.osub{margin:4px 0 10px;line-height:1.6}
.sict td{vertical-align:top}.sict select{min-width:120px;max-width:260px}.sict small{display:block}
.sict .sin{width:84px;text-align:right;font-variant-numeric:tabular-nums}.sict .sin.sm{width:70px}
.sict tr.sot td{background:rgba(240,165,74,.08)}.sict tr.sdone td:first-child{border-left:3px solid var(--ok)}
.sict .ok,.eft .ok{color:var(--ok);font-weight:700}.sict .bad,.eft .bad{color:var(--bad);font-weight:700}
.eft td.num,.sict td.num{text-align:right;font-variant-numeric:tabular-nums}.eft tr.etot td{font-weight:700;background:var(--row)}
.okpi{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.okpi .kp{cursor:default}
.ojl,.dtl{list-style:none;margin:0;padding:0}.ojl li,.dtl li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.ojl li>span:first-child,.dtl li>span:first-child{flex:1;min-width:160px}
.obar{display:inline-block;width:120px;height:8px;border-radius:4px;background:var(--row);overflow:hidden;border:1px solid var(--bd)}.obar i{display:block;height:100%;background:var(--ac)}
@media(max-width:767px){.sict .sin{width:100%;min-height:44px;font-size:16px}.sict select{max-width:none;width:100%}}
</style>
<style>.odop{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font-weight:600;font-size:13px;color:var(--mu)}.odop select{width:auto;min-width:220px;max-width:100%}
@media(min-width:768px){#v table.sict,#v table.eft{display:block;width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}#v table.sict>tbody{display:table;width:100%;min-width:1120px}#v table.eft>tbody{display:table;width:100%;min-width:1000px}#v table.sict td select{min-width:150px}#v table.sict td:first-child{min-width:120px}#v table.eft td:first-child{min-width:160px}}</style>
<style>
/* ===================== V22 quick update: bell, breadcrumb + Back, Setup check ===================== */
.bell{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:var(--r2);background:transparent;color:#fff;cursor:pointer;margin-right:8px;padding:0}
.bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bell i{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px/18px var(--bf);font-style:normal}
.bell[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.bell .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bellbk{position:fixed;inset:0;z-index:58;background:transparent}
.bellp{position:fixed;z-index:59;top:calc(var(--top-h) + 4px);right:12px;width:min(460px,calc(100vw - 24px));max-height:calc(100vh - var(--top-h) - 20px);display:flex;flex-direction:column;background:var(--cd);color:var(--tx);border:1px solid var(--bd);border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.bellp .bh .cnt{white-space:nowrap}.bellp .bh{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bd);font-family:var(--hf);font-size:16px}
.bellp .bl{overflow:auto;-webkit-overflow-scrolling:touch}
.nt{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-bottom:1px solid var(--bd)}
.nt.u{background:rgba(37,99,201,.06)}
.ndot{width:8px;height:8px;border-radius:50%;margin-top:9px;flex:none}.nt.u .ndot{background:var(--am)}
.nic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;background:var(--row);color:var(--mu)}.nic.bad{background:#fde8e9;color:var(--bad)}.nic.warn{background:#fff1de;color:#8a4b00}
.ntx{flex:1;min-width:0;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;min-height:0}.ntx b{display:block;font-weight:600;line-height:1.35}.nt.rd .ntx b{font-weight:400;color:var(--mu)}.ntx small{display:block;color:var(--mu);margin-top:2px}
.ntx:hover b{text-decoration:underline}.nmr{flex:none}.bft{margin:0;padding:6px 12px;font-size:11px}
.ph .crumb{flex:1 1 100%;order:-1;margin:0 0 -4px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;color:var(--mu)}.crumb>*{flex:none;width:auto;min-width:0}.crumb .bkb{min-height:32px;padding:4px 10px}.crumb .lnk{color:var(--am);text-decoration:none;min-height:0}.crumb .lnk:hover{text-decoration:underline}
.crumb .cs{opacity:.6}.crumb [aria-current]{color:var(--tx);font-weight:600}.crumb .bkb{margin-right:6px}
.scl{list-style:none;margin:0;padding:0}.scl li{display:flex;align-items:center;gap:6px 8px;padding:7px 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.scl .sci{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--bf);flex:none;background:var(--row);color:var(--mu)}.scl li.bad .sci{background:var(--bad);color:#fff}.scl li.warn .sci{background:#e0892a;color:#fff}
.scl .sct{flex:1 1 260px;min-width:0;line-height:1.4}.scl li.bad .sct{color:var(--bad)}
.sch2{margin:14px 0 2px;font:600 14px var(--hf)}
.scc{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.scc .sp{flex:1}
.cnt.bad{background:var(--bad);color:#fff}
.gofd{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0}
.gwl{padding-left:18px}.gwl li{padding:3px 0;line-height:1.45}.gwl .lnk{display:inline;min-height:0;height:auto;padding:0;line-height:inherit;white-space:normal;text-align:left;width:auto;font-size:inherit}
.gleg{line-height:2}
div.empty{text-align:center}
@media(max-width:767px){.bell{width:36px;height:36px;margin-right:6px}.bellp{left:8px;right:8px;width:auto}.crumb{font-size:12px}.scl .b{min-height:36px}}
@media print{.bell,.bellp,.bellbk,.crumb .bkb{display:none!important}}
/* ===== V24 (Phase 5B): shade sets, materials, receiving balances, replacements, settings ===== */
.stag{display:inline-block;padding:0 7px;border-radius:999px;border:1.5px solid var(--thread);color:#9a5a00;background:#fff6ec;font:700 10.5px/1.6 var(--hf);letter-spacing:.08em;white-space:nowrap;vertical-align:middle}
.lv{color:#9a5a00}
.bcl{display:inline-block;margin:1px 6px 1px 0;font-size:13px}
.fbl{fill:none;stroke:var(--thread);stroke-opacity:.42;stroke-linecap:round}
.fbt{font:700 11px var(--hf);letter-spacing:.04em;fill:#9a5a00}
.lb.fbl{background:var(--thread);opacity:.5;border:0;height:8px;width:22px;border-radius:4px;vertical-align:1px}
.cc.unsk{text-decoration:line-through;opacity:.75}
.cpl2{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.lvk{margin-left:26px;color:#9a5a00}
.ro2{display:flex;align-items:center;gap:6px;min-height:var(--tap)}
.rvt2{margin-bottom:10px}
.rcg .rgd td{background:var(--hd);color:var(--hdtx);font:600 15px var(--hf);letter-spacing:.02em;padding:7px 10px}
.rcg .rgl td{background:var(--row);font-size:14px;padding:8px 10px;border-top:1px solid var(--bd)}
.rvw{overflow-x:auto}
.rvt th{white-space:nowrap}
.rvt td{padding:4px 6px;vertical-align:middle}
.rvt .sin{width:78px}
.rvt select{min-width:130px}
.rvt tr.rs1 td{border-top:1px solid var(--bd)}
.rvask{margin:10px 0 4px}
.rpt tr.rpdone td{color:var(--mu)}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.mu{color:var(--mu)}
.cpdt{margin-bottom:8px;overflow-x:auto;flex-wrap:nowrap}
.cpdt .ch{flex:0 0 auto}
.pnt input{min-width:220px}
.rct th.num{text-align:right}
.rvc{border:1px solid var(--bd);border-radius:8px;padding:8px 10px;margin:0 0 8px;background:var(--cd)}
.rvch{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-bottom:6px}
.rvcg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rvcg label,.rvcg2 label{display:flex;flex-direction:column;font-size:12px;color:var(--mu);gap:2px}
.rvcg .sin{width:100%}
.rvcg2{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.rvcg2 label{flex:1}.rvcg2 select{width:100%}
.rvb{font-size:13px;white-space:nowrap;padding-bottom:10px}
.bar2 select[data-qs="rsty"],.bar2 select[data-qs="csty"],.bar2 select[data-qs="tsty"]{min-width:320px;max-width:100%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stag{background:#3a2610;color:#ffb15c}:root:not([data-theme="light"]) .lv,:root:not([data-theme="light"]) .lvk{color:#ffb15c}:root:not([data-theme="light"]) .fbt{fill:#ffb15c}}
@media (max-width:767px){.rcg tr.rgd td::before,.rcg tr.rgl td::before{display:none}.rcg tr.rgd td,.rcg tr.rgl td{display:block}.rvt .sin{width:64px}.rcg .rgd td{font-size:14px}.cpt td,.rtt td{word-break:break-word}}
/* ===== V25 (Phase 6B): manual mode, reason log, unplanned jobs, toolings, production rejects ===== */
.jb.pin{box-shadow:0 0 0 2px var(--thread),0 1px 2px rgba(0,0,0,.25)}
.jb.unp{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 4px,transparent 4px 9px)!important;background-color:#7c3aed!important}
.gleg .lg.gu{background:repeating-linear-gradient(45deg,#c4b5fd 0 3px,#7c3aed 3px 6px)}
.jb.bad.pin{box-shadow:0 0 0 2px var(--thread);outline:2px solid #dc2626;outline-offset:3px}
.mansw{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 10px;border:1.5px solid var(--thread);border-radius:8px;background:#fff6ec;color:#9a5a00}
.manon{margin-bottom:10px}
.tag.unpt{color:#6d28d9;border-color:#7c3aed;background:#f3eefe}
.lgl{list-style:none;margin:0;padding:0}.lgl li{padding:7px 0;border-top:1px solid var(--bd);font-size:13.5px}.lgl li:first-child{border-top:0}
.lgt{color:var(--mu);font-variant-numeric:tabular-nums}.lgr{margin-top:2px}
.whow{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bd)}
.tlt td,.tpt td{vertical-align:middle}.tlt select{min-width:140px}
.tpt tr.tpd td{background:var(--hd);color:var(--hdtx);font:600 14px var(--hf);padding:6px 10px}
.tph{margin:12px 0 6px;font:600 15px var(--hf)}
.tlc{border:1px solid var(--bd);border-radius:8px;padding:8px 10px;margin:0 0 8px;background:var(--cd);display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tlch{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.tlsz{display:flex;flex-wrap:wrap;gap:4px 14px}.tlu{margin:0 0 8px;padding-left:18px}.tlu li{padding:2px 0}
.tjt td,.tjt th{padding:4px 8px}
.rjcell{min-width:120px}.rjc{display:inline-flex;align-items:center;gap:2px;margin:1px 4px 3px 0;padding:0 2px 0 7px;border:1px solid #fca5a5;border-radius:999px;background:#fef2f2;color:#991b1b;font-size:12px;white-space:nowrap}
.rjh{margin:14px 0 6px;font:600 15px var(--hf)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mansw{background:#3a2610;color:#ffb15c}:root:not([data-theme="light"]) .tag.unpt{background:#2e1f4f;color:#c4b5fd}:root:not([data-theme="light"]) .rjc{background:#3b1414;color:#fca5a5;border-color:#7f1d1d}}
@media (max-width:767px){.mansw{padding:0 8px}.sict .rjcell{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.sict .rjc{white-space:normal;max-width:100%;margin:0}.tlt td{word-break:break-word}}
/* ===== V27 (Phase 7): print / Excel buttons, Dashboard Today ===== */
.ptools{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dkp .kp small{display:block;margin-top:2px;font-size:11.5px;line-height:1.3;color:var(--mu);font-weight:400;white-space:normal;overflow-wrap:anywhere}
.dkp .kp.bad small{color:var(--bad)}
.dts{margin-top:10px}
@media print{#nav,#bnav,.topbar,.ptools,#drw,#dbk{display:none!important}}
/* ===== V29: app name SUPPLY SCHEDULING SYSTEM; on phones the three words stack in small type so the whole name fits ===== */
@media(max-width:767px){.ap{font-size:10px!important;line-height:1.12;letter-spacing:.08em!important;white-space:normal;overflow:visible;text-overflow:clip}.ap span{display:block}}
/* ===== V30 (Phase 8.1): module + notification switches ===== */
.tgl{position:relative;display:inline-block;width:46px;height:28px;border-radius:14px;border:0;background:#c3cad8;cursor:pointer;padding:0;flex:none;vertical-align:middle}
.tgl i{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s}
.tgl.on{background:var(--ok)}.tgl.on i{left:22px}.tgl:disabled{opacity:.45;cursor:not-allowed}
.tgl:focus-visible{outline:3px solid var(--thread);outline-offset:2px}
#v tr.off td{color:var(--mu)}
.stg{display:flex;flex-wrap:wrap;gap:8px}.stg .b{height:auto;min-height:44px;text-align:left;line-height:1.25;padding:8px 10px}
.stg .b small{display:block;color:var(--mu);font-size:11.5px;font-weight:400}.stg .b.cur{border:2px solid var(--ok)}
.nd{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;vertical-align:-3px}
.nd.y{background:var(--ok)}.nd.n{background:var(--bad)}
/* ===== V32 (8.2): phone More menu labels wrap; Materials ===== */
.mg2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#more .mg2>button{min-width:0;white-space:normal;padding-left:10px;padding-right:8px;gap:8px}
#more .mg2>button span{min-width:0;white-space:normal;overflow-wrap:break-word;hyphens:auto;text-align:left;line-height:1.15;font-size:13.5px}
#v table.mcv tr.sub td{background:var(--row);font-size:13px}
#v table.mcv tr.sub td:first-child{padding-left:22px}
.fx{margin-top:var(--sp3);padding:var(--sp3);border:1px dashed var(--bd);border-radius:var(--r2);font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.fx hr{border:0;border-top:1px dashed var(--bd);margin:var(--sp2) 0}
@media(max-width:767px){#v table.mcv tr.sub{margin-left:12px}#v table.mcv tr.sub td:first-child{padding-left:0}#v table.mcv td,#v table.mtl td,#v table.msh td{word-break:break-word}}
/* ===== V34 (8.3): cutting ===== */
ul.cbs{list-style:none;margin:10px 0 0;padding:0}ul.cbs li{padding:4px 0;border-top:1px solid var(--bd);line-height:1.9}
.slt{margin-top:8px}.slh,.slr{display:grid;grid-template-columns:48px 64px minmax(0,1fr) 48px minmax(0,1fr) minmax(0,1.3fr);gap:6px;align-items:center;padding:4px 0}
.slh{font:600 12px/1.2 var(--bf);color:var(--mu);border-bottom:1px solid var(--bd)}.slr{border-bottom:1px solid var(--bd)}
.slr input,.slr select{width:100%;min-width:0;min-height:40px}.slc{margin:12px 0 2px;font-weight:700}.slr .num,.slh .num{text-align:right}
.cfx .b{height:auto;min-height:40px}
@media(max-width:767px){.slh,.slr{grid-template-columns:40px 56px minmax(0,1fr) 40px}.slh span:nth-child(n+5){display:none}.slr>:nth-child(5){grid-column:1/3}.slr>:nth-child(6){grid-column:3/5}.slr input,.slr select{min-height:44px;font-size:16px}}
.stp+.stp{margin-top:4px}.stp .tag{font-size:11px}
.pch{display:inline-block;min-width:34px;padding:1px 6px;border-radius:6px;font-size:11px;font-weight:700;color:#fff;background:var(--pc,#94a3b8);text-align:center;letter-spacing:.02em}
.rtlk{border:1px dashed #cbd5e1;border-radius:8px;padding:8px 10px;margin:8px 0;background:#f8fafc}.rtlk ul{margin:4px 0 0 18px;padding:0}.rtlk li{margin:2px 0}
table.lkt tr.lk td{background:#f8fafc}.jb .pcs{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:3px 0 0 3px}
/* Part style: a62-p7.html */

@page{size:A4 landscape;margin:12mm 10mm 14mm;@bottom-left{content:"${esc(P.lab)} · printed ${esc(P.at)}";font:8pt Arial,sans-serif;color:#555}@bottom-right{content:"Page " counter(page) " of " counter(pages);font:8pt Arial,sans-serif;color:#555}}
body{font:10pt Arial,Helvetica,sans-serif;color:#111;margin:16px}.hd{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #17203d;padding-bottom:6px;margin-bottom:8px}
.co{font:700 11pt Arial;letter-spacing:.04em}.co small{display:block;font:400 8pt Arial;letter-spacing:.06em;color:#555}h1{font-size:16pt;margin:4px 0 0}.sub{color:#444}.at{font-size:8.5pt;color:#555;text-align:right}
h2{font-size:11pt;margin:14px 0 4px;break-after:avoid}table{border-collapse:collapse;width:100%}thead{display:table-header-group}tr{break-inside:avoid}
th{background:#17203d;color:#fff;text-align:left;padding:4px 6px;font-size:8.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}td{border-bottom:1px solid #ccc;padding:3px 6px;vertical-align:top;font-size:8.5pt}
table.kv{width:auto;min-width:320px}table.kv td:first-child{padding-right:24px;color:#444}tr.g td{background:#e8ebf3;font-weight:700;-webkit-print-color-adjust:exact;print-color-adjust:exact}.num{text-align:right;font-variant-numeric:tabular-nums}.mu{color:#666}
.bar{position:sticky;top:0;background:#fff;padding:8px 0;margin-bottom:6px;border-bottom:1px solid #ddd}.bar button{font:600 11pt Arial;padding:8px 16px;margin-right:6px;cursor:pointer}@media print{.bar{display:none}body{margin:0}}

/* Part style: a72-acct.html */

.b.acct{margin-right:6px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg .pin{display:inline-block;font:700 26px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:3px;padding:6px 12px;border:2px dashed currentColor;border-radius:6px;margin:4px 0 8px}
pre.sql{white-space:pre-wrap;word-break:break-all;font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;background:rgba(127,127,127,.12);padding:8px;border-radius:6px}
table.perm td.pm{white-space:nowrap}table.perm td.pm label{margin-right:4px;font-size:12px}table.perm td.pm input{margin:0 1px 0 0}
.tw{overflow-x:auto}

/* Part style: a73-cal.html */

.ded tr.rerr td{background:#fde8e8}.ded tr.rwarn td{background:#fff4dc}
.ded .rmsg td{padding-top:0;font-size:13px}.ded .rmsg .bad{color:#b42318}.ded .rmsg .warn{color:#8a5a00}
.ded .rlen{white-space:nowrap;font-size:12px}.ded .rlen .tag{margin-left:2px}
.ded input.t24{width:76px;font-variant-numeric:tabular-nums}
.ded .pre{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Part style: a74-disp.html */

.dsec{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}.dsec .ch{min-height:36px}
.dprev{margin:8px 0;padding:8px 10px;border:1px dashed var(--line,#cbd5e1);border-radius:8px;background:#f8fafc}
.dprev .jbx{display:inline-block;max-width:100%;padding:0 8px;border-radius:5px;color:#fff;font:600 12px/24px var(--bf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.jb{contain:paint}

/* Part style: a75-cutsetup.html */

.csu{margin:0 0 12px}.csu h3{margin:0 0 6px}.csu .ly{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.csu .ly input{width:64px}.csu .tot{font-weight:700}.csu table input[type=text]{min-width:120px}
.ovr{border:2px solid var(--thread,#f59e0b);border-radius:8px;padding:8px}
.lp td input[type=text]{min-width:90px}.lp td input[type=number]{width:64px}

/* Part style: a76-lineplan.html */

.ldg{overflow-x:auto}.ldg table{min-width:900px}.ldg td{vertical-align:top;min-width:120px}
.ldc{border-left:4px solid var(--am,#2563c9);background:#f8fafc;border-radius:6px;padding:4px 6px;margin:0 0 4px;font-size:12.5px;cursor:pointer}
.ldc b{font-size:13px}.ldc .g{font-weight:700}.ldc.over{border-left-color:#dc2626;background:#fde8e8}.ldc.nt{border-left-color:#f59e0b;background:#fff4dc}
.ldnw{font-size:12px;color:#8a5a00}.ldoff{color:#94a3b8;font-size:12px}
.sup td,.sup th{white-space:nowrap}.sup .bad{color:#b42318;font-weight:700}
.chain li{margin:0 0 6px}

/* Part style: a77-output.html */

.ohs{display:flex;flex-direction:column;gap:8px}
.oh{border:1px solid var(--line,#d6dbe4);border-radius:10px;padding:8px 10px;background:#fff}
.oh.ot{border-left:4px solid var(--pm,#7c3aed)}.oh.cl{opacity:.75}
.ohh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}.ohh .sp{flex:1}
.ohh .k{font-size:12.5px}.ohh .k b{font-size:14px}.ohh .warn{font-size:12.5px}
.ol{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;padding:6px 0;border-top:1px dashed #e2e8f0}
.ol label{display:flex;flex-direction:column;font-size:11.5px;color:var(--mu,#64748b);gap:2px}
.ol input[type=number]{width:84px;font-size:16px}.ol input.big{width:96px;font-weight:700}.ol select{max-width:240px}
.ol.dn{background:#fff7ed}.ol .x{align-self:center}.ol .tg{font-size:13px;align-self:center}
.oed{display:inline-block;font-size:11.5px;color:#7c2d12;background:#ffedd5;border-radius:10px;padding:1px 8px}
.ons{font-size:12px;color:#b42318}.osv{font-size:12px;color:#8a5a00}
.inc td{vertical-align:top}
@media(max-width:767px){.ol label{flex:1 1 40%}.ol select{max-width:100%;width:100%}.ol input[type=number]{width:100%}}



/* =====================================================================
   BFD Modern Industrial UI Enhancements (Cloudflare Pages Edition)
   ===================================================================== */

/* System font smoothing and modern scrollbars for MacBook / Windows */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.65);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* Subtle modern card elevation & smooth transitions */
.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  border: 1px solid var(--bd);
  border-radius: 10px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  box-shadow: 0 4px 14px rgba(23,32,61,0.06);
}

/* Elevated Topbar */
.topbar {
  box-shadow: 0 2px 10px rgba(10,15,30,0.22);
  backdrop-filter: blur(8px);
}

/* Modernized Connection Status Indicator Pill */
.sync {
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  border-radius: 20px;
  padding: 4px 12px;
}
.sync.ok {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}
.sync.warn {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.sync.bad {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* -------------------------------------------------------------
   Interactive Metric KPI Tiles (.kpi, .kp, .dkp)
   ------------------------------------------------------------- */
.kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.kp {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--cd);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
.kp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #3b82f6;
  opacity: 0.85;
}
.kp.ok::before {
  background: #10b981;
}
.kp.warn::before {
  background: #f59e0b;
}
.kp.bad::before {
  background: #ef4444;
}
.kp::after {
  content: '›';
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 20px;
  line-height: 1;
  color: var(--mu);
  transition: transform 0.15s ease, color 0.15s ease;
}
.kp:hover {
  transform: translateY(-2px);
  border-color: var(--ac);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.kp:hover::after {
  transform: translateX(3px);
  color: var(--ac);
}
.kp:active {
  transform: scale(0.98);
}
.kp span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mu);
  line-height: 1.25;
  padding-right: 18px;
}
.kp b {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 700;
  font-family: var(--hf);
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kp small {
  display: block;
  font-size: 11.5px;
  color: var(--mu);
  margin-top: 3px;
  line-height: 1.25;
}
.kp.bad b {
  color: #dc2626;
}
.kp.warn b {
  color: #d97706;
}
.kp.ok b {
  color: #059669;
}

/* -------------------------------------------------------------
   Dashboard Setup Check Banner (.scc)
   ------------------------------------------------------------- */
.scc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(239,68,68,0.06), rgba(245,158,11,0.04));
  border: 1px solid rgba(239, 68, 68, 0.22);
  transition: all 0.15s ease;
}
.scc:hover {
  background: linear-gradient(90deg, rgba(239,68,68,0.1), rgba(245,158,11,0.08));
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.08);
}

/* -------------------------------------------------------------
   Dashboard Section Cards (.secgrid, .sec-card, .mchips, .mchip)
   ------------------------------------------------------------- */
.secgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 16px;
  margin-top: 14px;
}
.sec-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--cd);
  border: 1px solid var(--bd);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sec-card .sch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--row);
  border-bottom: 1px solid var(--bd);
  transition: background 0.15s ease;
}
.sec-card .sch:hover {
  background: rgba(37,99,201,0.08);
}
.sec-card .sch b {
  font-size: 14px;
  letter-spacing: 0.02em;
}
.sec-card .tday {
  padding: 10px 16px;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.sec-card .tday .tt {
  background: rgba(37,99,201,0.1);
  color: #1d4ed8;
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
  font-size: 11.5px;
}
.sec-card .tday .ov {
  background: rgba(245,158,11,0.15);
  color: #b45309;
  border-radius: 4px;
  padding: 2px 7px;
  font-weight: 600;
  font-size: 11.5px;
}
.sec-card .tday .bk {
  background: rgba(100,116,139,0.1);
  color: #475569;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11.5px;
}
.mchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}
.mchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  background: var(--row);
  border: 1px solid var(--bd);
  cursor: pointer;
  transition: all 0.15s ease;
}
.mchip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: #94a3b8;
}
.mchip.st-RUNNING::before {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16,185,129,0.6);
}
.mchip.st-IDLE::before {
  background: #94a3b8;
}
.mchip.st-DOWN::before {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,0.6);
}
.mchip.st-REPAIR::before {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245,158,11,0.6);
}
.mchip:hover {
  transform: translateY(-1px);
  border-color: var(--ac);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.mchip:active {
  transform: scale(0.97);
}

/* -------------------------------------------------------------
   Collapsible Desktop Sidebar & Navigation
   ------------------------------------------------------------- */
body.sidebar-collapsed .app {
  grid-template-columns: var(--rail-w) minmax(0,1fr) !important;
}
body.sidebar-collapsed .side nav {
  width: var(--rail-w) !important;
}
body.sidebar-collapsed .side nav button {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.sidebar-collapsed .side nav button span {
  display: none !important;
}
body.sidebar-collapsed .side nav .ngh {
  display: none !important;
}

/* Quick Table Search Bar Styling */
.quick-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--cd);
  padding: 8px 12px;
  border-radius: var(--r2);
  border: 1px solid var(--bd);
}
.quick-filter-bar input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
}
.quick-filter-bar svg {
  color: var(--mu);
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------
   Multi-Device Responsiveness (MacBook, Tablet, Mobile)
   ------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .kpi {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  .secgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 767px) {
  body {
    -webkit-tap-highlight-color: transparent;
  }
  .app {
    display: block !important;
    width: 100% !important;
    min-height: 100vh !important;
  }
  .side {
    display: none !important;
  }
  main {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 12px 10px calc(var(--bnav-h, 60px) + env(safe-area-inset-bottom, 16px) + 24px) !important;
  }
  #ph, #v {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .topbar {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
  }
  .topbar .logo b {
    font-size: 17px !important;
  }
  .topbar .logo .co {
    display: none !important;
  }
  .topbar .ap {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    padding-left: 8px !important;
  }
  .kpi {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .kp {
    padding: 10px 12px !important;
    border-radius: 8px !important;
  }
  .kp span {
    font-size: 10.5px !important;
    padding-right: 12px !important;
  }
  .kp b {
    font-size: 22px !important;
    margin-top: 2px !important;
  }
  .kp small {
    font-size: 10.5px !important;
  }
  .secgrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .sec-card {
    border-radius: 8px !important;
  }
  .mchips {
    gap: 6px !important;
    padding: 10px 12px !important;
  }
  .mchip {
    font-size: 11.5px !important;
    padding: 5px 9px !important;
  }
  /* Bottom Navigation Bar for Mobile Phones */
  .bnav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(var(--bnav-h, 60px) + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: #17203d !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25) !important;
    z-index: 60 !important;
  }
  .bnav button {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-height: 48px !important;
    padding: 4px 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 3px solid transparent !important;
    color: #c9d2ea !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: color 0.15s ease, background 0.15s ease !important;
  }
  .bnav button span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .bnav button.on {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-top: 3px solid var(--thread, #f08a24) !important;
  }
  .bnav button svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  .drw {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
  }
}