/* ===== 晋江市达望鞋业 ERP · 千牛/淘宝卖家后台风格 ===== */
:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --line:#e9eaee;
  --line-2:#f2f3f5;
  --text:#26292e;
  --sub:#8a8f99;
  --primary:#ff6a00;
  --primary-2:#ff9838;
  --primary-soft:#fff3e8;
  --green:#00b06a;
  --red:#e8341c;
  --blue:#2b7cf6;
  --purple:#7a5af8;
  --side:#23262c;
  --side-2:#2c3037;
  --side-text:#b9bfc9;
  --radius:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d7d9de;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:206px;flex:0 0 206px;background:var(--side);color:var(--side-text);
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:30;
}
.side-logo{
  height:56px;display:flex;align-items:center;gap:9px;padding:0 16px;
  background:linear-gradient(90deg,#ff6a00,#ff9838);color:#fff;font-weight:700;letter-spacing:.5px;
}
.side-logo .logo-badge{
  width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.side-logo small{display:block;font-weight:400;font-size:11px;opacity:.85;line-height:1.1}
.side-scroll{flex:1;overflow-y:auto;padding:10px 8px 30px}
.side-tools{display:flex;align-items:center;gap:8px;padding:2px 12px 8px;border-bottom:1px solid #31353c;margin-bottom:4px}
.side-tool{font-size:11px;color:#7d848f;cursor:pointer;letter-spacing:0}
.side-tool:hover{color:#ffb066}
.side-tool.right{margin-left:auto}
.side-group{
  margin:10px 8px 4px;font-size:11px;color:#7d848f;letter-spacing:1px;
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:5px 8px;border-radius:6px;cursor:pointer;user-select:none;transition:.15s;
}
.side-group:hover{background:var(--side-2);color:#dfe3e9}
.side-group .arrow{font-size:10px;line-height:1;transition:transform .18s;opacity:.75}
.side-group.collapsed .arrow{transform:rotate(-90deg)}
.side-group .dot-in{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--primary);margin-left:6px;vertical-align:middle}
.side-sub{overflow:hidden}
.side-sub.hide{display:none}
.side-item{margin-bottom:2px}
.side-item{
  display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:8px;cursor:pointer;
  color:var(--side-text);font-size:13px;margin-bottom:2px;transition:.15s;
}
.side-item .ico{width:16px;text-align:center;font-size:14px;opacity:.9}
.side-item:hover{background:var(--side-2);color:#fff}
.side-item.active{background:linear-gradient(90deg,rgba(255,106,0,.9),rgba(255,152,56,.75));color:#fff;font-weight:600}
.side-item .badge{margin-left:auto;background:var(--red);color:#fff;font-size:10px;padding:0 5px;border-radius:8px;line-height:16px}
.side-item.locked{opacity:.42;cursor:not-allowed}

.main{flex:1;margin-left:206px;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:56px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:14px;padding:0 18px;position:sticky;top:0;z-index:20;
}
.topbar .date-chip{color:var(--sub);font-size:12px}
.topbar .grow{flex:1}
.select{
  height:30px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:0 8px;
  font-size:12px;color:var(--text);outline:none;
}
.bell{position:relative;cursor:pointer;font-size:16px;line-height:1}
.bell .dot{position:absolute;top:-2px;right:-4px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.avatar{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.page{padding:16px 18px 40px;flex:1 0 auto}
.crumb{color:var(--sub);font-size:12px;margin-bottom:10px}
.crumb b{color:var(--text);font-weight:600}
.page-title{display:flex;align-items:flex-end;gap:10px;margin:2px 0 14px}
.page-title h2{margin:0;font-size:19px;font-weight:700;letter-spacing:.3px}
.page-title .sub{color:var(--sub);font-size:12px;padding-bottom:2px}

/* ---------- Cards / Grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-hd{padding:12px 14px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-hd h3{margin:0;font-size:14px;font-weight:600}
.card-bd{padding:14px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}.sidebar{display:none}.main{margin-left:0}}

/* ---------- Stat ---------- */
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.stat .t{color:var(--sub);font-size:12px;display:flex;align-items:center;gap:6px}
.stat .v{font-size:25px;font-weight:700;letter-spacing:-.5px;margin-top:5px;font-family:"DIN Alternate","Arial Narrow",Arial,sans-serif}
.stat .f{font-size:11px;color:var(--sub);margin-top:3px}
.stat .up{color:var(--red)}.stat .down{color:var(--green)}
.stat::after{content:"";position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:rgba(255,106,0,.05)}
.stat.blue::after{background:rgba(43,124,246,.06)}
.stat.green::after{background:rgba(0,176,106,.06)}
.stat.purple::after{background:rgba(122,90,248,.06)}

/* ---------- Table ---------- */
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.input,.search{
  height:30px;border:1px solid var(--line);border-radius:6px;padding:0 10px;font-size:12px;outline:none;background:#fff;color:var(--text);
}
.input:focus,.search:focus{border-color:var(--primary-2);box-shadow:0 0 0 2px rgba(255,106,0,.1)}
.btn{
  height:30px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--text);
  font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.15s;
}
.btn:hover{border-color:var(--primary-2);color:var(--primary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:#e55f00;color:#fff}
.btn.ghost-danger:hover{border-color:var(--red);color:var(--red)}
.btn.sm{height:26px;padding:0 9px;font-size:11px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{
  background:#fafbfc;color:#5c626c;font-weight:600;text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1;
}
table.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap;vertical-align:middle}
table.tbl tbody tr:hover{background:#fffaf5}
table.tbl tbody tr:last-child td{border-bottom:none}
.t-empty{padding:40px;text-align:center;color:var(--sub)}
.rowacts{display:flex;gap:6px}
.link{color:var(--blue);cursor:pointer}
.link.danger{color:var(--red)}

.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;line-height:18px;border:1px solid transparent}
.tag.g{background:#e9f8f1;color:#0a8d57;border-color:#c9ecdc}
.tag.o{background:#fff4e8;color:#d96a00;border-color:#ffdcbd}
.tag.r{background:#fdeceb;color:#cc2f1b;border-color:#f9cfc9}
.tag.b{background:#edf3ff;color:#1c62cf;border-color:#cfdefb}
.tag.p{background:#f4efff;color:#6244e0;border-color:#e2d8ff}
.tag.gray{background:#f2f3f5;color:#6b7280;border-color:#e5e6eb}
.bar{height:6px;border-radius:6px;background:#f0f1f3;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.bar.g i{background:linear-gradient(90deg,#00b06a,#4ddb9e)}
.inp-sm{height:26px;border:1px solid var(--line);border-radius:6px;padding:0 6px;font-size:12px;outline:none;background:#fff;color:var(--text);text-align:right}
.avatar-sm{width:24px;height:24px;border-radius:50%;background:#ffefe2;color:#d96a00;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin-right:6px;vertical-align:middle}
.avatar-sm.av-ico{background:#f4f5f7;color:#8d95a3}
.avatar-sm.av-ico.male{background:#eaf1fd;color:#3f76d6}
.avatar-sm.av-ico.fem{background:#fdeaf2;color:#d9538a}
.avatar-sm.av-ico svg{display:block}
.money{font-weight:700;color:var(--red);font-family:"DIN Alternate","Arial Narrow",Arial,sans-serif}
.money-out{font-weight:700;color:var(--green);font-family:"DIN Alternate","Arial Narrow",Arial,sans-serif}
.muted{color:var(--sub)}
.mini{font-size:11px}
.no-perm{padding:34px;text-align:center;color:var(--sub)}
.no-perm .ico{font-size:26px;display:block;margin-bottom:6px}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl-item{position:relative;padding:8px 0}
.tl-item::before{
  content:"";position:absolute;left:-20px;top:14px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--line);
}
.tl-item.done::before{background:var(--primary);border-color:var(--primary)}
.tl-item.now::before{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,106,0,.14)}
.tl-time{font-size:12px;font-weight:700;color:var(--text)}
.tl-title{font-size:13px}
.tl-tip{font-size:11px;color:var(--sub)}

/* ---------- Task card ---------- */
.task{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line-2);border-radius:8px;margin-bottom:8px;background:#fff}
.task:hover{border-color:var(--primary-2);background:#fffaf5}
.task.done{background:#f8fffb;border-color:#d6efe3}
.task .chk{
  width:17px;height:17px;border-radius:5px;border:1.5px solid #cfd3da;flex:0 0 17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;
}
.task.done .chk{background:var(--green);border-color:var(--green)}
.task .ttl{flex:1;font-size:13px}
.task.done .ttl{color:var(--sub);text-decoration:line-through}
.task .num{width:74px}
.pill{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1px 8px;font-size:11px;color:var(--sub)}

/* ---------- Modal ---------- */
.mask{position:fixed;inset:0;background:rgba(20,22,26,.42);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal{background:#fff;border-radius:12px;width:620px;max-width:100%;max-height:86vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal .hd{padding:14px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center}
.modal .hd h3{margin:0;font-size:15px}
.modal .bd{padding:16px 18px}
.modal .ft{padding:12px 18px;border-top:1px solid var(--line-2);display:flex;justify-content:flex-end;gap:8px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fld label{display:block;font-size:12px;color:#5c626c;margin-bottom:4px}
.fld label .req{color:var(--red)}
.fld input,.fld select,.fld textarea{
  width:100%;height:32px;border:1px solid var(--line);border-radius:6px;padding:0 10px;font-size:13px;outline:none;color:var(--text);background:#fff;
}
.fld textarea{height:66px;padding:8px 10px;resize:vertical;line-height:1.5}
.fld .full{grid-column:1/-1}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--primary-2);box-shadow:0 0 0 2px rgba(255,106,0,.1)}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#26292e;color:#fff;padding:9px 16px;border-radius:8px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.18);animation:fade .25s}
.toast.ok{background:#0b8f57}
.toast.err{background:#c62d1a}
@keyframes fade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Waybill ---------- */
.waybill{width:330px;background:#fff;border:1px solid #333;padding:14px;font-size:12px;line-height:1.7}
.waybill .hd{border-bottom:1px dashed #999;padding-bottom:6px;margin-bottom:6px;font-weight:700}
.waybill .row{display:flex}
.waybill .row .k{width:60px;color:#666}

/* ---------- Misc helpers ---------- */
.flex{display:flex;gap:10px;align-items:center}
.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.right{margin-left:auto}
.center{text-align:center}
.mt8{margin-top:8px}.mt14{margin-top:14px}.mt20{margin-top:20px}
.mb8{margin-bottom:8px}
.hl{color:var(--primary);font-weight:700}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line-2);font-size:12.5px}
.kv:last-child{border-bottom:none}
.step-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.step-flow i{font-style:normal;color:var(--sub)}
.notice-item{padding:9px 0;border-bottom:1px dashed var(--line-2)}
.notice-item:last-child{border-bottom:none}
.dot9{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--primary);margin-right:6px}
.matrix td.q0{background:#fdeceb;color:#c22a17;font-weight:700}
.matrix td.qlow{background:#fff6e9;color:#b46a00}
.matrix td.qok{background:#f4fff9;color:#0a8d57}
.matrix th.sz{background:#fafbfc;text-align:center;min-width:44px}
.matrix td.cell{text-align:center;cursor:pointer}
.matrix td.cell:hover{outline:2px solid var(--primary);outline-offset:-2px}
.legend{display:flex;gap:12px;font-size:11px;color:var(--sub);align-items:center;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.print-only{display:none}
@media print{
  .sidebar,.topbar,.toolbar,.no-print{display:none!important}
  .main{margin-left:0}
  body{background:#fff}
  .print-only{display:block}
}

/* ---------- 员工档案：生日标红 / 列拖拽 / 身份证图片 ---------- */
table.tbl th[draggable="true"]{cursor:grab;user-select:none}
table.tbl th[draggable="true"]:active{cursor:grabbing}
table.tbl th.dragging{opacity:.4;background:#fff3e8}
table.tbl th.dragover{background:#fff3e8;box-shadow:inset 0 -3px 0 var(--primary)}
.bd-red{color:#e02b1d;font-weight:700}
.idcell{display:flex;gap:6px;align-items:center}
.idmini{width:38px;height:24px;object-fit:cover;border:1px solid var(--line);border-radius:4px;cursor:pointer}
.idphoto-wrap{display:flex;gap:14px}
.idphoto-box{flex:1;border:1px dashed var(--line);border-radius:8px;padding:10px;text-align:center;background:#fafbfc}
.idphoto-cap{font-size:12px;color:#5c626c;margin-bottom:8px}
.idthumb{width:100%;height:96px;object-fit:cover;border-radius:6px;background:#eee;display:flex;align-items:center;justify-content:center;color:#9aa0a8;font-size:12px;line-height:1.3;overflow:hidden}
.idthumb.empty{padding:8px}
.idthumb img{width:100%;height:100%;object-fit:cover}
.idfile{margin-top:8px;font-size:12px;width:100%}

/* ===== 登录态：顶栏用户名 / 退出 ===== */
.user-chip{font-size:12px;color:var(--sub);margin-left:4px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-btn{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;margin-left:8px;
  border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--sub);
  cursor:pointer;transition:.15s;background:#fff;
}
.logout-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}

/* ---------- 网站底部备案信息 ---------- */
.site-foot{
  padding:14px 18px 18px;text-align:center;
  color:var(--sub);font-size:11px;line-height:1.8;
}
.site-foot .foot-cp{margin-right:8px}
.site-foot .foot-icp{color:var(--sub);text-decoration:none}
.site-foot .foot-icp:hover{color:var(--primary);text-decoration:underline}
@media print{ .site-foot{display:none!important} }

/* ---------- 绩效看板 V2 ---------- */
.perf-card{padding:0;overflow:hidden}
.perf-title{
  background:#b8960c;color:#fff;text-align:center;font-size:19px;font-weight:700;
  letter-spacing:2px;padding:20px 12px;
}
.perf-meta{display:flex;flex-wrap:wrap;border-bottom:1px solid #d7d8dd}
.perf-cell{
  flex:1 1 50%;display:flex;align-items:center;min-height:42px;
  border-right:1px solid #f2f3f5;border-bottom:1px solid #f2f3f5;
}
.perf-k{
  width:96px;flex:0 0 96px;align-self:stretch;display:flex;align-items:center;justify-content:center;
  background:#fdf3d0;font-weight:600;color:#5f5e5a;font-size:12px;border-right:1px solid #f2f3f5;
}
.perf-v{padding:0 12px;font-size:13px;color:#26292e}
.perf-desc{
  padding:14px 18px;background:#fbfbfc;border-bottom:1px solid #e9eaee;
  font-size:12px;color:#5f5e5a;line-height:1.9;
}
.perf-tbl{border-collapse:collapse;border:1px solid #d7d8dd}
.perf-tbl thead th{background:#fdf3d0;color:#5f5e5a;font-weight:600;font-size:12px;text-align:center;border:1px solid #d7d8dd}
.perf-tbl td{border:1px solid #d7d8dd;vertical-align:middle;font-size:12px}
.perf-cat{text-align:center;font-weight:600;color:#26292e;background:#fffdf6;width:92px}
.perf-name{font-weight:500;color:#26292e}
.perf-w{text-align:center;color:#8a8f99}
.perf-crit{color:#5f5e5a;line-height:1.75}
.perf-score{text-align:center;width:70px}
.perf-score input.inp-sm{width:56px;text-align:center}
.perf-foot .perf-cat{background:#fdf3d0}
.perf-comment{padding:8px 10px}
.perf-textarea{
  width:100%;border:1px solid #e9eaee;border-radius:6px;padding:6px 8px;
  font-size:12px;line-height:1.7;font-family:inherit;color:#26292e;resize:vertical;
}
.perf-note{
  padding:10px 18px 14px;font-size:11px;color:#8a8f99;line-height:1.9;
  border-top:1px dashed #e9eaee;
}
@media (max-width:900px){
  .perf-cell{flex:1 1 100%}
  .perf-k{width:76px;flex:0 0 76px}
}

/* 绩效表格网格线补齐 */
.perf-card .tbl-wrap{border:1px solid #d7d8dd;border-radius:6px;overflow:hidden;background:#fff}
.perf-desc{border-bottom:1px solid #d7d8dd}

/* 绩效得分输入框：隐藏数字增减箭头 */
.perf-score input[type=number]{-moz-appearance:textfield;appearance:textfield}
.perf-score input[type=number]::-webkit-outer-spin-button,
.perf-score input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}