src/assets/css/instancesList.css
/* 实例管理页面样式 - 使用DaisyUI */
.instances-container {
  @apply h-full w-full flex flex-col bg-base-100 text-base-content;
}

/* 顶部导航栏样式 */
.header-bar {
  @apply flex items-center justify-between p-3 rounded-xl mb-6 mt-2 mx-2 w-[calc(100%-16px)];
  background: var(--sidebar-bg, rgba(30, 35, 42, 0.65));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--sidebar-text-color, rgba(255, 255, 255, 0.8));
}

/* 深色模式下头部导航栏 */
[data-theme="dark"] .header-bar,
[data-theme="night"] .header-bar,
[data-theme="black"] .header-bar,
[data-theme="dracula"] .header-bar {
  background: rgba(22, 25, 30, 0.85);
  color: rgba(255, 255, 255, 0.8);
}

/* 浅色模式下头部导航栏 */
[data-theme="light"] .header-bar,
[data-theme="cupcake"] .header-bar,
[data-theme="bumblebee"] .header-bar,
[data-theme="corporate"] .header-bar {
  background: rgba(240, 245, 255, 0.85);
  color: rgba(0, 0, 0, 0.8);
}

/* 确保暗色模式下标题栏文本为白色 */
[data-theme="dark"] .header-bar {
  color: rgba(255, 255, 255, 0.9);
}

.title-area {
  @apply flex items-center gap-3 pt-1 pl-2;
}

.app-icon {
  @apply text-xl text-primary mr-2.5;
}

.header-title {
  @apply text-lg font-semibold text-base-content;
}

.search-area {
  @apply flex gap-2.5 items-center flex-grow justify-center max-w-[600px];
}

.filter-button {
  @apply p-2 rounded cursor-pointer flex items-center gap-1.5 transition-colors mr-2.5;
  background-color: rgba(255, 255, 255, 0.1);
}

.filter-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 浅色模式下的过滤按钮 */
[data-theme="light"] .filter-button,
[data-theme="cupcake"] .filter-button,
[data-theme="bumblebee"] .filter-button,
[data-theme="corporate"] .filter-button {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .filter-button:hover,
[data-theme="cupcake"] .filter-button:hover,
[data-theme="bumblebee"] .filter-button:hover,
[data-theme="corporate"] .filter-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.filter-button .iconify {
  @apply ml-1.5;
}

.search-box {
  @apply flex-grow max-w-[450px];
}

.search-icon {
  @apply text-base-content/50;
}

.action-area {
  @apply flex items-center gap-3;
}

.new-app-btn {
  @apply border-none;
}

/* 操作按钮栏样式 */
.operation-bar {
  @apply hidden; /* 隐藏原来的操作栏 */
}

.left-buttons {
  @apply flex gap-2.5;
}

/* 实例列表样式 - 确保滚动功能正常 */
.instances-list {
  @apply flex-1 p-4 bg-base-200;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 120px); /* 减去导航栏高度，确保有明确的最大高度 */
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--bc) / 0.3) transparent;
}

/* Webkit浏览器的滚动条样式 */
.instances-list::-webkit-scrollbar {
  width: 8px;
}

.instances-list::-webkit-scrollbar-track {
  background: transparent;
}

.instances-list::-webkit-scrollbar-thumb {
  background-color: hsl(var(--bc) / 0.3);
  border-radius: 4px;
}

.instances-list::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--bc) / 0.5);
}

/* 卡片式布局 */
.instances-grid {
  @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-4 px-2;
}

