﻿/* ============================================================
   页面级样式
   ============================================================ */

/* ───────── 工作台：业务链条 ───────── */
.flow{
  display:flex;align-items:stretch;gap: 0;overflow-x:auto;padding: 2px 0 6px;
}
.flow__node{
  flex:1;min-width:92px;position:relative;
  padding: 12px 12px 12px 16px;
  background:var(--surface);border:1px solid var(--line);
  border-left:none;border-radius: 0;
  cursor:pointer;transition:.2s var(--ease);
}
.flow__node:first-child{border-left:1px solid var(--line);border-radius: var(--r-md) 0 0 var(--r-md);padding-left: 12px;}
.flow__node:last-child{border-radius: 0 var(--r-md) var(--r-md) 0;}
.flow__node:hover{background:var(--pri-100);z-index:3;border-color:var(--pri-200);}
.flow__node + .flow__node{border-left:none;}
.flow__node::after{
  content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:16px;height:16px;background:var(--surface);
  border-top:1px solid var(--line);border-right:1px solid var(--line);
  z-index:4;
}
.flow__node:last-child::after{display:none;}
.flow__node:hover::after{background:var(--pri-100);}
.flow__k{font-size: 12px;color:var(--ink-500);display:flex;align-items:center;gap: 4px;white-space:nowrap;}
.flow__k svg{width:13px;height:13px;color:var(--ink-400);flex:none;}
.flow__v{
  font-family:var(--ff-num);font-size: 20px;font-weight:700;color:var(--ink-900);
  letter-spacing:-.02em;line-height: 1.2;margin-top: 6px;
}
.flow__v small{font-size: 11px;color:var(--ink-400);font-weight:500;font-family:var(--ff);margin-left:3px;}
.flow__n{font-size: 11px;color:var(--ink-400);margin-top: 4px;line-height: 1.35;}
.flow__node--hot{background:var(--dang-100);border-color:var(--dang-200);}
.flow__node--hot .flow__v{color:var(--dang);}
.flow__node--hot .flow__k{color:var(--dang);}
.flow__node--hot .flow__k svg{color:var(--dang);}
.flow__node--hot::after{background:var(--dang-100);border-color:var(--dang-200);}
.flow__node--hot:hover{background:var(--dang-100);}

