src/assets/css/performanceMonitor.css
.status-card {
  @apply transition-all duration-300 rounded-lg bg-base-100 text-base-content;
  animation: slideIn 0.6s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.status-card:hover {
  @apply -translate-y-[3px] shadow-md;
}

.card-header {
  @apply flex justify-between items-center text-inherit;
}

.header-right {
  @apply flex items-center gap-2.5;
}

.error-tag {
  @apply mr-1 badge badge-error badge-sm;
}

.refresh-btn {
  @apply text-sm ml-auto btn btn-ghost btn-sm;
}

/* 性能监控样式优化 */
.performance-dashboard {
  @apply flex flex-col gap-4 overflow-hidden;
}

.metric-item {
  @apply p-4 bg-base-200 rounded-lg text-base-content min-h-[160px] h-auto flex flex-col overflow-hidden transition-all duration-300;
  aspect-ratio: 4/3;
}

.metric-header {
  @apply flex items-center mb-2.5 overflow-hidden justify-between w-full;
}

.metric-header .iconify {
  @apply mr-2 text-primary flex-shrink-0;
}

.metric-value {
  @apply ml-auto font-bold whitespace-nowrap text-base-content;
}

.metric-details {
  @apply flex flex-col gap-1.5 mt-2.5 text-sm text-base-content/70 overflow-hidden text-ellipsis justify-between;
}

.network-stats {
  @apply flex flex-col gap-1.5 mt-2.5 text-sm overflow-hidden justify-between;
}

.missing-dep-warning {
  @apply mb-4 alert alert-warning text-sm;
}

/* 性能监控组件样式 */
.performance-monitor-container {
  @apply w-full bg-base-100 rounded-lg shadow-sm transition-all duration-300;
}

/* 卡片头部 */
.monitor-header {
  @apply flex justify-between items-center p-3 border-b border-base-300/20;
}

/* 指标卡片容器 */
.metrics-grid {
  @apply grid p-4 gap-4;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* 图表容器样式 */
.chart-wrapper {
  @apply h-[250px] relative overflow-hidden;
}

/* 加载动画 */
@keyframes pulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.loading {
  animation: pulse 1.5s infinite;
}

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

/* 刷新按钮图标 */
.refresh-btn .iconify {
  @apply mr-1;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .performance-dashboard {
    grid-template-columns: 1fr;
  }

  /* 手机端保持合适的高度比例 */
  .metric-item {
    aspect-ratio: 3/2;
    min-height: 140px;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* 高对比度主题支持 */
@media (prefers-contrast: high) {
  .monitor-header {
    @apply border-b-2;
  }
}

/* DaisyUI会自动处理深色模式，无需手动适配 */
