:root{
  color-scheme:light;
  --primary:#2563eb;--primary-dark:#1d4ed8;--primary-soft:#edf4ff;--primary-line:#c7dbff;--primary-grad-end:#4f8ef7;--on-primary:#fff;
  --bg:#f5f7fa;--surface:#fff;--text:#1f2937;--text-sub:#6b7280;--line:#e5e7eb;--line-soft:#f0f2f5;
  --danger:#dc2626;--danger-soft:#fef2f2;--danger-line:#f3c6c6;
  --success:#15803d;--success-soft:#f0fdf4;--warning:#b45309;--warning-soft:#fffbeb;
  /* 面层与描边：页面里的浅色底、悬停底、画布底统一走这几个变量，
     换肤时只改变量值即可，不用逐页覆盖样式 */
  --surface-sub:#f8fafc;--surface-hover:#f3f6fa;--surface-mute:#eef1f6;--border-strong:#d5dbe4;
  --shadow:0 10px 40px rgba(15,30,60,.14);--shadow-sm:0 1px 2px rgba(15,30,60,.07);
  --radius-sm:4px;--radius:6px;--radius-lg:8px;--radius-pill:99px;--sidebar:220px;
  --font:'Microsoft YaHei','PingFang SC',system-ui,-apple-system,sans-serif;
  font-family:var(--font);font-size:13px;color:var(--text);line-height:1.5
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);overflow:hidden}
h1,h2,h3,p{margin:0}
h1{font-size:19px;font-weight:600}
h2{font-size:14px;font-weight:600}
h3{font-size:14px;font-weight:500}
button,input,select,textarea{font:inherit;color:var(--text)}
button{cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);height:30px;padding:0 11px;white-space:nowrap;flex-shrink:0;transition:background .15s,border-color .15s}
button:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}
button:disabled{cursor:not-allowed;opacity:.55}
button.primary{background:var(--primary);border-color:var(--primary);color:var(--surface)}
button.primary:hover:not(:disabled){background:var(--primary-dark);border-color:var(--primary-dark)}
button.danger{color:var(--danger);border-color:var(--danger-line)}
button.danger:hover:not(:disabled){background:var(--danger-soft)}
/* 表格内的行内操作：蓝色文字按钮，显式指定颜色避免随浏览器默认样式变化 */
button.link{border:0;background:none;color:var(--primary-dark);height:auto;padding:0;text-decoration:none}
button.link:hover:not(:disabled){background:none;color:var(--primary-dark);text-decoration:underline}
button.link.danger{color:var(--danger)}
button.link.danger:hover:not(:disabled){color:#8f1e18}
input,select,textarea{height:30px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 8px;background:var(--surface);max-width:100%;width:100%}
/* 复选框/单选框：上面的全局 input 规则会把它们撑成 34px 高、满宽大方块（规范 3.2 复选框陷阱），
   按类型还原原生 16px 尺寸；accent-color 让选中态跟随主题色 */
input[type="checkbox"],input[type="radio"]{width:16px;height:16px;min-width:0;max-width:none;padding:0;box-sizing:border-box;accent-color:var(--primary);cursor:pointer;vertical-align:middle}
textarea{height:auto;padding:6px 8px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--primary-line);outline-offset:1px}
label{display:grid;gap:4px;font-size:12.5px}
label>span{color:var(--text-sub)}
a,a:visited,a:hover{color:var(--primary-dark);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--text-sub)}
.small{font-size:12px}
.pill{display:inline-block;padding:2px 8px;background:var(--primary-soft);color:var(--primary);border-radius:var(--radius-sm);font-size:12px;white-space:nowrap}
.pill.gray{background:var(--surface-mute);color:var(--text-sub)}
.pill.green{background:var(--success-soft);color:var(--success)}
.pill.red{background:var(--danger-soft);color:var(--danger)}
.pill.amber{background:var(--warning-soft);color:var(--warning)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.panel-head{display:flex;align-items:center;gap:10px;padding:9px 13px;border-bottom:1px solid var(--line)}
.panel-body{padding:12px 13px}
table{width:100%;border-collapse:collapse;text-align:left}
th{font-weight:500;background:var(--surface-sub);color:var(--text-sub);font-size:12px}
th,td{padding:6px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
tbody tr:hover{background:var(--surface-hover)}
/* 整行点选列表（客户/供应商资料、料品 360 等）：无首列单选框，选中即深色高亮 */
.pick-table tbody tr{cursor:pointer}
tbody tr.active,tbody tr.active:hover{background:var(--primary-soft);box-shadow:inset 3px 0 0 var(--primary)}
tbody tr.active td{color:var(--text);font-weight:500}
.table-wrap{overflow:auto}
.empty{text-align:center;padding:30px 16px;color:var(--text-sub)}
.empty h3{color:var(--text);margin-bottom:8px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;min-width:150px}
.spacer{flex:1}
.notice{padding:11px 15px;background:var(--primary-soft);border:1px solid var(--primary-line);color:var(--text-sub);border-radius:var(--radius);font-size:13px;line-height:1.75}
.notice.warn{background:var(--warning-soft);border-color:#fde68a;color:#92400e}
.pager{display:flex;align-items:center;gap:10px;padding:8px 14px;justify-content:flex-end;color:var(--text-sub);font-size:13px}
dialog{border:1px solid var(--line);border-radius:var(--radius-lg);padding:0;max-width:620px;width:calc(100% - 40px);box-shadow:0 10px 40px rgba(15,30,60,.14)}
dialog::backdrop{background:rgba(24,35,51,.42)}
/* 表单弹窗：宽屏多列 + 分区折叠，字段多的资料也不用反复滚动 */
dialog.form-dialog{max-width:1040px;width:calc(100% - 48px);max-height:88vh}
dialog.form-dialog .dialog-head{display:flex;align-items:center;gap:10px;padding:9px 14px}
dialog.form-dialog .dialog-head .spacer{flex:1}
dialog.form-dialog .dialog-body{padding:9px 12px;display:block;max-height:calc(88vh - 96px);overflow:auto;background:var(--surface-sub)}
dialog.form-dialog .form-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:7px;overflow:hidden}
dialog.form-dialog .form-group>header{display:flex;align-items:center;gap:8px;padding:6px 11px;cursor:pointer;user-select:none;background:var(--surface-sub)}
dialog.form-dialog .form-group>header:hover{background:var(--surface-hover)}
dialog.form-dialog .form-group>header .title{font-size:13px;font-weight:600;color:var(--text)}
dialog.form-dialog .form-group>header .count{font-size:12px;color:var(--text-sub)}
dialog.form-dialog .form-group>header .caret{margin-left:auto;font-size:11px;color:var(--text-sub);transition:transform .15s}
dialog.form-dialog .form-group[data-open="1"]>header .caret{transform:rotate(0)}
dialog.form-dialog .form-group:not([data-open="1"])>header .caret{transform:rotate(-90deg)}
dialog.form-dialog .form-group .form-grid{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 11px;padding:9px 11px}
dialog.form-dialog .form-group[data-open="1"] .form-grid{display:grid}
dialog.form-dialog .form-group .span-2{grid-column:span 2}
dialog.form-dialog label{display:grid;gap:3px;font-size:12px;align-content:start}
dialog.form-dialog label>span:first-child{color:var(--text-sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
dialog.form-dialog label>span i{color:var(--danger);font-style:normal}
dialog.form-dialog input,dialog.form-dialog select{direction:ltr;height:28px;font-size:12.5px}
dialog.form-dialog textarea{font-size:12.5px;padding:5px 8px}
dialog.form-dialog .dialog-foot{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);background:var(--surface)}
dialog.form-dialog .dialog-foot .spacer{flex:1}
dialog.form-dialog .dialog-foot .field-error{margin-right:auto}
@media(max-width:900px){
  dialog.form-dialog .form-group .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  dialog.form-dialog .form-group .form-grid{grid-template-columns:1fr}
  dialog.form-dialog .form-group .span-2{grid-column:span 1}
}
.dialog-head{padding:11px 16px;border-bottom:1px solid var(--line);font-weight:600}
.dialog-body{padding:13px 16px;display:grid;gap:10px;max-height:68vh;overflow:auto}

/* 大表单弹窗：销售订单这类字段多、带明细表的单据用 */
dialog.xl{max-width:1180px;width:calc(100% - 40px);max-height:92vh}
dialog.xl .dialog-body{max-height:calc(92vh - 112px);overflow:auto}
dialog.xl .sec{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
dialog.xl .sec>header{display:flex;align-items:center;gap:8px;padding:6px 11px;cursor:pointer;user-select:none;
  background:var(--surface-sub);font-size:13px;font-weight:600}
dialog.xl .sec>header .caret{margin-left:auto;font-size:11px;color:var(--text-sub);transition:transform .15s}
dialog.xl .sec:not([data-open="1"])>header .caret{transform:rotate(-90deg)}
dialog.xl .sec .sec-body{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 11px;padding:9px 11px}
dialog.xl .sec[data-open="1"] .sec-body{display:grid}
dialog.xl .sec .span-2{grid-column:span 2}
dialog.xl .sec .span-3{grid-column:span 3}
@media (max-width:1100px){dialog.xl .sec .sec-body{grid-template-columns:repeat(2,minmax(0,1fr))}
  dialog.xl .sec .span-2,dialog.xl .sec .span-3{grid-column:span 1}}

/* 附件上传区 */
.attach-drop{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:14px;text-align:center;
  background:var(--surface-sub);cursor:pointer}
.attach-drop:hover{background:var(--surface-hover);border-color:var(--primary-line)}
.attach-list{display:grid;gap:6px;margin-top:8px}
.attach-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font-size:13px}
.attach-item .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-item .size{color:var(--text-sub);font-size:12px}
.dialog-foot{display:flex;justify-content:flex-end;gap:10px;padding:9px 16px;border-top:1px solid var(--line);background:var(--surface-sub)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field-error{color:var(--danger);font-size:12px}
.hint{font-size:12px;color:var(--text-sub)}
/* 统一图标（DC.icon 输出的内联 SVG）：跟随当前文字颜色，与按钮/链接基线对齐 */
.dc-icon{display:inline-block;vertical-align:-0.15em;flex:none}
.skeleton{height:14px;background:var(--surface-mute);border-radius:4px;animation:pulse 1.2s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:99}
.toast{background:var(--text);color:var(--surface);padding:10px 18px;border-radius:var(--radius);font-size:13px;box-shadow:0 6px 24px rgba(15,30,60,.22);animation:drop .18s ease}
.toast.error{background:var(--danger)}
.toast.success{background:var(--success)}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- 侧边抽屉 (Drawer) 组件 ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(4,8,15,.45);z-index:90;display:flex;justify-content:flex-end;
  animation:drawerFadeIn .2s ease}
.drawer-panel{width:min(640px,calc(100vw - 32px));height:100%;background:var(--surface);display:flex;flex-direction:column;
  box-shadow:-6px 0 24px rgba(0,0,0,.15);border-left:1px solid var(--line);animation:drawerSlideIn .24s cubic-bezier(.16,1,.3,1)}
.drawer-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:15px}
.drawer-head .close-btn{background:none;border:0;font-size:18px;color:var(--text-sub);cursor:pointer;padding:4px 8px;border-radius:4px}
.drawer-head .close-btn:hover{background:var(--surface-hover);color:var(--text)}
.drawer-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.drawer-foot{padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-sub);display:flex;justify-content:flex-end;gap:10px}

@keyframes drawerFadeIn{from{opacity:0}to{opacity:1}}
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:none}}

