/* ============================================================================
 * 工作日志、合同流转、附件查看器
 * 继续用 theme.css 的设计令牌，和客户台账等页面保持同一套外观。
 * ========================================================================== */

/* ---------- 时间线（工作日志、流转记录共用） ---------- */
.wl-timeline{display:flex;flex-direction:column}
.wl-item{display:grid;grid-template-columns:62px 14px 1fr;gap:8px;padding:8px 0;border-top:1px solid var(--line-soft)}
.wl-item:first-child{border-top:0}
.wl-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;line-height:1.5}
.wl-time span{display:block;font-size:10px;color:var(--muted-2)}
.wl-dot{width:9px;height:9px;border-radius:50%;margin:5px 0 0 2px;background:var(--muted-2)}
.wl-dot.ok{background:var(--ok)}.wl-dot.info{background:var(--brand)}
.wl-dot.warn{background:var(--warn)}.wl-dot.danger{background:var(--danger)}.wl-dot.mute{background:var(--muted-2)}
.wl-main{min-width:0}
.wl-title{font-size:12.5px;color:var(--text);line-height:1.6;word-break:break-word}
.wl-sub{font-size:11px;color:var(--muted);margin-top:2px;word-break:break-word}
.wl-sub .dz-link{font-size:11px}

/* ---------- 待归集 ---------- */
.wl-unmatched{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:8px 0;
  border-top:1px solid var(--line-soft)}
.wl-unmatched:first-child{border-top:0}
.wl-unmatched b{font-size:12px}

/* ---------- 采集说明 ---------- */
.wl-steps{margin:10px 0 0;padding-left:20px;font-size:12px;color:var(--text);line-height:1.9}
.wl-steps code{background:var(--line-soft);border-radius:4px;padding:1px 5px;font-family:var(--font-mono);font-size:11px}
.wl-token{display:inline-block;margin:6px 8px 6px 0;padding:6px 10px;background:#fff;border:1px dashed var(--brand);
  border-radius:8px;font-family:var(--font-mono);font-size:12px;word-break:break-all;user-select:all}

/* ---------- 客户选择器 ---------- */
.wl-cust-q{width:100%;height:32px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font-size:12.5px}
.wl-cust-q:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.wl-cust-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;max-height:110px;overflow:auto}

/* ---------- 合同流转进度 ---------- */
.cf-steps{display:flex;flex-direction:column;gap:8px}
.cf-step{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.cf-step .n{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--line-soft);color:var(--muted);
  font-size:11px;display:flex;align-items:center;justify-content:center}
.cf-step.done{border-color:#ABEFC6;background:#F6FEF9}
.cf-step.done .n{background:#ECFDF3;color:#027A48}
.cf-step.current{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.cf-step.current .n{background:var(--brand);color:#fff}
.cf-step b{font-size:12.5px}

/* ---------- 附件 ---------- */
.cf-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.cf-file{border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;transition:all .15s var(--ease)}
.cf-file:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.cf-thumb{height:74px;border-radius:7px;background:var(--line-soft);display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:13px;font-weight:700;color:var(--muted)}
.cf-thumb.pdf{background:#FEF3F2;color:#B42318}
.cf-thumb.doc{background:var(--brand-50);color:var(--brand-700)}
.cf-thumb img{width:100%;height:100%;object-fit:cover}
.cf-name{font-size:11.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-file .crm-rowbtn{align-self:flex-start;padding:2px 8px;font-size:10.5px}

/* ---------- 附件查看器 ---------- */
.wl-viewer{position:fixed;inset:0;z-index:320;background:rgba(12,16,24,.92);display:flex;flex-direction:column}
.wl-viewer-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#E8E9ED;font-size:12.5px;
  background:rgba(0,0,0,.35);border-bottom:1px solid rgba(255,255,255,.08)}
.wl-viewer-bar .name{max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-viewer-bar .grow{flex:1}
.wl-viewer-bar .idx,.wl-viewer-bar .zoom{font-variant-numeric:tabular-nums;min-width:52px;text-align:center;color:#C9CCD6}
.wl-viewer-bar .sep{width:1px;height:18px;background:rgba(255,255,255,.18);margin:0 4px}
.wl-viewer-bar button{height:28px;min-width:30px;padding:0 10px;border:1px solid rgba(255,255,255,.18);border-radius:7px;
  background:rgba(255,255,255,.06);color:#fff;font-size:12px;cursor:pointer}
.wl-viewer-bar button:hover{background:rgba(255,255,255,.16)}
.wl-viewer-bar button:disabled{opacity:.35;cursor:default}
.wl-viewer-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wl-viewer-body img{max-width:92%;max-height:92%;transform-origin:center center;transition:transform .08s linear;
  cursor:grab;user-select:none;box-shadow:0 18px 50px rgba(0,0,0,.45);background:#fff}
.wl-viewer-body img:active{cursor:grabbing}
.wl-viewer-body iframe{width:92%;height:94%;border:0;border-radius:10px;background:#fff}
.wl-viewer-other{color:#E8E9ED;font-size:13px;text-align:center;line-height:2}

@media (max-width:900px){
  .wl-item{grid-template-columns:52px 12px 1fr}
  .cf-files{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .wl-viewer-bar{flex-wrap:wrap}
  .wl-viewer-bar .name{max-width:100%;flex-basis:100%}
  .wl-unmatched{grid-template-columns:1fr;gap:4px}
}

/* ---------- 电脑采集（首页、驾驶舱、工作日志三处共用） ---------- */
.ag-state{
  display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:9px;
  font-size:12px; margin-bottom:10px; background:var(--line-soft); color:var(--muted);
}
.ag-state.inline{ margin:0; padding:2px 9px; font-size:11px; border-radius:999px }
.ag-state .dot{ width:7px; height:7px; border-radius:50%; background:var(--muted-2); flex-shrink:0 }
.ag-state.ok{ background:#ECFDF3; color:#027A48 } .ag-state.ok .dot{ background:#12B76A }
.ag-state.warn{ background:#FFFAEB; color:var(--brass-ink) } .ag-state.warn .dot{ background:var(--warn) }
/* 这张卡只有一句说明和两个按钮，不需要和别的卡一样占满 210px 的高度 */
.ag-card{ min-height:auto }
.ag-card h4{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; text-transform:none;
  font-family:inherit; font-size:13px; letter-spacing:0; color:var(--text); font-weight:650 }
.ag-desc{ margin:8px 0 12px; font-size:12px; color:var(--muted); line-height:1.75 }

/* ---------- 接入示例里的代码块 ---------- */
.ag-code{margin:10px 0;padding:12px 14px;border-radius:9px;background:#0F1420;color:#C9D4E4;
  font:11.5px/1.85 var(--font-mono);overflow-x:auto;white-space:pre;max-height:340px}