.instance-card {
  @apply bg-base-100 rounded-xl p-5 flex flex-col border border-base-300 shadow-md relative transition-all duration-300 h-[220px] overflow-hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* 使用DaisyUI卡片样式 */
.instance-card {
  @apply card bg-base-100;

  /* 防止悬停动画时字体模糊 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.instance-card:hover {
  @apply shadow-lg;
  transform: translateY(-3px) translateZ(0);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.instance-header {
  @apply mb-5;
}

.instance-name {
  @apply text-base font-bold block mb-2 text-base-content;
}

.instance-desc {
  @apply text-sm block text-base-content/70;
}

.instance-info {
  @apply mb-5;
}

.info-item {
  @apply mb-2.5 flex text-sm;
}

/* 增加时间信息样式 */
.time-info-container {
  @apply flex flex-col gap-1.5;
}

/* 确保时间值不换行 */
.time-value {
  @apply whitespace-nowrap overflow-hidden text-ellipsis text-base-content/80;
}

/* 时间标签样式 */
.time-label {
  @apply text-base-content/60 w-20 block;
}

.info-label {
  @apply text-base-content/60 w-20;
}

.info-value {
  @apply text-base-content/80;
}

.instance-actions {
  @apply flex gap-2 absolute right-4 top-4;
}

/* 新增: 重新设计的操作按钮区域 - 位于卡片右下角 */
.instance-actions-new {
  @apply absolute bottom-4 right-4 flex items-center gap-4 bg-transparent p-1 rounded;
  box-shadow: none;
}

.action-group {
  @apply flex flex-row gap-3;
}

/* 修改按钮组样式 */
.action-buttons {
  @apply flex gap-2;
}

/* 使用DaisyUI按钮样式 */
.instance-actions-new .btn {
  @apply btn-sm btn-square btn-ghost text-sm w-8 h-8 p-0 flex items-center justify-center transition-all duration-300;
}

/* 分隔线样式 */
.action-divider {
  @apply w-px h-5 bg-base-300 mx-1;
}

/* 按钮内的图标样式 */
.instance-actions-new .btn .iconify {
  @apply text-sm;
}

/* 按钮悬停效果 */
.instance-actions-new .btn:hover:not(:disabled) {
  @apply -translate-y-0.5 shadow-sm;
}

/* 禁用状态的按钮样式 */
.instance-actions-new .btn:disabled {
  @apply opacity-60 cursor-not-allowed;
}

.instance-status {
  @apply mt-auto mb-5 flex items-center;
}

.status-indicator {
  @apply flex items-center gap-1;
}

.status-icon {
  @apply text-base;
}

.status-text {
  @apply text-sm;
}

/* 状态颜色 - 使用DaisyUI颜色 */
.status-running {
  @apply text-success;
}

.status-starting {
  @apply text-warning;
}

.status-stopping {
  @apply text-error;
}

.status-stopped {
  @apply text-base-content/60;
}

.status-maintenance {
  @apply text-info;
}

/* 状态指示点样式 */
.status-dot {
  @apply w-2.5 h-2.5 rounded-full inline-block;
}

/* 运行状态 - 绿色脉冲 */
.status-dot.status-running {
  @apply bg-success;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 5px 1px rgba(72, 199, 116, 0.5);
}

/* 维护状态 - 蓝色脉冲 */
.status-dot.status-maintenance {
  @apply bg-info;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 5px 1px rgba(56, 182, 255, 0.5);
}

/* 停止状态 - 灰色固定点 */
.status-dot.status-stopped {
  @apply bg-base-content/40;
}

/* 脉冲动画 */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.85);
  }
}

/* 加载状态 */
.loading-container {
  @apply p-5;
}

.empty-state {
  @apply my-10 text-base-content/60;
}

/* 状态按钮的颜色增强，与状态指示点保持一致 */
.status-btn-success {
  @apply bg-success text-white border-success hover:bg-success/80 hover:border-success/80;
  box-shadow: 0 0 5px rgba(72, 199, 116, 0.3);
}

/* 停止按钮的样式增强 */
.btn-error.status-btn {
  box-shadow: 0 0 5px rgba(248, 114, 114, 0.3);
}

/* 按钮加载中状态 */
.btn .loading-spinner {
  @apply text-base-content;
}

/* 停止/启动按钮的悬停效果增强 */
.btn-square.btn-success:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.btn-square.btn-error:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* 添加按钮按下效果 */
.btn-square.btn-success:active,
.btn-square.btn-error:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* 新增: 按钮样式优化 */
.action-btn {
  @apply w-8 h-8 flex items-center justify-center transition-all duration-200;
  font-size: 16px;
  border-radius: 6px !important; /* 强制应用等边圆角 */
}

.btn-square.rounded-md {
  border-radius: 6px !important;
}

/* 启动/停止按钮图标样式 */
.action-btn .iconify {
  @apply text-base;
}

/* 按钮悬停效果增强 */
.action-btn:hover {
  @apply transform -translate-y-0.5 shadow-sm;
}

/* 按钮按下效果 */
.action-btn:active {
  @apply transform scale-95;
}

/* 增强按钮状态管理样式 */
.action-btn {
  @apply w-8 h-8 flex items-center justify-center transition-all duration-200;
  font-size: 16px;
  border-radius: 6px !important; /* 强制应用等边圆角 */
}

/* 加载状态按钮样式 */
.action-btn .loading {
  @apply text-base-content;
}

/* 按钮禁用状态 */
.action-btn:disabled {
  @apply opacity-70 cursor-not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* 状态转换动画增强 */
.status-starting .status-dot,
.status-stopping .status-dot {
  animation: status-pulse 1s infinite ease-in-out !important;
  box-shadow: 0 0 5px 1px rgba(255, 200, 0, 0.7) !important;
  background-color: #ffcc00 !important;
}

/* 状态转换文本颜色 */
.status-starting,
.status-stopping {
  @apply text-warning;
}

/* 启动/停止中的脉冲动画 */
@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.85);
  }
}

/* 按钮加载状态尺寸调整 */
.loading-xs {
  width: 1rem !important;
  height: 1rem !important;
}

/* Iconify图标支持 */
.iconify {
  @apply inline-flex align-middle;
}

/* DaisyUI徽章支持 */
.badge {
  @apply normal-case;
}
