/* ==========================================================================
   audit-prototype 公共样式
   审版异常修正与取消恢复 · 复刻现有 PLM 审版系统视觉
   零外网依赖：无 CDN、无外链字体、无外链图片
   ========================================================================== */

* { box-sizing: border-box; }

/* 全局隐藏类：必须存在，否则 JS 里 toggle('hidden') 全部失效 */
.hidden { display: none !important; }

:root{
  --primary:#2B7FFF;
  --primary-hover:#1A6BEB;
  --primary-light:#E8F1FF;
  --bg:#F5F7FA;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --border-ctrl:#D9D9D9;
  --text:#262626;
  --text-sub:#595959;
  --text-label:#8C8C8C;
  --danger:#F5222D;
  --warning:#FA8C16;
  --success:#52C41A;
  --purple:#722ED1;
  --radius:4px;
}

html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:13px;
  min-width:1280px;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ============================ 顶部导航 Tab ============================ */

.topbar{
  height:40px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:6px;
  position:sticky;
  top:0;
  z-index:60;
}

.topbar .tab{
  height:28px;
  display:inline-flex;
  align-items:center;
  padding:0 12px;
  border-radius:var(--radius);
  color:var(--text-sub);
  font-size:13px;
  cursor:pointer;
  border:1px solid transparent;
  white-space:nowrap;
}
.topbar .tab:hover{ background:#F0F5FF; color:var(--primary); }
.topbar .tab.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}
.topbar .tab.active:hover{ background:var(--primary); color:#fff; }
.topbar .spacer{ flex:1; }
.topbar .topbar-hint{
  font-size:12px;
  color:var(--text-label);
  display:flex;
  align-items:center;
  gap:6px;
}
.topbar .env-dot{
  width:6px;height:6px;border-radius:50%;background:var(--warning);display:inline-block;
}

/* ============================ 页面容器 ============================ */

.page{
  padding:0 0 24px;
}

.filter-card{
  background:var(--card);
  border-bottom:1px solid var(--border);
  padding:12px 16px 0;
}

.filter-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 0;
}
.filter-row.hidden{ display:none; }

.filter-item{
  min-width:180px;
  flex:0 0 180px;
}
.filter-item.wide{ flex:0 0 240px; }
.filter-item.date-range{
  flex:0 0 300px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:300px;
}
.filter-item.date-range .date-sep{ color:var(--text-label); font-size:12px; }

/* ============================ 控件 ============================ */

