/* Shared card styles for datasets and methods */

.card {
  transition: var(--transition-base);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card .card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem;
}

.card .card-content > div:last-child {
  margin-top: auto;
}

.card-image-container {
  height: 150px;
  overflow: hidden;
  width: 100%;
}

.card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-description {
  height: 72px;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.5;
  color: #4b5563;
  margin-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

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

html.dark .card-description {
    scrollbar-color: var(--dark-border) var(--dark-card-bg);
    color: var(--dark-text-secondary);
}

.card-tags-area {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}

html.dark .card-footer {
  border-top-color: rgba(255, 255, 255, 0.8);
}

/* Badge colors - Light mode */
.bg-gray-100 { background-color: #F3F4F6; color: #374151; }
.bg-indigo-100 { background-color: #E0E7FF; color: #4F46E5; }
.bg-blue-100 { background-color: #DBEAFE; color: #1E40AF; }
.bg-purple-100 { background-color: #F3E8FF; color: #6B46C1; }
.bg-green-100 { background-color: #D1FAE5; color: #065F46; }
.bg-yellow-100 { background-color: #FEF3C7; color: #92400E; }
.bg-red-100 { background-color: #FEE2E2; color: #991B1B; }
.bg-pink-100 { background-color: #FCE7F3; color: #9D2463; }
.bg-cyan-100 { background-color: #CFFAFE; color: #0E7490; }
.bg-orange-100 { background-color: #FFEDD5; color: #9A3412; }
.bg-teal-100 { background-color: #CCFBF1; color: #0F766E; }
.bg-emerald-100 { background-color: #D1FAE5; color: #047857; }
.bg-lime-100 { background-color: #ECFCCB; color: #4D7C0F; }
.bg-amber-100 { background-color: #FEF3C7; color: #D97706; }
.bg-rose-100 { background-color: #FFE4E6; color: #E11D48; }

/* Badge colors - Dark mode */
html.dark .bg-gray-100 { background-color: var(--dark-card-bg) !important; color: var(--dark-text) !important; }
html.dark .bg-indigo-100 { background-color: #4f46e5 !important; color: #a5b4fc !important; }
html.dark .bg-blue-100 { background-color: #1e3a8a !important; color: #93c5fd !important; }
html.dark .bg-purple-100 { background-color: #6b46c1 !important; color: #c4b5fd !important; }
html.dark .bg-green-100 { background-color: #065f46 !important; color: #6ee7b7 !important; }
html.dark .bg-yellow-100 { background-color: #92400e !important; color: #fde047 !important; }
html.dark .bg-red-100 { background-color: #7f1d1d !important; color: #fca5a5 !important; }
html.dark .bg-pink-100 { background-color: #9d174d !important; color: #f9a8d4 !important; }
html.dark .bg-cyan-100 { background-color: #0e7490 !important; color: #67e8f9 !important; }
html.dark .bg-orange-100 { background-color: #9a3412 !important; color: #fed7aa !important; }
html.dark .bg-teal-100 { background-color: #0f766e !important; color: #5eead4 !important; }
html.dark .bg-emerald-100 { background-color: #047857 !important; color: #6ee7b7 !important; }
html.dark .bg-lime-100 { background-color: #4d7c0f !important; color: #bef264 !important; }
html.dark .bg-amber-100 { background-color: #d97706 !important; color: #fde047 !important; }
html.dark .bg-rose-100 { background-color: #e11d48 !important; color: #fda4af !important; }

/* --- START: 图片显示不完整问题修复 --- */
.card-image-container {
  /* 确保容器本身的大小和溢出行为正确 */
  display: flex;         /* 使用flex布局让图片居中 */
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  overflow: hidden;      /* 隐藏图片溢出的部分 */
  height: 150px;         /* 保持你设定的固定高度 */
  background-color: #f9fafb; /* 添加一个浅灰色背景，以防图片加载失败或留白 */
}

/* 针对容器内的图片本身 */
.card-image-container img {
  width: 100%;           /* 让图片宽度撑满容器 */
  height: 100%;          /* 让图片高度撑满容器 */
  
  /* 
   * 核心属性！决定图片如何适应容器。
   * 选择下面两个中的一个：
  */

  /* 选项 A: 裁剪以覆盖 (推荐，保持UI统一) */
  /* 图片会被缩放以完全覆盖容器，超出部分被裁剪。 */
  /* object-fit: cover;  */

  /* 选项 B: 完整显示并留白 */
  /* 图片会被缩放以在容器内完整显示，可能会有留白。 */
  object-fit: contain; 
}

/* (可选) 深色模式下的背景色 */
html.dark .card-image-container {
    background-color: #374151; /* 深灰色背景 */
}
/* --- END: 图片显示不完整问题修复 --- */