/* Datasets Page Specific Styles */

/* Ensure the custom dropdown for sorting has a fixed width */
.custom-dropdown {
  min-width: 220px;
  /* Adjust this value as needed */
  width: auto;
  /* Allow it to grow if content is larger */
}

.custom-dropdown .dropdown-toggle {
  width: 100%;
}

/* Mobile Filter Drawer Styles */
.datasets-page .filter-drawer-overlay {
  transition: opacity 0.3s ease-in-out;
}

.datasets-page .mobile-filter-drawer {
  max-height: 80vh;
  /* Limit height to 80% of viewport height */
  overflow-y: auto;
  /* Enable scrolling for content within the drawer */
  padding-bottom: env(safe-area-inset-bottom);
}

.datasets-page .mobile-filter-drawer.open {
  transform: translateY(0);
}

#dataset-filter-count-badge.hidden {
  display: none !important;
}

/* =========================================
   1. 滑块容器与主体 (Slider Container & Track)
   ========================================= */
.size-slider-container {
  margin-top: 8px;
}

.size-slider {
  position: relative;
  width: 100%;
}

.size-slider-track {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: #e5e7eb; /* 默认灰色，会被 JS 的热力图覆盖 */
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
}

/* 扩大点击热区 (优化体验) */
.size-slider-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 24px; /* 上下各扩展，便于点击 */
  transform: translateY(-50%);
  z-index: 1;
}

/* =========================================
   2. 填充条与把手 (Fill & Thumbs)
   ========================================= */
.size-slider-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #6366f1;
  border-radius: 4px;

  /* 双向滑块关键样式：由 JS 动态控制 left 和 width */
  left: 0%;
  width: 100%;

  /* 视觉优化：让底部的热力图稍微透出来一点 */
  opacity: 0.8;
  pointer-events: none; /* 防止遮挡轨道的点击事件 */
}

.size-slider-thumb {
  position: absolute;
  top: 50%;
  /* 基础定位，left 由 JS 控制 */
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border: 3px solid #6366f1;
  border-radius: 50%;
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 移除 left 的 transition 以保证拖拽跟手 */
  z-index: 10;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.size-slider-thumb:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
  z-index: 11;
}

.size-slider-thumb:active,
.size-slider-thumb.active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 20; /* 确保当前拖动的把手在最上层 */
}

/* =========================================
   3. 信息面板布局 (Info Panel Layout)
   ========================================= */
.size-slider-info-panel {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 上下两行的间距 */
  padding: 12px;
  margin-top: 12px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 紧凑模式 (用于第一行输入框) */
.info-item.compact {
  gap: 6px;
}

/* =========================================
   4. 文字与输入框样式 (Typography & Inputs)
   ========================================= */
.info-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}

.info-value {
  font-size: 12px;
  color: #374151;
  font-weight: 600;
}

/* 高亮样式 (用于 Datasets 数量) */
.info-value.highlight {
  color: #6366f1;
  font-weight: 700;
  font-size: 13px;
}

/* 输入框样式 */
.info-input {
  width: 75px;
  padding: 4px 6px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  text-align: right;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  transition: all 0.2s ease;
}

/* 输入框聚焦态 */
.info-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* 隐藏输入框的微调按钮 (Chrome/Safari/Edge) */
.info-input::-webkit-outer-spin-button,
.info-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.info-input {
  -moz-appearance: textfield;
}

/* =========================================
   5. 深色模式适配 (Dark Mode)
   ========================================= */
/* 滑块部分 */
.dark .size-slider-track {
  background-color: #374151;
}

.dark .size-slider-thumb {
  background-color: #1f2937;
  border-color: #6366f1;
}

/* 面板部分 */
.dark .size-slider-info-panel {
  background-color: #1f2937;
  border-color: #374151;
}

/* 文字颜色 */
.dark .info-label {
  color: #9ca3af;
}

.dark .info-value {
  color: #d1d5db;
}

.dark .info-value.highlight {
  color: #818cf8; /* 浅靛蓝，深色背景下更清晰 */
}

