@layer business {
/* ========================================
   Todo UI 样式 - 极简紧凑版
   最小化纵向空间占用
   ======================================== */

/* ========== 主容器 ========== */
.todo-container-main {
  max-width: var(--max-content-width);
  width: 100%;
  margin: 0 auto 8px auto; /* 极小的底部间距 */
}

/* ========== Todo 面板 - 紧凑版 ========== */
.todo-panel-compact {
  background: rgba(212, 144, 10, 0.04); /* 极淡的黄色背景 */
  border: 1px solid rgba(212, 144, 10, 0.3);
  border-radius: 4px;
  padding: 4px 8px; /* 极小的内边距 */
  font-size: 0.75rem; /* 小字体 */
  line-height: 1.2; /* 紧凑行高 */
}

/* ========== 标题栏 - 折叠态点阵（方案 B） ========== */
.todo-header-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 2px; /* 极小的上下内边距 */
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}

.todo-header-compact:hover {
  background: rgba(139, 119, 90, 0.08); /* 中性 hover（rules.md） */
}

/* 播放三角图标（展开时旋转 90°） */
.todo-play {
  flex-shrink: 0;
  color: var(--color-warning);
  font-size: 0.7rem;
  line-height: 1;
  transition: transform 0.2s;
}

.todo-panel-compact.open .todo-play {
  transform: rotate(90deg);
}

/* 标题文本 */
.todo-title {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--color-warning);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* 圆点点阵 - 折叠态全局进度概览 */
.todo-dots {
  display: flex;
  gap: 4px; /* gap-sm */
  flex-shrink: 0;
}

.todo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-color-default);
}

/* 点色 = 状态符号同语义 */
.todo-dot.dot-completed { background: var(--color-success); }
.todo-dot.dot-in_progress {
  background: var(--color-warning);
  animation: pulse-compact 1.5s ease-in-out infinite;
}
.todo-dot.dot-pending { background: var(--border-color-default); }
.todo-dot.dot-cancelled { background: var(--border-color-default); opacity: 0.5; }

/* 当前任务文本（折叠态） */
.todo-current {
  flex: 1;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 展开指示箭头（展开时旋转 180°） */
.todo-chevron {
  flex-shrink: 0;
  color: var(--color-warning);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.2s;
}

.todo-panel-compact.open .todo-chevron {
  transform: rotate(180deg);
}

/* ========== Todo 列表 - 极简版 ========== */
.todo-list-compact {
  display: flex;
  flex-direction: column;
  gap: 1px; /* 极小间距 */
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed rgba(212, 144, 10, 0.25);
}

/* ========== Todo 单项 - 极简版 ========== */
.todo-item-compact {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0; /* 极小的垂直内边距 */
  font-size: 0.75rem;
  line-height: 1.3; /* 紧凑行高 */
  transition: background 0.15s;
}

.todo-item-compact:hover {
  background: rgba(212, 144, 10, 0.06);
}

/* 状态符号 ▶ ○ ✓ ✕ */
.todo-status-symbol {
  flex-shrink: 0;
  width: 12px;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--text-muted);
}

/* Todo 文本 */
.todo-text {
  flex: 1;
  color: var(--text-main);
  word-break: break-word;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* ========== 状态样式 ========== */

/* 进行中 - 橙色高亮 */
.todo-item-compact.status-in_progress .todo-status-symbol {
  color: var(--color-warning);
  animation: pulse-compact 1.5s ease-in-out infinite;
}

.todo-item-compact.status-in_progress .todo-text {
  color: var(--text-highlight);
  font-weight: 500;
}

/* 待处理 */
.todo-item-compact.status-pending .todo-status-symbol {
  color: var(--text-muted);
}

/* 已完成 - 绿色对勾 */
.todo-item-compact.status-completed .todo-status-symbol {
  color: var(--color-success);
}

.todo-item-compact.status-completed .todo-text {
  color: var(--text-muted);
}

/* 已取消 */
.todo-item-compact.status-cancelled {
  opacity: 0.5;
}

.todo-item-compact.status-cancelled .todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* ========== 优先级样式 ========== */

/* 高优先级 - 红色文本 */
.todo-item-compact.priority-high .todo-text {
  color: var(--color-secondary);
  font-weight: 500;
}

/* 中优先级 - 蓝色文本 */
.todo-item-compact.priority-medium .todo-text {
  color: var(--color-primary);
}

/* 低优先级 - 灰色淡化 */
.todo-item-compact.priority-low {
  opacity: 0.7;
}

/* ========== 动画 ========== */
@keyframes pulse-compact {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .todo-panel-compact {
    font-size: 0.75rem;
    padding: 3px 6px;
  }

  .todo-title {
    font-size: 0.75rem;
  }

  .todo-item-compact {
    font-size: 0.75rem;
    gap: 4px;
  }

  .todo-text {
    font-size: 0.75rem;
  }

  .todo-header-compact {
    padding: 6px 4px; /* 移动端加大点击区 */
  }
}

/* ========== 打印样式 ========== */
@media print {
  .todo-panel-compact {
    border: 1px solid var(--text-muted);
    page-break-inside: avoid;
  }

  .todo-chevron,
  .todo-dots {
    display: none;
  }

  .todo-list-compact {
    display: block !important;
  }
  
  @keyframes pulse-compact {
    0%, 100% {
      opacity: 1;
      transform: none;
    }
  }
}

}