/* =====================================================================
 * service-mgmt.css — 第61轮「客服管理」专用样式（D）
 * 选择器一律 smc- 前缀，只加类、不改 style.css 的通用 .card/.tbl/.mask/.modal
 * （组织方式同 b36-apicfg.css：不外溢到宿主应用）
 * ===================================================================== */

/* 全局设置行：开关 + 显示模式 + 条目下拉 + 保存按钮，一行排开、窄屏自动换行 */
.smc-globalrow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.smc-sep {
  width: 1px;
  height: 18px;
  background: var(--line, #e5e7eb);
}

/* 二维码缩略图：表格里 44px、弹窗/预览 56px，点击新开窗口看原图 */
.smc-qr {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 4px;
  background: #fff;
  cursor: zoom-in;
  vertical-align: middle;
}
.smc-qrbox .smc-qr {
  width: 56px;
  height: 56px;
  cursor: default;
}
.smc-qrbox {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 条目编辑弹窗表单：行距比通用 .frow 稍紧，datalist 输入框限宽 */
.smc-form .frow {
  margin-bottom: 10px;
}
.smc-form .inp {
  max-width: 520px;
}

/* 「客服软件」弹窗头部：本软件开关 + 模式单选 */
.smc-apphead {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  background: var(--panel-soft, #f8f9fb);
}
.smc-appdlg .modal,
.smc-appdlg {
  max-width: 860px;
}

/* 单独设置模式下的条目操作条 */
.smc-ownbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* 表格「启用」列的复选框居中 */
.smc-en {
  display: flex;
  justify-content: center;
}

/* ─── 第61轮 §4.5「界面模板」───────────────────────────────────────
   下拉嵌在既有那一行（总库的全局设置行 / 弹窗的 smc-apphead）末尾；
   「模板说明 + 用到哪些栏位」可能很长，单独占一行，免得把保存按钮挤下台。 */
.smc-tpllbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-dim2, #6b7280);
  white-space: nowrap;
}
.smc-tplsel {
  max-width: 210px;
  height: 32px;
}
.smc-tplhint {
  margin: 6px 0 4px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-dim, #6b7280);
}
/* 「未单独指定」这类回落提示：挂在说明行末尾，样式沿用通用 .tag，只是收紧一点字号 */
.smc-tpltag {
  margin-left: 4px;
  font-weight: 400;
  font-size: 11.5px;
}

/* ★ 模板预览图：下拉框下方显示选中模板的预览 */
.smc-tplpreview {
  margin: 16px 0 12px;
  padding: 16px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  text-align: center;
  position: relative;
}
.smc-tplpreview::before {
  content: '模板预览';
  position: absolute;
  top: -10px;
  left: 16px;
  background: #fff;
  padding: 0 8px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
}
.smc-tplpreview img {
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
}
/* 模板提示文字：与预览图保持适当间距 */
.smc-tplhint {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary, #6b7280);
}