src/assets/css/instancesPanel.css
.instances-tab {
  @apply w-full h-full min-h-full pb-6;
  /* 移除独立动画，使用组件级过渡动画 */
  /* 添加与主页一致的渐变背景 */
  background-image: linear-gradient(
    135deg,
    hsl(var(--p) / 0.2) 0%,
    hsl(var(--p) / 0.5) 100%
  );
  /* 确保容器完全填充到边缘，移除任何边距 - 移除!important */
  margin: 0;
  padding: 0 0 1.5rem 0;
  /* 确保背景填充整个容器区域 */
  background-attachment: local;
  background-size: cover;
  /* 确保没有定位偏移 */
  left: 0;
  right: 0;
}

.header-section {
  @apply flex justify-between items-center mb-5;
  /* 添加半透明背景增强可读性 */
  @apply bg-base-100/70 p-4 rounded-lg backdrop-blur-sm shadow-sm;
}

.section {
  @apply mb-6 text-base-content rounded-lg p-4 shadow-sm;
  /* 更新为半透明背景，增强深度感 */
  @apply bg-base-100/80 backdrop-blur-sm border border-base-300/30;
}

.section-title {
  @apply font-bold text-base mb-3 text-primary border-b border-base-200/50 pb-2;
}

.instances-list {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-2;
}

.instance-card {
  @apply transition-all duration-300 border border-base-300 rounded-lg p-4;
  /* 更新卡片背景为半透明 */
  @apply bg-base-100/90;
  transform-origin: center center;
}

.instance-card:hover {
  @apply -translate-y-1 shadow-md bg-base-100/100;
}

.instance-card:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* 详情视图返回按钮动画 */
.action-button {
  transition: all 0.1s ease;
}

.action-button:active {
  transform: scale(0.92);
}

/* 强化详情视图进入动画 */
.instance-detail-container {
    transform: translateX(0) scale(1);
  }
}

/* 适配深色模式 */
[data-theme="dark"] .instances-tab,
[data-theme="night"] .instances-tab,
[data-theme="black"] .instances-tab {
  background-image: linear-gradient(
    135deg,
    hsl(var(--n) / 0.8) 0%,
    hsl(var(--n) / 0.6) 100%
  );
}

[data-theme="dark"] .section,
[data-theme="night"] .section,
[data-theme="black"] .section,
[data-theme="dark"] .instance-card,
[data-theme="night"] .instance-card,
[data-theme="black"] .instance-card {
  @apply bg-base-200/70;
}

[data-theme="dark"] .instance-card:hover,
[data-theme="night"] .instance-card:hover,
[data-theme="black"] .instance-card:hover {
  @apply bg-base-200/90;
}

/* 确保表格与背景风格一致 */
.instances-table-wrapper {
  @apply bg-base-100/90 backdrop-blur-sm;
}

[data-theme="dark"] .instances-table-wrapper,
[data-theme="night"] .instances-table-wrapper,
[data-theme="black"] .instances-table-wrapper {
  @apply bg-base-200/80;
}

/* 添加卡片悬停效果增强 */
.section:hover {
  @apply shadow-md bg-base-100/90;
}

[data-theme="dark"] .section:hover,
[data-theme="night"] .section:hover,
[data-theme="black"] .section:hover {
  @apply bg-base-200/80;
}

/* 确保内容可以滚动但保持背景固定 */
.instances-tab {
  background-attachment: fixed;
  @apply overflow-auto;
}

/* DaisyUI会自动处理暗色和亮色主题，不需要单独的深色模式样式 */

/* 响应式设计 */
@media (max-width: 768px) {
  .instances-list {
    @apply grid-cols-1;
  }

  .header-section {
    @apply flex-col items-start gap-2.5;
  }

  .header-actions {
    @apply w-full flex-wrap;
  }

  .search-input {
    @apply w-full;
  }
}
