/* dp-picker：跨页通用的「已选常驻芯片 + 唤醒式筛选器」组件。
   自带样式，不依赖 Bootstrap、也不依赖页面级 CSS 变量（var 均带兜底值），
   所以「业务模块配置」页（手写 CSS）和「后台管理」页（Bootstrap 5）都能直接挂。
   类名统一用 dpp- 前缀，避开页面里已有的 .dp-chip / .dp-pick-* 等样式。 */

.dpp-root { display: block; }

.dpp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dpp-chips:empty { display: none; }
.dpp-empty { font-size: 12px; color: #94a3b8; }

.dpp-chip {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 2px 2px 2px 9px; border-radius: 999px;
  border: 1px solid #c7d7fe; background: #eff4ff; color: #1d4ed8;
  font-size: 12px; line-height: 18px;
}
.dpp-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpp-chip-x {
  flex: 0 0 auto; margin-left: 2px; padding: 0 4px;
  border: 0; background: none; color: inherit; opacity: .55;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.dpp-chip-x:hover { opacity: 1; }

.dpp-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border: 1px dashed #cbd5e1; border-radius: 999px;
  background: #fff; color: #475569; font-size: 12px; line-height: 18px; cursor: pointer;
}
.dpp-trigger:hover { border-color: #2563eb; color: #1d4ed8; }
.dpp-num { color: #94a3b8; }

/* 弹层挂在 body 下：配置卡片是 overflow:hidden，放卡片内部会被裁掉 */
.dpp-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, .45);
}
.dpp-mask[hidden] { display: none; }

.dpp-dialog {
  display: flex; flex-direction: column; width: 100%; max-width: 460px; max-height: 80vh;
  border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.dpp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #eef2f7;
}
.dpp-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.dpp-head-x {
  border: 0; background: none; padding: 0 2px; cursor: pointer;
  font-size: 18px; line-height: 1; color: #94a3b8;
}
.dpp-search { padding: 10px 14px 0; }
.dpp-search input {
  width: 100%; box-sizing: border-box; padding: 6px 10px;
  border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px;
}
.dpp-body { flex: 1; overflow: auto; padding: 8px 14px 12px; }
.dpp-band {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 8px 0 2px; font-size: 12px; color: #64748b;
}
.dpp-band:first-child { margin-top: 0; }
.dpp-band-add {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: #2563eb; font-size: 12px;
}
.dpp-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 13px; color: #334155; cursor: pointer;
}
.dpp-item.is-off { opacity: .45; cursor: not-allowed; }
.dpp-item input { flex: 0 0 auto; }
.dpp-nodata { padding: 12px 0; font-size: 12px; color: #94a3b8; text-align: center; }
.dpp-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid #eef2f7; background: #f8fafc;
}
.dpp-count { flex: 1; font-size: 12px; color: #64748b; }
.dpp-btn {
  padding: 5px 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: #475569; font-size: 13px; cursor: pointer;
}
.dpp-btn-primary { border-color: #2563eb; background: #2563eb; color: #fff; }