/* ====================================================================
   CRM 页面样式（探索客源 / 客户档案 / 营销三阶段）
   --------------------------------------------------------------------
   为什么单独一个文件、而不是往 styles.css 里加：
   styles.css 里那套 .data-table 规则是给「原型表格」写的 ——
     .table-panel .data-table td { white-space: nowrap; }
     .table-panel .data-table td:nth-child(5), :nth-child(6) { max-width: 340px; }
   .table-panel .data-table td 的优先级是 (0,2,1)，
   而页面里写 .xxx-table td 只有 (0,1,1) —— 覆盖不掉，结果是
   长文本不换行、直接串到隔壁列（「SelfCheck GmbH 62Germany」就是这么来的）。
   所以这里一律用 #view 前缀把优先级提到 (1,x,x)，稳定覆盖原型规则。

   命名前缀：crm-（本文件） / ld-（探索客源） / cp-（客户档案） / pg-（三阶段）
   ==================================================================== */

/* ---------------------------------------------------- 1 表格通用 */
#lead-discovery .data-table,
#customer-profile .data-table,
#potential-leads .data-table,
#opportunity-follow .data-table,
#cycle-contact .data-table {
  table-layout: auto;
  min-width: 0;
}

#lead-discovery .data-table th,
#lead-discovery .data-table td,
#customer-profile .data-table th,
#customer-profile .data-table td,
#potential-leads .data-table th,
#potential-leads .data-table td,
#opportunity-follow .data-table th,
#opportunity-follow .data-table td,
#cycle-contact .data-table th,
#cycle-contact .data-table td {
  white-space: normal;
  vertical-align: top;
}

#lead-discovery .data-table th,
#customer-profile .data-table th,
#potential-leads .data-table th,
#opportunity-follow .data-table th,
#cycle-contact .data-table th {
  white-space: nowrap;
}

/* 短字段（编号、日期、等级、按钮）不换行；长文本才换行 */
#lead-discovery td.crm-nw,
#customer-profile td.crm-nw,
#potential-leads td.crm-nw,
#opportunity-follow td.crm-nw,
#cycle-contact td.crm-nw {
  white-space: nowrap;
}

/* 长文本列给上下限，避免过窄变竖排、过宽把表撑爆 */
#lead-discovery .ld-reason,
#potential-leads .pg-why,
#opportunity-follow .pg-why,
#customer-profile .cp-note {
  min-width: 200px;
  max-width: 320px;
}

/* ---------------------------------------------------- 2 公共小组件 */
.crm-toast {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid var(--line);
}
.crm-toast[data-tone="ok"] { background: #eefaf2; border-color: #bfe3cb; color: #0a5c28; }
.crm-toast[data-tone="error"] { background: #fdeeee; border-color: #f2c4c4; color: #9a2020; }
.crm-toast[data-tone="info"] { background: var(--surface-2); color: var(--muted); }

.crm-empty {
  padding: 26px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* 行内小标签：国家、职位、HS、关联产品等 */
.crm-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 11px;
  border: 1px solid var(--line);
  margin: 0 4px 3px 0;
  background: var(--surface-2);
  color: #47586e;
  white-space: nowrap;
}

/* 表格里「主字段 + 若干标签」的两行结构 */
.crm-cell-main { font-weight: 700; }
.crm-cell-tags { margin-top: 4px; }

/* 弹窗表单里的字段（三个页面共用，统一在这里定义） */
.crm-modal-panel label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 10px;
}
.crm-modal-panel label input,
.crm-modal-panel label select,
.crm-modal-panel label textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  color: inherit;
  font-family: inherit;
}
.crm-modal-panel label textarea { min-height: 70px; resize: vertical; }
.crm-req { color: #c0392b; font-weight: 700; }