/* 输入框部分 */
.dark .info-input {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

.dark .info-input:focus {
  background-color: #1f2937;
  border-color: #6366f1;
}

/* Mobile specific adjustments */
@media (max-width: 1023.98px) {
  .size-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .size-slider-info-panel {
    padding: 16px;
  }

  .info-label,
  .info-value {
    font-size: 14px;
  }
}

/* ========================================================== */
/* ===== START: 粘性筛选侧边栏 (Sticky Filter Sidebar) ===== */
/* ========================================================== */

/* 
 * 此规则仅在屏幕宽度大于或等于 1024px 时生效 (lg 断点)。
 * 它会选择 lg:flex-row 容器内的 aside 元素，这正好是
 * Datasets 和 Methods 页面的侧边栏结构。
*/
@media (min-width: 1024px) {
  .lg\:flex-row > aside {
    /* 1. 开启粘性定位 */
    position: -webkit-sticky;
    position: sticky;

    /* 2. 设置距离顶部的距离 (为导航栏预留空间) */
    /* 您 HTML 中的 sticky top-20 对应 5rem/80px，这里保持一致 */
    top: calc(80px + env(safe-area-inset-top));

    /* 3. 设置最大高度，使其不超过屏幕，并留出上下边距 */
    max-height: calc(100vh - 100px - env(safe-area-inset-top));

    /* 4. 当内容超出最大高度时，自动显示内部滚动条 */
    overflow-y: auto;

    /* (亮色模式) 滚动条样式 - 采用您指定的统一颜色 */
    scrollbar-width: thin;
    scrollbar-color: #a0aec0 #f1f5f9; /* 滑块(中灰) 轨道(浅灰) */
  }

  /* (亮色模式) Webkit 浏览器滚动条 (Chrome, Safari, Edge) */
  .lg\:flex-row > aside::-webkit-scrollbar {
    width: 8px;
  }

  .lg\:flex-row > aside::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
  }

  .lg\:flex-row > aside::-webkit-scrollbar-thumb {
    background-color: #a0aec0;
    border-radius: 4px;
    border: 2px solid #f1f5f9;
  }

  .lg\:flex-row > aside::-webkit-scrollbar-thumb:hover {
    background-color: #718096;
  }

  /* --- Dark Mode Scrollbar Styles --- */

  /* (深色模式) Firefox 浏览器滚动条 */
  html.dark .lg\:flex-row > aside {
    scrollbar-color: #4b5563 #1f2937; /* 深色滑块 深色轨道 */
  }

  /* (深色模式) Webkit 浏览器滚动条 */
  html.dark .lg\:flex-row > aside::-webkit-scrollbar-track {
    background: #1f2937;
  }

  html.dark .lg\:flex-row > aside::-webkit-scrollbar-thumb {
    background-color: #4b5563;
    border-color: #1f2937;
  }

  html.dark .lg\:flex-row > aside::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280;
  }
}

/* ========================================================== */
/* ===== END: 粘性筛选侧边栏代码 ===== */
/* ========================================================== */
.dataset-card .card-image-container {
  /* 
   * 关键修复：为数据集卡片的图片容器设置一个固定的高度。
   * 这个高度创建了一个“画框”，shared.js 中的样式才能
   * 在这个画框内将图片居中并填充背景色。
   * 200px 是一个建议值，您可以根据您的设计调整。
  */
  height: 140px;
}
/* css/style_datasets.css */

/* style_datasets.css */

/* --- 开始：滑块轨道最终样式 (单层结构) --- */

.size-slider-track {
  position: relative; /* 必须是 relative，为内部元素定位 */
  width: 100%;
  height: 12px;
  border-radius: 6px;
  cursor: pointer;

  /* 关键：为亮色模式设置一个默认的“备用”背景色 */
  background-color: #f3f4f6;
}

/* 为深色模式设置“备用”背景色 */
.dark .size-slider-track {
  background-color: #374151;
}

/* --- 结束：最终样式 --- */

/* (您文件中关于 .slider-tooltip 的样式可以保持不变) */

