/* Methods 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%;
}

.method-card .card-image-container {
  height: 140px;
}

/* Method card footer specific styling - add border like datasets */
.method-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
}



/* Clear search button styling */
#clear-search-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 1rem;
  display: none;
}

/* Mobile Clear Search Button */
#clear-search-btn-mobile {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 1rem;
  display: none;
}

html.dark select {
  background-color: var(--dark-card-bg);
  color: var(--dark-text);
  border-color: var(--dark-border);
}

/* Sort button styles */
.sort-button {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #374151;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.sort-button:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.sort-button.active {
  background-color: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

/* Mobile Sticky Header Positioning and Z-index */
@media (max-width: 1023.98px) {

  /* Equivalent to Tailwind's lg breakpoint */
  #mobile-sticky-controls {
    display: flex;
    /* Ensure it's visible on mobile */
    top: 80px;
    /* Adjust for fixed navbar height */
    z-index: 10;
    /* Ensure it's below the navbar but above content */
  }
}

/* Mobile Filter Drawer and Overlay Explicit Styles */
#filter-drawer-overlay-methods.hidden,
#mobile-filter-drawer-methods.hidden {
  display: none;
}

#filter-drawer-overlay-methods {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#filter-drawer-overlay-methods:not(.hidden) {
  opacity: 1;
}

#mobile-filter-drawer-methods {
  transform: translateY(100%);
  /* Start position */
  transition: transform 0.3s ease-in-out;
}

#mobile-filter-drawer-methods.open {
  transform: translateY(0);
  /* End position */
}

/* Ensure drawer and overlay are block when not hidden */
#filter-drawer-overlay-methods:not(.hidden),
#mobile-filter-drawer-methods:not(.hidden) {
  display: block;
}

#featurization-group-chips {
  margin-bottom: 16px;
}

#featurization-group-chips-mobile {
  margin-bottom: 16px;
}

/* 深色模式下 Smiles 和 Graph badge 样式 */
.dark .bg-indigo-200.text-indigo-900 {
  background-color: #3730a3 !important;
  /* 深靛蓝 */
  color: #e0e7ff !important;
}

.dark .bg-emerald-200.text-emerald-900 {
  background-color: #065f46 !important;
  /* 深绿色 */
  color: #d1fae5 !important;
}

/* ========================================================== */
/* ===== 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: 80px; 
    
    /* 3. 设置最大高度，使其不超过屏幕，并留出上下边距 */
    max-height: calc(100vh - 100px);
    
    /* 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: 粘性筛选侧边栏代码 ===== */
/* ========================================================== */

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

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

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

.methods-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;
}

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

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

.methods-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;
}

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

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

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

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

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

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

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

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

.methods-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%;
}

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

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

.methods-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);
}

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

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

.methods-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;
}

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

.methods-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);
}

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

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

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

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

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

.methods-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;
}

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

.methods-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 .methods-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 .methods-explainer-rail-header {
  border-bottom-color: rgba(148, 163, 184, 0.14);
}

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

html.dark .methods-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 .methods-explainer-rail-active-title {
  color: rgba(148, 163, 184, 0.95);
}

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

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

html.dark .methods-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 .methods-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 .methods-explainer-rail-chip-remove {
  color: rgba(148, 163, 184, 0.9);
  background: rgba(148, 163, 184, 0.14);
}

html.dark .methods-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 .methods-explainer-rail-badge {
  color: rgba(226, 232, 240, 0.92);
  background: rgba(148, 163, 184, 0.18);
}

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

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

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

html.dark .methods-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 .methods-explainer-rail-link:hover {
  background: rgba(148, 163, 184, 0.18);
}

html.dark .methods-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);
}


/* --- 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: 紧凑型筛选芯片布局 (最终美化版) --- */