/* ---------- 通用文本强调 ---------- */
.danger-text{color:var(--danger);font-weight:600}
.warning-text{color:var(--warning);font-weight:600}
.row-overdue td{background:var(--danger-soft)}
.row-overdue:hover td{background:var(--danger-soft)}
tr.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--danger)}

/* ---------- 工具栏内联勾选 ---------- */
.check-inline{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-sub);cursor:pointer;user-select:none}
/* 显式 min-width:0 覆盖 .toolbar input 的 min-width:150px；显式尺寸防全局 input 规则撑大 */
.check-inline input{width:16px;min-width:0;height:16px;margin:0;accent-color:var(--primary);cursor:pointer}

/* ---------- 只读字段块 ---------- */
.field-static{display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:var(--surface-sub);
  border:1px solid var(--line);border-radius:var(--radius)}
.field-static span{font-size:12px;color:var(--text-sub)}
.field-static b{font-size:14px;font-weight:600}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* ---------- 指标卡 ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.metric{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--surface-sub)}
.metric .label{font-size:12px;color:var(--text-sub);display:block;margin-bottom:6px}
.metric .value{font-size:19px;font-weight:600;line-height:1.2}
.metric .sub{font-size:12px;color:var(--text-sub);margin-top:4px}
.metric.alert{border-color:var(--danger-line);background:var(--danger-soft)}
.metric.alert .value{color:var(--danger)}
.metric.warn{border-color:var(--warning-soft)}
.metric.warn .value{color:var(--warning)}