/* --- 开始：为滑块 Tooltip 添加的样式 --- */
.slider-tooltip {
  position: absolute;
  bottom: 20px; /* 定位在滑轨上方 */
  left: 0; /* JS 会动态更新这个值 */
  transform: translateX(-50%); /* 让 Tooltip 的中心对准鼠标 */
  background-color: #1f2937; /* 深色背景 */
  color: #ffffff; /* 白色文字 */
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap; /* 防止文字换行 */
  z-index: 10;

  /* 默认隐藏，通过 JS 控制显示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;

  /* 关键：让鼠标可以“穿透”它，不会干扰下方的滑块事件 */
  pointer-events: none;
}

/* 当 Tooltip 可见时 */
.slider-tooltip.visible {
  opacity: 1;
  visibility: visible;
}

/* 深色模式下的 Tooltip 样式 */
.dark .slider-tooltip {
  background-color: #f3f4f6;
  color: #1f2937;
}

/* style_datasets.css */

/* --- START: 紧凑型筛选芯片布局 (最终美化版) --- */

/* 1. (核心修改) 将容器设置为两列"等宽"的网格。*/
.filter-chip-container.compact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; /* 在列和行之间设置 8px 的间隙 */
}

/* 
 * 2. 关键修改：确保芯片内部使用 flex 布局，并将内容两端对齐
 * 这样文字会在左端，数字会在右端
*/
.compact-layout .filter-chip {
  display: flex !important;
  justify-content: space-between !important; /* 文字在左，数字在右 */
  align-items: center !important;
  width: 100% !important;
}

/* 
 * 3. 确保芯片标签正常显示
*/
.compact-layout .filter-chip .chip-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0; /* 防止标签被压缩 */
}

/* 
 * 4. 数字徽章组靠右对齐
*/
.compact-layout .filter-chip .count-badge {
  margin-left: auto; /* 将数字推到最右端 */
  flex-shrink: 0; /* 防止数字被压缩 */
}

/* 
 * 5. 如果有多个数字徽章，确保它们紧挨着显示
*/
.compact-layout .filter-chip .count-badge + .count-badge {
  margin-left: 4px; /* 两个数字之间的间距 */
}

/* 
 * 6. 清除按钮保持在最右边
*/
.compact-layout .filter-chip .clear-chip-btn {
  margin-left: 4px;
  flex-shrink: 0;
}
/* --- END: 紧凑型筛选芯片布局 (最终美化版) --- */

.datasets-page .filter-chip.active[data-filter="difficulty"][data-value="Easy"] {
  background-color: #16a34a;
  border-color: #16a34a;
}

.datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Medium"] {
  background-color: #f59e0b;
  border-color: #f59e0b;
}

.datasets-page .filter-chip.active[data-filter="difficulty"][data-value="Hard"] {
  background-color: #dc2626;
  border-color: #dc2626;
}

.datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Very Hard"] {
  background-color: #6d28d9;
  border-color: #6d28d9;
}

html.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Easy"] {
  background-color: #15803d;
  border-color: #15803d;
}

html.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Medium"] {
  background-color: #d97706;
  border-color: #d97706;
}

html.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Hard"] {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

html.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Very Hard"] {
  background-color: #5b21b6;
  border-color: #5b21b6;
}

.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Easy"] {
  background-color: #15803d;
  border-color: #15803d;
}

.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Medium"] {
  background-color: #d97706;
  border-color: #d97706;
}

.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Hard"] {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

.dark
  .datasets-page
  .filter-chip.active[data-filter="difficulty"][data-value="Very Hard"] {
  background-color: #5b21b6;
  border-color: #5b21b6;
}

#datasets-filter-explainer-rail {
  left: 50%;
  transform: translateX(calc(1280px / 2 + 2rem));
}

@media (min-width: 1536px) and (max-width: 1600px) {
  #datasets-filter-explainer-rail {
    transform: translateX(calc(1280px / 2 + 1.5rem));
  }
}

.datasets-explainer-rail-nav {
  height: calc(100vh - 64px - 4rem);
  overflow-y: auto;
  padding-top: 1rem;
}

.datasets-explainer-rail-inner {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  padding: 14px;
}

.datasets-explainer-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.datasets-explainer-rail-title {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}

.datasets-explainer-rail-clear {
  font-size: 12px;
  font-weight: 600;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.22);
  padding: 6px 10px;
  border-radius: 999px;
}

.datasets-explainer-rail-clear:hover {
  background: rgba(79, 70, 229, 0.12);
}

