// 任务卡片公共样式
.task-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  &:active {
    transform: scale(0.98);
    opacity: 0.9;
  }

  // 即将逾期卡片样式
  &.task-card-imminent {
    border-left: 4px solid #ff9800;
  }

  // 待完成卡片样式
  &.task-card-pending {
    border-left: 4px solid #2885ff;
  }

  // 已完成卡片样式
  &.task-card-completed {
    border-left: 4px solid #909399;
    opacity: 0.85;
  }

  // 逾期卡片样式
  &.task-card-overdue {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
    border-left: 4px solid #f56c6c;
    box-shadow: 0 2px 12px rgba(255, 68, 68, 0.1);
  }

  // 已取消卡片样式 - 优先级高于逾期
  &.task-card-cancelled {
    border-left: 4px solid #909399;
    opacity: 0.75;
    background: #f5f5f5;
  }
}

.task-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  justify-content: space-between;
}

.task-badge-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.task-date-wrapper {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding: 4px 8px;
}

.task-date {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.task-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-project {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.task-description {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  margin-bottom: 4px;
}

.task-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-owner {
  font-size: 12px;
  color: #666;
}

.task-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-time {
  font-size: 12px;
  color: #666;
}

.task-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.countdown-icon {
  font-size: 14px;
}

.countdown-text {
  font-size: 12px;
  font-weight: 500;

  &.countdown-warning {
    color: #ff9800;
  }

  &.countdown-primary {
    color: #2885ff;
  }

  &.countdown-error {
    color: #f56c6c;
  }
}

.task-action {
  display: flex;
  justify-content: flex-end;
}

// 任务容器样式
.task-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

// 空状态样式
.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

// 加载更多提示样式
.load-more-tip {
  padding: 20px;
  text-align: center;
}

.load-more-text {
  font-size: 12px;
  color: #999;
}