/* ==================== 锦创服务 - CRM 客户管理模块样式 ==================== */
/* 复用主样式变量与 .card/.btn/.kpi-grid 等通用组件，下面仅定义 CRM 专有样式 */

/* ---- 状态徽标（跟进状态 / 成交状态） ---- */
.crm-badge { display:inline-block; padding:2px 10px; border-radius:11px; font-size:var(--fs-xs); font-weight:600; white-space:nowrap; line-height:1.6; }
.crm-badge.gray   { background:#eceff1; color:#5f6368; }
.crm-badge.blue   { background:#e8f0fe; color:#1967d2; }
.crm-badge.green  { background:#e6f4ea; color:#188038; }
.crm-badge.orange { background:#fef7e0; color:#e37400; }
.crm-badge.yellow { background:#fff8e1; color:#b06000; }
.crm-badge.red    { background:#fce8e6; color:#d93025; }

/* ---- 筛选条 ---- */
.crm-filterbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.crm-filterbar select, .crm-filterbar input { padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:var(--fs-sm); background:#fff; }
.crm-filterbar .grow { flex:1; min-width:160px; }

/* ---- 客户卡片（移动友好） ---- */
.crm-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.crm-card { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.04); cursor:pointer; transition:box-shadow .15s, transform .15s; }
.crm-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.10); transform:translateY(-1px); }
.crm-card.sel { outline:2px solid var(--primary); }
.crm-card .c-name { font-size:var(--fs-md); font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crm-card .c-no { font-size:var(--fs-xs); color:var(--text2); }
.crm-card .c-row { font-size:var(--fs-sm); color:var(--text2); margin-top:6px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.crm-card .c-meta { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:var(--fs-xs); color:#999; }
.crm-card .c-amount { font-weight:700; color:var(--success); }

/* ---- 标签 chips ---- */
.crm-tag { display:inline-block; padding:1px 8px; border-radius:9px; font-size:var(--fs-xs); background:#eef2f7; color:#475569; margin:1px 2px; }
.crm-tag-input { display:flex; flex-wrap:wrap; gap:6px; align-items:center; border:1px solid var(--border); border-radius:6px; padding:6px 8px; }
.crm-tag-input .chip { background:#e8f0fe; color:#1967d2; padding:2px 8px; border-radius:10px; font-size:var(--fs-xs); display:inline-flex; align-items:center; gap:4px; }
.crm-tag-input .chip b { cursor:pointer; font-weight:700; }

/* ---- 跟进时间线 ---- */
.crm-timeline { position:relative; margin:8px 0 0; padding-left:18px; }
.crm-timeline:before { content:''; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--border); }
.crm-follow { position:relative; padding:10px 0 10px 4px; border-bottom:1px dashed #eee; }
.crm-follow:last-child { border-bottom:none; }
.crm-follow:before { content:''; position:absolute; left:-16px; top:14px; width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px #fff; }
.crm-follow.important:before { background:var(--danger); }
.crm-follow .f-head { display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); }
.crm-follow .f-meta { color:var(--text2); font-size:var(--fs-xs); margin:3px 0; }
.crm-follow .f-content { font-size:var(--fs-base); color:var(--text); line-height:1.6; white-space:pre-wrap; word-break:break-word; }

/* ---- 批量操作条 ---- */
.crm-batchbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:#eef4ff; border:1px solid #cdddfb; border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.crm-batchbar .count { font-weight:700; color:var(--primary); }

/* ---- 详情抽屉（桌面：居中大弹窗 / 移动：贴底） ---- */
.crm-detail-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
@media (max-width: 860px) { .crm-detail-grid { grid-template-columns:1fr; } }
.crm-dl { font-size:var(--fs-base); }
.crm-dl .row { display:flex; padding:7px 0; border-bottom:1px solid #f3f3f3; }
.crm-dl .row .k { width:96px; color:var(--text2); flex-shrink:0; }
.crm-dl .row .v { flex:1; color:var(--text); word-break:break-all; }

/* ---- 设置页子区块 ---- */
.crm-set-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.crm-subtabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.crm-subtabs .stab { padding:8px 14px; border:1px solid var(--border); border-radius:20px; font-size:var(--fs-sm); cursor:pointer; background:#fff; }
.crm-subtabs .stab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.crm-opt-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.crm-opt-row input { flex:1; padding:7px 10px; border:1px solid var(--border); border-radius:6px; font-size:var(--fs-sm); }
.crm-sync-stat { display:flex; flex-wrap:wrap; gap:10px; }
.crm-sync-stat .box { background:#f6f8fa; border-radius:8px; padding:10px 14px; font-size:var(--fs-sm); }
.crm-sync-stat .box b { font-size:var(--fs-xl); display:block; color:var(--primary); }

/* ---- 通用表单字段 ---- */
.crm-field { margin-bottom:12px; }
.crm-field > label { display:block; font-size:var(--fs-sm); color:var(--text2); margin-bottom:4px; }
.crm-field .req { color:var(--danger); margin-left:2px; }
.crm-field input, .crm-field select, .crm-field textarea { width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:6px; font-size:var(--fs-base); }
.crm-field input:disabled, .crm-field select:disabled { background:#f5f5f5; color:#888; }
.crm-field .sys-note { font-size:var(--fs-xs); color:var(--warning); margin-left:6px; }
.crm-radio-group label { margin-right:14px; font-size:var(--fs-base); cursor:pointer; }
.crm-check { display:flex; align-items:center; gap:6px; font-size:var(--fs-base); }