/* 中科SCRM · 线索列表/详情页参考母版覆盖样式
目标：线索模块先做到成熟CRM/SCRM参考页的列表+详情母版，后续客户/联系人/合同复用。 */
/* ===== 线索列表顶部：参考式按钮组 ===== */
#cluesView .wk-list-head{
min-height:58px;
padding:0 18px;
border-bottom:1px solid #ebecf0;
}
#cluesView .module-title{display:flex;align-items:center;gap:10px}
#cluesView .module-title h2{font-size:18px;margin:0;color:#172b4d}
#cluesView .module-icon{width:26px;height:26px;border-radius:4px;background:#e9f2ff;color:#2362c2;display:grid;place-items:center;font-size:15px}
#cluesView .wk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#cluesView .wk-actions .wk-btn{height:32px;padding:0 12px;border-radius:3px;border:1px solid #dfe1e6;background:#fff;color:#42526e;font-size:13px}
#cluesView .wk-actions .wk-btn-primary{border-color:#2362c2;background:#2362c2;color:#fff}
#cluesView .wk-actions .square-btn{width:32px;height:32px;border:1px solid #dfe1e6;border-radius:3px;background:#fff;color:#42526e;display:grid;place-items:center;padding:0}
#cluesView .wk-actions button:hover{border-color:#2362c2;color:#2362c2;background:#f4f7fb}
#cluesView .wk-actions .wk-btn-primary:hover{background:#0747a6;color:#fff}
/* ===== 所有列表底部分页栏：永远固定可见 ===== */
#cluesView.active-view .table-card,
#customersView.active-view .table-card,
#contactsView.active-view .table-card,
#opportunitiesView.active-view .table-card,
#quotationsView.active-view .table-card,
#contractsView.active-view .table-card,
#receivablesView.active-view .table-card,
#invoicesView.active-view .table-card,
#visitsView.active-view .table-card,
#productsView.active-view .table-card{
height:calc(100vh - 178px);
display:flex;
flex-direction:column;
overflow:hidden;
}
#cluesView.active-view .wk-list-head,
#customersView.active-view .wk-list-head,
#contactsView.active-view .wk-list-head,
#opportunitiesView.active-view .wk-list-head,
#quotationsView.active-view .wk-list-head,
#contractsView.active-view .wk-list-head,
#receivablesView.active-view .wk-list-head,
#invoicesView.active-view .wk-list-head,
#visitsView.active-view .wk-list-head,
#productsView.active-view .wk-list-head,
#cluesView.active-view .wk-table-toolbar,
#customersView.active-view .wk-table-toolbar,
#contactsView.active-view .wk-table-toolbar,
#opportunitiesView.active-view .wk-table-toolbar,
#quotationsView.active-view .wk-table-toolbar,
#contractsView.active-view .wk-table-toolbar,
#receivablesView.active-view .wk-table-toolbar,
#invoicesView.active-view .wk-table-toolbar,
#visitsView.active-view .wk-table-toolbar,
#productsView.active-view .wk-table-toolbar,
#cluesView.active-view .cfg-table-tools,
#customersView.active-view .cfg-table-tools,
#contactsView.active-view .cfg-table-tools,
#opportunitiesView.active-view .cfg-table-tools,
#quotationsView.active-view .cfg-table-tools,
#contractsView.active-view .cfg-table-tools,
#receivablesView.active-view .cfg-table-tools,
#invoicesView.active-view .cfg-table-tools,
#visitsView.active-view .cfg-table-tools,
#productsView.active-view .cfg-table-tools,
#cluesView.active-view #cluePager,
#customersView.active-view #customerPager,
#contactsView.active-view #contactPager,
#opportunitiesView.active-view #opportunityPager,
#quotationsView.active-view #quotationPager,
#contractsView.active-view #contractPager,
#receivablesView.active-view #receivablePager,
#invoicesView.active-view #invoicePager,
#visitsView.active-view #visitPager,
#productsView.active-view #productPager{
flex-shrink:0;
}
#cluesView.active-view #cluesTable,
#customersView.active-view #customerList,
#contactsView.active-view #contactsTable,
#opportunitiesView.active-view #opportunitiesTable,
#quotationsView.active-view #quotationsTable,
#contractsView.active-view #contractsTable,
#receivablesView.active-view #receivablesTable,
#invoicesView.active-view #invoicesTable,
#visitsView.active-view #visitsTable,
#productsView.active-view #productsTable{
flex:1 1 auto;
min-height:0;
overflow:auto;
display:flex;
flex-direction:column;
}
/* 确保字段配置工具栏不随表格滚动 */
#customersView.active-view .cfg-table-tools,
#contactsView.active-view .cfg-table-tools,
#opportunitiesView.active-view .cfg-table-tools,
#quotationsView.active-view .cfg-table-tools,
#contractsView.active-view .cfg-table-tools,
#receivablesView.active-view .cfg-table-tools,
#invoicesView.active-view .cfg-table-tools,
#visitsView.active-view .cfg-table-tools,
#productsView.active-view .cfg-table-tools{
flex-shrink:0;
position:sticky;
top:0;
z-index:10;
background:#fff;
}
#cluesView.active-view #cluePager,
#customersView.active-view #customerPager,
#contactsView.active-view #contactPager,
#opportunitiesView.active-view #opportunityPager,
#quotationsView.active-view #quotationPager,
#contractsView.active-view #contractPager,
#receivablesView.active-view #receivablePager,
#invoicesView.active-view #invoicePager,
#visitsView.active-view #visitPager,
#productsView.active-view #productPager{
position:fixed;
bottom:0;
left:48px;
right:0;
z-index:160;
background:#fff;
box-shadow:0 -2px 8px rgba(9,30,66,.08);
}
#cluesView.active-view #cluesTable,
#customersView.active-view #customerList,
#contactsView.active-view #contactsTable,
#opportunitiesView.active-view #opportunitiesTable,
#quotationsView.active-view #quotationsTable,
#contractsView.active-view #contractsTable,
#receivablesView.active-view #receivablesTable,
#invoicesView.active-view #invoicesTable,
#visitsView.active-view #visitsTable,
#productsView.active-view #productsTable{
padding-bottom:54px;
}
/* ============================================================================
【统一模块】详情页 + 侧边菜单 + 配置按钮（所有业务模块通用，与线索模块完全一致）
包括：抽屉定位、侧边菜单、"+"配置按钮、弹窗层级
============================================================================ */
/* ----- 1. 详情抽屉：与分页条完美贴合 ----- */
.detail-drawer.wk-reference-detail,
#detailDrawer {
width: min(1280px, calc(100vw - 48px)) !important;
bottom: var(--active-pager-height, 48px) !important; /* 动态等于当前分页条真实高度：缩放/换行也永远贴边 */
flex-direction: column !important;
background: #fff !important;
z-index: 1000 !important; /* 层级：在分页条(160)之上，弹窗(2000)之下 */
}
/* 注意：不能在 #detailDrawer 上强制 display:flex!important，否则 closeDrawer() 添加 .is-hidden 后仍然显示 */
.detail-drawer.wk-reference-detail:not(.is-hidden),
#detailDrawer:not(.is-hidden) {
display: flex !important;
}
/* 线索模块保持一致 */
body:has(#cluesView.active-view) #detailDrawer,
body:has(#cluesView.active-view) .detail-drawer.wk-reference-detail {
bottom: var(--active-pager-height, 48px) !important;
z-index: 1000 !important;
}
/* ----- 2. 侧边菜单：菜单项内部滚动，"+"按钮永远贴在详情内容区底部 ----- */
.wk-reference-detail .detail-module-layout {
height: 100% !important;
overflow: hidden !important;
}
.wk-reference-detail .detail-side-menu {
position: relative !important; /* 作为按钮的定位参考 */
height: 100% !important;
min-height: 0 !important;
align-self: stretch !important;
padding-bottom: 70px !important; /* 在菜单底部为按钮预留空间 */
overflow: hidden !important;
}
.wk-reference-detail .detail-side-menu-list {
height: 100% !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-bottom: 10px !important;
}
/* ----- 3. "+"菜单配置按钮：所有模块与线索模块完全一致 ----- */
.wk-reference-detail .detail-module-add {
position: absolute !important;
left: 18px !important;
bottom: 14px !important; /* 侧边菜单底部14px */
right: auto !important;
width: 34px !important;
height: 34px !important;
border: 1px solid #dfe1e6 !important;
border-radius: 50% !important;
background: #fff !important;
color: #2362c2 !important;
font-size: 22px !important;
line-height: 28px !important;
cursor: pointer !important;
box-shadow: 0 2px 8px rgba(9, 30, 66, .12) !important;
z-index: 999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.wk-reference-detail .detail-module-add:hover {
background: #2362c2 !important;
color: #fff !important;
border-color: #2362c2 !important;
}
/* 移动端适配 */
@media (max-width: 760px) {
.wk-reference-detail .detail-module-add {
left: auto !important;
right: 12px !important;
bottom: 9px !important;
}
}
/* ----- 4. 菜单配置弹窗：层级在详情页之上 ----- */
.form-modal {
z-index: 2000 !important; /* 在详情页(1000)之上 */
}
.modal-overlay {
z-index: 1999 !important;
}
/* ============================================================================ */
/* ===== 详情页基础样式 ===== */
.wk-reference-detail .wk-detail-header{
flex:0 0 auto;
min-height:72px;
padding:14px 24px;
border-bottom:1px solid #ebecf0;
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
}
.wk-reference-detail .wk-detail-header-title{font-size:20px;line-height:28px;font-weight:700;max-width:760px}
.wk-reference-detail{position:relative;height:100%;min-height:0;overflow:visible}
.detail-drawer .drawer-body{overflow:visible!important;min-height:0;flex:1 1 auto}
.clue-drawer-close-float{
position:absolute;left:-32px;top:12px;z-index:98;
width:32px;height:44px;border:0;border-radius:8px 0 0 8px;
background:#15b26b;color:#fff;font-size:24px;line-height:34px;font-weight:700;
display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 14px rgba(21,178,107,.28)
}
.clue-drawer-close-float:hover{background:#0d9859;transform:translateY(-1px);box-shadow:0 8px 18px rgba(21,178,107,.36)}
.drawer-width-resize-handle{position:absolute;left:0;top:0;bottom:0;width:8px;z-index:7;cursor:ew-resize;background:transparent}
.drawer-width-resize-handle:hover,.drawer-resizing .drawer-width-resize-handle{background:rgba(21,178,107,.18)}
body.drawer-resizing{cursor:ew-resize;user-select:none}
.wk-reference-detail .wk-detail-header-subtitle{margin:0 0 4px;color:#8993a4;font-size:12px}
.wk-reference-detail .wk-detail-header-page-switch{gap:6px}
.wk-reference-detail .wk-detail-header-page-switch .square-btn{width:32px;height:32px;border:1px solid #dfe1e6;border-radius:3px;background:#fff;color:#42526e}
.wk-reference-detail .wk-detail-header-page-switch .square-btn:hover{background:#f4f5f7;color:#2362c2;border-color:#2362c2}
.wk-reference-detail .detail-exit-btn{height:32px;padding:0 12px;border:1px solid #dfe1e6;border-radius:3px;background:#fff;color:#42526e;font-size:13px;cursor:pointer}
.wk-reference-detail .detail-exit-btn:hover{border-color:#de350b;color:#de350b;background:#fff5f3}
.wk-reference-detail .wk-quick-create-bar{flex:0 0 auto;padding:10px 24px;gap:8px;border-bottom:1px solid #ebecf0;background:#fff}
.wk-reference-detail .qc-btn{height:32px;border-radius:3px;padding:0 12px;font-size:13px}
.wk-reference-detail .detail-head-base{flex:0 0 auto;margin:10px 24px 0;padding:14px 18px;background:#f4f5f7;border-radius:4px}
.wk-reference-detail .detail-head-base .base-title{font-size:12px;color:#6b778c;margin-bottom:6px}
.wk-reference-detail .detail-head-base .base-value{font-size:17px;line-height:22px}
.wk-reference-detail .detail-module-layout{margin-top:10px;flex:1 1 auto;min-height:0}
.wk-reference-detail .detail-main-with-modules .d-container-body{overflow:auto;padding:0 22px 16px}
.wk-reference-detail .left-right-wrap{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;padding-top:14px}
.wk-reference-detail .main-content-area{min-width:0;overflow:auto;padding-right:2px}
.wk-reference-detail .right-side-panel{width:260px;overflow:auto;border-left:1px solid #ebecf0;padding-left:16px;background:#fff}
.wk-reference-detail .d-card{border:1px solid #ebecf0;border-radius:4px;background:#fff;margin-bottom:12px;overflow:hidden}
.wk-reference-detail .d-card-title{height:38px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #ebecf0;font-size:14px;font-weight:600;color:#172b4d;background:#fafbfc}
.wk-reference-detail .d-card-body{padding:12px 14px;color:#42526e;font-size:13px;line-height:1.7}
.wk-reference-detail .scrm-field-grid{grid-template-columns:repeat(3,minmax(150px,1fr));gap:14px 20px}
.wk-reference-detail .scrm-field-grid label{font-size:12px;color:#8993a4;margin-bottom:6px}
.wk-reference-detail .scrm-field-grid b,.wk-reference-detail .scrm-field-grid span{font-size:13px;color:#172b4d}
.wk-reference-detail .detail-side-menu-item span.side-menu-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
@media (max-width:980px){.wk-reference-detail .left-right-wrap{grid-template-columns:1fr}.wk-reference-detail .right-side-panel{width:auto;border-left:0;padding-left:0}.detail-drawer.wk-reference-detail{width:100vw}.wk-reference-detail .scrm-field-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}}
@media (max-width:760px){#cluesView.active-view .table-card{height:calc(100vh - 118px)}#cluesView.active-view #cluePager{left:0}.wk-reference-detail .scrm-field-grid{grid-template-columns:1fr}}
/* ===== 客户详情页：参考SCRM右半工作台效果 ===== */
.wk-reference-detail .wk-detail-header-body{
display:flex !important;
justify-content:space-between !important;
align-items:flex-start !important;
width:100% !important;
gap:18px !important;
}
.wk-reference-detail .wk-detail-header-title-row{
display:flex !important;
align-items:center !important;
gap:10px !important;
}
.wk-reference-detail .wk-header-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
margin-top:8px;
color:#6b778c;
font-size:12px;
}
.wk-reference-detail .deal-tag{background:#e3fcef!important;color:#00875a!important}
.wk-reference-detail .wk-detail-header-page-switch .wk-btn-primary{
height:32px;
border-color:#2362c2;
background:#2362c2;
color:#fff;
}
.wk-reference-detail .customer-summary-metrics{
display:grid !important;
grid-template-columns:repeat(5,minmax(120px,1fr)) !important;
gap:0 !important;
margin:10px 24px 0 !important;
}
.wk-reference-detail .customer-summary-metrics .base-item{
flex:auto !important;
padding:8px 14px !important;
border-left:1px solid #dfe1e6 !important;
}
.wk-reference-detail .customer-summary-metrics .base-item:first-child,
.wk-reference-detail .customer-summary-metrics .base-item:nth-child(6){border-left:0!important}
.wk-reference-detail .detail-main-with-modules{
flex:1 1 auto;
min-width:0;
overflow:hidden;
display:flex;
flex-direction:column;
background:#fff;
}
.wk-reference-detail .detail-module-header{
flex:0 0 auto;
height:40px;
display:flex;
align-items:center;
padding:0 18px;
border-bottom:1px solid #ebecf0;
background:#fff;
}
.wk-reference-detail #bizDrawerDynamicBody{
flex:1 1 auto;
min-height:0;
overflow:hidden;
}
.wk-reference-detail #bizDrawerDynamicBody>.d-container-body{
height:100%;
overflow:hidden;
}
.wk-reference-detail .customer-summary-side{
width:300px !important;
flex:0 0 300px !important;
overflow:auto;
border-left:1px solid #ebecf0;
padding:0 0 16px 16px;
background:#fff;
}
.wk-reference-detail .right-summary-grid{padding:8px 0!important}
.wk-reference-detail .right-summary-metrics{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:0!important;
padding:0!important;
background:transparent!important;
}
.wk-reference-detail .right-summary-metrics .base-item{
border:1px solid #ebecf0!important;
border-radius:4px;
padding:8px!important;
background:#fafbfc;
}
.wk-reference-detail .right-summary-metrics .base-title{font-size:12px;color:#8993a4;margin-bottom:4px}
.wk-reference-detail .right-summary-metrics .base-value{font-size:14px;font-weight:600;color:#172b4d;line-height:20px}
.wk-reference-detail .mini-contact-item,
.wk-reference-detail .nearby-item,
.wk-reference-detail .log-item{
padding:8px 0;
border-bottom:1px solid #f4f5f7;
font-size:12px;
color:#6b778c;
line-height:18px;
}
.wk-reference-detail .mini-contact-item b,
.wk-reference-detail .log-item b{display:block;color:#172b4d;margin-bottom:2px}
.wk-reference-detail .nearby-item{cursor:pointer;color:#42526e}
.wk-reference-detail .nearby-item:hover{color:#2362c2;background:#f4f7fb}
@media (max-width:1100px){
.wk-reference-detail .customer-summary-metrics{grid-template-columns:repeat(3,minmax(120px,1fr))!important}
.wk-reference-detail .left-right-wrap{grid-template-columns:1fr!important}
.wk-reference-detail .customer-summary-side{width:auto!important;flex:auto!important;border-left:0;padding-left:0}
}
@media (max-width:760px){
.wk-reference-detail .customer-summary-metrics{grid-template-columns:repeat(2,minmax(120px,1fr))!important}
.wk-reference-detail .wk-detail-header-body{flex-direction:column!important}
}
/* ============================================================
UI FLATTEN v1 — 参考页样式对齐：4排 → 2排
规则：
1) 隐藏 status-strip（调试信息移除）
2) wk-list-head 与 filter-panel 合并到一排（标题+按钮+搜索+场景）
3) wk-table-toolbar 收窄，与表格融合
作者：hermes UI-flatten patch @ 2026-07-02
============================================================ */
/* ---- 1) 干掉状态条（那是调试信息，不该占1排） ---- */
.status-strip{display:none !important}
/* ---- 2) 让业务列表页布局:
Row1 = wk-list-head (title + primary btns) 里也塞进 filter-panel
Row2 = 表格
原本独立的 filter-panel 用负 margin 提到 wk-list-head 内部同一物理行 ---- */
/* 页面卡片：让整个 filter-panel 与 list-head 视觉合并 */
.workspace > section.view > .wk-page-card > .wk-list-head{
min-height:56px;
height:auto;
padding:10px 16px;
border-bottom:1px solid #ebecf0;
flex-wrap:wrap;
gap:12px;
}
.workspace > section.view > .wk-page-card > .wk-list-head .module-title{
flex:0 0 auto;
}
.workspace > section.view > .wk-page-card > .wk-list-head .wk-actions{
flex:0 0 auto;
order:99; /* 按钮排到最右 */
margin-left:auto;
}
/* 把顶部 filter-panel 拉进 list-head 的物理行 —— 只对业务列表页生效
做法：filter-panel 用 CSS 定位挂到 list-head 内 */
.workspace > .filter-panel{
/* 顶部全局那个搜索框栏 —— 这是"线索页"专用的，其他页各自有 filter-panel 在 wk-page-card 外 */
/* 保留不动，只调整视觉：把它跟下方的第一张表格的 list-head 视觉粘起来 */
margin:0 0 12px 0;
border-radius:3px;
padding:10px 16px;
min-height:48px;
}
.workspace > .filter-panel .scrm-search-row{
min-height:34px;
gap:10px;
}
/* ---- 3) wk-table-toolbar 变薄：一行副信息塞在表头上方 ---- */
.wk-table-toolbar{
height:36px !important;
min-height:36px;
padding:0 16px !important;
font-size:12px;
color:#8993a4;
border-bottom:1px solid #f4f5f7 !important;
background:#fafbfc;
}
.wk-table-toolbar .wk-scene{font-weight:normal}
.wk-table-toolbar .wk-scene b{color:#42526e;font-weight:600}
/* ---- 4) 批量工具条按需浮出：无勾选时隐藏工具条右侧的"批量删除/改字段"（可选） ---- */
/* （保守：不删除，只在没勾选时通过 body 类隐藏。app.js 已有 class 切换的话再联动，先不动） */
/* ---- 5) 表头筛选漏斗与列名同一行，减小占位 ---- */
th button.sort-th{font-weight:600;color:#6b778c;padding:0 4px 0 0}
th button.col-filter-btn{padding:0 4px;color:#a5adba}
th button.col-filter-btn:hover{color:#0052cc}
/* ---- 6) 场景按钮"更多"下拉菜单微调（不改结构，只贴合参考页） ---- */
.scene-menu{
position:absolute;top:38px;right:0;z-index:20;
background:#fff;border:1px solid #dfe1e6;border-radius:3px;
box-shadow:0 4px 12px rgba(23,43,77,.15);
min-width:160px;padding:4px 0
}
.scene-menu.is-hidden{display:none}
.scene-menu-item{
display:block;width:100%;text-align:left;height:32px;
border:0;background:transparent;color:#42526e;padding:0 12px;
cursor:pointer;font-size:13px
}
.scene-menu-item:hover{background:#eaf2ff;color:#0052cc}
/* ============================================================
UI FLATTEN v2 — 严格 2 排（配合下方 JS 挪 DOM 生效）
Row 1 = wk-list-head (标题 + 按钮)
Row 2 = filter-panel (搜索 + 场景 + 高级筛选)
副信息条：隐藏
============================================================ */
/* 隐藏"显示：全部客户 · 按XX倒序"副信息条（参考页没有这条） */
.wk-table-toolbar{display:none !important}
/* filter-panel 被 JS 挪进 view.wk-page-card 之后，样式紧贴 wk-list-head 下方 */
.wk-page-card > .filter-panel-inline{
margin:0 !important;
padding:10px 16px !important;
border:0 !important;
border-bottom:1px solid #ebecf0 !important;
border-radius:0 !important;
min-height:52px;
background:#fafbfc;
box-shadow:none !important;
}
.wk-page-card > .filter-panel-inline .scrm-search-row{
gap:8px;flex-wrap:nowrap;align-items:center
}
.wk-page-card > .filter-panel-inline .advanced-btn{margin-left:auto}
/* ============================================================
UI FLATTEN v3 — 批量工具条：勾选后才浮出
规则：.cfg-table-tools 平时压缩显示（只保留"共N条"计数），
出现 .batch-selection-badge 时才浮出批量按钮组
============================================================ */
/* 平时：把字段配置/同步刷新按钮隐掉（这些功能已在 wk-list-head 的⚙⟳里），只保留计数span */
.cfg-table-tools{
padding:6px 12px !important;
min-height:0 !important;
background:transparent !important;
border:0 !important;
color:#8993a4;
font-size:12px;
gap:8px;
}
.cfg-table-tools > button{display:none}
.cfg-table-tools > span{display:inline-block}
/* 勾选后：整条浮出，蓝色高亮，所有按钮显现 */
.cfg-table-tools:has(.batch-selection-badge){
padding:8px 16px !important;
background:#eaf2ff !important;
border-bottom:1px solid #b3d4ff !important;
color:#0052cc;
font-size:13px;
}
.cfg-table-tools:has(.batch-selection-badge) > button{display:inline-flex}
.batch-selection-badge{
display:inline-flex;align-items:center;padding:0 10px;height:26px;
border-radius:13px;background:#0052cc;color:#fff;font-weight:600;
font-size:12px;margin-right:8px
}
/* ============================================================
UI FLATTEN v4 — 12 按钮通用批量工具条样式
============================================================ */
.cfg-table-tools:has(.batch-selection-badge){
flex-wrap:wrap;
gap:6px !important;
min-height:44px !important;
padding:8px 16px !important;
background:linear-gradient(0deg,#eaf2ff,#f5f9ff) !important;
border-bottom:1px solid #b3d4ff !important;
color:#0052cc;
font-size:13px;
}
.cfg-table-tools .batch-btn{
border:1px solid #b3d4ff !important;
background:#fff !important;
color:#0052cc !important;
padding:2px 10px !important;
height:26px !important;
border-radius:3px !important;
font-size:12px !important;
line-height:22px !important;
transition:all .12s;
}
.cfg-table-tools .batch-btn:hover{
background:#0052cc !important;
color:#fff !important;
border-color:#0052cc !important;
}
.cfg-table-tools .batch-btn.batch-btn-danger{
border-color:#f5c6c6 !important;
color:#dc2626 !important;
}
.cfg-table-tools .batch-btn.batch-btn-danger:hover{
background:#dc2626 !important;
color:#fff !important;
border-color:#dc2626 !important;
}
.cfg-table-tools > span:not(.batch-selection-badge){
margin-left:auto;
color:#6b7280;
font-size:12px;
}
/* ============================================================== */
/* v4-fieldcfg 字段配置面板 · 悟空CRM 抽屉样式 */
/* ============================================================== */
/* 让承载字段配置的 formModal 变宽（760px），高度自适应 */
#formModal:has(.wk-field-drawer){
width: 720px !important;
max-width: 90vw;
max-height: 82vh;
overflow: hidden;
}
#formModal:has(.wk-field-drawer) .modal-body{
padding: 0 !important;
max-height: calc(82vh - 96px);
overflow: auto;
}
.wk-field-drawer{
display: flex; flex-direction: column;
font-size: 13px; color:#1f2329;
}
/* Header */
.wk-field-drawer-head{
padding: 14px 20px 12px;
border-bottom: 1px solid #e5e6eb;
background: linear-gradient(180deg,#fbfcff,#f5f7fa);
}
.wk-field-drawer-title{
font-size: 15px; font-weight: 600; color:#1d2129;
margin-bottom: 4px;
}
.wk-field-drawer-sub{
font-size: 12px; color:#8a8f99;
}
/* 已选字段预览区 */
.wk-field-preview{
padding: 12px 20px;
background:#f5f9ff;
border-bottom: 1px solid #e5e6eb;
}
.wk-field-preview-label{
font-size: 12px; color:#5b6072; margin-bottom: 8px;
}
.wk-field-preview-label b{ color:#1a73e8; font-size: 13px; }
.wk-field-preview-chips{
display:flex; flex-wrap: wrap; gap: 6px;
}
.wk-field-chip{
display: inline-flex; align-items: center;
padding: 3px 10px;
background:#e6f0ff;
color:#1a73e8;
border: 1px solid #cfe0ff;
border-radius: 12px;
font-size: 12px;
line-height: 18px;
}
.wk-field-empty{ color:#b0b3bf; font-size: 12px; }
/* 列表分区标题 */
.wk-field-list-head{
display: flex; justify-content: space-between; align-items: center;
padding: 12px 20px 6px;
border-bottom: 1px solid #f2f3f5;
}
.wk-field-list-title{ font-size: 13px; font-weight: 600; color:#1d2129; }
.wk-field-list-hint{ font-size: 12px; color:#a0a4b0; }
/* 字段行 */
.wk-field-list{
padding: 4px 8px 12px;
}
.wk-field-row{
display: grid;
grid-template-columns: 28px 20px 1fr 160px auto;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 4px;
transition: background .12s;
cursor: default;
border: 1px solid transparent;
}
.wk-field-row:hover{
background:#f5f9ff;
border-color: #e6f0ff;
}
.wk-field-row.is-on .wk-field-name{ color:#1d2129; font-weight: 500; }
.wk-field-row:not(.is-on){ opacity: 0.65; }
.wk-field-row:not(.is-on) .wk-field-name{ color:#8a8f99; }
.wk-field-check{ display:flex; align-items: center; justify-content: center; }
.wk-field-check input{
width: 15px; height: 15px; cursor: pointer;
accent-color: #1a73e8;
}
.wk-field-drag{
color:#b0b3bf; cursor: grab; font-size: 14px;
user-select: none;
text-align: center;
}
.wk-field-row:hover .wk-field-drag{ color:#1a73e8; }
.wk-field-drag:active{ cursor: grabbing; }
.wk-field-name{
font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-field-key{
font-family: ui-monospace, 'SF Mono', Consolas, monospace;
font-size: 11px;
color:#8a8f99;
background:#f5f7fa;
padding: 2px 6px;
border-radius: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wk-field-actions{
display: inline-flex; align-items: center; gap: 4px;
}
.wk-field-btn{
width: 24px; height: 24px;
border: 1px solid #e5e6eb;
background:#fff;
color:#5b6072;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
padding: 0;
line-height: 22px;
}
.wk-field-btn:hover:not(:disabled){
border-color:#1a73e8; color:#1a73e8; background:#f0f7ff;
}
.wk-field-btn:disabled{ opacity: .35; cursor: not-allowed; }
.wk-field-width{
width: 64px; height: 24px;
border: 1px solid #e5e6eb;
border-radius: 3px;
padding: 0 6px;
font-size: 12px;
color:#5b6072;
}
.wk-field-width:focus{ border-color: #1a73e8; outline: none; }
/* 底部按钮栏（module-picker-foot 复用）居右并加分隔线 */
#formModal:has(.wk-field-drawer) .module-picker-foot{
padding: 12px 20px;
border-top: 1px solid #e5e6eb;
background:#fafbfc;
display: flex; justify-content: flex-end; gap: 8px;
position: sticky; bottom: 0;
}
#formModal:has(.wk-field-drawer) .module-picker-foot .wk-btn:first-child{
background:#1a73e8; color:#fff; border-color:#1a73e8;
}
#formModal:has(.wk-field-drawer) .module-picker-foot .wk-btn:first-child:hover{
background:#1560c4; border-color:#1560c4;
}
/* =========================================================
* 高级筛选（悟空样式）· 2026-07-02
* ========================================================= */
.adv-filter-wrap { padding: 0; }
.adv-filter-tip { margin-bottom: 8px; font-size: 13px; color: #303133; }
.adv-filter-tip .adv-tip { color: #909399; margin-left: 4px; cursor: help; font-size: 12px; }
.adv-filter-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.adv-filter-row {
display: grid;
grid-template-columns: 240px 1fr 32px 80px;
gap: 8px;
align-items: center;
}
.adv-filter-row .adv-field-select,
.adv-filter-row .adv-value-input {
height: 32px;
padding: 0 10px;
border: 1px solid #DCDFE6;
border-radius: 4px;
font-size: 13px;
background: #FFF;
outline: none;
transition: border-color .15s;
}
.adv-filter-row .adv-field-select:focus,
.adv-filter-row .adv-value-input:focus { border-color: #1A73E8; }
.adv-filter-row .adv-delete-btn {
width: 24px; height: 24px; border-radius: 50%;
border: none; background: #F2F3F5; color: #F56C6C;
cursor: pointer; font-size: 16px; line-height: 1;
transition: background .15s;
}
.adv-filter-row .adv-delete-btn:hover { background: #FEE; }
.adv-filter-row .adv-expose-check {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; color: #606266; cursor: pointer;
white-space: nowrap;
}
.adv-filter-row .adv-expose-check input[type=checkbox] { accent-color: #1A73E8; }
.adv-add-btn.wk-btn {
border: 1px dashed #1A73E8;
color: #1A73E8;
background: transparent;
height: 32px;
padding: 0 12px;
border-radius: 4px;
cursor: pointer;
transition: all .15s;
}
.adv-add-btn.wk-btn:hover { background: #E6F0FF; }
.adv-saved-title { margin: 16px 0 8px; font-size: 12px; color: #909399; }
.adv-scene-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adv-scene-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px 4px 12px;
background: #E6F0FF; color: #1A73E8;
border-radius: 999px; font-size: 12px;
cursor: pointer; transition: background .15s;
}
.adv-scene-chip:hover { background: #D3E4FF; }
.adv-scene-chip i {
font-style: normal; color: #909399;
width: 16px; height: 16px; text-align: center;
border-radius: 50%; line-height: 16px;
transition: all .15s;
}
.adv-scene-chip i:hover { background: #F56C6C; color: #FFF; }
.adv-save-scene {
display: flex; align-items: center; gap: 12px;
margin-top: 16px; padding-top: 12px;
border-top: 1px dashed #EBEEF5;
}
.adv-save-scene .adv-check {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; color: #606266; cursor: pointer;
}
.adv-save-scene .adv-check input { accent-color: #1A73E8; }
.adv-scene-input {
height: 30px; padding: 0 10px;
border: 1px solid #DCDFE6; border-radius: 4px;
font-size: 13px; outline: none;
min-width: 180px;
}
.adv-scene-input:focus { border-color: #1A73E8; }
/* =========================================================
* "高级筛选"按钮 悟空同款 wk-btn-filter · 2026-07-02
* 悟空原样: 灰底 #EBECF0 + 深灰蓝字 #42526E + 4px圆角 + 32px高
* 左侧漏斗图标 (SVG mask) + 6px gap 到文字
* ========================================================= */
.wk-btn.wk-btn-filter {
height: 32px !important;
padding: 0 15px !important;
background: #EBECF0 !important;
color: #42526E !important;
border: 0 !important;
border-radius: 4px !important;
font-size: 14px !important;
font-weight: normal !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer !important;
transition: background 0.15s !important;
}
.wk-btn.wk-btn-filter:hover { background: #DFE1E6 !important; }
.wk-btn.wk-btn-filter::before {
content: "";
width: 14px;
height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex-shrink: 0;
}
.wk-btn.wk-btn-filter > span { font-size: 14px; line-height: 1; }