.datasets-explainer-rail-active {
  padding-top: 12px;
}

.datasets-explainer-rail-active-title {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 8px;
}

.datasets-explainer-rail-group {
  margin-top: 12px;
}

.datasets-explainer-rail-group:first-of-type {
  margin-top: 10px;
}

.datasets-explainer-rail-group-title {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.datasets-explainer-rail-group-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.55);
}

.datasets-explainer-rail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.datasets-explainer-rail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  max-width: 100%;
}

.datasets-explainer-rail-chip[data-pinned="true"] {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.25);
  color: #312e81;
}

.datasets-explainer-rail-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.datasets-explainer-rail-chip-remove {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  background: rgba(100, 116, 139, 0.12);
}

.datasets-explainer-rail-chip-remove:hover {
  background: rgba(100, 116, 139, 0.18);
}

.datasets-explainer-rail-content {
  padding-top: 14px;
}

.datasets-explainer-rail-card {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.06), rgba(255, 255, 255, 0.9));
  padding: 12px;
}

.datasets-explainer-rail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.datasets-explainer-rail-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  background: rgba(148, 163, 184, 0.2);
}

.datasets-explainer-rail-badge[data-mode="selected"] {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.14);
}

.datasets-explainer-rail-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.datasets-explainer-rail-one {
  margin-top: 8px;
  font-size: 13px;
  color: #334155;
  line-height: 1.45;
}

.datasets-explainer-rail-bullets {
  margin-top: 10px;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
  line-height: 1.55;
}

.datasets-explainer-rail-links {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.datasets-explainer-rail-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  border-radius: 999px;
}

.datasets-explainer-rail-link:hover {
  background: #e2e8f0;
}

.datasets-explainer-rail-empty {
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: #fbfdff;
  padding: 12px;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

html.dark .datasets-explainer-rail-inner {
  background: #0b1220;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

html.dark .datasets-explainer-rail-header {
  border-bottom-color: rgba(148, 163, 184, 0.14);
}

html.dark .datasets-explainer-rail-title {
  color: rgba(226, 232, 240, 0.94);
}

html.dark .datasets-explainer-rail-clear {
  color: rgba(199, 210, 254, 0.95);
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.28);
}

html.dark .datasets-explainer-rail-active-title {
  color: rgba(148, 163, 184, 0.95);
}

html.dark .datasets-explainer-rail-group-title {
  color: rgba(226, 232, 240, 0.92);
}

html.dark .datasets-explainer-rail-group-title::before {
  background: rgba(129, 140, 248, 0.6);
}

html.dark .datasets-explainer-rail-chip {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.92);
}

html.dark .datasets-explainer-rail-chip[data-pinned="true"] {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.32);
  color: rgba(224, 231, 255, 0.95);
}

html.dark .datasets-explainer-rail-chip-remove {
  color: rgba(148, 163, 184, 0.9);
  background: rgba(148, 163, 184, 0.14);
}

html.dark .datasets-explainer-rail-card {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.18), rgba(2, 6, 23, 0.66));
  border-color: rgba(148, 163, 184, 0.16);
}

html.dark .datasets-explainer-rail-badge {
  color: rgba(226, 232, 240, 0.92);
  background: rgba(148, 163, 184, 0.18);
}

html.dark .datasets-explainer-rail-badge[data-mode="selected"] {
  color: rgba(199, 210, 254, 0.95);
  background: rgba(99, 102, 241, 0.22);
}

html.dark .datasets-explainer-rail-name {
  color: rgba(226, 232, 240, 0.95);
}

html.dark .datasets-explainer-rail-one,
html.dark .datasets-explainer-rail-bullets {
  color: rgba(226, 232, 240, 0.86);
}

html.dark .datasets-explainer-rail-link {
  color: rgba(226, 232, 240, 0.9);
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.18);
}

html.dark .datasets-explainer-rail-link:hover {
  background: rgba(148, 163, 184, 0.18);
}

html.dark .datasets-explainer-rail-empty {
  color: rgba(226, 232, 240, 0.82);
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.6);
}

@media (max-width: 1535px) {
  #datasets-filter-explainer {
    display: none !important;
  }
}