/* 流水线列 */
.pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap: 12px;}
.pipeline--fill{flex:1;}
@media (max-width:1240px){.pipeline{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:760px){.pipeline{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pipe{
  border:1px solid var(--line);border-radius: var(--r-lg);background:var(--surface);
  padding: 12px 16px;cursor:pointer;transition:.18s var(--ease);position:relative;overflow:hidden;
  box-shadow:var(--sh-1);
  display:flex;flex-direction:column;justify-content:center;
}
.pipe:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);transform:translateY(-1px);}
.pipe__top{display:flex;align-items:center;justify-content:space-between;gap: 6px;}
.pipe__k{font-size: 13px;color:var(--ink-600);font-weight:500;display:flex;align-items:center;gap: 6px;}
.pipe__k svg{width:14px;height:14px;color:var(--ink-400);}
.pipe__n{font-family:var(--ff-num);font-size: 24px;font-weight:700;color:var(--ink-900);letter-spacing:-.02em;margin-top: 8px;line-height: 1;}
.pipe__n small{font-size: 11px;color:var(--ink-400);font-family:var(--ff);margin-left:2px;}
.pipe__d{font-size: 11px;color:var(--ink-400);margin-top: 6px;line-height: 1.5;}
.pipe__bar{margin-top: 10px;}
.pipe--hot{border-color:var(--dang-200);background:var(--dang-100);}
.pipe--hot .pipe__n{color:var(--dang);}
.pipe--hot .pipe__k{color:var(--dang);}
.pipe--hot .pipe__k svg{color:var(--dang);}
.pipe--warn{border-color:var(--warn-200);background:var(--warn-100);}
.pipe--warn .pipe__n{color:var(--warn);}
.pipe--warn .pipe__k{color:var(--warn);}

/* 待办清单 */
.todo{display:flex;align-items:center;gap: 12px;padding: 12px 20px;border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .12s;}
.todo:hover{background:var(--surface-2);}
.todo:last-child{border-bottom:none;}
.todo__pri{width:3px;height:30px;border-radius: 999px;flex:none;background:var(--ink-200);}
.todo__pri--high{background:var(--dang);}
.todo__pri--mid{background:var(--warn);}
.todo__pri--low{background:var(--ink-200);}
.todo__b{flex:1;min-width:0;}
.todo__t{font-size: 13px;color:var(--ink-900);font-weight:600;display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.todo__m{font-size: 12px;color:var(--ink-400);margin-top: 4px;display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.todo__r{flex:none;text-align:right;}
.todo__time{font-size: 12px;color:var(--ink-500);font-family:var(--ff-num);}
.todo__age{font-size: 11px;color:var(--ink-400);margin-top: 4px;}
.todo__age--late{color:var(--dang);font-weight:600;}

/* 概览列表 */
.ov{display:flex;flex-direction:column;gap: 12px;}
.ov__row{display:flex;align-items:center;gap: 12px;}
.ov__l{font-size: 13px;color:var(--ink-600);width:80px;flex:none;}
.ov__bar{flex:1;height:7px;border-radius: 999px;background:var(--ink-100);overflow:hidden;}
.ov__bar i{display:block;height:100%;border-radius: 999px;transition:width .6s var(--ease);}
.ov__v{font-family:var(--ff-num);font-size: 13px;color:var(--ink-900);font-weight:700;width:48px;text-align:right;flex:none;}

/* 近效期预警 */
.exp{display:flex;align-items:center;gap: 12px;padding: 10px 0;border-bottom:1px dashed var(--line);}
.exp:last-child{border-bottom:none;}
.exp__bar{flex:1;height:6px;border-radius: 999px;background:var(--ink-100);overflow:hidden;}
.exp__bar i{display:block;height:100%;border-radius: 999px;}

/* 飞检入口卡（对标参考模板的 bg-primary-gradient 高亮卡） */
.flycard{
  position:relative;overflow:hidden;border-radius: var(--r-lg);padding: 20px;
  background:linear-gradient(135deg,#8351FD 0%,#7539FF 48%,#5112A9 100%);
  color:#fff;cursor:pointer;transition:.22s var(--ease);
  box-shadow:0 10px 30px -14px rgba(117,57,255,.75);
  display:flex;flex-direction:column;justify-content:center;
}
.flycard:hover{transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(117,57,255,.85);}
.flycard::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius: 50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);
}
.flycard__k{font-size: 11px;font-weight:700;letter-spacing:.16em;color:#E3DBFF;display:flex;align-items:center;gap: 8px;}
.flycard__k svg{width:14px;height:14px;}
.flycard__t{font-size: 20px;font-weight:700;margin-top: 8px;letter-spacing:-.01em;}
.flycard__d{font-size: 13px;color:#E8E2FF;margin-top: 8px;line-height: 1.6;max-width:440px;}
.flycard__actions{display:flex;gap: 8px;margin-top: 16px;position:relative;z-index:2;}
.flycard__btn{
  height:32px;padding: 0 12px;border-radius: var(--r-md);font-size: 13px;font-weight:500;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);color:#fff;
  display:inline-flex;align-items:center;gap: 6px;transition:.16s;
}
.flycard__btn:hover{background:rgba(255,255,255,.28);}
.flycard__btn svg{width:14px;height:14px;}
.flycard .btn--primary{background:#fff;color:var(--pri);border-color:#fff;box-shadow:none;}
.flycard .btn--primary:hover{background:#fff;color:var(--pri-600);}

/* ───────── 卡片式业务实体 ───────── */
.ent{
  border:1px solid var(--line);border-radius: var(--r-md);background:var(--surface);
  padding: 12px 16px;cursor:pointer;transition:.18s var(--ease);position:relative;
  box-shadow:var(--sh-1);
}
.ent:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);transform:translateY(-1px);}
.ent__top{display:flex;align-items:flex-start;justify-content:space-between;gap: 8px;}
.ent__t{font-size: 14px;font-weight:600;color:var(--ink-900);line-height: 1.5;}
.ent__m{font-size: 12px;color:var(--ink-400);margin-top: 4px;font-family:var(--ff-num);}
.ent__tags{display:flex;flex-wrap:wrap;gap: 6px;margin-top: 10px;}
.ent__foot{display:flex;align-items:center;justify-content:space-between;gap: 8px;margin-top: 10px;padding-top: 10px;border-top:1px solid var(--line-soft);font-size: 12px;color:var(--ink-400);}

/* 仓库卡片 */
.wh-card{
  border:1px solid var(--line);border-radius: var(--r-lg);background:var(--surface);
  padding: 16px;transition:.18s var(--ease);cursor:pointer;box-shadow:var(--sh-1);
}
.wh-card:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);transform:translateY(-1px);}
.wh-card__top{display:flex;align-items:center;gap: 10px;}
.wh-card__ico{width:36px;height:36px;border-radius: 50%;background:linear-gradient(140deg,#8B5CFF,#5B21D6);display:grid;place-items:center;color:#fff;flex:none;}
.wh-card__ico svg{width:18px;height:18px;}
.wh-card__t{font-size: 14px;font-weight:600;color:var(--ink-900);}
.wh-card__m{font-size: 12px;color:var(--ink-400);margin-top: 2px;}
.wh-card__stats{display:grid;grid-template-columns:repeat(3,1fr);gap: 8px;margin-top: 12px;padding-top: 12px;border-top:1px solid var(--line-soft);}
.wh-card__stat{text-align:center;}
.wh-card__stat b{display:block;font-family:var(--ff-num);font-size: 16px;color:var(--ink-900);font-weight:700;}
.wh-card__stat span{font-size: 11px;color:var(--ink-400);}

/* ───────── 资质 / 证书 ───────── */
.cert{
  display:flex;gap: 12px;align-items:flex-start;padding: 12px 12px;
  border:1px solid var(--line);border-radius: var(--r-md);background:var(--surface);
  transition:.16s var(--ease);box-shadow:var(--sh-1);
}
.cert:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);}
.cert__ico{
  width:36px;height:36px;border-radius: 50%;flex:none;display:grid;place-items:center;
  background:var(--pri-100);color:var(--pri);
}
.cert__ico svg{width:17px;height:17px;}
.cert__t{font-size: 13px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.cert__no{font-size: 12px;color:var(--ink-500);font-family:var(--ff-num);margin-top: 4px;}
.cert__valid{font-size: 12px;color:var(--ink-400);margin-top: 4px;display:flex;align-items:center;gap: 6px;flex-wrap:wrap;}
.cert--expired .cert__ico{background:var(--dang-100);color:var(--dang);}
.cert--soon .cert__ico{background:var(--warn-100);color:var(--warn);}

/* ───────── UDI 解析 ───────── */
.udi{
  border:1px solid var(--line);border-radius: var(--r-md);background:var(--surface-2);
  padding: 16px;font-family:var(--ff-num);
}
.udi__raw{
  font-size: 13px;color:var(--ink-800);word-break:break-all;letter-spacing:.02em;
  background:#fff;border:1px solid var(--line);border-radius: var(--r-md);padding: 10px 12px;
}
.udi__seg{display:flex;flex-wrap:wrap;gap: 8px;margin-top: 12px;}
.udi__s{
  display:flex;align-items:center;gap: 8px;padding: 6px 10px;border-radius: var(--r-sm);
  background:#fff;border:1px solid var(--line);font-size: 12px;color:var(--ink-800);
}
.udi__s b{
  font-size: 10px;font-weight:700;color:#fff;background:var(--ink-700);
  border-radius: 4px;padding: 2px 4px;letter-spacing:.04em;
}
.udi__s--di b{background:var(--pri);} .udi__s--pi b{background:var(--teal);}
.udi__s--lot b{background:var(--violet);} .udi__s--exp b{background:var(--warn);}
.udi__s--sn b{background:var(--ink-800);}
.scan-log{border:1px solid var(--line);border-radius: var(--r-md);overflow:hidden;background:var(--surface);}
.scan-log__i{display:flex;align-items:center;gap: 10px;padding: 10px 12px;border-bottom:1px solid var(--line-soft);font-size: 12px;}
.scan-log__i:last-child{border-bottom:none;}
.scan-log__t{font-family:var(--ff-num);color:var(--ink-700);flex:1;min-width:0;}

/* ───────── 追溯链 ───────── */
.trace-chain{display:flex;flex-direction:column;gap: 0;}
.tc{display:flex;gap: 12px;position:relative;padding-bottom: 4px;}
.tc__rail{width:30px;flex:none;display:flex;flex-direction:column;align-items:center;}
.tc__node{
  width:30px;height:30px;border-radius: 50%;display:grid;place-items:center;flex:none;
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink-400);z-index:2;
}
.tc__node svg{width:14px;height:14px;}
.tc__line{flex:1;width:1.5px;background:var(--line);margin:4px 0;}
.tc:last-child .tc__line{display:none;}
.tc__body{flex:1;min-width:0;padding-bottom: 16px;}
.tc__card{
  border:1px solid var(--line);border-radius: var(--r-md);background:var(--surface);
  padding: 12px 12px;transition:.16s var(--ease);cursor:pointer;box-shadow:var(--sh-1);
}
.tc__card:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);transform:translateY(-1px);}
.tc__t{font-size: 14px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.tc__d{font-size: 13px;color:var(--ink-500);margin-top: 4px;line-height: 1.6;}
.tc__meta{display:flex;flex-wrap:wrap;gap: 12px;margin-top: 8px;font-size: 12px;color:var(--ink-400);}
.tc__meta b{color:var(--ink-700);font-weight:600;font-family:var(--ff-num);}
.tc--ok .tc__node{background:var(--ok);border-color:var(--ok);color:#fff;}
.tc--pri .tc__node{background:var(--pri);border-color:var(--pri);color:#fff;}
.tc--warn .tc__node{background:var(--warn);border-color:var(--warn);color:#fff;}
.tc--dang .tc__node{background:var(--dang);border-color:var(--dang);color:#fff;}
.tc--muted .tc__node{background:var(--ink-100);border-color:var(--line);color:var(--ink-400);}

/* ───────── 飞检模式 ───────── */
.mode-inspect .flycard{
  background:linear-gradient(135deg,#C2410C 0%,#9A3412 52%,#7C2D12 100%);
  box-shadow:0 10px 30px -14px rgba(194,65,12,.7);
}
.inspect-panel{
  border:1px solid var(--pri-200);border-radius: var(--r-lg);
  background:linear-gradient(180deg,var(--pri-100),#fff 68%);
  padding: 20px;box-shadow:var(--sh-2);
}
.inspect-panel__t{font-size: 16px;font-weight:700;color:var(--ink-900);display:flex;align-items:center;gap: 8px;}
.inspect-panel__t svg{width:18px;height:18px;color:var(--pri);}
.evidence{
  border:1px solid var(--line);border-left:3px solid var(--pri);
  border-radius: var(--r-sm);background:#fff;padding: 12px 12px;box-shadow:var(--sh-1);
}
.evidence__t{font-size: 13px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap: 8px;}
.evidence__t svg{width:14px;height:14px;flex:none;color:var(--ok);}
.evidence__d{font-size: 12px;color:var(--ink-500);margin-top: 4px;line-height: 1.6;}
.evidence__f{font-size: 11px;color:var(--ink-400);margin-top: 6px;display:flex;gap: 12px;flex-wrap:wrap;font-family:var(--ff-num);}

/* ───────── 看板 ───────── */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap: 12px;}
@media (max-width:1200px){.kanban{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:760px){.kanban{grid-template-columns:minmax(0,1fr);}}
.kan-col{
  background:var(--surface-2);border:1px solid var(--line);border-radius: var(--r-lg);
  padding: 12px;min-height:160px;transition:.18s var(--ease);
}
.kan-col:hover{border-color:var(--line-strong);}
.kan-col__head{display:flex;align-items:center;justify-content:space-between;gap: 6px;margin-bottom: 10px;padding: 0 2px;}
.kan-col__t{font-size: 13px;font-weight:600;color:var(--ink-700);display:flex;align-items:center;gap: 6px;}
.kan-col__n{font-size: 11px;font-weight:700;padding: 2px 8px;border-radius: var(--r-full);background:#fff;color:var(--ink-500);border:1px solid var(--line);font-family:var(--ff-num);}
.kan-card{
  background:#fff;border:1px solid var(--line);border-radius: var(--r-md);
  padding: 12px;margin-bottom: 8px;cursor:pointer;transition:.16s var(--ease);box-shadow:var(--sh-1);
}
.kan-card:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);transform:translateY(-1px);}
.kan-card:last-child{margin-bottom: 0;}
.kan-card__t{font-size: 13px;font-weight:600;color:var(--ink-900);line-height: 1.5;}
.kan-card__m{font-size: 11px;color:var(--ink-400);margin-top: 4px;display:flex;align-items:center;gap: 6px;flex-wrap:wrap;}

/* ───────── 文档列表 ───────── */
.doc{
  display:flex;align-items:center;gap: 12px;padding: 12px 20px;border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:background .12s;
}
.doc:hover{background:var(--surface-2);}
.doc:last-child{border-bottom:none;}
.doc__ico{
  width:34px;height:40px;border-radius: 4px;flex:none;position:relative;
  background:linear-gradient(160deg,#fff,#F2F4F7);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-400);
  box-shadow:var(--sh-1);
}
.doc__ico::after{content:"";position:absolute;top:0;right:0;border:7px solid transparent;border-top-color:var(--line);border-right-color:var(--line);}
.doc__ico svg{width:16px;height:16px;}
.doc__b{flex:1;min-width:0;}
.doc__t{font-size: 13px;font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap: 8px;flex-wrap:wrap;}
.doc__m{font-size: 12px;color:var(--ink-400);margin-top: 4px;display:flex;align-items:center;gap: 10px;flex-wrap:wrap;}
.doc__r{flex:none;text-align:right;display:flex;flex-direction:column;gap: 4px;align-items:flex-end;}

/* ───────── 质量异常类型卡 ───────── */
.qtype{
  border:1px solid var(--line);border-radius: var(--r-md);background:var(--surface);
  padding: 12px;cursor:pointer;transition:.18s var(--ease);box-shadow:var(--sh-1);
}
.qtype:hover{border-color:var(--pri-200);box-shadow:var(--sh-2);transform:translateY(-1px);}
.qtype__top{display:flex;align-items:center;justify-content:space-between;}
.qtype__ico{width:32px;height:32px;border-radius: 50%;background:var(--pri-100);display:grid;place-items:center;color:var(--pri);}
.qtype__ico svg{width:16px;height:16px;}
.qtype__n{font-family:var(--ff-num);font-size: 20px;font-weight:700;color:var(--ink-900);letter-spacing:-.02em;}
.qtype__t{font-size: 13px;color:var(--ink-700);font-weight:600;margin-top: 8px;}
.qtype__d{font-size: 11px;color:var(--ink-400);margin-top: 4px;line-height: 1.5;}

/* ───────── 部门树 ───────── */
.tree{font-size: 13px;}
.tree__node{
  display:flex;align-items:center;gap: 8px;padding: 8px 12px;border-radius: var(--r-md);
  cursor:pointer;transition:.14s;
}
.tree__node:hover{background:var(--surface-2);}
.tree__node.is-on{background:var(--pri-100);color:var(--pri);font-weight:600;}
.tree__caret{width:15px;height:15px;color:var(--ink-400);flex:none;transition:transform .18s;}
.tree__node.is-open .tree__caret{transform:rotate(90deg);}
.tree__ico{width:26px;height:26px;border-radius: 50%;background:var(--ink-100);display:grid;place-items:center;color:var(--ink-500);flex:none;}
.tree__ico svg{width:14px;height:14px;}
.tree__c{margin-left:auto;font-size: 12px;color:var(--ink-400);font-family:var(--ff-num);}
.tree__kids{margin-left:22px;border-left:1px dashed var(--line-strong);padding-left: 10px;}

/* ───────── 质量锁定标记 ───────── */
.lockbar{
  display:flex;align-items:center;gap: 8px;padding: 8px 12px;border-radius: var(--r-md);
  background:var(--dang-100);border:1px solid var(--dang-200);color:var(--dang);
  font-size: 13px;font-weight:600;
}
.lockbar svg{width:15px;height:15px;flex:none;}

/* ───────── 图表容器 ───────── */
.chart-wrap{width:100%;position:relative;}
.chart-legend{display:flex;flex-wrap:wrap;gap: 12px;margin-top: 12px;}
.chart-legend__i{display:flex;align-items:center;gap: 6px;font-size: 12px;color:var(--ink-500);}
.chart-legend__sw{width:9px;height:9px;border-radius: 4px;flex:none;}
.chart-legend__v{font-family:var(--ff-num);color:var(--ink-900);font-weight:700;}

/* ───────── 热力条 ───────── */
.heat{display:grid;gap: 4px;}
.heat__cell{height:24px;border-radius: 4px;background:var(--ink-100);}
.heat__cell--1{background:#EFE9FF;} .heat__cell--2{background:#DFD0FF;}
.heat__cell--3{background:#C3A3FF;} .heat__cell--4{background:#A274FF;}
.heat__cell--5{background:#7539FF;}

/* ───────── 轻量统计卡 ───────── */
.mini-stat{
  display:flex;align-items:center;gap: 10px;padding: 12px 12px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius: var(--r-md);background:var(--surface);box-shadow:var(--sh-1);
}
.mini-stat>div:first-child{min-width:104px;}
.mini-stat__v{font-family:var(--ff-num);font-size: 20px;font-weight:700;color:var(--ink-900);letter-spacing:-.02em;}
.mini-stat__k{font-size: 12px;color:var(--ink-500);margin-top: 2px;line-height: 1.35;}
