/* ============================================================================
   生产统计看板 · 视觉基线完全对齐 生产统计看板-Demo-V2.html（深色工业风）
   ============================================================================ */
:root{
  --bg:#0b1220; --bg2:#0e1626; --card:#121c30; --card2:#182439; --line:#22304a;
  --txt:#e9eff7; --mut:#9fb0cc; --dim:#6b7fa3;
  --teal:#2fd0b6; --cyan:#35b3e6; --amber:#f5b342; --red:#ef5a6a; --green:#3ddc97;
  --purchase:#c084fc;
  --mono:"JetBrains Mono","Noto Sans SC",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--txt);font-family:"Noto Sans SC",-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:48px}
.tnum{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:1480px;margin:0 auto;padding:0 20px}
.hide{display:none!important}

/* ===== header ===== */
.hd{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,#0e1729,#0b1220);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:16px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo h1{font-size:20px;font-weight:800;letter-spacing:.5px}
.logo .sub{font-size:12px;color:var(--mut);margin-top:2px}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--mut);flex-wrap:wrap}
.live{display:flex;align-items:center;gap:7px}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,151,.45)}70%{box-shadow:0 0 0 7px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.clock{font-family:var(--mono);font-size:15px;color:var(--txt);font-weight:600}
.tabs{display:flex;gap:6px;margin-top:2px}
.tabbtn{padding:8px 18px;border-radius:9px;background:transparent;color:var(--mut);border:1px solid transparent;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.tabbtn:hover{color:var(--txt);background:rgba(255,255,255,.03)}
.tabbtn.on{background:var(--card);color:var(--txt);border-color:var(--line);box-shadow:inset 0 -2px 0 var(--teal)}
.lockmark{font-size:10px;color:var(--amber);border:1px solid rgba(245,179,66,.45);border-radius:4px;padding:0 4px;margin-left:6px;vertical-align:1px;font-weight:600}
.who{font-size:12px;color:var(--mut);text-align:right;line-height:1.5}
.who b{color:var(--txt);font-size:13px}
.srcbadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.srcbadge .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
.srcbadge.mock .d{background:var(--amber)}
.srcbadge button{background:none;border:none;color:var(--cyan);cursor:pointer;font-size:12px;font-family:inherit;text-decoration:underline}
.ghost-btn{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:inherit}
.ghost-btn:hover{color:var(--txt);border-color:var(--teal)}

/* ===== KPI ===== */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px 0 6px}
.kpis.five .kpi:nth-child(5){grid-column:1/-1}
@media(min-width:768px){.kpis.five{grid-template-columns:repeat(3,1fr)}.kpis.five .kpi:nth-child(5){grid-column:auto}}
@media(min-width:1100px){.kpis.five{grid-template-columns:repeat(5,1fr)}}
.kpis.three{grid-template-columns:1fr}
.kpis.four{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.kpis.four{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px){.kpis.three{grid-template-columns:repeat(3,1fr)}}
.kpi{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--teal));opacity:.9}
.kpi .t{font-size:12px;color:var(--mut)}
.kpi .v{font-size:26px;font-weight:800;margin-top:6px;font-family:var(--mono);letter-spacing:.3px}
.kpi .d{font-size:11px;color:var(--dim);margin-top:3px}
.kpi.click{cursor:pointer}
.kpi.click:hover{border-color:var(--teal)}
.kpi.warn{--kc:var(--amber)} .kpi.danger{--kc:var(--red)} .kpi.cyan{--kc:var(--cyan)} .kpi.good{--kc:var(--green)} .kpi.teal{--kc:var(--teal)}
.kpi.hot{background:linear-gradient(165deg,rgba(255,255,255,.07),transparent),var(--card);border-color:var(--kc);box-shadow:0 0 22px -8px var(--kc),inset 0 -2px 0 var(--kc)}
.kpi.hot .v{color:var(--kc)}
.kpi.hot .t{color:#cdd9ec}
.kpi.hot .d{color:#aebed6}
.kpi.on{outline:2px solid var(--kc,var(--teal));outline-offset:-2px}

/* ===== sections ===== */
.sec{margin-top:22px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sec-h .bar{width:4px;height:16px;border-radius:2px;background:var(--teal)}
.sec-h h2{font-size:16px;font-weight:700}
.sec-h .hint{font-size:12px;color:var(--dim)}
.sec-h .right{margin-left:auto;font-size:12px;color:var(--dim)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.leg{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.leg span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--mut)}
.leg i{display:inline-block;width:9px;height:9px;border-radius:2px}

/* ===== stage modules ===== */
.stages{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:900px){.stages{grid-template-columns:repeat(3,1fr)}}
.stage-col{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.stage-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.stage-h .cnt{margin-left:auto;font-family:var(--mono);color:var(--mut);font-size:12px;background:#0e1729;border:1px solid var(--line);padding:2px 9px;border-radius:12px}
.sdot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.sdot.producing{background:var(--cyan)}
.sdot.inbound{background:var(--amber)}
.sdot.shipped{background:var(--green)}
.stage-col .hint{font-size:11px;color:var(--dim);margin:-6px 0 10px}
.empty{color:var(--dim);font-size:13px;padding:26px;text-align:center;border:1px dashed var(--line);border-radius:12px}

/* ===== compact order card ===== */
.ordc{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;cursor:pointer;margin-bottom:9px;transition:border-color .12s}
.ordc:hover{border-color:var(--teal)}
.ordc:last-child{margin-bottom:0}
.ordc .r1{display:flex;align-items:flex-start;gap:8px}
.ordc .cue{font-size:10px;color:var(--dim);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}
.ordc .cue .cust{color:var(--mut)}
.ordc .cue .pcode-sm{font-family:var(--mono);color:var(--cyan)}
.ordc .prod{font-size:13px;font-weight:700;line-height:1.35;flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ordc .r1 .st{flex:none;margin-top:-1px}
.ordc .meta{font-size:11px;color:var(--mut);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.ordc .minirow{display:flex;align-items:center;gap:6px;margin-top:5px;font-family:var(--mono)}
.ordc .minirow .mlbl{font-size:10px;color:var(--mut);white-space:nowrap;min-width:88px}
.ordc .minirow .barmini{flex:1;height:5px;border-radius:3px;background:#0e1729;overflow:hidden}
.ordc .minirow .barmini i{display:block;height:100%}
.ordc .minirow .mval{font-size:10px;color:var(--dim);min-width:34px;text-align:right}
.ordc .sales{color:var(--teal);font-weight:600;margin-left:2px}
.ordc .wo{font-family:var(--mono);font-size:11px;color:var(--txt);margin-top:5px}
.ordc .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.ordc .stats .cell{background:#0d1726;border:1px solid #1b2740;border-radius:6px;padding:5px 7px;min-width:0}
.ordc .stats .k{display:block;font-size:9px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ordc .stats .v{display:block;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{font-size:12px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
.st.ahead{background:rgba(61,220,151,.14);color:var(--green)}
.st.norm{background:rgba(53,179,230,.14);color:var(--cyan)}
.st.lag{background:rgba(245,179,66,.14);color:var(--amber)}
.st.over{background:rgba(239,90,106,.16);color:var(--red)}
.st.done{background:rgba(61,220,151,.14);color:var(--green)}
.st.todo{background:#182439;color:var(--dim)}
.pcode{font-family:var(--mono);color:var(--cyan);font-weight:800}
.filterbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.filterbar .fchip{font-size:12px;padding:6px 12px;border-radius:20px;background:var(--card);border:1px solid var(--line);color:var(--mut);cursor:pointer}
.filterbar .fchip.on{color:#fff;border-color:var(--teal);background:rgba(47,208,182,.14)}
.filterbar .clear{margin-left:auto;font-size:12px;color:var(--dim);cursor:pointer}
.filterbar .clear:hover{color:var(--txt)}
.filterbar .fgroup{display:flex;align-items:center;gap:6px}
.filterbar .flabel{font-size:12px;color:var(--dim)}
.filterbar .fsel,.filterbar .fdate,.filterbar .ftext{background:#0e1729;border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:5px 8px;font-size:12px;color-scheme:dark}
.filterbar .ftext{width:220px}

/* ===== order detail band ===== */
.band{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.backbtn{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:8px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.backbtn:hover{color:var(--txt);border-color:var(--teal)}
.band .pcode{font-size:22px}
.band .oid-sm{font-size:12px;font-weight:500}
.band .cust{font-size:15px;font-weight:700}
.band .prod{font-size:13px;color:var(--mut)}
.band .m{font-size:12px;color:var(--mut)}
.band .m b{color:var(--txt);font-family:var(--mono);font-weight:600}

/* ===== charts ===== */
.chart2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media(max-width:820px){.chart2{grid-template-columns:1fr}}
.sub2 .st{font-size:12px;color:var(--mut);font-weight:600;margin-bottom:6px}
.chartbox{width:100%;background:#0c1526;border:1px solid var(--line);border-radius:10px;padding:8px 6px 4px}
.chartbox svg{display:block;width:100%;height:auto}
.chart-empty{color:var(--dim);font-size:12px;padding:40px 10px;text-align:center}

/* ===== machine board ===== */
.machines{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:1024px){.machines{grid-template-columns:repeat(4,1fr)}}
.mac{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;border-top:3px solid var(--mst,#2e4064)}
.mac.run{border-top-color:var(--green)} .mac.idle{border-top-color:var(--amber)} .mac.stop{border-top-color:var(--red)} .mac.down{border-top-color:var(--dim)} .mac.purchase{border-top-color:#c084fc}
.mac .mrow{display:flex;align-items:center;gap:10px}
.mac .mname{font-weight:700;font-size:14px}
.mac .proc{font-size:11px;color:var(--mut);background:#0e1729;border:1px solid var(--line);padding:2px 8px;border-radius:12px}
.mac .status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.mac .status .dot{width:8px;height:8px;border-radius:50%}
.mac .outrow{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px;background:#0e1729;border:1px solid var(--line);border-radius:9px;padding:10px 12px}
.mac .outrow .t{font-size:12px;color:var(--mut)}
.mac .outrow .v{font-size:15px;font-weight:800;font-family:var(--mono);color:var(--teal)}
.mac .task{font-size:12px;margin-top:12px;border-top:1px dashed var(--line);padding-top:10px;color:var(--mut);min-height:34px;line-height:1.5}
.mac .task .op{color:var(--dim);margin-left:8px}
.tblwrap table{width:100%;border-collapse:collapse;font-size:13px}
.tblwrap thead th{text-align:left;font-size:12px;color:var(--mut);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tblwrap tbody td{font-size:13px;padding:9px 10px;border-bottom:1px solid var(--line);color:var(--txt);vertical-align:middle}
.tblwrap .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tblwrap tfoot td{font-size:13px;padding:9px 10px;color:var(--mut);border-top:1px solid var(--line)}
.tblwrap tr.link{cursor:pointer}
.tblwrap tr.link:hover{background:#111d33}
.tblwrap .mn{font-weight:600;color:var(--txt)}
.tblwrap .sdot2{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.tblwrap td.bad{color:#ef5a6a}
/* ===== BOM 物料清单（列与口径对齐 华昱塑业.html 原型）===== */
.bomtblh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 10px}
.bomtbt{font-weight:800;font-size:15px;color:var(--txt)}
.bomlg{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--mut)}
.bomlg .lg{display:inline-block;width:9px;height:9px;border-radius:2px;margin-left:8px;margin-right:3px}
.bomtbl{overflow:hidden;border:1px solid var(--line);border-radius:12px}
.bomtbl table{width:100%;border-collapse:collapse;table-layout:fixed}
.bomtbl th{background:#0c1526;color:var(--dim);font-size:12px;font-weight:600;padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.bomtbl td{padding:9px 10px;font-size:13px;color:var(--txt);border-bottom:1px solid #14203a;text-align:left;vertical-align:middle}
.bomtbl tbody tr:last-child td{border-bottom:none}
.bomtbl td.num{font-family:var(--mono);text-align:right}
.bomlv{display:flex;align-items:center;gap:3px}
.bom-row .lv{font-family:var(--mono);font-size:12px;color:#35b3e6;font-weight:700}
.bom-row .pname-cell{font-size:12px;color:var(--txt);line-height:1.35}
.bom-row.bom-top{background:rgba(53,179,230,.08)}
.bom-row.bom-top td{border-top:1px solid #35b3e6}
.bomtog{flex:none;width:14px;text-align:center;cursor:pointer;color:var(--teal);font-size:11px;user-select:none}
.bomtog:hover{color:#fff}
.prog-cell{display:flex;flex-direction:column;gap:5px;min-width:0}
.prog-pct{font-size:12px;font-weight:700;margin-left:auto}
.prog-bar{height:8px;border-radius:4px;background:#0e1729;overflow:hidden}
.prog-bar i{display:block;height:100%;border-radius:4px;transition:width .3s}
.bom-note{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600}
.bom-note.note-good{background:rgba(61,220,151,.15);color:#3ddc97;border:1px solid rgba(61,220,151,.3)}
.bom-note.note-half{background:rgba(53,179,230,.12);color:#35b3e6;border:1px solid rgba(53,179,230,.25)}
.bom-note.note-pur{background:rgba(192,132,252,.12);color:#c084fc;border:1px solid rgba(192,132,252,.25)}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px}

/* ===== 7-day schedule ===== */
.sch{width:100%;border-collapse:separate;border-spacing:5px;table-layout:fixed}
.sch th{text-align:center;font-size:12px;color:var(--mut);font-weight:500;padding:6px 4px;border:none;background:none;white-space:nowrap}
.sch td{border:none;padding:0;background:none}
.sch .mname{font-size:12px;color:var(--txt);font-weight:600;text-align:right;padding-right:8px;white-space:nowrap;vertical-align:middle}
.sch .cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 5px;border-radius:7px;font-size:11px;cursor:pointer;text-align:center;min-height:50px;line-height:1.25;transition:filter .12s}
.sch .cell:hover{filter:brightness(1.14)}
.sch .today{outline:2px solid var(--teal);outline-offset:-2px}
.cell.inject{background:#2e7cf6;color:#fff}
.cell.blow{background:#2fd0b6;color:#0b1220}
.cell.stamp{background:#8f7bff;color:#fff}
.cell.print{background:#f5a623;color:#0b1220}
.cell.pack{background:#35b3e6;color:#06231e}
.cell.repair{background:#ef5a6a;color:#fff}
.cell.setup{background:#6b7fa3;color:#fff}
.cell.purchase{background:#c084fc;color:#1a0b2e}
.cell.idle{background:#2c3a55;color:#9fb0cc}
.cell.dim{opacity:.22;filter:saturate(.3)}
.cell.late{box-shadow:inset 0 0 0 2px rgba(239,90,106,.85)}
.cell .ct{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cell .cq{font-size:10px;opacity:.8;font-family:var(--mono)}

/* ===== toast / gate / login ===== */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(18px);background:var(--card2);border:1px solid var(--line);color:var(--txt);padding:11px 20px;border-radius:10px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;z-index:99;box-shadow:0 8px 30px rgba(0,0,0,.4);max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.gate,.mask{position:fixed;inset:0;background:rgba(6,10,18,.82);display:none;align-items:center;justify-content:center;z-index:120;padding:20px}
.mask.show{display:flex}
.gate:not(.hide){display:flex}
.gate .box,.mask .box{width:min(400px,94vw);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.gate h3,.mask h3{font-size:16px;margin-bottom:8px}
.gate p,.mask p{font-size:12px;color:var(--mut);line-height:1.7}
.gate .fld,.mask .fld{margin-top:14px}
.gate label,.mask label{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}
.gate select,.gate input,.mask input{width:100%;background:#0e1729;color:var(--txt);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px;font-family:inherit}
.gate .err,.mask .err{color:var(--red);font-size:12px;margin-top:8px;min-height:16px}
.gate .acts,.mask .acts{display:flex;gap:8px;margin-top:14px}
.gate .acts button,.mask .acts button{flex:1;padding:9px;border-radius:8px;font-size:13px;font-family:inherit;cursor:pointer;border:1px solid var(--line);background:#0e1729;color:var(--mut)}
.gate .acts button.pri,.mask .acts button.pri{background:var(--teal);color:#06231e;border-color:var(--teal);font-weight:700}
.mask .hintlist{font-size:11px;color:var(--dim);line-height:1.8;margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.mask .hintlist b{color:var(--mut)}

/* ===== note ===== */
.note{margin-top:24px;font-size:12px;color:var(--dim);line-height:1.8;border-top:1px solid var(--line);padding-top:14px}
.note b{color:var(--mut)}
.note code{background:#0e1729;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:var(--mono);font-size:11px}

/* ===== summary table ===== */
.sum-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.sum-tbl th{text-align:left;padding:10px 12px;font-size:13px;color:var(--mut);font-weight:500;border-bottom:1px solid var(--line);white-space:nowrap}
.sum-tbl td{padding:10px 12px;font-size:13px;color:var(--txt);border-bottom:1px solid var(--line);vertical-align:top}
.sum-tbl .r{text-align:right;font-family:var(--mono)}
.sum-tbl tfoot td{border-top:2px solid var(--line);font-weight:700}
.sum-tbl .sub{font-size:11px;color:var(--dim);margin-top:2px}

/* ===== 窄屏头部收敛（避免右侧按钮被挤出） ===== */
@media(max-width:1520px){
  .hd-in{gap:12px}
  .tabbtn{padding:8px 14px}
  .hd-right{gap:10px}
  .hd-right .live{display:none}
  .logo .sub{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 物料切换标签（每日产量区块），样式取自华昱塑业原型 */
.ctaps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ctaps .ctab{padding:5px 14px;border-radius:8px;background:#16233c;border:1px solid var(--line);color:#9fb0cc;font-size:12px;cursor:pointer;font-family:var(--mono)}
.ctaps .ctab:hover{color:var(--txt);border-color:#3a4c6e}
.ctaps .ctab.on{background:var(--teal);color:#0b1220;border-color:var(--teal);font-weight:700}

/* 机台与报工：日期筛选条（对齐原型） */
.datenav{display:flex;gap:16px;align-items:center;margin:0 0 10px;flex-wrap:wrap;background:#0e1729;border:1px solid #22304a;border-radius:6px;padding:10px 14px}
.datenav>span{font-size:12px;color:var(--dim);font-weight:600}
.datenav label{font-size:12px;color:#9fb0cc}
.datenav input[type=date]{background:#1b2740;color:#e9eff7;border:1px solid #35b3e6;border-radius:4px;padding:4px 8px;font-size:12px;margin-left:4px}
.datenav #inDateFiltD{border-color:#3ddc97}
.datenav button{background:#1b2740;color:#9fb0cc;border:1px solid #22304a;border-radius:4px;padding:4px 12px;font-size:12px;cursor:pointer}
.datenav button:hover{color:var(--txt)}