.input, .select, .textarea{
  width:100%;
  height:32px;
  border:1px solid var(--border-ctrl);
  border-radius:var(--radius);
  background:#fff;
  padding:0 10px;
  font-size:13px;
  color:var(--text);
  font-family:inherit;
  outline:none;
}
.textarea{ height:auto; padding:8px 10px; line-height:1.6; resize:vertical; }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(43,127,255,.12); }
.input::placeholder,.textarea::placeholder{ color:#BFBFBF; }
.input[disabled],.select[disabled]{ background:#F5F5F5; color:#BFBFBF; cursor:not-allowed; }

.select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23BFBFBF'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:26px;
  cursor:pointer;
}

.btn{
  height:32px;
  padding:0 14px;
  border-radius:var(--radius);
  border:1px solid var(--border-ctrl);
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  white-space:nowrap;
  transition:all .15s;
}
.btn:hover{ border-color:var(--primary); color:var(--primary); }
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn-primary:hover{ background:var(--primary-hover); border-color:var(--primary-hover); color:#fff; }
.btn-primary[disabled],.btn-primary[disabled]:hover{
  background:#BFBFBF;border-color:#BFBFBF;color:#fff;cursor:not-allowed;
}
.btn-danger{
  background:var(--danger); border-color:var(--danger); color:#fff;
}
.btn-danger:hover{ background:#D9363E; border-color:#D9363E; color:#fff; }
.btn-danger[disabled],.btn-danger[disabled]:hover{ background:#BFBFBF;border-color:#BFBFBF;cursor:not-allowed; }
.btn-sm{ height:28px; padding:0 10px; font-size:12px; }

.link-btn{
  background:none;border:none;padding:0;margin:0;
  color:var(--primary);
  font-size:13px;
  font-family:inherit;
  cursor:pointer;
}
.link-btn:hover{ text-decoration:underline; }
.link-btn.danger{ color:var(--danger); }
.link-btn.is-disabled{ color:#BFBFBF; cursor:not-allowed; text-decoration:none; }

.icon-btn{
  width:32px;height:32px;border:1px solid var(--border-ctrl);background:#fff;border-radius:var(--radius);
  cursor:pointer;color:var(--text-sub);
  display:inline-flex;align-items:center;justify-content:center;
}
.icon-btn:hover{ border-color:var(--primary); color:var(--primary); }

/* ============================ 表格 ============================ */

.table-wrap{
  background:var(--card);
  overflow-x:auto;
}

table.audit-table{
  width:100%;
  min-width:1280px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

table.audit-table thead th{
  background:#F5F7FA;
  color:var(--text-sub);
  font-weight:400;
  font-size:12px;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  border-top:1px solid var(--border);
  position:sticky;
  top:40px;
  z-index:20;
  box-shadow:0 2px 8px rgba(0,0,0,.10); /* 悬浮表头与内容分层，滚动遮挡行首时不误读为空数据 */
}

table.audit-table tbody td{
  border-bottom:1px solid var(--border);
  padding:14px 12px;
  vertical-align:top;
  font-size:12px;
  line-height:1.9;
}

table.audit-table tbody tr:hover td{ background:#FAFCFF; }

/* 行内字段 */
.field{ display:flex; gap:4px; }
.field .k{ color:var(--text-label); flex:0 0 auto; white-space:nowrap; }
.field .v{ color:var(--text); word-break:break-all; }
.field .v.muted{ color:var(--text-label); }

.prod-cell{ display:flex; gap:10px; align-items:flex-start; }
.prod-cell .prod-img{
  width:80px;height:80px;border-radius:var(--radius);overflow:hidden;flex:0 0 80px;
  border:1px solid var(--border);background:#FAFAFA;
}
.prod-cell .prod-fields{ min-width:0; }

/* 分组小标题 */
.cell-group-title{
  font-size:12px;
  color:var(--text-sub);
  font-weight:600;
  margin:0 0 6px;
}
.cell-group + .cell-group{ margin-top:12px; padding-top:12px; border-top:1px dashed #EEEEEE; }

/* 状态标签 */
.tag{
  display:inline-block;
  padding:1px 8px;
  border-radius:2px;
  font-size:12px;
  line-height:20px;
  border:1px solid transparent;
  white-space:nowrap;
}
.tag-pending{ background:#FFF7E6; color:#FA8C16; border-color:#FFE7BA; }
.tag-pass{    background:#F6FFED; color:#52C41A; border-color:#D9F7BE; }
.tag-fail{    background:#FFF1F0; color:#F5222D; border-color:#FFCCC7; }
.tag-tbd{     background:#F9F0FF; color:#722ED1; border-color:#EFDBFF; }
.tag-voided{  background:#FAFAFA; color:#8C8C8C; border-color:#EEEEEE; }

.tag-plain{ background:#FAFAFA; color:var(--text-sub); border-color:#EEEEEE; }

.tag-warnline{
  background:#FFF7E6;color:#FA8C16;border-color:#FFE7BA;
  font-size:12px;
}

/* 操作列 */
.op-cell{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.op-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ============================ 分页 ============================ */

.pager{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:12px 16px;background:var(--card);
  font-size:13px;color:var(--text-sub);
}
.pager .pg{
  min-width:28px;height:28px;border:1px solid var(--border-ctrl);background:#fff;border-radius:var(--radius);
  cursor:pointer;font-size:13px;color:var(--text);font-family:inherit;
}
.pager .pg:hover{ border-color:var(--primary);color:var(--primary); }
.pager .pg.active{ background:var(--primary);border-color:var(--primary);color:#fff; }
.pager .pg[disabled]{ color:#BFBFBF;cursor:not-allowed;border-color:#EEEEEE; }
.pager .pg-jump{ display:flex;align-items:center;gap:6px; }
.pager .pg-jump .input{ width:52px;height:28px;text-align:center; }

/* ============================ 弹窗 ============================ */

.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  z-index:1000; padding:40px 0;
}
.modal-mask.hidden{ display:none; }

.modal{
  width:520px;
  max-height:calc(100vh - 80px);
  background:#fff;
  border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal.modal-lg{ width:640px; }

.modal-head{
  padding:16px 20px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.modal-head h3{ margin:0;font-size:16px;font-weight:600;color:var(--text); }
.modal-head .modal-close{
  background:none;border:none;cursor:pointer;color:#8C8C8C;font-size:16px;line-height:1;padding:4px;
}
.modal-head .modal-close:hover{ color:var(--text); }

.modal-body{ padding:0 20px 4px;overflow-y:auto;font-size:13px;line-height:1.7;color:var(--text); }
.modal-foot{
  padding:16px 20px;
  display:flex;justify-content:flex-end;gap:8px;
  border-top:1px solid var(--border);
  background:#fff;
}

.modal-section{ margin-bottom:14px; }
.modal-section > .label{
  font-size:13px;color:var(--text-sub);margin-bottom:6px;display:block;
}
.modal-section > .label .req{ color:var(--danger); margin-right:2px; }

/* 影响范围清单 */
.impact-list{
  margin:0;padding:12px 14px 12px 30px;
  background:#FAFAFA;border:1px solid var(--border);border-radius:var(--radius);
  list-style:disc;
}
.impact-list li{ color:var(--text-sub);line-height:1.9; }
.impact-list li b{ color:var(--text); }

.alert{
  display:flex;gap:8px;
  padding:8px 12px;border-radius:var(--radius);font-size:12px;line-height:1.7;
  border:1px solid;
}
.alert-warning{ background:#FFF7E6;border-color:#FFE7BA;color:#AD4E00; }
.alert-danger  { background:#FFF1F0;border-color:#FFCCC7;color:#A8071A; }
.alert-info    { background:#E8F1FF;border-color:#BAD7FF;color:#1A56C4; }
.alert + .alert{ margin-top:8px; }

/* 单选卡组（三选一处理方式） */
.opt-list{ display:flex;flex-direction:column;gap:8px; }
.opt{
  display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--border-ctrl);border-radius:var(--radius);
  padding:10px 12px;cursor:pointer;background:#fff;transition:all .15s;
}
.opt:hover{ border-color:var(--primary);background:#FAFCFF; }
.opt.sel{ border-color:var(--primary);background:var(--primary-light); }
.opt .radio{
  width:14px;height:14px;border-radius:50%;border:1px solid var(--border-ctrl);
  flex:0 0 14px;margin-top:2px;position:relative;background:#fff;
}
.opt.sel .radio{ border-color:var(--primary); }
.opt.sel .radio::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary);
}
.opt .opt-title{ font-size:13px;color:var(--text);font-weight:600; }
.opt.disabled{ background:#F5F5F5;cursor:not-allowed;border-color:#EEEEEE; }
.opt.disabled .opt-title{ color:#BFBFBF; }

/* 勾选 */
.check{
  display:flex;gap:8px;align-items:flex-start;cursor:pointer;font-size:13px;color:var(--text);
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:#FAFAFA;
}
.check input{ margin:2px 0 0;width:14px;height:14px;accent-color:var(--primary);cursor:pointer;flex:0 0 14px; }

/* ============================ Toast ============================ */

#toast-wrap{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:3000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  padding:9px 16px;font-size:13px;color:var(--text);
  display:flex;align-items:center;gap:8px;
  animation:toastIn .18s ease-out;
}
.toast .dot{ width:6px;height:6px;border-radius:50%;background:var(--success);flex:0 0 6px; }
.toast.err .dot{ background:var(--danger); }
.toast.info .dot{ background:var(--primary); }
@keyframes toastIn{ from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }

/* ============================ 详情/编辑页 ============================ */

.detail-layout{
  display:flex;gap:12px;padding:12px;align-items:flex-start;
  min-height:calc(100vh - 40px);
}
/* 左 3 右 7：左侧样品信息收窄，结论区为主 */
.detail-left{ flex:0 0 30%;min-width:0;display:flex;flex-direction:column;gap:12px; }
.detail-right{ flex:1;min-width:0;display:flex;flex-direction:column;gap:12px; }

.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  padding:16px;
}
.panel.flush{ padding:0; }

.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.panel-head h2{ margin:0;font-size:14px;font-weight:600;color:var(--text); }
.panel-head .head-note{ font-size:12px;color:var(--danger); }
.panel-head.sticky{ position:sticky;top:40px;background:#fff;z-index:10;padding:16px 16px 10px;margin:-16px -16px 12px;border-bottom:1px solid var(--border); }

/* 左栏收窄后表单改单列，避免 30% 宽度下两列挤压 */
.form-grid{ display:grid;grid-template-columns:1fr;gap:12px; }
.form-grid .full{ grid-column:1 / -1; }
.form-item .lbl{ font-size:12px;color:var(--text-sub);margin-bottom:6px;display:block; }
.form-item .lbl .req{ color:var(--danger);margin-right:2px; }
.form-item .hint{ font-size:12px;color:var(--text-label);margin-top:4px; }
.form-item .err{ font-size:12px;color:var(--danger);margin-top:4px; }

.section-title{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--text);
  margin:0 0 12px;cursor:pointer;user-select:none;
}
.section-title .caret{ color:#8C8C8C;font-size:10px;transition:transform .15s; }
.section-title.collapsed .caret{ transform:rotate(-90deg); }
.section-body.hidden{ display:none; }

.upload-box{
  width:104px;height:104px;
  border:1px dashed var(--border-ctrl);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:var(--text-label);font-size:12px;background:#FAFAFA;cursor:pointer;
}
.upload-box:hover{ border-color:var(--primary);color:var(--primary); }
.upload-box .up-icon{ font-size:20px;line-height:1; }

.thumb-row{ display:flex;gap:8px;flex-wrap:wrap; }
.thumb{ width:80px;height:80px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#FAFAFA; }

.readonly-field .v{ color:var(--text); }
.readonly-field .k{ color:var(--text-label); }

.timeline{ font-size:12px;color:var(--text-sub);line-height:2; }
.timeline .dot-row{ display:flex;gap:8px; }

/* 结论区 */
.conclusion-opt-row{ display:flex;gap:24px;align-items:center;padding:2px 0 4px; }
.radio-line{ display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--text); }
.radio-line input{ accent-color:var(--primary);width:14px;height:14px;cursor:pointer; }
.radio-line.disabled{ color:#BFBFBF;cursor:not-allowed; }
.radio-line.disabled input{ cursor:not-allowed; }

.count-hint{ text-align:right;font-size:12px;color:var(--text-label);margin-top:2px; }

/* 供应商端只读提示条 */
.readonly-banner{
  background:#E8F1FF;border-bottom:1px solid #BAD7FF;color:#1A56C4;
  padding:8px 16px;font-size:12px;display:flex;align-items:center;gap:8px;
}

/* 空状态 */
.empty{
  padding:60px 0;text-align:center;color:var(--text-label);font-size:13px;
}

/* 版本标记 */
.ver-badge{
  display:inline-block;padding:0 6px;border-radius:2px;border:1px solid #D9D9D9;
  background:#FAFAFA;color:var(--text-sub);font-size:12px;line-height:18px;
}
.ver-badge.old{ border-style:dashed;color:#8C8C8C; }

/* ============================ 联动表单：开关 / 面料明细 ============================ */

.switch-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:#FAFAFA;
}
.switch-row .sw-label{ font-size:13px;color:var(--text); }

.switch{ position:relative;display:inline-block;width:40px;height:22px;flex:0 0 40px; }
.switch input{ opacity:0;width:0;height:0; }
.switch .slider{
  position:absolute;cursor:pointer;inset:0;background:#D9D9D9;border-radius:22px;transition:.2s;
}
.switch .slider::before{
  content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider{ background:var(--primary); }
.switch input:checked + .slider::before{ transform:translateX(18px); }

.fabric-detail{
  margin-top:10px;padding:10px 12px;border:1px dashed var(--border-ctrl);border-radius:var(--radius);background:#fff;
}
.fabric-detail .fd-title{ font-size:12px;color:var(--text-label);margin-bottom:8px; }
.fabric-row{ display:flex;gap:8px;align-items:center;margin-bottom:8px; }
.fabric-row .input{ flex:1; }
.fabric-row .input.num{ flex:0 0 100px; }

.extra-block{ margin-top:12px;padding-top:12px;border-top:1px dashed #EEEEEE; }
.extra-block .eb-title{ font-size:12px;color:var(--text-label);margin-bottom:8px; }