src/assets/css/instances/instanceDetail.css
/* 实例详情页样式 */
.instance-detail-view {
  @apply min-h-screen bg-base-200 text-base-content;
  transform-origin: center;
  will-change: opacity, transform;
}

/* 详情内部元素动画 - 级联动画效果 */
.detail-header {
  @apply bg-base-100/80 rounded-lg shadow-sm p-4 backdrop-blur-sm;
}

.app-header {
}

.main-content > * {
}

@keyframes itemFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 信息卡片样式 */
.instance-info-header {
  @apply py-2;
}

/* 状态徽章样式 */
.status-badge {
  @apply px-3 py-1 rounded-full text-sm font-medium;
}

/* 信息项样式 */
.info-item {
  @apply flex flex-col py-2;
}

/* 服务项样式 */
.service-item {
  @apply mb-3 last:mb-0;
}

/* 日志统计项样式 */
.log-stat-item {
  @apply py-1;
}

/* 状态点样式 */
.status-dot {
  @apply w-2.5 h-2.5 rounded-full;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

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

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

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

/* 警告状态 */
.status-warning {
  @apply bg-warning;
  animation: pulse 1.5s infinite;
  box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
}

/* 错误状态 */
.status-error {
  @apply bg-error;
  box-shadow: 0 0 5px rgba(248, 114, 114, 0.5);
}

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

/* 响应式样式 */
@media (max-width: 768px) {
  .instance-detail-view {
    @apply px-2;
  }
}
