/* GCTEC V10 · 蓝狐风格界面（Element 风格配色 + GCTEC 品牌蓝） */
:root{
  --pri:#2f6bde; --pri-d:#1f4fb0; --ok:#2ea44f; --warn:#e8a33d; --ng:#e05252;
  --ink:#1f2d3d; --sub:#8492a6; --line:#e4e9f0; --bg:#f0f2f7; --card:#fff;
  --side:#001529; --side-act:#2f6bde; --side-tx:#a6b7c9;
  --gc-blue:#0055A1; --gc-orange:#E8590C;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:var(--bg);color:var(--ink);font-size:13px;overflow:hidden}
#app{display:flex;height:100vh}
.hide{display:none!important}
a{color:var(--pri);text-decoration:none;cursor:pointer}

/* ===== 侧边栏 ===== */
#side{width:190px;background:var(--side);color:var(--side-tx);display:flex;flex-direction:column;flex-shrink:0;transition:width .2s}
#side.mini{width:56px}
#side.mini .logo-name,#side.mini .m-txt,#side.mini .m-arrow,#side.mini .side-foot{display:none}
.logo{display:flex;align-items:center;gap:8px;padding:14px 12px;color:#fff;border-bottom:1px solid #ffffff14}
.logo-mark{background:var(--pri);color:#fff;font-weight:700;border-radius:6px;padding:4px 7px;font-size:14px;flex-shrink:0}
.logo-name{font-size:14px;font-weight:600;white-space:nowrap}
#menu{flex:1;overflow-y:auto;padding:6px 0}
#menu::-webkit-scrollbar{width:4px}#menu::-webkit-scrollbar-thumb{background:#ffffff2b}
.m-group{margin:2px 0}
.m-head{display:flex;align-items:center;gap:9px;padding:9px 14px;cursor:pointer;font-size:13px;user-select:none}
.m-head:hover{color:#fff}
.m-ico{width:16px;text-align:center;flex-shrink:0}
.m-txt{flex:1;white-space:nowrap}
.m-arrow{font-size:10px;transition:transform .2s}
.m-group.open .m-arrow{transform:rotate(90deg)}
.m-items{display:none}
.m-group.open .m-items{display:block}
.m-item{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 39px;cursor:pointer;font-size:12.5px;white-space:nowrap;border-left:3px solid transparent}
.m-item:hover{color:#fff;background:#ffffff0d}
.m-item.act{background:var(--side-act);color:#fff;border-left-color:#7fb0ff}
.m-item.leaf{padding-left:14px}
.side-foot{padding:10px;font-size:11px;color:#ffffff40;text-align:center;white-space:nowrap}

/* ===== 顶栏与标签页 ===== */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#topbar{height:46px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 14px;gap:14px;flex-shrink:0}
#collapse{cursor:pointer;font-size:16px;color:var(--sub)}
#collapse:hover{color:var(--pri)}
#crumb{font-size:13px;color:var(--sub)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.top-right>span{cursor:pointer;font-size:16px;position:relative}
#alarm-dot{position:absolute;top:-2px;right:-4px;width:8px;height:8px;background:var(--ng);border-radius:50%}
.avatar{background:var(--pri);color:#fff;border-radius:50%;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
#tabs{height:36px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;padding:0 8px;gap:4px;overflow-x:auto;flex-shrink:0}
.tab{padding:6px 12px;font-size:12px;color:var(--sub);background:#fafbfc;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.tab.act{color:var(--pri);background:var(--bg);font-weight:600}
.tab .x{font-size:10px;color:#c0c4cc}.tab .x:hover{color:var(--ng)}

/* ===== 内容区 ===== */
#pages{flex:1;overflow:auto;padding:12px;position:relative}
.page{display:none}.page.act{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin-bottom:12px}
.card h3{font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:4px;height:14px;background:var(--pri);border-radius:2px}

/* KPI 卡 */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 14px;cursor:default;transition:border-color .15s,box-shadow .15s}
.kpi[data-goto]:hover{border-color:var(--pri);box-shadow:0 2px 8px #2f6bde22}
.kpi .v{font-size:26px;font-weight:700;color:var(--pri);font-family:Arial}
.kpi.warn .v{color:var(--ng)}
.kpi .l{color:var(--sub);font-size:12px;margin-top:4px}

/* 筛选与工具条 */
.filters{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px}
.filters label{color:var(--sub);font-size:12px}
.filters input,.filters select{height:30px;border:1px solid var(--line);border-radius:5px;padding:0 8px;font-size:12px;outline:none;font-family:inherit}
.filters input:focus,.filters select:focus{border-color:var(--pri)}
.pills{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pill{padding:4px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--sub);cursor:pointer;font-size:12px}
.pill.act{background:var(--pri);color:#fff;border-color:var(--pri)}
.toolbar{display:flex;gap:8px;margin-bottom:10px;align-items:center}
.toolbar .sp{flex:1}

/* 按钮 */
.btn{height:30px;padding:0 14px;border-radius:5px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:12px;font-family:inherit;display:inline-flex;align-items:center;gap:4px}
.btn:hover{border-color:var(--pri);color:var(--pri)}
.btn-pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn-pri:hover{background:var(--pri-d);color:#fff}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn-warn{background:var(--warn);border-color:var(--warn);color:#fff}
.btn-ng{background:#fff;border-color:var(--ng);color:var(--ng)}
.btn-sm{height:24px;padding:0 8px;font-size:11px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* 表格 */
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{background:#f5f7fa;color:var(--sub);font-weight:600;padding:9px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 10px;border-bottom:1px solid #f0f2f5;white-space:nowrap}
.tbl tr:hover td{background:#f7faff}
.tbl .num{font-family:Arial}
/* Only explicitly identified action columns freeze; data columns retain normal scrolling. */
.tbl.gc-actions-table{border-collapse:separate;border-spacing:0}
.tbl.gc-actions-table>thead>tr>.gc-actions-col,.tbl.gc-actions-table>tbody>tr>.gc-actions-col{position:sticky;right:0;z-index:1;min-width:112px;background:#fff;box-shadow:-7px 0 9px -8px #7e8aa6}
.tbl.gc-actions-table>thead>tr>.gc-actions-col{z-index:3;background:#f5f7fa}
.tbl.gc-actions-table>tbody>tr:hover>.gc-actions-col{background:#f7faff}
@media print{.tbl.gc-actions-table>thead>tr>.gc-actions-col,.tbl.gc-actions-table>tbody>tr>.gc-actions-col{position:static;box-shadow:none}}
.empty{padding:36px;text-align:center;color:var(--sub)}

/* 状态标签 */
.tag{display:inline-block;padding:1px 8px;border-radius:9px;font-size:11px}
.tag-blue{background:#e8f0fe;color:var(--pri)}
.tag-green{background:#e6f6ec;color:var(--ok)}
.tag-orange{background:#fdf3e3;color:var(--warn)}
.tag-red{background:#fdeaea;color:var(--ng)}
.tag-gray{background:#f0f2f5;color:var(--sub)}

/* 进度条 */
.prog{height:6px;background:#eef1f6;border-radius:3px;overflow:hidden;min-width:80px}
.prog i{display:block;height:100%;background:var(--pri);border-radius:3px}

/* 流程图 */
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 0}
.flow .fnode{background:#eef4ff;border:1px solid #c9dcff;color:var(--pri-d);border-radius:6px;padding:8px 12px;text-align:center;min-width:86px;cursor:pointer}
.flow .fnode:hover{background:#dce9ff}
.flow .fnode .n{font-weight:700;font-family:Arial;font-size:15px}
.flow .fnode .t{font-size:11px;color:var(--sub)}
.flow .farr{color:#b6c6e8;font-size:16px}

/* 双栏（快速报工） */
.split{display:grid;grid-template-columns:1fr 380px;gap:12px}
@media (max-width:1100px){.split{grid-template-columns:1fr}}
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.form-row label{width:76px;text-align:right;color:var(--sub);font-size:12px;flex-shrink:0}
.form-row label.req::before{content:"*";color:var(--ng);margin-right:2px}
.form-row input,.form-row select,.form-row textarea{flex:1;height:32px;border:1px solid var(--line);border-radius:5px;padding:0 9px;font-size:12.5px;outline:none;font-family:inherit}
.form-row textarea{height:auto;padding:7px 9px}
.form-row input:focus{border-color:var(--pri)}
.form-row .ro{background:#f7f9fc;color:var(--ink)}

/* 质检三卡片 */
.qc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:12px}
.qc-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px}
.qc-card h4{font-size:14px;margin-bottom:12px;color:var(--ink)}
.qc-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.qc-nums .v{font-size:20px;font-weight:700;font-family:Arial;color:var(--pri)}
.qc-nums .v.red{color:var(--ng)}.qc-nums .v.green{color:var(--ok)}
.qc-nums .l{font-size:11px;color:var(--sub);margin-top:2px}
.qc-links{margin-top:12px;display:flex;gap:8px}

/* 看板（深色大屏） */
.board-page{background:#04101f!important;margin:-12px;padding:18px;min-height:calc(100vh - 94px);color:#cfe3ff}
.board-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.board-title{font-size:20px;font-weight:700;letter-spacing:2px;color:#7fb0ff}
.board-kpis{display:flex;gap:14px;margin-bottom:14px}
.board-kpi{background:#0a1c33;border:1px solid #14365f;border-radius:8px;padding:10px 18px;text-align:center}
.board-kpi .v{font-size:22px;font-weight:700;color:#4da3ff;font-family:Arial}
.board-kpi .l{font-size:11px;color:#6f8db5}
.board-wo{background:#0a1c33;border:1px solid #14365f;border-radius:8px;padding:12px 14px;margin-bottom:10px}
.board-wo-head{display:flex;gap:14px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.board-wo-head .code{color:#4da3ff;font-weight:700;font-family:Arial}
.board-wo-head .dim{color:#6f8db5;font-size:12px}
.op-chain{display:flex;flex-wrap:wrap;gap:0;align-items:flex-start}
.op-node{width:64px;text-align:center;position:relative;padding-top:2px}
.op-node .dot{width:22px;height:22px;border-radius:50%;margin:0 auto;border:2px solid #2b4f7d;background:#0a1c33;display:flex;align-items:center;justify-content:center;font-size:12px;color:#2b4f7d}
.op-node.done .dot{border-color:#2ea44f;background:#2ea44f;color:#fff}
.op-node.doing .dot{border-color:#4da3ff;background:#4da3ff;color:#fff;box-shadow:0 0 8px #4da3ff88}
.op-node .nm{font-size:10px;color:#7fa0c9;margin-top:3px;white-space:nowrap;overflow:hidden}
.op-node.done .nm{color:#5fc98a}.op-node.doing .nm{color:#4da3ff}
.op-line{width:14px;height:2px;background:#2b4f7d;margin-top:11px;flex-shrink:0}
.op-line.done{background:#2ea44f}

/* 弹窗 / toast */
#modal-mask{position:fixed;inset:0;background:#0006;z-index:90;display:flex;align-items:center;justify-content:center}
#modal{background:#fff;border-radius:10px;width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column}
#modal-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px}
#modal-close{cursor:pointer;color:var(--sub)}#modal-close:hover{color:var(--ng)}
#modal-body{padding:16px 18px;overflow:auto}
#toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast-msg{background:#1f2d3d;color:#fff;padding:9px 20px;border-radius:6px;font-size:13px;box-shadow:0 4px 16px #0003;animation:tin .2s}
.toast-msg.ok{background:var(--ok)}.toast-msg.err{background:var(--ng)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

/* 追溯链 */
.chain{display:flex;flex-direction:column;gap:0}
.chain-node{display:flex;gap:12px;align-items:flex-start}
.chain-node .c-dot{width:12px;height:12px;border-radius:50%;background:var(--ok);margin-top:3px;flex-shrink:0}
.chain-node .c-dot.miss{background:var(--ng)}
.chain-node .c-line{width:2px;background:var(--line);flex:1;margin-left:5px;min-height:14px}
.chain-body{padding-bottom:14px}
.chain-body .t{font-weight:600}
.chain-body .d{color:var(--sub);font-size:12px;margin-top:2px}

/* 明细两栏 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}
.kv{display:flex;font-size:12.5px;margin-bottom:6px}
.kv b{width:110px;color:var(--sub);font-weight:400;flex-shrink:0}