src/assets/css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义Tailwind类 */
@layer components {
  .card-stats {
    @apply bg-base-100 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-5;
  }

  .chart-container {
    @apply bg-base-100 rounded-lg shadow-md p-4 mb-5 border border-base-200;
  }

  .system-info-box {
    @apply flex flex-wrap gap-2 bg-base-200/50 border border-base-300 rounded-md p-2 w-full;
  }

  .info-item {
    @apply text-sm text-base-content/70 p-1 overflow-hidden min-w-[150px] flex-1;
  }

  /* 添加Iconify图标组件样式 */
  .icon {
    @apply inline-flex items-center justify-center;
  }

  .icon-btn {
    @apply btn btn-ghost btn-circle;
  }

  .icon-btn-sm {
    @apply btn btn-ghost btn-sm btn-circle;
  }

  /* 卡片和图表增强 */
  .card-with-icon {
    @apply flex items-center gap-2;
  }

  .card-with-icon .iconify {
    @apply text-primary;
  }

  /* 图表主题适配 */
  .chart-theme-light {
    --chart-text-color: hsl(var(--bc));
    --chart-axis-color: hsl(var(--bc) / 0.2);
    --chart-grid-color: hsl(var(--bc) / 0.1);
  }

  .chart-theme-dark {
    --chart-text-color: hsl(var(--bc));
    --chart-axis-color: hsl(var(--bc) / 0.3);
    --chart-grid-color: hsl(var(--bc) / 0.15);
  }
}

/* DaisyUI主题过渡效果 */
[data-theme] {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 支持深色模式的过渡 */
html.dark-mode {
  color-scheme: dark;
}

/* 确保echarts容器正确显示 */
.chart {
  height: 250px;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* 过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Iconify图标通用样式 */
.iconify {
  @apply inline-flex align-middle;
}

/* 图标尺寸变体 */
.icon-xs .iconify {
  font-size: 0.75rem;
}

.icon-sm .iconify {
  font-size: 0.875rem;
}

.icon-md .iconify {
  font-size: 1.125rem;
}

.icon-lg .iconify {
  font-size: 1.5rem;
}

.icon-xl .iconify {
  font-size: 2rem;
}

/* 图标颜色适配主题 */
.icon-primary .iconify {
  color: hsl(var(--p));
}

.icon-secondary .iconify {
  color: hsl(var(--s));
}

.icon-accent .iconify {
  color: hsl(var(--a));
}

.icon-success .iconify {
  color: hsl(var(--su));
}

.icon-error .iconify {
  color: hsl(var(--er));
}
