/*
===============================================================================
文件: centerpanel.css (再次更新后 - 文件名省略+大屏自适应)

【主要功能 & 注意事项】:
1) 顶部工具栏 => “上传数据” + “筛选样本” + filename-wrap + 样本量
2) .filename-wrap 默认 max-width: 200px => 小屏省略
3) 超过1800px 宽 => .filename-wrap max-width: 350px (大屏可显示更多)
4) 其余(批量操作、网格变量列表、多选/拖拽)保持不变
===============================================================================
*/

/* 中间面板的最外层 => 不再写 flex:1 */
.center-panel {
  padding: 5px;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
}

/* 顶部操作栏 => 与右侧的 analysis-toolbar 对齐 */
.centerpanel-topbar {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* 文件名(省略显示)容器 */
.filename-wrap {
  display: inline-flex;
  align-items: center;
  max-width: 200px; /* 小屏时仅200px */
  overflow: hidden;
}
/* 超过1800px宽 => 更大max-width */
@media (min-width: 1800px) {
  .filename-wrap {
    max-width: 350px;
  }
}
.filename-ellipsis {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

/* 主卡片区域 => flex:1 + overflow:auto */
.centerpanel-maincard {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);

  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

/* 变量列表区 => 内部滚动 */
.variable-section {
  flex: 1;
  position: relative;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);

  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f1f1f1;
}
.variable-section::-webkit-scrollbar {
  width: 8px;
}
.variable-section::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.variable-section::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  border-radius: 4px;
}
.variable-section::-webkit-scrollbar-thumb:hover {
  background-color: #bbbbbb;
}

/* 网格布局 (变量卡片) */
.var-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 单个卡片 */
.var-list li {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 80px;
  cursor: pointer;
  transition: box-shadow 0.25s, background-color 0.25s, transform 0.25s;
}
.var-list li:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background: #fafafa;
  transform: translateY(-1px);
}

/* 选中态 => 渐变蓝背景 + √居中 */
.var-list li.var-selected {
  background: linear-gradient(to bottom, #eff7ff, #cfe7ff);
  border: 2px solid #4fa3f7;
  box-shadow: 0 0 6px rgba(79,163,247,0.3);
}
.var-list li.var-selected::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #2b6cf6;
  font-weight: bold;
}

/* 拖拽中态 */
.var-list li.var-dragging {
  opacity: 0.7;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  cursor: grabbing;
}

/* 隐藏原生 checkbox */
.var-checkbox {
  display: none;
}

/* 多行截断 - 变量名 */
.var-name {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 最多3行 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  min-height: 3em;
  position: relative;
  padding-right: 24px; /* 给右侧 .var-info-icon 留位置 */
}

/* 右上角 info 图标 */
.var-info-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.var-info-icon:hover {
  color: #666;
}

/* 右下角标签 => "#xxx" 这里改为渐变背景，而非白色 */
.var-type {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 12px;
  border-radius: 9999px;
  padding: 2px 6px;
  color: #fff;
}
.var-type::before {
  content: "#";
  margin-right: 2px;
}

/* 定量 => 绿色系渐变 */
.var-type.var-type-quant {
  background: linear-gradient(to right, #66d2c1, #4cb48d);
}
/* 定性 => 橙色系渐变 */
.var-type.var-type-nominal {
  background: linear-gradient(to right, #ffcc66, #ff8c00);
}
/* 文本 => 蓝色系渐变 */
.var-type.var-type-text {
  background: linear-gradient(to right, #66aefc, #4fa3f7);
}

/* 拖拽预览框 */
.drag-preview {
  display: inline-flex;
  flex-direction: column;
  background-color: rgba(255,255,255,0.95);
  border: 1px dashed #4fa3f7;
  padding: 6px 8px;
  border-radius: 6px;
  pointer-events: none;
  animation: fadeIn 0.2s ease-out;
  max-width: 220px;
  max-height: 200px;
  overflow: hidden;
}
@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.drag-count {
  font-weight: bold;
  margin-bottom: 4px;
  color: #4fa3f7;
  display: flex;
  align-items: center;
}
.drag-count i {
  margin-right: 4px;
}
.drag-varlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drag-varlist li {
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}
.drag-ellipsis {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
}

/* 搜索框UI */
.var-search-box {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 3px 10px;
}
.var-search-box:hover {
  border-color: #bbb;
}
.var-search-icon {
  color: #999;
  margin-right: 6px;
}
.var-search-input {
  border: none;
  outline: none;
  width: 150px;
  font-size: 14px;
  background: transparent;
}

/* ========== .btn-lively 默认蓝色，hover 才出现彩色渐变 ========== */
@keyframes livelyGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.btn-lively {
  color: #fff;
  background-color: #2b6cf6;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 12px;
  font-size: 14px;
  transition: background 0.4s, transform 0.3s;
}
.btn-lively:hover {
  animation: livelyGradient 4s ease infinite;
  background: linear-gradient(270deg, #ff6b6b, #ffa36c, #ffd56c, #53d6af, #6bfff4, #6bd9ff);
  background-size: 600% 600%;
  transform: scale(1.05);
  opacity: 0.95;
}
.btn-lively:active {
  transform: scale(0.95);
}