/**
 * @license
 * Copyright 2025 Qwen Team
 * SPDX-License-Identifier: Apache-2.0
 */

/**
 * PlanDisplay.css -> Tailwind 化
 * 说明：尽量用 @apply，把原有类名保留，便于调试；
 * 仅在必须的地方保留少量原生 CSS（如关键帧）。
 */

/* 容器 */
.plan-display {
  @apply bg-transparent border-0 py-2 px-4 my-2;
}

/* 标题区 */
.plan-header {
  @apply flex items-center gap-1.5 mb-2;
}

.plan-progress-icons {
  @apply flex items-center gap-[2px];
}

.plan-progress-icon {
  @apply shrink-0 text-[var(--app-secondary-foreground)] opacity-60;
}

.plan-title {
  @apply text-xs font-normal text-[var(--app-secondary-foreground)] opacity-80;
}

/* 列表 */
.plan-entries {
  @apply flex flex-col gap-px;
}

.plan-entry {
  @apply flex items-center gap-2 py-[3px] min-h-[20px];
}

/* 图标容器（保留类名以兼容旧 DOM） */
.plan-entry-icon {
  @apply shrink-0 flex items-center justify-center w-[14px] h-[14px];
}

.plan-icon {
  @apply block w-[14px] h-[14px];
}

/* 不同状态颜色（保留类名） */
.plan-icon.pending {
  @apply text-[var(--app-secondary-foreground)] opacity-30;
}

.plan-icon.in-progress {
  @apply text-[var(--app-secondary-foreground)] opacity-70;
}

.plan-icon.completed {
  @apply text-[#4caf50] opacity-80; /* 绿色勾号 */
}

/* 内容 */
.plan-entry-content {
  @apply flex-1 flex items-center;
}

.plan-entry-text {
  @apply flex-1 text-xs leading-[1.5] text-[var(--app-primary-foreground)] opacity-80;
}

/* 状态化文本（保留选择器，兼容旧结构） */
.plan-entry.completed .plan-entry-text {
  @apply opacity-50 line-through;
}

.plan-entry.in_progress .plan-entry-text {
  @apply font-normal opacity-90;
}

/* 保留 fadeIn 动画，供 App.tsx 使用 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}