/* ==========================================================
   DensoERP  全局样式
   ========================================================== */
:root{
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#eff6ff;
  --success:#059669; --warning:#d97706; --danger:#dc2626; --info:#0891b2;
  --sidebar-bg:#1e293b; --sidebar-hover:#334155; --sidebar-active:#2563eb;
  --bg:#f1f5f9; --card:#ffffff; --border:#e2e8f0; --border-dark:#cbd5e1;
  --text:#1e293b; --text-2:#475569; --text-3:#94a3b8;
  --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.08); --shadow-lg:0 4px 16px rgba(0,0,0,.10);
  --sidebar-w:224px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
table{border-collapse:collapse;width:100%}
input,select,textarea,button{font-family:inherit;font-size:14px;outline:none}

/* ---------- 布局 ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-w);background:var(--sidebar-bg);color:#cbd5e1;
  position:fixed;top:0;left:0;bottom:0;overflow-y:auto;z-index:100;
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#475569;border-radius:3px}
.logo{
  height:58px;display:flex;align-items:center;gap:10px;padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:var(--sidebar-bg);z-index:2;
}
.logo-mark{
  width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex:none;
}
.logo-txt{color:#fff;font-weight:700;font-size:15px;letter-spacing:.5px}
.logo-sub{font-size:10px;color:#64748b;display:block;font-weight:400;letter-spacing:0}

.nav{padding:8px 0 30px}
.nav-group{margin-bottom:2px}
.nav-title{
  display:flex;align-items:center;gap:9px;padding:9px 18px;cursor:pointer;
  font-size:13.5px;color:#cbd5e1;user-select:none;transition:.15s;
}
.nav-title:hover{background:var(--sidebar-hover);color:#fff}
.nav-title .ico{width:17px;text-align:center;font-size:14px;flex:none;opacity:.9}
.nav-title .arw{margin-left:auto;font-size:10px;opacity:.5;transition:.2s}
.nav-group.open .nav-title .arw{transform:rotate(90deg)}
.nav-group.open .nav-title{color:#fff;background:rgba(255,255,255,.04)}
.nav-sub{display:none;background:rgba(0,0,0,.16);padding:2px 0}
.nav-group.open .nav-sub{display:block}
.nav-sub a{
  display:block;padding:7px 18px 7px 44px;font-size:13px;color:#94a3b8;
  border-left:3px solid transparent;transition:.15s;
}
.nav-sub a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-sub a.active{color:#fff;background:rgba(37,99,235,.25);border-left-color:#60a5fa;font-weight:500}
.nav-single .nav-title.active{background:rgba(37,99,235,.25);border-left:3px solid #60a5fa;padding-left:15px;color:#fff}

.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0}
.topbar{
  height:58px;background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 22px;gap:16px;position:sticky;top:0;z-index:50;
}
.crumb{font-size:13px;color:var(--text-3)}
.crumb b{color:var(--text);font-weight:600;font-size:15px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.search-box{position:relative}
.search-box input{
  width:250px;height:34px;border:1px solid var(--border);border-radius:17px;
  padding:0 14px 0 34px;background:#f8fafc;font-size:13px;
}
.search-box input:focus{border-color:var(--primary);background:#fff}
.search-box .si{position:absolute;left:12px;top:8px;color:var(--text-3);font-size:13px}
.user-chip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
}
.content{padding:20px 22px 40px;flex:1}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px}
.card-head{
  padding:13px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;
}
.card-head h3{font-size:14.5px;font-weight:600}
.card-head .sub{font-size:12px;color:var(--text-3)}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:16px 18px}
.card-body.p0{padding:0}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:5px;height:33px;padding:0 14px;border:1px solid var(--border-dark);
  background:#fff;color:var(--text-2);border-radius:6px;cursor:pointer;font-size:13px;transition:.15s;white-space:nowrap;
}
.btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.btn-success{background:var(--success);border-color:var(--success);color:#fff}
.btn-success:hover{background:#047857;border-color:#047857;color:#fff}
.btn-warn{background:var(--warning);border-color:var(--warning);color:#fff}
.btn-warn:hover{background:#b45309;color:#fff}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c;color:#fff}
.btn-sm{height:27px;padding:0 9px;font-size:12px;border-radius:5px}
.btn-lg{height:40px;padding:0 22px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-link{border:none;background:none;padding:0 4px;height:auto;color:var(--primary)}
.btn-link:hover{background:none;text-decoration:underline}
.btn-link.del{color:var(--danger)}

/* ---------- 表单 ---------- */
.form-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px}
.fi{display:flex;flex-direction:column;gap:5px;min-width:0}
.fi.f1{flex:1}.fi.f2{flex:2}.fi.f3{flex:3}.fi.f4{flex:4}
.fi label{font-size:12.5px;color:var(--text-2);font-weight:500}
.fi label .req{color:var(--danger)}
.fi input,.fi select,.fi textarea{
  height:34px;border:1px solid var(--border-dark);border-radius:6px;padding:0 10px;
  background:#fff;color:var(--text);width:100%;transition:.15s;
}
.fi textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.6}
.fi input:focus,.fi select:focus,.fi textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.fi input[readonly]{background:#f8fafc;color:var(--text-2)}
.fi .hint{font-size:11.5px;color:var(--text-3)}
.fi-inline{display:flex;align-items:center;gap:6px;height:34px}
.fi-inline input[type=checkbox]{width:15px;height:15px;accent-color:var(--primary)}

/* 筛选栏 */
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.filter .fi{min-width:130px}
.filter .fi input,.filter .fi select{height:32px}

/* ---------- 表格 ---------- */
.tbl{width:100%;font-size:13px}
.tbl thead th{
  background:#f8fafc;color:var(--text-2);font-weight:600;font-size:12.5px;
  padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl tbody td{padding:9px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.tbl tbody tr:hover{background:#f8fafc}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:"SF Mono",Consolas,monospace}
.tbl .ctr{text-align:center}
.tbl .ops{white-space:nowrap}
.tbl tfoot td{padding:9px 12px;background:#f8fafc;font-weight:600;border-top:2px solid var(--border)}
.tbl-wrap{overflow-x:auto}
.tbl input,.tbl select{height:29px;border:1px solid var(--border);border-radius:5px;padding:0 7px;width:100%}
.tbl input:focus,.tbl select:focus{border-color:var(--primary)}
.tbl input.num{text-align:right}
.empty{text-align:center;padding:50px 20px;color:var(--text-3)}
.empty .ei{font-size:36px;opacity:.35;margin-bottom:8px}

/* 编码/SKU 等宽显示 */
.mono{font-family:"SF Mono",Consolas,"Courier New",monospace;font-size:12.5px;letter-spacing:.2px}

/* ---------- 徽章 / 标签 ---------- */
.badge{display:inline-block;padding:2px 8px;border-radius:11px;font-size:11.5px;line-height:1.6;font-weight:500;white-space:nowrap}
.badge-gray{background:#f1f5f9;color:#64748b}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-green{background:#d1fae5;color:#047857}
.badge-amber{background:#fef3c7;color:#b45309}
.badge-red{background:#fee2e2;color:#b91c1c}
.badge-teal{background:#ccfbf1;color:#0f766e}
.badge-purple{background:#ede9fe;color:#6d28d9}
.tag{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;background:#f1f5f9;color:#64748b;margin-right:4px}
.tag-oe{background:#fee2e2;color:#b91c1c;font-weight:600}
.tag-brand{background:#dbeafe;color:#1d4ed8}

/* ---------- 提示 ---------- */
.alert{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;border-left:3px solid}
.alert-success{background:#ecfdf5;color:#065f46;border-color:var(--success)}
.alert-error,.alert-danger{background:#fef2f2;color:#991b1b;border-color:var(--danger)}
.alert-warning{background:#fffbeb;color:#92400e;border-color:var(--warning)}
.alert-info{background:#eff6ff;color:#1e40af;border-color:var(--primary)}

/* ---------- 分页 ---------- */
.pager{display:flex;align-items:center;gap:5px;padding:12px 18px;font-size:13px}
.pg-info{color:var(--text-3);margin-right:auto;font-size:12.5px}
.pg{
  min-width:30px;height:30px;padding:0 9px;border:1px solid var(--border);border-radius:5px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);background:#fff;
}
.pg:hover{border-color:var(--primary);color:var(--primary)}
.pg.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- KPI 卡片 ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;right:-16px;top:-16px;width:72px;height:72px;border-radius:50%;opacity:.08;background:var(--primary)}
.kpi .k-label{font-size:12.5px;color:var(--text-3);margin-bottom:7px}
.kpi .k-val{font-size:25px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.kpi .k-foot{font-size:11.5px;color:var(--text-3);margin-top:6px}
.kpi .up{color:var(--danger);font-weight:600}
.kpi .down{color:var(--success);font-weight:600}
.kpi.c-blue .k-val{color:var(--primary)}   .kpi.c-blue::after{background:var(--primary)}
.kpi.c-green .k-val{color:var(--success)}  .kpi.c-green::after{background:var(--success)}
.kpi.c-amber .k-val{color:var(--warning)}  .kpi.c-amber::after{background:var(--warning)}
.kpi.c-red .k-val{color:var(--danger)}     .kpi.c-red::after{background:var(--danger)}
.kpi.c-teal .k-val{color:var(--info)}      .kpi.c-teal::after{background:var(--info)}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
@media(max-width:1200px){.g-2,.g-3,.g-2-1,.g-1-2{grid-template-columns:1fr}}

/* ---------- 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:900;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:50px 20px}
.modal-mask.show{display:flex}
.modal{background:#fff;border-radius:10px;box-shadow:var(--shadow-lg);width:640px;max-width:100%;animation:pop .18s ease}
.modal.wide{width:1000px}
.modal.narrow{width:440px}
@keyframes pop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.modal-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center}
.modal-head h3{font-size:15px;font-weight:600}
.modal-head .x{margin-left:auto;cursor:pointer;color:var(--text-3);font-size:20px;line-height:1;background:none;border:none}
.modal-head .x:hover{color:var(--danger)}
.modal-body{padding:18px 20px;max-height:70vh;overflow-y:auto}
/* 确保 modal 内表单元素可交互（修复部分浏览器 select 被overflow裁剪的问题） */
.modal-body select,.modal-body input,.modal-body textarea,.modal-body button{position:relative;z-index:1;pointer-events:auto}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:9px;background:#f8fafc;border-radius:0 0 10px 10px}

/* ---------- 步骤条 ---------- */
.steps{display:flex;align-items:center;padding:6px 0}
.step{display:flex;align-items:center;gap:8px;flex:1;position:relative}
.step:not(:last-child)::after{content:'';flex:1;height:2px;background:var(--border);margin:0 10px}
.step.done:not(:last-child)::after{background:var(--success)}
.step .sn{
  width:26px;height:26px;border-radius:50%;background:#e2e8f0;color:#94a3b8;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex:none;
}
.step .st{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.step.done .sn{background:var(--success);color:#fff}
.step.done .st{color:var(--success);font-weight:500}
.step.active .sn{background:var(--primary);color:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.step.active .st{color:var(--primary);font-weight:600}

/* ---------- 明细行工具 ---------- */
.detail-toolbar{display:flex;gap:8px;padding:9px 14px;background:#f8fafc;border-bottom:1px solid var(--border);align-items:center;overflow:visible}
.detail-toolbar .tip{font-size:12px;color:var(--text-3);margin-left:auto}

/* ---------- 配件搜索下拉 ---------- */
.pick-wrap{position:relative;flex:0 0 auto}
.pick-list{
  position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--border-dark);
  border-radius:6px;box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;z-index:1000;display:none;margin-top:3px;
}
.pick-list.show{display:block}
.pick-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f1f5f9;font-size:13px}
.pick-item:hover,.pick-item.hl{background:var(--primary-light)}
.pick-item .p1{font-weight:500}
.pick-item .p2{font-size:11.5px;color:var(--text-3);margin-top:2px}
.pick-item .hit{background:#fef08a;padding:0 2px;border-radius:2px}

/* ---------- BOM 树 ---------- */
.bom-tree{font-size:13px}
.bom-node{padding:7px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px}
.bom-node:hover{background:#f1f5f9}
.bom-node.active{background:var(--primary-light);color:var(--primary-dark);font-weight:500}
.bom-node .bn-ico{width:18px;text-align:center;opacity:.7}
.bom-node .bn-sub{margin-left:auto;font-size:11px;color:var(--text-3)}

/* ---------- 其它 ---------- */
.text-danger{color:var(--danger)} .text-success{color:var(--success)}
.text-warn{color:var(--warning)}  .text-muted{color:var(--text-3)}
.fw6{font-weight:600} .tr{text-align:right} .tc{text-align:center}
.mt0{margin-top:0} .mb0{margin-bottom:0} .mt12{margin-top:12px} .mb12{margin-bottom:12px}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--border);margin:14px 0}
.sec-title{font-size:13px;font-weight:600;color:var(--text-2);margin:16px 0 10px;padding-left:8px;border-left:3px solid var(--primary)}
.sec-title:first-child{margin-top:0}
.print-only{display:none}
@media print{
  .sidebar,.topbar,.no-print{display:none!important}
  .main{margin-left:0}
  .content{padding:0}
  .print-only{display:block}
  .card{box-shadow:none;border:none}
}

/* ---------- 补充：财务/系统模块 ---------- */
.text-teal{color:var(--info)}
.card-foot{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.form-foot{margin-top:18px;display:flex;justify-content:flex-end;gap:9px}

/* 表单栅格（两列自适应） */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.fm{display:flex;flex-direction:column;gap:5px;min-width:0}
.fm-full{grid-column:span 2}
.fm label{font-size:12.5px;color:var(--text-2);font-weight:500}
.fm label .req{color:var(--danger)}
.fm input,.fm select,.fm textarea{
  height:34px;border:1px solid var(--border-dark);border-radius:6px;padding:0 10px;
  background:#fff;color:var(--text);width:100%;transition:.15s;
}
.fm textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.6}
.fm input:focus,.fm select:focus,.fm textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.fm input[readonly]{background:#f8fafc;color:var(--text-2)}
.fm .hint{font-size:11.5px;color:var(--text-3)}

/* 利润趋势条 */
.bar-wrap{height:14px;background:var(--bg);border-radius:7px;overflow:hidden}
.bar{height:100%;border-radius:7px;min-width:2px}
.bar-green{background:var(--success)}
.bar-red{background:var(--danger)}

/* 权限勾选 */
.perm-box{background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:14px 16px}
.perm-all{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-bottom:10px;cursor:pointer}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 14px}
.perm-item{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.perm-item input{width:auto}