/* ---------- 标签页切换 ---------- */
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{padding:4px 11px;font-size:12.5px}
.tabs button.active{background:var(--primary-soft);color:var(--primary);border-color:var(--primary-line);font-weight:500}

/* ---------- 审批节点流 ---------- */
.appr-node{border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;background:var(--surface-sub)}
.appr-node.start{border-left:3px solid var(--primary)}
.appr-node.approval{border-left:3px solid var(--warning-soft)}
.appr-node.cc{border-left:3px solid var(--success-soft)}
.appr-node.end{border-style:dashed;text-align:center;color:var(--text-sub);background:var(--surface)}
.appr-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.appr-h b{font-weight:500}
.appr-h .spacer{flex:1}
.appr-m{font-size:12px;color:var(--text-sub);line-height:1.8}
.appr-arrow{text-align:center;color:var(--text-sub);font-size:15px;margin:6px 0}

/* ---------- 满屏表单弹窗（带明细行的大表单，如工程 BOM）---------- */
dialog.form-dialog.full{max-width:none;width:calc(100vw - 24px);height:calc(100vh - 24px);max-height:none}
dialog.form-dialog.full>form{display:flex;flex-direction:column;height:100%}
dialog.form-dialog.full .dialog-body{flex:1;max-height:none}
dialog.form-dialog.full .form-group .form-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px 11px}
dialog.form-dialog.full .form-group .form-grid .span-2{grid-column:span 2}
dialog.form-dialog.full .dialog-foot{position:sticky;bottom:0}
@media(max-width:1200px){
  dialog.form-dialog.full .form-group .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  dialog.form-dialog.full{width:100vw;height:100vh}
  dialog.form-dialog.full .form-group .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 全局「满屏紧凑」模式 ----------
   其他设置里把展示模式选「满屏紧凑型」后，documentElement 会带 data-detail-mode="compact"，
   所有录入/单据/详情弹窗（form-dialog、wide、xl）统一撑满窗口，正文区独立滚动，按钮吸底。
   行级小弹窗（内联 width:min(4xx px) 的那些）不受影响，两三个字段铺满屏反而难用。 */
html[data-detail-mode="compact"] dialog:is(.form-dialog:not(.full),.wide,.xl){
  max-width:none!important;
  width:calc(100vw - 24px)!important;
  height:calc(100vh - 24px)!important;
  max-height:none!important;
}
html[data-detail-mode="compact"] dialog:is(.form-dialog:not(.full),.wide,.xl)>form{
  display:flex;flex-direction:column;height:100%;min-height:0;
}
html[data-detail-mode="compact"] dialog:is(.form-dialog:not(.full),.wide,.xl) .dialog-body{
  flex:1;min-height:0;max-height:none;overflow:auto;
}
html[data-detail-mode="compact"] dialog:is(.form-dialog:not(.full),.wide,.xl) .dialog-head,
html[data-detail-mode="compact"] dialog:is(.form-dialog:not(.full),.wide,.xl) .dialog-foot{
  flex:0 0 auto;
}
html[data-detail-mode="compact"] dialog:is(.form-dialog:not(.full),.wide,.xl) .dialog-foot{
  position:sticky;bottom:0;
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}